/* temprhq.io v2: the "govern every AI tool" site. Every page sets <html data-theme="control"
   data-label="blue">: dark "control room" product sections, warm paper for the argument, blue
   labels. The warm, swiss and blueprint themes and the other label sets are the alternatives
   compared during the redesign, kept as token blocks only. The logo's orange is for actions and
   fills (buttons, bars, ticks), never text. Everything is driven by the tokens below. */

/* ------------------------------------------------------------------ fonts: Geist and Geist Mono, self-hosted
   (SIL Open Font License, assets/fonts/Geist-OFL.txt), so no page sends visitors to a font CDN */
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ tokens */
:root,[data-theme="control"]{
  /* "deep" surfaces: header, hero, pillars, trust, team card, final, footer */
  --deep:#0a0f1a; --deep-2:#0f1726; --deep-foot:#070b13;
  --deep-text:#ffffff; --deep-strong:#fff; --deep-muted:#b4c0d1; --deep-faint:#7d8ba1;
  --deep-line:rgba(148,163,184,.16); --deep-line-2:rgba(148,163,184,.26); --deep-chip:rgba(148,163,184,.06);
  --glow-a:rgba(242,106,27,.2); --glow-b:rgba(109,40,217,.28); --grid:rgba(148,163,184,.06);
  /* "plain" surfaces: questions, how, agents, rollout, faq */
  /* white paper, with a cool light grey for the alternating sections */
  --plain:#ffffff; --plain-2:#f7f8fa; --plain-line:#e4e7ec;
  --text:#0b1220; --muted:#566070; --faint:#8a93a2;
  /* panels (ledger, product panels) */
  --panel:linear-gradient(180deg,rgba(22,32,54,.95),rgba(12,18,31,.97)); --panel-line:rgba(148,163,184,.26);
  --panel-text:#f8fafc; --panel-strong:#fff; --panel-muted:#8a98ad; --panel-row:rgba(148,163,184,.1);
  --panel-inset:#0a101c; --panel-inset-line:#233046; --panel-shadow:0 40px 100px rgba(0,0,0,.5);
  --code:#0a0f1a; --code-bar:#0d1422; --code-text:#d7dee8; --code-line:#1e293b;
  /* emphasis */
  --label-deep:#c4b5fd; --label-plain:#6d28d9;
  --hl:linear-gradient(96deg,#e9d5ff 0%,#c4b5fd 40%,#a78bfa 100%);
  --mono-chip:#c4b5fd;
  /* action and fill: the logo's orange */
  /* the call to action: the logo's orange, lit from above; dark text keeps it at AA contrast */
  /* the call to action: ink on white sections; on dark ones it turns white (see .btn-cta below) */
  --cta:#0b1220; --cta-hover:#232c3d; --cta-text:#fff; --cta-shadow:0 1px 2px rgba(15,23,42,.18);
  --fill:linear-gradient(96deg,#fdb32d 0%,#f9702a 45%,#ef3d22 92%);
  --plain-cta:#0b1220; --plain-cta-text:#fff;
  /* status */
  --ok:#4ade80; --warn:#fbbf24; --block:#fb7185; --info:#67e8f9; --tag-bg:8%;
  /* type */
  --head:"Geist",ui-sans-serif,system-ui,sans-serif; --head-weight:800; --head-track:-.035em;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --radius:14px; --radius-lg:18px; --wrap:1180px;
}
[data-theme="warm"]{
  --deep:#f2e9da; --deep-2:#ebe0cd; --deep-foot:#e6d9c3;
  --deep-text:#2a2219; --deep-strong:#1c1611; --deep-muted:#6b5f50; --deep-faint:#93856f;
  --deep-line:rgba(120,96,64,.18); --deep-line-2:rgba(120,96,64,.28); --deep-chip:rgba(255,253,248,.7);
  --glow-a:rgba(242,106,27,.14); --glow-b:rgba(15,118,110,.12); --grid:rgba(120,96,64,.07);
  --plain:#fbf7f0; --plain-2:#fffdf9; --plain-line:#e8dfcf;
  --text:#1c1611; --muted:#6b5f50; --faint:#a0917a;
  /* dark panels on the warm page: the product, set apart from the argument */
  --panel:linear-gradient(180deg,#221c16,#17130f); --panel-line:rgba(255,236,210,.14); --panel-text:#d9cfc1; --panel-strong:#fffaf2; --panel-muted:#8f8272; --panel-row:rgba(255,236,210,.08);
  --panel-inset:#120f0b; --panel-inset-line:#3a3027; --panel-shadow:0 34px 80px rgba(60,40,20,.28);
  --code:#2a2219; --code-bar:#231c14; --code-text:#f1e8da; --code-line:#3b3126;
  --label-deep:#0f766e; --label-plain:#0f766e;
  --hl:linear-gradient(90deg,#0f766e,#0f766e);
  --mono-chip:#5eead4;
  --plain-cta:#1c1611; --plain-cta-text:#fffdf9;
  --ok:#4ade80; --warn:#fbbf24; --block:#fb7185; --info:#7dd3fc; --tag-bg:9%;
  --head:"Fraunces",Georgia,serif; --head-weight:600; --head-track:-.02em;
  --radius:16px; --radius-lg:22px;
}
[data-theme="swiss"]{
  --deep:#0b0b0b; --deep-2:#141414; --deep-foot:#000;
  --deep-text:#f2f2f2; --deep-strong:#fff; --deep-muted:#a3a3a3; --deep-faint:#737373;
  --deep-line:rgba(255,255,255,.14); --deep-line-2:rgba(255,255,255,.24); --deep-chip:transparent;
  --glow-a:transparent; --glow-b:transparent; --grid:transparent;
  --plain:#ffffff; --plain-2:#f5f5f5; --plain-line:#0b0b0b;
  --text:#0b0b0b; --muted:#525252; --faint:#8a8a8a;
  --panel:#0b0b0b; --panel-line:rgba(255,255,255,.22); --panel-text:#d4d4d4; --panel-strong:#fff; --panel-muted:#8a8a8a; --panel-row:rgba(255,255,255,.12);
  --panel-inset:#000; --panel-inset-line:#333; --panel-shadow:none;
  --code:#0b0b0b; --code-bar:#000; --code-text:#e5e5e5; --code-line:#262626;
  --label-deep:#7b8fff; --label-plain:#2343ff;
  --hl:linear-gradient(90deg,#7b8fff,#7b8fff);
  --mono-chip:#9aaaff;
  --cta:#2343ff; --cta-text:#fff; --cta-shadow:none;
  --fill:#2343ff;
  --plain-cta:#0b0b0b; --plain-cta-text:#fff;
  --ok:#4ade80; --warn:#facc15; --block:#f87171; --info:#93c5fd; --tag-bg:10%;
  --head:"Geist",ui-sans-serif,system-ui,sans-serif; --head-weight:700; --head-track:-.05em;
  --radius:4px; --radius-lg:6px;
}
[data-theme="blueprint"]{
  --deep:#0b1f44; --deep-2:#0d2550; --deep-foot:#081732;
  --deep-text:#e3ecff; --deep-strong:#fff; --deep-muted:#9fb3d9; --deep-faint:#7088b8;
  --deep-line:rgba(147,197,253,.18); --deep-line-2:rgba(147,197,253,.3); --deep-chip:rgba(147,197,253,.06);
  --glow-a:rgba(34,211,238,.12); --glow-b:rgba(59,130,246,.22); --grid:rgba(147,197,253,.1);
  --plain:#eef3fb; --plain-2:#f8fbff; --plain-line:#d3def0;
  --text:#0b1f44; --muted:#4a5f84; --faint:#8798b8;
  --panel:linear-gradient(180deg,#10295a,#0b1f44); --panel-line:rgba(147,197,253,.3); --panel-text:#c7d6f2; --panel-strong:#fff; --panel-muted:#7088b8; --panel-row:rgba(147,197,253,.1);
  --panel-inset:#081732; --panel-inset-line:#1f3d74; --panel-shadow:0 30px 80px rgba(3,10,30,.5);
  --code:#081732; --code-bar:#06122a; --code-text:#d6e2f8; --code-line:#1a3364;
  --label-deep:#67e8f9; --label-plain:#1d4ed8;
  --hl:linear-gradient(96deg,#a5f3fc 0%,#67e8f9 40%,#60a5fa 100%);
  --mono-chip:#67e8f9;
  --plain-cta:#0b1f44; --plain-cta-text:#fff;
  --ok:#4ade80; --warn:#fbbf24; --block:#fb7185; --info:#67e8f9; --tag-bg:9%;
  --radius:8px; --radius-lg:12px;
}

/* ------------------------------------------------------------------ label colours (compare, Control room) */
/* bright: text on the dark sections and panels; deep: text on the paper sections */
[data-label="mint"]{--label-deep:#5eead4;--label-plain:#0f766e;--mono-chip:#5eead4;--hl:linear-gradient(96deg,#ccfbf1 0%,#99f6e4 40%,#5eead4 100%)}
[data-label="aqua"]{--label-deep:#67e8f9;--label-plain:#0e7490;--mono-chip:#67e8f9;--hl:linear-gradient(96deg,#cffafe 0%,#a5f3fc 40%,#67e8f9 100%)}
[data-label="blue"]{--label-deep:#93c5fd;--label-plain:#1d4ed8;--mono-chip:#93c5fd;--hl:linear-gradient(96deg,#dbeafe 0%,#bfdbfe 40%,#93c5fd 100%)}
[data-label="lime"]{--label-deep:#bef264;--label-plain:#4d7c0f;--mono-chip:#bef264;--hl:linear-gradient(96deg,#ecfccb 0%,#d9f99d 40%,#bef264 100%)}
[data-label="sand"]{--label-deep:#e8d5b0;--label-plain:#8a6a35;--mono-chip:#e8d5b0;--hl:linear-gradient(96deg,#faf3e3 0%,#f0e2c4 40%,#e8d5b0 100%)}
[data-label="silver"]{--label-deep:#cbd5e1;--label-plain:#334155;--mono-chip:#e2e8f0;--hl:linear-gradient(96deg,#ffffff 0%,#e2e8f0 50%,#94a3b8 100%)}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* a link to #anchor lands below the sticky header, not under it */
[id]{scroll-margin-top:84px}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--plain);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
code,kbd,pre{font-family:var(--mono)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:100;background:#fff;padding:8px 12px;border-radius:8px}
h1,h2,h3{font-family:var(--head);font-weight:var(--head-weight);letter-spacing:var(--head-track);line-height:1.06;margin:0}
h3{letter-spacing:calc(var(--head-track) * .6)}
h2{font-size:clamp(2rem,4vw,3.1rem)}
section{padding:110px 0}
.section-head{max-width:780px;margin-bottom:56px}
.lede{font-size:1.15rem;color:var(--muted);max-width:640px;margin:18px 0 0}
.hot{background:var(--hl);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 .78rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--label-plain)}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}
.deep{background:var(--deep);color:var(--deep-text)}
.deep .eyebrow{color:var(--label-deep)}
.deep h1,.deep h2,.deep h3{color:var(--deep-strong)}
.deep .lede{color:var(--deep-muted)}

/* ------------------------------------------------------------------ header */
.v2-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--deep) 96%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--deep-line);color:var(--deep-text)}
.v2-header .wrap{display:flex;align-items:center;gap:28px;height:66px}
.brand img{height:30px;width:auto}
.logo-light{display:none!important}
[data-theme="warm"] .logo-dark{display:none!important}
[data-theme="warm"] .logo-light{display:block!important}
.v2-nav{display:flex;align-items:center;gap:4px;flex:1}
.v2-nav > a,.v2-nav .menu > button{font:500 .93rem var(--sans);color:var(--deep-text);text-decoration:none;padding:8px 12px;border-radius:9px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.v2-nav > a:hover,.v2-nav .menu > button:hover,.v2-nav .menu.open > button{color:var(--deep-strong);background:var(--deep-chip)}
.v2-nav .menu{position:relative}
/* menus: a panel per button; js/v2.js opens it on hover (with a short grace period on the way
   out) or click. The panel's ::before bridges the gap below the button, so moving the pointer
   from the button to the panel never leaves the menu. */
.menu-panel{position:absolute;top:calc(100% + 10px);left:-10px;z-index:60;min-width:400px;padding:10px;border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--deep-2) 94%,#fff),var(--deep-2) 60%);border:1px solid var(--deep-line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.menu-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.menu.open .menu-panel{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
.menu-panel.wide{min-width:620px}
.mp-label{font:600 .68rem var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--deep-faint);padding:6px 12px 8px}
.mp-items{display:grid;gap:2px}
.mp-items.two{grid-template-columns:1fr 1fr;gap:4px}
.mp-items > a{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start;padding:11px 12px;border-radius:12px;text-decoration:none;transition:background .14s ease}
.mp-items > a:hover,.mp-items > a:focus-visible{background:rgba(255,255,255,.055);outline:none}
.mp-items > a[aria-current="page"]{background:rgba(255,255,255,.07)}
.mi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--label-deep) 12%,transparent);border:1px solid color-mix(in srgb,var(--label-deep) 22%,transparent);color:var(--label-deep);transition:background .14s ease,border-color .14s ease}
.mi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mp-items > a:hover .mi,.mp-items > a:focus-visible .mi,.mp-items > a[aria-current="page"] .mi{background:color-mix(in srgb,var(--label-deep) 22%,transparent);border-color:color-mix(in srgb,var(--label-deep) 48%,transparent)}
.mt{display:block;min-width:0;padding-top:1px}
.mt strong{display:flex;align-items:center;gap:6px;font:600 .95rem/1.3 var(--sans);color:var(--deep-strong)}
.mt strong::after{content:"\2192";color:var(--label-deep);opacity:0;transform:translateX(-4px);transition:opacity .14s ease,transform .14s ease}
.mp-items > a:hover .mt strong::after,.mp-items > a:focus-visible .mt strong::after{opacity:1;transform:none}
.mt > span{display:block;margin-top:3px;font-size:.84rem;line-height:1.45;color:var(--deep-muted)}
.mp-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 2px 0;padding:12px 10px 4px;border-top:1px solid var(--deep-line);font-size:.84rem;color:var(--deep-muted)}
.mp-foot > span{margin-right:4px}
.mp-foot a{display:inline-flex;align-items:center;gap:6px;color:var(--deep-text);text-decoration:none;padding:5px 11px;border-radius:8px;border:1px solid var(--deep-line-2);background:rgba(255,255,255,.03);font-weight:500;transition:border-color .14s ease,background .14s ease}
.mp-foot a:hover,.mp-foot a[aria-current="page"]{border-color:color-mix(in srgb,var(--label-deep) 55%,transparent);background:rgba(255,255,255,.06);color:var(--deep-strong)}
.mp-foot em{font:600 .6rem var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--label-deep)}
.mp-foot a.mp-cta{margin-left:auto;border:0;background:none;color:var(--label-deep);padding:5px 4px;font-weight:600}
.mp-foot a.mp-cta:hover{background:none;text-decoration:underline;text-underline-offset:3px}
.v2-nav .menu > button::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.v2-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;white-space:nowrap}
.link-deep{color:var(--deep-text);text-decoration:none;font-weight:500;font-size:.93rem}
.link-deep:hover{color:var(--deep-strong)}
/* seven nav items: a little tighter between the phone menu and a wide screen */
@media (min-width:921px) and (max-width:1100px){.v2-header .wrap{gap:18px}.v2-nav > a,.v2-nav .menu > button{padding:8px 9px}}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--deep-line-2);color:var(--deep-strong);border-radius:10px;width:42px;height:40px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto;border-radius:2px}

/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .95rem/1.2 var(--sans);letter-spacing:-.005em;padding:11px 18px;border-radius:calc(var(--radius) - 3px);text-decoration:none;border:1px solid transparent;background-origin:border-box;cursor:pointer;white-space:nowrap;transition:transform .12s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--label-plain);outline-offset:3px}
.deep .btn:focus-visible,.v2-header .btn:focus-visible{outline-color:var(--label-deep)}
:is(.deep,.v2-header,.legacy .hero){--cta:#fff;--cta-hover:#e8ecf2;--cta-text:#0b1220;--cta-shadow:0 1px 2px rgba(0,0,0,.3)}
.btn-cta{background:var(--cta);color:var(--cta-text);box-shadow:var(--cta-shadow)}
.btn-cta:hover{background:var(--cta-hover,var(--cta))}
.btn-cta:active{background:var(--cta-hover,var(--cta));box-shadow:none}
.btn-ghost{color:var(--deep-strong);border-color:rgba(148,163,184,.28);background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(148,163,184,.46)}
.btn-plain{background:var(--plain-cta);color:var(--plain-cta-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(5,10,20,.2)}
.btn-line{border-color:var(--plain-line);color:var(--text);background:color-mix(in srgb,var(--plain-2) 70%,transparent)}
.btn-line:hover{border-color:color-mix(in srgb,var(--text) 35%,transparent);background:var(--plain-2)}
/* on navy the outline button keeps a dark ground: its light hover would wash out the white label */
:is(.deep,.v2-header,.legacy .hero) .btn-line{border-color:var(--deep-line-2);color:var(--deep-strong);background:rgba(255,255,255,.04)}
:is(.deep,.v2-header,.legacy .hero) .btn-line:hover{border-color:rgba(148,163,184,.46);color:var(--deep-strong);background:rgba(255,255,255,.1)}
.btn-sm{padding:8px 15px;font-size:.88rem;border-radius:10px}
[data-theme="swiss"] .btn-ghost{background:transparent}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;overflow:hidden;padding:84px 0 96px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(640px 420px at 88% 8%,var(--glow-a),transparent 70%),radial-gradient(700px 520px at -8% 110%,var(--glow-b),transparent 66%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(900px 600px at 50% 30%,#000 20%,transparent 80%);mask-image:radial-gradient(900px 600px at 50% 30%,#000 20%,transparent 80%)}
[data-theme="blueprint"] .hero::after{background-size:24px 24px,24px 24px;-webkit-mask-image:none;mask-image:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);margin-top:18px}
[data-theme="swiss"] .hero h1{font-size:clamp(2.8rem,6vw,5rem);line-height:.98}
.hero .lede{font-size:1.18rem;max-width:560px}
.hero .lede b{color:var(--deep-strong);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:14px;font-size:.86rem;color:var(--deep-muted)}
.works{margin-top:44px}
.works-label{font:600 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--deep-faint)}
.works-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.works-row span{font:500 .84rem var(--mono);color:var(--deep-text);padding:6px 11px;border-radius:8px;border:1px solid var(--deep-line);background:var(--deep-chip)}
[data-theme="swiss"] .works-row span{border-radius:0}

/* ledger */
.ledger{border-radius:var(--radius-lg);background:var(--panel);border:1px solid var(--panel-line);box-shadow:var(--panel-shadow);overflow:hidden}
.ledger-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--panel-row);font:500 .8rem var(--mono);color:var(--panel-muted)}
.ledger-bar b{color:var(--panel-strong);font-weight:600}
.live{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ledger-bar .spacer{flex:1}
.ledger-head,.ledger-row{display:grid;grid-template-columns:1.45fr 1.15fr 1fr;gap:12px;align-items:center;padding:0 18px}
.ledger-head{font:600 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--panel-muted);padding-top:12px;padding-bottom:8px}
.ledger-rows{position:relative;height:396px;overflow:hidden}
.ledger-row{height:66px;border-top:1px solid var(--panel-row);font-size:.84rem;color:var(--panel-text);animation:rowin .55s cubic-bezier(.2,.8,.2,1)}
@keyframes rowin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.ledger-row .tool{font-weight:600;color:var(--panel-strong);display:flex;flex-direction:column;gap:3px;min-width:0}
.ledger-row .tool small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledger-row .tool small,.ledger-row .paid small,.ledger-row .model small{font:400 .72rem var(--mono);color:var(--panel-muted)}
.ledger-row .paid{display:flex;flex-direction:column;gap:2px;font-size:.82rem}
.ledger-foot{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--panel-row);font:500 .74rem var(--mono);color:var(--panel-muted)}
.ledger-foot b{color:var(--panel-strong)}
.ledger-cap{margin:14px 4px 0;font-size:.9rem;color:var(--deep-muted);text-align:center}
.ledger-cap b{color:var(--deep-strong);font-weight:600}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 .74rem var(--mono);padding:4px 8px;border-radius:7px;border:1px solid;line-height:1.2;max-width:100%}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent);background:color-mix(in srgb,var(--ok) var(--tag-bg),transparent)}
.tag.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent);background:color-mix(in srgb,var(--warn) var(--tag-bg),transparent)}
.tag.block{color:var(--block);border-color:color-mix(in srgb,var(--block) 36%,transparent);background:color-mix(in srgb,var(--block) var(--tag-bg),transparent)}
.tag.info{color:var(--info);border-color:color-mix(in srgb,var(--info) 34%,transparent);background:color-mix(in srgb,var(--info) var(--tag-bg),transparent)}
[data-theme="swiss"] .tag{border-radius:0}

/* ------------------------------------------------------------------ questions */
.questions{background:var(--plain)}
.q-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.q-card{background:var(--plain-2);border:1px solid var(--plain-line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:16px}
[data-theme="swiss"] .q-grid{gap:40px 32px}
[data-theme="swiss"] .q-card{border-width:0;border-top:3px solid var(--text);border-radius:0;background:transparent;padding:22px 0 0}
.q-card h3{font-size:1.3rem}
.q-card .today,.q-card .tempr{display:grid;grid-template-columns:86px 1fr;gap:12px;font-size:.96rem;align-items:baseline}
.q-card .today{color:var(--muted)}
.q-card .label{font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.q-card .today .label{color:var(--faint)}
.q-card .tempr .label{color:var(--label-plain)}
.q-card .tempr{padding-top:16px;border-top:1px dashed var(--plain-line)}
[data-theme="swiss"] .q-card .tempr{border-top-color:#d4d4d4}

/* ------------------------------------------------------------------ how it works */
.how{background:var(--plain-2);border-top:1px solid var(--plain-line);border-bottom:1px solid var(--plain-line)}
[data-theme="swiss"] .how{background:var(--plain);border-color:transparent}
.steps{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:20px;align-items:stretch}
.step{border:1px solid var(--plain-line);border-radius:var(--radius);padding:26px;background:var(--plain)}
[data-theme="swiss"] .step{border:0;border-top:3px solid var(--text);border-radius:0;padding:22px 0 0;background:transparent}
.step .n{font:600 .78rem var(--mono);color:var(--label-plain)}
.step h3{font-size:1.25rem;margin:10px 0 8px}
.step p{margin:0;color:var(--muted);font-size:.95rem}
.code{margin-top:18px;border-radius:calc(var(--radius) - 2px);background:var(--code);color:var(--code-text);overflow:hidden;border:1px solid var(--code-line)}
.code-tabs{display:flex;gap:2px;padding:6px;background:var(--code-bar);border-bottom:1px solid var(--code-line)}
.code-tabs button{font:500 .78rem var(--mono);color:color-mix(in srgb,var(--code-text) 60%,transparent);background:none;border:0;padding:6px 10px;border-radius:7px;cursor:pointer}
.code-tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--code-text) 12%,transparent);color:var(--code-text)}
.code pre{margin:0;padding:16px 18px;font-size:.8rem;line-height:1.65;overflow-x:auto;white-space:pre}
.code .c{color:color-mix(in srgb,var(--code-text) 48%,transparent)}.code .k{color:var(--mono-chip)}.code .s{color:#86efac}
[data-theme="warm"] .hot{font-style:italic;font-weight:500;letter-spacing:-.01em;padding-right:.04em}
[data-theme="swiss"] .code .s{color:#e5e5e5}
.code pre[hidden]{display:none}

/* ------------------------------------------------------------------ pillars */
.pillars{background:var(--deep);color:var(--deep-text)}
.pillar{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center;padding:56px 0;border-top:1px solid var(--deep-line)}
.pillar:first-of-type{border-top:0}
.pillar.flip .p-copy{order:2}
.pillar h3{font-size:clamp(1.7rem,3vw,2.35rem);margin-top:14px}
.pillar p{color:var(--deep-muted);font-size:1.05rem;margin:16px 0 0}
.pillar ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
.pillar li{display:grid;grid-template-columns:20px 1fr;gap:10px;color:var(--deep-text);font-size:.96rem}
.pillar li::before{content:"";width:14px;height:14px;margin-top:4px;border-radius:4px;background:var(--fill);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.p-more{display:inline-block;margin-top:24px;color:var(--label-deep);font-weight:600;text-decoration:none}
.p-more:hover{text-decoration:underline}
.panel{border-radius:var(--radius);background:var(--panel);border:1px solid var(--panel-line);box-shadow:var(--panel-shadow);padding:20px;color:var(--panel-text)}
.panel-title{display:flex;justify-content:space-between;align-items:center;font:600 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--panel-muted);margin-bottom:14px}
.panel-title i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.8}
.plan-row{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:12px;align-items:center;padding:13px 4px;border-top:1px solid var(--panel-row);font-size:.9rem}
.plan-row:first-of-type{border-top:0}
.plan-row strong{color:var(--panel-strong);font-weight:600;display:block}
.plan-row small{font:400 .74rem var(--mono);color:var(--panel-muted)}
.plan-row .num{font:500 .86rem var(--mono);text-align:right}
.plan-row .worth{font:600 .86rem var(--mono);color:var(--ok);text-align:right}
.plan-row .billed{color:var(--panel-strong)}
.bar{height:6px;border-radius:6px;background:var(--panel-row);overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;border-radius:6px;background:var(--fill)}
.fallback{margin-top:16px;padding:12px 14px;border-radius:11px;border:1px dashed color-mix(in srgb,var(--info) 45%,transparent);background:color-mix(in srgb,var(--info) 7%,transparent);font-size:.86rem;color:var(--panel-text)}
.fallback code{color:var(--info)}
.ladder{display:grid;gap:8px}
.rung{display:grid;grid-template-columns:150px 1fr 108px;gap:14px;align-items:center;padding:12px 14px;border-radius:11px;background:var(--panel-inset);border:1px solid var(--panel-inset-line)}
.rung:nth-child(2){margin-left:18px}.rung:nth-child(3){margin-left:36px}.rung:nth-child(4){margin-left:54px}.rung:nth-child(5){margin-left:72px}
.rung .who{font-weight:600;color:var(--panel-strong);font-size:.9rem}
.rung .who small{display:block;font:400 .72rem var(--mono);color:var(--panel-muted)}
.rung .limit{font:600 .84rem var(--mono);text-align:right;color:var(--panel-strong)}
.rung.stop{border-color:color-mix(in srgb,var(--block) 45%,transparent);background:color-mix(in srgb,var(--block) 8%,transparent)}
.rung.stop .limit{color:var(--block)}
.rung.stop .bar i{background:var(--block)}
.rules{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rules code{font-size:.78rem;padding:6px 10px;border-radius:8px;background:var(--panel-inset);border:1px solid var(--panel-inset-line);color:var(--mono-chip)}
.prompt{font:400 .86rem/1.7 var(--mono);color:var(--panel-text);padding:14px 16px;border-radius:11px;background:var(--panel-inset);border:1px solid var(--panel-inset-line)}
.prompt mark{background:color-mix(in srgb,var(--warn) 22%,transparent);color:inherit;border-radius:4px;padding:0 3px}
.prompt .red{color:var(--ok);font-weight:600}
.arrow{font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--panel-muted);margin:12px 4px}
.packs{margin-top:16px;display:grid;gap:6px}
.pack{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--panel-inset);border:1px solid var(--panel-inset-line);font:500 .84rem var(--mono)}

/* ------------------------------------------------------------------ agents */
.agents{background:var(--plain)}
.agent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.agent{background:var(--plain-2);border:1px solid var(--plain-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.agent:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,18,32,.08)}
.agent .shot{aspect-ratio:16/10;background:#0a0f1a;overflow:hidden;border-bottom:1px solid var(--plain-line)}
.agent .shot img{width:100%;height:100%;object-fit:cover;object-position:top left}
.agent .body{padding:22px}
.agent .kind{font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label-plain)}
.agent h3{font-size:1.25rem;margin:8px 0 6px}
.agent p{margin:0;color:var(--muted);font-size:.94rem}
.soon{font:600 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--label-plain);border:1px solid currentColor;border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:middle}

/* ------------------------------------------------------------------ trust */
.trust{background:var(--deep-2);color:var(--deep-text);padding:72px 0}
.trust-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.trust-grid div{border-left:2px solid var(--label-deep);padding-left:14px}
.trust-grid strong{display:block;color:var(--deep-strong);font-size:1rem}
.trust-grid span{display:block;color:var(--deep-muted);font-size:.88rem;margin-top:6px}

/* ------------------------------------------------------------------ rollout */
.rollout{background:var(--plain-2);border-top:1px solid var(--plain-line)}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.path{border-radius:var(--radius-lg);padding:34px;border:1px solid var(--plain-line);background:var(--plain-2);display:flex;flex-direction:column}
.path.team{background:var(--deep);color:var(--deep-text);border-color:var(--deep-line-2)}
.path .tier{font:600 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label-plain)}
.path.team .tier{color:var(--label-deep)}
.path h3{font-size:1.8rem;margin:12px 0 4px}
.path.team h3{color:var(--deep-strong)}
.path .price{font-size:1rem;color:var(--muted);margin:0}
.path.team .price{color:var(--deep-muted)}
.path ul{margin:22px 0 28px;padding:0;list-style:none;display:grid;gap:10px;font-size:.96rem}
.path li{padding-left:22px;position:relative}
.path li::before{content:"→";position:absolute;left:0;color:var(--label-plain);font-weight:700}
.path.team li::before{color:var(--label-deep)}
.path .cta{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.pricing-link{display:block;margin-top:24px;text-align:center;color:var(--muted)}
.assure{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:56px;padding-top:32px;border-top:1px solid var(--plain-line)}
.assure div{border-left:2px solid var(--label-plain);padding-left:14px}
.assure strong{display:block;font-size:.95rem}
.assure span{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}

/* ------------------------------------------------------------------ faq */
.faq{background:var(--plain);border-top:1px solid var(--plain-line)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.faq details{border-bottom:1px solid var(--plain-line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--label-plain);font-weight:700;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin:12px 0 0}

/* ------------------------------------------------------------------ final + footer */
.final{background:var(--deep);color:var(--deep-strong);text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 50% 120%,var(--glow-a),transparent 70%)}
.final .wrap{position:relative}
.final h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.final p{color:var(--deep-muted);font-size:1.12rem;margin:16px auto 0;max-width:560px}
.final .hero-ctas{justify-content:center}
.v2-footer{background:var(--deep-foot);color:var(--deep-muted);padding:64px 0 36px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.foot-grid h4{font:600 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--deep-faint);margin:0 0 14px}
.foot-grid a{display:block;color:var(--deep-text);text-decoration:none;padding:4px 0}
.foot-grid a:hover{color:var(--deep-strong)}
.foot-brand img{height:28px;width:auto}
.foot-brand p{margin:14px 0 18px;max-width:280px}
.foot-social{display:flex;gap:10px}
.foot-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--deep-line);color:var(--deep-text)}
.foot-social svg{width:15px;height:15px;fill:currentColor}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--deep-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--deep-faint);font-size:.84rem}
.foot-bottom a{color:var(--deep-muted);text-decoration:none;margin-left:16px}

/* ------------------------------------------------------------------ prototype-only design switcher */

/* ------------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .pillar,.pillar.flip{grid-template-columns:1fr;gap:32px}
  .pillar.flip .p-copy{order:0}
  .steps{grid-template-columns:1fr}
  .trust-grid,.assure{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .nav-toggle{display:block}
  .v2-nav,.v2-actions{display:none}
  .v2-header.open .v2-nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:66px;left:0;right:0;background:var(--deep);border-bottom:1px solid var(--deep-line);padding:12px 16px 8px;gap:2px}
  .v2-header.open .v2-actions{display:flex;position:absolute;top:calc(66px + var(--nav-h,0px));left:0;right:0;background:var(--deep);padding:8px 16px 18px;border-bottom:1px solid var(--deep-line)}
  .menu-panel,.menu-panel.wide{position:static;box-shadow:none;border:0;background:transparent;min-width:0;padding:0 0 6px 8px;display:none;opacity:1;visibility:visible;transform:none;transition:none}
  .menu.open .menu-panel{display:block}
  .menu-panel::before{display:none}
  .mp-label{display:none}
  .mp-items.two{grid-template-columns:1fr}
  .mp-foot a.mp-cta{margin-left:0}
  .v2-nav > a,.v2-nav .menu > button{width:100%;justify-content:space-between;padding:12px}
}
@media (max-width:760px){
  section{padding:76px 0}
  .q-grid,.paths,.agent-grid,.faq-grid{grid-template-columns:1fr}
  .ledger-head{display:none}
  .ledger-row{grid-template-columns:1fr auto;height:auto;padding:12px 16px}
  .ledger-row .paid{display:none}
  .ledger-row .policy{justify-self:end}
  .ledger-rows{height:auto}
  .ledger-bar{font-size:.72rem;white-space:nowrap}
  .rung{grid-template-columns:1fr auto}
  .rung .bar{display:none}
  .rung:nth-child(n){margin-left:0}
  .plan-row{grid-template-columns:1.3fr 1fr}
  .plan-row .num{display:none}
  .trust-grid,.assure{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------------------------ inner pages (agents, solutions) */
.v2-nav > a[aria-current="page"],.v2-nav .menu.current > button{color:var(--deep-strong)}
.v2-nav > a{position:relative}
.v2-nav > a[aria-current="page"]::before,.v2-nav .menu.current > button::before{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--label-deep)}
.v2-nav .menu > button{position:relative}
.page-hero{position:relative;overflow:hidden;padding:76px 0 88px}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 380px at 92% 0%,var(--glow-a),transparent 70%),radial-gradient(620px 460px at -6% 110%,var(--glow-b),transparent 66%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.page-hero h1{font-size:clamp(2.3rem,4.4vw,3.5rem);margin-top:16px}
.page-hero .lede{font-size:1.12rem}
.page-hero .shot-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--panel-line);box-shadow:var(--panel-shadow);background:#0a0f1a}
.page-hero .shot-frame img{width:100%;display:block}
.plain{background:var(--plain)}
.plain-2{background:var(--plain-2);border-top:1px solid var(--plain-line);border-bottom:1px solid var(--plain-line)}
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feat{background:var(--plain-2);border:1px solid var(--plain-line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:10px}
.plain-2 .feat{background:var(--plain)}
.feat .fi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--label-plain) 10%,transparent);color:var(--label-plain)}
.feat .fi svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:1.15rem;margin-top:6px}
.feat p{margin:0;color:var(--muted);font-size:.95rem}
.feat .plan-note{margin-top:auto;font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.surfaces{display:grid;gap:22px}
.surface{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;background:var(--plain-2);border:1px solid var(--plain-line);border-radius:var(--radius-lg);padding:32px}
.surface .shot{border-radius:12px;overflow:hidden;border:1px solid var(--plain-line);background:#0a0f1a}
.surface .shot img{width:100%;display:block}
.surface .kind{font:600 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label-plain)}
.surface h3{font-size:1.7rem;margin:10px 0 8px}
.surface p{margin:0;color:var(--muted)}
.surface ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:.95rem}
.surface li{padding-left:22px;position:relative}
.surface li::before{content:"→";position:absolute;left:0;color:var(--label-plain);font-weight:700}
.surface .p-more{color:var(--label-plain)}
.mini-list{display:grid;gap:6px}
.mini-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--panel-inset);border:1px solid var(--panel-inset-line);font-size:.86rem}
.mini-row b{color:var(--panel-strong);font-weight:600}
.mini-row small{display:block;font:400 .74rem var(--mono);color:var(--panel-muted);margin-top:2px}
.mini-row .v{font:600 .82rem var(--mono);color:var(--panel-strong);text-align:right}
.flow{display:grid;gap:10px}
.flow .step-box{padding:12px 14px;border-radius:11px;background:var(--panel-inset);border:1px solid var(--panel-inset-line);font-size:.88rem}
.flow .step-box code{color:var(--mono-chip)}
.flow .down{font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--panel-muted);padding-left:6px}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px;border-radius:11px;background:var(--panel-inset);border:1px solid var(--panel-inset-line);font-size:.9rem}
.toggle-row small{display:block;color:var(--panel-muted);font-size:.8rem;margin-top:2px}
.switch{width:38px;height:22px;border-radius:22px;background:color-mix(in srgb,var(--ok) 70%,#000);position:relative;flex-shrink:0}
.switch::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.switch.off{background:#334155}.switch.off::after{right:auto;left:3px}
.url-box{font:500 .84rem var(--mono);color:var(--panel-strong);padding:12px 14px;border-radius:11px;background:var(--panel-inset);border:1px dashed color-mix(in srgb,var(--label-deep) 50%,transparent);word-break:break-all}
.cta-band{background:var(--deep);color:var(--deep-strong);padding:84px 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(640px 320px at 50% 130%,var(--glow-a),transparent 70%)}
.cta-band .wrap{position:relative}
.cta-band h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.cta-band p{color:var(--deep-muted);max-width:560px;margin:14px auto 0;font-size:1.08rem}
.cta-band .hero-ctas{justify-content:center}
.related{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.related a{display:block;padding:18px;border-radius:var(--radius);border:1px solid var(--plain-line);background:var(--plain-2);text-decoration:none}
.related a:hover{border-color:var(--label-plain)}
.related strong{display:block;font-size:.98rem}
.related span{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}
@media (max-width:1080px){
  .page-hero .wrap,.surface{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .feat-grid,.related{grid-template-columns:1fr}
  .surface{padding:22px}
}

/* ------------------------------------------------------------------ integrations directory */
.dir-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.dir-filters button{font:500 .88rem var(--sans);color:var(--text);background:var(--plain-2);border:1px solid var(--plain-line);border-radius:999px;padding:8px 15px;cursor:pointer}
.dir-filters button:hover{border-color:var(--label-plain)}
.dir-filters button[aria-pressed="true"]{background:var(--label-plain);border-color:var(--label-plain);color:#fff}
.dir-group + .dir-group{margin-top:52px}
.dir-group[hidden]{display:none}
.dir-group h3{font-size:1.35rem;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dir-group h3 small{font:500 .76rem var(--mono);color:var(--faint);letter-spacing:.02em}
.dir-group > p{color:var(--muted);margin:8px 0 20px;max-width:700px}
.dir-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dir-card{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--radius);border:1px solid var(--plain-line);background:var(--plain-2);text-decoration:none;color:inherit}
a.dir-card:hover{border-color:var(--label-plain)}
.dir-card strong{font-size:1rem;color:var(--text)}
.dir-card .d{color:var(--muted);font-size:.88rem;line-height:1.5}
.dir-card .via{margin-top:auto;padding-top:10px;font:600 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
@media (max-width:1080px){.dir-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dir-grid{grid-template-columns:1fr}}
.arrow code{text-transform:none;letter-spacing:0;color:var(--mono-chip);font:500 .78rem var(--mono)}

/* ------------------------------------------------------------------ product pages (gateway, chat, cli, code, pricing) */
.page-hero.solo .wrap{grid-template-columns:minmax(0,860px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{font:500 .78rem var(--mono);color:var(--deep-text);border:1px solid var(--deep-line-2);background:var(--deep-chip);border-radius:999px;padding:5px 11px}
.install-from{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:.9rem;color:var(--deep-muted)}
.install-from a{color:var(--deep-text);text-decoration:none;border-bottom:1px solid var(--deep-line-2);padding-bottom:1px}
.install-from a:hover{border-color:var(--label-deep)}
.badge{display:inline-block;font:600 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--label-plain);border:1px solid currentColor;border-radius:6px;padding:2px 6px;vertical-align:middle;line-height:1.4}
.deep .badge,.deep .soon{color:var(--label-deep)}
h1 .soon,h2 .soon{font-size:.8rem;vertical-align:.5em}
.fine{font-size:.86rem;color:var(--faint);margin:16px 0 0}
.deep .fine{color:var(--deep-faint)}
.fine a,.lede a,.feat p a,.step p a{color:var(--label-plain)}
.deep .fine a,.deep .lede a{color:var(--label-deep)}
.section-foot{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.feat-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.feat-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.note-box{margin-top:22px;padding:16px 18px;border-radius:var(--radius);border:1px dashed var(--plain-line);color:var(--muted);font-size:.93rem;background:var(--plain-2)}
.note-box a{color:var(--label-plain)}

/* screenshots: a carousel on a dark section, each image opens full size */
.shots{background:var(--deep);color:var(--deep-text)}
.carousel{max-width:1100px;margin:0 auto}
.carousel-viewport{overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--panel-line);background:var(--panel);box-shadow:var(--panel-shadow)}
.carousel-track{display:flex;align-items:flex-start;transition:transform .4s ease}
.carousel-slide{flex:0 0 100%;margin:0}
.carousel-slide img{width:100%;height:auto;display:block;background:#0a0f1a}
.carousel-slide figcaption{padding:15px 20px;font-size:.96rem;color:var(--deep-text);border-top:1px solid var(--panel-line)}
[data-zoom]{cursor:zoom-in}
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.carousel-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--deep-line-2);background:var(--deep-chip);color:var(--deep-text);font-size:1.25rem;line-height:1;cursor:pointer}
.carousel-btn:hover{border-color:var(--label-deep)}
.carousel-dots{display:flex;gap:8px;align-items:center}
.carousel-dots button{width:9px;height:9px;border-radius:9px;border:0;padding:0;background:var(--deep-line-2);cursor:pointer;transition:width .2s ease}
.carousel-dots button[aria-current="true"]{background:var(--label-deep);width:26px}
.shots .fine{text-align:center}
.shot-solo{max-width:1100px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--panel-line);background:var(--panel);box-shadow:var(--panel-shadow)}
.shot-solo img{width:100%;display:block}
.shot-solo figcaption{padding:15px 20px;font-size:.96rem;color:var(--deep-text);border-top:1px solid var(--panel-line)}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(5,8,15,.9);display:grid;place-items:center;padding:2vh 2vw}
.lightbox[hidden]{display:none}
.lightbox img{max-width:96vw;max-height:94vh;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lightbox button{position:absolute;top:14px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--plain-line);border-radius:var(--radius);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px}
.tbl th,.tbl td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--plain-line);vertical-align:top}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl.left th,.tbl.left td{text-align:left}
.tbl thead th{font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--plain-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:color-mix(in srgb,var(--label-plain) 3%,transparent)}
.tbl code{font-size:.84rem;white-space:nowrap}
.tbl .yes{color:var(--label-plain);font-weight:700}
.tbl .no{color:var(--faint)}
.tbl .muted{color:var(--muted);font-size:.85rem}
.tbl a{color:var(--label-plain)}
.tbl-note{margin-top:14px;font-size:.88rem;color:var(--muted)}
.tbl-note a{color:var(--label-plain)}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.quote{margin:0;padding:26px;border-radius:var(--radius);border:1px solid var(--plain-line);background:var(--plain-2);display:flex;flex-direction:column;gap:16px}
.quote p{margin:0;font-size:1.04rem;line-height:1.55;color:var(--text)}
.quote cite{margin-top:auto;font:500 .78rem var(--mono);font-style:normal;color:var(--faint)}

/* price cards */
.price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;margin-top:8px}
.price-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.price-card{display:flex;flex-direction:column;border:1px solid var(--plain-line);border-radius:var(--radius-lg);background:var(--plain-2);padding:28px 24px;position:relative}
.price-card.popular{border-color:var(--label-plain);box-shadow:0 0 0 1px var(--label-plain),0 18px 40px rgba(11,18,32,.07)}
.price-card .pop{position:absolute;top:-11px;left:22px;font:600 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--label-plain);color:#fff;border-radius:6px;padding:3px 8px}
.price-card .tier{font:600 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label-plain)}
.price-card .amount{margin:14px 0 0;color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.price-card .amount b{font-family:var(--head);font-weight:var(--head-weight);letter-spacing:var(--head-track);font-size:2.4rem;line-height:1;color:var(--text)}
.price-card .note{margin:10px 0 0;font-size:.88rem;color:var(--muted)}
.price-card ul{margin:20px 0 26px;padding:0;list-style:none;display:grid;gap:10px;font-size:.92rem}
.price-card li{padding-left:22px;position:relative;line-height:1.45}
.price-card li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--label-plain);font-weight:700}
.price-card .cta{margin-top:auto}
.price-card .cta .btn{width:100%}
.promo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 26px;font-size:.95rem;color:var(--muted)}

/* the CLI: a terminal, install steps and direct downloads */
.terminal{border-radius:var(--radius-lg);background:#0a0f1a;border:1px solid var(--panel-line);box-shadow:var(--panel-shadow);overflow:hidden}
.terminal .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--panel-line);background:var(--panel)}
.terminal .bar i{width:11px;height:11px;border-radius:50%;background:#334155}
.terminal .bar span{margin-left:8px;font:500 .78rem var(--mono);color:var(--panel-muted)}
.terminal pre{margin:0;padding:20px 22px;font:400 .9rem/1.8 var(--mono);color:var(--panel-text);white-space:pre-wrap}
.terminal .p{color:var(--label-deep)}.terminal .o{color:var(--panel-muted)}.terminal .y{color:var(--ok)}
.steps.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.step .lbl{display:block;margin-top:16px;font:600 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.cmd{margin:8px 0 0;padding:12px 14px;border-radius:10px;background:var(--code);color:var(--code-text);font:500 .84rem/1.65 var(--mono);overflow-x:auto;white-space:pre}
.step .fine{margin-top:14px}
.downloads{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:18px 0 0;padding:0;list-style:none}
.downloads a{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1px solid var(--plain-line);border-radius:12px;background:var(--plain-2);text-decoration:none;font-weight:600;color:var(--text)}
.downloads a span{font:500 .76rem var(--mono);color:var(--muted)}
.downloads a:hover{border-color:var(--label-plain)}
.sub-head{margin-top:56px}
.sub-head h3{font-size:1.4rem}
.sub-head p{color:var(--muted);margin:8px 0 0;max-width:720px}

/* provider tiles (baked by js/build-providers.js) */
.provider-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.provider-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 8px;border-radius:12px;border:1px solid var(--plain-line);background:var(--plain-2);text-align:center}
.provider-tile img{width:28px;height:28px;object-fit:contain}
.provider-tile span{font-size:.84rem;font-weight:600;color:var(--text);line-height:1.2}
.provider-group-tag{font:500 .64rem var(--mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.provider-group-tag.provider-scope{color:var(--label-plain)}
.providers-more{margin:20px 0 0;font-weight:600}
.providers-more a{color:var(--label-plain);text-decoration:none}
.providers-more a:hover{text-decoration:underline}

@media (max-width:1080px){
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotes{grid-template-columns:1fr}
  .provider-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .downloads{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .price-grid,.price-grid.three,.steps.two,.steps.four,.feat-grid.four,.feat-grid.two{grid-template-columns:1fr}
  .provider-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .downloads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .carousel-slide figcaption{font-size:.88rem;padding:12px 14px}
}
.steps > .step{min-width:0}
.carousel-viewport{transition:height .3s ease}

/* ------------------------------------------------------------------ cards: one surface for every card on paper
   A barely lifted fill, a hairline and a soft shadow. Cards that are links rise a little on hover,
   with a softer blue edge and an arrow by the title; cards that aren't links stay still, so nothing
   looks clickable that isn't. Later in the file than each card's own rules, so these win. */
:root,[data-theme="control"]{
  --card-bg:#ffffff;
  --card-line:#e4e7ec;
  --card-line-hover:color-mix(in srgb,var(--label-plain) 34%,#e4e7ec);
  --card-shadow:0 1px 2px rgba(15,23,42,.05),0 4px 10px -6px rgba(15,23,42,.08);
  --card-shadow-hover:0 2px 4px rgba(15,23,42,.05),0 18px 36px -16px rgba(15,23,42,.22);
  --tile-bg:linear-gradient(180deg,color-mix(in srgb,var(--label-plain) 13%,#fff),color-mix(in srgb,var(--label-plain) 6%,#fff));
  --tile-line:color-mix(in srgb,var(--label-plain) 20%,transparent);
}
:is(.q-card,.feat,.agent,.path:not(.team),.surface,.related a,.dir-card,.quote,.price-card,.downloads a,.provider-tile,.step){
  background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
:is(.agent,.related a,.dir-card,.downloads a){transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
:is(.agent,.related a,.dir-card,.downloads a):hover,:is(.agent,.related a,.dir-card,.downloads a):focus-visible{
  transform:translateY(-2px);box-shadow:var(--card-shadow-hover);border-color:var(--card-line-hover);outline:none}
:is(.related a,.dir-card,.downloads a):focus-visible,.agent:focus-visible{box-shadow:var(--card-shadow-hover),0 0 0 3px color-mix(in srgb,var(--label-plain) 30%,transparent)}
.price-card.popular{border-color:var(--label-plain);box-shadow:0 0 0 1px var(--label-plain),0 24px 48px -20px color-mix(in srgb,var(--label-plain) 40%,transparent)}

/* icon tiles: feature icons and the integrations' monograms */
/* feature icons sit on the same white tile as the integration logos */
.feat .fi{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--card-line);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.06);color:var(--label-plain)}
.feat .fi svg{width:23px;height:23px;stroke-width:1.6}
.feat .fi img{width:22px;height:22px;display:block}

/* a link card's title carries an arrow that slides in on hover */
.dir-card strong,.related strong,.agent h3{display:flex;align-items:center;gap:7px}
.dir-card strong::after,.related strong::after,.agent h3::after{content:"\2192";color:var(--label-plain);font-weight:600;opacity:0;transform:translateX(-5px);transition:opacity .16s ease,transform .16s ease}
:is(.dir-card,.related a,.agent):is(:hover,:focus-visible) :is(strong,h3)::after{opacity:1;transform:none}

/* integrations: the card's footer label set off by a hairline, a "Guide" cue on hover */
.dir-card{padding:20px;gap:7px}
/* the logo tile: white, so every brand colour sits on the same ground; line icons in the label colour */
.dir-card .logo{width:46px;height:46px;margin-bottom:10px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--card-line);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.06);transition:border-color .16s ease}
.dir-card .logo img{width:24px;height:24px;display:block}
.dir-card .logo svg{width:22px;height:22px;fill:none;stroke:var(--label-plain);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dir-card:is(:hover,:focus-visible) .logo{border-color:var(--card-line-hover)}
.dir-card .d{margin-bottom:6px}
.dir-card .via{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--card-line) 70%,transparent)}
.dir-card .via::after{content:"Guide \2192";color:var(--label-plain);opacity:0;transition:opacity .16s ease}
.dir-card:is(:hover,:focus-visible) .via::after{opacity:1}

/* related links: a little more room */
.related a{padding:20px}

/* testimonials: an opening mark */
.quote{position:relative;padding-top:52px}
.quote::before{content:"\201C";position:absolute;top:14px;left:24px;font:700 3.2rem/1 var(--head);color:color-mix(in srgb,var(--label-plain) 55%,transparent)}

/* steps sit on the tinted "how" band: the same surface, a touch more contrast */
.how .step{background:#fff}
.dir-card .logo img[src$=".png"]{border-radius:6px}

/* ------------------------------------------------------------------ pricing: every Gateway plan compared */
.plans-tbl .tbl{min-width:760px}
.plans-tbl .tbl thead th{vertical-align:bottom;padding-top:16px;padding-bottom:14px;font:600 .9rem var(--sans);letter-spacing:0;text-transform:none;color:var(--text);background:#fff}
.plans-tbl .tbl thead th:first-child{font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.plans-tbl .tbl thead th small{display:block;margin-top:3px;font:500 .78rem var(--mono);color:var(--muted)}
.plans-tbl .tbl th,.plans-tbl .tbl td{width:17%}
.plans-tbl .tbl th:first-child,.plans-tbl .tbl td:first-child{width:32%}
.plans-tbl .tbl tr.grp th{padding:20px 16px 8px;text-align:left;font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label-plain);background:var(--plain-2);border-bottom:1px solid var(--plain-line)}
.plans-tbl .tbl tbody tr.grp:hover th{background:var(--plain-2)}
.plans-tbl .tbl td{font-size:.9rem}
/* on wide screens the plan names stay in view while the rows scroll by */
@media (min-width:761px){
  .plans-tbl{overflow:visible}
  .plans-tbl .tbl thead th{position:sticky;top:66px;z-index:2;box-shadow:inset 0 -1px 0 var(--plain-line)}
  .plans-tbl .tbl thead th:first-child{border-top-left-radius:var(--radius)}
  .plans-tbl .tbl thead th:last-child{border-top-right-radius:var(--radius)}
}
.menu-panel.right{left:auto;right:-10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ compare: tables, "which fits" cards */
.cmp-index .panel-title{margin-bottom:10px}
.cmp-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:18px}
.cmp-links:last-child{margin-bottom:0}
.cmp-links a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--panel-line);background:var(--panel-row);color:var(--panel-text);text-decoration:none;font-size:.9rem;font-weight:500;line-height:1.25;transition:border-color .16s ease,background .16s ease}
.cmp-links a:hover,.cmp-links a:focus-visible{border-color:var(--panel-muted);background:rgba(148,163,184,.18);outline:none}
.cmp-links .logo{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#fff}
.cmp-links .logo img{width:18px;height:18px;display:block}
.cmp-tbl .tbl{min-width:1000px;table-layout:fixed}
.cmp-tbl .tbl th,.cmp-tbl .tbl td{text-align:left;font-size:.88rem;line-height:1.5}
.cmp-tbl .tbl thead th{vertical-align:top;padding-top:18px;padding-bottom:14px;font:600 .92rem var(--sans);letter-spacing:0;text-transform:none;color:var(--text);background:#fff}
.cmp-tbl .tbl thead th:first-child{width:17%}
.cmp-tbl .cmp-th{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cmp-tbl .cmp-th img{width:22px;height:22px;padding:7px;border-radius:10px;border:1px solid var(--card-line);background:#fff;box-sizing:content-box}
.cmp-tbl .cmp-th a{color:var(--text);text-decoration:underline;text-decoration-color:var(--plain-line);text-underline-offset:3px}
.cmp-tbl .cmp-th a:hover{color:var(--label-plain);text-decoration-color:currentColor}
.cmp-tbl .cmp-th small{display:block;margin-top:3px;font:500 .74rem var(--mono);color:var(--muted)}
.cmp-tbl tbody th{font-weight:600;color:var(--text);background:#fff}
.cmp-tbl td{color:var(--muted)}
.cmp-tbl .us{background:color-mix(in srgb,var(--label-plain) 4%,#fff);color:var(--text)}
.cmp-tbl tbody tr:hover td.us{background:color-mix(in srgb,var(--label-plain) 7%,#fff)}
.cmp-tbl tr.grp th{padding:20px 16px 8px;font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label-plain);background:var(--plain-2)}
.cmp-tbl .cmp-th img[src$=".png"],.cmp-pick .logo img[src$=".png"],.cmp-links img[src$=".png"]{border-radius:6px}
@media (min-width:1100px){
  .cmp-tbl{overflow:visible}
  .cmp-tbl .tbl thead th{position:sticky;top:66px;z-index:2;box-shadow:inset 0 -1px 0 var(--plain-line)}
  .cmp-tbl .tbl thead th:first-child{border-top-left-radius:var(--radius)}
  .cmp-tbl .tbl thead th:last-child{border-top-right-radius:var(--radius)}
}
/* on a phone the table scrolls sideways under its row labels */
@media (max-width:760px){
  .cmp-tbl .tbl{min-width:880px}
  .cmp-tbl .tbl thead th:first-child{width:118px}
  .cmp-tbl .tbl :is(thead th:first-child,tbody th[scope="row"]){position:sticky;left:0;z-index:1;box-shadow:inset -1px 0 0 var(--plain-line)}
  .cmp-tbl .tbl tr.grp th span{position:sticky;left:16px}
}
.cmp-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cmp-pick{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--radius);background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
.cmp-pick header{display:flex;align-items:center;gap:14px;margin-bottom:2px}
.cmp-pick .logo{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--card-line);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.06)}
.cmp-pick .logo img{width:24px;height:24px;display:block}
.cmp-pick h3{font-size:1.2rem;margin:0}
.cmp-pick header small{display:block;margin-top:2px;font:500 .74rem var(--mono);color:var(--muted)}
.cmp-pick p{margin:0;color:var(--muted);font-size:.94rem}
.cmp-pick .pick{padding:2px 0 2px 14px;border-left:3px solid var(--plain-line);color:var(--text)}
.cmp-pick .pick.us{border-left-color:var(--label-plain)}
.cmp-pick .pick b{display:block;margin-bottom:3px;font:600 .7rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.cmp-pick .pick.us b{color:var(--label-plain)}
.cmp-pick a{color:var(--label-plain)}
.cmp-pick .more{font-weight:600;font-size:.94rem;text-decoration:none}
.cmp-pick .more:hover{text-decoration:underline}
.cmp-pick .src{margin-top:auto;padding-top:14px;border-top:1px solid var(--plain-line);font-size:.8rem;line-height:1.7;color:var(--faint)}
.cmp-pick .src a{color:var(--muted)}
.cmp-prose{max-width:820px}
.cmp-prose p{color:var(--muted);font-size:1.02rem}
.cmp-prose p + p{margin-top:16px}
@media (max-width:860px){.cmp-picks{grid-template-columns:1fr}}
@media (max-width:340px){.cmp-links{grid-template-columns:1fr}}