/* GymRAT · sito della beta per coach
   Linguaggio del tema F7: nero e lime, titoli Kanit maiuscoli e compatti, bande diagonali, etichette ruotate,
   testo contornato, frecce a chevron. Niente foto: al loro posto le schermate dell'app con lo stile Thypo · Grafite
   scuro (Backend/src/athlete-styles/thypo.json), ricostruite dalle catture dell'app.
   Regola: niente sillabazione (hyphens: manual), a capo solo tra parole. */

:root {
  color-scheme: dark;
  --ink: #191919; --ink-2: #222222; --ink-3: #313131; --line: #3a3a3a;
  --grey: #5e5e5e; --grey-2: #9a9a9a; --paper: #ededed; --white: #ffffff;
  --lime: #ccff00; --lime-ink: #000000; --pink: #ff4fa3;
  --disp: "Kanit", "Arial Narrow", Impact, sans-serif;
  --text: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100% }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: var(--ink); color: var(--white); font: 16px/1.55 var(--text); hyphens: manual; overflow-x: hidden; -webkit-font-smoothing: antialiased }
img, svg { max-width: 100% }
a { color: inherit }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--lime); color: var(--lime-ink); padding: 10px 14px; font-weight: 700 }
.skip:focus { top: 8px }

/* ---------- elementi comuni ---------- */
.disp { font-family: var(--disp); font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.005em; margin: 0; text-wrap: balance }
.kicker { display: inline-block; font-family: var(--disp); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime) }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; background: var(--lime); color: var(--lime-ink); padding: 14px 22px 13px; border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--white) }
.btn.ghost { background: transparent; color: var(--white); padding-inline: 0 }
.btn.ghost:hover { transform: none; box-shadow: none; color: var(--lime) }
.btn.dark { background: var(--ink); color: var(--lime) }
.btn.dark:hover { box-shadow: 4px 4px 0 var(--lime) }
@media (prefers-reduced-motion: reduce) { .btn { transition: none } .btn:hover { transform: none } }
.chev { width: 16px; height: 14px; flex: none; background: currentColor; clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%) }
.chev.lime { color: var(--lime) }
.logo { font-family: var(--disp); font-weight: 900; font-style: italic; font-size: 30px; letter-spacing: -.02em; line-height: 1; text-decoration: none; white-space: nowrap }
.logo b { color: var(--lime); font-weight: 900 }

/* ---------- testata fissa (lime quando si scorre, come F7) ---------- */
/* La testata parte dal bordo superiore e copre anche l'area di sistema (notch, barra di Safari compressa): il sito
   non deve mai vedersi scorrere sopra. ::before sale oltre il bordo per coprire l'effetto elastico di iOS. */
html { background: var(--ink) }
.top { position: fixed; left: 0; right: 0; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: var(--ink); transition: background .2s ease }
.top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: inherit; pointer-events: none }
.top:not(.scrolled) { background: transparent }
.top:not(.scrolled)::before { background: var(--ink) }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px }
.top nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-family: var(--disp); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase }
.top nav a { text-decoration: none; color: var(--grey-2) }
.top nav a:hover { color: var(--white) }
.top .btn { padding: 10px 16px 9px; font-size: 13px }
.top.scrolled { background: var(--lime); color: var(--lime-ink) }
.top.scrolled .logo b { color: var(--lime-ink) }
.top.scrolled nav a { color: rgba(0,0,0,.65) }
.top.scrolled nav a:hover { color: var(--lime-ink) }
.top.scrolled .btn { background: var(--lime-ink); color: var(--lime) }
.top.scrolled .btn:hover { box-shadow: none; transform: none }
@media (max-width: 860px) { .top nav { display: none } .top .wrap { height: 64px } html { scroll-padding-top: calc(70px + env(safe-area-inset-top, 0px)) } }

/* ---------- telefono con una schermata dell'app (390×844 scalata a 280) ---------- */
.device { width: 300px; max-width: 100%; border-radius: 46px; background: #050505; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px #2c2c2c; position: relative; flex: none }
.vp { width: 280px; height: 606px; border-radius: 36px; overflow: hidden; position: relative; background: #000 }
.app {
  --a-bg: #000000; --a-surface: #1c1c1e; --a-ink: #ffffff; --a-text: #ffffff; --a-muted: #98989f; --a-line: #2c2c2e;
  --a-accent: #ccff00; --a-on: #000000; --a-soft: #3d472b; --a-info: #ff60a9;
  --a-work: #ccff00; --a-rest: #ff4fa3; --a-future: #262628; --a-badge: #8e8e93;
  --a-disp: "Big Shoulders", "Kanit", Impact, sans-serif; --a-body: "Manrope", system-ui, sans-serif;
  position: absolute; top: 0; left: 0; width: 390px; height: 844px; transform: scale(.718); transform-origin: 0 0;
  background: var(--a-bg); color: var(--a-text); font: 500 15px/1.4 var(--a-body); overflow: hidden; user-select: none }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none }
/* Oggi */
.o-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 20px 0 }
.o-head .h { margin: 0; font-family: var(--a-disp); font-weight: 900; text-transform: uppercase; font-size: 70px; line-height: 1.05; color: var(--a-ink); letter-spacing: -.01em }
.o-head small { display: block; font-size: 13.5px; color: #c7c7cc; margin-top: 2px }
.o-head .bar { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--a-accent); margin-top: 10px }
.o-av { width: 44px; height: 44px; border-radius: 50%; background: var(--a-ink); color: var(--a-bg); display: grid; place-items: center; font-weight: 600; font-size: 14px; margin-top: 23px }
.o-card { margin: 0 16px; background: var(--a-surface); border-radius: 24px }
.o-week { margin-top: 20px; padding: 14px 16px 22px }
.o-week .t { font-family: var(--a-disp); font-weight: 900; font-size: 27px; line-height: 1.05; text-transform: uppercase; color: var(--a-ink); padding: 0 2px 4px; border-bottom: 1px solid var(--a-line) }
.o-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 7px }
.o-day { display: grid; justify-items: center; gap: 8px }
.o-day span { width: 100%; height: 48px; border-radius: 24px; background: var(--a-surface); display: grid; align-content: center; justify-items: center; gap: 3px; font-weight: 600; font-size: 12px; color: #6b6b70; border: 2px solid transparent }
.o-day span i { font-style: normal; font-size: 11px; line-height: 1 }
.o-day .done { background: var(--a-accent); color: var(--a-on) }
.o-day .part { background: var(--a-soft); color: var(--a-accent) }
.o-day .miss { background: #000; color: var(--a-muted) }
.o-day .todo { background: var(--a-future); color: var(--a-ink) }
.o-day .sel { border-color: var(--a-ink); box-shadow: 0 0 0 2px #3a3a3c }
.o-day b { width: 6px; height: 6px; border-radius: 50% }
.o-day b.today { background: var(--a-accent) }
.o-hint { text-align: center; font-style: italic; font-size: 12px; color: #6e6e73; margin-top: 16px }
.o-sec { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 20px 6px; font-family: var(--a-disp); font-weight: 900; font-size: 24px; line-height: 1; text-transform: uppercase; color: #5f5f64 }
.o-sec small { font-family: var(--a-body); font-weight: 500; font-size: 11px; text-transform: none; color: var(--a-muted) }
.o-main { display: grid; gap: 10px; padding: 18px 20px 20px }
.o-main .row1 { display: flex; justify-content: flex-end; font-size: 13px; font-weight: 600 }
.o-main .eta { display: inline-flex; align-items: center; gap: 4px; color: var(--a-info); white-space: nowrap; font-size: 13px }
.o-main .eta .ic { font-size: 17px }
.o-main .h { margin: 0; font-family: var(--a-disp); font-weight: 900; text-transform: uppercase; font-size: 36px; line-height: 1.02; color: var(--a-ink) }
.o-tl { display: grid; gap: 8px; margin-top: 2px }
.o-tl div { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px }
.o-tl i { width: 24px; height: 24px; border-radius: 50%; background: var(--a-badge); color: #1c1c1e; display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 11px }
.o-tl span { color: var(--a-ink); min-width: 0 }
.o-tl em { font-style: normal; color: var(--a-muted) }
.o-tl small { color: #6e6e73; font-size: 13px; white-space: nowrap }
.o-btn { display: flex; justify-content: center; align-items: center; gap: 12px; height: 48px; border-radius: 22px; background: var(--a-accent); color: var(--a-on); font-weight: 700; font-size: 15.5px; margin-top: 6px }
.o-btn .ic { font-size: 20px; fill: currentColor }
.o-tabs { position: absolute; left: 20px; right: 20px; bottom: 20px; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--a-surface); border-radius: 999px; padding: 12px 6px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6) }
.o-tabs span { display: grid; justify-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: #6e6e73 }
.o-tabs .ic { font-size: 24px }
.o-tabs .on { color: var(--a-accent) }
/* Timer */
.t-top { display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; padding: 26px 20px 0; color: var(--a-rest) }
.t-top .ic { font-size: 30px; justify-self: center; stroke-width: 2.2 }
.t-top div { text-align: center; font-family: var(--a-disp); font-weight: 900; text-transform: uppercase; line-height: 1 }
.t-top small { display: block; font-size: 19px }
.t-top b { display: block; font-size: 38px; margin-top: 2px; font-variant-numeric: tabular-nums }
.t-cards { position: absolute; left: 20px; right: 20px; top: 191px }
.t-phase { position: relative; z-index: 1; height: 261px; border-radius: 28px; background: var(--a-work); color: #000; display: grid; align-content: center; justify-items: center; font-family: var(--a-disp); font-weight: 900; text-transform: uppercase; line-height: .9; box-shadow: 0 14px 22px rgba(0,0,0,.35) }
.t-phase small { font-size: 64px }
.t-phase b { font-size: 124px; font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.t-next { margin-top: -28px; padding-top: 30px; height: 132px; border-radius: 0 0 28px 28px; background: var(--a-rest); color: #000; display: grid; align-content: center; justify-items: center; font-family: var(--a-disp); font-weight: 900; text-transform: uppercase; line-height: 1 }
.t-next small { font-size: 22px }
/* timer aperto da un esercizio della scheda: card più alta con la riga della prescrizione */
.t-cards.plan { top: 175px }
.t-top .t-name { font-size: 27px }
.t-cards.plan .t-phase { height: 298px }
.t-phase em { font-style: normal; font-size: 22px; margin-top: 18px; line-height: 1; letter-spacing: 0; text-transform: none }
.t-next b { font-size: 38px; font-variant-numeric: tabular-nums }
.t-bot { position: absolute; left: 0; right: 0; bottom: 42px; display: grid; grid-template-columns: 1fr 140px 1fr; align-items: end; font-family: var(--a-disp); font-weight: 900; text-transform: uppercase; text-align: center; line-height: 1 }
.t-bot b { display: block; font-size: 60px; margin-bottom: 6px }
.t-bot small { display: block; font-size: 21px; color: var(--a-ink); line-height: 1.15 }
.t-bot .r b { color: var(--a-rest) }
.t-bot .c b { color: var(--a-work) }
.t-pause { display: grid; justify-items: center; gap: 14px }
.t-pause span { width: 104px; height: 104px; border-radius: 50%; background: var(--a-work); box-shadow: 0 0 0 4px #000, 0 0 0 8px var(--a-work); display: grid; place-items: center; color: #000 }
.t-pause .ic { font-size: 54px; stroke-width: 2.4 }
.t-pause small { color: var(--a-work) }

/* testi che possono finire sopra le bande lime: ombra scura leggera per staccarli dal verde */
.hero .kicker, .hero h1, .hero .lead, .hero .btn.ghost,
.flow .head .kicker, .flow .head h2, .flow .head p {
  text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 3px 16px rgba(0,0,0,.4);
}
/* testi piccoli: ombra più stretta e scura, fa da contorno */
.hero .kicker, .flow .head .kicker, .hero .btn.ghost {
  text-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 1px rgba(0,0,0,.9), 0 1px 6px rgba(0,0,0,.6);
}

/* ===================== 1 · apertura ===================== */
.hero { position: relative; overflow: hidden; isolation: isolate }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--lime); clip-path: polygon(66% 0, 80% 0, 100% 40%, 100% 68%) }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--lime); clip-path: polygon(0 80%, 0 100%, 20% 100%) }
.hero .grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding-block: calc(112px + env(safe-area-inset-top, 0px)) 96px }
.hero .grid > * { min-width: 0 }
.hero h1 { font-size: clamp(54px, 8.6vw, 116px) }
.hero h1 em { font-style: italic; color: var(--lime) }
.hero .lead { color: var(--grey-2); font-size: 18px; max-width: 44ch; margin: 22px 0 30px }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center }
.stage { display: grid; justify-items: center; padding-block: 10px }
.devwrap { position: relative }
.tags { position: absolute; right: -70px; bottom: 30px; display: grid; gap: 10px; justify-items: end; transform: rotate(-17deg); transform-origin: 100% 100%; z-index: 2; pointer-events: none }
.tags span { background: var(--lime); color: var(--lime-ink); font-family: var(--disp); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 22px; line-height: .95; padding: 10px 26px 9px 18px; clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); box-shadow: 0 10px 20px rgba(0,0,0,.3); white-space: nowrap }
.tags span:nth-child(2) { margin-right: 24px }
@media (max-width: 880px) {
  .hero .grid { grid-template-columns: 1fr; padding-block: calc(84px + env(safe-area-inset-top, 0px)) 80px }
  .hero::before { clip-path: polygon(100% 52%, 100% 78%, 62% 100%, 34% 100%) }
}
@media (max-width: 520px) { .tags { right: -4px; bottom: 22px } .tags span { font-size: 16px; padding: 8px 20px 7px 14px } }

/* ===================== 2 · come funziona: scorrimento in tre passi =====================
   A sinistra i passi scorrono, a destra lo schermo resta fermo e cambia (data-step sul palco).
   Su telefono il palco sta fisso in alto e i passi scorrono sotto. Senza JS si vede il passo 1. */
/* overflow: clip taglia lo schermo al bordo della sezione: non copre la sezione dopo (e non rompe lo sticky) */
.flow { position: relative; isolation: isolate; padding-block: 100px 40px; background: var(--ink-2); overflow: clip }
.flow::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--lime); clip-path: polygon(0 0, 22% 0, 0 9%) }
.flow .head { display: grid; gap: 14px; max-width: 900px }
.flow h2 { font-size: clamp(52px, 8.4vw, 124px); line-height: .9 }
.flow h2 em { font-style: italic; font-weight: 900; color: var(--lime) }
.flow .head p { color: var(--grey-2); font-size: 18px; max-width: 52ch; margin: 6px 0 0 }
.flow-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; margin-top: 30px }
.fsteps { list-style: none; margin: 0; padding: 0 0 14vh; position: relative; z-index: 1 }
.fstep { min-height: 86vh; display: grid; align-content: center; gap: 16px; padding-block: 40px; opacity: .3; transition: opacity .35s ease }
.fstep.on { opacity: 1 }
.fstep .num { font-family: var(--disp); font-weight: 900; font-size: 150px; line-height: .78; color: transparent; -webkit-text-stroke: 2px var(--lime) }
.fstep h3 { margin: 0; font-family: var(--disp); font-weight: 800; font-size: clamp(36px, 4.4vw, 60px); line-height: .92; text-transform: uppercase; text-wrap: balance }
.fstep.claim h3 { color: var(--lime); font-style: italic; font-weight: 900 }
.fstep p { margin: 0; color: var(--grey-2); font-size: 17px; max-width: 40ch }
.stage-col { position: relative }
.fstage { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); height: calc(100vh - 128px - env(safe-area-inset-top, 0px)); max-height: 760px; min-height: 460px }
.fprog { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0 }
.fprog li { display: grid; gap: 8px; font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey) }
.fprog li::before { content: ""; height: 4px; background: var(--ink-3); transition: background .3s ease }
.fstage[data-step="1"] .fprog li:nth-child(1), .fstage[data-step="2"] .fprog li:nth-child(-n+2), .fstage[data-step="3"] .fprog li { color: var(--white) }
.fstage[data-step="1"] .fprog li:nth-child(1)::before, .fstage[data-step="2"] .fprog li:nth-child(-n+2)::before, .fstage[data-step="3"] .fprog li::before { background: var(--lime) }
/* desktop: schermo grande, allineato in alto a sinistra; esce dalla finestra di ~1/5 a destra e ~1/8 in basso (scala in JS) */
.scr { position: absolute; inset: 52px 0 0; display: grid; place-items: start; opacity: 0; transform: translateY(36px) scale(.97); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none }
.fstage[data-step="1"] .s1, .fstage[data-step="2"] .s2, .fstage[data-step="3"] .s3 { opacity: 1; transform: none }
.scr.s3 { justify-items: center }
.scr-box { position: relative; width: calc(var(--w) * var(--s, .6) * 1px); height: calc(var(--h) * var(--s, .6) * 1px) }
.scr-in { position: absolute; top: 0; left: 0; transform: scale(var(--s, .6)); transform-origin: 0 0 }
@media (prefers-reduced-motion: reduce) { .fstep, .scr, .fprog li::before { transition: none } .scr { transform: none } }
@media (max-width: 880px) {
  .flow { padding-block: 64px 20px }
  .flow-grid { grid-template-columns: 1fr; gap: 0; margin-top: 20px }
  .stage-col { order: -1; position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 2; background: var(--ink-2); margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r)); padding: 12px var(--gutter-r) 10px var(--gutter); box-shadow: 0 18px 24px -12px var(--ink-2) }
  .fstage { position: relative; top: 0; height: 50vh; min-height: 330px; max-height: none }
  .scr { place-items: center }
  .fsteps { padding-bottom: 8vh }
  .fstep { min-height: 62vh; align-content: start; padding-block: 36px 0; opacity: 1 }
  .fstep .num { font-size: 84px }
}

/* finestra del backoffice del coach, ridisegnata in stile Thypo (960×640) */
.cw { width: 960px; height: 640px; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 40px 70px rgba(0,0,0,.55), 0 0 0 1px #2c2c2e; display: grid; grid-template-rows: 38px 1fr; font: 500 13px/1.4 "Manrope", system-ui, sans-serif; color: #fff; text-align: left }
.cw-bar { display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #121213; border-bottom: 1px solid #2c2c2e }
.cw-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3c }
.cw-bar span { margin: 0 auto; background: #1c1c1e; border-radius: 8px; width: 36%; height: 22px }
.cw-body { display: grid; grid-template-columns: 220px 1fr; min-height: 0 }
.cw-side { background: #0d0d0e; border-right: 1px solid #1c1c1e; padding: 20px 12px; display: grid; align-content: start; gap: 6px }
.cw-logo { font-family: "Big Shoulders", "Kanit", sans-serif; font-weight: 900; font-size: 26px; text-transform: uppercase; padding: 0 10px 8px; line-height: 1 }
.cw-logo b { color: #ccff00 }
.cw-lab { font-family: "Big Shoulders", "Kanit", sans-serif; font-weight: 900; font-size: 15px; text-transform: uppercase; color: #5f5f64; padding: 10px 10px 2px }
.cw-ath { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 16px }
.cw-ath .av2 { width: 32px; height: 32px; border-radius: 50%; background: #1c1c1e; display: grid; place-items: center; font-weight: 700; font-size: 11px }
.cw-ath b { display: block; font-size: 13px; font-weight: 700 }
.cw-ath small { display: block; font-size: 11px; color: #98989f }
.cw-ath.on { background: #1c1c1e }
.cw-ath.on .av2 { background: #ccff00; color: #000 }
.cw-ath .pend { display: inline-block; margin-top: 2px; font-size: 10px; font-weight: 700; color: #ccff00; background: #3d472b; border-radius: 6px; padding: 1px 6px }
.cw-ath.new .av2 { background: transparent; border: 1.5px dashed #5f5f64; color: #98989f }
.cw-ath.new b { color: #98989f; font-weight: 600 }
.cw-main { padding: 26px 32px; display: grid; align-content: start; gap: 14px; min-width: 0; overflow: hidden }
.cw-eye { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #98989f }
.cw-title { margin: 0; font-family: "Big Shoulders", "Kanit", sans-serif; font-weight: 900; font-size: 54px; line-height: .95; text-transform: uppercase }
.cw-title + .bar2 { display: block; width: 36px; height: 4px; border-radius: 2px; background: #ccff00 }
.cw-sub { color: #98989f; font-size: 13px }
.cw-card { background: #1c1c1e; border-radius: 24px; padding: 20px; display: grid; gap: 12px }
.cw-f { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: #c7c7cc }
.cw-in { height: 40px; border-radius: 14px; background: #0d0d0e; border: 1px solid #2c2c2e; display: flex; align-items: center; padding: 0 14px; font-weight: 500; font-size: 13.5px; color: #fff }
.cw-in.focus { border-color: #ccff00; box-shadow: 0 0 0 3px #3d472b }
.cw-in.mid { justify-content: center; font-weight: 700 }
.cw-check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 12px; color: #98989f; line-height: 1.45 }
.cw-check i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #5f5f64 }
.cw-check b { color: #fff }
.cw-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 20px; background: #ccff00; color: #000; font-weight: 700; font-size: 14px }
.cw-btn.ghost { background: transparent; color: #fff; border: 1px solid #3a3a3c }
.cw-btn .ic { font-size: 18px }
.cw-row { display: flex; align-items: center; gap: 14px }
.cw-row .av3 { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-weight: 700; font-size: 14px }
.cw-row b { font-family: "Big Shoulders", "Kanit", sans-serif; font-weight: 900; font-size: 24px; text-transform: uppercase; line-height: 1 }
.cw-row small { display: block; color: #98989f; font-size: 12px }
.cw-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px }
.cw-step { display: grid; grid-template-columns: 36px 1fr 36px; gap: 6px }
.cw-step span { height: 40px; border-radius: 14px; background: #0d0d0e; border: 1px solid #2c2c2e; display: grid; place-items: center; color: #98989f }
.cw-step span.mid { color: #fff; font-weight: 700 }
.cw-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px }
.cw-day { background: #1c1c1e; border-radius: 16px; padding: 10px 9px; min-height: 118px; display: grid; align-content: start; gap: 3px; font-size: 10.5px; color: #98989f; min-width: 0 }
.cw-day b { color: #fff; font-size: 12px }
.cw-day em { font-style: normal; color: #ccff00; font-weight: 700; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cw-day span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cw-day span::before { content: "• " }
.cw-day small { margin-top: auto; padding-top: 6px; color: #ff60a9; font-weight: 600 }
.cw-day.rest { background: transparent; border: 1px dashed #2c2c2e }
.cw-day.rest b { color: #5f5f64 }
.cw-day.edit { box-shadow: 0 0 0 2px #ccff00 }
.cw-foot { display: flex; justify-content: space-between; align-items: center; background: #1c1c1e; border-radius: 999px; padding: 8px 8px 8px 20px; font-size: 12px; color: #98989f }
@media (max-width: 880px) {
  /* su telefono il backoffice perde la barra laterale: più grande e leggibile */
  .cw { width: 600px; height: 520px }
  .cw-body { grid-template-columns: 1fr }
  .cw-side { display: none }
  .cw-main { padding: 22px 24px }
  .cw-title { font-size: 46px }
}

/* allenamento in corso dell'atleta (Thypo · Grafite scuro, 390×844) */
.w-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 16px 16px 0 }
.w-back { width: 44px; height: 44px; border-radius: 50%; background: #1c1c1e; display: grid; place-items: center; font-size: 22px; color: #fff }
.w-top div { text-align: center; line-height: 1 }
.w-top b { display: block; font-family: var(--a-disp); font-weight: 900; font-size: 30px; text-transform: uppercase }
.w-top small { display: block; font-size: 11px; color: var(--a-muted); margin-top: 4px }
.w-prog { padding: 22px 16px 0; display: grid; gap: 8px; font-size: 12px; font-weight: 700 }
.w-prog div { display: flex; justify-content: space-between }
.w-prog i { height: 7px; border-radius: 4px; background: #2c2c2e; overflow: hidden; display: block }
.w-prog i::before { content: ""; display: block; width: 34%; height: 100%; background: var(--a-accent); border-radius: 4px }
.w-list { padding: 16px 16px 0; display: grid; gap: 16px; position: relative }
.w-card { background: var(--a-surface); border-radius: 24px; padding: 18px 18px 18px; display: grid; gap: 8px; position: relative; z-index: 1 }
.w-warm h6 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--a-disp); font-weight: 900; font-size: 27px; text-transform: uppercase; line-height: 1 }
.w-warm h6 .ic { color: #ff9f0a; font-size: 22px }
.w-warm p { margin: 0; font-size: 12.5px; line-height: 1.45 }
.w-ex { grid-template-columns: 26px 1fr 24px; column-gap: 12px; align-items: start }
.w-ex .ck { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--a-accent); display: grid; place-items: center; color: #000 }
.w-ex .ck .ic { font-size: 16px; stroke-width: 3 }
.w-ex.done { background: var(--a-soft) }
.w-ex.done .ck { background: var(--a-accent) }
.w-ex .tm { color: var(--a-accent); font-size: 22px }
.w-ex h6 { margin: 3px 0 0; font-family: var(--a-disp); font-weight: 800; font-size: 17px; line-height: 1.1 }
.w-ex .d { grid-column: 2 / 4; display: grid; gap: 8px; font-size: 12.5px; color: #c7c7cc; margin-top: 8px }
.w-ex .d b { color: #fff; font-weight: 700 }
.w-ex.done h6, .w-ex.done .d { text-decoration: line-through; color: #8e8e93 }
.w-ex.done .d b { color: #8e8e93 }
.w-line { position: absolute; left: 44px; top: 140px; bottom: 120px; width: 2px; background: #2c2c2e }
.w-mark { justify-self: center; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 22px; border: 1px solid #3a3a3c; font-size: 14px; color: #c7c7cc; margin-top: 4px }
.w-mark .ic { font-size: 18px }
.w-hint { text-align: center; font-size: 11px; color: #6e6e73; margin-top: -6px }

/* ===================== 4 · funzioni ===================== */
.feat { padding-block: 90px; background: var(--ink-2) }
.feat .head { text-align: center; display: grid; gap: 6px; justify-items: center; margin-bottom: 44px }
.feat h2 { font-size: clamp(44px, 6vw, 80px) }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0 }
.card { display: grid; grid-template-rows: 240px auto; background: var(--ink); min-width: 0 }
.card .vis { background: var(--ink-3); padding: 16px; overflow: hidden; display: grid; align-content: center; gap: 8px; font-size: 12px }
.card .cap { padding: 16px 16px 18px; border-bottom: 3px solid var(--lime) }
.card h3 { margin: 0; font-family: var(--disp); font-weight: 700; font-size: 19px; text-transform: uppercase; line-height: 1; display: flex; gap: 10px; align-items: center; justify-content: space-between }
.card h3 .chev { color: var(--lime) }
.card p { margin: 8px 0 0; font-size: 14px; color: var(--grey-2); line-height: 1.45 }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr } .feat { padding-block: 64px } }
.ed { background: var(--white); color: var(--ink); border-radius: 12px; padding: 10px; display: grid; gap: 8px }
.ed .nm { font-weight: 700; font-size: 13px }
.ed .fs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px }
.ed .f { border: 1px solid #d3d3d3; border-radius: 7px; padding: 4px 5px; font-size: 9px; color: var(--grey); text-transform: uppercase; letter-spacing: .04em }
.ed .f b { display: block; color: var(--ink); font-size: 13px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums }
.ed .f.hl { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.grp { font-family: var(--disp); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime) }
.mini { background: #1c1c1e; border-radius: 18px; padding: 14px; display: grid; gap: 8px; font: 500 12px/1.35 "Manrope", system-ui, sans-serif }
.mini .h { margin: 0; font-family: "Big Shoulders", "Kanit", sans-serif; font-weight: 900; font-size: 26px; line-height: 1; text-transform: uppercase; color: #fff }
.mini .r { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; color: #fff }
.mini .r i { width: 20px; height: 20px; border-radius: 50%; background: #8e8e93; color: #1c1c1e; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700 }
.mini .r.on i { background: #ccff00; color: #000 }
.mini .r em { font-style: normal; color: #98989f }
.mini .r small { color: #6e6e73; font-size: 11px }
.mini .b { background: #ccff00; color: #000; border-radius: 16px; text-align: center; font-weight: 700; font-size: 12.5px; padding: 9px }
.mprog { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; height: 150px }
.mprog div { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0 }
.mprog .v { font-family: var(--disp); font-weight: 600; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums }
.mprog .c { background: var(--grey) }
.mprog .now .c { background: var(--lime) }
.mprog .w { font-size: 10px; color: var(--grey-2); text-align: center }
.bub { border-radius: 14px; padding: 8px 10px; font-size: 11.5px; line-height: 1.35; max-width: 92% }
.bub.me { background: var(--white); color: var(--ink); justify-self: end; border-bottom-right-radius: 4px }
.bub.ai { background: #1d1d1d; color: var(--white); border-bottom-left-radius: 4px; border: 1px solid #3c3c3c }
.bub.ai b { color: var(--lime); font-weight: 600 }
.tool { font-size: 10px; color: var(--grey-2); font-family: ui-monospace, Menlo, monospace }
.also { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; list-style: none; padding: 0 }
.also li { border: 1px solid var(--line); padding: 8px 14px; font-size: 14px; color: var(--paper); display: inline-flex; gap: 8px; align-items: center }
.also li .chev { width: 10px; height: 9px; color: var(--lime) }

/* ===================== 5 · area atleta (chiara) ===================== */
.athlete { background: var(--paper); color: var(--ink); position: relative; overflow: hidden; isolation: isolate }
.athlete .ghosttxt { position: absolute; z-index: -1; top: 30px; left: -1%; font-family: var(--disp); font-weight: 900; font-size: clamp(110px, 21vw, 300px); line-height: .8; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px #c9c9c9; white-space: nowrap; letter-spacing: -.02em }
.athlete .grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; padding-block: 90px }
.athlete .grid > * { min-width: 0 }
.athlete .kicker { color: var(--ink) }
.athlete h2 { font-size: clamp(42px, 5.4vw, 74px); line-height: .98; margin-top: 10px }
.athlete h2 span { color: var(--lime); padding: 0 .1em; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 52% / 100% 62%; box-decoration-break: clone; -webkit-box-decoration-break: clone }
.athlete .side p { color: #4a4a4a; font-size: 17px; margin: 0 0 22px; max-width: 36ch }
.orbit { position: relative; width: 150px; height: 150px; margin-bottom: 22px }
.orbit svg { width: 100%; height: 100%; animation: spin 22s linear infinite }
.orbit text { font-family: var(--disp); font-weight: 600; font-size: 17px; letter-spacing: 4px; text-transform: uppercase; fill: var(--ink) }
.orbit .mid { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink) }
.orbit .mid div { width: 66px; height: 66px; border-radius: 50%; background: var(--lime); display: grid; place-items: center }
@keyframes spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .orbit svg { animation: none } }
.athlete ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.athlete li { border-left: 3px solid var(--ink); padding-left: 12px; font-size: 14px; color: #4a4a4a }
.athlete li b { display: block; font-family: var(--disp); font-weight: 800; font-size: 22px; text-transform: uppercase; color: var(--ink); line-height: 1.05 }
@media (max-width: 980px) {
  .athlete .grid { grid-template-columns: 1fr; padding-block: 64px; justify-items: start }
  .athlete .grid .device { justify-self: center }
}

/* ===================== 6 · coach ===================== */
.coach { background: var(--ink); position: relative; overflow: hidden }
.coach .grid { display: grid; grid-template-columns: auto .8fr 1.2fr; gap: 40px; align-items: center; padding-block: 90px }
.coach .grid > * { min-width: 0 }
.vert { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--disp); font-weight: 900; text-transform: uppercase; line-height: 1; color: var(--lime); font-size: 64px; white-space: nowrap }
.coach h2 { font-size: clamp(40px, 5vw, 66px); margin-top: 10px }
.coach p { color: var(--grey-2); font-size: 17px; margin: 20px 0 26px; max-width: 40ch }
.coach ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.coach li { display: flex; gap: 12px; align-items: center; font-weight: 500 }
.coach li .chev { color: var(--lime) }
.board { background: var(--paper); color: var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.45) }
.board .bh { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; background: var(--white); border-bottom: 1px solid #ddd; flex-wrap: wrap }
.board .bh b { font-family: var(--disp); font-weight: 800; font-size: 20px; text-transform: uppercase }
.board .bh span { font-size: 12px; color: var(--grey) }
.rows { display: grid; overflow-x: auto }
.rowx { display: grid; grid-template-columns: minmax(130px, 1.3fr) 70px repeat(7, 26px) minmax(90px, 1fr); gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #dadada; font-size: 13px; min-width: 560px }
.rowx.hd { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); padding-block: 8px; text-align: center }
.rowx.hd span:first-child, .rowx.hd span:nth-child(2), .rowx.hd span:last-child { text-align: left }
.who { display: flex; gap: 10px; align-items: center; font-weight: 600 }
.av { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; font-family: var(--disp); font-weight: 700; font-size: 12px; flex: none }
.wk { font-family: var(--disp); font-weight: 600; font-variant-numeric: tabular-nums }
.dot { width: 22px; height: 22px; border-radius: 7px; background: #dcdcdc; justify-self: center; display: inline-block }
.dot.d { background: var(--ink) }
.dot.p { background: linear-gradient(135deg, var(--ink) 50%, #dcdcdc 50%) }
.dot.m { background: var(--pink) }
.dot.x { background: var(--lime); box-shadow: inset 0 0 0 2px var(--ink) }
.meter { height: 8px; background: #dcdcdc; border-radius: 4px; overflow: hidden }
.meter i { display: block; height: 100%; background: var(--ink) }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 18px; font-size: 11px; color: var(--grey) }
.legend span { display: inline-flex; align-items: center; gap: 6px }
.legend .dot { width: 12px; height: 12px; border-radius: 4px }
@media (max-width: 980px) { .coach .grid { grid-template-columns: 1fr; padding-block: 64px } .vert { writing-mode: horizontal-tb; transform: none; font-size: 40px } }

/* ===================== 7 · beta e candidatura ===================== */
.join { background: var(--lime); color: var(--ink); position: relative; overflow: hidden; isolation: isolate }
.join::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--ink); clip-path: polygon(80% 100%, 100% 56%, 100% 100%) }
.join .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-block: 90px; align-items: start }
.join .grid > * { min-width: 0 }
.join .kicker { color: var(--ink) }
.join h2 { font-size: clamp(56px, 8vw, 110px); margin-top: 10px }
.join .lead { font-size: 18px; margin: 22px 0 30px; max-width: 40ch }
.big6 { display: flex; align-items: center; gap: 16px; margin: 0 0 34px }
.big6 b { font-family: var(--disp); font-weight: 900; font-size: 120px; line-height: .78 }
.big6 span { font-family: var(--disp); font-weight: 800; font-size: 26px; line-height: .95; text-transform: uppercase }
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; max-width: 460px; list-style: none; margin: 0; padding: 0 }
.stepper::before { content: ""; position: absolute; top: 19px; left: 20px; right: 20px; border-top: 2px dashed var(--ink) }
.stepper li { position: relative; display: grid; gap: 8px; justify-items: start; font-size: 13px; font-weight: 600; line-height: 1.25; padding-right: 10px }
.stepper li:nth-child(2) { justify-items: center; text-align: center }
.stepper li:nth-child(3) { justify-items: end; text-align: right; padding-right: 0 }
.stepper i { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--lime); display: grid; place-items: center; font-style: normal; font-family: var(--disp); font-weight: 700; font-size: 16px }
.stepper li:first-child i { background: var(--ink); color: var(--lime) }
.offer { margin: 38px 0 0; display: grid; gap: 12px; max-width: 460px }
.offer div { display: flex; gap: 12px; align-items: baseline; border-top: 2px solid var(--ink); padding-top: 10px }
.offer dt { font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: 20px; min-width: 110px }
.offer dd { margin: 0 }
.apply { background: var(--ink); color: var(--white); padding: 28px; display: grid; gap: 14px; box-shadow: 14px 14px 0 rgba(25,25,25,.25); align-content: start }
.apply h3 { margin: 0; font-family: var(--disp); font-weight: 800; font-size: 28px; text-transform: uppercase; line-height: 1 }
.apply > p { margin: 0; color: var(--grey-2); font-size: 14px }
/* modulo di candidatura: griglia a due colonne, campi a misura fissa (48px, caselle di testo 96px) */
.apply { position: relative; gap: 18px }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px }
.field { display: grid; grid-template-rows: auto auto; gap: 7px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0 }
.field.wide { grid-column: 1 / -1 }
.field > label, .field > legend { display: block; padding: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-2); line-height: 1.2 }
.field .opt { margin-left: 4px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--grey) }
.field input:not([type=checkbox]), .field select, .field textarea { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 14px; font: 15px/1.4 var(--text); color: var(--white); background: var(--ink-2); border: 1px solid var(--line); border-radius: 0; appearance: none; -webkit-appearance: none }
.field select { padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--grey-2) 50%), linear-gradient(135deg, var(--grey-2) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat }
.field textarea { height: 96px; padding: 12px 14px; resize: none }
.field input::placeholder, .field textarea::placeholder { color: var(--grey) }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--lime); outline: none }
.chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.chips > legend { grid-column: 1 / -1; margin-bottom: 7px; float: left; width: 100% }
.chips > label { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--line); background: var(--ink-2); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1; color: var(--paper); cursor: pointer; min-width: 0 }
.chips label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.chips > label:has(input:checked) { border-color: var(--lime); color: var(--lime) }
.apply input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--lime); cursor: pointer }
.apply .consent { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 13px; color: var(--grey-2); line-height: 1.45; cursor: pointer }
.apply .consent input { margin-top: 1px }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px }
.apply .btn:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none }
.apply .status { margin: 0; font-size: 14px; color: var(--grey-2) }
.apply .status:empty { display: none }
.apply .status.err { color: var(--pink) }
.apply.sent h3 { color: var(--lime) }
.apply.sent p { color: var(--paper); font-size: 16px; margin: 0 }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
@media (max-width: 1100px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 460px) { .fgrid { grid-template-columns: 1fr } .chips { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 900px) { .join .grid { grid-template-columns: 1fr; padding-block: 64px } }
@media (max-width: 460px) { .apply { padding: 20px } .big6 b { font-size: 96px } }

/* ===================== 8 · domande ===================== */
.faq { padding-block: 90px }
.faq .grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 120px; align-items: start }
@media (max-width: 1100px) { .faq .grid { gap: 72px } }
.faq .grid > * { min-width: 0 }
.faq h2 { font-size: clamp(44px, 6vw, 84px); margin-top: 10px }
.faq .side p { color: var(--grey-2); margin: 20px 0 0; max-width: 34ch }
.faq details { border-top: 2px solid var(--line) }
.faq details:last-child { border-bottom: 2px solid var(--line) }
.faq details[open] { border-top-color: var(--lime) }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: var(--disp); font-weight: 700; font-size: 21px; text-transform: uppercase; line-height: 1.1 }
.faq summary::-webkit-details-marker { display: none }
.faq summary .chev { color: var(--lime); transition: transform .2s ease }
.faq details[open] summary .chev { transform: rotate(90deg) }
.faq details p { margin: 0 0 22px; color: var(--grey-2); max-width: 62ch }
@media (prefers-reduced-motion: reduce) { .faq summary .chev { transition: none } }
@media (max-width: 860px) { .faq { padding-block: 64px } .faq .grid { grid-template-columns: 1fr; gap: 48px } }

/* ===================== piede ===================== */
.foot { background: #0f0f0f; border-top: 1px solid var(--line); overflow: hidden }
.foot .big { font-family: var(--disp); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(80px, 18vw, 250px); line-height: .8; color: transparent; -webkit-text-stroke: 2px #2f2f2f; white-space: nowrap; padding-top: 40px; letter-spacing: -.02em }
.foot .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-block: 28px 36px; font-size: 14px; color: var(--grey-2) }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0 }
.foot a { text-decoration: none }
.foot a:hover { color: var(--lime) }