/* ==========================================================================
   Outfitly: Your Wardrobe — site.css
   Design system derivato da BRAND_GUIDELINES.md (token reali di css/styles.css
   dell'app + palette marketing degli screenshot store).
   Nessuna dipendenza: solo CSS moderno.
   ========================================================================== */

/* ── 1 · TOKEN ───────────────────────────────────────────────────────────── */
:root{
  /* superfici — la "carta" del brand, mai bianco puro */
  --paper:#F3EFE8;
  --paper-2:#ECE6DB;
  --paper-3:#E3CDBB;          /* fondo caldo della palette marketing */
  --card:#FFFDF8;

  /* inchiostri */
  --ink:#1B1813;
  --ink-2:#5F584C;
  --muted:#9A917F;
  --line:#E6E0D4;

  /* accenti */
  --accent:#C0563A;           /* terracotta — il colore del brand */
  --accent-2:#A6482E;         /* stesso colore, portato a contrasto su fondo tenue */
  --accent-soft:#F4E2DA;
  --gold:#A9823F;             /* accento secondario del feature graphic */
  --gold-ink:#8A6A30;         /* stesso oro, portato a contrasto da testo */

  /* Il pulsante non cambia con il tema. È l'unico elemento della pagina che
     deve restare identico di giorno e di notte: è il colore che la gente
     riconosce sullo store, e l'unica combinazione su cui il bianco raggiunge
     il contrasto richiesto (4,5:1). Schiarirlo di notte lo romperebbe. */
  --btn-bg:#C0563A;
  --btn-bg-2:#A6482E;
  --btn-ink:#FFFFFF;

  /* notte */
  --night:#141210;
  --night-2:#221E19;
  --night-ink:#F3EEE5;
  --night-ink-2:#C6BEAF;
  --night-muted:#8A8272;
  --night-line:#332E27;
  --night-accent:#DB6B4C;

  /* l'unica superficie fredda del brand: il meteo */
  --slate-a:#46617D;
  --slate-b:#2D3F52;

  --serif:'Playfair Display','New York',Georgia,'Times New Roman',serif;
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(22px,5.2vw,96px);
  --maxw:1560px;
  --sec:clamp(104px,15vh,208px);

  /* ombre brune e debolissime — l'elevazione la fa il bordo */
  --sh-sm:0 3px 12px rgba(45,32,20,.07);
  --sh:0 10px 34px rgba(45,32,20,.09);
  --sh-lift:0 40px 90px -28px rgba(90,60,40,.34), 0 14px 32px -18px rgba(45,32,20,.22);
}

/* ── 1b · NOTTE ──────────────────────────────────────────────────────────
   Gli stessi token, riletti al buio. La carta diventa terra bruciata, non
   grigio: il brand è caldo, e un grigio neutro qui sembrerebbe un altro sito.
   Le due sezioni già scure (meteo, privacy) scendono ancora di un gradino,
   altrimenti di notte sparirebbero dentro la pagina invece di staccarsene.  */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#13110E;
    --paper-2:#1B1815;
    --paper-3:#282219;
    --card:#1E1A16;

    --ink:#F2EDE4;
    --ink-2:#B5AC9C;
    --muted:#80786A;
    --line:#302A23;

    --accent:#E38063;         /* di notte la terracotta va schiarita o sparisce */
    --accent-2:#F0A187;
    --accent-soft:#2E1F18;
    --gold:#C79B52;
    --gold-ink:#CFA65E;

    --night:#0B0908;          /* più scuro della pagina, non uguale */
    --night-2:#141110;
    --night-line:#2A241E;

    --slate-a:#2B3C4D;        /* il meteo resta l'unica superficie fredda */
    --slate-b:#1C2734;

    --sh-sm:0 3px 12px rgba(0,0,0,.4);
    --sh:0 10px 34px rgba(0,0,0,.45);
    --sh-lift:0 40px 90px -28px rgba(0,0,0,.72), 0 14px 32px -18px rgba(0,0,0,.5);
  }
}

/* ── 2 · BASE ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Con il pannello aperto la pagina sotto non deve scorrere: la mano che
   trascina il menu non deve muovere anche il sito che c'è dietro. */
html.menu-open,html.menu-open body{overflow:hidden}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15.5px,.55vw + 13.6px,17px);
  line-height:1.66;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
button{
  font:inherit;color:inherit;cursor:pointer;
  border:0;background:none;-webkit-appearance:none;appearance:none;
}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--paper)}

/* grana pellicola — la texture che tiene insieme "carta" e fotografia */
.grain{
  position:fixed;inset:-100%;z-index:9999;pointer-events:none;opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  .grain{opacity:.5;mix-blend-mode:overlay}
}

/* ── 3 · TIPOGRAFIA ──────────────────────────────────────────────────────── */
.display,.h1,.slogan{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.032em;
  text-wrap:balance;
}
.display{font-size:clamp(3rem,7.4vw,9.2rem);line-height:.87;letter-spacing:-.042em}
.h1{font-size:clamp(2.3rem,5vw,4.9rem);line-height:.97}
.slogan{font-size:clamp(2.1rem,5.1vw,4.9rem);line-height:1.02}
em{font-style:italic;font-weight:400}

.eyebrow{
  font-size:.7rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:.85em;
}
.eyebrow--gold{color:var(--gold-ink)}
.eyebrow--light{color:var(--night-muted)}
.eyebrow .idx{
  font-family:var(--serif);font-style:normal;font-size:.95rem;font-weight:400;
  letter-spacing:.04em;color:var(--accent);
}
.eyebrow--light .idx{color:var(--night-accent)}

.kicker{
  font-size:.68rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-2);
}
.kicker--wide{
  display:flex;align-items:center;gap:1.4em;margin-bottom:clamp(20px,3vw,40px);
}
.kicker--wide::after{content:"";flex:1;height:1px;background:var(--line)}

.lead{
  font-size:clamp(1rem,.42vw + .92rem,1.16rem);line-height:1.74;
  color:var(--ink-2);max-width:44ch;font-weight:300;
}
.caption{font-size:.94rem;line-height:1.72;color:var(--ink-2);max-width:38ch}
.micro{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

/* asterisco a 8 punte — il segno "assistente" del brand */
.ast{
  display:inline-block;width:.62em;height:.62em;flex:none;
  background:currentColor;opacity:.55;
  clip-path:polygon(50% 0,58% 36%,88% 12%,64% 42%,100% 50%,64% 58%,88% 88%,58% 64%,50% 100%,42% 64%,12% 88%,36% 58%,0 50%,36% 42%,12% 12%,42% 36%);
}
.dot{
  display:inline-block;width:3px;height:3px;border-radius:50%;flex:none;
  background:currentColor;opacity:.4;vertical-align:.28em;margin:0 .55em;
}

.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  padding:.85em 1.4em;border-radius:999px;
  background:var(--ink);color:var(--paper);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  transform:translateY(-160%);transition:transform .3s var(--ease);
}
.skip:focus{transform:none}

/* ── 4 · AZIONI ──────────────────────────────────────────────────────────── */
.btn{
  --bg:var(--btn-bg);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1.15em 2.5em;border-radius:999px;overflow:hidden;isolation:isolate;
  font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--btn-ink);background:var(--bg);
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--btn-bg) 60%,transparent);
  /* `--mx`/`--my` li scrive il puntatore: il pulsante si sposta di pochi
     pixel verso il dito che lo sta cercando, e torna a posto da solo. */
  transform:translate3d(var(--mx,0px),var(--my,0px),0);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.btn span{position:relative;z-index:1;transition:transform .5s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--btn-bg-2);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover{box-shadow:0 16px 34px -10px color-mix(in srgb,var(--btn-bg) 62%,transparent)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(.975)}
.btn--sm{padding:.9em 1.7em;font-size:.66rem;letter-spacing:.16em}
.btn--lg{padding:1.35em 3.4em;font-size:.8rem}

.link{
  position:relative;font-size:.76rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);padding-bottom:.5em;
}
.link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .55s var(--ease);
}
.link:hover::after{transform:scaleX(0)}

:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

/* ── 5 · ANIMAZIONE ──────────────────────────────────────────────────────── */
/* La classe `js` la scrive uno script in <head>. Senza JavaScript — o se lo
   script fallisce — nessuna di queste regole si applica e la pagina resta
   interamente leggibile: l'animazione è un di più, mai un prerequisito. */
/* L'ingresso non è solo una salita: c'è anche una sfocatura che si toglie.
   È quello che fa sembrare l'elemento "a fuoco" invece che "arrivato", e
   costa nulla perché filter e opacity stanno sulla scheda grafica. */
.js [data-reveal]{
  opacity:0;transform:translateY(26px) scale(.994);filter:blur(7px);
  transition:
    opacity .95s var(--ease) var(--d,0s),
    transform 1.05s var(--ease) var(--d,0s),
    filter .9s var(--ease) var(--d,0s);
}
.js [data-reveal].is-in{opacity:1;transform:none;filter:none}

/* Liste che entrano una voce alla volta. L'indice lo scrive il markup
   (`style="--i:3"`), così la cascata non ha bisogno di JavaScript. */
.js [data-stagger]>*{
  opacity:0;transform:translateY(20px);
  transition:
    opacity .8s var(--ease) calc(var(--i,0) * 60ms + var(--d,0s)),
    transform .8s var(--ease) calc(var(--i,0) * 60ms + var(--d,0s));
}
.js [data-stagger].is-in>*{opacity:1;transform:none}

.rl__l{
  display:block;overflow:hidden;
  padding:.04em .1em .3em 0;margin:-.04em -.1em -.3em 0;
}
.js .rl__l>span{
  display:block;transform:translateY(145%);
  transition:transform 1.15s var(--ease);
}
.js .rl__l:nth-child(2)>span{transition-delay:.1s}
.js .rl__l:nth-child(3)>span{transition-delay:.2s}
.js .rl.is-in .rl__l>span{transform:none}

[data-par]{
  transform:translate3d(0,var(--py,0px),0) rotate(var(--rot,0deg)) scale(var(--scl,1));
}

.frame{position:relative;overflow:hidden;background:var(--paper-2)}
.frame img{
  position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;
}

/* Blocco terracotta dietro la parola dell'hero. È il gesto più forte della
   pagina: si usa UNA volta sola, e per quello funziona. `line-height` e
   `padding` sono tarati perché il riquadro contenga la discendente della g,
   non le passi sopra; il margine negativo in basso impedisce che l'altezza
   in più allarghi l'interlinea del titolo. */
.mark{
  display:inline-block;
  background:var(--accent);
  color:var(--paper);
  line-height:.94;
  padding:.09em .1em .24em .09em;
  margin:0 -.05em -.13em -.06em;
}

/* ── 6 · TELEFONO ────────────────────────────────────────────────────────── */
/* Geometria fedele agli screenshot store: schermo 545×1130, r 44 → i fattori
   sotto ricostruiscono scocca e raggio a qualunque larghezza. */
.device{
  --dw:340px;
  position:relative;
  width:var(--dw);flex:none;
  padding:calc(var(--dw) * .023);
  background:linear-gradient(155deg,#3A342C 0%,#17140F 34%,#0E0C0A 100%);
  border-radius:calc(var(--dw) * .106);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 2px 3px rgba(0,0,0,.28),
    var(--sh-lift);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
}
.device img{
  display:block;width:100%;height:auto;
  border-radius:calc(var(--dw) * .083);
  background:var(--card);
}

/* Il riflesso sul vetro. Una diagonale chiarissima sopra lo schermo: senza,
   la scocca è un rettangolo nero e lo schermo un adesivo incollato sopra.
   `pointer-events:none` perché il vetro non deve intercettare niente. */
.device::after{
  content:"";position:absolute;inset:calc(var(--dw) * .023);
  border-radius:calc(var(--dw) * .083);pointer-events:none;
  background:linear-gradient(118deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.07) 13%,
    transparent 30%,
    transparent 72%,
    rgba(255,255,255,.05) 100%);
  mix-blend-mode:screen;opacity:.75;
}

/* Il pulsante laterale e il bilanciere del volume: due tacche di un pixel di
   luce sul bordo. Si notano solo se si guarda, ed è esattamente il punto. */
.device::before{
  content:"";position:absolute;right:calc(var(--dw) * -.006);top:26%;
  width:calc(var(--dw) * .008);height:9%;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(0,0,0,.4));
}

/* Inclinazione al puntatore. Gli angoli li scrive site.js dentro due
   variabili, così la transizione resta sul composito e non tocca il layout.
   Solo dove esiste un puntatore preciso: sul telefono non ha senso. */
@media (hover:hover) and (pointer:fine){
  .device--tilt{
    transform:perspective(1400px)
              rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))
              translate3d(0,var(--py,0px),0);
    transition:transform .45s var(--ease);
  }
  .device--tilt:hover{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 54px 110px -30px rgba(60,38,24,.42)}
}
@media (prefers-color-scheme:dark){
  .device--tilt:hover{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 54px 110px -30px rgba(0,0,0,.78)}
}

/* Lo schermo che cambia da solo. Nell'hero il telefono non mostra una foto
   sola: passa fra tre schermate vere, con una dissolvenza lunga. È l'unica
   animazione in loop della pagina, e c'è per una ragione precisa: un'app di
   armadio deve far vedere subito che dentro c'è più di una cosa.
   Senza JavaScript resta ferma sulla prima, che è quella giusta.           */
.swap{position:relative;display:block}
.swap>img:not(:first-child){
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
}
.js .swap>img{transition:opacity 1.1s var(--ease)}
.js .swap>img.is-on{opacity:1}
.js .swap>img:first-child:not(.is-on){opacity:0}

/* ── 7 · NAV ─────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:clamp(20px,4vw,64px);
  padding:clamp(16px,1.6vw,26px) var(--gut);
  transition:transform .6s var(--ease),background .5s ease,border-color .5s ease,padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
          backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
  padding-top:clamp(12px,1vw,16px);padding-bottom:clamp(12px,1vw,16px);
}
.nav.is-hidden{transform:translateY(-102%)}
.nav.is-open{
  background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.nav.is-open .nav__prog{opacity:0}

/* Sopra meteo, privacy e piede la barra cambia registro: stessa forma, materiale
   opposto. Senza, una banda avorio taglia in due le uniche sezioni scure. */
.nav.is-dark.is-stuck{
  background:color-mix(in srgb,var(--night) 78%,transparent);
  border-bottom-color:var(--night-line);
}
.nav.is-dark .nav__word{color:var(--night-ink)}
.nav.is-dark .nav__links a{color:var(--night-ink-2)}
.nav.is-dark .nav__links a:hover{color:var(--night-ink)}
.nav.is-dark .nav__links a::after{background:var(--night-accent)}
.nav__word{
  font-family:var(--serif);font-size:1.42rem;font-weight:700;letter-spacing:-.015em;
  transition:color .45s ease;
}
.nav__links{display:flex;gap:clamp(18px,2.2vw,38px);margin-left:auto}
.nav__links a{
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  position:relative;padding-bottom:2px;transition:color .45s ease;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.nav__links a:hover{color:var(--accent)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav .btn{margin-left:0}

/* Selettore di lingua. Sta nella barra e non in un pannello nascosto: chi
   arriva sulla pagina "sbagliata" deve vedere l'uscita, non cercarla. */
.lang{
  display:flex;align-items:center;gap:.55em;flex:none;
  font-size:.72rem;font-weight:400;letter-spacing:.12em;
  color:var(--muted);
}
/* "IT" è largo 12px: da solo sarebbe un bersaglio impossibile su un telefono.
   Il padding allarga l'area toccabile, il margine negativo rimette a posto la
   spaziatura ottica. */
.lang a{
  color:var(--ink);transition:color .4s ease;
  padding:1em .6em;margin:-1em -.6em;
}
.lang a:hover{color:var(--accent)}
.lang .lang__on{
  color:var(--ink);font-weight:500;
  text-decoration:underline;text-underline-offset:.4em;text-decoration-thickness:1px;
}
.nav.is-dark .lang{color:var(--night-muted)}
.nav.is-dark .lang a{color:var(--night-ink-2)}
.nav.is-dark .lang a:hover{color:var(--night-accent)}
.nav.is-dark .lang a{color:var(--night-ink)}
.nav.is-dark .lang .lang__on{color:var(--night-ink)}
.foot__cols a[data-lang]{color:var(--night-ink-2)}

/* ── 8 · HERO ────────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,45vw,760px);
  align-items:stretch;
  background:
    radial-gradient(120% 86% at 78% -14%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 62%),
    linear-gradient(178deg,var(--paper) 0%,var(--paper) 52%,var(--paper-2) 100%);
}
.hero__type{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(130px,17vh,190px) 0 clamp(70px,10vh,110px) var(--gut);
  padding-right:clamp(26px,5.6vw,104px);
  position:relative;z-index:2;
}
.hero .display{margin:clamp(20px,2.6vh,36px) 0 0}
.hero__sub{
  margin-top:clamp(26px,3.4vh,44px);max-width:30ch;
  font-size:clamp(1.02rem,.5vw + .92rem,1.24rem);line-height:1.6;color:var(--ink-2);
}
.hero__cta{
  display:flex;align-items:center;gap:clamp(22px,3vw,44px);flex-wrap:wrap;
  margin-top:clamp(34px,4.4vh,56px);
}
.hero__meta{
  margin-top:clamp(28px,4vh,52px);
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
}

.hero__art{position:relative}
.hero__frame{position:absolute;inset:0 0 0 0;background:var(--paper-3)}
.hero__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,color-mix(in srgb,var(--paper) 70%,transparent) 0%,transparent 32%);
}
/* La barra passa sopra la fotografia, e su un abito nero l'inchiostro bruno
   dei link spariva. Invece di mettere un fondo opaco sulla barra — che
   spegnerebbe l'apertura a tutto campo — la fotografia si schiarisce in cima:
   è un velo che finisce dove finisce la barra. Sul lato avorio non si vede,
   perché è dello stesso colore della carta. */
.hero__frame::before{
  content:"";position:absolute;top:0;left:0;right:0;height:clamp(150px,17vh,215px);
  z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,
    var(--paper) 0%,
    color-mix(in srgb,var(--paper) 90%,transparent) 30%,
    color-mix(in srgb,var(--paper) 45%,transparent) 62%,
    transparent 100%);
}
.hero__device{
  --dw:clamp(170px,17vw,256px);
  position:absolute;left:-20%;bottom:6%;z-index:3;
}
.hero__scroll{
  position:absolute;left:var(--gut);bottom:clamp(22px,3.6vh,40px);z-index:4;
  display:flex;align-items:center;gap:14px;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.hero__scroll i{display:block;width:64px;height:1px;background:var(--line);overflow:hidden;position:relative}
.hero__scroll i::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform-origin:left;animation:sweep 2.9s var(--ease) infinite;
}
@keyframes sweep{
  0%{transform:scaleX(0);transform-origin:left}
  42%{transform:scaleX(1);transform-origin:left}
  58%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}

/* ── 9 · STATS ───────────────────────────────────────────────────────────── */
.stats{
  padding:clamp(46px,6vw,84px) var(--gut);
  background:var(--paper-2);border-block:1px solid var(--line);
}
.stats ul{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,32px);
}
.stats li{
  display:flex;flex-direction:column;gap:.5em;padding-left:clamp(14px,1.8vw,30px);
  border-left:1px solid var(--line);
}
.stats li:first-child{border-left:0;padding-left:0}
.stats b{
  font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.4vw,3.4rem);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.stats span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}

/* ── 10 · SEZIONI ────────────────────────────────────────────────────────── */
.sec{padding:var(--sec) var(--gut);max-width:var(--maxw);margin-inline:auto}

/* 01 · problema ---------------------------------------------------------- */
.problem{
  display:grid;grid-template-columns:minmax(320px,43%) 1fr;
  gap:clamp(36px,4.6vw,86px);align-items:start;
}
.problem__type{position:sticky;top:clamp(120px,18vh,190px)}
.problem .h1{margin:clamp(18px,2.4vw,32px) 0 clamp(24px,3vw,40px)}

.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.1vw,20px)}
.wall__col{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,20px)}
.wall__col:nth-child(2){margin-top:clamp(28px,5vw,80px)}
.wall__col:nth-child(4){margin-top:clamp(16px,3vw,46px)}
.wall img{
  width:100%;height:auto;border-radius:3px;background:var(--paper-2);
  filter:saturate(.9);
}
@media (prefers-color-scheme:dark){
  .wall img{filter:saturate(.86) brightness(.88)}
}

/* 02 · stylist ------------------------------------------------------------ */
.stylist{
  display:grid;grid-template-columns:minmax(280px,40%) 1fr;
  gap:clamp(44px,5vw,100px);align-items:center;
}
.stylist__art{position:relative;display:flex;justify-content:center}
.score{
  position:absolute;right:-5%;bottom:21%;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:1.1rem 1.5rem 1.2rem;box-shadow:var(--sh);
}
.score__label{
  font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.3em;
}
.score__n{display:flex;align-items:baseline;gap:.12em;color:var(--accent)}
.score__n b{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;letter-spacing:-.03em}
.score__n i{font-style:normal;font-size:.9rem;font-weight:400;opacity:.7}

.stylist .h1{margin:clamp(18px,2.4vw,32px) 0 0}
.equation{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);flex-wrap:wrap;
  margin:clamp(26px,3.4vw,44px) 0 clamp(22px,2.6vw,34px);
  font-size:clamp(.72rem,.9vw,.86rem);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink);
}
.equation .ast{color:var(--accent);opacity:1}

.reasons{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:clamp(26px,3vw,40px)}
.reasons li{
  padding:.62em 1.15em;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-2);
  font-size:.76rem;font-weight:400;letter-spacing:.02em;
}
.reasons li::before{content:"✓  ";opacity:.55}

/* veto ------------------------------------------------------------------- */
.quote{
  padding:clamp(104px,14vw,200px) var(--gut);text-align:center;
  background:var(--paper-2);border-block:1px solid var(--line);
}
.quote__t{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.85rem,4.7vw,4rem);line-height:1.14;letter-spacing:-.028em;
  max-width:19ch;margin-inline:auto;
}
.quote__t em{color:var(--accent)}
.quote__f{
  margin-top:clamp(22px,2.6vw,36px);
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  line-height:2.05;
}

/* 03 · giornata ----------------------------------------------------------- */
.day__head{
  display:grid;grid-template-columns:1fr minmax(260px,38%);
  gap:clamp(40px,6vw,110px);align-items:center;
}
.day .h1{margin:clamp(18px,2.4vw,32px) 0 clamp(24px,3vw,38px)}
.day__device{justify-self:end}
.day .kicker{margin-top:clamp(38px,5vw,64px);display:block}

.occ{
  display:flex;flex-wrap:wrap;gap:clamp(14px,1.8vw,30px);
  margin-top:clamp(16px,2vw,26px);
}
.occ li{
  font-family:var(--serif);font-size:clamp(1.25rem,2.3vw,2rem);font-weight:400;
  letter-spacing:-.02em;color:var(--ink);position:relative;
}
.occ li+li::before{
  content:"";position:absolute;left:calc(-1 * clamp(9px,.9vw,15px));top:.42em;
  width:3px;height:3px;border-radius:50%;background:var(--accent);
}

.moods{margin-top:clamp(72px,10vw,150px)}
.ladder{border-top:1px solid var(--line)}
.ladder li{
  display:grid;grid-template-columns:auto minmax(190px,25%) minmax(0,1fr);
  align-items:baseline;gap:clamp(14px,1.8vw,32px);
  padding:clamp(18px,2.4vw,32px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .6s var(--ease),background .5s ease;
}
.ladder li:hover{padding-left:clamp(8px,1.4vw,26px)}
.ladder i{
  font-style:normal;font-size:.74rem;letter-spacing:.12em;color:var(--accent);
  font-variant-numeric:tabular-nums;opacity:.75;
}
.ladder b{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,3vw,2.7rem);line-height:1.06;letter-spacing:-.025em;
  transition:color .5s ease;
}
.ladder li:hover b{color:var(--accent)}
.ladder span{font-size:.98rem;color:var(--ink-2);line-height:1.6;max-width:40ch}

/* 04 · meteo -------------------------------------------------------------- */
.weather{
  max-width:none;margin:0;
  display:grid;grid-template-columns:1fr minmax(280px,40%);
  gap:clamp(44px,6vw,110px);align-items:center;
  padding-inline:max(var(--gut),calc((100vw - var(--maxw)) / 2 + var(--gut)));
  background:linear-gradient(148deg,var(--slate-a) 0%,var(--slate-b) 62%,#22303f 100%);
  color:#fff;
}
.weather .h1{margin:clamp(18px,2.4vw,32px) 0 clamp(24px,3vw,38px)}
.weather .lead{color:rgba(255,255,255,.8)}
.advice{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,1.9vw,1.6rem);line-height:1.5;
  color:rgba(255,255,255,.94);max-width:26ch;
  margin:clamp(30px,3.6vw,46px) 0 clamp(30px,3.6vw,46px);
  padding-left:clamp(16px,1.6vw,26px);border-left:2px solid rgba(255,255,255,.3);
}
.forecast{display:flex;gap:clamp(18px,2.6vw,48px);flex-wrap:wrap}
.forecast li{display:flex;flex-direction:column;gap:.3em}
.forecast span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.forecast b{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.8vw,2.6rem);
  line-height:1;letter-spacing:-.02em;
}
.weather .micro{margin-top:clamp(26px,3vw,40px);color:rgba(255,255,255,.5)}
.weather__device{justify-self:end}

/* 05 · armadio ------------------------------------------------------------ */
.wardrobe__type{max-width:52ch;margin-bottom:clamp(56px,8vw,110px)}
.wardrobe .h1{margin:clamp(18px,2.4vw,32px) 0 clamp(24px,3vw,38px)}

.stack{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(14px,3vw,58px);padding-block:clamp(20px,4vw,60px);
}
.stack__d{position:relative}
.stack__d .device{width:100%}
.stack__d--back{order:1}
.stack__d--main{order:2}
.stack__d--side{order:3}
.stack__d--main{--dw:clamp(190px,25vw,330px);width:var(--dw);z-index:3}
.stack__d--main .device{--dw:clamp(190px,25vw,330px)}
.stack__d--back{--dw:clamp(130px,18vw,240px);width:var(--dw);z-index:2;margin-bottom:clamp(28px,5vw,84px)}
.stack__d--back .device{--dw:clamp(130px,18vw,240px)}
.stack__d--side{--dw:clamp(130px,18vw,240px);width:var(--dw);z-index:2;margin-bottom:clamp(52px,9vw,140px)}
.stack__d--side .device{--dw:clamp(130px,18vw,240px)}
.stack__d figcaption{
  position:absolute;left:0;right:0;bottom:calc(-1 * clamp(26px,3vw,42px));text-align:center;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);
}
.stack__float{
  position:absolute;width:clamp(88px,11vw,168px);height:auto;border-radius:3px;
  box-shadow:var(--sh);z-index:1;
}
.stack__float--a{left:2%;top:6%;--rot:-5deg}
.stack__float--b{right:1%;top:5%;--rot:4deg}
.stack__float--c{right:9%;bottom:-4%;--rot:-3deg;z-index:4}

.stack__dots{display:none}

/* 05 · valigia -----------------------------------------------------------
   Qui la pagina cambia respiro: niente telefono, ma un cartellino da bagaglio.
   Dopo quattro sezioni con uno schermo dentro, un oggetto di carta rimette
   ritmo — ed è anche l'unico posto dove i dati dell'app si leggono come dati. */
.trip{
  display:grid;grid-template-columns:minmax(280px,47%) 1fr;
  gap:clamp(36px,5vw,96px);align-items:center;
}
.trip .h1{margin:clamp(18px,2.4vw,32px) 0 clamp(22px,2.8vw,34px)}
.trip__img{aspect-ratio:5/4;border-radius:4px}

.tag{
  margin-top:clamp(30px,3.6vw,46px);
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(18px,1.9vw,26px) clamp(18px,2vw,28px) clamp(16px,1.7vw,22px);
  box-shadow:var(--sh-sm);
}
.tag__head{
  display:flex;align-items:center;gap:.8em;
  font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2);
  padding-bottom:clamp(12px,1.3vw,16px);border-bottom:1px solid var(--line);
}
.tag__head .ast{color:var(--gold-ink);opacity:1}
.tag__grid{
  display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;
  gap:clamp(12px,1.6vw,26px);
  padding:clamp(15px,1.7vw,22px) 0 clamp(13px,1.5vw,18px);
}
.tag__grid dt{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:.5em;white-space:nowrap;
}
.tag__grid dd{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.65rem);line-height:1;letter-spacing:-.02em;
}
.tag__note{
  font-family:var(--serif);font-style:italic;font-size:.98rem;line-height:1.5;
  color:var(--ink-2);padding-top:clamp(12px,1.4vw,17px);border-top:1px solid var(--line);
}

/* editorial · spread ------------------------------------------------------ */
.spread{
  display:grid;grid-template-columns:minmax(280px,47%) 1fr;
  gap:clamp(34px,5vw,96px);align-items:center;
  padding:var(--sec) var(--gut);max-width:var(--maxw);margin-inline:auto;
}
.spread__img{aspect-ratio:4/5;border-radius:4px}
.spread__type{padding-block:clamp(20px,3vw,40px)}
.spread .slogan em{color:var(--accent)}
.spread .caption{margin-top:clamp(24px,3vw,40px)}

.spread--rev{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,52px);align-items:end}
.spread--rev .spread__img{aspect-ratio:3/4}
.spread--rev .spread__img--2{aspect-ratio:4/5;margin-bottom:clamp(30px,6vw,110px)}
.spread__type--center{grid-column:1/-1;text-align:center;padding-top:clamp(28px,4vw,60px)}
.spread__type--center .slogan{max-width:22ch;margin-inline:auto}

/* editorial · band -------------------------------------------------------- */
.band{padding-bottom:clamp(60px,8vw,120px)}
.band__frame{height:clamp(320px,54vw,680px);border-radius:0}
.band__cap{
  display:flex;align-items:center;justify-content:center;gap:1em;flex-wrap:wrap;
  margin-top:clamp(18px,2vw,30px);padding-inline:var(--gut);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);
}
.band__cap .ast{color:var(--gold-ink);opacity:1}

/* 06 · privacy ------------------------------------------------------------ */
.privacy{
  max-width:none;margin:0;background:var(--night);color:var(--night-ink);
  padding-inline:max(var(--gut),calc((100vw - var(--maxw)) / 2 + var(--gut)));
}
.privacy__h{
  font-size:clamp(2.9rem,8.6vw,8.8rem);line-height:.92;
  margin:clamp(20px,2.6vw,36px) 0 clamp(58px,8vw,110px);
}
.privacy__h em{color:var(--night-accent)}
.facts{border-top:1px solid var(--night-line);max-width:1100px}
.facts li{
  display:grid;grid-template-columns:minmax(220px,34%) 1fr;
  gap:clamp(14px,2.6vw,54px);align-items:baseline;
  padding:clamp(20px,2.6vw,34px) 0;border-bottom:1px solid var(--night-line);
}
.facts b{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.2rem,2.05vw,1.75rem);line-height:1.22;letter-spacing:-.02em;
}
.facts span{color:var(--night-ink-2);font-size:1rem;line-height:1.68;max-width:44ch}
.privacy__line{
  margin-top:clamp(56px,7vw,100px);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,2.9vw,2.4rem);line-height:1.35;letter-spacing:-.02em;
}
.privacy__line em{color:var(--night-accent)}

/* ── 11 · FINALE ─────────────────────────────────────────────────────────── */
.finale{
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(88px,11vh,150px) var(--gut);
  background:
    radial-gradient(96% 62% at 50% 108%, color-mix(in srgb,var(--accent) 11%,transparent), transparent 68%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
.finale__h{max-width:13ch;font-size:clamp(2.8rem,7.4vw,8.6rem)}
.finale__h em{color:var(--accent)}
.finale__sub{
  margin-top:clamp(20px,2.4vw,34px);
  font-size:clamp(1.05rem,.55vw + .92rem,1.28rem);color:var(--ink-2);
}
.lockup{margin:clamp(48px,6vw,92px) 0 clamp(32px,3.8vw,54px)}
.lockup__word{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2.6rem,6.6vw,6rem);line-height:1;letter-spacing:-.03em;
}
.lockup__rule{
  display:block;width:clamp(52px,7vw,96px);height:1px;background:var(--gold);
  margin:clamp(13px,1.5vw,22px) auto;
}
.lockup__sub{
  font-size:clamp(.72rem,.92vw,.9rem);font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold-ink);
  text-indent:.42em;
}
.finale__meta{
  margin-top:clamp(20px,2.4vw,32px);
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
}

/* ── 12 · FOOTER ─────────────────────────────────────────────────────────── */
.foot{
  background:var(--night);color:var(--night-ink-2);
  padding:clamp(64px,8vw,110px) var(--gut) clamp(30px,4vw,44px);
}
.foot__brand,.foot__cols,.foot__end{max-width:var(--maxw);margin-inline:auto}
.foot__brand{display:flex;align-items:center;gap:clamp(16px,2vw,26px)}
.foot__mark{width:clamp(48px,5vw,64px);height:auto;border-radius:22%;box-shadow:var(--sh-sm)}
.foot__name{
  font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:500;
  color:var(--night-ink);letter-spacing:-.015em;
}
.foot__tag{font-size:.86rem;color:var(--night-muted);margin-top:.2em}

.foot__cols{
  display:grid;grid-template-columns:minmax(130px,.8fr) minmax(150px,1fr) minmax(240px,1.25fr);
  gap:clamp(26px,3vw,56px);
  margin-top:clamp(48px,6vw,80px);padding-top:clamp(30px,3.6vw,48px);
  border-top:1px solid var(--night-line);
}
.foot__cols div{display:flex;flex-direction:column;gap:.62em;align-items:flex-start}
.foot__h{
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--night-muted);margin-bottom:.5em;
}
.foot__cols a,.foot__cols span{font-size:.88rem;color:var(--night-ink-2)}
/* Le due caselle di posta sono l'unico dato che qualcuno copierà a mano:
   vanno lasciate intere anche su schermi stretti. */
.foot__contact a{overflow-wrap:anywhere}
.foot__note{
  font-size:.74rem !important;color:var(--night-muted) !important;
  margin:-.42em 0 .5em;letter-spacing:.02em;
}
.foot__contact a+.foot__note{margin-top:-.3em}
.foot__cols a{transition:color .4s ease}
.foot__cols a:hover{color:var(--night-accent)}

.foot__end{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-top:clamp(48px,6vw,84px);padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--night-line);
  font-size:.76rem;color:var(--night-muted);line-height:1.7;
}
.foot__end p:first-child{max-width:52ch}

/* ── 12b · FILO DI AVANZAMENTO ───────────────────────────────────────────
   Un filo di due pixel sotto la barra che si riempie man mano che la pagina
   scorre. Questa pagina è lunga: serve a dire "quanto manca", non a fare
   spettacolo. È scritto interamente in CSS con una timeline di scorrimento —
   nessun listener, nessun frame calcolato a mano. Dove la timeline non
   esiste il filo resta a zero, cioè invisibile: non si rompe niente.        */
.nav__prog{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  opacity:0;transition:opacity .5s var(--ease);
}
.nav.is-stuck .nav__prog{opacity:1}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .nav__prog{animation:nav-prog linear both;animation-timeline:scroll(root block)}
    @keyframes nav-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* ── 12c · MENU DEL TELEFONO ─────────────────────────────────────────────
   Il difetto più grave della versione precedente: sotto i 960px i link della
   barra sparivano e basta. Chi arrivava dal telefono non aveva modo di
   saltare a una sezione, e il telefono è la maggioranza del traffico di un
   sito che parla di un'app. Qui tornano, dentro un pannello a tutto schermo.

   Il pannello sta SOTTO la barra (z-index minore): così il marchio, la
   lingua e il pulsante restano dove sono e il pannello scende dietro di
   loro, invece di coprirli e doverli ridisegnare.                          */
.burger{
  display:none;position:relative;
  width:46px;height:46px;margin:-11px -12px -11px 0;flex:none;
  border-radius:999px;
}
.burger i{
  position:absolute;left:13px;width:20px;height:1.5px;border-radius:2px;
  background:var(--ink);
  transition:transform .5s var(--ease),opacity .3s ease,background .45s ease;
}
.burger i:nth-child(1){top:20px}
.burger i:nth-child(2){top:26px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
.nav.is-dark .burger i{background:var(--night-ink)}
/* Senza JavaScript il tasto non apre niente: meglio non mostrarlo affatto
   che mostrare un comando che non risponde. */
html:not(.js) .burger{display:none}

.menu{
  position:fixed;inset:0;z-index:90;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--gut) + 60px) var(--gut) var(--gut);
  background:color-mix(in srgb,var(--paper) 93%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(1.25);
          backdrop-filter:blur(26px) saturate(1.25);
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s;
}
.menu.is-open{opacity:1;visibility:visible}
@media (prefers-reduced-transparency:reduce){
  .menu{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
}

.menu__links{display:flex;flex-direction:column;gap:clamp(4px,1.4vh,14px)}
.menu__links a{
  display:block;overflow:hidden;
  font-family:var(--serif);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(2.1rem,10vw,3.2rem);line-height:1.12;
  padding:.06em 0;
}
/* Ogni voce sale da sotto la riga di quella precedente, sfalsata. Il ritardo
   lo calcola l'indice scritto nel markup: niente JavaScript per la cascata. */
.menu__links a>span{
  display:block;transform:translateY(112%);
  transition:transform .72s var(--ease) calc(var(--i,0) * 55ms);
}
.menu.is-open .menu__links a>span{transform:none}
.menu__links a:active{color:var(--accent)}

.menu__foot{
  margin-top:clamp(28px,5vh,52px);padding-top:clamp(20px,3vh,30px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) .3s,transform .6s var(--ease) .3s;
}
.menu.is-open .menu__foot{opacity:1;transform:none}
.menu__meta{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
}

/* ── 12d · IL GIRO DELL'APP ──────────────────────────────────────────────
   Otto schermate vere, una accanto all'altra. Su telefono è una galleria che
   si scorre con il pollice — lo scatto la ferma su una schermata alla volta.
   Su schermo grande diventa un carrello che cammina di lato mentre la pagina
   scende: la sezione si incolla in alto e il movimento verticale del dito
   diventa movimento orizzontale delle schermate.

   È scritto con le timeline di scorrimento del CSS, non con un listener:
   `view-timeline` sulla sezione alta, il carrello legge quella timeline. Dove
   non esistono resta la galleria a scorrimento, che funziona ovunque.       */
.tour{
  --cw:min(66vw,300px);
  --gap:clamp(16px,2.2vw,38px);
  padding:var(--sec) 0;
  background:var(--paper-2);border-block:1px solid var(--line);
  overflow:clip;
}
.tour__head{
  max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gut) clamp(34px,4.6vw,64px);
}
.tour__head .h1{margin-bottom:clamp(14px,1.8vw,22px)}
.tour__head .lead{max-width:48ch}

.tour__rail{
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tour__rail::-webkit-scrollbar{display:none}
.tour__track{
  display:flex;align-items:flex-start;gap:var(--gap);
  padding:8px var(--gut) 10px;width:max-content;
}
.tour__card{
  scroll-snap-align:center;flex:none;width:var(--cw);
}
.tour__card .device{--dw:var(--cw);width:100%}
.tour__cap{margin-top:clamp(16px,1.6vw,24px)}
.tour__cap b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.12rem,1.5vw,1.42rem);line-height:1.2;letter-spacing:-.02em;
}
.tour__cap span{
  display:block;margin-top:.45em;
  font-size:.86rem;line-height:1.55;color:var(--ink-2);
}
.tour__bar{
  display:none;
  max-width:var(--maxw);margin:clamp(30px,3.6vw,52px) auto 0;
  padding-inline:var(--gut);
}
.tour__bar i{
  display:block;height:2px;border-radius:2px;background:var(--line);
  position:relative;overflow:hidden;
}
.tour__bar i::after{
  content:"";position:absolute;inset:0;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    /* `timeline-scope` è il pezzo che serve perché il filo, che è fratello
       del carrello e non figlio, possa leggerne lo scorrimento. Senza, il
       nome non si risolve e la barra resta piena. */
    .tour{timeline-scope:--rail}
    .tour__bar{display:block}
    .tour__rail{scroll-timeline:--rail x}
    .tour__bar i::after{
      animation:tour-fill linear both;animation-timeline:--rail;
    }
    @keyframes tour-fill{from{transform:scaleX(.06)}to{transform:scaleX(1)}}
  }
}

/* Da qui in su la sezione si incolla e il carrello cammina da solo.
   `--pan` è quanto deve scorrere: larghezza del carrello meno lo schermo. */
@media (min-width:961px){
  .tour{
    --cw:clamp(170px,min(19vw,(100svh - 420px) / 2.215),300px);
  }
  /* La modalità incollata vuole altezza: sotto i 700px il titolo, otto
     telefoni e le didascalie non ci stanno, e verrebbero tagliati in cima.
     Su uno schermo basso resta la galleria che si scorre, che è giusta. */
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference) and (min-height:700px){
      .tour{
        --tw:calc(8 * var(--cw) + 7 * var(--gap) + 2 * var(--gut));
        --pan:max(0px,calc(var(--tw) - 100vw));
        padding:0;height:calc(100svh + var(--pan));
        view-timeline-name:--tourv;view-timeline-axis:block;
      }
      .tour__pin{
        position:sticky;top:0;height:100svh;
        display:flex;flex-direction:column;justify-content:center;
        padding-block:clamp(74px,9vh,104px) clamp(18px,3vh,32px);
        overflow:hidden;
      }
      .tour__head,.tour__bar{
        align-self:center;width:100%;max-width:var(--maxw);margin-inline:0;
      }
      /* Incollata, la sezione ha un'altezza sola per titolo E schermate:
         il titolo scende di un gradino perché i telefoni restino grandi. */
      .tour__head{padding-bottom:clamp(18px,2.6vh,32px)}
      .tour__head .h1{font-size:clamp(2rem,3.2vw,3.3rem)}
      .tour__head .lead{font-size:.98rem;line-height:1.6;max-width:56ch}
      .tour__bar{margin-top:clamp(18px,2.4vh,30px)}
      .tour__rail{overflow:clip;overflow-clip-margin:70px;scroll-snap-type:none}
      .tour__track{
        animation:tour-pan linear both;
        animation-timeline:--tourv;animation-range:contain 0% contain 100%;
        will-change:transform;
      }
      @keyframes tour-pan{
        from{transform:translate3d(0,0,0)}
        to{transform:translate3d(calc(-1 * var(--pan)),0,0)}
      }
      .tour__bar i::after{animation-timeline:--tourv;animation-range:contain 0% contain 100%}
    }
  }
}

/* ── 12e · ORA ANCHE SU IPHONE ───────────────────────────────────────────
   Tre pannelli così come sono pubblicati sull'App Store: iPhone vero,
   titolo già dentro l'immagine. Sono la prova, non un mockup.
   Su schermo grande stanno uno sopra l'altro a tre profondità, quello
   centrale più grande; sotto i 860px diventano una fila che si scorre.      */
.appstore{
  padding:var(--sec) var(--gut);max-width:var(--maxw);margin-inline:auto;
  text-align:center;
}
.appstore .h1{margin-bottom:clamp(16px,2vw,26px)}
.appstore .lead{margin-inline:auto;max-width:46ch;text-align:center}
.appstore__row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2vw,34px);margin-top:clamp(48px,6vw,86px);
}
.appstore__panel{
  flex:none;width:clamp(150px,18vw,248px);
  border-radius:clamp(14px,1.6vw,22px);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--sh-lift);
  /* Rotazione, sollevamento all'ingresso e sollevamento al passaggio del
     mouse convivono dentro una sola trasformazione: sono tre variabili,
     non tre regole che si sovrascrivono a vicenda. Con `transform:none`
     dell'ingresso standard la rotazione sparirebbe. */
  transform:rotate(var(--rot,0deg)) translateY(var(--lift,0px));
  transition:transform .8s var(--ease),opacity .8s var(--ease) var(--d,0s),
             filter .8s var(--ease) var(--d,0s),box-shadow .8s var(--ease);
}
.js .appstore__panel[data-reveal]{
  --lift:28px;opacity:0;filter:blur(7px);
  transform:rotate(var(--rot,0deg)) translateY(var(--lift,0px));
}
.js .appstore__panel[data-reveal].is-in{
  --lift:0px;opacity:1;filter:none;
  transform:rotate(var(--rot,0deg)) translateY(var(--lift,0px));
}
.appstore__panel img{width:100%;height:auto}
.appstore__panel--l{--rot:-4.5deg;margin-bottom:clamp(20px,3vw,54px);z-index:1}
.appstore__panel--c{width:clamp(185px,22vw,300px);z-index:3}
.appstore__panel--r{--rot:4.5deg;margin-bottom:clamp(20px,3vw,54px);z-index:1}
.appstore__panel--l,.appstore__panel--r{margin-inline:clamp(-30px,-2.4vw,-8px)}
@media (hover:hover) and (pointer:fine){
  .appstore__panel:hover{--rot:0deg;--lift:-12px}
}
.appstore__meta{
  margin-top:clamp(36px,4.4vw,60px);
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
}

@media (max-width:860px){
  .appstore{padding-inline:0}
  .appstore .h1,.appstore .lead,.appstore__meta{padding-inline:var(--gut)}
  .appstore__row{
    justify-content:flex-start;gap:clamp(14px,4vw,24px);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    padding:6px var(--gut) 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .appstore__row::-webkit-scrollbar{display:none}
  .appstore__panel,
  .appstore__panel--c{
    width:min(62vw,270px);margin:0;scroll-snap-align:center;
  }
  .appstore__panel--l,.appstore__panel--r{--rot:0deg}
}

/* ── 13 · RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .hero{grid-template-columns:1fr clamp(280px,42vw,480px)}
  .hero__device{left:-30%;--dw:clamp(160px,19vw,240px)}
  .stats ul{grid-template-columns:repeat(3,1fr);row-gap:clamp(26px,4vw,40px)}
  .stats li:nth-child(4){border-left:0;padding-left:0}
  .ladder li{grid-template-columns:auto minmax(150px,30%) 1fr}
}

@media (max-width:960px){
  :root{--sec:clamp(84px,11vh,130px)}
  .nav__links{display:none}
  .burger{display:block}
  .lang{margin-left:auto}
  .nav .btn{margin-left:0}
  /* Nell'hero il pulsante c'è già, grande: due "Get Outfitly" nella stessa
     schermata svalutano l'invito. Quello della barra compare solo quando
     l'hero è passato e serve davvero. */
  .nav .btn{
    opacity:0;pointer-events:none;transform:translateY(-6px);
    transition:opacity .45s var(--ease),transform .45s var(--ease);
  }
  .nav.is-stuck .btn{opacity:1;pointer-events:auto;transform:none}

  /* HERO — ricomposto, non compresso: tipo sopra, campagna sotto a vivo */
  .hero{
    grid-template-columns:1fr;min-height:auto;
    padding-bottom:clamp(60px,10vw,90px);
  }
  .hero__type{
    padding:clamp(120px,20vh,160px) var(--gut) clamp(38px,6vw,56px);
  }
  .hero__sub{max-width:34ch}
  .hero__art{
    position:relative;height:clamp(380px,74vw,620px);
    margin-left:clamp(48px,18vw,150px);
  }
  .hero__frame{inset:0;border-radius:4px 0 0 4px}
  .hero__frame::before{display:none}
  .hero__device{--dw:clamp(140px,26vw,200px);left:-16%;bottom:8%}
  .hero__scroll{display:none}

  .problem{grid-template-columns:1fr;gap:clamp(34px,6vw,52px)}
  .problem__type{position:static}
  .wall__col--4{display:none}
  .wall{grid-template-columns:repeat(3,1fr)}

  .stylist{grid-template-columns:1fr;gap:clamp(40px,7vw,60px)}
  .stylist__art{order:2;justify-content:flex-start}
  .stylist__type{order:1}
  .score{right:auto;left:clamp(200px,52vw,340px);bottom:18%}

  .day__head{grid-template-columns:1fr;gap:clamp(38px,6vw,56px)}
  .day__device{justify-self:start;order:2}
  .ladder li{grid-template-columns:auto 1fr;row-gap:.35em}
  .ladder span{grid-column:2}

  .weather{grid-template-columns:1fr;gap:clamp(40px,7vw,60px)}
  .weather__device{justify-self:start}

  .trip{grid-template-columns:1fr;gap:clamp(30px,5vw,48px)}
  .trip__type{order:1}
  .trip__img{aspect-ratio:16/11;order:2}
  .spread{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .spread__img{aspect-ratio:5/6}
  .spread--rev{grid-template-columns:1fr 1fr;gap:12px}
  .spread--rev .spread__img--2{margin-bottom:0}

  .facts li{grid-template-columns:1fr;gap:.5em}
  .foot__end{flex-direction:column;align-items:flex-start}
}

/* Sotto i 760px la composizione a tre profondità non ha più senso: diventa una
   galleria che scorre di lato, uno schermo alla volta e alla misura giusta.
   Il margine negativo la fa partire e finire a filo di pagina, così si capisce
   subito che c'è dell'altro oltre il bordo. */
@media (max-width:760px){
  .stack{
    display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;
    gap:clamp(16px,4.5vw,26px);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    padding:6px var(--gut) clamp(50px,10vw,64px);
    margin-inline:calc(-1 * var(--gut));
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .stack::-webkit-scrollbar{display:none}
  .stack__float{display:none}

  .stack__d{scroll-snap-align:center;flex:none;margin-bottom:0}
  /* L'ordine dello schermo grande qui non vale: nella galleria si parte
     dall'armadio, che è anche il primo nel codice. */
  .stack__d--back,.stack__d--main,.stack__d--side{order:0}
  .stack__d--main,.stack__d--back,.stack__d--side{--dw:min(70vw,290px);width:var(--dw)}
  .stack__d--main .device,
  .stack__d--back .device,
  .stack__d--side .device{--dw:min(70vw,290px)}
  .stack__d figcaption{bottom:calc(-1 * clamp(24px,5vw,32px))}

  .stack__dots{
    display:flex;justify-content:center;gap:6px;
    margin-top:clamp(6px,2vw,12px);
  }
  .stack__dots button{
    width:30px;height:26px;padding:12px 0;
    background:var(--line);background-clip:content-box;
    border-radius:2px;transition:background .45s var(--ease);
  }
  .stack__dots button.is-on{background:var(--accent);background-clip:content-box}
}

@media (max-width:620px){
  :root{--sec:clamp(72px,13vw,104px)}
  .display{font-size:clamp(3rem,15vw,4.6rem);line-height:.9}
  .h1{font-size:clamp(2.1rem,9.6vw,3rem)}
  .slogan{font-size:clamp(1.85rem,8.4vw,2.6rem)}

  .hero__art{height:clamp(340px,88vw,480px);margin-left:clamp(32px,14vw,70px)}
  .hero__device{--dw:clamp(122px,30vw,158px);left:-14%;bottom:7%}
  .hero__cta{gap:22px 28px}

  .stats{padding-block:clamp(38px,8vw,52px)}
  .stats ul{grid-template-columns:repeat(2,1fr);gap:clamp(22px,5vw,32px)}
  .stats li:nth-child(odd){border-left:0;padding-left:0}
  .stats li:last-child{grid-column:1/-1}

  .wall{grid-template-columns:repeat(2,1fr);gap:8px}
  .wall__col--3{display:none}

  /* Il difetto più grosso della versione telefono: le larghezze dei device
     erano espresse in vw pensando allo schermo grande, e sotto i 620px
     collassavano a poco più di un francobollo appoggiato a sinistra.
     Qui tornano grandi e centrati — è l'app, deve vedersi. */
  .stylist__art .device,
  .day__device,
  .weather__device{--dw:min(78vw,330px) !important}
  .stylist__art,
  .day__head .device,
  .weather__device{justify-self:center}
  .stylist__art{justify-content:center}
  .day__device{margin-inline:auto}
  .weather__device{margin-inline:auto}
  /* Con il telefono grande il cartellino copriva una riga del look. Scende
     sotto il bordo: sporge dall'angolo invece di sedersi sul contenuto. */
  .score{left:auto;right:3%;bottom:-6%;padding:.85rem 1.15rem .95rem}

  /* I separatori a pallino, andando a capo, finivano a inizio riga: si leggeva
     "· Ceremony". Sul telefono diventano due colonne con un filetto, che è
     anche più facile da scorrere con il pollice. */
  .occ{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(14px,3vw,20px)}
  .occ li{
    padding:clamp(11px,2.6vw,15px) 0;border-top:1px solid var(--line);
    font-size:clamp(1.15rem,5.4vw,1.5rem);
  }
  .occ li:nth-child(odd){padding-right:14px}
  .occ li+li::before{display:none}
  .ladder li{padding-block:clamp(15px,4vw,20px)}
  .ladder li:hover{padding-left:0}


  .spread--rev{grid-template-columns:1fr;gap:14px}
  .spread--rev .spread__img,
  .spread--rev .spread__img--2{aspect-ratio:4/3}
  .band__frame{height:clamp(280px,70vw,420px)}

  /* Cinque voci in fila non stanno in 375px: diventano tre più due,
     e il cartellino resta leggibile invece di comprimersi. */
  .tag__grid{grid-template-columns:repeat(3,1fr);justify-content:start;gap:clamp(14px,4vw,20px)}
  .tag__grid div:nth-child(4),
  .tag__grid div:nth-child(5){grid-row:2}
  .tag__note{font-size:.94rem}

  .foot__cols{grid-template-columns:1fr;gap:30px}
  .foot__brand{align-items:flex-start}
}

/* ── 14 · MOTION RIDOTTO ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none;filter:none}
  [data-stagger]>*{opacity:1;transform:none}
  .rl__l>span{transform:none}
  [data-par]{transform:none !important}
  .device--tilt{transform:none !important}
  .hero__scroll i::after{display:none}
  /* Il carosello dell'hero smette di girare: resta la prima schermata, che
     è anche quella che il resto della pagina racconta per prima. */
  .swap>img{opacity:0}
  .swap>img:first-child{opacity:1}
}

/* Rimando all'informativa completa, in coda alla sezione Privacy.
   Lo stacco segue la scala della sezione — .privacy__line si prende
   clamp(56px,7vw,100px) — ma di un gradino piu' basso: prima la frase
   respira, poi il pulsante arriva staccato senza pareggiare l'enfasi. */
.privacy__more{ margin-top:clamp(44px,5.5vw,78px); }

/* I due store in fondo: affiancati dove c'e' spazio, impilati sul telefono.
   Nessuno dei due viene prima per merito: e' il visitatore che sa quale
   telefono ha in mano. */
.finale__stores{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }