/* ============================================================================
   BizModler — shared design system  (v3 "navy on paper")
   One stylesheet, inherited by every screen end-to-end, so the whole journey
   speaks one visual language. Mirrors the repo's token discipline:
   palette tokens (--c-*) feed semantic roles (--brand, --attn, firmness…).
   When this is ported to brand.ts, only the values move — names map 1:1.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Spline+Sans:wght@400;500;600;700&display=swap');

:root{
  /* ---- palette ------------------------------------------------------- */
  --canvas:#f1eee6;      /* warm paper, app background           */
  --paper:#faf9f4;       /* raised paper                          */
  --surface:#ffffff;     /* cards                                 */
  --ink:#16213a;         /* headings / primary text               */
  --body:#454d5b;        /* body text                             */
  --muted:#828a97;       /* secondary text                        */
  --soft:#a7adb8;        /* tertiary / captions                   */
  --hair:#e5e0d3;        /* hairline borders on paper             */
  --hair-2:#efe9dc;      /* faint gridlines / inner rules         */

  /* brand navy ramp (replaces both the live #000054 and mockup teal) */
  --brand:#1d3a63; --brand-600:#2b5288; --brand-700:#152c4d; --brand-deep:#152c4d;
  --brand-50:#eef2f8; --brand-100:#d8e2f0;

  /* attention — warm clay (the "look here first" accent)          */
  --attn:#b4541e; --attn-50:#fbf0e9; --attn-100:#f3d9c8;

  /* firmness system — MEANINGFUL, carried from intake             *
   * green = checked & firm · blue = some spread · white = your call */
  --f-green:#0ea571; --f-green-d:#0c7a55; --f-green-50:#d8efe3;
  --f-blue:#2563eb;  --f-blue-d:#1d4ed8;  --f-spread:#2563eb;
  --f-grey:#94a3b8;  --f-grey-d:#475569;

  /* AI / Advisor voice — a DEDICATED tone used ONLY for the model's voice    *
   * (the "AI" pill, AI commentary notes, the chat box). Deliberately distinct  *
   * from brand navy, clay-attention, firm-green and spread-blue, so "this is   *
   * the AI speaking" is always unmistakable. Warm desaturated plum.            */
  --ai:#7a5780; --ai-700:#5d4063; --ai-50:#f2ecf3; --ai-100:#e2d5e5;

  /* status (outcome signalling)                                   */
  --good:#0c7a55; --good-50:#d8efe3;
  --warn:#b06a16; --warn-50:#f4e7cf;
  --bad:#be123c;  --bad-50:#f7dde3;

  /* sequential ramp for stacked bars / segments                   */
  --seq-1:#1d3a63; --seq-2:#345a8c; --seq-3:#5e7fae; --seq-4:#8aa4c8; --seq-5:#b9cae0;

  /* ---- type ---------------------------------------------------------- */
  --serif:"Fraunces",Georgia,serif;        /* titles, numbers, currency */
  --sans:"Spline Sans",ui-sans-serif,system-ui,sans-serif;

  /* ---- shape & depth ------------------------------------------------- */
  --r-card:16px; --r-md:12px; --r-sm:8px; --r-pill:999px;
  --shadow:0 1px 2px rgba(22,33,58,.04),0 14px 34px -18px rgba(22,33,58,.16);
  --shadow-lg:0 24px 60px -24px rgba(22,33,58,.45);
  --ease:cubic-bezier(.2,.7,.2,1);

  --maxw:840px;          /* single-column reading width           */
  --maxw-wide:1180px;    /* report/dashboard width                */
}

/* ---- reset / base ---------------------------------------------------- */
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:radial-gradient(1100px 500px at 88% -12%,rgba(29,58,99,.05),transparent 60%),var(--canvas);
  color:var(--body);font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.tnum{font-variant-numeric:tabular-nums;}
.serif{font-family:var(--serif);}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- typography scale ------------------------------------------------ */
.display{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.06;letter-spacing:-.02em;color:var(--ink);}
h1,.h1{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.1;letter-spacing:-.015em;color:var(--ink);margin:0;}
h2,.h2{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0;}
h3,.h3{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--ink);margin:0;}
.lede{font-size:16px;color:var(--body);max-width:62ch;}
.kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:700;}
.caption{font-size:12.5px;color:var(--muted);}
.micro{font-size:11px;color:var(--soft);}

/* ---- layout helpers -------------------------------------------------- */
.shell{max-width:var(--maxw);margin:0 auto;padding:30px 26px;}
.shell-wide{max-width:var(--maxw-wide);margin:0 auto;padding:24px 32px 80px;}
.row{display:flex;gap:12px;}
.col{display:flex;flex-direction:column;gap:12px;}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.wrap{flex-wrap:wrap;}
.grid{display:grid;gap:14px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.stack-sm>*+*{margin-top:8px;}
.spacer{height:16px;}.spacer-lg{height:30px;}
hr.sep{border:none;border-top:1px solid var(--hair);margin:22px 0;}

/* ---- cards ----------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px 20px;}
.card-flush{padding:0;overflow:hidden;}
.card-paper{background:var(--paper);}

/* ---- progress strip (top of intake) ---------------------------------- */
.progress{height:3px;background:var(--hair);}
.progress>span{display:block;height:3px;width:0;background:linear-gradient(90deg,var(--brand-600),var(--brand));transition:width 1.1s var(--ease);border-radius:0 3px 3px 0;}

/* ---- buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;
  border-radius:var(--r-sm);padding:10px 16px;cursor:pointer;border:1px solid transparent;transition:.14s;text-decoration:none;}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 12px 28px -14px rgba(29,58,99,.8);}
.btn-primary:hover{background:var(--brand-700);text-decoration:none;}
.btn-ghost{background:var(--surface);color:var(--brand);border-color:var(--hair);}
.btn-ghost:hover{background:var(--brand-50);}
.btn-lg{padding:15px 22px;font-size:15px;border-radius:var(--r-md);width:100%;justify-content:center;}
.btn-pill{border-radius:var(--r-pill);}

/* ---- tiles / KPI ----------------------------------------------------- */
.tile{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);box-shadow:var(--shadow);padding:14px 16px;position:relative;}
.tile .label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;}
.tile .value{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--ink);letter-spacing:-.01em;line-height:1.1;margin-top:6px;}
.tile .sub{font-size:12px;color:var(--soft);margin-top:4px;}
.tile.brand{background:var(--brand);border-color:var(--brand);}
.tile.brand .label{color:var(--brand-100);}.tile.brand .value{color:#fff;}.tile.brand .sub{color:var(--brand-100);}
.tile .delta{font-size:12px;font-weight:700;margin-top:5px;}
.delta.flat{color:var(--soft);}.delta.up{color:var(--f-green-d);}.delta.down{color:var(--bad);}

/* ---- firmness legend / dots ------------------------------------------ */
.firmness{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;}
.firmness .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.firmness.firm .dot{background:var(--f-green);}.firmness.firm{color:var(--f-green-d);}
.firmness.spread .dot{background:var(--f-blue);}.firmness.spread{color:var(--f-blue-d);}
.firmness.yours .dot{background:#fff;border:1.5px solid var(--f-grey);}.firmness.yours{color:var(--f-grey-d);}

/* ---- source badges (engine / you / ai / benchmark) ------------------ */
.src-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:4px;}
.src-badge.engine{background:var(--brand-50);color:var(--brand-700);}
.src-badge.you{background:var(--good-50);color:var(--good);}
.src-badge.ai{background:var(--ai-50);color:var(--ai-700);}
.src-badge.bench{background:var(--brand-100);color:var(--brand-700);}

/* ---- pills / chips --------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);}
.pill.good{background:var(--good-50);color:var(--good);}
.pill.warn{background:var(--warn-50);color:var(--warn);}
.pill.bad{background:var(--bad-50);color:var(--bad);}
.pill.brand{background:var(--brand-50);color:var(--brand);}
.pill.flat{background:var(--hair-2);color:var(--muted);}

/* ---- AI note — the dedicated AI voice (iris), used ONLY for AI commentary -- */
.ai-note{display:flex;gap:12px;align-items:flex-start;background:var(--ai-50);border:1px solid var(--ai-100);
  border-left:3px solid var(--ai);border-radius:0 var(--r-md) var(--r-md) 0;padding:13px 16px;box-shadow:var(--shadow);}
.ai-pill{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:#fff;background:var(--ai);border-radius:var(--r-pill);padding:4px 8px;margin-top:1px;}
.ai-note h4{margin:0 0 6px;font-family:var(--serif);font-weight:600;font-size:16px;color:var(--ink);letter-spacing:-.005em;}
.ai-note p{margin:0;font-size:14px;color:var(--body);}
.ai-note p+p{margin-top:6px;}
.ai-note strong,.ai-note em{color:var(--ink);font-weight:600;font-style:normal;}
.ai-note .flag{font-size:13px;color:var(--body);margin-top:10px;padding-top:10px;border-top:1px solid var(--ai-100);}
.ai-note .flag b{color:var(--attn);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;margin-right:5px;}
/* DEFER block — "coming soon" placeholder, muted (per gap-matrix) */
.ai-note.defer{background:var(--paper);border-color:var(--hair);border-left-color:var(--soft);opacity:.8;}
.ai-note.defer .ai-pill{background:var(--soft);}
/* verdict tags on commentary blocks (BUILD / NICE) — small, set off from the prose */
.verdict-tag{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:4px;}
.verdict-tag.build{background:var(--good-50);color:var(--good);}
.verdict-tag.nice{background:var(--ai-50);color:var(--ai-700);}
.verdict-tag.soon{background:var(--hair-2);color:var(--muted);}

/* ---- chat box (talk-to-edit, every report tab + intake) -------------- */
.chat-box{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-md);padding:8px 8px 8px 14px;box-shadow:var(--shadow);}
.chat-box input{flex:1;border:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);outline:none;}
.chat-box input::placeholder{color:var(--soft);}
.chat-box .send{flex:none;border:none;background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:10px 15px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.chat-box .ai-pill{margin-top:0;}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.chat-head .t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.chat-head .who{font-size:10.5px;font-weight:600;color:var(--ai-700);background:var(--ai-50);border:1px solid var(--ai-100);border-radius:var(--r-pill);padding:2px 9px;}
.chat-suggest{display:flex;gap:8px;flex-wrap:wrap;}
.chat-suggest .chip{font-size:12px;border:1px solid var(--hair);background:var(--surface);border-radius:var(--r-pill);padding:6px 12px;color:var(--muted);cursor:pointer;transition:.12s;}
.chat-suggest .chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50);}

/* ---- editable figure (pencil → inline edit → "your figure") ---------- */
.editable{font-family:var(--serif);font-weight:600;color:var(--ink);cursor:pointer;border-radius:6px;padding:1px 5px;margin:-1px -5px;transition:.12s;display:inline-block;}
.editable:hover{background:var(--brand-50);box-shadow:inset 0 0 0 1px var(--brand-100);}
.editable .pencil{opacity:0;font-size:11px;color:var(--brand);margin-left:4px;font-family:var(--sans);}
.editable:hover .pencil{opacity:1;}
.your-figure{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r-pill);padding:3px 9px;}

/* ---- range bar (market range with "our estimate" marker) ------------- */
.rangebar{margin-top:10px;}
.rangebar .track{position:relative;height:6px;border-radius:4px;background:var(--hair-2);}
.rangebar .fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:4px;background:var(--brand-100);transition:width .8s var(--ease);}
.rangebar .mark{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:var(--brand);border:2.5px solid #fff;box-shadow:0 0 0 1px var(--brand),0 2px 6px rgba(29,58,99,.4);transform:translate(-50%,-50%) scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) .25s,left .8s var(--ease);}
.rangebar.in .mark{transform:translate(-50%,-50%) scale(1);}
.rangebar .ends{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--soft);}

/* ---- money chain (revenue − cost = you keep) ------------------------- */
.chain{background:var(--paper);border:1px solid var(--hair-2);border-radius:var(--r-md);padding:14px 16px;}
.chain .crow .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.chain .crow .k{font-size:11.5px;color:var(--muted);}
.chain .crow .v{font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.chain .crow .mbar{height:6px;border-radius:4px;background:#e7e4da;margin-top:6px;overflow:hidden;}
.chain .crow .mbar i{display:block;height:100%;width:0;border-radius:4px;transition:width .7s var(--ease);}
.chain .rev .mbar i{background:linear-gradient(90deg,var(--seq-4),var(--brand));}
.chain .cost .v{color:var(--bad);}.chain .cost .mbar i{background:#e7b4bf;}
.chain .keep{border-top:1px solid var(--hair);margin-top:9px;padding-top:9px;}
.chain .keep .k{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);}
.chain .keep .v{font-family:var(--serif);font-size:19px;color:var(--brand);}

/* ---- gridded chart card --------------------------------------------- */
.chart-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);box-shadow:var(--shadow);padding:16px 18px 10px;}
.chart-card .cc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.chart-card .cc-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.legend .sw{display:inline-block;width:14px;height:11px;}
.legend .sw.bar{background:var(--brand);border-radius:2px;width:11px;}
.legend .sw.line{height:0;border-top:2.5px solid var(--brand);align-self:center;}
.legend .sw.line.green{border-color:var(--f-green);}
.legend .sw.dash{height:0;border-top:2.5px dashed var(--warn);align-self:center;}
.legend .sw+.sw{margin-left:10px;}
.cc-svg{width:100%;aspect-ratio:1000/300;height:auto;display:block;}
.cc-svg .gridlines line{stroke:var(--hair-2);stroke-width:1;}
.cc-svg .yt text,.cc-svg .xt text{font-size:11px;fill:var(--soft);font-weight:600;}
.cc-svg .yt text{text-anchor:end;}.cc-svg .xt text{text-anchor:middle;}
.cc-svg .cc-line{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.cc-svg .cc-line.green{stroke:var(--f-green);}
.cc-svg .cc-line.dash{stroke-dasharray:6 5;stroke:var(--warn);}
.cc-svg .bars rect{fill:var(--seq-4);}
.cc-svg .cc-pt{fill:var(--f-green);stroke:var(--surface);stroke-width:2;}
.cc-svg .cc-pt.warn{fill:var(--warn);}
.cc-svg .vline{stroke:var(--brand);stroke-dasharray:4 4;stroke-width:1;opacity:.4;}
.cc-svg .anno{font-size:11px;fill:var(--brand);font-weight:700;}

/* ---- coach-marks / "show me around" tour ----------------------------- */
.tour{position:fixed;inset:0;z-index:90;display:none;}
.tour.on{display:block;}
/* light haze — softens the page so the eye lands on the focused element, but you can still read what's behind and stay oriented */
.tour-veil{position:absolute;inset:0;background:rgba(241,238,230,.20);backdrop-filter:blur(2px) saturate(.96);-webkit-backdrop-filter:blur(2px) saturate(.96);transition:opacity .3s ease;}
/* lead-in: ask before guiding — a centred navy invite, never a sudden pop */
.tour-gate{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:24px;z-index:97;}
.tour-gate.on{display:flex;animation:tgIn .32s cubic-bezier(.2,.7,.2,1) both;}
@keyframes tgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.tour-gate-card{width:340px;max-width:calc(100vw - 40px);background:var(--brand);color:#fff;border-radius:20px;box-shadow:0 30px 70px -26px rgba(22,33,58,.6);padding:22px 22px 18px;text-align:left;}
.tg-ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.12);color:#fff;margin-bottom:12px;}
.tg-title{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.25;color:#fff;letter-spacing:-.01em;}
.tg-text{font-size:13.5px;color:#dbe3f1;line-height:1.55;margin-top:7px;}
.tg-btns{display:flex;gap:9px;margin-top:16px;}
.tg-btns button{flex:1;font:inherit;font-size:13.5px;font-weight:600;border-radius:9px;padding:10px 12px;cursor:pointer;transition:.14s;}
.tg-no{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;}
.tg-no:hover{background:rgba(255,255,255,.18);}
.tg-yes{background:#fff;border:1px solid #fff;color:var(--brand);}
.tg-yes:hover{background:var(--brand-50);}
.tg-dont{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--brand-100);margin-top:13px;cursor:pointer;user-select:none;}
.tg-dont input{accent-color:#fff;}
/* the focused element is lifted ABOVE the mist (stays sharp) with a soft halo — no hard rectangle */
.bm-tour-focus{position:relative;z-index:95;border-radius:12px;box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 0 5px var(--brand-100),0 26px 60px -18px rgba(22,33,58,.42);transition:box-shadow .35s ease;}
/* the coaching message is a speech bubble (navy, with a tail) — reads as the guide talking, not another card */
.tour-pop{position:absolute;z-index:96;width:298px;max-width:calc(100vw - 32px);background:var(--brand);color:#fff;border-radius:18px;box-shadow:0 28px 64px -22px rgba(22,33,58,.62);padding:16px 18px;transition:top .35s cubic-bezier(.4,0,.2,1),left .35s cubic-bezier(.4,0,.2,1),opacity .25s ease;}
.tour-arrow{position:absolute;width:18px;height:18px;background:var(--brand);transform:rotate(45deg);border-radius:4px;}
.tour-step{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-100);font-weight:700;margin-bottom:6px;}
.tour-title{font-family:var(--serif);font-weight:600;font-size:18px;color:#fff;margin-bottom:6px;letter-spacing:-.01em;}
.tour-text{font-size:13.5px;color:#e3e9f4;line-height:1.55;margin-bottom:14px;}
.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tour-dots{display:flex;gap:5px;}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.32);display:inline-block;transition:.3s;}
.tour-dots i.on{background:#fff;width:18px;border-radius:3px;}
.tour-btns{display:flex;gap:6px;}
.tour-btns button{font:inherit;font-size:13px;font-weight:600;border-radius:7px;padding:7px 12px;cursor:pointer;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff;}
.tour-btns button:hover{background:rgba(255,255,255,.2);}
.tour-btns .next{background:#fff;border-color:#fff;color:var(--brand);}
.tour-btns .next:hover{background:var(--brand-50);}
.tour-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.tour-skip{font:inherit;font-size:12px;color:var(--brand-100);background:none;border:none;cursor:pointer;}
.tour-skip:hover{color:#fff;}
.tour-dont{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--brand-100);margin-top:10px;cursor:pointer;user-select:none;}
@media(prefers-reduced-motion:reduce){.tour-veil{backdrop-filter:none;background:rgba(22,33,58,.28);}}
.howto{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-sm);background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
.howto:hover{background:var(--brand-100);}

/* ---- contextual hint bubble (lighter than full tour) ----------------- */
.hint{position:relative;background:var(--brand);color:#fff;border-radius:var(--r-md);padding:12px 14px;font-size:13px;max-width:280px;box-shadow:var(--shadow-lg);}
.hint .arrow{position:absolute;width:12px;height:12px;background:var(--brand);transform:rotate(45deg);}
.hint .h-title{font-weight:700;margin-bottom:3px;}
.hint .h-dismiss{margin-top:9px;font-size:12px;font-weight:600;color:var(--brand-100);cursor:pointer;}

/* ---- modal (methodology "how this was built") ------------------------ */
.modal-scrim{position:fixed;inset:0;background:rgba(22,33,58,.5);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:42px 20px;z-index:80;overflow:auto;}
.modal-scrim.open{display:flex;}
.modal{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);max-width:640px;width:100%;box-shadow:var(--shadow-lg);animation:popIn .3s ease both;}
@keyframes popIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px 16px;border-bottom:1px solid var(--hair);}
.modal-head h2{margin-top:4px;}
.modal-close{border:1px solid var(--hair);background:var(--surface);width:32px;height:32px;border-radius:var(--r-sm);color:var(--muted);font-size:14px;cursor:pointer;flex:none;}
.modal-body{padding:18px 24px 24px;}

/* ---- reveal on scroll ------------------------------------------------ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---- responsive ------------------------------------------------------ */
@media(max-width:760px){
  .display{font-size:30px;}h1,.h1{font-size:26px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .shell,.shell-wide{padding-left:16px;padding-right:16px;}
}