/* Growth gift. Design tokens and components from the approved prototype (prototype/page.html), minus the
   prototype-only parts (navigation bar, notes, delivery demo, rep view, agent demo). Changes from the prototype:
   numbers use the body font (IBM Plex Mono dropped); for WCAG AA contrast .eyebrow and .btn.ghost use
   --accent-strong (4.4:1 failed) and the dark --me is #1f6fa5 (white on #2a7fb9 was 4.3:1); the block
   "Additions" at the end. */
:root{
  --bg:#ecf1f5; --surface:#ffffff; --surface-2:#f4f7fa; --ink:#0f1d2b; --ink-2:#4f6173; --line:#d4dee7; --line-2:#b7c6d4;
  --accent:#1874b0; --accent-strong:#105a8a; --accent-ink:#ffffff; --accent-soft:#e1eef8;
  --good:#1b7a52; --good-soft:#e0f2e9; --warn:#9a5f06; --warn-soft:#fbefd8; --bad:#b8392a; --bad-soft:#fbe4df;
  --me:#1874b0; --me-ink:#ffffff; --wa:#dcf8c6; --wa-ink:#0f1d2b; --wa-bg:#e9e3da;
  --shadow:0 1px 2px rgba(15,29,43,.06),0 8px 24px rgba(15,29,43,.07);
  --f-display:"Secular One","Rubik",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Hebrew","Rubik","Segoe UI",system-ui,sans-serif;
  --f-num:"IBM Plex Sans Hebrew","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0a121a; --surface:#111d28; --surface-2:#162430; --ink:#e5edf4; --ink-2:#9db0c1; --line:#22384a; --line-2:#33506a;
  --accent:#5aaee6; --accent-strong:#86c5ef; --accent-ink:#06121c; --accent-soft:#12324a;
  --good:#46c08a; --good-soft:#103526; --warn:#e3a647; --warn-soft:#3a2a0c; --bad:#f07563; --bad-soft:#3f1913;
  --me:#1f6fa5; --me-ink:#ffffff; --wa:#1f4c3a; --wa-ink:#e5edf4; --wa-bg:#0d1820;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0a121a; --surface:#111d28; --surface-2:#162430; --ink:#e5edf4; --ink-2:#9db0c1; --line:#22384a; --line-2:#33506a;
  --accent:#5aaee6; --accent-strong:#86c5ef; --accent-ink:#06121c; --accent-soft:#12324a;
  --good:#46c08a; --good-soft:#103526; --warn:#e3a647; --warn-soft:#3a2a0c; --bad:#f07563; --bad-soft:#3f1913;
  --me:#1f6fa5; --me-ink:#ffffff; --wa:#1f4c3a; --wa-ink:#e5edf4; --wa-bg:#0d1820;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.2;text-wrap:balance;margin:0}
p{margin:0}
.wrap{padding-inline:16px;padding-block:0 48px}
.col{max-width:480px;margin-inline:auto}
.col-wide{max-width:680px;margin-inline:auto}
.stack{display:flex;flex-direction:column;gap:16px}

/* Buttons and chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 20px;font-weight:600;font-size:17px;cursor:pointer;background:var(--accent);color:var(--accent-ink);text-decoration:none}
.btn:hover{background:var(--accent-strong)}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--accent-strong);border:1.5px solid var(--accent-strong)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
/* the focus ring is the text colour, never the button colour (an accent ring on an accent button is invisible) */
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line-2);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:15px;cursor:pointer;line-height:1.3}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip:disabled{opacity:.45;cursor:not-allowed}

/* Intro */
.hero{padding-block:24px 8px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--accent-strong)}
.hero h1{font-size:clamp(34px,9vw,46px);margin-block:8px 12px}
.hero .lead{font-size:18px;color:var(--ink-2)}
.gets{display:grid;gap:10px}
.get{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.get .n{font-family:var(--f-display);font-size:26px;line-height:1;color:var(--accent);text-align:center;padding-top:4px}
.get h3{font-family:var(--f-body);font-weight:700;font-size:16.5px}
.get p{font-size:14.5px;color:var(--ink-2)}
.get.bonus{background:var(--surface-2);border-style:dashed}
.get.bonus .n{font-size:14px;font-family:var(--f-body);font-weight:700;padding-top:6px}
.sublabel{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--ink-2);margin-top:6px}
.proof{font-size:14px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px}
.fine{font-size:12.5px;color:var(--ink-2);text-align:center}

/* Chat */
.chapters{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.chap{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 6px 7px;font-size:11.5px;line-height:1.25;min-width:0}
.chap .t{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chap .s{display:flex;align-items:center;gap:4px;color:var(--ink-2);margin-top:3px}
.chap .dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:none}
.chap[data-st="loading"] .dot{background:var(--warn);animation:pulse 1s infinite}
.chap[data-st="ready"]{border-color:var(--good)}
.chap[data-st="ready"] .dot{background:var(--good)}
@keyframes pulse{50%{opacity:.3}}
.msgs{display:flex;flex-direction:column;gap:10px;padding-block:8px 16px}
.b{max-width:86%;padding:10px 14px;border-radius:16px;font-size:16px;line-height:1.5;box-shadow:var(--shadow)}
.b.bot{align-self:flex-start;background:var(--surface);border-start-start-radius:4px}
.b.me{align-self:flex-end;background:var(--me);color:var(--me-ink);border-start-end-radius:4px}
.b.sys{align-self:center;box-shadow:none;background:var(--accent-soft);color:var(--ink);font-size:13.5px;border-radius:999px;padding:6px 12px;max-width:100%;text-align:center}
.b .sm{display:block;font-size:13.5px;color:var(--ink-2);margin-top:4px}
.typing{align-self:flex-start;background:var(--surface);border-radius:16px;padding:12px 14px;display:flex;gap:4px;box-shadow:var(--shadow)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-2);animation:pulse 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.inputbar{position:sticky;bottom:0;background:var(--bg);padding-block:10px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.inputbar .row{display:flex;gap:8px}
.inputbar input{flex:1;min-width:0;border:1.5px solid var(--line-2);border-radius:12px;padding:12px;background:var(--surface)}
.inputbar .sugg{margin-top:8px}
.inputbar .unit{align-self:center;color:var(--ink-2);font-size:15px;white-space:nowrap}
.inputbar .err{display:block;color:var(--bad);font-size:13.5px;margin-top:6px}
.teaser{align-self:stretch;background:var(--surface);border:2px solid var(--bad);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.teaser .big{font-family:var(--f-display);font-size:21px;line-height:1.3}
.teaser .src{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 9px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}

/* Gate */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:15px}
.field input[type=tel],.field input[type=email],.field input[type=text]{border:1.5px solid var(--line-2);border-radius:12px;padding:13px;background:var(--surface);font-size:17px}
.field .err{color:var(--bad);font-size:13.5px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}

/* Generation */
.gen{padding-block:56px}
.gen h2{font-size:28px;margin-bottom:20px}
.gl{display:flex;gap:12px;align-items:center;padding-block:10px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.gl .ic{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);flex:none;display:grid;place-items:center;font-size:13px}
.gl.done{color:var(--ink)}
.gl.done .ic{background:var(--good);border-color:var(--good);color:var(--accent-ink)}
.gl.running{color:var(--ink)}
.gl.running .ic{border-color:var(--accent);background:var(--accent-soft);animation:pulse 1.2s ease-in-out infinite}
.gen-expect{margin-top:14px}

/* Report */
.rhead{padding-block:20px 4px}
.rhead .who{font-size:14px;color:var(--ink-2)}
.rhead h1{font-size:clamp(30px,8vw,42px);margin-block:6px 4px}
.bottomline{background:var(--ink);color:var(--bg);border-radius:16px;padding:18px 20px}
.bottomline .lbl{font-size:12.5px;font-weight:600;letter-spacing:.06em;opacity:.75}
.bottomline p{font-family:var(--f-display);font-size:22px;line-height:1.35;margin-top:6px;text-wrap:pretty}
.toc{display:flex;flex-wrap:wrap;gap:8px}
.toc a{font-size:14px;text-decoration:none;color:var(--ink);border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;background:var(--surface)}
.chapter{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:16px}
.chapter .ch-n{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--accent)}
.chapter h2{font-size:26px}
.chapter .q{color:var(--ink-2);font-size:15px}
.stat{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.stat .v{font-family:var(--f-num);font-size:40px;font-weight:600;line-height:1}
.stat .u{font-size:15px;color:var(--ink-2)}
.stat.you .v{font-size:28px}
.verdict{border-radius:12px;padding:12px 14px;font-weight:500}
.verdict.good{background:var(--good-soft)}.verdict.ok{background:var(--accent-soft)}.verdict.warn{background:var(--warn-soft)}.verdict.bad{background:var(--bad-soft)}.verdict.info{background:var(--surface-2)}
.chart{width:100%;height:auto;display:block}
.chart .axis{stroke:var(--line-2);stroke-width:1}
.chart .tick{fill:var(--ink-2);font-size:11px;font-family:var(--f-num)}
.chart .dotc{fill:var(--accent);fill-opacity:.38;stroke:var(--accent);stroke-opacity:.6}
.chart .med{stroke:var(--ink-2);stroke-dasharray:4 3;stroke-width:1.5}
.chart .medl{fill:var(--ink-2);font-size:11.5px;font-family:var(--f-body)}
.chart .you{stroke:var(--bad);stroke-width:2.5}
.chart .youd{fill:var(--bad)}
.chart .youl{fill:var(--bad);font-size:12.5px;font-weight:700;font-family:var(--f-body)}
.chart .cap{fill:var(--ink-2);font-size:11px;font-family:var(--f-body)}
.chart .band{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
.legend{font-size:13px;color:var(--ink-2)}
.rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rowi{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding-block:10px;border-bottom:1px solid var(--line);min-width:0}
.rowi .t{font-weight:600;font-size:15px;min-width:0}
.rowi .m{font-size:13px;color:var(--ink-2)}
.rowi .v{font-family:var(--f-num);font-weight:600;white-space:nowrap;align-self:center;grid-row:span 2}
.rowi .v .m{font-family:var(--f-body);font-weight:400;letter-spacing:0}
.minih{font-size:14px;font-weight:700;margin-top:4px}
.ai-q{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px}
.ai-q .who{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.04em}
.score6{display:flex;gap:6px;margin-block:4px}
.score6 span{flex:1;height:10px;border-radius:4px;background:var(--line)}
.stages{display:flex;flex-direction:column;gap:10px}
.stage{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stage .lv{grid-row:span 2;font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.lv.good{background:var(--good-soft);color:var(--good)}.lv.ok{background:var(--accent-soft);color:var(--accent-strong)}.lv.warn{background:var(--warn-soft);color:var(--warn)}.lv.bad{background:var(--bad-soft);color:var(--bad)}
.stage .t{font-weight:700}
.stage p{font-size:14.5px;color:var(--ink-2)}
.money{border:2px solid var(--ink);border-radius:14px;padding:14px 16px}
.money .v{font-family:var(--f-num);font-size:32px;font-weight:600}
.money .f{font-size:13px;color:var(--ink-2);margin-top:4px}
.months{display:flex;flex-direction:column;gap:12px}
/* a report saved before the tailored plan (7.10.2026): months of short items */
.legacy .month{display:grid;grid-template-columns:56px 1fr;gap:12px}
.legacy .month .mn{font-family:var(--f-display);font-size:15px;text-align:center;background:var(--accent-soft);border-radius:10px;padding-block:8px;color:var(--accent-strong);align-self:start}
.legacy .month h3{font-family:var(--f-body);font-weight:700;font-size:16px}
.legacy .month ul{margin:4px 0 0;padding-inline-start:18px;color:var(--ink-2);font-size:14.5px;display:flex;flex-direction:column;gap:4px}
/* the tailored plan: month 1 open, months 2 and 3 folded, one card per action (gold sample of 7.10.2026) */
.plan{gap:18px}
.plan .month{display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--line);padding-top:14px;min-width:0}
.plan .month .mn{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--accent-strong)}
.plan .month h3{font-size:21px}
.plan .month .ml{color:var(--ink-2);font-size:15px}
.plan .month > summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:6px;border-radius:12px}
.plan .month > summary::-webkit-details-marker{display:none}
.plan .month .ms{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--ink-2)}
.plan .month .more{align-self:flex-start;font-size:14px;font-weight:600;color:var(--accent-strong);border:1.5px solid var(--accent-strong);border-radius:999px;padding:4px 12px}
.plan .month[open] > summary .ms,.plan .month[open] > summary .more{display:none}
.act{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.act h4{font-family:var(--f-body);font-weight:700;font-size:17px;line-height:1.35;margin:0}
.achip{align-self:flex-start;font-size:12.5px;font-weight:600;border-radius:999px;padding:2px 10px;background:var(--accent-soft);color:var(--accent-strong)}
.achip.idea{background:var(--warn-soft);color:var(--warn)}
.arow{display:grid;grid-template-columns:7rem 1fr;gap:4px 12px;align-items:start;min-width:0}
.arow .al{font-size:13px;font-weight:600;color:var(--ink-2);padding-top:2px}
.act,.arow{overflow-wrap:anywhere}
.arow p,.arow ul{margin:0;font-size:15px;min-width:0}
.arow ul{padding-inline-start:18px;display:flex;flex-direction:column;gap:4px}
.arow.week p{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
@media (max-width:520px){ .arow{grid-template-columns:1fr} .arow .al{padding-top:0} }
/* chapter 4 while the tailored plan is being written (task 14): a short card and a calm bar that drifts slowly from side
   to side; with reduced motion it stands still and full, so it never reads as a share done. On paper, the library plan. */
.ch4-wait{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:14px}
.ch4-wait p{font-size:15.5px}
.wait-bar{position:relative;display:block;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.wait-bar i{position:absolute;inset-block:0;inset-inline-start:0;width:35%;border-radius:inherit;background:var(--accent);animation:wait-drift 2.6s ease-in-out infinite alternate}
@keyframes wait-drift{to{transform:translateX(-186%)}}
@media (prefers-reduced-motion: reduce){ .wait-bar i{width:100%;opacity:.35} }
.ch4-print{display:none}
.cta{background:var(--accent);color:var(--accent-ink);border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.cta h2{font-size:26px}
.cta .btn{background:var(--accent-ink);color:var(--accent)}
.cta .btn.ghost{background:transparent;color:var(--accent-ink);border-color:var(--accent-ink)}
.cta .btn:focus-visible{outline-color:var(--accent-ink)}
.bonus{background:var(--surface-2);border:1.5px dashed var(--line-2);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px}
.bonus .ch-n{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--warn)}
.bonus h2{font-size:24px}
.script{display:flex;flex-direction:column;gap:10px}
.sstep{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.sstep .sn{font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:.03em}
.sstep .say{font-size:16px;margin-block:6px;padding-inline-start:12px;border-inline-start:3px solid var(--accent)}
.sstep .tip{font-size:13.5px;color:var(--ink-2)}
.fill{background:var(--warn-soft);border-radius:4px;padding-inline:3px}

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

/* Additions (not in the prototype) */
html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{display:flex;justify-content:flex-end;padding-block:8px 0}
.linkbtn{background:none;border:0;padding:4px 2px;color:var(--accent-strong);text-decoration:underline;cursor:pointer;font-size:14px}
.inputbar{bottom:var(--kb,0px)}
.inputbar input[dir="ltr"]{text-align:left}
.field input[dir="ltr"]{text-align:right}
.ts-slot{display:flex;justify-content:center;margin-top:8px}
.ts-slot:empty{display:none}
.form-err{color:var(--bad);font-weight:600}
.btn.wa{background:var(--good);color:var(--accent-ink)}
.btn.wa:hover{background:var(--good);filter:brightness(1.08)}
.btn.small{padding:10px 14px;font-size:15px}
.score6 span.on{background:var(--good)}
.lv.info{background:var(--surface-2);color:var(--ink-2)}
.headline{font-weight:600;font-size:17px}
.host{direction:ltr;unicode-bidi:isolate}
.rowi a,.legend a,.fine a{color:var(--accent-strong)}
.tst{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tst a{display:flex;flex-direction:column;gap:6px;color:var(--accent-ink);text-decoration:none;font-size:14px}
.tst img{border-radius:10px;aspect-ratio:16/9;object-fit:cover;width:100%}
.state{padding-block:48px;display:flex;flex-direction:column;gap:16px}
.state h1{font-size:clamp(28px,7.5vw,38px)}
.teaser.good{border-color:var(--good)}
.teaser.plain{border-color:var(--line-2)}
/* a heading focused on a screen change is not a control: no ring */
[tabindex="-1"]:focus{outline:none}

@media print{
  :root:not([data-theme="light"]),:root[data-theme]{--bg:#ffffff;--surface:#ffffff;--surface-2:#f4f7fa;--ink:#0f1d2b;--ink-2:#4f6173;--line:#d4dee7;--line-2:#b7c6d4;--accent:#1874b0;--accent-strong:#105a8a;--accent-ink:#ffffff;--accent-soft:#e1eef8;--good:#1b7a52;--good-soft:#e0f2e9;--warn:#9a5f06;--warn-soft:#fbefd8;--bad:#b8392a;--bad-soft:#fbe4df;--shadow:none;color-scheme:light}
  body{font-size:12pt}
  .wrap{padding:0}
  .no-print,.toc,.cta,.topbar,.ts-slot{display:none!important}
  .ch4-print{display:flex;flex-direction:column;gap:14px}
  .chapter,.bonus,.stage,.legacy .month,.act,.sstep,.money{break-inside:avoid}
  .chapter,.bonus{box-shadow:none;border-color:#b7c6d4}
  .bottomline{border:2px solid #0f1d2b;background:#ffffff;color:#0f1d2b}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt;color:#4f6173}
}