/* ─────────────────────────────────────────────────────────────────────────────────────────────
   The home page hero and the product story under it.
   Brief: docs/glance/prompts/13-marketing-hero-and-product-story.md

   ── THE FINISHED STATE IS THE DEFAULT ───────────────────────────────────────────────────────
   Every rule outside a `[data-stage]` selector describes the END of the story: the dashboard
   updated, the sentence written. The earlier stages are overrides that glance-hero.js switches
   on. So with scripts off, with reduced motion, or with this file loaded and the script late,
   the visitor reads a complete, correct page. The demo boards further down do it the other way
   round (hidden until a class arrives), and a late script there is a blank panel.

   ── ONLY transform AND opacity MOVE ─────────────────────────────────────────────────────────
   Bars and meters are full-size boxes scaled by a custom property, so a value change is a
   compositor transition and never a layout. Nothing here changes an element's size.

   ── A FLAT TOP-LEVEL FILE, ON PURPOSE ───────────────────────────────────────────────────────
   deploy.sh publishes top-level files plus a fixed directory list. A css/ folder would ship an
   unstyled page and every check would pass.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

.hx-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Hero: copy beside the dashboard ───────────────────────────────────────────────────────── */
header.hx-hero{isolation:isolate}
/* The dawn. Decoration only: the text sits on var(--bg), which stays a solid fill underneath. */
header.hx-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(620px 460px at 76% 40%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 72%),
    radial-gradient(920px 240px at 50% 104%,color-mix(in srgb,var(--accent2) 15%,transparent),transparent 72%)}
[dir="rtl"] header.hx-hero::after{transform:scaleX(-1)}

.hx-split{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:44px;align-items:center}
header.hx-hero .hx-copy .creed{font-size:clamp(38px,5.4vw,60px);max-width:none;margin-top:0}
header.hx-hero .hx-copy .sub{font-size:clamp(16.5px,1.5vw,18.5px);max-width:46ch}
header.hx-hero .hx-copy .hero-proof{display:block;margin-top:18px;font-size:13.5px;line-height:1.55;max-width:48ch}
header.hx-hero .btn{transition:transform var(--dur-base,150ms) var(--ease-out,ease-out),box-shadow var(--dur-base,150ms) var(--ease-out,ease-out)}
header.hx-hero .btn:not(.ghost):hover{transform:translateY(-1px);
  box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 34%,transparent)}

/* The use-case ticker, kept and quietened: it now sits under the hero, not inside the pitch. */
header.hx-hero .usecases{margin:38px 0 18px}
header.hx-hero .uc{flex:0 0 268px;padding:12px 14px;border-radius:14px}
header.hx-hero .uch{font-size:13.5px;margin-bottom:4px}
header.hx-hero .uc p{font-size:12.5px;line-height:1.5}

/* ── The dashboard card ─────────────────────────────────────────────────────────────────────── */
.hx-card,.hx-dash,.hx-rcpt,.hx-table{font-family:var(--f-fur);font-variant-numeric:tabular-nums;color:var(--text);
  text-align:start}
.hx-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px 22px 18px;
  box-shadow:var(--shadow)}
.hx-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-title{font-size:13.5px;font-weight:600;color:var(--muted)}
.hx-sample{font-size:11.5px;font-weight:500;color:var(--muted);border:1px solid var(--line-firm,var(--line));
  border-radius:999px;padding:2px 9px;white-space:nowrap}

.hx-lead{font-family:var(--f-display);font-size:21px;line-height:1.28;letter-spacing:-.01em;font-weight:500;
  margin:12px 0 16px;color:var(--text)}

.hx-figs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.hx-fig{display:flex;flex-direction:column;gap:1px;min-width:0}
.hx-n{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.hx-cap{font-size:12.5px;color:var(--muted)}

/* The meter: how much of the budget is used, with a tick where the month is. Two facts, one bar. */
.hx-meter{position:relative;height:10px;border-radius:999px;background:var(--panel2);overflow:hidden}
.hx-fill{position:absolute;inset:0;border-radius:999px;background:var(--accent);
  transform-origin:left center;transform:scaleX(var(--w,1))}
[dir="rtl"] .hx-fill{transform-origin:right center}
.hx-markwrap{position:relative;height:0}
.hx-mark{position:absolute;top:-14px;inset-inline-start:calc(var(--x,.5)*100%);width:2px;height:18px;
  margin-inline-start:-1px;background:var(--text);border-radius:1px}
.hx-legend{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px;color:var(--muted)}
.hx-legend span{display:inline-flex;align-items:center;gap:6px}
.hx-legend span::before{content:"";flex:none}
.hx-lg-used::before{width:10px;height:10px;border-radius:3px;background:var(--accent)}
.hx-lg-month::before{width:2px;height:12px;border-radius:1px;background:var(--text)}

/* Seven days. Each is a real button: the bar, its name and its amount are all on the page. */
.hx-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:18px}
.hx-day{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:4px 0 2px;font:inherit;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:10px;min-width:0;cursor:pointer}
.hx-day:disabled{cursor:default}
.hx-plot{position:relative;display:block;width:100%;max-width:30px;height:74px}
.hx-bar{position:absolute;inset:0;border-radius:6px 6px 2px 2px;
  background:color-mix(in srgb,var(--text) 24%,var(--panel));
  transform-origin:center bottom;transform:scaleY(max(var(--h,0),.03));
  transition:transform var(--dur-slow,400ms) var(--ease-glide,cubic-bezier(.22,1,.36,1)),background-color var(--dur-base,150ms) ease}
.hx-day-l{font-size:12px;color:var(--muted)}
.hx-day-v{font-size:11.5px;color:var(--text)}
button.hx-day:not(:disabled):hover .hx-bar{background:color-mix(in srgb,var(--accent) 62%,var(--panel))}
.hx-day[aria-pressed="true"] .hx-bar,.hx-day.is-key .hx-bar{background:var(--accent)}
.hx-day[aria-pressed="true"] .hx-day-l,.hx-day.is-key .hx-day-l{color:var(--text);font-weight:600}
.hx-day:focus-visible,.hx-q:focus-visible,.hx-step:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.hx-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.hx-ask-l{font-size:12.5px;color:var(--muted);margin-inline-end:2px}
.hx-q{appearance:none;-webkit-appearance:none;font:inherit;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;
  background:transparent;border:1px solid var(--line-firm,var(--line));border-radius:999px;padding:6px 13px;min-height:34px;
  transition:background-color var(--dur-fast,120ms) ease,border-color var(--dur-fast,120ms) ease}
.hx-q:hover{border-color:var(--accent)}
.hx-q[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,var(--panel));border-color:var(--accent)}

.hx-answer{margin-top:12px;min-height:124px}
.hx-says{font-family:var(--f-display);font-size:16.5px;line-height:1.4;margin:0 0 8px;color:var(--text)}
.hx-rows{list-style:none;margin:0;padding:0;font-size:13px}
.hx-rows li{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:6px 0;border-top:1px solid var(--line)}
.hx-rows li[hidden]{display:none}
.hx-when{color:var(--muted)}
.hx-amt{font-weight:500}
.hx-rows .hx-total{font-weight:600}
.hx-rows .hx-total .hx-what,.hx-rows .hx-sum .hx-what{grid-column:1 / span 2}

/* ── The story: one scene, four stages ─────────────────────────────────────────────────────── */
/* The heading lives INSIDE the pinned block, so the question stays on screen while it is answered. */
.hx-pin{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:30px;align-items:center}
.hx-say{display:grid;gap:14px;min-width:0}
.hx-head h2{margin:0 0 8px}
.hx-head .lead{margin:0;max-width:none}

.hx-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:hx}
.hx-steps li{counter-increment:hx}
.hx-step{appearance:none;-webkit-appearance:none;width:100%;font:inherit;color:var(--text);text-align:start;cursor:pointer;
  background:transparent;border:0;border-inline-start:2px solid var(--line);border-radius:0 10px 10px 0;
  padding:10px 12px 10px 14px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;
  transition:border-color var(--dur-base,150ms) ease,background-color var(--dur-base,150ms) ease}
[dir="rtl"] .hx-step{border-radius:10px 0 0 10px}
.hx-step:disabled{cursor:default;color:var(--text)}
.hx-step::before{content:counter(hx);grid-row:1 / span 2;font-family:var(--f-fur);font-size:12.5px;font-weight:600;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
  color:var(--muted);border:1px solid var(--line-firm,var(--line))}
.hx-step b{font-family:var(--f-fur);font-size:15px;font-weight:600;letter-spacing:-.005em}
.hx-step span{font-size:14px;line-height:1.5;color:var(--muted);grid-column:2}
.hx-step[aria-current="step"]{border-inline-start-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.hx-step[aria-current="step"]::before{color:var(--bg);background:var(--accent);border-color:var(--accent)}

.hx-scene{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:16px;align-items:center}
.hx-out{display:grid;gap:12px;min-width:0}

/* The document. Paper stays paper in the dark theme: a receipt is a white thing on a dark desk. */
.hx-rcpt{position:relative;overflow:hidden;background:#f7f5ef;color:#1b1d26;border-radius:6px;padding:16px 14px 14px;
  font-family:var(--f-num);font-size:12px;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform var(--dur-slow,400ms) var(--ease-glide,cubic-bezier(.22,1,.36,1)),opacity var(--dur-slow,400ms) ease}
.hx-rcpt-h{font-weight:700;font-size:13.5px}
.hx-rcpt-d{color:#383d4c;margin-bottom:10px}
.hx-rcpt-l{list-style:none;margin:0;padding:8px 0;border-top:1px dashed #b9b6ab;border-bottom:1px dashed #b9b6ab}
.hx-rcpt-l li,.hx-rcpt-t{display:flex;justify-content:space-between;gap:10px}
.hx-rcpt-t{font-weight:700;padding-top:8px}
/* What Glance picked out of the document: the same three things that become the row. */
.hx-hl{position:relative;z-index:0}
.hx-hl::before{content:"";position:absolute;inset:-1px -4px;z-index:-1;border-radius:4px;background:#c9cdfb;
  transition:opacity var(--dur-slow,400ms) ease}
.hx-scan{position:absolute;inset-inline:0;top:0;height:34%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(58,63,168,.20))}

.hx-table{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.hx-th,.hx-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.9fr) auto;gap:10px;align-items:center}
.hx-th{font-size:11.5px;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--line)}
.hx-row{font-size:13.5px;padding-top:8px;
  transition:transform var(--dur-slow,400ms) var(--ease-glide,cubic-bezier(.22,1,.36,1)),opacity var(--dur-slow,400ms) ease}
/* Gold is the one colour this identity reserves for "verified" (ADR-0083). The word is beside it. */
.hx-tick{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text)}
.hx-tick svg{width:15px;height:15px;color:var(--accent2);flex:none}

.hx-dash{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px 14px;
  transition:opacity var(--dur-slow,400ms) ease}
.hx-swap{display:grid;margin:8px 0 10px}
.hx-swap > *{grid-area:1 / 1;transition:transform var(--dur-slow,400ms) var(--ease-glide,cubic-bezier(.22,1,.36,1)),opacity var(--dur-slow,400ms) ease}
.hx-was{opacity:0;transform:translateY(-8px)}
.hx-dash .hx-fill{transition:transform 600ms var(--ease-glide,cubic-bezier(.22,1,.36,1))}
.hx-dash .hx-days{margin-top:12px}
.hx-dash .hx-plot{height:54px}
.hx-dash .hx-day{cursor:default;padding:0}
.hx-plus{position:absolute;inset-inline:-14px;bottom:calc(var(--h,0)*100% + 4px);text-align:center;font-size:11px;font-weight:600;
  color:var(--text);white-space:nowrap;transition:opacity var(--dur-slow,400ms) ease}
.hx-dash .hx-says{font-size:15.5px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);
  transition:transform var(--dur-slow,400ms) var(--ease-glide,cubic-bezier(.22,1,.36,1)),opacity var(--dur-slow,400ms) ease}

/* Stage 0: a receipt arrives. Nothing has been read yet. */
.hx-scene[data-stage="0"] .hx-rcpt{transform:rotate(-2.2deg) scale(1.03)}
.hx-scene[data-stage="0"] .hx-hl::before{opacity:0}
.hx-scene[data-stage="0"] .hx-row{opacity:0;transform:translateY(8px)}
/* Stage 1: read and checked. The scan passes once, because it happened once. */
.hx-scene[data-stage="1"] .hx-scan{animation:hxScan 900ms ease-out 1}
@keyframes hxScan{0%{opacity:0;transform:translateY(-100%)}20%{opacity:1}100%{opacity:0;transform:translateY(300%)}}
/* Stages 0 and 1: the dashboard has not heard about this receipt. */
.hx-scene[data-stage="0"] .hx-dash,.hx-scene[data-stage="1"] .hx-dash{opacity:.8}
.hx-scene[data-stage="0"] .hx-was,.hx-scene[data-stage="1"] .hx-was{opacity:1;transform:none}
.hx-scene[data-stage="0"] .hx-now,.hx-scene[data-stage="1"] .hx-now{opacity:0;transform:translateY(8px)}
.hx-scene[data-stage="0"] .hx-fill,.hx-scene[data-stage="1"] .hx-fill{transform:scaleX(var(--w0,1))}
.hx-scene[data-stage="0"] .hx-bar[data-grow],.hx-scene[data-stage="1"] .hx-bar[data-grow]{transform:scaleY(var(--h0,0))}
.hx-scene[data-stage="0"] .hx-plus,.hx-scene[data-stage="1"] .hx-plus{opacity:0}
/* Stage 2 onward: the document has done its job and steps back. */
.hx-scene[data-stage="2"] .hx-rcpt,.hx-scene[data-stage="3"] .hx-rcpt,.hx-scene:not([data-stage]) .hx-rcpt{opacity:.74;transform:scale(.97)}
/* Stages 0 to 2: the sentence has not been written. */
.hx-scene[data-stage="0"] .hx-says,.hx-scene[data-stage="1"] .hx-says,.hx-scene[data-stage="2"] .hx-says{opacity:0;transform:translateY(6px)}

/* Pinned on a wide screen, when the script is running and motion is welcome. */
.hx-story.is-pinned .hx-track{height:calc(100vh + 150vh)}
.hx-story.is-pinned .hx-pin{position:sticky;top:max(84px,calc(50vh - 290px))}

@media (max-width:900px){
  .hx-split{grid-template-columns:minmax(0,1fr);gap:26px}
  header.hx-hero .usecases{margin-top:26px}
  .hx-pin{grid-template-columns:minmax(0,1fr);gap:18px}
  /* heading, then the scene, then the steps that drive it: the steps must sit under what they change */
  .hx-say{display:contents}
  .hx-head{order:0}
  .hx-scene{order:1;grid-template-columns:minmax(0,1fr);gap:12px}
  .hx-steps{order:2}
  .hx-rcpt{max-width:250px;margin-inline:auto;width:100%}
  .hx-answer{min-height:0}
}
@media (max-width:400px){
  .hx-card{padding:18px 16px 14px;border-radius:18px}
  .hx-lead{font-size:19px}
  .hx-n{font-size:25px}
  .hx-days{gap:3px}
  .hx-day-v{font-size:10.5px}
  .hx-th,.hx-row{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.9fr);row-gap:4px}
  .hx-row .hx-tick{grid-column:1 / -1}
  .hx-th > :last-child{display:none}
}

/* Reduced motion: every stage still exists and every control still works. Only the travel goes. */
@media (prefers-reduced-motion:reduce){
  .hx-rcpt,.hx-row,.hx-dash,.hx-swap > *,.hx-fill,.hx-bar,.hx-plus,.hx-says,.hx-hl::before,
  header.hx-hero .btn{transition:none!important}
  .hx-scene[data-stage="1"] .hx-scan{animation:none}
  .hx-scene[data-stage="0"] .hx-rcpt{transform:none}
}


/* ── "While you're asleep": the four screens ───────────────────────────────────────────────────
   These were four boxes of inline-styled text, one of them a single small line in a wide empty
   frame. They are the same four moments and the same words, drawn as the product draws them: the
   night's intake as documents, the briefing as a sentence with the comparison beside it, the
   three-line summary as three tiles, and the one thing that needs you as a figure with its
   unread receipts.

   No new copy. Every string keeps its existing key, so the five language packs still apply, and
   what was added is drawn, not written: nine document tiles for "6 emails, 2 receipts, 1
   spreadsheet", and two bars where one is 12% longer than the other for "up 12%". If those
   sentences change, the drawings have to change with them.

   Scoped to #morning: glance-walk.css is shared by ten other pages and none of this is theirs. */
#morning .gw-say{font-size:15.5px;margin-bottom:16px}
#morning .gw-screen.mx{font-family:var(--f-fur);font-variant-numeric:tabular-nums;color:var(--text);text-align:start;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 24px;min-height:172px;
  box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:center}
.mx-main{display:grid;gap:9px;min-width:0}
.mx-label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.mx-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.mx-line{font-family:var(--f-display);font-size:19px;line-height:1.35}
.mx-say{font-family:var(--f-display);font-size:clamp(22px,2.3vw,28px);line-height:1.2;letter-spacing:-.015em;font-weight:500}
.mx-num{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.mx-big{font-size:34px}
.mx-note{font-size:13px;color:var(--signal)}

.mx-docs{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.mx-doc{width:44px;height:52px;border-radius:9px;border:1px solid var(--line-firm,var(--line));background:var(--panel2);
  display:grid;place-items:center;color:var(--muted)}
.mx-doc svg{width:22px;height:22px}
.mx-unread{color:var(--text);border-color:var(--accent)}

/* "Up 12% on an ordinary week": the ordinary week, and this one, to scale. 100 / 112 = 89.3%. */
.mx-compare{display:grid;gap:10px}
.mx-bar{display:block;height:14px;border-radius:999px;background:color-mix(in srgb,var(--text) 24%,var(--panel))}
.mx-bar-usual{width:89.3%}
.mx-bar-now{width:100%;background:var(--accent);transform-origin:left center}
[dir="rtl"] .mx-bar-now{transform-origin:right center}

#morning .gw-screen.mx-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.mx-tile{display:grid;gap:12px;align-content:space-between;padding:14px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg);min-width:0}

/* One entrance per step, when the step becomes the current one. Only with the stepper running
   and motion welcome: without either, every screen is simply there, finished. */
@media (prefers-reduced-motion:no-preference){
  html.gw-js #morning .gw-step.on .mx-doc,html.gw-js #morning .gw-step.on .mx-tile{
    animation:mxIn 360ms var(--ease-glide,cubic-bezier(.22,1,.36,1)) both;animation-delay:calc(var(--i,0)*45ms + 120ms)}
  html.gw-js #morning .gw-step.on .mx-bar-now{animation:mxGrow 700ms var(--ease-glide,cubic-bezier(.22,1,.36,1)) 250ms both}
  .mx-doc:nth-child(2),.mx-tile:nth-child(2){--i:1}
  .mx-doc:nth-child(3),.mx-tile:nth-child(3){--i:2}
  .mx-doc:nth-child(4){--i:3}.mx-doc:nth-child(5){--i:4}.mx-doc:nth-child(6){--i:5}
  .mx-doc:nth-child(7){--i:6}.mx-doc:nth-child(8){--i:7}.mx-doc:nth-child(9){--i:8}
}
@keyframes mxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mxGrow{from{transform:scaleX(.893)}to{transform:scaleX(1)}}

@media (max-width:900px){
  #morning .gw-screen.mx{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px;min-height:0}
  .mx-docs{justify-content:flex-start}
  #morning .gw-screen.mx-three{grid-template-columns:minmax(0,1fr);gap:8px}
  .mx-tile{grid-auto-flow:column;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px}
  .mx-tile .mx-num{font-size:22px}
}


/* ── "It gets better every time": the chart that grows ─────────────────────────────────────────
   The three captions under it were the whole section: three boxes saying that data compounds.
   This shows it. One point, then a trend through four, then twelve weeks with a goal across them.

   The plot is stretched to its box (preserveAspectRatio="none") so it can be short and wide on a
   desktop and taller on a phone without a second set of coordinates. Two things keep that honest:
   strokes do not scale with it (vector-effect), and each point is a zero-length line with a round
   cap, which stays a circle however the box is stretched. A <circle> would turn into an ellipse.

   As everywhere in this file, the rules outside [data-stage] are the finished chart. */
.cx{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px 14px;margin:0 0 14px;
  box-shadow:var(--shadow)}
.cx-plot{position:relative;height:210px}
.cx-svg{display:block;width:100%;height:100%;overflow:visible}
.cx-svg path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.cx-line{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 700ms var(--ease-glide,cubic-bezier(.22,1,.36,1))}
.cx-goal{stroke:var(--text);stroke-width:1.5;stroke-dasharray:.012 .012;opacity:.7;
  transition:opacity var(--dur-slow,400ms) ease}
.cx-pt{stroke:var(--accent);stroke-width:10;transition:opacity 300ms ease}
.cx-tag{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-190%);
  font-family:var(--f-fur);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;color:var(--text);
  background:var(--panel);border:1px solid var(--line-firm,var(--line));border-radius:999px;padding:2px 9px;white-space:nowrap;
  transition:opacity var(--dur-slow,400ms) ease}

/* Week 1: one file is one point. */
.cx[data-stage="0"] .cx-b,.cx[data-stage="0"] .cx-c,.cx[data-stage="1"] .cx-c{opacity:0}
.cx[data-stage="0"] .cx-line-b,.cx[data-stage="0"] .cx-line-c,.cx[data-stage="1"] .cx-line-c{stroke-dashoffset:1}
.cx[data-stage="0"] .cx-tag{opacity:0}
/* Weeks 1 to 4: a trend, and nothing yet to hold it against. */
.cx[data-stage="0"] .cx-goal,.cx[data-stage="1"] .cx-goal{opacity:0}

@media (max-width:600px){
  .cx{padding:14px 14px 10px}
  .cx-plot{height:170px}
  .cx-pt{stroke-width:8}
}
@media (prefers-reduced-motion:reduce){
  .cx-line,.cx-goal,.cx-pt,.cx-tag{transition:none!important}
}
/* Time runs the way the page reads. In Arabic the captions run right to left, so the chart does too. */
[dir="rtl"] .cx-svg{transform:scaleX(-1)}
[dir="rtl"] .cx-tag{left:auto;right:var(--x);transform:translate(50%,-190%)}
/* The current caption has a 3px top rule where the others have 1px. That was invisible while it
   never moved; now that it travels between the three, the text in each card would jump by 2px. */
#compounds .cstep:not(.on){padding-top:22px}


/* ── "It's your data": a bento ─────────────────────────────────────────────────────────────────
   Four equal cards and a trailing paragraph said five things at the same volume. They are not
   equal: "never sold, never trained on" is the promise the other four follow from, so it is the
   large tile, and the rest are sized around it.

   From 601px only. Below that glance-mobile.js makes .privcards a swipe row (display:flex
   !important on .mrow), and a grid here would be fighting it for nothing.

   The lead tile's tint is LAYERED OVER the glass fill, not put in place of it. `.card` carries a
   backdrop-filter; a bare gradient would leave background-color transparent, and the text would
   be sitting on a blur with nothing behind it. */
#yours .bz .card{display:flex;flex-direction:column;gap:10px;text-align:start;border-radius:18px}
.bz-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}
.bz-ico svg{width:20px;height:20px}
.bz-say{font-family:var(--f-display);font-size:19px;line-height:1.4;color:var(--text);margin:0}
#yours .bz .card .bz-say{color:var(--text);font-size:19px}
@media (min-width:601px){
  /* Six columns: the lead tile takes four beside one supporting tile, and the other three share
     the row under it. A first attempt put the lead beside a COLUMN of two narrow tiles; their
     text ran to five lines each, the rows grew to fit, and the lead became 530px of empty tile. */
  #yours .bz{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
  #yours .bz > .card{grid-column:span 2;max-width:none}
  #yours .bz > .bz-lead{grid-column:span 4;padding:28px;
    background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 17%,transparent),transparent 62%),var(--glass-bg)}
  #yours .bz-lead .bz-ico{margin-bottom:auto}
  #yours .bz-lead h3{font-family:var(--f-display);font-weight:500;font-size:clamp(26px,3vw,34px);line-height:1.1;
    letter-spacing:-.02em;margin:0}
  #yours .bz-lead p{font-size:17px;line-height:1.55;max-width:52ch}
}
@media (min-width:601px) and (max-width:900px){
  #yours .bz{grid-template-columns:repeat(2,minmax(0,1fr))}
  #yours .bz > .card{grid-column:span 1}
  #yours .bz > .bz-lead,#yours .bz > .bz-wide{grid-column:1 / -1}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  #yours .bz .card{transition:transform var(--dur-base,150ms) var(--ease-out,ease-out)}
  #yours .bz .card:hover{transform:translateY(-2px)}
}

/* ── One spacing scale for the home page ───────────────────────────────────────────────────────
   Measured before this block (2026-10-12): sections were padded 58px above and 46px below, and
   the gaps inside them were 10, 12, 14, 18, 22, 26, 28, 30 and 38px. Nine values, none related.
   Everything below is a step of 8.

   The steps are tokens so the next section reaches for one instead of a tenth number. This file
   is linked from index.html only, so nothing here can move another page; the shared utilities it
   overrides (.u-mb26 and friends, in glance-base.css) keep their values everywhere else. */
:root{--sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:40px;--sp-6:48px;--sp-7:56px;--sp-8:64px}

main > section,main ~ section{padding-block:var(--sp-7)}
/* A one-line aside between two sections is not a section's worth of air. */
main > section:not([id]):not(:has(h2)),main ~ section:not([id]):not(:has(h2)){padding-block:var(--sp-4)}
/* Inside a section: label, heading, lead, content, each one step apart from the last. Written
   against `section`, not `main`: half of this page's sections are siblings of <main>, not inside it. */
section .eyebrow{margin-bottom:var(--sp-1)}
section h2{margin-bottom:var(--sp-2)}
section .lead:not(.u-m0a):not(.u-mt26a):not(.u-mt22){margin-bottom:var(--sp-3)}
section .u-mb22,section .u-mb26{margin-bottom:var(--sp-3)}
section .u-mt26a,section .u-mt22{margin-top:var(--sp-3)}
section .gw{margin-block:var(--sp-3)}
#morning .gw{margin-bottom:0}
section .compound,#yours .bz,section .cards{gap:var(--sp-2)}
.cx{margin-bottom:var(--sp-2)}
section .cdots{margin-top:var(--sp-2)}
section .aud-toggle{margin-bottom:var(--sp-3)}
section .mkt-wrap,section .demo-cta{margin-bottom:var(--sp-4)}
section .demo-cta{margin-top:var(--sp-4);margin-bottom:0}
section .trust{margin-top:var(--sp-3)}
@media (max-width:600px){
  main > section,main ~ section{padding-block:var(--sp-5)}
  main > section:not([id]):not(:has(h2)),main ~ section:not([id]):not(:has(h2)){padding-block:var(--sp-3)}
}


/* ── "Then click it": the click and what it opens ──────────────────────────────────────────────
   The five steps were five inline-styled boxes: a row of flat bars, a heading on its own, a bare
   table. The story they tell is a good one and was not being shown. Now the dashboard is a card,
   a cursor travels to the Friday bar and presses it, and the drill page slides in beside the
   dashboard it came from, first as a heading, then with the rows that add up to the bar.

   Same five steps, same captions, same strings and keys. 214.00 + 88.20 + 110.40 is the 412.60 in
   the heading, and tests/test-hero-fixture.mjs checks that it stays so.

   The dashboard stays on screen, dimmed, while the drill page is open, because the fifth step is
   "Back returns you to the dashboard, exactly where you left it" and that only means something
   if you could still see where you were. Dimmed to .8, not lower: its label is muted text and
   has to stay readable (the same measurement as the story scene above). */
#drill .gw-say{font-size:15.5px;margin-bottom:var(--sp-2)}
#drill .gw-screen.dq{background:transparent;border:0;border-radius:0;padding:0;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
#drill .gw-screen.dq-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.dq-card{font-family:var(--f-fur);font-variant-numeric:tabular-nums;color:var(--text);text-align:start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;
  box-shadow:var(--shadow);min-height:196px;display:flex;flex-direction:column;min-width:0}
.dq-back{opacity:.8}
.dq-label{font-size:13px;color:var(--muted)}
.dq-bars{position:relative;display:flex;align-items:flex-end;gap:8px;height:112px;margin-top:auto}
.dq-bars i{flex:1;border-radius:var(--r-xs) var(--r-xs) 2px 2px;background:color-mix(in srgb,var(--text) 24%,var(--panel))}
.dq-bars i.dq-fri{background:var(--accent)}
/* Over the fifth of seven bars, which in Arabic is the fifth from the right. The ring is centred
   on its point by the shared transform; the cursor is not, so its tip (its left edge) is what has
   to land there, and in a right-to-left row that means moving it a cursor's width across.
   First written with `inset-inline-start` plus `left:auto` in one rule: the later `left:auto`
   won in LTR and dropped the ring 560px from the bar it was clicking. Measured, then fixed. */
.dq-bars .gw-hit{left:64.3%;top:44%}
[dir="rtl"] .dq-bars .gw-hit{left:auto;right:64.3%;transform:translate(50%,-50%)}
.dq-cursor{position:absolute;left:64.3%;top:44%;width:22px;height:22px;color:var(--text);pointer-events:none}
[dir="rtl"] .dq-cursor{left:auto;right:calc(64.3% - 22px)}
.dq-title{font-family:var(--f-display);font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.dq-rows{display:grid;margin-top:auto}
.dq-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px}
.dq-rest{color:var(--muted)}
.dq-skel{display:grid;gap:14px;margin-top:auto;padding-bottom:6px}
.dq-skel i{display:block;height:10px;border-radius:var(--r-pill);background:var(--panel2)}
.dq-skel i:nth-child(1){width:82%}.dq-skel i:nth-child(2){width:58%}.dq-skel i:nth-child(3){width:70%}

@media (prefers-reduced-motion:no-preference){
  html.gw-js #drill .gw-step.on .dq-cursor{animation:dqCursor 900ms var(--ease-glide,cubic-bezier(.22,1,.36,1)) 150ms both}
  html.gw-js #drill .gw-step.on .gw-hit{animation-delay:950ms;animation-fill-mode:both}
  html.gw-js #drill .gw-step.on .dq-panel{animation:dqSlide 520ms var(--ease-glide,cubic-bezier(.22,1,.36,1)) 120ms both}
  html.gw-js #drill .gw-step.on .dq-row{animation:mxIn 320ms var(--ease-glide,cubic-bezier(.22,1,.36,1)) both;animation-delay:calc(var(--i,0)*80ms + 380ms)}
  .dq-row:nth-child(2){--i:1}.dq-row:nth-child(3){--i:2}
  [dir="rtl"] #drill .gw-step.on .dq-panel{animation-name:dqSlideRtl}
}
@keyframes dqCursor{0%{opacity:0;transform:translate(84px,62px)}25%{opacity:1}82%{transform:translate(0,0)}91%{transform:translate(0,0) scale(.86)}100%{opacity:1;transform:translate(0,0)}}
@keyframes dqSlide{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes dqSlideRtl{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media (max-width:700px){
  #drill .gw-screen.dq-split{grid-template-columns:minmax(0,1fr)}
  .dq-card{min-height:0;padding:16px 18px}
  .dq-bars{height:84px;margin-top:var(--sp-2)}
  .dq-split .dq-back .dq-bars{height:44px}
  .dq-rows,.dq-skel{margin-top:var(--sp-2)}
}

/* ── "See it on every screen": the two devices drift against each other ───────────────────────
   A little depth: as the section passes through the viewport the desktop rises a few pixels and
   the phone sinks a few, so they read as two objects and not one flat picture. 36px of relative
   travel across the whole pass, which is meant to be felt and not noticed.

   Native scroll-driven animation, no script: the browser ties the keyframes to the section's
   position, on the compositor. Where that is not supported (Firefox, at the time of writing)
   nothing happens, which is the right fallback for decoration. Wide screens only: on a phone
   .shots is a swipe row, and under reduced motion it stays still. */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .shots > .mock{animation:dvRise linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .shots > .phone{animation:dvSink linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes dvRise{from{transform:translateY(14px)}to{transform:translateY(-14px)}}
@keyframes dvSink{from{transform:translateY(-22px)}to{transform:translateY(22px)}}