/* FirstMention — the public index. Tokens follow the AskGVT design system (dark canvas, teal accent, Rajdhani display,
   Inter body, Fira Code eyebrows). Every class here is part of the contract between the renderer's pages, the
   request-time pages in web.py and the inline JS: extend, do not rename. */

@font-face{font-family:"Rajdhani";font-weight:700;font-display:swap;src:url("rajdhani-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url("inter-700.woff2") format("woff2")}
@font-face{font-family:"Fira Code";font-weight:400;font-display:swap;src:url("fira-code-400.woff2") format("woff2")}
@font-face{font-family:"Fira Code";font-weight:500;font-display:swap;src:url("fira-code-500.woff2") format("woff2")}

:root{
  --ink-deep:#0A0C10;--ink-mid:#1D2026;--card:#111214;
  --teal:#45B9B4;--teal-dark:#3AA39F;--teal-08:rgba(69,185,180,.08);--teal-16:rgba(69,185,180,.16);--teal-28:rgba(69,185,180,.28);--teal-50:rgba(69,185,180,.5);--teal-75:rgba(69,185,180,.75);--teal-90:rgba(69,185,180,.9);
  --fg-1:#FFFFFF;--fg-2:rgba(255,255,255,.72);--fg-3:rgba(255,255,255,.55);--fg-4:rgba(255,255,255,.35);
  --line:rgba(255,255,255,.12);--line-soft:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);--line-hover:rgba(255,255,255,.32);
  --success:#0CB25F;--warning:#DE7C0D;--danger:#DE0D2C;
  --display:"Rajdhani",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"Fira Code",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:8px;--r-md:16px;--r-pill:999px;--ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink-deep);color:var(--fg-1);font:400 15px/1.5 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
a:hover{color:var(--teal)}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none}
.ic--xs{font-size:14px}.ic--sm{font-size:16px}.ic--md{font-size:20px}.ic--lg{font-size:28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* layout */
.fm-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.section{border-top:1px solid var(--line)}
.section__in{padding-block:80px}
.section__in--tight{padding-block:48px 0}
.hairline{border-top:1px solid var(--line)}
.grid{display:grid;gap:16px}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--auto-lg{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--auto-sm{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:center}
.row{display:flex;align-items:center;gap:12px}
.row--wrap{flex-wrap:wrap}
.row--between{justify-content:space-between}
.ml-auto{margin-left:auto}
.muted{color:var(--fg-3)}.faint{color:var(--fg-4)}.teal{color:var(--teal)}
.small{font-size:14px}.tiny{font-size:12px}
.mono{font-family:var(--mono)}
.pretty{text-wrap:pretty}.balance{text-wrap:balance}
.nowrap{white-space:nowrap}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* type */
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.display-xl{font:700 clamp(56px,8vw,120px)/.92 var(--display);letter-spacing:-.022em;color:var(--fg-1);text-wrap:balance}
.display-lg{font:700 clamp(48px,6vw,88px)/.95 var(--display);letter-spacing:-.02em;color:var(--fg-1)}
.display-md{font:700 clamp(40px,5vw,64px)/.95 var(--display);letter-spacing:-.02em;color:var(--fg-1)}
.display-sm{font:700 40px/1 var(--display);letter-spacing:-.018em;color:var(--fg-1)}
.num{font:700 20px/1 var(--display)}
.num--lg{font:700 40px/1 var(--display)}
.num--xl{font:700 clamp(56px,6vw,80px)/.95 var(--display);letter-spacing:-.02em}
.num--hero{font:700 clamp(96px,12vw,160px)/.9 var(--display);letter-spacing:-.03em;color:var(--teal)}
.lede{font:400 20px/1.5 var(--body);color:var(--fg-2);max-width:62ch}
.h-card{font:600 20px/1.3 var(--body);color:var(--fg-1)}
.h-sub{font:400 14px/1.5 var(--body);color:var(--fg-3)}
.statement{font:400 clamp(20px,2.6vw,32px)/1.4 var(--body);color:var(--fg-1);max-width:36ch;text-wrap:balance}

/* nav */
.fm-nav{position:sticky;top:0;z-index:20;background:rgba(10,12,16,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.fm-nav__in{height:64px;display:flex;align-items:center;gap:32px}
.fm-nav__brand{font:600 16px/1 var(--body);color:var(--fg-1);display:flex;align-items:center;gap:8px}
.fm-nav__brand:hover{color:var(--fg-1)}
.fm-nav__logo{display:block;height:28px;width:auto}   /* the 2× PNG scaled to the bar; width from the intrinsic ratio */
.fm-nav__dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--teal);display:inline-block}
.fm-nav__links{display:flex;gap:24px;margin-left:auto;font-size:14px;white-space:nowrap}
.fm-nav__links a{color:var(--fg-2)}
.fm-nav__links a.on{color:var(--fg-1)}
.fm-nav__links a:hover{color:var(--teal)}
.fm-nav__cta{margin-left:auto}
.fm-nav__menu{display:none;position:relative;margin-left:auto}
.fm-nav__menu summary{list-style:none;cursor:pointer}
.fm-nav__menu summary::-webkit-details-marker{display:none}
.fm-nav__sheet{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 0;z-index:30}
.fm-nav__sheet a{padding:12px 16px;font-size:14px;color:var(--fg-2)}
.fm-nav__sheet a.on{color:var(--fg-1)}
.fm-nav__sheet a:hover{color:var(--teal);background:var(--ink-mid)}
@media (max-width:640px){.fm-nav .fm-nav__links,.fm-nav .fm-nav__cta{display:none}.fm-nav .fm-nav__menu{display:block}.fm-nav__in{gap:16px}}   /* two classes: outranks the later .btn display rule */

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--teal);color:var(--fg-1);font:500 14px/1 var(--body);padding:12px 16px;border-radius:var(--r-sm);border:1px solid var(--teal);white-space:nowrap;transition:background .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease)}
.btn:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:var(--fg-1)}
.btn--lg{padding:16px 24px}
.btn--tall{height:48px;padding:0 24px}
.btn--sm{height:40px;padding:0 16px}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--fg-1)}
.btn--ghost:hover{background:transparent;border-color:var(--teal);color:var(--teal)}
.btn--on{background:var(--teal-16);border-color:var(--teal)}
.btn--block{display:flex;width:100%;height:48px}
.link{display:inline-flex;align-items:center;gap:4px;font:500 14px/1 var(--body);color:var(--fg-1)}
.link--teal{color:var(--teal)}
.link:hover{color:var(--teal)}

/* cards */
.card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:24px;display:flex;flex-direction:column;gap:16px}
.card--flat{background:transparent}
.card--pad-lg{padding:32px 24px}
.card--teal{border-color:var(--teal)}
.card--link{color:var(--fg-1);transition:border-color .12s var(--ease)}
.card--link:hover{border-color:var(--line-hover);color:var(--fg-1)}
.card__head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.card__foot{margin-top:auto}
.kpi{border-top:1px solid var(--line);padding-top:12px}
.kpi__label{font-size:12px;color:var(--fg-3);margin-top:8px}
.kpi__unit{font-size:20px;color:var(--fg-3)}
.stat{display:flex;flex-direction:column;gap:8px}
.stat__label{font-size:14px;color:var(--fg-3)}

/* pills, chips, avatar */
.pill{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--line-strong);font:400 14px/1 var(--body);color:var(--fg-1);white-space:nowrap}
.pill:hover{border-color:var(--teal);color:var(--teal)}
.pill--sm{padding:3px 10px;font-size:12px;color:var(--fg-2)}
.pill--muted{color:var(--fg-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:400 14px/1 var(--body);color:var(--fg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 12px;white-space:nowrap}
.chip:hover,.chip.on{border-color:var(--teal);color:var(--teal)}
.avatar{width:32px;height:32px;border-radius:var(--r-pill);background:var(--ink-mid);border:1px solid var(--line);display:inline-grid;place-items:center;font:600 12px/1 var(--body);color:var(--fg-2);flex:none}
.avatar--md{width:48px;height:48px;font-size:16px}
.avatar--xl{width:96px;height:96px;font:700 40px/1 var(--display)}
.thumb{width:64px;height:36px;border-radius:var(--r-sm);background:var(--ink-mid);border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--fg-3)}
.thumb--lg{width:80px;height:48px}

/* tables (CSS grid rows; --cols set per table) */
.tbl{min-width:var(--min,1040px)}
.scroll-x{overflow-x:auto}
.tbl__head,.tbl__row{display:grid;grid-template-columns:var(--cols);gap:16px;align-items:center;padding:12px}
.tbl__head{padding:16px 12px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);border-bottom:1px solid var(--line)}
.tbl__row{color:var(--fg-1);border-bottom:1px solid var(--line-soft);transition:background .12s var(--ease)}
.tbl__row:hover{background:var(--card);color:var(--fg-1)}
.tbl__row .rank{font:700 20px/1 var(--display);color:var(--fg-2)}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who__name{display:block;font:500 14px/1.3 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who__meta{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--fg-3);white-space:nowrap}
.scorecell{display:flex;align-items:center;gap:12px}
.scorecell .num{color:var(--teal);width:32px}
.bar{flex:1;height:4px;background:var(--line-soft);border-radius:var(--r-pill);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--teal);opacity:.7}
.move{display:inline-flex;align-items:center;gap:4px;font:600 14px/1 var(--body);color:var(--fg-4)}
.move.up{color:var(--teal)}.move.down{color:var(--fg-3)}.move.new{color:var(--teal)}.move.flat{color:var(--fg-4)}
.move--lg{font-size:16px}
.badge-new{font:700 9px/1 var(--mono);letter-spacing:.08em;padding:3px 5px;border:1px solid var(--teal);border-radius:4px;color:var(--teal)}

/* engine dots and coverage cells: tier 0 not named … 4 named first 75%+ */
.dots{display:flex;gap:4px}
.dot{position:relative;width:12px;height:12px;border-radius:var(--r-pill);border:1px solid var(--fg-4);background:transparent;cursor:default}
.dot.t1{background:var(--teal-28);border-color:var(--teal-90)}.dot.t2{background:var(--teal-50);border-color:var(--teal-90)}.dot.t3{background:var(--teal-75);border-color:var(--teal-90)}.dot.t4{background:var(--teal);border-color:var(--teal-90)}
.dot.tx{border:1px dashed var(--fg-4);background:transparent}          /* tx = not measured: the engine produced no answer in the scope */
.dot:focus-visible,.cell:focus-visible,.ebadge:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.cells{display:flex;gap:2px;height:12px}
.cell{flex:1;border-radius:2px;background:var(--line-soft)}
.cell.t1{background:var(--teal-28)}.cell.t2{background:var(--teal-50)}.cell.t3{background:var(--teal-75)}.cell.t4{background:var(--teal)}
.cell.tx{background:transparent;border:1px dashed var(--fg-4)}
.legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-3)}
.legend .cells{height:12px;gap:2px}.legend .cell{width:12px;flex:none}
.legend .dots .dot{cursor:default}
.ebadge{font:500 12px/1 var(--mono);letter-spacing:.06em;padding:4px 8px;border-radius:var(--r-sm);border:1px solid var(--line-strong);color:var(--fg-4);background:transparent;cursor:default}
.ebadge.t1{border-color:var(--teal-90);color:var(--fg-1);background:rgba(69,185,180,.18)}.ebadge.t2{border-color:var(--teal-90);color:var(--fg-1);background:rgba(69,185,180,.36)}
.ebadge.t3{border-color:var(--teal-90);color:var(--ink-deep);background:rgba(69,185,180,.6)}.ebadge.t4{border-color:var(--teal-90);color:var(--ink-deep);background:var(--teal)}
.ebadge.tx{border-style:dashed;color:var(--fg-4)}
/* the creator page's engine breakdown: fluid first column so it never overflows a phone */
.ebreak{display:grid;grid-template-columns:minmax(0,1fr) 72px 64px 64px;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.ebreak--head{padding:8px 0;border-bottom:1px solid var(--line)}
.ebreak .r{text-align:right}
@media (max-width:480px){.ebreak{grid-template-columns:minmax(0,1fr) 64px 56px 56px;gap:6px}.ebreak .num{font-size:16px}}

/* sparklines and the trend chart */
.spark{display:block;overflow:visible}
.spark polyline{fill:none;stroke:var(--fg-2);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:240;stroke-dashoffset:240;animation:fmdraw .9s var(--ease) forwards}
.trend polyline{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:fmdraw 1.4s var(--ease) forwards}
.trend circle{fill:var(--ink-deep);stroke:var(--teal);stroke-width:2}
.trend text{fill:var(--fg-3);font:400 12px var(--body)}
.trend line{stroke:var(--line-soft)}
@keyframes fmdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.spark polyline,.trend polyline{animation:none;stroke-dashoffset:0}}

/* forms */
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--fg-2)}
.input,.select,.textarea{width:100%;height:48px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--ink-deep);color:var(--fg-1);font:400 16px var(--body);outline:0;transition:border-color .12s var(--ease)}
.select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='rgba(255,255,255,.55)' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.select--sm{height:40px;padding:0 36px 0 12px;font-size:14px;background-color:var(--card)}
.textarea{height:auto;min-height:112px;padding:12px 16px;line-height:1.5;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--teal)}
.searchbox{display:flex;align-items:center;gap:12px;height:64px;padding:0 16px 0 24px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);transition:border-color .12s var(--ease);margin:0;position:relative}
.searchbox:hover{border-color:var(--line-hover)}
.searchbox:focus-within{border-color:var(--teal)}
.searchbox input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--fg-1);font:400 16px/1 var(--body)}
.searchbox input::placeholder{color:var(--fg-3)}
.dropdown{position:absolute;left:0;right:0;top:100%;margin-top:8px;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden;z-index:10}
.dropdown a,.dropdown .dropdown__row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:12px 16px;color:var(--fg-1);border-bottom:1px solid var(--line-soft)}
.dropdown a:last-child,.dropdown .dropdown__row:last-child{border-bottom:0}
.dropdown a:hover{background:var(--ink-mid);color:var(--fg-1)}
.dropdown .dropdown__row{color:var(--fg-3);cursor:default}
.check{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--fg-2);cursor:pointer}
.check input{width:16px;height:16px;margin:4px 0 0;accent-color:var(--teal);flex:none}
.notice{border:1px solid var(--teal);border-radius:var(--r-md);padding:32px 24px;display:flex;flex-direction:column;gap:16px}
.error{border:1px solid rgba(222,13,44,.6);border-radius:var(--r-sm);padding:12px 16px;color:#fda4af;font-size:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* sticky filter bar under the nav */
.filters{position:sticky;top:64px;z-index:15;background:rgba(10,12,16,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-top:24px}
.filters__in{padding-block:12px;   /* padding-block: keeps .fm-wrap's side gutters (the shorthand zeroed them, 25 Sep 2026) */ display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters .count{margin-left:auto;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

/* tooltip (positioned by JS) */
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink-mid);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 12px;white-space:nowrap;display:flex;flex-direction:column;gap:4px;transform:translate(-50%,calc(-100% - 10px))}
.tip__t{font:500 14px/1.2 var(--body);color:var(--fg-1)}
.tip__d{font:400 12px/1.2 var(--mono);color:var(--teal)}
.tip__d.off{color:var(--fg-3)}

/* breadcrumb, footer, misc */
.crumbs{display:flex;flex-wrap:wrap;gap:8px 4px;align-items:center;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.crumbs a{color:var(--fg-3)}
.crumbs a:hover{color:var(--teal)}
.footer{border-top:1px solid var(--line)}
.footer__in{padding:48px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;align-items:flex-start}
.footer__brand{display:flex;flex-direction:column;gap:16px;max-width:420px}
.footer__links{display:flex;flex-wrap:wrap;gap:24px;font-size:14px}
.footer__links a{color:var(--fg-2);display:inline-flex;align-items:center;gap:4px}
.footer__links a:hover{color:var(--teal)}
blockquote.quote{margin:0;padding:0 0 0 16px;border-left:2px solid var(--teal);font:400 16px/1.6 var(--body);color:var(--fg-2);text-wrap:pretty}
.logo-slot{height:64px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);display:grid;place-items:center;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4)}
.divider{border-top:1px solid var(--line);padding-top:24px}
.gvt{font:700 20px/1 var(--display);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px}
.gvt i{width:20px;height:20px;border-radius:5px;background:var(--teal);display:inline-grid;place-items:center}
.gvt i::after{content:"";width:0;height:0;border-left:7px solid var(--ink-deep);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
code.snippet{display:block;white-space:pre-wrap;word-break:break-all;font:400 12px/1.5 var(--mono);color:var(--fg-2);background:var(--ink-deep);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}
.modal{position:fixed;inset:0;z-index:60;background:rgba(10,12,16,.7);display:grid;place-items:center;padding:16px}
.modal__box{width:min(560px,100%);max-height:90vh;overflow:auto}

/* added with the renderer (firstmention.py): page-level spacing the mockup writes inline; every earlier class is unchanged */
.hero{padding-block:clamp(64px,10vw,128px) 64px}   /* padding-block: keeps .fm-wrap's side gutters */
.hero__search{max-width:720px;position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:start}   /* the design's two columns: copy + search left, the answer simulation right */
.hero__title{font:700 clamp(48px,6.4vw,96px)/.92 var(--display);letter-spacing:-.022em;color:var(--fg-1);margin:0}
.hero__sim{position:relative;width:360px;height:640px;justify-self:end}
@media (max-width:960px){.hero__grid{grid-template-columns:minmax(0,1fr)}.hero__sim{justify-self:start;max-width:100%}}
@media (max-width:400px){.hero__sim{width:100%;height:600px}}
.stats{margin-top:64px;max-width:800px}
.stack{display:flex;flex-direction:column;gap:16px}
.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.prose h2{margin-top:40px;margin-bottom:12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--fg-2);line-height:1.6}
.prose ul{padding-left:20px;margin:8px 0 0}
.prose li{margin:6px 0}
.prose b{color:var(--fg-1);font-weight:600}
.tbl__row[hidden]{display:none}

/* --- how it works --- (howitworks.html: the data-driven product tour; every class is prefixed hiw- so nothing above changes.
   Interactive states are aria-pressed / [hidden] toggled by the page's one script; the defaults render server-side.) */
:root{--purple:#9241E5;--purple-lt:#B27CF0;--purple-10:rgba(146,65,229,.10);--purple-16:rgba(146,65,229,.16);--purple-28:rgba(146,65,229,.28)}
.hiw-sub{border-bottom:1px solid var(--line);background:var(--card)}
.hiw-sub__in{min-height:48px;display:flex;align-items:center;gap:24px;overflow-x:auto}
.hiw-sub__title{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--body);white-space:nowrap}
.hiw-sub__links{display:flex;gap:16px;font-size:14px;white-space:nowrap;margin-left:auto}
.hiw-sub__links a{color:var(--fg-2)}
.hiw-sub__links a:hover{color:var(--teal)}
.hiw-features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hiw-features .card{gap:8px}
.hiw-panel{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden;min-width:0}
.hiw-panel--pad{padding:24px}
.hiw-panel__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 24px;border-bottom:1px solid var(--line)}
.hiw-panel__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:16px 24px;border-top:1px solid var(--line);font-size:12px;color:var(--fg-3)}
.hiw-tabs{display:flex;flex-wrap:wrap;gap:4px}
.hiw-tabs--scroll{flex-wrap:nowrap;overflow-x:auto;padding:12px 16px;border-bottom:1px solid var(--line)}
.hiw-tab{height:32px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--fg-2);font:500 14px/1 var(--body);white-space:nowrap;transition:background .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease)}
.hiw-tab:hover{border-color:var(--line-hover);color:var(--fg-1)}
.hiw-tab[aria-pressed="true"]{background:var(--fg-1);border-color:var(--fg-1);color:var(--ink-deep)}
.hiw-tab--pill{border-radius:var(--r-pill)}
.hiw-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;align-self:flex-start}
.hiw-seg button{height:32px;padding:0 12px;background:var(--card);color:var(--fg-2);font:500 14px/1 var(--body);white-space:nowrap}
.hiw-seg button + button{border-left:1px solid var(--line)}
.hiw-seg button[aria-pressed="true"]{background:var(--fg-1);color:var(--ink-deep)}
.hiw-bar{display:block;height:8px;background:rgba(255,255,255,.10);border-radius:var(--r-pill);overflow:hidden}
.hiw-bar > i{display:block;height:100%;background:var(--teal);transition:width .32s var(--ease)}
.hiw-bar--muted > i{background:var(--fg-4)}
.hiw-bar--purple > i{background:var(--purple)}
.hiw-bar--thin{height:4px;margin-top:12px}
.hiw-delta{display:inline-flex;align-items:center;gap:2px;font:500 14px/1 var(--body);white-space:nowrap}
.hiw-delta.up{color:var(--success)}.hiw-delta.down{color:var(--danger)}.hiw-delta.flat{color:var(--fg-3)}
.hiw-delta--sm{font-size:12px}
/* hero: KPI column + week-over-week / by-model panel */
.hiw-hero{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr)}
.hiw-kpis{display:grid;grid-template-rows:auto auto 1fr;border-right:1px solid var(--line)}
.hiw-kpi{padding:24px;border-bottom:1px solid var(--line)}
.hiw-kpi:last-child{border-bottom:0}
.hiw-kpi__row{display:flex;align-items:baseline;gap:8px;margin-top:8px;flex-wrap:wrap}
.hiw-side{padding:24px;display:flex;flex-direction:column;gap:16px;min-width:0}
.hiw-wow__row{display:grid;grid-template-columns:minmax(140px,1.2fr) 1fr 88px;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.hiw-wow__track{position:relative;height:24px;display:block}
.hiw-wow__track i{position:absolute;display:block;border-radius:var(--r-pill)}
.hiw-wow__prev{left:0;top:8px;height:8px;background:rgba(255,255,255,.18)}
.hiw-wow__cur{left:0;top:8px;height:8px;background:var(--teal);transition:width .32s var(--ease)}
.hiw-wow__cur--muted{background:var(--fg-4)}
.hiw-wow__mark{top:0;width:2px;height:24px;background:var(--fg-3);transform:translateX(-1px);border-radius:0}
.hiw-legend{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;color:var(--fg-3)}
.hiw-legend span{display:inline-flex;align-items:center;gap:8px}
.hiw-legend .sw{width:16px;height:8px;border-radius:var(--r-pill);background:var(--teal)}
.hiw-legend .mk{width:2px;height:12px;background:var(--fg-3)}
.hiw-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.hiw-mbar{display:grid;grid-template-columns:88px 1fr 48px;gap:8px;align-items:center;font-size:14px}
.hiw-mbar .hiw-bar > i{background:var(--fg-4)}
.hiw-mbar.on .hiw-bar > i,.hiw-mbar.all .hiw-bar > i{background:var(--teal)}
.hiw-mbar.on span:first-child{color:var(--fg-1);font-weight:600}
.hiw-topic{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 12px;font-size:14px}
.hiw-topic b{font:600 12px/1 var(--body);color:var(--teal)}
.hiw-comp{display:flex;align-items:center;gap:12px;font-size:14px}
.hiw-comp .avatar{width:24px;height:24px;font-size:11px}
/* the three example questions */
.hiw-qbtn{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:16px;border-radius:var(--r-md);border:1px solid var(--line);background:transparent;color:var(--fg-1);font:400 16px/1.4 var(--body);transition:border-color .12s var(--ease),background .12s var(--ease)}
.hiw-qbtn:hover{border-color:var(--line-hover)}
.hiw-qbtn[aria-pressed="true"]{border-color:var(--teal);background:var(--card)}
.hiw-qbtn .ic{color:var(--fg-3)}
.hiw-qbtn[aria-pressed="true"] .ic{color:var(--teal)}
.hiw-ans{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;padding:12px 8px;border-top:1px solid var(--line);border-radius:var(--r-sm)}
.hiw-ans .num{color:var(--fg-3)}
.hiw-ans--you{background:var(--purple-16)}
.hiw-ans--you .num,.hiw-you-tag{color:var(--purple-lt)}
.hiw-you-tag{font:500 12px/1 var(--mono);letter-spacing:.06em;white-space:nowrap}
.hiw-takeaway{display:flex;align-items:flex-start;gap:8px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--fg-2);line-height:1.5}
.hiw-takeaway .ic{color:var(--purple-lt);margin-top:3px}
/* the heat map and the opportunity panel */
.hiw-heatgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:16px;align-items:start}
table.hiw-heat{border-collapse:separate;border-spacing:4px;min-width:560px;width:100%;table-layout:fixed}
table.hiw-heat th{font:400 12px/1.3 var(--body);color:var(--fg-3);text-align:center;padding:0 4px 4px;vertical-align:bottom}
table.hiw-heat th:first-child{width:160px;text-align:left;padding:0}
table.hiw-heat td{padding:0}
.hiw-heat__pick{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 8px;border-left:2px solid transparent;text-align:left;font:500 14px/1.2 var(--body);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hiw-heat__pick:hover{color:var(--fg-1)}
.hiw-heat__pick[aria-pressed="true"]{color:var(--fg-1);border-left-color:var(--purple-lt)}
.hiw-cell{display:grid;place-items:center;height:40px;border-radius:var(--r-sm);font:500 14px/1 var(--body);color:var(--fg-1);background:var(--ink-mid)}
.hiw-cell.h1{background:rgba(69,185,180,.25)}.hiw-cell.h2{background:var(--teal-50)}.hiw-cell.h3{background:var(--teal-75)}.hiw-cell.h4{background:var(--teal)}
tr.on .hiw-cell{outline:2px solid var(--purple-lt);outline-offset:-2px}
.hiw-scale{display:inline-flex;gap:2px}
.hiw-scale i{width:16px;height:8px;border-radius:2px;display:block}
.hiw-opp{border:1px solid var(--purple-lt);border-radius:var(--r-md);background:var(--card);padding:24px;display:flex;flex-direction:column;gap:16px}
.hiw-opp .eyebrow{color:var(--purple-lt)}
.hiw-oppbar{display:grid;grid-template-columns:1fr 48px;gap:8px;align-items:center;font-size:14px}
.hiw-oppbar .stack{gap:4px}
.hiw-oppbar.you span:first-child{font-weight:600}
.hiw-oppbar:not(.you) span:first-child{color:var(--fg-2)}
/* identity: the node graph (a plain list of node cards under 560px) */
.hiw-minis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hiw-mini{border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:8px}
.hiw-mini .ic{color:var(--teal)}
.hiw-mini b{font:500 14px/1.3 var(--body);color:var(--fg-1)}
.hiw-nodes{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin:32px auto}
.hiw-nodes > svg{position:absolute;inset:0;width:100%;height:100%}   /* the connector layer ONLY — `.hiw-nodes svg` also matched the node cards' icon svgs and blew them up to the card size */
.hiw-nodes > svg line{stroke:rgba(69,185,180,.6);stroke-width:1.5}
.hiw-nodes > svg path{fill:none;stroke:rgba(255,255,255,.14);stroke-dasharray:4 4}
.hiw-node{position:absolute;transform:translate(-50%,-50%);width:min(152px,29%);border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;color:var(--fg-1)}
.hiw-node:hover{border-color:var(--teal);color:var(--fg-1)}
.hiw-node .ic{color:var(--fg-2)}
.hiw-node b{font:500 14px/1.2 var(--body)}
.hiw-node .mono{font-size:12px;color:var(--fg-3);max-width:100%;overflow-wrap:anywhere}
.hiw-node .ev{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--teal)}
.hiw-node--centre{width:104px;height:104px;border-radius:var(--r-pill);border-color:var(--teal);justify-content:center;padding:8px;gap:2px}
.hiw-node--centre .num--lg{font-size:36px}
.hiw-nodes--list{position:static;aspect-ratio:auto;max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:24px 0}
.hiw-nodes--list > svg{display:none}
.hiw-nodes--list .hiw-node{position:static;transform:none;width:auto}
.hiw-nodes--list .hiw-node--centre{grid-column:1 / -1;width:auto;height:auto;border-radius:var(--r-md);flex-direction:row;gap:12px;justify-content:flex-start;padding:12px 16px}
/* attribution states */
.hiw-states{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.hiw-state{text-align:left;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:16px;display:flex;flex-direction:column;gap:8px;color:var(--fg-1);transition:border-color .12s var(--ease)}
.hiw-state:hover{border-color:var(--line-hover)}
.hiw-state__label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--fg-3)}
.c-correct{color:var(--success)}.c-mismatched{color:var(--danger)}.c-name_only{color:var(--warning)}.c-third_party{color:var(--fg-3)}
.hiw-state--correct[aria-pressed="true"]{border-color:var(--success)}.hiw-state--mismatched[aria-pressed="true"]{border-color:var(--danger)}
.hiw-state--name_only[aria-pressed="true"]{border-color:var(--warning)}.hiw-state--third_party[aria-pressed="true"]{border-color:var(--fg-3)}
.hiw-attr-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.hiw-attr-tab{flex:1 1 auto;min-width:0;height:48px;padding:0 12px;border-bottom:2px solid transparent;color:var(--fg-3);font:500 14px/1 var(--body);display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.hiw-attr-tab[aria-pressed="true"]{color:var(--fg-1)}
.hiw-attr-tab--correct[aria-pressed="true"]{border-bottom-color:var(--success)}.hiw-attr-tab--mismatched[aria-pressed="true"]{border-bottom-color:var(--danger)}
.hiw-attr-tab--name_only[aria-pressed="true"]{border-bottom-color:var(--warning)}.hiw-attr-tab--third_party[aria-pressed="true"]{border-bottom-color:var(--fg-3)}
.hiw-attr{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1}
.hiw-badge{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--fg-1);flex:none}
.hiw-badge--correct{background:var(--success)}.hiw-badge--mismatched{background:var(--danger)}.hiw-badge--name_only{background:var(--warning)}.hiw-badge--third_party{background:var(--fg-3)}
.hiw-kv{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.hiw-kv > span:first-child{color:var(--fg-3)}
.hiw-kv .mono{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
mark.hiw-mark{color:var(--fg-1);padding:0 2px;border-radius:2px;border-bottom:2px solid}
mark.hiw-mark--correct{background:rgba(12,178,95,.22);border-color:var(--success)}mark.hiw-mark--mismatched{background:rgba(222,13,44,.22);border-color:var(--danger)}
mark.hiw-mark--name_only{background:rgba(222,124,13,.22);border-color:var(--warning)}mark.hiw-mark--third_party{background:rgba(255,255,255,.14);border-color:var(--fg-3)}
mark.hiw-mark--brand{background:var(--purple-28);border-color:var(--purple-lt)}
.hiw-note{margin-top:auto;display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border-radius:var(--r-sm);background:rgba(255,255,255,.08);font-size:14px;color:var(--fg-1);line-height:1.5}
.hiw-note .ic{margin-top:3px}
.hiw-note--correct{background:rgba(12,178,95,.12)}.hiw-note--mismatched{background:rgba(222,13,44,.12)}.hiw-note--name_only{background:rgba(222,124,13,.12)}
/* the A/B conditions */
.hiw-cond{display:flex;flex-direction:column;gap:24px}
.hiw-cond__rate{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;gap:8px}
.hiw-cond__rate .num{color:var(--teal)}
.hiw-cond__rate.rival,.hiw-cond__rate.rival .num{color:var(--fg-2)}
/* the agency roster (a real table) */
table.hiw-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
table.hiw-table th{font:500 12px/1 var(--body);color:var(--fg-3);text-align:left;padding:12px 24px;border-bottom:1px solid var(--line);white-space:nowrap}
table.hiw-table th button{display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit}
table.hiw-table th button:hover,table.hiw-table th button[aria-pressed="true"]{color:var(--fg-1)}
table.hiw-table td{padding:12px 24px;border-bottom:1px solid var(--line);vertical-align:middle}
table.hiw-table tbody tr:hover{background:var(--ink-mid)}
table.hiw-table tr.hiw-you{background:var(--purple-10)}
table.hiw-table tfoot td{background:var(--ink-mid);color:var(--fg-3);border-bottom:0}
table.hiw-table .who .avatar{width:28px;height:28px}
.hiw-issues{display:inline-flex;align-items:center;gap:4px}
.hiw-issues.ok{color:var(--success)}.hiw-issues.warn{color:var(--warning)}.hiw-issues.bad{color:var(--danger)}
.hiw-fm{width:32px;height:32px;border-radius:var(--r-sm);background:var(--purple);display:grid;place-items:center;color:var(--fg-1);font:600 12px/1 var(--body);flex:none}
.hiw-checks{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.hiw-checks div{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5;color:var(--fg-2)}
.hiw-checks .ic{color:var(--teal);margin-top:3px}
/* brands illustration */
.hiw-src{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;text-align:left;width:100%;padding:12px;border-radius:var(--r-sm);border:1px solid var(--line);background:transparent;color:var(--fg-1)}
.hiw-src[aria-pressed="true"]{border-color:var(--purple-lt);background:var(--purple-10)}
.hiw-src .ic{color:var(--fg-3)}
.hiw-src[aria-pressed="true"] .ic{color:var(--purple-lt)}
.hiw-src .tag{font:500 12px/1 var(--mono);color:var(--purple-lt);white-space:nowrap}
.hiw-src .tag--muted{color:var(--fg-3)}
.hiw-brand{border-color:var(--purple-lt)}
.hiw-brand .eyebrow{color:var(--purple-lt)}
.hiw-brand .thumb{width:96px;height:56px}
.hiw-pilot{font:400 12px/1.4 var(--mono);color:var(--warning)}
/* measurement + index tabs + the demo band */
.hiw-step{font:700 40px/1 var(--display);color:var(--teal)}
.hiw-measured{gap:12px 32px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.hiw-measured b{font:500 16px/1 var(--body);color:var(--fg-2)}
.hiw-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.hiw-index__row{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);color:var(--fg-1)}
.hiw-index__row:hover{background:var(--ink-mid);color:var(--fg-1)}
.hiw-index__row .rank{font:700 20px/1 var(--display);color:var(--fg-3)}
.hiw-index__more{grid-column:1 / -1;padding:16px 24px}
.hiw-demo{background:linear-gradient(135deg,#3DD9C0,#5FE8B5,#B6F2C7);color:#050505}
.hiw-demo .display-lg,.hiw-demo .lede{color:#050505}
.hiw-demo .card{color:var(--fg-1)}
.hiw-demo .card .field{color:var(--fg-2)}
.hiw-notice{border:1px solid var(--line-strong);border-radius:var(--r-md);padding:32px 24px;display:flex;flex-direction:column;gap:12px;max-width:720px}
@media (max-width:900px){.hiw-heatgrid{grid-template-columns:1fr}.hiw-hero{grid-template-columns:1fr}.hiw-kpis{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:640px){.hiw-sub__links{margin-left:0}.hiw-wow__row{grid-template-columns:minmax(0,1fr) 88px}.hiw-wow__track{grid-column:1 / -1}.hiw-kv{grid-template-columns:1fr;gap:4px}
  .hiw-minis{grid-template-columns:1fr}.hiw-mbar{grid-template-columns:72px 1fr 44px}}
@media (max-width:560px){.hiw-nodes{position:static;aspect-ratio:auto;max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:24px 0}
  .hiw-nodes > svg{display:none}.hiw-nodes .hiw-node{position:static;transform:none;width:auto}
  .hiw-nodes .hiw-node--centre{grid-column:1 / -1;width:auto;height:auto;border-radius:var(--r-md);flex-direction:row;gap:12px;justify-content:flex-start;padding:12px 16px}}

/* cookie choice (3 Oct 2026): a quiet bar at the foot of the viewport until the visitor chooses; base.html owns the behaviour */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:720px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--card);box-shadow:0 20px 60px rgba(0,0,0,.5);font-size:14px;line-height:1.45;color:var(--fg-2)}
.consent p{flex:1}
.consent a{color:var(--teal)}
.consent__btns{display:flex;gap:8px;flex:none}
@media (max-width:560px){.consent{flex-direction:column;align-items:stretch}.consent__btns>*{flex:1}}
.footer__btn{color:var(--fg-2);font-size:14px}
.footer__btn:hover{color:var(--teal)}