/* Sample audit pages (/samples/*), redesign 2026-10-17. Loaded only on sample pages.
   One spacing scale on a 4/8 grid (--s1..--s9) and one type scale (title, h2, h3, h4, lead, body, caption).
   Acid stays on the Book button only; citron marks highlights in charts. Everything is visible with no JS. */
.sx{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --t-title:clamp(34px,4.2vw,54px);--t-h2:clamp(28px,3vw,36px);--t-h3:20px;--t-h4:17px;--t-lead:19px;--t-body:17px;--t-ui:15px;--t-cap:14px;
  --sec-y:var(--s9);--toc-w:208px;--card-bg:#151b18;--card-2:#1c231f;--bar-dim:#6a7169;--bar-alt:#8f968c}
@media (max-width:767px){.sx{--sec-y:var(--s8);--t-lead:18px}}
/* Jumps clear the sticky chrome: --head is defined on html; the .sx spacing tokens are not, so they can't be used here
   (they made the value invalid and scroll padding fell back to auto). Each section then lands 32px above its number. */
html:has(.sx){scroll-padding-top:var(--head)}
@media (max-width:999px){html:has(.sx){scroll-padding-top:calc(var(--head) + 53px)}}
.sx-sec{scroll-margin-top:var(--s5)}

/* type */
.sx h1,.sx h2,.sx h3,.sx h4{font-family:var(--display);font-weight:500;color:var(--white);text-wrap:balance}
.sx h1{font-size:var(--t-title);line-height:1.05;letter-spacing:-.03em;max-width:20ch}
.sx h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.025em}
.sx .sx-h3,.sx-tl-col h3{font-size:var(--t-h3);line-height:1.3;letter-spacing:-.01em}
.sx h4{margin:0;font-size:var(--t-h4);line-height:1.35;letter-spacing:0}
.sx-p{max-width:62ch;font-size:var(--t-body);line-height:1.6;color:var(--body);text-wrap:pretty}
.sx-lead{max-width:52ch;font-size:var(--t-lead);line-height:1.55;color:var(--body);text-wrap:pretty}
.sx-cap{max-width:72ch;font-size:var(--t-cap);line-height:1.5;color:var(--muted);text-wrap:pretty}
.sx-label{font:400 var(--t-cap)/1.4 var(--data);color:var(--muted)}
.sx .data{font-family:var(--data);font-size:var(--t-cap);font-variant-numeric:tabular-nums;letter-spacing:0}
.sx-meta{color:var(--muted)}
.sx mark{background:none;color:var(--citron);font-weight:600}

/* reading progress, under the sticky header */
.sx-progress{position:fixed;top:var(--head);left:0;right:0;z-index:19;height:2px;pointer-events:none}
.sx-progress span{display:block;height:100%;background:var(--citron);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* hero */
.sx-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:var(--s8);align-items:center;padding-block:var(--s9) var(--s8)}
/* hero band (Ben, 2026-10-17): brand-only dark gradient with a soft citron glow behind the title, full bleed.
   Brightest point is about #262f15; muted text measures 6.3:1 there, so every hero pair stays AA. */
.sx-hero{position:relative;isolation:isolate;--muted:#c3c9c4;--bar-dim:#8a9288}
.sx-hero::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);pointer-events:none;
  background:radial-gradient(ellipse 42% 60% at 26% 38%,rgba(223,255,0,.12),rgba(223,255,0,.04) 50%,transparent 75%),
  linear-gradient(125deg,#213319 0%,#18261a 40%,#0f1712 75%,var(--ink) 100%);border-bottom:1px solid #2f3f27}
.sx-hero-t .sx-meta{margin-top:var(--s4)}
.sx-hero-t .sx-lead{margin-top:var(--s5)}
.sx-sum{max-width:64ch}
.sx-sum ul{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3) var(--s4);margin-top:var(--s3)}
.sx-sum li{display:contents;font-size:var(--t-body);line-height:1.5;color:var(--body)}
.sx-sum-t{display:grid;gap:var(--s1);font-size:var(--t-body);line-height:1.5;color:var(--body);text-wrap:pretty}
.sx-sum-do{padding-left:var(--s3);border-left:2px solid var(--citron);color:var(--white)}
.sx-sum ul{row-gap:var(--s4)}
.sx-sum-n{font:500 20px/1.4 var(--display);letter-spacing:-.01em;color:var(--citron);white-space:nowrap}
.sx-sum-fix{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line-2);font-size:var(--t-body);line-height:1.5;color:var(--white);text-wrap:pretty}
.sx-hero-t .sx-cap{margin-top:var(--s4)}
.sx-ring{display:grid;gap:var(--s5);justify-items:center;text-align:center}
.sx-ring-art{position:relative;width:min(100%,280px);aspect-ratio:1}
.sx-ring svg{width:100%;height:100%;overflow:visible}
.sx-ring path{fill:none;stroke-width:9;stroke-linecap:butt}
.sx-ring .miss{stroke:var(--bar-dim)}
.sx-ring .hit{stroke:var(--citron)}
.sx-ring-n{position:absolute;inset:0;display:grid;place-items:center}
.sx-ring-n span{font:500 clamp(36px,4vw,48px)/1 var(--display);letter-spacing:-.03em;color:var(--white)}
.sx-ring-l{max-width:28ch;font-size:var(--t-body);line-height:1.45;color:var(--white)}
.sx-ring-x{max-width:32ch;margin-top:var(--s2);font-size:var(--t-cap);line-height:1.5;color:var(--muted)}
.sx-ring-x i{display:inline-block;width:10px;height:10px;margin-right:var(--s2);background:var(--citron);vertical-align:0}

/* stat row */
.sx-stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);padding-block:var(--s6);border-block:1px solid var(--line-2)}
.sx-stats li{display:grid;gap:var(--s2);align-content:start}
.sx-stat-n{font:500 clamp(30px,3vw,40px)/1 var(--display);letter-spacing:-.03em;color:var(--citron)}
.sx-stat-l{max-width:30ch;font-size:var(--t-ui);line-height:1.45;color:var(--body)}

/* body: left contents + article */
.sx-body{display:grid;grid-template-columns:var(--toc-w) minmax(0,1fr);gap:var(--s8);align-items:start}
.sx-toc{position:sticky;top:calc(var(--head) + var(--s6));padding-block:calc(var(--s8) + var(--s7)) var(--s6)}
.sx-toc ol,.sx-toc-m ol{list-style:none;margin-top:var(--s3)}
.sx-toc a,.sx-toc-m a{display:flex;gap:var(--s3);align-items:baseline;min-height:40px;padding:var(--s2) var(--s3);border-left:2px solid var(--line-2);font-size:var(--t-ui);line-height:1.35;color:var(--muted);text-decoration:none}
.sx-toc a .data,.sx-toc-m a .data{color:var(--muted)}
.sx-toc a:hover,.sx-toc-m a:hover{color:var(--white)}
.sx-toc a[aria-current="location"],.sx-toc-m a[aria-current="location"]{border-left-color:var(--citron);color:var(--white)}
.sx-toc a[aria-current="location"] .data{color:var(--citron)}
.sx-toc-m{display:none}
.sx-main{min-width:0}

/* section rhythm: the same steps in every section */
/* colour rhythm (Ben, 2026-10-17): every section is a rounded panel in the article column, so the left contents always
   sit on ink. Tones: default dark (green-tinted), tint (dark green), light (site light band, #566337 accent). Pairs measured:
   light muted 6.15:1 on cards, accent 4.82:1; tint muted 6.65:1; dark muted on cards above 7:1. */
.sx-main{padding-block:var(--s8)}
.sx-sec{position:relative;padding:var(--s7);border-radius:var(--r-panel);background:var(--sec-bg);color:var(--body);
  --sec-bg:#121915;--card-bg:#1a231d;--card-2:#212b24}
.sx-sec+.sx-sec{margin-top:var(--s5)}
.sx-sec.t-tint{background:linear-gradient(160deg,#1c2d1e 0%,#141f17 55%,#121915 100%);--card-bg:#1e2b20;--card-2:#26352a;--bar-dim:#7c837a}
.sx-sec.t-light{background:#e8eae4;--sec-bg:#e8eae4;--white:#0b100e;--body:#232a26;--muted:#4a5049;--line:#b9bfb5;--line-2:#8f968c;
  --card-bg:#dcdfd8;--card-2:#d4d8d0;--citron:#566337;--bar-dim:#6d746e;--bar-alt:#8f968c;--graphite:#cfd3cb;--ink:#e8eae4;--shadow:none}
.sx-sec.t-light ::selection{background:#0b100e;color:#e8eae4}
.sx-sec.t-light .sx-heat .h1,.sx-sec.t-light .sx-key .h1{background:#c9d3a1;color:#0b100e}
.sx-sec.t-light .sx-heat .h2,.sx-sec.t-light .sx-key .h2{background:#9aa86a;color:#0b100e}
.sx-sec.t-light .sx-more{border-color:#8f968c}
.sx-sec.t-light .sx-answer,.sx-sec.t-light .sx-tl-col li,.sx-sec.t-light .sx-cite{box-shadow:none}
.sx-sec>*+*{margin-top:var(--s6)}
.sx-sec>.sx-num{color:var(--citron)}
.sx-sec>h2{margin-top:var(--s2)}
.sx-sec>h2+.sx-p{margin-top:var(--s4)}
.sx-sec>figure+figure,.sx-sec>figure+.sx-vis,.sx-sec>.sx-vis+figure,.sx-sec>.sx-vis+.sx-vis{margin-top:var(--s7)}
.sx-sec>.sx-h3{margin-top:var(--s8)}
.sx-sec>.sx-h3+*{margin-top:var(--s5)}
.sx-sec>.sx-more{margin-top:var(--s3)}
.sx-sec>:not(.sx-more)+.sx-more{margin-top:var(--s6)}
figure>.sx-cap,.sx-vis>.sx-cap{margin-top:var(--s4)}
.sx .ticks{margin-top:0}
.sx .ticks li{font-size:var(--t-body);line-height:1.55}

/* expanders */
.sx-more{border:1px solid var(--line-2);border-radius:var(--r-card)}
.sx-more summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:52px;padding:var(--s3) var(--s5);cursor:pointer;list-style:none;font-size:var(--t-body);font-weight:500;color:var(--white)}
.sx-more summary::-webkit-details-marker{display:none}
.sx-more summary .icon{flex:none;transform:rotate(90deg);transition:transform .2s}
.sx-more[open] summary .icon{transform:rotate(-90deg)}
.sx-more summary:hover{color:var(--citron)}
.sx-more-b{display:grid;gap:var(--s5);padding:var(--s2) var(--s5) var(--s5)}
.sx-more-b>.sx-p{font-size:var(--t-body)}

/* tables inside expanders */
.sx-table .table-scroll{margin-top:var(--s3);border:0}
.sx .compare{min-width:0;width:100%}
.sx .compare th[scope="row"],.sx .compare thead td{position:static;min-width:0;background:none}
.sx .compare th,.sx .compare td{padding:var(--s3) var(--s4) var(--s3) 0;font-size:var(--t-ui);line-height:1.45}
.sx .compare thead th{font:400 var(--t-cap)/1.4 var(--data);color:var(--muted)}
.sx-steps{display:grid;gap:var(--s3);padding-left:var(--s5);font-size:var(--t-body);line-height:1.55;color:var(--body)}

/* bar chart: themes */
.sx-bars-head,.sx-heat-head,.sx-fn-head{display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline;padding-bottom:var(--s3);border-bottom:1px solid var(--line-2)}
.sx-bars ul{list-style:none}
.sx-bars li{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 128px;gap:var(--s4);align-items:center;padding-block:var(--s3);border-bottom:1px solid var(--line)}
.sx-bar-name{font-size:var(--t-ui);line-height:1.35;color:var(--white)}
.sx-bar-track{display:flex;align-items:center;gap:var(--s3);min-width:0}
.sx-bar{display:block;height:24px;width:calc(var(--w) * .78);min-width:3px;border-radius:3px;background:var(--citron);transform-origin:0 50%}
.sx-bar.z{min-width:0}
.sx-bar-v{color:var(--white);white-space:nowrap}
.sx-bar-tag{font:400 var(--t-cap)/1.3 var(--data);color:var(--muted);text-align:right}
.sx-bars-total{display:flex;justify-content:space-between;padding-top:var(--s3);font-size:var(--t-ui);font-weight:500;color:var(--white)}

/* heatmap: questions x engines */
.sx-heat .table-scroll{margin-top:0;border:0}
.sx-heat table{table-layout:fixed}
.sx-heat th,.sx-heat td{padding:var(--s2);border-bottom:2px solid var(--ink)}
.sx-heat thead th{font:400 var(--t-cap)/1.3 var(--data);color:var(--muted);text-align:center}
.sx-heat thead td{width:44%}
.sx-heat tbody th{padding-left:0;font-size:var(--t-ui);font-weight:400;line-height:1.35;color:var(--white)}
.sx-heat td{text-align:center;vertical-align:middle;border-left:2px solid var(--ink)}
.sx-heat td .data{color:inherit}
.sx-heat .h0,.sx-key .h0{background:var(--card-bg);color:var(--muted)}
.sx-heat .h1,.sx-key .h1{background:#3b4429;color:var(--white)}
.sx-heat .h2,.sx-key .h2{background:#77825a;color:var(--ink)}
.sx-heat .h3,.sx-key .h3{background:var(--citron);color:var(--ink)}
.sx-key{display:flex;gap:var(--s3);font:400 var(--t-cap)/1 var(--data);color:var(--muted)}
.sx-key span{display:inline-flex;gap:var(--s1);align-items:center}
.sx-key i{display:inline-block;width:14px;height:14px;border-radius:2px}

/* who gets cited */
.sx-cites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.sx-cites>.sx-cap{grid-column:1/-1;margin-top:var(--s2)}
.sx-cite{padding:var(--s5);border-radius:var(--r-card);background:var(--card-bg)}
.sx-cite ol{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s4)}
.sx-cite li{display:grid;grid-template-columns:minmax(0,1fr) 3ch;gap:var(--s1) var(--s3);align-items:center}
.sx-cite-d{font-size:var(--t-cap);line-height:1.3;color:var(--body);overflow-wrap:anywhere}
.sx-cite-t{grid-column:1/2;grid-row:2}
.sx-cite li>.data{grid-row:1/3;grid-column:2;align-self:center;text-align:right;color:var(--white)}
.sx-cite .sx-bar{height:8px;width:var(--w);background:var(--bar-dim)}
.sx-cite .hl .sx-cite-d{color:var(--citron);font-weight:600}
.sx-cite .hl .sx-bar{background:var(--citron)}

/* answer cards */
.sx-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.sx-answer{display:grid;gap:var(--s3);align-content:start;padding:var(--s5);border-radius:var(--r-card);background:var(--card-bg);box-shadow:var(--shadow)}
.sx-engine{display:flex;gap:var(--s2);align-items:center;font:400 var(--t-cap)/1 var(--data);color:var(--muted)}
.sx-dot{width:8px;height:8px;border-radius:50%;background:var(--citron)}
.sx-q{justify-self:start;padding:var(--s1) var(--s3);border:1px solid var(--line-2);border-radius:999px;font-size:var(--t-cap);line-height:1.4;color:var(--body)}
.sx-answer blockquote p{font-size:var(--t-body);line-height:1.5;color:var(--white)}

/* chat */
.sx-chat{display:grid;gap:var(--s3);max-width:560px;padding:var(--s5);border-radius:var(--r-card);background:var(--card-bg)}
.sx-msg{max-width:85%;padding:var(--s3) var(--s4);font-size:var(--t-body);line-height:1.45}
.sx-msg.you{justify-self:end;border-radius:16px 16px 4px 16px;background:var(--graphite);color:var(--white)}
.sx-msg.bot{justify-self:start;display:grid;gap:var(--s2);border-radius:16px 16px 16px 4px;background:var(--card-2);color:var(--white);border:1px solid var(--line-2)}

/* name split */
.sx-split-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
.sx-split-c{display:grid;gap:var(--s4);align-content:start;padding:var(--s5);border-radius:var(--r-card);background:var(--card-bg)}
.sx-split-c h4 .data{display:block;margin-top:var(--s1);font-weight:400;color:var(--muted)}
.sx-pair{display:grid;gap:var(--s2)}
.sx-pair-h{font:400 var(--t-cap)/1.3 var(--data);color:var(--muted)}
.sx-pr{display:grid;grid-template-columns:118px minmax(0,1fr) 28px;gap:var(--s2);align-items:center;font-size:var(--t-cap);line-height:1.3;color:var(--body)}
.sx-pr .data{text-align:right;color:var(--white)}
.sx-pr .sx-bar{height:12px;width:var(--w)}
.sx-pr.p .sx-bar{background:var(--bar-alt)}

/* redirect flow */
.sx-flow{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.sx-flow li{padding:var(--s3) var(--s4);border:1px solid var(--line-2);border-radius:var(--r-input);color:var(--white)}
.sx-flow li.arr{display:flex;align-items:center;gap:var(--s2);padding:0;border:0;color:var(--muted)}
.sx-flow li.arr svg{width:28px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.sx-flow li.err{border-color:var(--citron);color:var(--citron);font-weight:600}
.sx-flow li.err .data{font-size:var(--t-body)}

/* live screenshots */
.sx-shots{display:grid;gap:var(--s6)}
.sx-shot-f{overflow:hidden;border-radius:var(--r-card);border:1px solid var(--line-2);background:#fff}
.sx-shot-f::before{content:"";display:block;height:28px;background:radial-gradient(circle,#6d746e 3.5px,transparent 4px) 8px 50%/16px 16px no-repeat,radial-gradient(circle,#6d746e 3.5px,transparent 4px) 24px 50%/16px 16px no-repeat,radial-gradient(circle,#6d746e 3.5px,transparent 4px) 40px 50%/16px 16px no-repeat,var(--graphite);box-shadow:inset 0 -1px 0 var(--line-2)}
.sx-shot img{width:100%;height:auto}

/* count tiles */
.sx-tiles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.sx-tiles li{display:grid;gap:var(--s2);align-content:start;padding:var(--s5);border-radius:var(--r-card);background:var(--card-bg)}
.sx-tile-n{font:500 44px/1 var(--display);letter-spacing:-.03em;color:var(--citron)}
.sx-tile-l{font-size:var(--t-ui);line-height:1.45;color:var(--body);text-wrap:pretty}

/* funnel */
.sx-funnel ol{list-style:none;margin-top:var(--s3)}
.sx-funnel li{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:var(--s4);align-items:center}
.sx-fn-bar{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline;width:var(--f);min-width:min(100%,220px);padding:var(--s3) var(--s4);border-left:3px solid var(--citron);border-radius:0 var(--r-input) var(--r-input) 0;background:var(--card-2);transform-origin:0 50%}
.sx-fn-v{font:500 24px/1.1 var(--display);letter-spacing:-.02em;color:var(--white)}
.sx-fn-l{font-size:var(--t-ui);color:var(--body)}
.sx-fn-alt{text-align:right;color:var(--muted)}
.sx-funnel li.sx-fn-step{display:block;padding:var(--s2) 0 var(--s2) var(--s5);font:400 var(--t-cap)/1.3 var(--data);color:var(--muted)}
.sx-funnel li.sx-fn-step span::before{content:"↓";margin-right:var(--s2);color:var(--citron)}

/* line chart */
.sx-line svg{display:block;width:100%;height:auto;margin-top:var(--s4);overflow:visible}
.sx-line .ln-m{display:none}
.sx-line .ln-m text{font-size:14px}
.sx-line .grid line{stroke:var(--line-2);stroke-width:1}
.sx-line text{font:400 11px var(--data);fill:var(--muted)}
@media (max-width:1199px){.sx-line text{font-size:14px}}
.sx-line polyline{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1}
.sx-line polyline.s0{stroke:var(--citron)}
.sx-line polyline.s1{stroke:var(--bar-alt)}
.sx-line circle.s0{fill:var(--citron)}
.sx-line circle.s1{fill:var(--bar-alt)}
.sx-line text.end{fill:var(--white)}
.sx-legend{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin-top:var(--s4)}
.sx-legend li{display:flex;gap:var(--s2);align-items:center;font-size:var(--t-ui);color:var(--white)}
.sx-legend li .data{color:var(--body)}
.sx-legend i{width:16px;height:3px;border-radius:2px}
.sx-legend .s0 i{background:var(--citron)}
.sx-legend .s1 i{background:var(--bar-alt)}

/* 90-day timeline */
.sx-tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.sx-tl-col{display:grid;gap:var(--s2);align-content:start}
.sx-tl-h{color:var(--citron)}
.sx-tl-col>h3{margin-bottom:var(--s3)}
.sx-tl-col ol{list-style:none;display:grid;gap:var(--s3)}
.sx-tl-col li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s1) var(--s3);padding:var(--s4);border-radius:var(--r-card);background:var(--card-bg)}
.sx-step-i{grid-row:1/4;color:var(--citron)}
.sx-step-i .icon{width:24px;height:24px}
.sx-step-n{color:var(--muted)}
.sx-tl-col li h4{font-size:var(--t-h4)}
.sx-tl-col li p:last-child{font-size:var(--t-cap);line-height:1.45;color:var(--body)}

/* closing block */
.sx-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:var(--s7);align-items:center;margin-block:var(--s5) 0;padding:var(--s7);border-radius:var(--r-panel);background:radial-gradient(ellipse 60% 90% at 85% 10%,rgba(223,255,0,.10),transparent 70%),linear-gradient(135deg,#3b4524 0%,#2c3519 100%);--muted:#c3c9c4;--body:#dde0da;box-shadow:var(--shadow)}
.sx-cta h2+.sx-p{margin-top:var(--s4)}
.sx-cta .actions{margin-top:var(--s6)}
.sx-chips{list-style:none;display:grid;gap:var(--s2)}
.sx-chips li{display:flex;gap:var(--s3);align-items:center;padding-block:var(--s2);font-size:var(--t-ui);color:var(--white)}
.sx-chips .icon{width:20px;height:20px;color:var(--citron)}

/* engine rings (hero, Stacks): one ring per engine, a segment per answer */
.sx-rings{display:grid;gap:var(--s5)}
.sx-rings ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.sx-rings li{display:grid;justify-items:center;text-align:center;gap:var(--s1)}
.sx-rings .sx-ring-art{width:100%}
.sx-rings svg{width:100%;height:100%;overflow:visible}
.sx-rings path{fill:none;stroke-width:9}
.sx-rings .miss{stroke:var(--bar-dim)}
.sx-rings .hit,.sx-rings .cite{stroke:var(--citron)}
.sx-rings .sx-ring-n span{font-size:32px}
.sx-rings-e{margin-top:var(--s2);font-size:var(--t-ui);line-height:1.3;color:var(--white)}
.sx-rings-c{color:var(--citron)}
.sx-rings .sx-ring-l,.sx-rings .sx-ring-x{max-width:none}
.sx-rings .sx-ring-x{margin-top:0}

/* chart heads that span a grid */
.sx-cites>figcaption{grid-column:1/-1}
.sx-cites.c4{grid-template-columns:repeat(2,minmax(0,1fr))}

/* an AI Overview, drawn from the stored answer */
.sx-aio-card{display:grid;gap:var(--s4);padding:var(--s5);border-radius:var(--r-card);background:var(--card-bg);box-shadow:var(--shadow)}
.sx-aio .sx-q{justify-self:start}
.sx-aio-row{display:grid;grid-template-columns:minmax(0,1fr) 176px;gap:var(--s5);align-items:start}
.sx-aio blockquote p{font-size:var(--t-body);line-height:1.55;color:var(--white)}
.sx-aio mark{padding:0 var(--s1);border-radius:3px;background:var(--graphite);color:var(--white)}
.sx-aio-cite{display:inline-block;margin-left:var(--s1);padding:0 var(--s2);border:1px solid var(--citron);border-radius:999px;color:var(--citron);font-weight:600;line-height:1.6}
.sx-aio-tag{padding-left:var(--s3);border-left:2px solid var(--line-2);font:400 var(--t-cap)/1.4 var(--data);color:var(--muted)}
.sx-aio-tag.cite{border-color:var(--citron);color:var(--citron)}
.sx-aio-src{padding-top:var(--s4);border-top:1px solid var(--line)}
.sx-aio-src ul,.sx-means-g ul,.sx-dead ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.sx-aio-src li{padding:var(--s1) var(--s3);border:1px solid var(--line-2);border-radius:999px;font:400 var(--t-cap)/1.4 var(--data);color:var(--body)}
.sx-aio-src li.hl{border-color:var(--citron);color:var(--citron);font-weight:600}

/* what a search engine thinks the brand means */
.sx-means-b{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:start;margin-top:var(--s4);padding:var(--s5);border-radius:var(--r-card);background:var(--card-bg)}
.sx-means-w{align-self:center;font:500 clamp(36px,4vw,52px)/1 var(--display);letter-spacing:-.03em;color:var(--white)}
.sx-means-g ul{display:grid}
.sx-means-g li{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s3);border:1px solid var(--line-2);border-radius:var(--r-input);font-size:var(--t-ui);line-height:1.35;color:var(--body)}
.sx-means-g li .data{color:var(--muted)}
.sx-means-g.on li{border-color:var(--citron);color:var(--white)}
.sx-means-g.on li .data{color:var(--citron)}

/* broken internal links */
.sx-dead ul{flex-direction:column;align-items:flex-start}
.sx-dead li{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border:1px solid var(--line-2);border-radius:var(--r-input);color:var(--white)}
.sx-dead-c{padding:0 var(--s2);border:1px solid var(--citron);border-radius:var(--r-input);color:var(--citron);font-weight:600}

/* study hero chart (research article): one bar per engine, headline engine in citron */
.sx-hb{display:grid;gap:var(--s4)}
.sx-hb ul{list-style:none;display:grid;gap:var(--s3)}
.sx-hb li{display:grid;grid-template-columns:96px minmax(0,1fr) 56px;gap:var(--s3);align-items:center}
.sx-hb-n{font-size:var(--t-ui);color:var(--white)}
.sx-hb .sx-bar{height:28px;width:var(--w);background:var(--bar-dim)}
.sx-hb li.hl .sx-bar{background:var(--citron)}
.sx-hb li.hl .sx-hb-v{color:var(--citron);font-weight:600}
.sx-hb-v{text-align:right;color:var(--white)}
.sx-links{display:flex;flex-wrap:wrap;gap:var(--s4)}

/* motion: marks replay once as they scroll in; resting state is the full chart */
@media (prefers-reduced-motion:no-preference){
  .js .sx-anim.pre .sx-bar,.js .sx-anim.pre .sx-fn-bar{transform:scaleX(0)}
  .js .sx-anim.pre polyline{stroke-dashoffset:1}
  .js .sx-anim.in .sx-bar,.js .sx-anim.in .sx-fn-bar{transform:none;transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 60ms)}
  .js .sx-anim.in polyline{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1)}
  .js .sx-ring path,.js .sx-rings path{animation:sx-seg .5s both calc(var(--i) * 45ms)}
}
@keyframes sx-seg{from{opacity:0}}

/* collapse late: contents become a sticky dropdown under the header */
@media (max-width:999px){
  .sx-hero::before{background:radial-gradient(ellipse 90% 40% at 30% 22%,rgba(223,255,0,.12),rgba(223,255,0,.04) 50%,transparent 75%),linear-gradient(160deg,#213319 0%,#18261a 45%,#0f1712 80%,var(--ink) 100%)}
  .sx-body{grid-template-columns:minmax(0,1fr);gap:0}
  .sx-toc{display:none}
  .sx-toc-m{display:block;position:sticky;top:var(--head);z-index:15;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);background:var(--ink);border-bottom:1px solid var(--line-2)}
  .sx-toc-m summary{display:flex;align-items:center;gap:var(--s2);min-height:52px;cursor:pointer;list-style:none;font-size:var(--t-ui);font-weight:500;color:var(--white)}
  .sx-toc-m summary::-webkit-details-marker{display:none}
  .sx-toc-m summary .icon{margin-left:auto;transform:rotate(90deg);transition:transform .2s}
  .sx-toc-m[open] summary .icon{transform:rotate(-90deg)}
  .sx-toc-cur{color:var(--citron);font-weight:400}
  .sx-toc-cur:not(:empty)::before{content:"· ";color:var(--muted)}
  .sx-toc-m ol{margin:0 0 var(--s3)}
  .sx-hero{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .sx-ring{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;text-align:left;gap:var(--s5)}
  .sx-ring-art{width:148px}
  .sx-ring-n span{font-size:28px}
  .sx-answers,.sx-split-g,.sx-cites,.sx-tl{grid-template-columns:minmax(0,1fr)}
  .sx-rings ul{max-width:420px}
  .sx-means-b{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sx-means-w{grid-column:1/-1}
  .sx-cta{grid-template-columns:minmax(0,1fr);padding:var(--s6)}
}
@media (max-width:767px){
  .sx-hero{padding-block:var(--s8) var(--s7)}
  .sx-stats{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .sx-bars li{grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s3)}
  .sx-bar-name{grid-column:1;grid-row:1}
  .sx-bar-tag{grid-column:2;grid-row:1}
  .sx-bar-track{grid-column:1/-1;grid-row:2}
  .sx-bar{width:calc(var(--w) * .66)}
  .sx-tiles{grid-template-columns:minmax(0,1fr)}
  .sx-aio-row{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .sx-means-b{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .sx-tiles li{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s4)}
  .sx-tile-n{min-width:2ch}
  .sx-funnel li{grid-template-columns:minmax(0,1fr) 64px;gap:var(--s3)}
  .sx-fn-v{font-size:20px}
  .sx-flow{flex-direction:column;align-items:flex-start}
  .sx-flow li.arr svg{transform:rotate(90deg)}
  .sx-line .ln-d{display:none}
  .sx-line .ln-m{display:block}
  .sx-legend{display:grid;gap:var(--s3)}
  .sx-legend li{display:grid;grid-template-columns:16px auto;gap:var(--s1) var(--s2)}
  .sx-legend li .data{grid-column:2}
  /* heatmap: each question on its own line above its three cells */
  .sx-heat table,.sx-heat tbody{display:block}
  .sx-heat thead{display:block}
  .sx-heat thead tr,.sx-heat tbody tr{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
  .sx-heat thead td{display:none}
  .sx-heat tbody th{grid-column:1/-1;padding:var(--s3) 0 var(--s2)}
  .sx-heat td{border-left:0;border-right:2px solid var(--ink)}
  .sx-heat td:last-child{border-right:0}
  .sx-more summary{padding-inline:var(--s4)}
  .sx-more-b{padding-inline:var(--s4)}
  .sx-msg{max-width:92%}
  .sx-cta{padding:var(--s5);margin-inline:0}
  .sx-sec{padding:var(--s6) var(--s4)}
  .sx-main{padding-block:var(--s6)}
  /* expander tables stack into cards */
  .sx .table-scroll:not(.compact-wrap){overflow:visible}
  .sx .compare:not(.compact),.sx .compare:not(.compact) tbody,.sx .compare:not(.compact) tr,.sx .compare:not(.compact) th,.sx .compare:not(.compact) td{display:block}
  .sx .compare:not(.compact) thead{display:none}
  .sx .compare:not(.compact) tr{padding:var(--s3) 0;border-bottom:1px solid var(--line-2)}
  .sx .compare:not(.compact) th,.sx .compare:not(.compact) td{padding:var(--s1) 0;border:0}
  .sx .compare:not(.compact) th[scope="row"]{font-weight:600;color:var(--white)}
  .sx .compare:not(.compact) td::before{content:attr(data-l);display:block;font:400 14px/1.4 var(--data);color:var(--muted)}
  .sx .compact th,.sx .compact td{padding:var(--s2) var(--s2) var(--s2) 0;font-size:var(--t-cap)}
}
@media print{.sx-progress,.sx-toc,.sx-toc-m{display:none}.sx-body{grid-template-columns:1fr}}