/* grynta.it · home (direzione A «Cinematico», movimento v2). Caricato solo da viste/layout_home.php.
   Generato da scratchpad/sito-v2/a-cinematico-v2/index.html (stesso CSS del prototipo): modificare lì e rigenerare,
   oppure qui e riportare nel prototipo. Font self-hosted (OFL: grynta/OFL-sora.txt, grynta/OFL-familjen.txt). */
@font-face { font-family: 'Sora'; src: url(grynta/sora.woff2) format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url(grynta/familjen.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
/* ==========================================================================
   GRYNTA · direzione A «Cinematico» · v2 (movimento rifinito)
   Buio, fotografico, immersivo. Un solo momento orchestrato per sezione.
   Colori del marchio: Viola #6E3BFF · Notte #14112B · Lime #D4FF3A (solo su Notte) · Bianco
   Movimento: tre curve con un nome e quattro durate, nient'altro.
     --ease-out     «arrivo»       ciò che entra o si rivela: parte deciso, si posa piano
     --ease-in-out  «spostamento»  ciò che si muove sullo schermo o se ne va: camera, sipari, chiusure
     --ease-spring  «molla»        risposta alla mano: pressioni, rilasci, piccoli scatti
   Le sequenze legate allo scorrimento usano le stesse curve, calcolate in JS.
   ========================================================================== */
:root {
  --notte: #14112B;
  --notte-2: #1C1839;
  --notte-3: #0D0B1E;
  --viola: #6E3BFF;
  --viola-2: #8460FF;
  --lime: #D4FF3A;
  --bianco: #FFFFFF;
  --ink: #FFFFFF;
  --ink-2: rgba(255, 255, 255, .80);
  --ink-3: rgba(255, 255, 255, .62);
  --line: rgba(255, 255, 255, .13);
  --display: 'Sora', 'Avenir Next', system-ui, sans-serif;
  --text: 'Familjen Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 48px);
  --header: 68px;
  /* the three curves */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* the four durations */
  --t-touch: 160ms;   /* answer to a touch or a hover */
  --t-state: 320ms;   /* a control changes state */
  --t-reveal: 760ms;  /* something arrives */
  --t-scene: 1100ms;  /* a scene opens */
  color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, .032, .113, .225, .351, .482, .606, .72, .818, .9, .964, 1.013, 1.047, 1.069, 1.08, 1.084, 1.081, 1.074, 1.065, 1.054, 1.043, 1.033, 1.024, 1.015, 1.008, 1.003, .999, .996, .994, .993, .993, .993, .994, .995, .995, .996, 1); }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header); }
body {
  background: var(--notte);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
ol, ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
html.js:not(.rm) :focus-visible { animation: focus-in var(--t-touch) var(--ease-out); }
@keyframes focus-in { from { outline-offset: 7px; outline-color: rgba(212, 255, 58, 0); } }

/* film grain: a still texture that jitters. Only 10% larger than the screen (was 220%): a phone keeps a small layer in memory */
.grain {
  position: fixed; inset: -10%; z-index: 90; pointer-events: none; opacity: .055;
  background-image: url("sito/grana.svg");
  animation: grain 1.2s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-3%, 2%, 0); } 40% { transform: translate3d(2%, -3%, 0); }
  60% { transform: translate3d(-2%, -1%, 0); } 80% { transform: translate3d(3%, 3%, 0); } 100% { transform: translate3d(0, 0, 0); }
}

/* skip link */
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--lime); color: var(--notte); padding: 12px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 .8125rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--lime); }
.h2 { font-size: clamp(2.3rem, 5.4vw, 4.6rem); }
.lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--ink-2); max-width: 36ch; }
.sub { font-size: 1.125rem; color: var(--ink-2); max-width: 34ch; }
.cap { font-size: .875rem; color: var(--ink-3); }

/* the line mask: every line slides up from behind its own edge, one after the other */
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln > span { display: inline-block; }
html.js:not(.rm) [data-reveal]:not(.in) .ln > span, html.js:not(.rm) .hero:not(.in) .ln > span { transform: translate3d(0, 135%, 0); } /* far enough that no accent or i-dot peeks over the edge */
html.js:not(.rm) .ln > span { transition: transform var(--t-scene) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms)); }
/* revealed without being seen (skipped by a jump, or above the screen): no animation, it is simply there */
html.js .now, html.js .now * { transition: none !important; animation: none !important; }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  font: 600 1.0625rem/1 var(--text); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out), scale 520ms var(--ease-spring);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { scale: .965; transition-duration: var(--t-state), var(--t-state), var(--t-state), 90ms; transition-timing-function: var(--ease-out); }
.btn-viola { background: var(--viola); color: var(--bianco); overflow: hidden; isolation: isolate; }
.btn-viola::before { /* a light that follows the pointer inside the button */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--t-state) var(--ease-out);
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 70%);
}
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, .42); color: var(--bianco); }
@media (hover: hover) {
  .btn-viola:hover { background: var(--viola-2); }
  .btn-viola:hover::before { opacity: 1; }
  .btn-ghost:hover { border-color: var(--bianco); background: rgba(255, 255, 255, .07); }
  .btn:hover .arr { transform: translate3d(4px, 0, 0); }
}
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.btn .arr { width: 18px; height: 18px; flex: none; transition: transform var(--t-state) var(--ease-out); }
.mag { display: inline-block; padding: 22px; margin: -22px; } /* the magnetic field is larger than the button */
.mag-in { display: inline-flex; align-items: center; gap: 12px; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }

/* «?» that opens a small card */
.info {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px -6px -10px 0; vertical-align: middle;
  border: 0; background: none; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent;
}
.info::before {
  content: "?"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); font: 700 .875rem/1 var(--text);
  transition: background-color var(--t-touch) var(--ease-out), color var(--t-touch) var(--ease-out), border-color var(--t-touch) var(--ease-out), scale 480ms var(--ease-spring);
}
@media (hover: hover) { .info:hover::before { background: var(--bianco); color: var(--notte); border-color: var(--bianco); } }
.info:active::before { scale: .86; transition-duration: var(--t-touch), var(--t-touch), var(--t-touch), 90ms; }
.info[aria-expanded="true"]::before { background: var(--bianco); color: var(--notte); border-color: var(--bianco); }
.pop {
  width: min(420px, calc(100vw - 32px)); margin: auto; padding: 24px 24px 20px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px;
  background: var(--notte-2); color: var(--ink); box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  /* the card leaves quickly and arrives softly (exit 160 ms, entry 320 ms) */
  opacity: 0; translate: 0 10px; scale: .98;
  transition: opacity var(--t-touch) var(--ease-in-out), translate var(--t-touch) var(--ease-in-out), scale var(--t-touch) var(--ease-in-out),
    overlay var(--t-touch) allow-discrete, display var(--t-touch) allow-discrete;
}
/* two rules, not one list: a browser that does not know :popover-open (Safari before 17) drops the whole list, and the
   card of the fallback stayed transparent over the page */
.pop:popover-open { opacity: 1; translate: 0 0; scale: 1; transition-duration: var(--t-state); transition-timing-function: var(--ease-out); }
.pop.open { opacity: 1; translate: 0 0; scale: 1; transition-duration: var(--t-state); transition-timing-function: var(--ease-out); }
@starting-style { .pop:popover-open { opacity: 0; translate: 0 14px; scale: .97; } }
.pop::backdrop { background: rgba(10, 8, 24, 0); transition: background-color var(--t-touch) var(--ease-in-out), overlay var(--t-touch) allow-discrete, display var(--t-touch) allow-discrete; }
.pop:popover-open::backdrop { background: rgba(10, 8, 24, .6); transition-duration: var(--t-state); }
@starting-style { .pop:popover-open::backdrop { background: rgba(10, 8, 24, 0); } }
.pop h3 { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 12px; }
.pop p, .pop li { color: var(--ink-2); font-size: 1rem; }
.pop ol { counter-reset: s; display: grid; gap: 10px; margin: 4px 0 12px; }
.pop ol li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; align-items: baseline; }
.pop ol li::before { content: counter(s); font: 800 .95rem/1 var(--display); color: var(--lime); }
.pop .close { margin-top: 14px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .3); background: none; cursor: pointer; font-weight: 600;
  transition: border-color var(--t-touch) var(--ease-out), scale 480ms var(--ease-spring); }
.pop .close:active { scale: .96; transition-duration: var(--t-touch), 90ms; }
@media (hover: hover) { .pop .close:hover { border-color: var(--bianco); } }
.pop dl { display: grid; gap: 12px; margin: 0; font-size: .9375rem; }
.pop dt { font-weight: 600; }
.pop dd { margin: 2px 0 0; color: var(--ink-3); }
.pop dd a { color: var(--ink-2); }
html.no-pop .pop:not(.open) { display: none; }
html.no-pop .pop.open { display: block; position: fixed; inset: 0; height: fit-content; z-index: 150; box-shadow: 0 0 0 100vmax rgba(10, 8, 24, .6), 0 30px 90px rgba(0, 0, 0, .6); }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 80; height: var(--header);
  transition: background-color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.top.scrolled { background: rgba(20, 17, 43, .8); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: rgba(255, 255, 255, .07); }
.top .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 112px; height: auto; }
.nav { display: none; gap: 4px; margin-left: auto; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 500; color: var(--ink-2); transition: color var(--t-touch) var(--ease-out); }
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-state) var(--ease-out); }
@media (hover: hover) { .nav a:hover { color: var(--bianco); } .nav a:hover::after { transform: none; transform-origin: left; } }
@media (min-width: 900px) { .nav { display: flex; } .brand img { width: 124px; } }

/* ==========================================================================
   1 · HERO — one orchestrated entrance: the photo settles out of the dark, the headline
   rises line by line, the call to action arrives last. Then, scrolling, the photo sinks.
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; isolation: isolate; overflow: clip; }
.hero-media { position: absolute; inset: 0 0 -12%; z-index: -3; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 30%; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--notte); opacity: 0; pointer-events: none; }
html.js:not(.rm) .hero:not(.in) .hero-media img { transform: scale(1.16); }
html.js:not(.rm) .hero:not(.in) .hero-media::after { opacity: .82; }
html.js:not(.rm) .hero.in .hero-media img { animation: settle 3.2s var(--ease-out) both; }
html.js:not(.rm) .hero.in .hero-media::after { animation: unveil 1.5s var(--ease-in-out) both; }
@keyframes settle { from { transform: scale(1.16) translate3d(-1.2%, 1%, 0); } to { transform: scale(1.03); } }
@keyframes unveil { from { opacity: .82; } to { opacity: 0; } }
.hero-shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(0deg, rgba(20, 17, 43, .96) 0%, rgba(20, 17, 43, .55) 32%, rgba(20, 17, 43, 0) 62%),
    linear-gradient(90deg, rgba(20, 17, 43, .9) 0%, rgba(20, 17, 43, .45) 42%, rgba(20, 17, 43, 0) 68%);
}
.hero-dark { position: absolute; inset: 0; z-index: -1; background: var(--notte); opacity: 0; pointer-events: none; }
.hero-in { padding-top: calc(var(--header) + 48px); padding-bottom: clamp(36px, 8vh, 96px); display: grid; gap: 26px; justify-items: start; }
.live .hero-media, .live .hero-in { will-change: transform; }
.live .hero-dark { will-change: opacity; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 .8125rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.eyebrow .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(212, 255, 58, .55); opacity: 0; }
html.js:not(.rm) .eyebrow .dot::after { animation: ping 2.4s var(--ease-out) 2.2s infinite; }
@keyframes ping { 0% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(4); } }
.hero h1 { font-size: clamp(2.4rem, 10.6vw, 5.9rem); line-height: .96; max-width: 11.5em; }
.hero h1 .ln:nth-child(2) { color: var(--ink); }
/* the entrance score (ms after the fonts are ready):
   0 photo out of the dark · 120 eyebrow · 220/310/400 the three lines · 760 lead · 920 foot · 1080 call to action, last */
html.js:not(.rm) .hero:not(.in) .fade { opacity: 0; transform: translate3d(0, 16px, 0); }
html.js:not(.rm) .hero .fade { transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: var(--d, 0ms); }
html.js:not(.rm) .hero:not(.in) .ctas.fade { transform: translate3d(0, 22px, 0) scale(.96); }
html.js:not(.rm) .hero .ctas.fade { transform-origin: left center; transition-duration: var(--t-scene); }
html.js:not(.rm) .hero.in .ctas .arr { animation: arrive-arrow var(--t-reveal) var(--ease-out) 1.55s both; }
@keyframes arrive-arrow { from { transform: translate3d(-8px, 0, 0); opacity: 0; } }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); margin-top: 8px; }
.payoff-mini { font: 800 .8125rem/1 var(--display); letter-spacing: .14em; color: var(--lime); }
.cue { display: inline-flex; align-items: center; gap: 12px; font-size: .875rem; color: var(--ink-3); text-decoration: none; min-height: 44px; }
.cue i { position: relative; width: 1.5px; height: 34px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--lime); transform: translate3d(0, -100%, 0); }
html.js:not(.rm) .cue i::after { animation: cue 2.2s var(--ease-in-out) 2.4s infinite; }
@keyframes cue { to { transform: translate3d(0, 250%, 0); } }
html.js .hero:not(.live) .cue i::after, html.js .hero:not(.live) .eyebrow .dot::after { animation-play-state: paused; }
@media (max-width: 699px) {
  .hero-media img { object-position: 74% 20%; }
  .hero-shade { background: linear-gradient(0deg, rgba(20, 17, 43, .98) 0%, rgba(20, 17, 43, .8) 38%, rgba(20, 17, 43, .1) 72%, rgba(20, 17, 43, .35) 100%); }
  .hero-in { gap: 20px; }
  .ctas .btn { flex: 1 1 auto; }
  .hero .ctas, .final .ctas, .price .ctas { width: 100%; }
  .hero .ctas .mag, .final .ctas .mag, .price .ctas .mag { flex: 1 1 100%; }
  .hero .ctas .mag .btn, .final .ctas .mag .btn, .price .ctas .mag .btn { width: 100%; }
}

/* ==========================================================================
   2 · REGALA — the gift is unwrapped, the gym's icon is pressed, the app opens out of it
   ========================================================================== */
.gift { position: relative; padding-block: clamp(96px, 14vh, 168px); overflow: clip; }
.gift-grid { display: grid; gap: 40px; grid-template-areas: "copy" "stage" "tuner"; }
.gift-copy { grid-area: copy; display: grid; gap: 22px; align-content: start; }
.tuner { grid-area: tuner; display: grid; gap: 22px; max-width: 460px; }
.gift-stage { grid-area: stage; position: relative; display: grid; justify-items: center; gap: 18px; --gc: #FF6A13; --gink: #14112B; --hue: 0deg; --sat: 1; --br: 1;
  --ox: 40%; --oy: 30%; --cs: .2; --c1: 20%; --c2: 30%; --c3: 50%; --c4: 10%; --cr: 60px; }
@media (min-width: 960px) {
  .gift-grid { grid-template-columns: 1.05fr .95fr; grid-template-areas: "copy stage" "tuner stage"; column-gap: 64px; row-gap: 36px; align-items: start; }
  .gift-copy { align-self: end; }
}
.field { display: grid; gap: 10px; }
.field > label, .tuner legend { font-weight: 600; font-size: .9375rem; color: var(--ink-2); padding: 0; }
.field input {
  width: 100%; min-height: 56px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06); font-size: 1.125rem; transition: border-color var(--t-touch) var(--ease-out), background-color var(--t-touch) var(--ease-out);
}
.field input:hover { border-color: rgba(255, 255, 255, .4); }
.field input:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; border-color: transparent; background: rgba(255, 255, 255, .09); }
.tuner fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.sw { position: relative; display: grid; place-items: center; width: 48px; height: 48px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sw .dot { width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 0 var(--notte), 0 0 0 0 rgba(212, 255, 58, 0);
  transition: scale 520ms var(--ease-spring), box-shadow var(--t-state) var(--ease-out); }
@media (hover: hover) { .sw:hover .dot { scale: 1.1; } }
.sw:active .dot { scale: .86; transition-duration: 90ms, var(--t-state); }
.sw input:checked + .dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 3px var(--notte), 0 0 0 5px var(--lime); }
.sw input:focus-visible + .dot { outline: 3px solid var(--lime); outline-offset: 6px; }

.glow { position: absolute; left: 50%; top: 46%; width: min(640px, 130vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gc) 42%, transparent), transparent 72%); filter: blur(10px); opacity: .55; }

/* the phone, drawn in CSS: real screens go inside */
.phone {
  --w: min(312px, 74vw);
  position: relative; width: var(--w); padding: calc(var(--w) * .034); border-radius: calc(var(--w) * .165);
  background: linear-gradient(150deg, #34305A 0%, #16132E 38%, #0B0A18 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 0 4px #07060F, 0 50px 90px -30px rgba(0, 0, 0, .85), 0 20px 40px -20px rgba(0, 0, 0, .6);
}
.phone .screen { position: relative; aspect-ratio: 600 / 1330; border-radius: calc(var(--w) * .135); overflow: hidden; background: #0A0912; isolation: isolate; }
.phone .screen::after { /* dynamic island */
  content: ""; position: absolute; z-index: 9; top: 1.4%; left: 50%; width: 30%; height: 3.1%; transform: translateX(-50%); border-radius: 99px; background: #000;
}
.phone .screen > img, .phone .screen > .shot { position: absolute; left: 0; right: 0; bottom: 0; top: 5.6%; width: 100%; height: 94.4%; }
.phone .screen > img, .shot img { object-fit: cover; object-position: top; }
.phone .screen::before { /* status bar */
  content: "9:41"; position: absolute; z-index: 8; top: 1.75%; left: 11%; font: 600 calc(var(--w) * .04)/1 var(--text); color: #fff; letter-spacing: .01em;
}

/* home screen inside the phone */
.home { position: absolute; inset: 0; z-index: 1; padding: 18% 9% 0; display: grid; grid-template-rows: auto 1fr auto; font-family: var(--text);
  background: radial-gradient(120% 70% at 20% 0%, color-mix(in srgb, var(--gc) 38%, #14112B) 0%, #14112B 55%, #0A0912 100%);
  transform-origin: var(--hx, 40%) var(--hy, 30%); transition: transform var(--t-state) var(--ease-in-out), opacity var(--t-state) var(--ease-in-out); }
.home .sb { position: absolute; top: 2.6%; left: 9%; right: 8%; display: flex; justify-content: space-between; font: 600 calc(var(--w) * .042)/1 var(--text); }
.home .sb b { display: inline-flex; gap: 3px; align-items: center; }
.home .sb b i { display: block; width: calc(var(--w) * .012); background: #fff; border-radius: 1px; }
.icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--w) * .07) calc(var(--w) * .04); align-content: start; }
.ic { position: relative; display: grid; justify-items: center; gap: calc(var(--w) * .02); min-width: 0; }
.ic s { display: block; width: 100%; aspect-ratio: 1; border-radius: 26%; background: rgba(255, 255, 255, .1); }
.ic u { display: block; width: 62%; height: calc(var(--w) * .014); border-radius: 9px; background: rgba(255, 255, 255, .12); }
.ic.app .ico {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 26%;
  background: var(--gc); color: var(--gink); font: 800 calc(var(--w) * .062)/1 var(--display); letter-spacing: -.02em;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--gc) 70%, transparent);
  transition: background-color var(--t-touch) var(--ease-out), color var(--t-touch) var(--ease-out), scale 560ms var(--ease-spring);
}
.ic.app .lbl { font-size: calc(var(--w) * .036); line-height: 1.15; text-align: center; color: #fff; width: 150%; margin-inline: -25%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.dock { margin: 0 -4% 5%; padding: calc(var(--w) * .035); border-radius: calc(var(--w) * .1); background: rgba(255, 255, 255, .1); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--w) * .04); }
.dock s { display: block; aspect-ratio: 1; border-radius: 26%; background: rgba(255, 255, 255, .14); }
/* the app window: open = the whole screen; closed = folded back into the gym's icon (geometry measured by the script) */
.app-shot { z-index: 5; transform-origin: var(--ox) var(--oy); clip-path: inset(0 0 0 0 round 0px);
  filter: hue-rotate(var(--hue)) saturate(var(--sat)) brightness(var(--br));
  transition: transform 700ms var(--ease-out), clip-path 700ms var(--ease-out), opacity 180ms var(--ease-out), filter var(--t-state) var(--ease-out); }
.gift-stage.closed .app-shot { transform: scale(var(--cs)); clip-path: inset(var(--c1) var(--c2) var(--c3) var(--c4) round var(--cr)); opacity: 0;
  transition: transform var(--t-state) var(--ease-in-out), clip-path var(--t-state) var(--ease-in-out), opacity 200ms var(--ease-in-out) 120ms, filter var(--t-state) var(--ease-out); }
/* depth: while the app opens the home screen falls back and dims, as on a real phone */
.gift-stage:not(.closed) .home { transform: scale(1.12); opacity: .4; transition-duration: 700ms; transition-timing-function: var(--ease-out); }
.gift-stage.closed:not(.typing) .ic.app .ico { animation: nudge 1.8s var(--ease-out) .4s infinite; }
@keyframes nudge { 0%, 64%, 100% { transform: none; } 22% { transform: scale(1.08); } 40% { transform: scale(.98); } }
.gift-stage.press .ic.app .ico { animation: none; scale: .86; transition-duration: var(--t-touch), var(--t-touch), 110ms; transition-timing-function: var(--ease-out); }
.ic.app .ico::after { content: ""; position: absolute; inset: -14%; border-radius: 30%; border: 2px solid var(--lime); opacity: 0; pointer-events: none; }
.gift-stage.ripple .ic.app .ico::after { animation: ripple 560ms var(--ease-out) forwards; }
@keyframes ripple { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(1.5); } }
/* a wash of the new colour, from where the eye is */
.wash { position: absolute; z-index: 6; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; border-radius: 50%; background: var(--gc);
  opacity: 0; transform: translate(-50%, -50%) scale(0); pointer-events: none; }
/* the gift: the box opens from a slit and rises */
.wrapbox { position: relative; }
html.js:not(.rm) .gift-stage:not(.in) .phone { clip-path: inset(50% 0 50% 0 round 40px); transform: translate3d(0, 48px, 0) scale(.96); }
html.js:not(.rm) .gift-stage.in .phone:not(.done) { animation: unwrap var(--t-scene) var(--ease-in-out) .1s both; }
@keyframes unwrap {
  from { clip-path: inset(50% 0 50% 0 round 40px); transform: translate3d(0, 48px, 0) scale(.96); }
  55% { clip-path: inset(0 0 0 0 round 40px); }
  to { clip-path: inset(-30% -30% -30% -30% round 0); transform: none; }
}

/* ==========================================================================
   3 · SOCI — pinned: each screen slides in over the one before, which steps back into the dark
   ========================================================================== */
.members { position: relative; height: 300vh; height: 300svh; background: var(--notte-3); }
@media (max-width: 699px) { .members { height: 210vh; height: 210svh; } }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; display: grid; align-items: center; }
html.js:not(.rm) .pin { contain: size layout paint; }
.m-bg { position: absolute; inset: -4% 0; z-index: 0; }
.live .m-bg, .live .shot, .live .m-rail i { will-change: transform; }
.live .shot-dim { will-change: opacity; }
.m-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(.35) contrast(1.05);
  transition: opacity 900ms var(--ease-in-out); }
.m-bg img.on { opacity: .34; }
.m-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--notte-3) 0%, rgba(13, 11, 30, .82) 45%, rgba(13, 11, 30, .55) 100%), linear-gradient(0deg, var(--notte-3), transparent 30%); }
.m-grid { position: relative; z-index: 1; display: grid; gap: 22px; padding-top: calc(var(--header) + 8px); padding-bottom: 20px; height: 100%; align-content: center;
  grid-template-areas: "head" "phone" "steps"; justify-items: center; }
.m-head { grid-area: head; display: grid; gap: 12px; justify-self: stretch; }
.m-head .h2 { font-size: clamp(1.75rem, 4.6vw, 4rem); }
.m-phone { grid-area: phone; position: relative; }
.m-phone .phone { --w: clamp(140px, (100svh - 360px) / 2.15, 300px); }
.shot { overflow: visible; background: #0A0912; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot + .shot { box-shadow: 0 -22px 44px -14px rgba(0, 0, 0, .75); }
.shot-dim { position: absolute; inset: 0; background: #05040C; opacity: 0; pointer-events: none; }
html.js:not(.rm) .m-phone .shot + .shot { transform: translate3d(0, 102%, 0); }
.steps { grid-area: steps; position: relative; justify-self: stretch; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: 8px; }
.step button {
  display: block; width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 700 clamp(1.05rem, 4.4vw, 2.5rem)/1 var(--display); letter-spacing: -.03em; color: var(--ink); opacity: .42;
  transition: opacity var(--t-state) var(--ease-out), translate 480ms var(--ease-spring);
}
@media (hover: hover) { .step button:hover { opacity: .7; } }
.step button:active { translate: 0 2px; transition-duration: var(--t-state), 90ms; }
.step.on button { opacity: 1; }
.step p { color: var(--ink-2); font-size: 1.0625rem; max-width: 30ch; }
.step-shot { display: none; }
.m-rail { position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: rgba(255, 255, 255, .14); }
.m-rail i { position: absolute; inset: 0; background: var(--lime); transform-origin: left; transform: scaleX(0); }
@media (max-width: 899px) {
  .steps { grid-template-rows: auto auto; row-gap: 14px; }
  .step { display: contents; }
  .step p { grid-row: 2; grid-column: 1 / -1; display: none; min-height: 3.2em; }
  .step.on p { display: block; animation: rise var(--t-reveal) var(--ease-out); }
  .m-rail { top: 52px; bottom: auto; }
}
@keyframes rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@media (min-width: 900px) {
  .m-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "head phone" "steps phone"; column-gap: 48px; row-gap: 48px; justify-items: stretch; align-content: center; }
  .m-head { align-self: end; }
  .m-phone { justify-self: center; }
  .m-phone .phone { --w: min(340px, 32svh); }
  .steps { grid-template-columns: 1fr; padding-left: 30px; row-gap: 6px; align-self: start; }
  .step p { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 520ms var(--ease-out), opacity var(--t-state) var(--ease-out), margin 520ms var(--ease-out); }
  .step.on p { max-height: 6em; opacity: 1; margin: 4px 0 10px; transition-delay: 0ms, 120ms, 0ms; }
  .m-rail { left: 0; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .m-rail i { transform-origin: top; transform: scaleY(0); }
}
/* static version: without JS, or with reduced motion — three phones side by side, nothing pinned */
html:not(.js) .members, html.rm .members { height: auto; }
html:not(.js) .pin, html.rm .pin { position: relative; height: auto; padding-block: 120px 96px; }
html:not(.js) .m-phone, html.rm .m-phone, html:not(.js) .m-rail, html.rm .m-rail { display: none; }
html:not(.js) .m-grid, html.rm .m-grid { grid-template-columns: 1fr; grid-template-areas: "head" "steps"; height: auto; padding-top: 0; }
html:not(.js) .steps, html.rm .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 28px; padding: 0; }
html:not(.js) .step, html.rm .step { display: grid; gap: 10px; align-content: start; }
html:not(.js) .step button, html.rm .step button { opacity: 1; pointer-events: none; font-size: 1.6rem; }
html:not(.js) .step p, html.rm .step p { display: block; max-height: none; opacity: 1; margin: 0; grid-row: auto; }
html:not(.js) .step-shot, html.rm .step-shot { display: block; width: min(240px, 70%); border-radius: 26px; border: 6px solid #1E1A3A; order: -1; }

/* ==========================================================================
   4 · NUMERI — odometers that roll to real product facts
   ========================================================================== */
.facts { padding-block: clamp(80px, 12vh, 140px); border-block: 1px solid var(--line); background: var(--notte); }
.facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 20px; }
@media (min-width: 960px) { .facts-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.fact { display: grid; gap: 14px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.num { font: 800 clamp(3.4rem, 9vw, 6.6rem)/1 var(--display); letter-spacing: -.05em; color: var(--lime); display: flex; align-items: baseline; gap: .06em; }
.num small { font-size: .42em; letter-spacing: -.02em; }
.fact .lbl { color: var(--ink-2); font-size: 1.0625rem; max-width: 18ch; }
.odo { display: inline-flex; }
.odo-col { position: relative; display: inline-block; height: 1em; overflow: hidden; transition: width 500ms var(--ease-out); }
.odo-measure { display: inline-block; visibility: hidden; }
.odo-strip { position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; align-items: center; transform: translate3d(-50%, 0, 0);
  transition: transform 1.9s var(--ease-out); }
.odo-strip span { display: block; height: 1em; line-height: 1; }
.odo.go .odo-strip { transform: translate3d(-50%, calc(var(--to) * -1em), 0); }

/* ==========================================================================
   5 · GESTIONALE — a camera moves over the real screen
   ========================================================================== */
.gest { padding-block: clamp(96px, 14vh, 168px); position: relative; overflow: clip; }
.g-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 6vh, 64px); }
.g-grid { display: grid; gap: 24px; }
@media (min-width: 1000px) { .g-grid { grid-template-columns: 340px 1fr; gap: 56px; align-items: start; } }
.g-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut) 6px; scroll-snap-type: x proximity; }
.g-tabs::-webkit-scrollbar { display: none; }
.g-tab {
  position: relative; flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .22);
  background: none; cursor: pointer; text-align: left; font-weight: 600; white-space: nowrap; scroll-snap-align: start; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out), scale 520ms var(--ease-spring);
}
.g-tab:active { scale: .95; transition-duration: var(--t-state), var(--t-state), var(--t-state), 90ms; }
@media (hover: hover) { .g-tab:hover { border-color: rgba(255, 255, 255, .5); } }
.g-tab[aria-selected="true"] { background: var(--bianco); color: var(--notte); border-color: var(--bianco); }
.g-tab .t-d, .g-tab .bar { display: none; }
@media (min-width: 1000px) {
  .g-tabs { display: grid; overflow: visible; margin: 0; padding: 0; gap: 0; border-bottom: 1px solid var(--line); }
  .g-tab { display: grid; gap: 8px; min-height: 0; padding: 20px 0 22px; border: 0; border-top: 1px solid var(--line); border-radius: 0; white-space: normal;
    font: 700 1.5rem/1.1 var(--display); letter-spacing: -.025em; color: var(--ink); opacity: .46;
    transition: opacity var(--t-state) var(--ease-out), translate var(--t-state) var(--ease-out); }
  .g-tab:active { scale: none; translate: 3px 0; }
  @media (hover: hover) { .g-tab:hover { opacity: .75; translate: 3px 0; } }
  .g-tab[aria-selected="true"] { background: none; color: var(--ink); opacity: 1; translate: 0 0; }
  .g-tab .t-d { display: block; font: 400 1rem/1.45 var(--text); letter-spacing: 0; color: var(--ink-2); max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 520ms var(--ease-out), opacity var(--t-state) var(--ease-out); }
  .g-tab[aria-selected="true"] .t-d { max-height: 5em; opacity: 1; transition-delay: 0ms, 120ms; }
  .g-tab .bar { display: block; position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
  .g-tab .bar i { display: block; height: 100%; background: var(--lime); transform-origin: left; transform: scaleX(0); }
  .g-tabs.fixed .g-tab[aria-selected="true"] .bar i { transform: none; transition: transform var(--t-state) var(--ease-out); }
  .g-desc { display: none; }
}
.g-view { position: relative; display: grid; gap: 14px; }
.browser { position: relative; border-radius: 14px; overflow: hidden; background: #0B0A16; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -40px rgba(0, 0, 0, .9); }
html.js:not(.rm) .browser { transition: clip-path var(--t-scene) var(--ease-in-out); }
html.js:not(.rm) .g-view:not(.in) .browser { clip-path: inset(0 100% 0 0 round 14px); }
html.js:not(.rm) .g-view.in .browser { clip-path: inset(0 0 0 0 round 14px); }
.bar-top { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #1E1A36; }
.bar-top > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.bar-top span { margin-left: 12px; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .07); font-size: .75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp { position: relative; aspect-ratio: 1600 / 908; overflow: hidden; background: #F2F3F6; }
.cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.2s var(--ease-in-out); }
.live .cam { will-change: transform; }
.cam img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 520ms var(--ease-in-out); }
.cam img.on { opacity: 1; }
.tablet { position: absolute; z-index: 3; right: -3%; bottom: 14%; width: min(46%, 380px); padding: 9px; border-radius: 22px; background: #0E0C1C;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -20px rgba(0, 0, 0, .85); opacity: 0; transform: translate3d(0, 40px, 0) rotate(2deg); pointer-events: none;
  transition: opacity var(--t-state) var(--ease-in-out), transform var(--t-state) var(--ease-in-out); }
.tablet img { border-radius: 14px; }
.g-view.show-tablet .tablet { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-scene) var(--ease-out); transition-delay: 300ms; }
.g-desc { font-size: 1.0625rem; color: var(--ink-2); min-height: 3em; }
@media (max-width: 999px) { .tablet { right: 4%; bottom: 30%; width: 58%; } }

/* ==========================================================================
   6 · PAYOFF — a framed shot opens to full screen, the three words light up
   ========================================================================== */
.reel { position: relative; height: 240vh; height: 240svh; background: var(--notte); }
@media (max-width: 699px) { .reel { height: 180vh; height: 180svh; } }
.reel-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: clip; }
.reel-media { position: absolute; inset: 0; clip-path: inset(13% 17% round 26px); }
.reel-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.reel-dim { position: absolute; inset: 0; background: var(--notte); opacity: .3; }
.live .reel-media img { will-change: transform; }
.live .reel-dim { will-change: opacity; }
.reel-words { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: .04em;
  font: 800 clamp(2.9rem, 10.5vw, 9.6rem)/.9 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.reel-words span { color: rgba(255, 255, 255, .22); transform: translate3d(0, .06em, 0); transition: color 600ms var(--ease-in-out), transform var(--t-reveal) var(--ease-out); }
.reel-words span.lit { color: var(--lime); transform: none; }
@media (max-width: 699px) { .reel-media img { object-position: 74% 40%; } .reel-media { clip-path: inset(22% 6% round 18px); } }
html:not(.js) .reel, html.rm .reel { height: auto; }
html:not(.js) .reel-pin, html.rm .reel-pin { position: relative; height: 92svh; }
html:not(.js) .reel-media, html.rm .reel-media { clip-path: none; }
html:not(.js) .reel-dim, html.rm .reel-dim { opacity: .58; }
html:not(.js) .reel-media img, html.rm .reel-media img { transform: none; }
html:not(.js) .reel-words span, html.rm .reel-words span { color: var(--lime); transform: none; }

/* ==========================================================================
   7 · PREZZO
   ========================================================================== */
.price { padding-block: clamp(96px, 14vh, 168px); }
.price-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .price-grid { grid-template-columns: 1.15fr .85fr; gap: 72px; } }
.p-copy { display: grid; gap: 26px; justify-items: start; }
.p-big { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 20px; padding-top: 22px; border-top: 1px solid var(--line); width: 100%; }
.p-big .num { font-size: clamp(4.4rem, 12vw, 8.4rem); color: var(--bianco); }
.p-big .num small { font-size: .5em; }
.p-big .per { font-size: 1.125rem; color: var(--ink-2); padding-bottom: .9em; max-width: 22ch; }
.p-note { font-size: 1rem; color: var(--ink-3); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.p-media { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 1 / 1; }
.p-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
html.js:not(.rm) .p-media { transition: clip-path 1.3s var(--ease-in-out); }
html.js:not(.rm) .p-media img { transition: transform 2.2s var(--ease-out); }
html.js:not(.rm) :not(.in) > .p-media { clip-path: inset(100% 0 0 0 round 22px); }
html.js:not(.rm) :not(.in) > .p-media img { transform: scale(1.25); }
html.js:not(.rm) .in > .p-media { clip-path: inset(0 0 0 0 round 22px); }
html.js:not(.rm) .in > .p-media img { transform: scale(1.02); }
@media (max-width: 959px) { .p-media { aspect-ratio: 16 / 11; } }

/* ==========================================================================
   8 · FINALE — the last shot opens like an iris
   ========================================================================== */
.final { position: relative; min-height: 96svh; display: grid; align-items: center; isolation: isolate; overflow: clip; text-align: center; }
.f-media { position: absolute; inset: 0; z-index: -2; clip-path: circle(16% at 50% 52%); }
.f-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(1.15); }
.live .f-media img { will-change: transform; }
.f-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 50%, rgba(20, 17, 43, .55), rgba(20, 17, 43, .88)); }
.f-in { display: grid; gap: 30px; justify-items: center; padding-block: 120px; }
.final h2 { font-size: clamp(2.3rem, 6.4vw, 5.6rem); max-width: 14em; }
.final .ctas { justify-content: center; }
@media (max-width: 699px) { .f-media img { object-position: 18% 30%; } }
html:not(.js) .f-media, html.rm .f-media { clip-path: none; }
html:not(.js) .f-media img, html.rm .f-media img { transform: none; }

/* ---------- footer ---------- */
.foot { background: var(--notte-3); padding-block: 56px calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.foot-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: auto 1fr auto; } }
.foot .payoff-mini { font-size: .75rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-left: -12px; }
.foot nav a, .foot nav button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .3); font-size: .9375rem;
  transition: color var(--t-touch) var(--ease-out), text-decoration-color var(--t-touch) var(--ease-out), text-underline-offset var(--t-state) var(--ease-out); }
@media (hover: hover) { .foot nav a:hover, .foot nav button:hover { color: var(--bianco); text-decoration-color: var(--bianco); text-underline-offset: 6px; } }
.foot .brandline { display: grid; gap: 12px; }
.foot small { color: var(--ink-3); font-size: .8125rem; }

/* ---------- reduced motion: everything stands still, the page is complete ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .grain { display: none; }
}
html.rm .grain { display: none; }