/* Shared base for hand-built pages: tokens (light and dark), resets, fonts and shared components
   (prompt box, FAQ, section kit). The header, Rankbench bar and footer live in chrome.css.
   Linked by every hand-built page before its own stylesheet; page CSS may rely on these tokens. */

@font-face{font-family:'Inter';font-style:normal;font-weight:200 700;font-display:swap;src:url(/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-display:swap;src:url(/bricolage-latin.woff2) format('woff2')}

:root{
  --u:1;
  --hdr:64px;
  --bg:#f3f3f2;
  --paper:#ffffff;
  --ink:#0b0b0c;
  --ink-2:#3a3a3f;
  --muted:#85858c;
  --faint:#b9b9bf;
  --line:#e6e6e4;
  --brand:#5c33ff;
  --ok:#16a34a;
  /* Surfaces, lines and accents shared by both themes (dark values below) */
  --paper-2:#fafafa;
  --fill:#f4f4f5;
  --raise:#ffffff;
  --pop:#ffffff;
  --pop-hover:#efefed;
  --pop-shadow:0 12px 32px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.035);
  --pub-bg:#fafafa;
  --pub-shadow:0 18px 45px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.06);
  --line-2:#e4e4e7;
  --line-3:#cfcfd2;
  --dash:#a4a4aa;
  --ring:rgba(0,0,0,.06);
  --ring-strong:rgba(0,0,0,.12);
  --solid:#111111;
  --on-solid:#ffffff;
  --icon:#71717a;
  --brand-ink:#5c33ff;
  --brand-soft:#c9bfff;
  --tint:#efeaff;
  --orange-tint:#fff1e6;
  --ok-bg:#e9f9ef;
  --ok-ink:#15803d;
  --warn-bg:#fff7e6;
  --warn-ink:#b45309;
  --warn-line:#fde3b0;
  --form-bg:#f0f1fd;
  --form-line:#cfd2f6;
  --form-line-2:#c3c7f2;
  --form-sel:#e6e8fc;
  --form-ink:#2b2b55;
  --form-acc:#5b5bd6;
  --ask-b:rgba(15,13,10,.08);
  --ask-bh:rgba(15,13,10,.14);
  --ask-bf:rgba(15,13,10,.22);
  --badge-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 70px -28px rgba(20,10,60,.35),0 0 0 1px rgba(0,0,0,.05);
  
  --star-off:#e5e5e2;
  color-scheme:light;
  --display:"Bricolage Grotesque",Inter,system-ui,sans-serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --lift:0 1px 2px rgba(0,0,0,.04),0 12px 32px -12px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.05);
  --lift-lg:0 2px 4px rgba(0,0,0,.03),0 40px 80px -30px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.05);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,svg{display:block}
h1,h2,h3{margin:0;font-weight:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}
[data-icon]{display:inline-grid;place-items:center}
.ic{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[data-icon] svg:not(.di){width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* App icons (filled, from the dashboard design) */
.di{display:block;width:100%;height:100%;stroke:none}
.sprite{position:absolute;overflow:hidden}
html{scroll-padding-top:calc(var(--hdr) + 16px)}

/* ---------- Prompt box (hero input) ---------- */
.ask{width:min(620px,calc((100vw - 32px) / var(--u)));zoom:var(--u);display:flex;flex-direction:column;border-radius:24px;background:var(--paper);border:1px solid var(--ask-b);text-align:left;transition:border-color .25s,box-shadow .25s}
.ask:hover{border-color:var(--ask-bh)}
.ask:focus-within{border-color:var(--ask-bf);box-shadow:0 10px 30px -18px rgba(0,0,0,.25)}
/* A light that circles the prompt box so the eye finds it: dim while idle, full once you're in
   the box. It only turns while the box is on screen (.live, set by site.js). */
@property --ask-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ask-orbit{to{--ask-a:360deg}}
.ask{position:relative}
.ask::before{content:"";position:absolute;inset:-1px;z-index:1;border-radius:inherit;padding:1.75px;background:conic-gradient(from var(--ask-a),transparent 0 56%,color-mix(in srgb,var(--brand) 22%,transparent) 70%,var(--brand-ink) 84%,color-mix(in srgb,var(--brand-ink) 45%,#fff) 88%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.75;pointer-events:none;animation:ask-orbit 5s linear infinite paused;transition:opacity .4s var(--ease),filter .4s var(--ease)}
.ask.live::before{animation-play-state:running}
.ask:hover::before{opacity:.9}
.ask:focus-within::before{opacity:1;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--brand) 45%,transparent))}
/* Send button: pops when there's something to send, the arrow lifts on hover, and it gives on press */
@keyframes ask-pop{0%{transform:scale(.82)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.ask-field{position:relative;display:block;padding:16px 20px 0;cursor:text}
.ask textarea{display:block;width:100%;min-height:28px;max-height:112px;border:0;outline:0;resize:none;background:transparent;font:400 16px/28px var(--sans);color:var(--ink);padding:0;overflow-y:auto}
.ask-ph{position:absolute;left:20px;right:20px;top:16px;height:28px;overflow:hidden;pointer-events:none;font:400 16px/28px var(--sans);color:var(--muted);white-space:nowrap}
.ask-ph span{display:block;overflow:hidden;text-overflow:ellipsis;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.ask-ph span.out{transform:translateY(-12px);opacity:0}
.ask-ph span.in{transform:translateY(12px);opacity:0;transition:none}
.ask.filled .ask-ph{visibility:hidden}
.ask-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 10px 10px 14px;cursor:text}
/* Language: the pill shows the choice; a transparent native select on top takes the tap.
   16px on the select keeps iOS from zooming the page when it opens. */
.ask-lang{position:relative;display:flex;align-items:center;gap:9px;padding:7px 13px 7px 10px;border-radius:999px;font:500 13.5px var(--sans);color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:background .2s}
.ask-lang:hover{background:var(--fill)}
.ask-lang:has(select:focus-visible){outline:2px solid var(--brand);outline-offset:1px}
.ask-lang::after{content:"";width:5px;height:5px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.ask-lang select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;font-size:16px;cursor:pointer;appearance:none;-webkit-appearance:none}
.ask button[type=submit]{flex:none;width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);cursor:pointer;transition:background .25s,transform .25s var(--spring)}
.ask.has button[type=submit]{background:var(--brand);animation:ask-pop .4s var(--spring)}
.ask.has button[type=submit]:hover{transform:scale(1.06)}
.ask button[type=submit] svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--spring)}
.ask.has button[type=submit]:hover svg{transform:translateY(-2px)}
.ask.has button[type=submit]:active{transform:scale(.92)}
.ask.nudge{animation:nudge-x .45s var(--ease)}
@keyframes nudge-x{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.ask.sending button[type=submit] svg{opacity:0}
.ask.sending button[type=submit]{position:relative;background:var(--brand)}
.ask.sending button[type=submit]::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.ask-free{font-size:13px;color:var(--muted);padding-left:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kick{display:block;font:600 calc(13px * var(--u))/1 var(--sans);letter-spacing:.01em;color:var(--brand-ink);margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- FAQ (content mirrors the main landing page) ---------- */
.faq{position:relative;z-index:1;padding:clamp(72px,10vw,140px) 0 clamp(24px,4vw,56px);content-visibility:auto;contain-intrinsic-size:auto 900px}
.faq-in{width:min(1240px,calc(100% - 32px));margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:calc(var(--hdr) + 40px)}
.faq-h{margin:0;max-width:9em;font:600 clamp(34px,4.2vw,56px)/1.04 var(--display);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.faq-more{margin:20px 0 0;max-width:46ch;text-wrap:pretty;font-size:15px;line-height:1.55;color:var(--muted)}
.faq-more a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;transition:text-decoration-color .2s}
.faq-more a:hover{text-decoration-color:currentColor}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;list-style:none;cursor:pointer;font:500 17px/1.4 var(--sans);color:var(--ink);transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-ic{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);transition:transform .35s var(--ease),color .2s}
.faq-list details[open] .faq-ic{color:currentColor}
@media (hover:hover){.faq-list summary:hover{color:var(--brand-ink)}.faq-list summary:hover .faq-ic{color:currentColor}}
.faq-list details[open] .faq-ic{transform:rotate(45deg)}
.faq-a{padding:0 48px 24px 0;font-size:15px;line-height:1.65;color:var(--ink-2)}
.faq-a p,.faq-a ul{margin:0}
.faq-a>*+*{margin-top:10px}
.faq-a ul{padding-left:20px}
.faq-a li+li{margin-top:4px}
/* Answers glide open where the browser can animate to height:auto; elsewhere they simply open. */
@supports (interpolate-size:allow-keywords){
  .faq-list details{interpolate-size:allow-keywords}
  .faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
  .faq-list details[open]::details-content{block-size:auto}
}
@media (max-width:820px){
  .faq-in{grid-template-columns:1fr;gap:28px}
  .faq-side{position:static}
  .faq-list summary{padding:18px 0;font-size:16px;gap:16px}
  .faq-a{padding-right:36px}
}

/* ---------- Dark theme: the footer switch (Light, Dark or System) resolves to <html data-theme>.
   The inline #cd-theme script in <head> sets it before first paint; without it the page stays light. ---------- */
:root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0e0e10;
    --paper:#17171a;
    --paper-2:#131316;
    --fill:#222226;
    --raise:#2a2a2f;
    --pop:#1b1b1f;
    --pop-hover:#28282d;
    --pop-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07);
    --pub-bg:#1d1d21;
    --pub-shadow:0 18px 45px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
    --ink:#f4f4f5;
    --ink-2:#c9c9d0;
    --muted:#8d8d96;
    --faint:#5d5d65;
    --line:#26262b;
    --line-2:#2e2e34;
    --line-3:#45454c;
    --dash:#5f5f66;
    --ring:rgba(255,255,255,.07);
    --ring-strong:rgba(255,255,255,.16);
    --solid:#f4f4f5;
    --on-solid:#111111;
    --icon:#a1a1aa;
    --brand-ink:#9d87ff;
    --brand-soft:#3b3175;
    --tint:rgba(124,92,255,.16);
    --orange-tint:rgba(234,122,26,.14);
    --ok-bg:rgba(34,197,94,.14);
    --ok-ink:#4ade80;
    --warn-bg:rgba(245,158,11,.12);
    --warn-ink:#fbbf24;
    --warn-line:rgba(245,158,11,.32);
    --form-bg:rgba(99,102,241,.1);
    --form-line:rgba(129,132,246,.3);
    --form-line-2:rgba(129,132,246,.42);
    --form-sel:rgba(99,102,241,.22);
    --form-ink:#c7c9f5;
    --form-acc:#8b8ef5;
    --ask-b:rgba(255,255,255,.1);
    --ask-bh:rgba(255,255,255,.16);
    --ask-bf:rgba(255,255,255,.26);
    --lift:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
    --lift-lg:0 2px 4px rgba(0,0,0,.4),0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07);
    --badge-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 70px -28px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);
    
    --star-off:#2e2e34;
}
[data-theme="dark"] .ask:focus-within{box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Page sections: the kit hand-built pages compose from ----------
   Layout (.d-in .d-sec .band .d-head .d-split), type (.d-h2 .d-lead .d-note), buttons (.d-btn
   .d-cta), the .vs comparison table and the dashboard's status badges (.db-badge). */
.i{display:inline-block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.d-in{width:min(1180px,calc(100% - 32px));margin:0 auto}
.band{background:var(--paper)}
.d-h2{font:600 calc(clamp(28px,3vw,42px) * min(var(--u),1.15))/1.08 var(--display);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.minor .d-h2{font-size:calc(clamp(24px,2.4vw,32px) * min(var(--u),1.15))}
.d-lead{margin:14px 0 0;max-width:58ch;font-size:clamp(15px,1.2vw,16.5px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.d-sec{padding:clamp(64px,9vw,112px) 0;content-visibility:auto;contain-intrinsic-size:auto 900px}
.d-sec.minor{padding:clamp(56px,7vw,88px) 0}
.d-head{margin:0 0 clamp(28px,4vw,48px)}
.d-head.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px 56px;align-items:end}
.d-head.split .d-lead{margin:0}
.d-cta{display:flex;justify-content:center;margin:clamp(24px,3vw,36px) 0 0}
.d-cta.left{justify-content:flex-start}
.d-btn{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;border-radius:10px;background:var(--ink);color:var(--bg);font:600 14.5px/1 var(--sans);transition:box-shadow .2s}
.d-btn .i{width:18px;height:18px;stroke-width:1.8}
.d-btn:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 10%,transparent)}
.d-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.d-split.d-mid{align-items:center}
.d-note{margin:24px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.d-note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;transition:text-decoration-color .2s}
.d-note a:hover{text-decoration-color:currentColor}
.db-badge{display:inline-flex;align-items:center;padding:2px 6px;border-radius:6px;font:500 13px/20px var(--sans);white-space:nowrap}
.db-badge.lime{background:rgba(163,230,53,.2);color:#4d7c0f}
.db-badge.zinc{background:rgba(9,9,11,.05);color:#52525b}
.db-badge.amber{background:rgba(251,191,36,.22);color:#b45309}
.vs-wrap{overflow-x:auto;border-radius:16px;background:var(--paper);box-shadow:var(--lift)}
.vs{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.vs th,.vs td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.vs thead th{vertical-align:bottom;font:500 14px/1.3 var(--sans);color:var(--muted)}
.vs thead .cd{color:var(--brand-ink);font-weight:600}
.vs thead small,.vs td small{display:block;margin-top:3px;font-weight:400;font-size:12px;color:var(--muted)}
.vs tbody th,.vs tfoot th{font-weight:500;color:var(--ink)}
.vs tfoot td{font-size:13px;line-height:1.45;color:var(--muted);vertical-align:top}
.vs tfoot th,.vs tfoot td{border-bottom:0}
.vs .cd{background:color-mix(in srgb,var(--tint) 60%,transparent)}
.vs tfoot .cd{color:var(--ink-2)}
[data-theme="dark"] .vs .db-badge.lime{background:rgba(163,230,53,.14);color:#a3e635}
[data-theme="dark"] .vs .db-badge.zinc{background:rgba(255,255,255,.07);color:#a1a1aa}
[data-theme="dark"] .vs .db-badge.amber{background:rgba(251,191,36,.14);color:#fbbf24}
@media (max-width:820px){
  .d-head.split{grid-template-columns:1fr}
  .d-split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .vs{min-width:0;table-layout:fixed;font-size:13px}
  .vs th,.vs td{padding:12px 6px}
  .vs thead th:first-child{width:31%}
  .vs tbody th,.vs tfoot th{padding-left:12px}
  .vs thead th{font-size:11.5px;line-height:1.25;overflow-wrap:break-word}
  .vs thead small{display:none}
  .vs td small{font-size:10.5px}
  .vs .db-badge{padding:1px 5px;font-size:11.5px;white-space:normal;line-height:16px}
  .vs tfoot td{font-size:11.5px;line-height:1.35;hyphens:auto;overflow-wrap:break-word}
}

/* Reduced motion: the light holds still and just marks the box you're typing in */
@media (prefers-reduced-motion:reduce){
  .ask::before{animation:none;background:var(--brand-ink);opacity:0}
  .ask:hover::before{opacity:0}
  .ask:focus-within::before{opacity:.55;filter:none}
  .ask.has button[type=submit]{animation:none}
}