/* Theme condiviso della challenge: due famiglie sans, palette calda, colori delle evidenze.
   Bricolage Grotesque = contenuti "da sgranocchiare" (titoli, numeri, etichette, chip, navigazione).
   Figtree = lettura (corpi, tabelle, risposte, note). */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  color-scheme:light;
  /* superfici, calde */
  --bg:#fbfaf7; --plane:#f3f1eb; --plane-2:#ebe8e0; --card:#ffffff;
  --ink:#171613; --ink-2:#4e4b45; --muted:#716d65; --hair:#e5e1d8; --axis:#c8c3b7;
  /* marchio: blu elettrico riservato a Otterbyte e al pulsante primario */
  --blue:#1a3dff; --blue-soft:#e9edff; --blue-mid:#8fa3ff; --on-blue:#ffffff;
  --grey-mark:#8a877f; --grey-light:#dcd8cf;
  /* evidenze: perdita, causa, progresso */
  --loss:#c9391f; --loss-soft:#fbe9e3; --loss-ink:#8f2812;
  --cause:#b56a00; --cause-soft:#fcefd8; --cause-ink:#7a4700;
  --gain:#1b7f4b; --gain-soft:#e1f3e8; --gain-ink:#125a35;
  /* alias storici */
  --good:var(--gain); --good-soft:var(--gain-soft); --bad:var(--loss); --bad-soft:var(--loss-soft); --warn:var(--cause); --warn-soft:var(--cause-soft);
  /* tipografia */
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  /* forma */
  --maxw:1240px; --gutter:32px; --r:10px; --r-sm:6px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(23,22,19,.04),0 8px 24px -16px rgba(23,22,19,.18);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#15140f; --plane:#1d1c17; --plane-2:#26241e; --card:#1a1915;
    --ink:#f1eee6; --ink-2:#c6c1b5; --muted:#938e83; --hair:#2d2b25; --axis:#44413a;
    --blue:#6b84ff; --blue-soft:#1d2550; --blue-mid:#4a60c9; --on-blue:#ffffff;
    --grey-mark:#9c978c; --grey-light:#3d3a33;
    --loss:#ff7b63; --loss-soft:#3a1b14; --loss-ink:#ffb3a3;
    --cause:#f0a73a; --cause-soft:#3a2a10; --cause-ink:#ffd08a;
    --gain:#4ec38a; --gain-soft:#143024; --gain-ink:#9ee6c0;
    --shadow-1:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#15140f; --plane:#1d1c17; --plane-2:#26241e; --card:#1a1915;
  --ink:#f1eee6; --ink-2:#c6c1b5; --muted:#938e83; --hair:#2d2b25; --axis:#44413a;
  --blue:#6b84ff; --blue-soft:#1d2550; --blue-mid:#4a60c9; --on-blue:#ffffff;
  --grey-mark:#9c978c; --grey-light:#3d3a33;
  --loss:#ff7b63; --loss-soft:#3a1b14; --loss-ink:#ffb3a3;
  --cause:#f0a73a; --cause-soft:#3a2a10; --cause-ink:#ffd08a;
  --gain:#4ec38a; --gain-soft:#143024; --gain-ink:#9ee6c0;
  --shadow-1:none;
}

/* ---- tipografia di base ---- */
body{font-family:var(--font);font-feature-settings:"ss01" 0}
h1,h2,h3,.display,.hero-num,.tile .v,.fact .big,.callout .big,.kpi-card .v,.eyebrow,.kicker,.chip,.kind,.tag,.btn,.hub,.tabs a,.seg button,.sel,.delta,.crumbs,.pips,.hub-list a,.hub-next,.cpill,.cover-dot,.story .cap b,.mrow .p,.mentions .row .p,.list .n,.sec-head .num,.screen .n,.step .n,.item .b,.panel h3,.colhead,.col .colhead,.fig-head h3,.hd-k,.l,.answer .side h4,.pillar h4{font-family:var(--font-display)}
h1,h2,h3{font-weight:500;letter-spacing:-0.015em}
.hero-num,.fact .big,.tile .v,.callout .big,.kpi-card .v{font-weight:400;letter-spacing:-0.035em;font-variant-numeric:tabular-nums}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.eyebrow .n{color:var(--blue);font-variant-numeric:tabular-nums}
.lead{font-family:var(--font);font-size:16px;line-height:1.5;color:var(--ink-2);max-width:62ch}

/* ---- colori delle evidenze ---- */
.kind{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.02em;padding:3px 10px 3px 8px;border-radius:var(--r-pill);white-space:nowrap}
.kind::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.kind.loss,.chip.bad{background:var(--loss-soft);color:var(--loss-ink);border-color:transparent}
.kind.cause,.chip.warn{background:var(--cause-soft);color:var(--cause-ink);border-color:transparent}
.kind.gain,.chip.good{background:var(--gain-soft);color:var(--gain-ink);border-color:transparent}
.is-loss{--k:var(--loss);--k-soft:var(--loss-soft);--k-ink:var(--loss-ink)}
.is-cause{--k:var(--cause);--k-soft:var(--cause-soft);--k-ink:var(--cause-ink)}
.is-gain{--k:var(--gain);--k-soft:var(--gain-soft);--k-ink:var(--gain-ink)}
.fact.is-loss,.fact.is-cause,.fact.is-gain{border-top:3px solid var(--k)}
.fact.is-loss .big b,.fact.is-cause .big b,.fact.is-gain .big b{color:var(--k)}

/* ---- hub con il nuovo sistema ---- */
.hub{--hub-bg:#171613;--hub-fg:#f1eee6;--hub-muted:#a8a398;--hub-blue:var(--blue);--hub-hair:#2d2b25}
.hub-list a,.hub-list-on{border-radius:var(--r-pill)}
.hub-list-on{clip-path:inset(0 100% 0 0 round 999px)}

/* ---- reduce motion ---- */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}