/* SyncroFlow V3.1 — Direzione A «Titoli di testa» per tutto il sito:
   intestazione, menu mobile, pulsanti, pagine delle app, SYNC, SyncroStore,
   installazione e footer. Usa i token di tokens.css; i fogli storici restano
   la base e questo livello ne unifica caratteri, colori e movimento. */

:root{
  --ink:var(--sf-ink);--muted:var(--sf-muted);--blue:var(--sf-action);--cyan:var(--sf-flow-cyan);
  --border:#e4dfd4;--pale:#f6f1e7;
}
body{font-family:var(--sf-font-text);color:var(--sf-ink);background:var(--sf-surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:where(main) :is(h1,h2,h3){font-family:var(--sf-font-display);text-wrap:balance;font-variation-settings:"opsz" 72}
main h1{font-weight:650;letter-spacing:-.04em;line-height:1}
main h2{font-weight:640;letter-spacing:-.03em;line-height:1.06}
main h3{font-weight:650;letter-spacing:-.015em;line-height:1.2}
main :is(p,li,td,th,summary,label){font-family:var(--sf-font-text)}
main h1 span{color:var(--sf-link)}
:focus-visible{outline:2px solid var(--sf-focus);outline-offset:3px;border-radius:4px}
::selection{background:#cfe9ee;color:var(--sf-ink)}

.eyebrow,.product-kicker,.calculator-caption{font-family:var(--sf-font-text);font-weight:650;letter-spacing:.12em;color:var(--sf-muted)}
.product-kicker{color:var(--accent,var(--sf-link))}
:is(.lead,.section-intro){font-size:var(--sf-size-lead);line-height:1.6;color:var(--sf-ink-soft);max-width:62ch}
main p{text-wrap:pretty}

/* ---------- Pulsanti e link ---------- */
.button{
  min-height:48px;padding:0 24px;gap:12px;border-radius:var(--sf-radius-pill);
  background:var(--sf-action);color:#fff;font:650 var(--sf-size-small)/1 var(--sf-font-text);letter-spacing:.005em;
  box-shadow:0 14px 28px -18px rgba(20,50,58,.8);
  transition:transform var(--sf-dur-fast) var(--sf-ease-out),background-color var(--sf-dur-fast) var(--sf-ease-out),box-shadow var(--sf-dur-fast) var(--sf-ease-out);
}
.button:hover{background:var(--sf-action-hover);transform:translate3d(0,-2px,0);box-shadow:0 18px 32px -18px rgba(20,50,58,.85)}
.button:active{transform:scale(.98);transition-duration:var(--sf-dur-micro)}
.button.small{min-height:42px;padding:0 20px}
.text-link{
  font:650 var(--sf-size-small)/1.3 var(--sf-font-text);color:var(--sf-ink);
  text-decoration:underline;text-decoration-color:var(--sf-line-strong);text-decoration-thickness:1.5px;text-underline-offset:6px;
  transition:text-decoration-color var(--sf-dur-fast) var(--sf-ease-out),color var(--sf-dur-fast) var(--sf-ease-out);
}
.text-link:hover{color:var(--accent,var(--sf-link));text-decoration-color:currentColor}

/* ---------- Intestazione ---------- */
body:not([data-page="home"]) .header{
  position:sticky;top:0;z-index:60;max-width:none;height:84px;padding:0 clamp(22px,4vw,64px);
  background:rgb(var(--sf-paper-rgb) / .96);border-bottom:1px solid var(--border);
}
.header .brand img{display:block}
.header nav{align-items:center;font:550 var(--sf-size-small)/1 var(--sf-font-text)}
.header nav>a,.header .app-menu summary{position:relative;color:var(--sf-ink-soft);padding:10px 0;transition:color var(--sf-dur-fast) var(--sf-ease-out)}
.header nav>a::after,.header .app-menu summary::after{
  content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;border-radius:2px;background:var(--sf-link);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--sf-dur-fast) var(--sf-ease-out);
}
.header nav>a:hover,.header .app-menu summary:hover{color:var(--sf-ink)}
.header nav>a:hover::after,.header nav>a[aria-current]::after{transform:none}
.header nav>a[aria-current]{color:var(--sf-ink);font-weight:700}
.film-ready .header nav{font-size:var(--sf-size-small)}
.film-ready .header>.button.small{background:var(--sf-action);color:#fff;font-size:var(--sf-size-small);padding:0 20px;min-height:42px}

/* Menu «Le app» */
.header .app-menu summary{cursor:pointer;list-style:none;font:inherit}
.header .app-menu summary::-webkit-details-marker{display:none}
.header .app-menu-list{
  padding:8px;border:1px solid var(--border);border-radius:var(--sf-radius-l);background:var(--sf-surface);
  box-shadow:0 30px 60px -30px rgba(20,50,58,.45),0 2px 6px rgba(20,50,58,.06);
}
.header .app-menu[open] .app-menu-list{animation:sf-menu-in var(--sf-dur-fast) var(--sf-ease-out) both;transform-origin:top center}
.header .app-menu-list a{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border-radius:12px;font:600 var(--sf-size-small)/1.2 var(--sf-font-text);color:var(--sf-ink);transition:background-color var(--sf-dur-quick) var(--sf-ease-out)}
.header .app-menu-list a:hover,.header .app-menu-list a[aria-current]{background:var(--pale)}
.header .app-menu-list img{width:32px;height:32px}
@keyframes sf-menu-in{from{opacity:0;transform:translate3d(0,-6px,0) scale(.97)}to{opacity:1;transform:none}}

/* Pulsante del menu mobile (aggiunto per la navigazione responsive) */
.menu-toggle{display:none}
@media (max-width:760px){
  .menu-toggle{
    display:inline-flex;align-items:center;gap:10px;margin-left:auto;min-height:44px;padding:0 16px 0 14px;
    border:1px solid var(--sf-line-strong);border-radius:var(--sf-radius-pill);background:rgb(var(--sf-paper-rgb) / .9);
    color:var(--sf-ink);font:650 var(--sf-size-small)/1 var(--sf-font-text);cursor:pointer;
  }
  .menu-toggle-icon{position:relative;width:18px;height:12px}
  .menu-toggle-icon i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform var(--sf-dur-fast) var(--sf-ease-out),top var(--sf-dur-fast) var(--sf-ease-out)}
  .menu-toggle-icon i:first-child{top:1px}
  .menu-toggle-icon i:last-child{top:9px}
  .header.is-menu-open .menu-toggle-icon i:first-child{top:5px;transform:rotate(45deg)}
  .header.is-menu-open .menu-toggle-icon i:last-child{top:5px;transform:rotate(-45deg)}

  body .header{position:relative}
  body:not([data-page="home"]) .header{position:sticky;height:72px;padding:0 18px;gap:12px}
  .film-ready .header{position:absolute;padding:8px 16px;gap:12px}
  body .header>.button.small{display:none}
  body .header nav,.film-ready .header nav{
    position:absolute;top:calc(100% + 6px);left:12px;right:12px;z-index:80;
    display:flex;flex-direction:column;align-items:stretch;gap:0;width:auto;padding:8px;
    background:var(--sf-surface);border:1px solid var(--border);border-radius:var(--sf-radius-l);
    box-shadow:0 30px 60px -28px rgba(20,50,58,.55);font-size:var(--sf-size-body);
    opacity:0;visibility:hidden;transform:translate3d(0,-8px,0) scale(.98);transform-origin:top center;pointer-events:none;
    transition:opacity var(--sf-dur-quick) var(--sf-ease-out),transform var(--sf-dur-quick) var(--sf-ease-out),visibility 0s linear var(--sf-dur-quick);
  }
  body .header.is-menu-open nav{
    opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity var(--sf-dur-fast) var(--sf-ease-out),transform var(--sf-dur-fast) var(--sf-ease-out),visibility 0s;
  }
  body .header nav>a,.film-ready .header nav>a,.film-ready .header nav>a[href='/syncrostore/'],body .header .app-menu summary{
    display:flex;align-items:center;min-height:52px;padding:0 14px;border-radius:14px;color:var(--sf-ink);font-size:var(--sf-size-body);font-weight:600;
  }
  body .header nav>a::after,body .header .app-menu summary::after{display:none}
  body .header nav>a[aria-current]{background:var(--pale)}
  body .header nav>a:hover,body .header .app-menu summary:hover{background:var(--pale)}
  body .header .app-menu{position:static}
  body .header .app-menu summary{justify-content:space-between}
  body .header .app-menu-list{position:static;width:auto;margin:0 0 4px;padding:2px 0 6px 8px;border:0;box-shadow:none;background:none;display:grid;grid-template-columns:1fr 1fr;gap:2px;transform:none;left:auto}
  body .header .app-menu[open] .app-menu-list{animation:none}
  .film-ready .header nav{font-size:var(--sf-size-body)}
}

/* ---------- Pagine delle app ---------- */
.breadcrumbs{font:500 var(--sf-size-caption)/1.4 var(--sf-font-text);color:var(--sf-muted)}
.breadcrumbs a{color:var(--sf-ink-soft);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color var(--sf-dur-fast)}
.breadcrumbs a:hover{text-decoration-color:currentColor}
body:not([data-page="home"]) .product-hero>div:first-child{animation:sf-page-in var(--sf-dur-very-slow) var(--sf-ease-out) both}
@keyframes sf-page-in{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
body:not([data-page="home"]) .product-identity{transform:none;border-radius:var(--sf-radius-l);border:1px solid var(--border);background:radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--pale) 100%);box-shadow:var(--sf-shadow-lift)}
body:not([data-page="home"]) .product-identity:hover{transform:translate3d(0,-3px,0)}
.product-hero h1{color:var(--sf-ink)}
.product-hero .lead{color:var(--sf-ink-soft)}
.feature-num,.workflow-overview ol li>span{font-family:var(--sf-font-display);font-variant-numeric:tabular-nums}
.focus-sidebar{top:108px;border-radius:var(--sf-radius-m);border-color:var(--border);background:var(--sf-surface)}
.focus-sidebar a{transition:color var(--sf-dur-fast) var(--sf-ease-out),transform var(--sf-dur-fast) var(--sf-ease-out)}
.focus-sidebar a:hover{color:var(--accent,var(--sf-link))}
:is(.workflow-overview,.page-cta,.app-sync-note,.idea-note,.roadmap-note-block,.estate-trial){border-radius:var(--sf-radius-l)}
:is(.usage-example,.feature-preview){border-radius:var(--sf-radius-m)}
.status-pill{font-family:var(--sf-font-text);font-weight:700;letter-spacing:.1em;border-radius:var(--sf-radius-pill)}

/* Piani e tabelle */
:is(.plan,.install-card,.related-apps>a,.sync-management article,.use-grid article,.install-apps>a,.brand-apps>a,.space-map-destination){
  border-radius:var(--sf-radius-m);
  transition:border-color var(--sf-dur-fast) var(--sf-ease-out),transform var(--sf-dur-fast) var(--sf-ease-out),box-shadow var(--sf-dur-fast) var(--sf-ease-out);
}
:is(.related-apps>a,.install-apps>a):hover{transform:translate3d(0,-2px,0);box-shadow:var(--sf-shadow-lift)}
.plan .plan-price,.personal-price,.big-number{font-family:var(--sf-font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.comparison-table,.sync-table{font-family:var(--sf-font-text);font-variant-numeric:tabular-nums}
.comparison-table thead th,.sync-table thead th{font-weight:700;color:var(--sf-ink)}
.comparison-table tbody tr,.sync-table tbody tr{transition:background-color var(--sf-dur-quick) var(--sf-ease-out)}
.comparison-table tbody tr:hover,.sync-table tbody tr:hover{background:#fbf8f2}
.segmented,.price-controls{font-family:var(--sf-font-text)}
details>summary{cursor:pointer}
details[open]>summary~*{animation:sf-page-in var(--sf-dur-fast) var(--sf-ease-out) both}

/* SYNC e installazione */
.sync-calculator output{font-family:var(--sf-font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sync-calculator :is(select,input){font:500 var(--sf-size-body)/1.3 var(--sf-font-text);min-height:48px;border-radius:12px}
.install-apps>a strong,.related-apps strong{font-family:var(--sf-font-text)}

/* SyncroStore: resta notturno, con i caratteri e il movimento di SyncroFlow. */
body .syncrostore{font-family:var(--sf-font-text)}
body .syncrostore :is(h1,h2,h3,.store-total,output){font-family:var(--sf-font-display);letter-spacing:-.03em}
body .syncrostore :is(.store-pill,.store-tier){transition:border-color var(--sf-dur-fast) var(--sf-ease-out),background-color var(--sf-dur-fast) var(--sf-ease-out),transform var(--sf-dur-fast) var(--sf-ease-out)}
body .syncrostore :is(.store-pill,.store-tier):active{transform:scale(.98)}

/* ---------- Footer ---------- */
body:not([data-page="home"]) footer{border-top:1px solid var(--border);margin-top:48px}
.footer-brand{font:700 1.625rem/1 var(--sf-font-display);letter-spacing:-.03em;color:var(--sf-ink)}
.footer-brand span{color:var(--sf-flow-blue)}
.footer-brand p{margin-top:8px;font:400 var(--sf-size-small)/1.4 var(--sf-font-text);letter-spacing:0;color:var(--sf-muted)}
.footer-links{font:550 var(--sf-size-small)/1.3 var(--sf-font-text)}
.footer-links a{color:var(--sf-ink-soft);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color var(--sf-dur-fast),color var(--sf-dur-fast)}
.footer-links a:hover{color:var(--sf-ink);text-decoration-color:currentColor}
footer small{font-size:var(--sf-size-caption)}

/* ---------- Leggibilità su smartphone ---------- */
@media (max-width:760px){
  .eyebrow{font-size:var(--sf-size-caption)}
  main h1{letter-spacing:-.035em}
  :is(.lead,.section-intro){font-size:var(--sf-size-body)}
  .footer-links{flex-wrap:wrap;gap:12px 20px}
  .footer-links a{min-height:32px;display:inline-flex;align-items:center}
}

/* ---------- Passaggio tra le pagine ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:sf-vt-out var(--sf-dur-quick) var(--sf-ease-in) both}
::view-transition-new(root){animation:sf-vt-in var(--sf-dur-fast) var(--sf-ease-out) both}
@keyframes sf-vt-out{to{opacity:0}}
@keyframes sf-vt-in{from{opacity:0;transform:translate3d(0,8px,0)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .button,.text-link,.header nav,.header nav *,.menu-toggle *,.product-identity,details>summary~*,.header .app-menu-list,body:not([data-page="home"]) .product-hero>div:first-child{transition:none!important;animation:none!important}
}