/*
  site.css · il sito di Tsuyo, disegnato come l'app («Notte», DESIGN.md).
  È un sorgente: la build non lo tocca. I colori dell'accento stanno in accents.css (generato).
  Token dall'app (design/artifact/project/tokens.json): nero #0B0B0C, gesso #F4F2F7, vetro al 7%
  con bordo al 10%, raggi 12/18/24/32 e capsule, Unbounded per titoli e numeri, Manrope per il testo.
*/

/* MARK: - Caratteri (OFL, in assets/fonts) */

@font-face { font-family: "Unbounded"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Unbounded-Medium.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 600; font-display: swap; src: url("/assets/fonts/Unbounded-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Manrope-Medium.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("/assets/fonts/Manrope-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("/assets/fonts/Manrope-Bold.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("/assets/fonts/Manrope-ExtraBold.woff2") format("woff2"); }

/* MARK: - Token */

:root {
  color-scheme: dark;
  --ink: #0b0b0c;
  --ink-950: #121014;
  --ink-900: #17151b;
  --ink-850: #1f1d24;
  --ink-800: #2a2830;
  --chalk: #f4f2f7;
  --text-2: rgba(244, 242, 247, 0.66);
  --text-3: rgba(244, 242, 247, 0.6);
  --glass: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.1);
  --sunken: rgba(255, 255, 255, 0.05);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --border-input: rgba(244, 242, 247, 0.42);
  --amber: #ffc15e;

  --accent-subtle: rgb(var(--accent-rgb) / 0.16);
  --accent-glow: rgb(var(--accent-rgb) / 0.55);

  --display: "Unbounded", "Avenir Next", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 24px;
  --r-xl: 32px;
  --gutter: 20px;
  --max: 1200px;
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }
}

/* MARK: - Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--chalk);
  font-family: var(--body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  /* Il fondo dell'app: la tinta scura del colore in alto, che sfuma nel nero (backgroundGlow). */
  background-color: var(--ink);
  background-image:
    radial-gradient(120% 980px at 50% 140px, var(--accent-deep) 0%, var(--ink-950) 52%, var(--ink) 100%);
  background-repeat: no-repeat;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.24; }
h2 { font-size: clamp(27px, 3.3vw, 40px); line-height: 1.28; }
h3 { font-size: 18px; line-height: 1.4; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
svg { display: block; }
img { max-width: 100%; height: auto; }

a { color: var(--chalk); text-decoration-color: rgb(var(--accent-rgb) / 0.7); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

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

.muted { color: var(--text-2); }
.small { font-size: 15px; }
.statement { font-size: 19px; line-height: 1.55; color: var(--chalk); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: var(--ink); font-weight: 800; text-decoration: none;
}
.skip:focus { top: 12px; }

/* MARK: - Icone e disegni (classi di src/draw.mjs) */

.icon { width: 20px; height: 20px; flex: none; }
.icon-accent { color: var(--accent-text); }

.sv-chalk { fill: var(--chalk); }
.sv-accent { fill: var(--accent); }
.sv-accent-text { fill: var(--accent-text); }
.sv-ink { fill: var(--ink); }
.sv-board { fill: rgba(255, 255, 255, 0.05); }
.sv-hold { fill: rgba(255, 255, 255, 0.15); }
.sv-easy { fill: rgba(244, 242, 247, 0.3); }
.sv-marker-r { fill: var(--ink-900); stroke: var(--accent); }
.sv-letter, .sv-logo-text { font-family: var(--display); font-weight: 600; }
.sv-logo-text { fill: var(--chalk); }
.sv-track { stroke: rgba(255, 255, 255, 0.1); }
.sv-accent-stroke { stroke: var(--accent); }
.sv-glow-stroke { stroke: rgb(var(--accent-rgb) / 0.22); }
.sv-ring-track { stroke: var(--border-input); }
.sv-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.sv-tick { fill: var(--text-3); font-family: var(--body); font-size: 11px; font-weight: 600; }
.sv-stop-top { stop-color: var(--accent); stop-opacity: 0.32; }
.sv-stop-bottom { stop-color: var(--accent); stop-opacity: 0; }

.board { width: 100%; height: auto; }
.rhythm { width: 100%; }

/* MARK: - Controlli: capsule */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--body); font-weight: 800; font-size: 17px; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: var(--ink); box-shadow: 0 10px 34px -10px var(--accent-glow); }
.btn-primary:hover { background: var(--accent-pressed); }
.btn-primary:active { transform: scale(0.98); }
.btn-glass { background: var(--glass); border-color: var(--hairline-strong); color: var(--chalk); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.11); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 15px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 12px; border-radius: 999px;
  font-family: var(--body); font-weight: 700; font-size: 13px; line-height: 1.2; white-space: nowrap;
}
.pill .icon { width: 15px; height: 15px; }
.pill-accent { background: var(--accent-subtle); color: var(--accent-text); }
.pill-glass { background: var(--glass); border: 1px solid var(--hairline-strong); color: var(--chalk); min-height: 40px; padding: 0 16px; font-size: 15px; }
.pill-lg { min-height: 36px; padding: 0 16px; font-size: 14px; }

.card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 28px;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
/* La card «brand» dell'app: vetro con il bagliore del colore in alto a destra. */
.card-brand {
  background:
    radial-gradient(70% 90% at 100% 0%, rgb(var(--accent-rgb) / 0.2), transparent 70%),
    var(--glass);
}
.card-kicker {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; font-weight: 700; font-size: 14px;
}

.pending {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1.5px dashed var(--border-input); color: var(--text-2); font-weight: 700; font-size: 15px;
}

/* MARK: - Testata */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--max); margin: 0 auto;
  padding: 22px var(--gutter);
}
.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo { height: 20px; width: auto; overflow: visible; }
.topbar nav { display: flex; align-items: center; gap: 6px; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; color: var(--chalk); text-decoration: none; font-weight: 700; font-size: 15px;
}
.nav-link:hover { background: var(--glass); }
.nav-lang { border: 1px solid var(--hairline-strong); }
.short { display: none; }
@media (max-width: 520px) {
  .long { display: none; }
  .short { display: inline; }
  .nav-link { padding: 0 14px; }
}

/* MARK: - Impaginazione */

main { display: block; }

.hero,
.feature,
.chapter,
.plain {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 56px;
  padding-top: 40px;
  padding-bottom: 96px;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero-copy .lead { font-size: 20px; line-height: 1.55; max-width: 34em; }
.hero-copy .lead-2 { color: var(--text-2); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.soon { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-weight: 700; font-size: 15px; }
.soon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.hero-art { display: flex; justify-content: center; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 56px;
  padding-block: 72px;
}
.feature-flip > .feature-copy { order: 2; }
.feature-copy { display: flex; flex-direction: column; gap: 18px; }
.feature-copy h3 { margin-top: 10px; }
.feature-copy > p:not(.statement) { color: var(--text-2); }
.feature-art { display: flex; justify-content: center; }

.chapter { padding-block: 72px; }
.chapter-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-bottom: 36px; }

@media (max-width: 960px) {
  .hero, .feature { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature-flip > .feature-copy { order: 0; }
  .hero { padding-top: 16px; padding-bottom: 56px; }
  .feature, .chapter { padding-block: 48px; }
}

/* MARK: - Il telefono (schermi in HTML, misure dell'app) */

.phone {
  position: relative;
  width: min(352px, 100%);
  padding: 10px;
  border-radius: 56px;
  background: #050506;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 50px 120px -40px rgb(var(--accent-rgb) / 0.55),
    0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.screen {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 18px 16px;
  border-radius: 46px;
  background:
    radial-gradient(140% 52% at 50% 6%, var(--accent-deep) 0%, var(--ink-950) 70%, var(--ink) 100%);
  font-size: 13px; line-height: 1.35;
  user-select: none;
}
.ph-status { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 4px; font-weight: 800; font-size: 14px; }
.ph-status-icons { display: inline-flex; gap: 5px; align-items: center; }
.ph-sicon { width: 15px; height: 15px; }
.ph-battery { width: 24px; height: 12px; }
.ph-top { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.ph-avatar {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--glass-border); font-family: var(--display); font-size: 14px;
}
.ph-actions { display: flex; gap: 8px; }
.ph-round {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--glass-border);
}
.ph-round .icon { width: 17px; height: 17px; }
.ph-title { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.24; margin-top: 4px; }
.ph-date { color: var(--text-2); font-size: 13px; margin-top: -8px; }
.ph-muted { color: var(--text-2); font-size: 12px; }
.ph-row { display: flex; align-items: center; justify-content: space-between; }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 2px; }
.week li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wk-day { color: var(--text-3); font-size: 11px; font-weight: 700; }
.wk-dot {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--glass); font-weight: 700; font-size: 12px;
}
.wk-done { background: var(--accent); color: var(--ink); }
.wk-check { width: 16px; height: 16px; }
.wk-today { background: transparent; border: 2px solid var(--chalk); }
.wk-planned { background: transparent; border: 1.5px dashed var(--border-input); }

.ph-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: 28px;
  background: radial-gradient(80% 70% at 100% 0%, rgb(var(--accent-rgb) / 0.2), transparent 70%), var(--glass);
  border: 1px solid var(--glass-border);
}
.ph-workout { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.25; }
.ph-board { padding: 8px; border-radius: 18px; background: rgba(0, 0, 0, 0.18); }
.ph-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ph-nums b { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.2; }
.ph-nums small { font-family: var(--body); font-size: 11px; font-weight: 700; margin-left: 2px; color: var(--text-2); }
.ph-nums span { color: var(--text-2); font-size: 12px; }
.ph-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; border-radius: 999px; background: var(--accent); color: var(--ink);
  font-weight: 800; font-size: 16px; box-shadow: 0 8px 26px -10px var(--accent-glow);
}
.ph-btn .icon { width: 16px; height: 16px; }
.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--glass-border); min-height: 96px;
}
.ph-tile b { font-family: var(--display); font-weight: 600; font-size: 18px; }
.ph-tile .spark { width: 100%; height: 30px; margin-top: auto; }
.ph-tile-ring { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
.ph-tile-ring > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-tile-ring small { white-space: nowrap; font-size: 11px; }
.ph-tile-ring .ring { flex: none; }

.tabbar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tabs {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  height: 58px; padding: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid var(--glass-border);
}
.tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; min-width: 40px; padding: 0 8px; border-radius: 999px; color: var(--text-2); font-weight: 800; font-size: 13px; }
.tab-on { background: var(--accent); color: var(--ink); padding: 0 14px; }
.tab-timer { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, 0.09); border: 1px solid var(--glass-border); }

/* Il timer: il fondo dell'appesa è la tinta scura del colore con il bagliore al centro (timerWork). */
.screen-timer {
  gap: 14px;
  background: radial-gradient(90% 46% at 50% 36%, rgb(var(--accent-rgb) / 0.34) 0%, var(--accent-deep) 55%, var(--ink) 100%);
}
.t-top { display: flex; align-items: center; justify-content: space-between; }
.t-set { font-weight: 800; font-size: 15px; }
.t-sets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.t-seg { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.t-seg-full { background: var(--accent); }
.t-seg-part { background: linear-gradient(90deg, var(--accent) 40%, rgba(255, 255, 255, 0.14) 40%); }
.t-phase {
  align-self: center; margin-top: 10px;
  padding: 7px 18px; border-radius: 999px; background: var(--accent); color: var(--ink);
  font-weight: 800; font-size: 15px; box-shadow: 0 0 24px -4px var(--accent-glow);
}
.t-num { text-align: center; font-family: var(--display); font-weight: 600; font-size: 150px; line-height: 1; letter-spacing: 0; margin-top: -2px; }
.t-unit { text-align: center; color: var(--text-2); font-weight: 700; margin-top: -6px; }
.t-board { padding: 8px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); margin-top: 8px; }
.t-rows { display: flex; flex-direction: column; gap: 8px; }
.t-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-weight: 700;
}
.t-row i { font-style: normal; color: var(--text-2); margin-right: 4px; }
.t-row b { font-family: var(--display); font-weight: 600; font-size: 14px; }
.t-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 8px 0 6px; }
.t-ctl { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.t-ctl-main { width: 82px; height: 82px; background: var(--accent); color: var(--ink); box-shadow: 0 0 36px -6px var(--accent-glow); }
.t-ctl-main .icon { width: 26px; height: 26px; }

/* MARK: - Il trave */

.board-card { display: flex; flex-direction: column; gap: 22px; padding: 30px; }
.board-big { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35)); }
/* Due disegni dello stesso trave: i segni S/D hanno misure in px, come nell'app, quindi su un
   telefono serve il disegno fatto per quella larghezza. */
.board-narrow { display: none; }
@media (max-width: 600px) {
  .board-wide { display: none; }
  .board-narrow { display: block; }
}
.hands { display: inline-flex; gap: 6px; }
.hand {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--display); font-weight: 600; font-size: 13px;
}
.hand-l { background: var(--accent); color: var(--ink); }
.hand-r { background: var(--ink-900); color: var(--accent-text); box-shadow: inset 0 0 0 2.5px var(--accent); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills .icon { color: var(--accent-text); }

/* MARK: - L'impronta */

.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rhythm-card { display: flex; flex-direction: column; gap: 14px; }
.rhythm-big { height: 120px; }
.axis { display: flex; justify-content: space-between; color: var(--text-3); font-size: 13px; font-weight: 700; }
.rhythm-caption { font-family: var(--display); font-weight: 500; font-size: 15px; }
/* I protocolli come righe della lista «Allenamenti»: nome e dati a sinistra, l'impronta a destra. */
.protos { display: flex; flex-direction: column; gap: 10px; }
.proto {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 4px 20px;
  padding: 16px 20px; border-radius: var(--r-l);
}
.proto-meta { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; font-weight: 700; }
.proto-meta .icon { width: 16px; height: 16px; }
.proto-name { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.3; }
.rhythm-small { height: 40px; grid-row: 1 / span 3; grid-column: 2; }
.proto-foot { display: flex; gap: 14px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.ways { display: flex; flex-direction: column; gap: 12px; }
.ways li { padding-left: 18px; position: relative; color: var(--text-2); }
.ways li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ways strong { color: var(--chalk); font-weight: 800; }
@media (max-width: 480px) {
  .proto { grid-template-columns: minmax(0, 1fr) 104px; gap: 4px 14px; padding: 16px; }
}

/* MARK: - Il timer */

.phases { display: flex; flex-wrap: wrap; gap: 8px; }
.phase { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 14px; }
.phase-0 { background: var(--ink-950); border: 1px solid var(--hairline-strong); }
.phase-1 { background: var(--accent); color: var(--ink); }
.phase-2 { background: rgb(var(--accent-rgb) / 0.16); color: var(--accent-text); }
.phase-3 { background: var(--ink-800); }

.quick {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "copy dial" "wheels wheels";
  gap: 18px 24px; align-items: center; margin-top: 10px; padding: 24px;
}
.quick-copy { grid-area: copy; display: flex; flex-direction: column; gap: 6px; }
.quick-copy p { color: var(--text-2); font-size: 15px; }
.quick-dial { grid-area: dial; position: relative; }
.wheels { grid-area: wheels; }
.arc { width: 100%; height: auto; overflow: visible; }
.quick-total { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; }
.quick-total span { color: var(--text-2); font-size: 12px; font-weight: 700; }
.quick-total b { font-family: var(--display); font-weight: 600; font-size: 38px; line-height: 1.1; }
.quick-total small { color: var(--text-2); font-size: 11px; font-weight: 700; }
.wheels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; border-radius: var(--r-m); background: var(--sunken); }
.wheel { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wheel-label { color: var(--text-2); font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.wheel-dim { color: var(--text-3); font-family: var(--display); font-size: 13px; opacity: 0.6; }
.wheel-on { font-family: var(--display); font-weight: 600; font-size: 19px; padding: 2px 0; }
@media (max-width: 560px) {
  .quick { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "dial" "wheels"; }
  .quick-dial { max-width: 240px; width: 100%; justify-self: center; }
}

/* MARK: - I progressi: bento */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.bento h3 { font-size: 17px; }
.tile-record { grid-column: span 7; display: flex; flex-direction: column; gap: 10px; }
.tile-hang { grid-column: span 5; display: flex; flex-direction: column; gap: 14px; }
.tile-review { grid-column: span 6; display: flex; flex-direction: column; gap: 16px; }
.tile-history { grid-column: span 6; display: flex; flex-direction: column; gap: 12px; }
.record { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.record b { font-family: var(--display); font-weight: 600; font-size: clamp(56px, 8vw, 84px); line-height: 1.05; }
.record > span:not(.pill) { font-family: var(--display); font-weight: 600; font-size: 26px; }
.record .pill { align-self: center; margin-left: auto; }
.trend { width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.months { display: flex; justify-content: space-between; padding-right: 30px; color: var(--text-3); font-size: 12px; font-weight: 700; }
.tile-hang .board { margin-block: auto; }
.heat-legend { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; font-weight: 700; }
.heat-bar { flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.15), var(--accent)); }
.review { display: flex; flex-direction: column; flex: 1; justify-content: space-around; }
.review li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; font-size: 16px; }
.review li + li { border-top: 1px solid var(--hairline); }
.review .icon { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: var(--r-s); background: var(--accent-subtle); margin-top: -4px; }
.history { display: flex; flex-direction: column; gap: 8px; }
.history li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-m); background: var(--sunken);
}
.history-day { font-family: var(--display); font-weight: 600; font-size: 22px; }
.history-name { display: flex; flex-direction: column; font-weight: 700; line-height: 1.3; }
.history-name small { color: var(--text-2); font-weight: 600; font-size: 13px; }
.rhythm-tiny { height: 26px; }
@media (max-width: 960px) {
  .tile-record, .tile-hang, .tile-review, .tile-history { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .history li { grid-template-columns: 36px minmax(0, 1fr) 80px; padding: 10px 12px; }
}

/* MARK: - Il piano */

.program { display: flex; flex-direction: column; gap: 14px; }
.program-name { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.25; margin-top: -6px; }
.pg-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pg-row { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)) 120px; align-items: center; justify-items: center; gap: 4px; }
.pg-head { color: var(--text-3); font-size: 12px; font-weight: 700; }
.pg-week { justify-self: start; color: var(--text-2); font-size: 13px; font-weight: 800; }
.pg-phase { justify-self: end; color: var(--text-2); font-size: 13px; font-weight: 700; text-align: right; }
.pg { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.pg-rest { width: 6px; height: 6px; background: rgba(255, 255, 255, 0.16); }
.pg-done { background: var(--accent); }
.pg-today { border: 2.5px solid var(--accent); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 10px var(--accent); }
.pg-planned { border: 1.5px dashed var(--border-input); }
.pg-test { color: var(--accent); }
.pg-test .icon { width: 20px; height: 20px; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-2); font-size: 13px; font-weight: 700; margin-top: 6px; }
.pg-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.pg-legend .pg { width: 14px; height: 14px; }
.pg-legend .pg-test .icon { width: 16px; height: 16px; }
@media (max-width: 480px) {
  .pg-row { grid-template-columns: 28px repeat(7, minmax(0, 1fr)) 76px; }
  .pg { width: 18px; height: 18px; }
  .pg-phase { font-size: 11px; }
}

/* MARK: - Il colore */

.color-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center;
  padding: 40px;
  background:
    radial-gradient(60% 120% at 0% 0%, rgb(var(--accent-rgb) / 0.18), transparent 70%),
    var(--glass);
}
.color-card > div { display: flex; flex-direction: column; gap: 14px; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.swatches[hidden] { display: none; }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%;
  padding: 16px 6px 12px; border-radius: var(--r-l);
  background: var(--sunken); border: 1.5px solid transparent; color: var(--text-2);
  font: 700 13px/1.2 var(--body); cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.swatch:hover { background: var(--glass); }
.swatch[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle); color: var(--chalk); }
.swatch-dot { width: 40px; height: 40px; border-radius: 50%; }
@media (max-width: 860px) {
  .color-card { grid-template-columns: minmax(0, 1fr); padding: 28px; }
}
@media (max-width: 380px) {
  .swatches { gap: 6px; }
  .swatch-dot { width: 32px; height: 32px; }
}

/* MARK: - Gratis e Pro */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; gap: 18px; padding: 32px; }
.plan-card h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.plan-pro { border-color: rgb(var(--accent-rgb) / 0.35); }
.ticks { display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.tick { width: 22px; height: 22px; flex: none; padding: 3px; border-radius: 50%; background: var(--accent-subtle); color: var(--accent-text); margin-top: 2px; }
@media (max-width: 760px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}

/* MARK: - Per ogni climber */

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fact { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-l); }
.fact p { color: var(--text-2); font-size: 15px; }
.icon-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-s); background: var(--accent-subtle); color: var(--accent-text); margin-bottom: 4px; }
.icon-tile .icon { width: 22px; height: 22px; }
@media (max-width: 960px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* MARK: - La chiusura */

.app-card { display: flex; align-items: center; gap: 32px; padding: 40px; }
.app-card > div { display: flex; flex-direction: column; gap: 12px; }
.app-icon { width: 104px; height: 104px; border-radius: 24px; box-shadow: 0 20px 50px -14px var(--accent-glow); flex: none; }
.store-badge img { display: block; height: 54px; width: auto; }
@media (max-width: 600px) {
  .app-card { flex-direction: column; align-items: flex-start; padding: 28px; }
}

/* MARK: - Pagine semplici: assistenza, legali, 404 */

.plain { max-width: 820px; padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 20px; }
.plain h1 { font-size: clamp(32px, 5vw, 48px); }
.plain h2 { font-size: 24px; margin-top: 24px; }
.plain .lead { font-size: 19px; }
.include { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.include h2 { margin-top: 0; }
.faqs { display: flex; flex-direction: column; gap: 10px; }
.faq details { border-radius: var(--r-l); background: var(--glass); border: 1px solid var(--glass-border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 22px; cursor: pointer; list-style: none; font-weight: 800;
}
.faq summary::-webkit-details-marker { display: none; }
.chevron { width: 18px; height: 18px; flex: none; color: var(--accent-text); transition: transform 200ms ease; }
.faq details[open] .chevron { transform: rotate(180deg); }
.faq-a { padding: 0 22px 20px; color: var(--text-2); }
.not-found { align-items: flex-start; padding-top: 48px; }
.not-found .board { max-width: 420px; opacity: 0.8; }

.prose h1 { margin-bottom: 8px; }
.prose h2 { font-size: 22px; }
.prose h3 { font-size: 17px; margin-top: 12px; }
.prose p, .prose li { color: var(--text-2); }
.prose ul { list-style: disc; padding-left: 22px; }
.prose ol { list-style: decimal; padding-left: 22px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.draft-banner { padding: 12px 18px; border-radius: var(--r-m); background: rgba(255, 193, 94, 0.14); color: var(--amber); font-weight: 800; }

/* MARK: - Piede */

.footer {
  max-width: var(--max); margin: 40px auto 0;
  padding: 40px var(--gutter) 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px;
  border-top: 1px solid var(--hairline);
  color: var(--text-2); font-size: 15px;
}
.footer-name { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--chalk); margin-bottom: 4px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.footer-links a { color: var(--chalk); font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }
.soon-link { color: var(--chalk); font-weight: 700; }
.soon-link span { color: var(--text-3); font-weight: 600; }
.footer-fine { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); }
@media (max-width: 760px) {
  .footer { grid-template-columns: minmax(0, 1fr); }
}

/* MARK: - Movimento */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}