/* Token bridge.
   The pages don't agree on names: the homepage says --card/--brand, /solutions and /compare say
   --panel/--accent. A component dropped onto the "wrong" page silently resolved var(--brand) to
   NOTHING — which is how an active filter chip ended up as white text on a white background.
   Ask for both, in order, with a real colour as the last word. */
:root{
  --gc-card:   var(--card,   var(--panel,  #ffffff));
  --gc-bg:     var(--bg,     #f6f8fc);
  /* NOT --accent. That's the decorative light blue (#5b8cff) — 3.16:1 under white text, so
     anything FILLED with it and labelled in white is unreadable. Filled surfaces get the
     darker brand blue; --accent stays for strokes and gradients where nothing sits on top. */
  --gc-brand:  var(--brand,  #2f62d6);
  --gc-brand2: var(--brand2, var(--accent2, #43e0b0));
  --gc-ink:    var(--ink-accent2, var(--ink-accent, var(--brand, #2f62d6)));
}

/* Styles for the live animated dashboards. Shared by index.html and solutions.html —
   the charts render in both, so the CSS cannot live inside one page's <style>. */
  /* ── Live charts (glance-charts.js) ────────────────────────────────────────
     These were PNGs. A picture of a chart proves the product exists; a chart that
     DRAWS ITSELF proves it's alive. Bars grow from the baseline, lines trace out,
     the donut sweeps round, the numbers count up — the same thing the real app does
     when a dashboard loads. Nothing moves until you scroll to it. */
  .gc-board{border:1px solid var(--line);border-radius:16px;background:var(--gc-card);
    padding:14px;box-shadow:0 10px 30px rgba(10,16,30,.06);overflow:hidden}
  .gc-top{display:flex;align-items:center;gap:9px;padding:2px 4px 12px;
    border-bottom:1px solid var(--line);margin-bottom:13px}
  .gc-top b{font-size:14px;letter-spacing:-.01em}
  .gc-logo{width:20px;height:20px;border-radius:6px;flex:0 0 auto;
    background:linear-gradient(135deg,var(--gc-brand),var(--gc-brand2))}
  .gc-badge{font-size:11px;color:var(--muted);border:1px solid var(--line);
    border-radius:999px;padding:2px 8px}
  .gc-live{margin-left:auto;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
  .gc-live i{width:6px;height:6px;border-radius:50%;background:var(--gc-brand2);
    box-shadow:0 0 0 0 rgba(67,224,176,.55);animation:gcPulse 2.4s ease-out infinite}
  @keyframes gcPulse{70%{box-shadow:0 0 0 7px rgba(67,224,176,0)}100%{box-shadow:0 0 0 0 rgba(67,224,176,0)}}

  .gc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
  .gc-kpi{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);
    display:flex;flex-direction:column;gap:3px;
    opacity:0;transform:translateY(8px)}
  .go .gc-kpi{animation:gcIn .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d)}
  @keyframes gcIn{to{opacity:1;transform:none}}
  .gc-kpi .l{font-size:11px;color:var(--muted);line-height:1.3}
  .gc-kpi .v{font-size:19px;font-weight:750;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums}
  .gc-kpi .d{font-size:11px;font-weight:600}
  .gc-kpi .d.up{color:#12775a}.gc-kpi .d.down{color:#a8384c}
  html[data-theme="dark"] .gc-kpi .d.up{color:#43e0b0}
  html[data-theme="dark"] .gc-kpi .d.down{color:#ff8b9b}

  .gc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .gc-panel{border:1px solid var(--line);border-radius:12px;padding:11px 12px 9px;background:var(--bg)}
  .gc-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
  .gc-h b{font-size:12.5px;letter-spacing:-.01em}
  .gc-h span{font-size:10.5px;color:var(--muted)}
  .gc-svg{width:100%;height:auto;display:block;overflow:visible}
  .gc-lab{font-size:9px;fill:var(--muted)}

  /* Bars grow up from the baseline — scaleY from the bottom, not a fade. */
  .gc-bar{transform-origin:center bottom;transform:scaleY(0);opacity:.35}
  .go .gc-bar{animation:gcBar .75s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d)}
  @keyframes gcBar{to{transform:scaleY(1);opacity:1}}

  /* Lines TRACE themselves left-to-right: the dash pattern is the whole path length,
     and we walk the offset to zero. */
  .gc-line{stroke-dasharray:1200;stroke-dashoffset:1200}
  .go .gc-line{animation:gcDraw 1.5s cubic-bezier(.4,0,.15,1) forwards;animation-delay:var(--d,0ms)}
  @keyframes gcDraw{to{stroke-dashoffset:0}}
  .gc-area{opacity:0}
  .go .gc-area{animation:gcArea .9s ease-out .55s forwards}
  @keyframes gcArea{to{opacity:.13}}
  .gc-dot{opacity:0;transform-box:fill-box;transform-origin:center}
  .go .gc-dot{animation:gcDot .5s cubic-bezier(.34,1.56,.64,1) 1.25s forwards}
  @keyframes gcDot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}

  /* The donut sweeps round from 12 o'clock. */
  .gc-arc{stroke-dasharray:0 calc(var(--circ) * 1px)}
  .go .gc-arc{animation:gcArc .85s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d)}
  @keyframes gcArc{to{stroke-dasharray:calc(var(--len) * 1px) calc((var(--circ) - var(--len)) * 1px)}}
  .gc-donutwrap{display:flex;align-items:center;gap:8px}
  .gc-donut{width:118px;height:118px;flex:0 0 auto}
  .gc-rows{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
  .gc-row{display:flex;align-items:center;gap:6px;font-size:11px;opacity:0;transform:translateX(-5px)}
  .go .gc-row{animation:gcRow .45s ease-out forwards;animation-delay:calc(var(--d) + 320ms)}
  @keyframes gcRow{to{opacity:1;transform:none}}
  .gc-row i{width:8px;height:8px;border-radius:3px;flex:0 0 auto}
  .gc-row span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gc-row b{margin-left:auto;font-variant-numeric:tabular-nums}
  .gc-legs{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px}
  .gc-leg{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted)}
  .gc-leg i{width:8px;height:8px;border-radius:3px}

  /* Phone: most people are reading this on a phone, so the two-up chart grid stacks
     and the donut legend sits under the ring instead of being squeezed beside it. */
  @media (max-width:820px){
    .gc-grid{grid-template-columns:1fr}
    .gc-kpis{grid-template-columns:1fr 1fr 1fr;gap:6px}
    .gc-kpi{padding:8px 9px}
    .gc-kpi .v{font-size:16px}
    .gc-kpi .l,.gc-kpi .d{font-size:10px}
    .gc-donutwrap{gap:6px}
    .gc-donut{width:96px;height:96px}
  }

  /* Motion off: the charts still render, complete and correct. They just don't move. */
  @media (prefers-reduced-motion:reduce){
    .gc-kpi,.gc-bar,.gc-line,.gc-area,.gc-dot,.gc-arc,.gc-row{
      opacity:1!important;transform:none!important;animation:none!important;
      stroke-dashoffset:0!important}
    .gc-area{opacity:.13!important}
    .gc-arc{stroke-dasharray:calc(var(--len) * 1px) calc((var(--circ) - var(--len)) * 1px)!important}
    .gc-live i{animation:none}
  }


  /* ── The two flow slides: Import and Iris ──────────────────────────────────
     These show an INTERFACE doing something rather than a chart, so they act it out: the scan
     sweeps down the receipt, the rows land one at a time with a tick, and the badge flips to
     Ready. Iris types her question, thinks, answers, and draws. */
  .gc-flowgrid{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start}

  .gc-receipt{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--bg);
    padding:14px 12px 10px;overflow:hidden;display:flex;flex-direction:column;gap:7px}
  .gc-rlines{display:flex;flex-direction:column;gap:7px}
  .gc-rlines span{height:7px;border-radius:3px;background:var(--line);display:block}
  .gc-rcap{font-size:10.5px;color:var(--muted);text-align:center;margin-top:5px}
  /* The scan line only makes sense while it's reading — it stops once we're Ready. */
  .gc-scan{position:absolute;left:0;right:0;top:0;height:38%;pointer-events:none;opacity:0;
    background:linear-gradient(180deg,rgba(91,140,255,0) 0%,rgba(91,140,255,.22) 60%,rgba(91,140,255,.5) 100%);
    border-bottom:2px solid var(--gc-brand)}
  .go .gc-scan{animation:gcScan 1.5s cubic-bezier(.5,0,.5,1) 2}
  .done .gc-scan{animation:none;opacity:0}
  @keyframes gcScan{0%{opacity:0;transform:translateY(-40%)}
    15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(210%)}}

  .gc-rowsout{display:flex;flex-direction:column;gap:5px;min-width:0}
  .gc-rowhead,.gc-outrow{display:grid;grid-template-columns:1fr auto auto 16px;gap:8px;align-items:center}
  .gc-rowhead{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
    padding:0 9px 4px;border-bottom:1px solid var(--line)}
  .gc-rowhead span:last-child{text-align:right}
  .gc-outrow{border:1px solid var(--line);border-radius:9px;background:var(--bg);
    padding:8px 9px;font-size:12px;opacity:0;transform:translateX(-10px)}
  .go .gc-outrow{animation:gcRowIn .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d)}
  @keyframes gcRowIn{to{opacity:1;transform:none}}
  .gc-outrow span:nth-child(2){color:var(--muted);font-size:11px}
  .gc-outrow b{font-variant-numeric:tabular-nums;white-space:nowrap}
  .gc-tick{width:15px;height:15px;color:#12775a}
  html[data-theme="dark"] .gc-tick{color:#43e0b0}
  .gc-tick path{stroke-dasharray:20;stroke-dashoffset:20}
  .go .gc-outrow .gc-tick path{animation:gcDraw .35s ease-out forwards;animation-delay:calc(var(--d) + 260ms)}
  .gc-outfoot{font-size:11px;color:var(--muted);padding:6px 2px 0;opacity:0}
  .go .gc-outfoot{animation:gcIn .5s ease-out forwards;animation-delay:var(--d)}
  .gc-status i{background:var(--gc-brand)}
  .done .gc-status i{background:#12775a;animation:none}
  html[data-theme="dark"] .done .gc-status i{background:#43e0b0}

  .gc-chat{display:flex;flex-direction:column;gap:10px}
  .gc-ask{align-self:flex-end;max-width:88%;background:var(--gc-brand);color:#fff;border-radius:14px 14px 4px 14px;
    padding:9px 13px;font-size:13px;opacity:0}
  .go .gc-ask{animation:gcIn .4s ease-out forwards}
  /* The question types itself — a caret walking across, not a fade-in. */
  .gc-typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
    border-right:2px solid rgba(255,255,255,.85);width:0}
  .go .gc-typed{animation:gcType 1.15s steps(30,end) .35s forwards, gcCaret .7s step-end 6}
  @keyframes gcType{to{width:100%}}
  @keyframes gcCaret{50%{border-color:transparent}}
  .gc-think{display:flex;gap:4px;padding:2px 4px;opacity:0}
  .go .gc-think{animation:gcIn .3s ease-out 1.55s forwards, gcOut .3s ease-out 2.3s forwards}
  @keyframes gcOut{to{opacity:0;height:0;padding:0;margin:-5px 0}}
  .gc-think i{width:6px;height:6px;border-radius:50%;background:var(--muted);
    animation:gcBounce 1s ease-in-out infinite}
  .gc-think i:nth-child(2){animation-delay:.14s}.gc-think i:nth-child(3){animation-delay:.28s}
  @keyframes gcBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
  .gc-said{align-self:flex-start;max-width:92%;border:1px solid var(--line);background:var(--bg);
    border-radius:14px 14px 14px 4px;padding:10px 13px;font-size:13px;line-height:1.55;opacity:0}
  .go .gc-said{animation:gcIn .45s ease-out 2.35s forwards}
  .gc-mini{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:10px 12px 8px;opacity:0}
  .go .gc-mini{animation:gcIn .45s ease-out 2.6s forwards}
  .gc-days{display:grid;grid-template-columns:repeat(7,1fr);margin-top:5px}
  .gc-days span{font-size:10px;color:var(--muted);text-align:center}
  html[data-theme="dark"] .gc-mini rect[fill="#c9d4ea"]{fill:#39435a}

  @media (max-width:820px){
    .gc-flowgrid{grid-template-columns:1fr;gap:12px}
    .gc-receipt{flex-direction:row;align-items:center;gap:12px;padding:11px}
    .gc-receipt .gc-rlines{flex:1}
    .gc-rcap{margin:0;white-space:nowrap}
    .gc-outrow{font-size:11.5px}
  }

  @media (prefers-reduced-motion:reduce){
    .gc-scan{display:none}
    .gc-outrow,.gc-outfoot,.gc-ask,.gc-said,.gc-mini{opacity:1!important;transform:none!important;animation:none!important}
    .gc-typed{width:auto!important;border-right:0;animation:none!important}
    .gc-think{display:none}
    .gc-tick path{stroke-dashoffset:0!important;animation:none!important}
  }

  /* ── Goals ────────────────────────────────────────────────────────────────
     The bar fills, the pace marker slides to where you SHOULD be, and the verdict arrives once
     the two can be compared. Without the marker, "86% of your budget" looks like good news. */
  .gc-goals{display:flex;flex-direction:column;gap:0}
  .gc-goal{padding:15px 4px;border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px)}
  .gc-goal:last-child{border-bottom:0;padding-bottom:4px}
  .go .gc-goal{animation:gcIn .55s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d)}
  .gc-goalhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
  .gc-goalhead b{font-size:14px;letter-spacing:-.01em}
  .gc-goalhead span{font-size:12.5px;color:var(--muted);white-space:nowrap}
  .gc-goalhead em{font-style:normal;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

  .gc-goalbar{position:relative;height:11px;border-radius:999px;background:var(--gc-bg);
    border:1px solid var(--line);overflow:visible}
  .gc-goalbar .fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;display:block}
  .gc-goalbar .fill.ok{background:linear-gradient(90deg,#12775a,#43e0b0)}
  .gc-goalbar .fill.warn{background:linear-gradient(90deg,#c76a1e,#f5b042)}
  .go .gc-goal .fill{animation:gcFill 1.1s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:calc(var(--d) + 140ms)}
  @keyframes gcFill{to{width:var(--pct)}}

  /* Where you should be by now. It slides in AFTER the bar, so you watch the comparison happen. */
  .gc-goalbar .pace{position:absolute;top:-5px;bottom:-5px;left:0;width:2px;border-radius:2px;
    background:var(--text);opacity:0}
  .go .gc-goal .pace{animation:gcPace .7s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:calc(var(--d) + 900ms)}
  @keyframes gcPace{to{left:var(--pace);opacity:.85}}

  .gc-goalfoot{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12.5px;
    font-weight:600;opacity:0}
  .go .gc-goal .gc-goalfoot{animation:gcIn .5s ease-out forwards;animation-delay:calc(var(--d) + 1350ms)}
  .gc-goalfoot svg{width:15px;height:15px;flex:0 0 auto}
  .gc-goalfoot.ok{color:#12775a}
  .gc-goalfoot.warn{color:#b4530f}
  html[data-theme="dark"] .gc-goalfoot.ok{color:#43e0b0}
  html[data-theme="dark"] .gc-goalfoot.warn{color:#f5b042}

  @media (prefers-reduced-motion:reduce){
    .gc-goal,.gc-goalfoot{opacity:1!important;transform:none!important;animation:none!important}
    .gc-goalbar .fill{width:var(--pct)!important;animation:none!important}
    .gc-goalbar .pace{left:var(--pace)!important;opacity:.85!important;animation:none!important}
  }

  /* ── Coverage: where your numbers live, and who can read them ──────────────
     Ticks and crosses land row by row. Only the last column fills all the way down, and that
     IS the argument — the picture makes it before the caption does. */
  .gc-covgrid{display:grid;grid-template-columns:1.5fr repeat(3, 1fr) 1.15fr;gap:6px;align-items:center}
  .gc-covhead{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
    text-align:center;padding:0 0 8px;border-bottom:1px solid var(--line);font-weight:650}
  .gc-covhead.us{color:var(--gc-brand);font-weight:800;border-bottom-color:var(--gc-brand)}
  .gc-covrow{font-size:13px;padding:9px 0;opacity:0;transform:translateX(-8px)}
  .go .gc-covrow{animation:gcRowIn .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d)}
  .gc-cell{display:grid;place-items:center;height:34px;opacity:0;transform:scale(.5)}
  .go .gc-cell{animation:gcPop .45s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:calc(var(--d) + 320ms)}
  @keyframes gcPop{to{opacity:1;transform:none}}
  .gc-cell svg{width:17px;height:17px}
  .gc-cell.yes{color:#12775a}
  .gc-cell.no{color:#b9c2d2}
  html[data-theme="dark"] .gc-cell.yes{color:#43e0b0}
  html[data-theme="dark"] .gc-cell.no{color:#3a4459}
  .gc-covus{display:grid;place-items:center;border-radius:10px;background:rgba(47,98,214,.08);
    border:1px solid rgba(47,98,214,.22)}
  .gc-covus .gc-cell.yes{color:var(--gc-brand)}
  .gc-covfoot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
    font-size:13px;color:var(--muted);line-height:1.6;opacity:0}
  .go .gc-covfoot{animation:gcIn .6s ease-out 1.5s forwards}

  @media (max-width:700px){
    .gc-covgrid{grid-template-columns:1.3fr repeat(3,.7fr) .9fr;gap:4px}
    .gc-covhead{font-size:9.5px;letter-spacing:0}
    .gc-covrow{font-size:11.5px}
  }
  @media (prefers-reduced-motion:reduce){
    .gc-covrow,.gc-cell,.gc-covfoot{opacity:1!important;transform:none!important;animation:none!important}
  }

  /* ── Iris building a dashboard ────────────────────────────────────────────
     The claim on the page is "you describe it, she builds it". So show the build: the prompt
     types, she narrates what she's doing, and the dashboard assembles under it — numbers first,
     then charts. Roughly four seconds, which is roughly how long it takes for real. */
  .gc-buildchat{display:flex;flex-direction:column;gap:9px;padding-bottom:14px;
    border-bottom:1px solid var(--line);margin-bottom:14px}
  .gc-typed2{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
    border-right:2px solid rgba(255,255,255,.85);width:0}
  .go .gc-typed2{animation:gcType 1.1s steps(34,end) .25s forwards, gcCaret .7s step-end 5}
  .gc-build .gc-think{opacity:0}
  .go .gc-build .gc-think{animation:gcIn .3s ease-out 1.4s forwards, gcOut .3s ease-out 1.9s forwards}

  .gc-steps{display:flex;flex-direction:column;gap:5px}
  .gc-step{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;opacity:0;
    transform:translateX(-6px)}
  .gc-step b{color:var(--text);font-weight:650}
  .gc-step::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gc-brand2);
    flex:0 0 auto}
  .go .gc-step{animation:gcRowIn .45s ease-out forwards;animation-delay:var(--d)}

  .gc-builthead{display:flex;align-items:center;gap:9px;margin-bottom:11px;opacity:0}
  .go .gc-builthead{animation:gcIn .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d)}
  .gc-builthead b{font-size:15px;letter-spacing:-.01em}
  .gc-byiris{font-size:10.5px;font-weight:700;color:#fff;border-radius:999px;padding:3px 9px;
    background:linear-gradient(135deg,var(--gc-brand),var(--gc-brand2))}

  /* The panels themselves arrive — they don't just contain things that arrive. */
  .gc-build .gc-panel{opacity:0;transform:translateY(10px)}
  .go .gc-build .gc-panel{animation:gcIn .55s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:var(--d)}

  .gc-hbars{display:flex;flex-direction:column;gap:8px}
  .gc-hbar{display:grid;grid-template-columns:78px 1fr auto;gap:9px;align-items:center;
    font-size:12px;opacity:0}
  .go .gc-hbar{animation:gcIn .45s ease-out forwards;animation-delay:var(--d)}
  .gc-hbar .l{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gc-hbar .t{height:9px;border-radius:999px;background:var(--gc-bg);border:1px solid var(--line);
    overflow:hidden}
  .gc-hbar .t i{display:block;height:100%;width:0;border-radius:999px;
    background:linear-gradient(90deg,var(--gc-brand),#7ea6ff)}
  .go .gc-hbar .t i{animation:gcGrow .8s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:calc(var(--d) + 120ms)}
  @keyframes gcGrow{to{width:var(--w)}}
  .gc-hbar .v{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}

  @media (max-width:820px){
    .gc-build .gc-grid{grid-template-columns:1fr}
    .gc-hbar{grid-template-columns:66px 1fr auto;font-size:11.5px}
  }
  @media (prefers-reduced-motion:reduce){
    .gc-typed2{width:auto!important;border-right:0;animation:none!important}
    .gc-step,.gc-builthead,.gc-hbar,.gc-build .gc-panel{opacity:1!important;transform:none!important;
      animation:none!important}
    .gc-hbar .t i{width:var(--w)!important;animation:none!important}
    .gc-build .gc-think{display:none}
  }

  /* ── Drilldown, acted out ─────────────────────────────────────────────────
     Bars draw, a cursor crosses to the tall one, clicks, and the rows behind it slide in. */
  .gc-drillstage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;
    align-items:stretch;min-height:210px}
  .gc-drillbars{position:relative;display:flex;align-items:flex-end;gap:7px;padding:8px 2px 0}
  .gc-dbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
  .gc-dbar .col{width:100%;height:150px;display:flex;align-items:flex-end}
  .gc-dbar .col i{width:100%;height:0;border-radius:5px 5px 2px 2px;background:#c9d4ea;display:block}
  .go .gc-dbar .col i{animation:gcRise .7s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d)}
  @keyframes gcRise{to{height:var(--h)}}
  .gc-dbar.hot .col i{background:var(--gc-brand)}
  /* The clicked bar stays lit; the rest recede. You can see what you're looking at. */
  .go .gc-dbar:not(.hot){animation:gcDim .5s ease-out 2.6s forwards}
  @keyframes gcDim{to{opacity:.4}}
  .gc-dbar .lab{font-size:10.5px;color:var(--muted)}
  html[data-theme="dark"] .gc-dbar .col i{background:#39435a}
  html[data-theme="dark"] .gc-dbar.hot .col i{background:var(--gc-brand)}

  .gc-cursor{position:absolute;left:8%;top:18%;width:20px;height:20px;color:var(--text);
    opacity:0;pointer-events:none}
  .go .gc-cursor{animation:gcMove 1.5s cubic-bezier(.5,0,.2,1) 1.3s forwards}
  @keyframes gcMove{
    0%{opacity:0;left:6%;top:16%}
    25%{opacity:1}
    70%{opacity:1;left:60%;top:38%}
    82%{transform:scale(.8)}            /* the click */
    100%{opacity:1;left:60%;top:38%;transform:scale(1)}
  }

  .gc-drillpanel{border:1px solid var(--line);border-radius:12px;background:var(--gc-bg);
    padding:12px;opacity:0;transform:translateX(14px)}
  .go .gc-drillpanel{animation:gcSlide .6s cubic-bezier(.22,1,.36,1) 2.7s forwards}
  @keyframes gcSlide{to{opacity:1;transform:none}}
  .gc-dph{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
    padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .gc-dph b{font-size:14px}
  .gc-dph span{font-size:11px;color:var(--muted)}
  .gc-drow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
    padding:6px 0;font-size:12px;opacity:0;transform:translateX(-6px)}
  .go .gc-drow{animation:gcRowIn .4s ease-out forwards;animation-delay:var(--d)}
  .gc-drow .c{font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;
    padding:2px 7px;white-space:nowrap}
  .gc-drow b{font-variant-numeric:tabular-nums}
  .gc-dpf{margin:9px 0 0;padding-top:8px;border-top:1px solid var(--line);font-size:12px;
    color:var(--muted);opacity:0;font-style:italic}
  .go .gc-dpf{animation:gcIn .5s ease-out 3.6s forwards}

  /* ── Iris refusing to invent a number ────────────────────────────────────── */
  .gc-honest .gc-said b{color:var(--text)}
  .gc-fix{display:block;margin-top:7px;color:var(--gc-brand);font-weight:650;font-size:12.5px}
  .gc-nochart{display:flex;align-items:center;gap:7px;margin-top:4px;padding:9px 12px;
    border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:12px;opacity:0}
  .go .gc-nochart{animation:gcIn .5s ease-out 3s forwards}
  .gc-nochart svg{width:16px;height:16px;flex:0 0 auto}

  @media (max-width:760px){
    .gc-drillstage{grid-template-columns:1fr;gap:14px}
    .gc-dbar .col{height:110px}
    .gc-cursor{display:none}   /* a cursor makes no sense on a phone */
    .go .gc-drillpanel{animation-delay:2.2s}
  }
  @media (prefers-reduced-motion:reduce){
    .gc-dbar .col i{height:var(--h)!important;animation:none!important}
    .gc-cursor{display:none}
    .gc-drillpanel,.gc-drow,.gc-dpf,.gc-nochart{opacity:1!important;transform:none!important;
      animation:none!important}
  }