/* Hero + demo window. Values from Paper (Desktop 1440 / Tablet 810 / Mobile 390, light + dark). */
:root{--hero-sub:#C7CCD6;--hero-amber:#F59E0B;--hero-line:var(--color-border)}
:root[data-theme="light"]{--hero-sub:#061236;--hero-amber:#B45309}

.hero{position:relative}
.hero::after,.demo-note::before,.demo-note::after{content:"";position:absolute;left:50%;width:100vw;height:1px;transform:translateX(-50%);background:var(--hero-line);pointer-events:none}
.hero::after{bottom:0}
/* line to line: 1080 desktop, 730 tablet tier, 358 phone (see --line-gutter in base.css / scale90.css) */
.hero-inner,.demo-inner,.demo-note-in{width:calc(100% - 2 * var(--line-gutter) - 2 * var(--edge));margin-inline:auto}
.hero-inner{padding-block:32px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hero-title{font-family:var(--font-display);font-weight:400;font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:-0.02em;color:var(--color-ink)}
.hero-sub{margin:0;font-family:var(--font-heading);font-size:var(--text-base);line-height:22.4px;letter-spacing:var(--tracking-tight);color:var(--hero-sub)}
.tw{position:relative;display:inline-block;color:var(--color-ink);font-weight:700;white-space:nowrap}
.tw-scribble{position:absolute;left:0;top:calc(100% - 4px);width:100%;height:11px;overflow:visible;pointer-events:none}
.tw-scribble path{fill:none;stroke:#F59E0B;stroke-linecap:round;stroke-linejoin:round}
.tw-scribble path:first-child{stroke-width:3}
.tw-scribble path:last-child{stroke-width:1.8}
/* animation states (set by js/hero.js); without JS the full phrase and scribble are simply shown */
.tw.is-pending .tw-scribble path{stroke-dasharray:1 2;stroke-dashoffset:1}
.tw.is-drawing .tw-scribble path{stroke-dasharray:1 2;stroke-dashoffset:0;transition:stroke-dashoffset .5s ease-out}
.tw.is-drawing .tw-scribble path:last-child{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.tw .tw-scribble path,.tw.is-drawing .tw-scribble path{transition:none!important}}

.hero-cta-row{display:flex;align-items:center;gap:16px}
/* button look + states live in tokens.css (.btn-cta tokens); size = hero default 13px / Knewave 15 / 10x20 / logo 16 */
.hero-note{font-family:var(--font-body);font-size:var(--t90-small,13px);line-height:17px;color:var(--color-sub)}
.hero-note-short{display:none}
.demo-window button:focus-visible{outline:2px solid var(--feat-prog);outline-offset:2px}
.hero-cta-row--phone{display:none}   /* phone only: the CTA row sits BELOW the chart card (index.html, inside .demo) */

/* ---------- demo window ---------- */
.demo{position:relative}
.demo-inner{
  /* frosted glass bezel: drawn by ::before outside the window, so layout is untouched */
  --bz:11px;--bz-r:28px;--dw-r:17px;--bz-glow:0 0 #0000;--bz-drop:0 0 #0000;
  --bz-bg:linear-gradient(180deg,#FFFFFF38 0%,#FFFFFF14 35%,#FFFFFF0D 100%),var(--color-bg);
  --bz-edge:inset 0 1px 0 #FFFFFF99,inset 0 0 0 1px #FFFFFF26,0 0 0 1px #00000066;
  --dw-ring:#05070A;--dw-border:#000000;
  position:relative;z-index:1}
:root[data-theme="light"] .demo-inner{
  --bz-glow:0 0 #0000;--bz-drop:0 0 #0000;
  --bz-bg:linear-gradient(180deg,#FFFFFF 0%,#EEF0F6 40%,#E6E9F1 100%);
  --bz-edge:inset 0 1px 0 #FFFFFF,inset 0 0 0 1px #06123614,0 0 0 1px #0612360F;
  --dw-ring:#E2E6EE;--dw-border:#E5E7EB}
.demo-bezel{position:relative}
.demo-bezel::before{content:"";position:absolute;inset:calc(var(--bz) * -1);z-index:0;border-radius:var(--bz-r);background:var(--bz-bg);box-shadow:var(--bz-edge),var(--bz-glow),var(--bz-drop);pointer-events:none}
.demo-window{
  --dw-bg:#0F1419;--dw-line:#1F2933;
  --dw-ink:#FFFFFF;--dw-text:#CBD5E1;--dw-mute:#9CA3AF;--dw-chip-on:#1F2933;--dw-up:#10B981;--dw-down:#EF4444;
  --dw-tool-on-bg:#1F2933;--dw-tool-on:#FFFFFF;--dw-tool:#9CA3AF;
  position:relative;z-index:2;display:flex;flex-direction:column;background:var(--dw-bg);border:1px solid var(--dw-border);border-radius:var(--dw-r);overflow:clip;
  box-shadow:0 0 0 2px var(--dw-ring);
  font-family:var(--font-ui);font-size:12px;line-height:16px;color:var(--dw-text)}
:root[data-theme="light"] .demo-window{
  --dw-bg:#FFFFFF;--dw-line:#E5E7EB;
  --dw-ink:#061236;--dw-text:#4C5265;--dw-mute:#6B7280;--dw-chip-on:#F2F4F7;--dw-up:#059669;--dw-down:#DC2626;
  --dw-tool-on-bg:#061236;--dw-tool-on:#FFFFFF;--dw-tool:#6B7280}
.demo-window button{font-family:inherit;cursor:pointer;background:none;border:0;padding:0;color:inherit}

.demo-chips{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--dw-line);overflow-x:auto;scrollbar-width:none}
.demo-chips::-webkit-scrollbar{display:none}
.demo-chips .dchip{display:flex;flex-shrink:0;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--dw-line);border-radius:6px;color:var(--dw-text);font-size:12px;font-weight:500;line-height:16px;transition:border-color .12s,color .12s}
.demo-chips .dchip:hover{border-color:var(--feat-hover)}
.demo-chips .dchip .mk{font-family:var(--font-mono);font-size:10px;font-weight:400;line-height:12px;color:var(--dw-mute)}
.demo-chips .dchip[aria-pressed="true"]{background:var(--feat-on-bg);border-color:var(--feat-nb);color:var(--feat-on-ink);font-weight:600}

.demo-quote{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.q-left{display:flex;align-items:baseline;gap:14px;min-width:0}
.q-sym{font-size:18px;font-weight:600;line-height:22px;color:var(--dw-ink)}
.q-price{font-family:var(--font-mono);font-size:18px;line-height:22px;color:var(--dw-ink)}
.q-chg{font-family:var(--font-mono);font-size:13px;line-height:16px;color:var(--dw-up)}
.q-chg.is-down{color:var(--dw-down)}
.q-periods{display:flex;gap:4px}
.q-periods button{padding:5px 12px;border-radius:6px;font-size:12px;line-height:16px;color:var(--dw-mute);transition:background .12s,color .12s}
.q-periods button:hover{color:var(--dw-ink)}
.q-periods button[aria-pressed="true"]{background:var(--dw-chip-on);color:var(--dw-ink);font-weight:600}

.demo-body{position:relative;display:flex;height:420px;flex-shrink:0}
.demo-tools{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:6px;width:46px;padding-top:8px;border-right:1px solid var(--dw-line)}
.demo-tools button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;color:var(--dw-tool);transition:background .12s,color .12s}
.demo-tools button:hover{color:var(--dw-ink)}
.demo-tools button[aria-pressed="true"]{background:var(--dw-tool-on-bg);color:var(--dw-tool-on)}
.demo-tools svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tool-sep{width:24px;height:1px;background:var(--dw-line);flex-shrink:0}
.tool-label{display:none}
.demo-chart{position:relative;flex:1;min-width:0;height:420px;overflow:hidden}
.chart-host{position:absolute;inset:0}

/* error state: chart failed to load */
.chart-error{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background-color:var(--dw-bg);
  --ce-grid:#1A2129;--ce-icon:#6B7686;--ce-title:#F3F3F3;--ce-text:#8A93A6;--ce-btn-bg:#F3F3F3;--ce-btn:#0F1419;
  background-image:linear-gradient(var(--ce-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ce-grid) 1px,transparent 1px);background-size:72px 56px}
:root[data-theme="light"] .chart-error{--ce-grid:#F2F4F7;--ce-icon:#9CA3AF;--ce-title:#061236;--ce-text:#4C5265;--ce-btn-bg:#121212;--ce-btn:#FFFFFF}
.chart-error[hidden]{display:none}
.chart-error-card{display:flex;flex-direction:column;align-items:center;gap:6px;width:272px;padding:20px 24px;border-radius:12px;background:var(--dw-bg);text-align:center}
.chart-error-card svg{fill:none;stroke:var(--ce-icon);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ce-title{margin:0;padding-top:6px;font-size:15px;font-weight:600;line-height:20px;color:var(--ce-title)}
.ce-text{margin:0;width:240px;max-width:100%;font-size:12px;line-height:18px;color:var(--ce-text)}
.ce-btn{margin-top:8px!important;padding:9px 18px!important;border-radius:8px;background:var(--ce-btn-bg)!important;color:var(--ce-btn)!important;font-size:13px;font-weight:600;line-height:16px}

/* data note */
.demo-note{position:relative;margin:0;padding-top:16px;padding-bottom:48px;font-family:var(--font-body);font-size:12px;line-height:16px;color:var(--color-sub)}
.demo-note-in{display:block}
.demo-note::before{top:0;z-index:0}
.demo-note::after{bottom:0}

/* data note on phone + tablet (Paper 2026-10-30): "Demo chart, updated daily. Not live data." 10px, centred, no "Take a quick tour" link (desktop keeps it) */
@media (max-width:1199px){
  .demo-note .demo-note-in{font-size:10px;line-height:14px;text-align:center}
  .demo-note .tour-trigger{display:none}
}

/* ---------- phone (<= 599px) ---------- */
@media (max-width:599px){
  .hero-inner,.demo-inner,.demo-note-in{width:calc(100% - 32px)}   /* content gutter stays 16; the column LINES sit outside at x 8 / 382 */
  .hero-inner{padding-block:32px 27px;gap:16px}
  .hero-cta-row--desk{display:none}
  .hero-cta-row--phone{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px 28px}
  .hero-cta-row--phone::after{content:"";position:absolute;left:50%;bottom:0;width:100vw;height:1px;transform:translateX(-50%);background:var(--hero-line);pointer-events:none}
  .hero-cta-row--phone .btn.hero-cta{--cta-fs:12px;--cta-brush:14px;--cta-pad:8px 16px;--cta-logo:14px;--cta-gap:6px;line-height:16px}
  .hero-cta-row--phone .btn.hero-cta .brush{line-height:16px}
  .hero-cta-row--phone .hero-note{line-height:17px;text-align:center}
  .hero-note-long{display:inline}.hero-note-short{display:none}
  /* hero sentence = two lines (Paper 2026-10-31, option C): line 1 "Rate, save ... - all without leaving the chart" (bold phrase + brush underline), line 2 the bracket in muted grey. 12.5px at 390, scales down with the width so line 1 never wraps */
  .hero-sub{font-size:min(12.5px,3.2vw);line-height:20px;white-space:nowrap}
  .hero-sub .tw{margin-bottom:4px}
  .hero-sub .hs-c{display:block;margin-top:2px;color:#8A93A6}
  :root[data-theme="light"] .hero-sub .hs-c{color:#4C5265}
  .demo-inner{--bz:7px;--bz-r:22px;--dw-r:15px;width:calc(100% - 32px - 2 * var(--bz))}   /* bezel outer edge = content gutter 16 (358 wide at 390); flat, no glow */
  .demo-window{--dw-text:#C7CCD6}
  :root[data-theme="light"] .demo-window{--dw-text:#4C5265}
  .demo-chips{padding:10px 0 10px 10px}
  .demo-chips .dchip:last-child{margin-right:10px}
  .demo-quote{padding:12px 14px 8px}
  .q-left{gap:10px}.q-sym{font-size:16px;line-height:20px}.q-price{font-size:16px;line-height:20px}.q-chg{font-size:12px}
  .q-periods{gap:2px}.q-periods button{padding:5px 10px}
  .demo-body{flex-direction:column;height:auto}
  .demo-tools{flex-direction:row;width:auto;gap:6px;padding:0 14px 8px;border-right:0;align-items:center}
  .demo-tools button{width:auto;height:auto;padding:6px 10px;gap:6px;border-radius:6px;font-size:11px;line-height:14px}
  .demo-tools button svg{width:14px;height:14px}
  .tool-label{display:inline}
  .tool-label.visually-hidden{display:none}
  .demo-tools button[data-tool="clear"]{margin-left:auto;padding:6px}
  .tool-sep{display:none}
  .demo-chart{flex:none;height:250px}
  .demo-note{padding-top:12px;padding-bottom:0}
  .demo-note::before,.demo-note::after{display:none}   /* phone: no lines around the note; one divider sits under the CTA row */
  .demo-window.sheet-open .demo-tools{display:none}
  .demo-window.sheet-open .demo-chart{height:34px}
}
/* ---------- tablet tier (600-1199): same content, capped at 730 and centred (--container-wide in tokens.css) ---------- */
@media (min-width:600px) and (max-width:1199px){
  .demo-inner{--bz:10px;--dw-r:18px}
  /* score panel rate buttons: Paper 22x22 / gap 3 (scale90 grew them to 30 and clipped the panel); tap area grows via ::after only */
  .scout-panel .sp-rate button{position:relative;width:22px;height:22px}
  .scout-panel .sp-rate button::after{content:"";position:absolute;inset:-4px}
}
/* Bezel sits ON the two column lines (Paper "Round 2 final"): its outer edge = the line, never past it, never under it.
   The bezel is drawn --bz outside the window, so the window is the line-to-line span minus the bezel on both sides.
   1130 line span at 1440 -> 1108 window; 730 at 810 -> 710; 358 at 390 -> 344. Last rule wins over the per-viewport widths above. */
.demo-inner{width:calc(100% - 2 * var(--line-gutter) - 2 * var(--edge) - 2 * var(--bz))}

/* Padding pass (owner 2026-11-01): hero text, bezel, note and the other sections all sit 18px clear of the column lines (--edge, base.css).
   The two full-width dividers around the demo meet the bezel's top and bottom edges (the bezel covers them, so they show only left and right of it). */
@media (min-width:600px){
  .hero::after{bottom:calc(var(--fl-bezel) - 1px)}
  .demo-note::before{top:calc(var(--fl-bezel) - 1px)}
}