/* The marketing site's stylesheet (Sprint 203: moved out of index.html, verbatim, so every page
   shares one cached file; bin/site_pages.py stamps its hash into every page). Passes A-L are the
   history the home page was built in; pass M is the multi-page site. */
/* ============================================================================
   Tokens. The scale is taken from measurements of a competitor's live site
   (body 20/28, paragraphs 24/32, h1 64/72, pill buttons at 9999px, no shadow,
   pure-black text on white with #F5F5F5 bands) because that scale is why their
   page reads as confident. The COLOUR is deliberately ours: they own purple,
   and borrowing it is how you end up looking like the follower.
   ========================================================================= */
:root{
  /* Type scale, ~1.11 ratio. Before this the page carried 21 distinct
     sizes between 0.66 and 1.2rem - no hierarchy, just accumulation.
     Anchored on the values already most used so most text did not move. */
  --f-2xs:0.72rem; --f-xs:0.8rem; --f-s:0.9rem; --f-m:1rem; --f-l:1.1rem; --f-xl:1.25rem;

  /* LIGHT, measured off synthai.demos.tailgrids.com 2026-09-20 (owner's pick).
     Token names are kept so every rule still resolves; the values flip.
     Ratios are against white unless stated. */
  --ground:#F7F7F7;        /* oklch(.97): their page, behind the white panels */
  --white:#FFFFFF;         /* the section panels and cards */
  --band:#F2F2F2;          /* one step off the panel */
  --ink:#262626;           /* oklch(.205): their headline and body colour. 14.6:1 */
  --muted:#5F5F5F;         /* 6.7:1 - theirs is #808080 at 3.9:1, which fails AA */
  --faint:#6B6B6B;         /* 5.6:1; 5.0:1 on the pastel tints */
  --line:#E4E4E4;          /* their rgba(0,0,0,.1) hairline, flattened over white */
  --accent:#171717;        /* oklch(.145): their button black. Text ON it is --on-accent */
  --accent-ink:#262626;    /* black used as text */
  --accent-wash:#F2F2F2;
  --on-accent:#FFFFFF;
  --good:#1F6B4A;          /* 6.2:1 on white */
  --purple:#5B3FBF;        /* 7.2:1: the one saturated colour, for the headline word and labels */
  --purple-tint:#F7F7F7;   /* card fill: their light-grey card */
  --purple-line:#E4E4E4;   /* card hairline */
  --lavender:#5B3FBF;      /* labels and eyebrows. 7.2:1 */
  --nav-hi:#5B3FBF;        /* the open trigger */
  --plum:#B3B3B3;          /* footer links on the black footer. 9.3:1 */
  --tint-green:#EDF4EA;    /* their three pastel panels, exactly */
  --tint-lavender:#EBEBFC;
  --tint-pink:#F7EFF7;
  --mint-glow:0 0 0 0 transparent;
  --grad-text:linear-gradient(90deg,#5B3FBF,#A6367A);   /* both stops >= 5.1:1 on white */
  --r-btn:8px;             /* their button radius; pills stay for tags */
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,Consolas,monospace;
  --r-card:16px; --r-lg:36px; --r-pill:999px;
  /* motion: one ease-out for every entrance (theirs), plain `ease` for hover colour,
     a sampled spring (duration .5s, bounce .2, the Apple-style Motion config) for
     lifts and tilts. Durations: press 160ms, hover 200ms, UI 220ms. */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:linear(0, 0.03, 0.103, 0.202, 0.311, 0.421, 0.526, 0.621, 0.705, 0.776, 0.836, 0.884, 0.922, 0.952, 0.974, 0.99, 1.001, 1.008, 1.012, 1.015, 1.015, 1.015, 1.014, 1.012, 1);
  --dur-press:160ms; --dur-hover:200ms; --dur-ui:220ms;
  --z-nav:50;
}
*{box-sizing:border-box}
[id]{scroll-margin-top:84px}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);
     font-family:var(--sans);font-size:16px;line-height:1.5;
     -webkit-font-smoothing:antialiased;overflow-x:hidden;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ---------- type scale ---------- */
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.75rem,5.6vw,4.5rem);line-height:1.13;font-weight:400;letter-spacing:-.02em}
h2{font-size:clamp(2.1rem,3.9vw,3.5rem);line-height:1.15;font-weight:400;letter-spacing:-.025em;text-wrap:balance}
h3{font-size:var(--f-l);line-height:1.3;font-weight:500}
.lede{font-size:1.125rem;line-height:1.46;color:var(--muted);
      max-width:720px;margin:20px auto 0}
.eyebrow{font-family:var(--sans);font-size:var(--f-xs);font-weight:500;letter-spacing:.08em;
         text-transform:uppercase;color:var(--lavender)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:rgba(0,0,0,.72);
     backdrop-filter:saturate(1.4) blur(12px);border-bottom:0}
.nav-in{display:flex;align-items:center;gap:16px;height:64px;position:relative}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:.95rem;
       letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#fff}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--accent);
             display:grid;place-items:center;color:var(--on-accent);font-size:var(--f-xs);font-weight:600}
.nav-links{display:none;gap:22px;margin-left:28px;align-items:center;height:100%}
/* Sign in sits apart from the section anchors: it goes somewhere else, and a
   nav that treats "jump to FAQ" and "leave for the app" identically is lying
   about one of them. Deliberately quiet - this is a door, not a pitch. */
.nav-links .nav-signin{margin-left:auto;padding:7px 14px;border-radius:8px;
  border:1px solid var(--line);color:var(--ink);font-size:var(--f-s);min-height:36px;
  display:inline-flex;align-items:center}
.nav-links .nav-signin:hover{border-color:var(--accent);color:var(--accent-ink)}
@media(min-width:1140px){.nav-links{display:flex}}
.nav-links a{font-size:1rem;font-weight:400;color:#fff;text-decoration:none;   /* theirs: rgb(255,255,255) */
     transition:color var(--dur-hover) ease}
.nav-links a{min-height:44px;display:inline-flex;align-items:center}
.nav-links > a:hover,.nav-links > a:focus-visible{color:var(--nav-hi)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ---------- buttons: pill, no shadow ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1;
     padding:12px 20px;min-height:44px;border-radius:var(--r-pill);border:1px solid transparent;
     text-decoration:none;cursor:pointer;
     transition:background var(--dur-hover) ease,box-shadow var(--dur-hover) ease,border-color var(--dur-hover) ease,
                color var(--dur-hover) ease,filter var(--dur-hover) ease,transform var(--dur-press) var(--ease-out)}   /* >=44px touch target */
.btn:active{transform:scale(.97)}                     /* a press is a physical thing; 160ms out */
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--mint-glow)}
.btn-primary:hover{background:var(--accent);filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--band);border-color:var(--faint)}
@property --ly{syntax:"<percentage>";inherits:false;initial-value:280%}
.btn-purple{position:relative;isolation:isolate;background:transparent;color:#fff;border-color:transparent;--ly:280%}
.btn-purple::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(270deg,#6D40BC 2.16%,#8F69D3 39.39%,#B89BEE 85.16%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.btn-purple::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 115% at 50% var(--ly),#AA85EC 0,#8047E8 99%,transparent 100%);
  transition:--ly .55s cubic-bezier(.3,.7,.3,1)}
.btn-purple:hover::after,.btn-purple:focus-visible::after{--ly:38%}
@media (prefers-reduced-motion:reduce){.btn-purple::after{transition:none}}
.btn-sm{padding:11px 20px;font-size:var(--f-s);min-height:44px}

/* ---------- hero ---------- */
.hero{padding:72px 0 24px}
@media(min-width:960px){.hero{padding:96px 0 40px}}
.hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1fr;gap:48px}}
.hero-copy{text-align:center;max-width:1140px;margin:0 auto}
.kick{margin:14px auto 0;max-width:720px;font-size:1.125rem;font-weight:600;color:#fff}
.hero-checks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;
  margin:22px auto 0;padding:0;font-size:.95rem;color:var(--muted)}
.hero-checks li{display:inline-flex;align-items:center;gap:8px;padding:0 20px}
.hero-checks li + li{border-left:1px solid rgba(255,255,255,.14)}
.hero-checks svg{width:16px;height:16px;color:var(--accent);flex:none}
/* their hero entrance, verbatim: hnHeroRise 1.1s cubic-bezier(.16,1,.3,1), .14s stagger.
   The from-state lives in the keyframe, not the base rule, so a guard that kills
   animations sees the resting page rather than a hero at opacity 0. */
.rise{animation:hero-rise 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--rise,0) * .14s)}
@keyframes hero-rise{0%{opacity:0;transform:translateY(40px) scale(.95);filter:blur(10px)}
  60%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.rise{animation:none}}
.hero-copy h1{margin-left:auto;margin-right:auto;text-wrap:balance}
.hero-copy .eyebrow{display:block}
.hero-caps{justify-content:center;margin-left:auto;margin-right:auto}
/* the phrase the page turns on, in their rainbow text gradient, verbatim */
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.grad{color:var(--lavender)}}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;justify-content:center;align-items:center}
.hero-actions .btn{min-height:48px;padding:0 28px}
.hero-note{margin:20px 0 0;font-size:var(--f-s);color:var(--faint)}

/* the robot: a pre-rendered loop, not a live engine */
/* The robot is the Spline scene, mounted by assets/robot-embed.js into
   [data-robot-panel]. It brings its own .rp-* styling (robot-embed.css); this
   only has to give it a box to live in. */
/* NO min-height here. aspect-ratio + min-height:340px together imply a
   min-WIDTH of 340 x 1012/662 = 520px, which forced horizontal scroll at 1024
   and 375. The ratio alone lets the panel scale down properly. min-width:0 lets
   it shrink inside the hero grid, which grid children otherwise refuse to do. */
.figure{position:relative;aspect-ratio:1012/662;width:100%;min-width:0}
.figure .rp-shell{min-height:0}

/* ---------- announcement bar + dropdown (searchatlas pattern) ---------- */
.announce{display:block;background:var(--accent);color:var(--on-accent);text-align:center;
  font-size:.95rem;font-weight:500;padding:10px 16px;min-height:44px;text-decoration:none}
.announce b{font-weight:600}
.nav-cta{display:flex;gap:8px;align-items:center}
.btn-sm{padding:10px 16px;min-height:44px;font-size:.95rem}
/* ---------- the menus: their panel, verbatim, hung from the bar ---------- */
.nav-dd{position:relative;display:flex;align-items:center;height:64px}
.nav-dd-link{display:inline-flex;align-items:center;gap:6px}
.nav-dd-link .spark{flex:none;margin-right:2px}
.nav-dd-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;background:none;border:0;
  padding:0;width:44px;height:44px;margin:0 -10px 0 -8px;font:inherit;font-size:1rem;color:#fff;cursor:pointer;
  transition:color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out)}
.nav-dd-btn:active{transform:scale(.94)}
.nav-dd-btn--label{width:auto;padding:0 2px;margin:0}
.nav-dd-btn svg{transition:transform var(--dur-ui) var(--ease-out)}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd:hover .nav-dd-link,.nav-dd.open .nav-dd-link,.nav-dd:hover .nav-dd-btn,.nav-dd.open .nav-dd-btn,
.nav-dd-link:focus-visible,.nav-dd-btn:focus-visible{color:var(--nav-hi)}
.nav-dd-panel{position:absolute;top:100%;left:-40px;min-width:max-content;
  padding:34px 40px 38px;background:#000;border:1px solid rgba(255,255,255,.1);border-top:0;
  border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 24px 60px rgba(0,0,0,.45);z-index:60;
  animation:dd-in var(--dur-ui) var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.nav-dd-panel{animation:none}}
.nav-dd-panel.mega{width:min(880px,calc(100vw - 32px));display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.nav-dd-panel .list{display:grid;gap:0}
.nav-dd-panel .col{display:grid;gap:34px;align-content:start}
.nav-dd-panel h4{margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14);
  font-size:.95rem;font-weight:400;color:rgba(255,255,255,.6)}
.nav-dd-panel .tag{display:inline-block;margin-left:2px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:.66rem;font-weight:600;letter-spacing:.01em;color:var(--accent-ink);
  background:rgba(0,255,212,.05);border:1px solid rgba(0,255,212,.32);vertical-align:middle}
.nav-dd-panel[hidden]{display:none !important}   /* the stacked menu sets display on .mega; hidden must still win */
.nav-dd-panel a{display:flex;align-items:center;gap:10px;padding:10px 0;text-decoration:none;min-height:44px;
  font-size:1.0625rem;color:#fff;white-space:nowrap;transition:color .3s ease}
.nav-dd-panel a:hover,.nav-dd-panel a:focus-visible{color:var(--lavender)}
.nav-dd-panel a .grad{font-weight:500}
/* their floating Start pill: mint, 54px, fixed 20px from the corner, shown once the hero CTA has scrolled away */
.float-cta{position:fixed;left:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;min-height:54px;
  padding:15px 24px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-weight:600;
  font-size:1rem;text-decoration:none;box-shadow:0 0 28px rgba(0,255,212,.24);transition:opacity .3s ease,transform .3s ease}
.float-cta[hidden]{display:none}
.float-cta:hover{filter:brightness(1.06)}
@media(max-width:760px){.float-cta{display:none}}
/* ---------- self-serve plans (generated block; css lives here) ---------- */
.plans-head{text-align:center;max-width:64ch;margin:64px auto 0}
.plans-head h3{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:400;letter-spacing:-.02em;margin:0}
.plans-head p{color:var(--muted);font-size:var(--f-m);margin:12px auto 0}
.plans-head b{color:var(--ink);font-weight:500}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:28px}
@media(min-width:1200px){.plans{grid-template-columns:repeat(5,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;
      background:var(--purple-tint);border:1px solid var(--purple-line);border-radius:16px}
.plan.pick{background:rgba(0,255,212,.10);border-color:rgba(0,255,212,.32)}
.plan-badge{align-self:flex-start;font-size:var(--f-2xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
      padding:4px 10px;border-radius:var(--r-pill);background:var(--accent-wash);border:1px solid rgba(0,255,212,.32);color:var(--accent-ink)}
.plan-n{font-size:var(--f-l);font-weight:500;color:var(--ink)}
.plan-who{margin:0;color:var(--muted);font-size:var(--f-s);min-height:2.6em}
.plan-amt{font-size:39px;font-weight:500;line-height:1;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan.pick .plan-amt{font-size:52px}
.plan-amt sup{font-size:.5em;vertical-align:top;margin-right:2px;color:var(--muted)}
.plan-amt em{font-style:normal;font-size:.36em;color:var(--muted);margin-left:4px}
.plan-meta{margin:0;color:var(--muted);font-size:var(--f-s)}
.plan .btn{width:100%;margin-top:4px}
.plan-run{margin:8px 0 0;font-size:var(--f-xs);color:var(--faint);letter-spacing:.02em}
.plan-feats{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.plan-feats li{display:flex;gap:8px;align-items:flex-start;font-size:var(--f-s);color:var(--ink)}
.plan-feats svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--accent)}
.plan-held{margin:4px 0 0;font-size:var(--f-xs);color:var(--faint)}
/* ---------- the newest tools at their prices (generated block: bin/price_list.py; css lives here) ---------- */
.price-new{max-width:1100px;margin:40px auto 0;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--white)}
.price-new h3{margin:0;font-size:var(--f-xl);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.price-new .pl-note{margin:8px 0 16px;color:var(--muted);font-size:var(--f-s);line-height:1.55;max-width:75ch}
.price-new .pl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.price-new .pl-table{width:100%;min-width:720px;table-layout:fixed;border-collapse:collapse;font-size:var(--f-s)}
.price-new .pl-table thead th:nth-child(1){width:22%}
.price-new .pl-table thead th:nth-child(2){width:17%}
.price-new .pl-table thead th:nth-child(3){width:33%}
.price-new .pl-table th,.price-new .pl-table td{text-align:left;vertical-align:top;padding:10px 12px;
  border-top:1px solid var(--line)}
.price-new .pl-table thead th{border-top:0;font-size:var(--f-2xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.price-new .pl-table tbody th{font-weight:500;color:var(--ink)}
.price-new .pl-table td{color:var(--muted)}
.price-new .pl-table td.pl-price{color:var(--ink);font-variant-numeric:tabular-nums}
.price-new .pl-why{display:block;margin-top:4px;font-size:var(--f-xs);line-height:1.45;color:var(--faint)}
.price-new .pl-all{margin:16px 0 0;font-size:var(--f-s)}
.price-new .pl-all a{color:var(--purple);font-weight:500}
/* a phone stacks each row: the tool, then each cell after its column name, so the price is never off-screen */
@media (max-width:640px){
  .price-new{padding:18px 14px}
  .price-new .pl-table{min-width:0;table-layout:auto}
  .price-new .pl-table thead{display:none}
  .price-new .pl-table tbody,.price-new .pl-table tr,.price-new .pl-table th,.price-new .pl-table td{display:block}
  .price-new .pl-table tr{padding:12px 0;border-top:1px solid var(--line)}
  .price-new .pl-table th,.price-new .pl-table td{padding:2px 0;border-top:0}
  .price-new .pl-table td::before{content:attr(data-l) ": ";color:var(--faint);font-size:var(--f-xs)}
}
/* their footer: black, a purple glow rising from the bottom, lavender heads, plum links */
footer::before{content:"";position:absolute;inset:auto 0 0 0;height:420px;pointer-events:none;
  background:radial-gradient(60% 90% at 50% 100%,rgba(122,76,183,.38),rgba(122,76,183,0) 70%)}
footer .wrap{position:relative}
.foot-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:900px){.foot-grid{grid-template-columns:1.6fr repeat(4,1fr);gap:40px}}
.foot-brand .brand{display:inline-flex;margin-bottom:16px}
/* h3, not h4: after the closing h2 an h4 skipped a level (our own heading_skip finding, MST-23) */
footer h3{margin:0 0 14px;font-size:var(--f-m);font-weight:400;line-height:inherit;letter-spacing:normal;color:var(--lavender)}
.foot-grid > div > a{display:block;padding:12px 0;min-height:44px;line-height:1.3}
footer a:hover,footer a:focus-visible{color:#fff}
.foot-brand a:not(.brand){color:var(--accent-ink)}
footer .legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  display:grid;gap:10px;font-size:var(--f-xs);color:var(--faint)}
@media(min-width:900px){footer .legal{grid-template-columns:auto 1fr;gap:32px}}
/* the phone menu: below 900px the links hide, and until now nothing brought them back */
.nav-burger{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;margin-left:auto;background:none;
  border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink);cursor:pointer}
@media(min-width:1140px){.nav-burger{display:none}}
@media(max-width:1139px){
  .nav-links.open{display:grid;position:absolute;left:0;right:0;top:100%;gap:2px;padding:12px 16px 16px;margin:0;
    background:#000;border-bottom:1px solid var(--line);height:auto;max-height:calc(100vh - 64px);overflow:auto}
  .nav-links.open > a{padding:12px 8px;min-height:44px;display:flex;align-items:center}
  .nav-links.open .nav-dd{display:flex;flex-wrap:wrap;align-items:center;height:auto}
  .nav-links.open .nav-dd-link,.nav-links.open .nav-dd-btn--label{padding:12px 8px;min-height:44px}
  .nav-links.open .nav-dd-btn{margin:0}
  .nav-links.open .nav-dd-panel{position:static;flex-basis:100%;width:auto;min-width:0;margin:0 0 8px;padding:4px 8px 12px;
    box-shadow:none;border:0;border-radius:0;animation:none}
  .nav-links.open .nav-dd-panel.mega{display:grid;grid-template-columns:1fr;gap:18px}
  .nav-links.open .nav-dd-panel .col{gap:18px}
  .nav-links.open .nav-dd-panel a{white-space:normal}
}
@media(max-width:899px){
  .nav-cta .nav-signin{display:none}
  .nav-cta{margin-left:0}}
/* 320px phones: brand + menu + "Start free" measured 364-371px wide (MST-20), so the
   primary CTA was cut. Below 390px the wordmark is hidden visually (it stays the link's
   accessible name) and the button loses its arrow. `.nav-in .nav-cta .btn` outranks the
   later `.nav-cta .btn` padding rule (0,3,0 vs 0,2,0). */
@media(max-width:389px){
  .nav-in{gap:8px}
  .nav-in .brand-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-in .nav-cta .btn{padding-left:12px;padding-right:12px}
  .nav-in .nav-cta .btn .arr{display:none}}
/* ---------- proof band: measured, never invented ---------- */
.band{background:var(--band);border-block:1px solid var(--line);margin-top:56px}
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:0;padding:0}
@media(min-width:820px){.proof{grid-template-columns:repeat(4,1fr)}}
.proof div{padding:34px 24px;border-right:1px solid var(--line)}
.proof div:nth-child(2n){border-right:0}
@media(min-width:820px){.proof div{border-right:1px solid var(--line)}
  .proof div:nth-child(2n){border-right:1px solid var(--line)}
  .proof div:last-child{border-right:0}}
.proof b{display:block;font-size:2.1rem;font-weight:500;letter-spacing:-.02em;
         font-variant-numeric:tabular-nums;line-height:1}
.proof span{display:block;margin-top:8px;font-size:var(--f-s);color:var(--muted);line-height:1.4}

/* ---------- sections ---------- */
section{padding:var(--sec-y) 0}
/* A deliberate four-step scale rather than nine identical blocks. The weight
   tracks what the section is FOR: connective steps sit tight, the two the
   whole page turns on - the engine and the price - get the air. Every value
   is one 16px step from its neighbour, so the rhythm is a scale and not a
   set of numbers picked by eye. */
:root{--sec-xs:56px;--sec-s:72px;--sec-y:88px;--sec-l:104px}
@media(min-width:960px){:root{--sec-xs:72px;--sec-s:92px;--sec-y:112px;--sec-l:136px}}
#start{padding:var(--sec-xs) 0}
#scope,#refuse{padding:var(--sec-s) 0}
#engine,#price{padding:var(--sec-l) 0}
.sec-head{max-width:44ch}
.sec-head h2{max-width:24ch}   /* 56px type in a 44ch column ran to four lines; two or three reads as a headline */
.sec-head p{margin:16px 0 0;font-size:var(--f-l);line-height:1.5;color:var(--muted)}
/* 2 + 1: the two measurements stacked on the left feed the gap on the right, which
   spans both rows - the layout says what the connectors say. Three equal columns
   said nothing. */
.cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:44px}
@media(min-width:760px){.cards{grid-template-columns:1.05fr 1fr;grid-auto-rows:auto;column-gap:64px}
  .cards .card-out{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:center;
    background:linear-gradient(213deg,rgba(0,255,212,.10),rgba(122,76,183,.14) 70%);border-color:rgba(0,255,212,.32)}}
.card{background:var(--purple-tint);border:1px solid var(--purple-line);border-radius:var(--r-card);
      padding:28px 26px}
.card .ic{width:40px;height:40px;border-radius:8px;background:var(--accent-wash);
          display:grid;place-items:center;margin-bottom:18px;color:var(--accent-ink)}
.card p{margin:10px 0 0;font-size:var(--f-m);line-height:1.55;color:var(--muted)}

/* ---------- refusals ---------- */
.refuse{display:grid;grid-template-columns:1fr;gap:14px;margin-top:40px}
@media(min-width:760px){.refuse{grid-template-columns:repeat(2,1fr)}}
.refuse li{list-style:none;display:flex;gap:14px;align-items:flex-start;
           padding:20px 22px;border:1px solid var(--purple-line);border-radius:var(--r-card);
           background:var(--purple-tint)}
.refuse svg{flex:none;margin-top:2px;color:var(--accent-ink)}
.refuse b{display:block;font-size:var(--f-m);font-weight:600}
.refuse p{margin:6px 0 0;font-size:var(--f-s);line-height:1.5;color:var(--muted)}

/* ---------- price ---------- */
.price{max-width:560px;margin:44px auto 0;border:1.5px solid var(--ink);
       border-radius:var(--r-lg);padding:36px 32px;text-align:center}
.price .amt{font-size:3.4rem;font-weight:500;letter-spacing:-.02em;line-height:1}
.price .amt sup{font-size:var(--f-xl);font-weight:600;vertical-align:super;margin-right:4px}
.price ul{list-style:none;margin:26px 0 0;padding:0;text-align:left;display:grid;gap:12px}
.price li{display:flex;gap:12px;font-size:var(--f-m);color:var(--muted);line-height:1.45}
.price li svg{flex:none;margin-top:3px;color:var(--good)}
.price .btn{width:100%;margin-top:28px}

/* ---------- capability grid: the agent engine ----------
   No count here. It said "21-agent" while the dispatcher held 27; the
   visible claim beside it is generated from the registry and guarded by
   bin/proof_band, but this comment was neither. */
.caps{display:grid;grid-template-columns:1fr;gap:18px;margin-top:44px}
@media(min-width:760px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.caps{grid-template-columns:repeat(3,1fr)}}
.cap{background:var(--purple-tint);border:1px solid var(--purple-line);border-radius:var(--r-card);
     padding:24px 22px}
.cap h3{font-size:var(--f-m);letter-spacing:-.01em}
.cap .n{font-family:var(--sans);font-weight:500;font-size:var(--f-2xs);letter-spacing:.08em;text-transform:uppercase;
        color:var(--lavender);display:block;margin-bottom:12px}
.cap ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cap li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
        font-size:var(--f-s);line-height:1.45;color:var(--muted)}
.cap li b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}
.st{width:9px;height:9px;border-radius:var(--r-pill);margin-top:6px;display:inline-block;flex:none}
.st.live{background:var(--good)}
.st.wired{background:transparent;border:1px solid var(--faint)}
.st.off{background:transparent;border:1px dashed var(--faint);opacity:.6}   /* not offered (Sprint 184, MST-09) */
.legend{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px;font-size:var(--f-s);
        color:var(--muted);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:10px}
.legend b{color:var(--ink);font-weight:600}
.engines{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.engines i{font-style:normal;font-family:var(--sans);font-size:var(--f-2xs);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px;color:var(--faint);
  background:var(--white)}

/* Keyboard users land on the nav every time without this. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--on-accent);
      padding:12px 18px;border-radius:0 0 8px 0;font-weight:600;font-size:var(--f-s)}
.skip:focus{left:0}

/* Pressed feedback. A button with hover but no :active feels like a picture of
   a button rather than a control. */
.btn:active{transform:translateY(1px)}
.nav-links a:active{transform:translateY(1px)}

/* Orphans: a single word alone on the last line of a paragraph. */
.lede,.sec-head p,.card p,.cap li,.refuse p,.faq p,footer p{text-wrap:pretty}

/* No shadow here: the ground is black and the robot shell carries its own hairline. */
.dcard,.figure{box-shadow:none}

/* Radii are 8 / 16 / 36 / pill, declared on each rule above; no overrides here. */

/* A tertiary text action, so every choice is not a binary of filled vs ghost. */
.btn-text{background:none;border:0;padding:12px 0;color:var(--faint);
     font-weight:500;font-size:1rem;cursor:pointer;text-decoration:none;
     text-underline-offset:5px;min-height:44px}
.btn-text:hover{text-decoration:underline}

/* Grain. Flat vector surfaces read as sterile; this is a single fixed overlay at
   very low opacity, pointer-events:none so it can never intercept a click. */
/* Their page-wide glow, verbatim: a fixed violet radial anchored to the bottom of
   the viewport, drifting 48px on a 38s loop. z-index:-1 puts it under every
   in-flow box and above the canvas the body colour paints on to. */
.glow{position:fixed;inset:-8%;z-index:-1;pointer-events:none;
      background:radial-gradient(at center bottom,rgba(74,33,126,.27) 0,rgba(0,0,0,0) 60%);
      animation:glow-drift 38s linear infinite}
@keyframes glow-drift{0%{transform:translate(0)}12.5%{transform:translate(34px,-36px)}
  25%{transform:translate(48px,0)}37.5%{transform:translate(34px,36px)}50%{transform:translate(0)}
  62.5%{transform:translate(-34px,-36px)}75%{transform:translate(-48px,0)}87.5%{transform:translate(-34px,36px)}
  100%{transform:translate(0)}}
@media (prefers-reduced-motion:reduce){.glow{animation:none}}
@media (prefers-reduced-motion:reduce){.grain{display:none}}

/* ---------- scope ledger ---------- */
/* A ledger, not cards. The .caps grid below already uses cards; two card grids
   in one page read as one long list and the reader stops distinguishing them. */
/* four groups, a heading and ONE divider each - not a hairline under every one of
   eleven rows (the spec-sheet default the taste audit names) */
.scope-group{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.scope-group:first-of-type{margin-top:44px}
.scope-h{margin:0 0 4px;font-size:var(--f-xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--lavender)}
.scope{margin:0}
.scope>div{display:grid;grid-template-columns:1fr;gap:6px;padding:18px 0}
@media(min-width:820px){
  .scope>div{grid-template-columns:15.5rem 1fr;gap:32px;align-items:baseline}
}
.scope dt{font-weight:700;font-size:var(--f-m);letter-spacing:-.01em;color:var(--ink)}
.scope dt span{display:block;font-family:var(--sans);font-size:var(--f-2xs);font-weight:600;
               letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
               margin-top:5px}
.scope dd{margin:0;font-size:var(--f-m);line-height:1.55;color:var(--muted);
          text-wrap:pretty}
.scope dd b{color:var(--ink);font-weight:600}
.scope-count{font-family:var(--sans);font-size:var(--f-2xs);color:var(--faint);white-space:nowrap;
             margin-left:6px;padding:2px 8px;border:1px solid var(--line);border-radius:var(--r-pill)}

/* the hero capability strip - breadth, above the fold */
.hero-caps{display:flex;flex-wrap:wrap;gap:7px;margin:26px auto 0;max-width:36rem}
.hero-caps i{font-style:normal;font-family:var(--sans);font-weight:500;font-size:var(--f-2xs);
             letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
             border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;
             background:transparent}
/* No highlighted subset here. The engine legend below uses colour to mean
   AVAILABILITY, so accenting three of eleven pills reads as "only these three
   work" - misleading, and the reverse of what this strip is for. */

/* ---------- pricing comparison ---------- */
.cmp{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
     border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:34px}
@media(min-width:720px){.cmp{grid-template-columns:1fr 1fr}}
.cmp>div{background:var(--white);padding:26px 24px}
.cmp .lab{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.12em;
          text-transform:uppercase;color:var(--faint)}
.cmp .fig{font-size:2.1rem;font-weight:500;letter-spacing:-.02em;margin-top:8px;
          font-variant-numeric:tabular-nums}
.cmp .yr{font-size:var(--f-s);color:var(--muted);margin-top:6px}
.cmp.ours .fig{color:var(--accent-ink)}
.excl{margin-top:34px;border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px;
      background:var(--band)}
.excl h3{margin:0 0 6px;font-size:var(--f-m)}
.excl>p{margin:0 0 16px;font-size:var(--f-s);color:var(--muted);max-width:60ch}
.excl ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
@media(min-width:700px){.excl ul{grid-template-columns:1fr 1fr;gap:11px 28px}}
.excl li{font-size:var(--f-s);line-height:1.45;color:var(--muted);
         display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.excl li b{color:var(--ink);font-weight:600}
.excl .x{width:16px;height:16px;margin-top:4px;flex:none;color:var(--faint)}

/* ---------- exhibits: real output, shown at size ---------- */
.exhibit{margin:34px 0 0}
.exhibit img{display:block;width:100%;height:auto;border-radius:var(--r-card);
     border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.exhibit figcaption{margin-top:12px;font-family:var(--sans);font-size:var(--f-2xs);
                    letter-spacing:.03em;color:var(--faint);text-wrap:pretty}
.exhibit figcaption b{color:var(--ink);font-weight:500}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:1fr;gap:18px;margin-top:38px;align-items:start}
@media(min-width:880px){.tiers{grid-template-columns:repeat(3,1fr);gap:20px}}
.tier{border:1px solid var(--purple-line);border-radius:var(--r-card);padding:28px 26px;background:var(--purple-tint);
      display:flex;flex-direction:column;min-height:100%}
.tier.pick{background:var(--accent-wash);border-color:rgba(0,255,212,.32)}
.tier .n{font-family:var(--sans);font-weight:500;font-size:var(--f-2xs);letter-spacing:.08em;text-transform:uppercase;
         color:var(--lavender)}
.tier.pick .n{color:var(--lavender)}
.tier .amt{font-size:2.5rem;font-weight:500;letter-spacing:-.02em;margin:10px 0 2px;
           font-variant-numeric:tabular-nums;line-height:1}
.tier .amt sup{font-size:var(--f-l);vertical-align:super;margin-right:1px}
.tier .amt em{font-style:normal;font-size:var(--f-s);font-weight:500;color:var(--faint)}
.tier .who{font-size:var(--f-s);color:var(--muted);margin:8px 0 18px;text-wrap:pretty}
.tier ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;flex:1}
.tier li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
         font-size:var(--f-s);line-height:1.45;color:var(--muted)}
.tier li svg{width:16px;height:16px;margin-top:4px;color:var(--good);flex:none}
.tier li b{color:var(--ink);font-weight:600}
.tier .btn{width:100%;text-align:center;justify-content:center}
.tier .flag{font-family:var(--sans);font-weight:600;font-size:var(--f-2xs);letter-spacing:.06em;text-transform:uppercase;
            color:var(--accent-ink);background:var(--accent-wash);border:1px solid rgba(0,255,212,.32);align-self:flex-start;
            border-radius:999px;padding:4px 10px;display:inline-block;margin-bottom:12px}

/* ---------- guarantee ---------- */
.guar{margin-top:34px;border:1px solid rgba(0,255,212,.32);border-radius:var(--r-card);padding:28px 26px;
      background:rgba(0,255,212,.10)}
.guar h3{margin:0 0 8px;font-size:var(--f-xl);letter-spacing:-.015em}
.guar p{margin:0 0 12px;font-size:var(--f-m);color:var(--muted);max-width:64ch;text-wrap:pretty}
.guar p:last-child{margin:0}
.guar b{color:var(--ink);font-weight:600}

/* ---------- the mascot ---------- */
/* Strip the bundle's dark card. These override assets/robot-embed.css because
   this <style> block loads after it and the specificity matches. */
.figure .rp-shell{min-height:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.figure .rp-env,.figure .rp-grid,.figure .rp-glow,.figure .rp-fade{display:none}
/* The caption was anchored to the old dark card. With the robot as a
   background mascot it has nowhere to sit and was painting above the headline.
   The hero-note line already says the same thing in the right place. */
.figure .rp-caption{display:none}

/* Hero becomes a stage. The robot is scaled past its column and bleeds right;
   the copy sits over it. */
/* The robot is deliberately allowed to bleed past the right edge; without a clip
   that bleed extends the DOCUMENT and produces horizontal scroll (measured: 3
   overflowing elements at 1440 and 1024). `clip` rather than `hidden` because
   hidden creates a scroll container and would break position:sticky inside. */
.hero{position:relative;overflow-x:clip}
@supports not (overflow-x:clip){.hero{overflow-x:hidden}}
.hero>.wrap,.hero .hero-copy{position:relative;z-index:2}
/* Pushed further right so Quinn clears the copy column instead of sitting
   under the headline. translate X 9% -> 20%; the hero clips the bleed. */
/* Was absolute, bottom-right, scaled 1.36 behind a LEFT-aligned headline. The
   headline is centred now and the reference puts its product visual beneath
   the copy, so the robot does the same: full width, its own dark shell, no
   scrim needed over it. */
.figure-wrap{position:relative;inset:auto;width:min(100%,1012px);margin:44px auto 0;will-change:transform;
        aspect-ratio:1012/662;z-index:1;pointer-events:none;transform:none}
/* The live scene renders ~38 deg hue (yellow); the graded stills sit at 25.7 deg
   (gold). Measured, not eyeballed: this filter lands the canvas at 28.5 deg, so
   the mascot is the same colour whether it is the 3D scene or a still. A larger
   rotation (-22deg) overshoots past red to 45.6 deg. */
.figure{position:relative;width:100%;height:100%;min-width:0;opacity:1;filter:none}
.figure .rp-canvas,.figure canvas{pointer-events:auto}

/* The scrim is what keeps the headline readable where the robot passes under
   it. Measured, not assumed: without it the h1 drops to ~1.9:1 over gold. */
.hero-copy::before{content:none}

@media(max-width:900px){
  /* On a phone the robot cannot sit behind the copy and stay legible, so it
     drops below it at full width instead of being faded into illegibility. */
  .figure-wrap{position:relative;inset:auto;width:100%;transform:none;margin-top:28px}
  .figure{opacity:1}
  .hero-copy::before{display:none}
}

/* Still frames of the same robot, used where a second live scene would cost
   another WebGL context. */
.mascot{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.mascot-slot{position:relative;overflow-x:clip}
/* height:auto is load-bearing. Without it the browser uses the literal
   height attribute and the robot renders 230x1365 - stretched 4x. */
.mascot-side{position:absolute;right:8px;bottom:0;width:clamp(150px,15vw,260px);
             height:auto;opacity:.92;z-index:0;pointer-events:none;
             filter:none}
@media(max-width:860px){.mascot-side{display:none}}
@media(max-width:1447px){#scope .mascot-side{display:none}}

/* The Spline model's chest is a baked mesh with a UV map we do not control, so
   the mark is an overlay pinned in the figure's own coordinate space - it
   scales with the robot rather than drifting between breakpoints. */
@media(max-width:900px){}

/* ---------- start block ---------- */
.start-wrap{max-width:44rem;margin:0 auto;text-align:center}
.start-note{font-family:var(--sans);font-weight:500;font-size:var(--f-xs);letter-spacing:.08em;
            text-transform:uppercase;color:var(--lavender);margin-bottom:14px}
.start-wrap h2{margin:0 0 14px}
.start-points{list-style:none;margin:0 auto 30px;padding:0;display:grid;gap:10px;
              max-width:32rem;text-align:left}
.start-points li{display:grid;grid-template-columns:auto 1fr;gap:11px;
                 align-items:start;font-size:var(--f-m);color:var(--muted);line-height:1.5}
.start-points li svg{width:17px;height:17px;margin-top:5px;color:var(--good);flex:none}
.start-points li b{color:var(--ink);font-weight:600}
.start-form{display:grid;gap:12px;max-width:32rem;margin:0 auto;text-align:left}
@media(min-width:620px){.start-form{grid-template-columns:1fr auto;align-items:end}}
.start-field label{display:block;font-size:var(--f-xs);font-weight:600;margin-bottom:7px}
.start-field input{width:100%;font:inherit;font-size:var(--f-m);padding:14px 16px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--white);
  color:var(--ink);min-height:52px}
.start-field input::placeholder{color:var(--faint)}
.start-field input:focus-visible{outline:3px solid var(--accent);outline-offset:2px;
  border-color:var(--accent)}
.start-form .btn{white-space:nowrap;min-height:52px}
.start-help{font-size:var(--f-s);color:var(--muted);margin:12px auto 0;max-width:32rem;
            text-align:left}
.start-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;
             margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.start-chips div{text-align:center}
.start-chips b{display:block;font-size:var(--f-m);font-weight:500;letter-spacing:-.01em}
.start-chips span{display:block;font-family:var(--sans);font-weight:500;font-size:var(--f-2xs);
                  letter-spacing:.08em;text-transform:uppercase;color:var(--lavender);
                  margin-top:4px}

/* ---------- faq ---------- */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:28px 4px;font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:400;line-height:1.3;
             list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--muted);
                    transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 24px;font-size:var(--f-m);line-height:1.6;color:var(--muted);max-width:62ch}

/* ---------- footer ---------- */
.close-cta{padding:120px 0 140px;text-align:center}
.close-cta h2{font-size:clamp(2.6rem,5.3vw,4.75rem);letter-spacing:-.025em;line-height:1.1;max-width:14ch;margin:0 auto}
.close-cta .hero-actions{margin-top:36px}
footer{position:relative;background:var(--ground);border-top:1px solid var(--line);padding:64px 0 40px;
        font-size:var(--f-s);color:var(--plum);overflow:hidden}
footer .cols{display:none}
@media(min-width:760px){footer .cols{grid-template-columns:2fr 1fr}}
footer p{margin:0 0 12px;line-height:1.55;max-width:44ch}
footer a{color:var(--plum);text-decoration:none;transition:color .3s ease}
.legal{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
       font-size:var(--f-xs);color:var(--faint)}

/* ================= data graphics (bin/site_graphics.py) =================
   A measurement product should show a measurement. Every number in these
   blocks is generated from the engine at build time and guarded by
   site_graphics.verify() in selfcheck, so the page cannot drift from the code.
   Colours are measured on BOTH grounds this page uses (white, and the band
   #F5F5F4); the ratios are in the generator beside each hex.            */
.gfx{max-width:1180px;margin:56px auto 0;padding:0 24px}
.gfx-head{max-width:60ch}
.gfx h3{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15;font-weight:400;letter-spacing:-.02em}
.gfx-sub{font-size:var(--f-m);line-height:1.55;color:var(--muted);margin:10px 0 0;max-width:62ch}

/* the inventory: one square per check, dense on purpose */
.gfx-grid{list-style:none;display:grid;gap:6px;margin:26px 0 0;padding:0;
          grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}
.gfx-cell{position:relative;aspect-ratio:1;border-radius:8px;cursor:help;
          background:color-mix(in srgb,var(--c) 15%,transparent);
          border:1px solid color-mix(in srgb,var(--c) 34%,transparent);
          transition:background .3s ease,border-color .3s ease,transform .3s ease}
.gfx-cell:hover,.gfx-cell:focus-visible{background:color-mix(in srgb,var(--c) 34%,transparent);
          border-color:var(--c);transform:translateY(-2px)}
.gfx-cell:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* the label is for assistive tech and the tooltip, not for the eye */
.gfx-vis{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.gfx-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0;padding:0;
            font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.02em;color:var(--muted)}
.gfx-legend b{color:var(--ink);font-weight:600;margin-left:3px}
.gfx-of{color:var(--faint);margin-left:5px}
.gfx-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;
         background:var(--c);vertical-align:-1px}

/* the arithmetic, and the refusals, side by side */
.gfx-split{display:grid;gap:44px;grid-template-columns:1fr 1fr;align-items:start;margin-top:64px}
@media (max-width:820px){.gfx-split{grid-template-columns:1fr;gap:40px}}

.gfx-bars{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.gfx-bars li{display:grid;grid-template-columns:5.5rem 1fr 2.6rem;align-items:center;gap:12px}
.gfx-sev{font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gfx-track{height:12px;border-radius:var(--r-pill);background:var(--band);
           border:1px solid var(--line);overflow:hidden}
.gfx-fill{display:block;height:100%;border-radius:var(--r-pill)}
.gfx-critical{background:#FF7A7A}.gfx-high{background:#FFB067}
.gfx-medium{background:#F5D76E}.gfx-low{background:#8F8F8F}
.gfx-w{font-family:var(--mono);font-size:var(--f-s);font-weight:500;text-align:right;
       font-variant-numeric:tabular-nums}

.gfx-refuse{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.gfx-refuse li{padding:16px 18px;border:1px solid var(--purple-line);border-radius:var(--r-card);
               background:var(--purple-tint)}
.gfx-refuse b{display:block;font-size:var(--f-m);margin-bottom:5px}
/* ---- the price arithmetic (bin/site_graphics.py render_price) ------------
   Same visual language as the score bars above: one shared track, tabular
   totals, colour carrying which side a row is on. Two rules matter here.
   ONE SCALE across both horizons - that is the whole point, 24 months is
   twice 12. And EVERY total printed, so the bar never has to be trusted.
   Ours is the accent; theirs is the neutral, not a red - we are not drawing
   a villain.                                                            */
.parith{max-width:1180px;margin:44px auto 0;padding:0}
.parith-h{font-family:var(--sans);font-weight:500;font-size:var(--f-2xs);letter-spacing:.08em;text-transform:uppercase;
          color:var(--lavender);margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.parith-rows{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.parith-rows li{display:grid;grid-template-columns:minmax(0,15rem) 1fr 5rem;align-items:center;gap:16px}
@media (max-width:700px){
  .parith-rows li{grid-template-columns:1fr auto;gap:4px 12px}
  .p-track{grid-column:1/-1;order:3}
  .p-tot{text-align:right}
}
.p-lab{font-size:var(--f-s);font-weight:600;line-height:1.3;min-width:0}
.p-lab em{display:block;font-style:normal;font-size:var(--f-xs);font-weight:400;color:var(--muted);margin-top:3px}
.p-track{height:14px;border-radius:var(--r-pill);background:var(--band);
         border:1px solid var(--line);overflow:hidden}
/* min-width so an honestly tiny bar is still a bar and not a rendering fault */
.p-fill{display:block;height:100%;min-width:3px;border-radius:var(--r-pill);background:var(--faint)}
.p-ours .p-fill{background:var(--accent)}
.p-ours-2 .p-fill{background:rgba(0,255,212,.55)}
.p-tot{font-family:var(--mono);font-size:var(--f-m);font-weight:600;text-align:right;
       font-variant-numeric:tabular-nums}
.p-self .p-tot{color:var(--muted)}
.parith-note{margin:30px 0 0;padding:18px 20px;border:1px solid var(--purple-line);border-radius:var(--r-card);
             background:var(--purple-tint);font-size:var(--f-s);line-height:1.6;color:var(--muted)}
.parith-note b{color:var(--ink)}

.gfx-refuse span{display:block;font-size:var(--f-s);line-height:1.5;color:var(--muted)}

@media (prefers-reduced-motion:reduce){.gfx-cell{transition:none}.gfx-cell:hover{transform:none}}

/* A finger is not a cursor: the squares are focusable and carry a tooltip, so
   on a touch device they are targets and must clear 44px (measured 38-42px on
   375/768/1440 before this rule). */
@media (pointer:coarse){
  .gfx-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
}

/* ---- paper grain: large light areas were dead flat --------------------
   One inline SVG turbulence, no request, no script, under everything and
   inert to the pointer. Kept faint enough to read as paper, not as noise. */
body::after{content:none;position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@media print{body::after{display:none}}


  /* --- For developers: the MCP section. Own prefix so nothing here can collide
     with the 134 classes already defined above. --- */
  .mcp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
            gap:18px;margin-top:30px}
  .mcp-card{background:var(--purple-tint);border:1px solid var(--purple-line);border-radius:var(--r-card);
            padding:22px 24px}
  .mcp-card h3{margin:0 0 10px;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink)}
  .mcp-card p{margin:0;font-size:var(--f-s);line-height:1.6;color:var(--muted)}
  .mcp-card p+p{margin-top:10px}
  .mcp-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- motion, depth, 3d (pass D) ----------
   Entrances are paused at frame 0 until seen - not hidden by a base rule - so a
   guard that kills animations, a no-JS visitor and reduced-motion all get the
   resting page with nothing missing. Finished entrances drop their class. */
.rv{animation:rv-in .9s cubic-bezier(.16,1,.3,1) both paused;animation-delay:calc(var(--i,0) * .07s)}
.rv.in{animation-play-state:running}
@keyframes rv-in{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.rv-3d{animation-name:rv-3d}
@keyframes rv-3d{from{opacity:0;transform:perspective(1400px) rotateX(10deg) translateY(36px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}}
/* hyperframe depth: an inset highlight, a deep soft shadow, a lift and a lavender
   spotlight that follows the cursor (JS writes --mx/--my on fine pointers) */
.hf{--mx:50%;--my:50%;position:relative;isolation:isolate;   /* the spotlight's rest position; JS moves it */
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 50px -36px rgba(0,0,0,.9);
    transition:transform .5s var(--spring),border-color var(--dur-hover) ease,box-shadow var(--dur-ui) ease}
.hf::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
    background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(170,133,236,.18),transparent 60%);
    transition:opacity var(--dur-ui) ease}
.hf:hover{transform:translateY(-3px);border-color:rgba(170,133,236,.48);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 36px 60px -36px rgba(0,0,0,.95),0 0 0 1px rgba(170,133,236,.12)}
.hf:hover::after{opacity:1}
.tier.pick.hf:hover,.plan.pick.hf:hover{border-color:rgba(0,255,212,.55)}
/* 3d tilt toward the cursor: JS writes --rx/--ry; the lift rides along */
.tilt{--rx:0deg;--ry:0deg;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
      transition:transform .5s var(--spring);will-change:transform}
.tilt:hover{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)}
.tilt.moving,.tilt.moving:hover{transition:transform .12s ease-out}
.exhibit{perspective:1400px}
/* bars grow to their real width on reveal */
.grow .gfx-fill,.grow .p-fill{transform-origin:left;animation:grow .9s cubic-bezier(.16,1,.3,1) both paused;animation-delay:calc(var(--i,0) * .08s)}
.grow.in .gfx-fill,.grow.in .p-fill{animation-play-state:running}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
/* the mascots float; their parallax is a JS transform on a separate axis */
.mascot-side{animation:float 7s ease-in-out infinite;will-change:transform}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* menus: the sheet drops in on a perspective, the items cascade 30ms apart, a
   hovered item slides 4px. backwards-fill so the hover transform survives. */
.nav-dd-panel{transform-origin:40px top}   /* the trigger sits 40px in from the sheet's left edge */
@keyframes dd-in{from{opacity:0;transform:perspective(1200px) rotateX(-8deg) scale(.97)}to{opacity:1;transform:none}}
.nav-dd-panel a{animation:dd-item .3s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * .03s);
  transition:color var(--dur-hover) ease,transform var(--dur-hover) var(--ease-out)}
@keyframes dd-item{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nav-dd-panel a:hover{transform:translateX(4px)}
/* reading progress: a mint-to-lavender line along the bottom of the bar */
.nav{--sp:0}
.nav::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;pointer-events:none;
  transform-origin:left;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--accent),var(--lavender))}
/* the closing statement sits on a slow aurora */
.close-cta{position:relative;isolation:isolate;overflow:hidden}
/* three soft blobs that ROTATE (a composited transform) - the first cut was a conic
   gradient under filter:blur(90px), repainted on every frame of a 16s loop */
.close-cta::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1;margin:calc(min(900px,120vw) / -2) 0 0 calc(min(900px,120vw) / -2);
  border-radius:50%;z-index:-1;pointer-events:none;will-change:transform;animation:aurora 28s linear infinite;
  background:
    radial-gradient(closest-side at 32% 40%,rgba(0,255,212,.18),rgba(0,255,212,0) 72%),
    radial-gradient(closest-side at 68% 62%,rgba(122,76,183,.36),rgba(122,76,183,0) 72%),
    radial-gradient(closest-side at 52% 22%,rgba(255,173,219,.14),rgba(255,173,219,0) 72%)}
@keyframes aurora{to{transform:rotate(360deg)}}
/* ---------- the film (pass G3) ---------- */
.demo{margin-top:56px}
.demo-shell{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:#161616;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.demo-video{display:block;width:100%;height:auto;background:#161616}
.demo-caps{list-style:none;margin:0;padding:0;position:absolute;left:16px;right:72px;bottom:16px;height:0;pointer-events:none}
.demo-caps li{position:absolute;left:0;bottom:0;max-width:62ch;padding:10px 14px;border-radius:8px;
  background:rgba(0,0,0,.78);color:#fff;font-size:.95rem;line-height:1.4;
  opacity:0;transform:translateY(8px);transition:opacity var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out)}
.demo-caps li.on{opacity:1;transform:none}
.demo-play{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.72);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background var(--dur-hover) ease,transform var(--dur-press) var(--ease-out)}
.demo-play:hover{background:rgba(0,0,0,.9)}
.demo-play:active{transform:scale(.94)}
.demo-play .i-play,.demo-play[aria-pressed="true"] .i-pause{display:none}
.demo-play[aria-pressed="true"] .i-play{display:block}
@media (prefers-reduced-motion:reduce){.demo-caps li{transition:opacity var(--dur-ui) ease;transform:none}}

/* the progress line and the parallaxes ride the scroll timeline where the browser has
   one; the rAF listener in the script below is the fallback and stands down when it does */
@supports (animation-timeline: scroll()){
  .nav::after{animation:progress linear both;animation-timeline:scroll(root)}
  @keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .mascot-side{animation:float 7s ease-in-out infinite,drift linear both;animation-timeline:auto,view();
               animation-range:normal,entry 0% exit 100%}
  @keyframes drift{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
  .figure-wrap:not(.rise){animation:figdrift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes figdrift{from{transform:translateY(0)}to{transform:translateY(80px)}}
}
/* transform hovers only where a hover exists; a tap fires a false hover on touch */
@media (hover:none){.hf:hover{transform:none}.nav-dd-panel a:hover{transform:none}.tilt:hover{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}
/* connectors, drawn by JS only where the page has a real flow */
.cards.hf-flow{position:relative}
.hf-path{fill:none;stroke:rgba(170,133,236,.55);stroke-width:1.5;stroke-dasharray:4 6}
.hf-node{fill:#000;stroke:rgba(170,133,236,.7);stroke-width:1.5}
.hf-dot{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(0,255,212,.9))}
@media (prefers-reduced-motion:reduce){
  /* movement goes; colour and opacity feedback stays, so a hover still answers */
  .rv,.rv-3d,.grow .gfx-fill,.grow .p-fill,.mascot-side,.nav-dd-panel a,.close-cta::before,.figure-wrap,.nav::after{animation:none}
  .tilt,.tilt:hover,.hf:hover,.btn:active,.nav-dd-btn:active,.nav-dd-panel a:hover{transform:none}
  .hf,.tilt{transition:border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease}
  .hf::after{transition:opacity var(--dur-hover) ease}
  .nav-dd-panel a{transition:color var(--dur-hover) ease}
  .btn:active{opacity:.85}
  .hf-conn{display:none}
}

/* ---------- SynthAI grading (pass H): the literals the dark system wrote, flipped ----------
   Values measured on synthai.demos.tailgrids.com at 1440, 2026-09-20. */
html{background:var(--ground)}
body{background:var(--ground);color:var(--ink)}
.glow{display:none}                                  /* the violet page glow was SearchAtlas's */
/* their signature: white panels, 12px radius, 12px apart, on the off-white ground */
main{padding:0 12px}
main > section,main > .band,main > header.hero,.close-cta{background:var(--white);border-radius:12px;margin:0 0 12px}
.band{border-block:0;margin-top:0}
section{padding:calc(var(--sec-y) * .82) 0}
@media(max-width:640px){main{padding:0 8px}main > section,main > .band,main > header.hero,.close-cta{border-radius:10px;margin-bottom:8px}}
/* the hero panel carries their pastel haze: pink, lavender, mint, very light */
main > header.hero{overflow:hidden;
  background:
    radial-gradient(60% 55% at 82% 18%,rgba(214,208,255,.70),rgba(214,208,255,0) 70%),
    radial-gradient(55% 50% at 14% 86%,rgba(255,214,236,.62),rgba(255,214,236,0) 70%),
    radial-gradient(50% 45% at 62% 66%,rgba(211,245,232,.65),rgba(211,245,232,0) 70%),
    #fff}
.hero{padding-top:96px}
h1{font-weight:500;letter-spacing:-.02em;color:var(--ink)}
h2{font-weight:500}
.lede{color:var(--muted)}
.kick{color:var(--ink)}
.hero-checks{color:var(--muted)}
.hero-checks li + li{border-left:1px solid rgba(0,0,0,.12)}
.hero-checks svg{color:var(--good)}
.btn-text{color:var(--muted)}
/* the Spline shell sits on the haze: its own dark environment goes light */
.figure .rp-shell{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 60px -36px rgba(0,0,0,.25)}
.figure .rp-env{background:radial-gradient(120% 90% at 60% 42%,rgba(214,208,255,.55),rgba(214,208,255,0) 58%),radial-gradient(80% 60% at 14% 8%,rgba(255,214,236,.5),rgba(255,214,236,0) 62%),linear-gradient(180deg,#fff,#F7F7F7)}
.figure .rp-grid{opacity:.5;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px)}
/* ---- the bar ---- */
.announce{background:var(--accent);color:var(--on-accent)}
.skip{background:var(--accent);color:var(--on-accent)}
.nav{background:rgba(247,247,247,.82);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line)}
.brand{color:var(--ink);font-family:var(--sans);letter-spacing:-.02em;text-transform:none;font-size:1.05rem;font-weight:600}
.brand .mark{background:var(--accent);color:var(--on-accent)}
.nav-links a,.nav-dd-btn,.nav-dd-link{color:var(--ink);font-family:var(--mono);font-size:.82rem;text-transform:uppercase;letter-spacing:0}   /* theirs: Space Mono uppercase */
.nav-links > a,.nav-dd-link,.nav-dd-btn--label{padding:10px 10px;border-radius:var(--r-btn);white-space:nowrap;transition:background var(--dur-hover) ease,color var(--dur-hover) ease}
.nav-links{gap:6px;margin-left:16px}
.nav-cta .btn{white-space:nowrap;padding-left:16px;padding-right:16px}
.nav-cta .btn .arr{margin-left:0}
.nav-links > a:hover,.nav-links > a:focus-visible,.nav-dd:hover .nav-dd-link,.nav-dd.open .nav-dd-link,.nav-dd:hover .nav-dd-btn,.nav-dd.open .nav-dd-btn,
.nav-dd-link:focus-visible,.nav-dd-btn:focus-visible{color:var(--ink);background:rgba(0,0,0,.05)}
.nav-dd-link .spark path{fill:url(#spk)}
.nav-dd-panel{background:#fff;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px -20px rgba(0,0,0,.18);top:calc(100% + 6px)}
.nav-dd-panel h4{color:var(--faint);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.72rem;text-transform:uppercase}
.nav-dd-panel a{color:var(--ink);font-family:var(--sans);font-size:1rem;text-transform:none}
.nav-dd-panel a:hover,.nav-dd-panel a:focus-visible{color:var(--purple)}
.nav-dd-panel .tag{color:var(--purple);background:var(--tint-lavender);border:1px solid rgba(91,63,191,.25)}
.nav-dd-panel a .grad{-webkit-background-clip:text;background-clip:text}
.nav::after{background:linear-gradient(90deg,var(--purple),#A6367A)}
.nav-burger{border-color:var(--line);color:var(--ink)}
@media(max-width:1139px){.nav-links.open{background:#fff;border-bottom:1px solid var(--line)}}
/* ---- buttons: their black 8px, mono uppercase, an arrow that slides; the pasted
   component's hover (scale 1.02, lighten, press .98) and a dock-style group spring ---- */
.btn{border-radius:var(--r-btn);font-family:var(--mono);font-size:.875rem;text-transform:uppercase;letter-spacing:0;font-weight:400;
     transition:background var(--dur-hover) ease,border-color var(--dur-hover) ease,color var(--dur-hover) ease,
                box-shadow var(--dur-hover) ease,transform .5s var(--spring)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:none}
.btn-primary:hover{background:#2E2E2E;filter:none;transform:scale(1.02)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost,.btn-purple{background:#fff;color:var(--ink);border:1px solid var(--ink);isolation:auto}
.btn-purple::before,.btn-purple::after{content:none}
.btn-ghost:hover,.btn-purple:hover{background:#F2F2F2;border-color:var(--ink);transform:scale(1.02)}
.btn-ghost:active,.btn-purple:active{transform:scale(.98)}
.btn .arr{display:inline-block;width:1em;height:1em;margin-left:2px;transition:transform var(--dur-hover) var(--ease-out)}
.btn:hover .arr{transform:translate(3px,-3px)}
/* the dock: in a row of buttons the hovered one grows and the others ease back */
.hero-actions:has(.btn:hover) .btn:not(:hover){transform:scale(.985)}
.nav-cta:has(.btn:hover) .btn:not(:hover){transform:scale(.985)}
.nav-cta .btn-sm,.hero-actions .btn{min-height:46px}
.float-cta{background:var(--accent);color:var(--on-accent);box-shadow:0 12px 30px -12px rgba(0,0,0,.35);border-radius:var(--r-btn);font-family:var(--mono);text-transform:uppercase;font-size:.875rem}
/* ---- cards: their light-grey card, pastel where the page needs a second surface ---- */
.hf{box-shadow:0 1px 2px rgba(0,0,0,.03)}
.hf::after{background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(0,0,0,.045),transparent 60%)}
.hf:hover{border-color:rgba(0,0,0,.18);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 40px -24px rgba(0,0,0,.22)}
.card,.cap,.mcp-card,.refuse li,.gfx-refuse li,.parith-note{background:var(--purple-tint);border-color:var(--purple-line)}
.cards .card-out{background:var(--tint-lavender);border-color:rgba(91,63,191,.25)}
.hf-path{stroke:rgba(91,63,191,.55)}
.hf-node{fill:#fff;stroke:rgba(91,63,191,.7)}
.hf-dot{fill:var(--purple);filter:drop-shadow(0 0 6px rgba(91,63,191,.6))}
.tier{background:var(--purple-tint);border-color:var(--purple-line)}
.tier.pick{background:var(--tint-green);border-color:var(--ink)}
.tier.pick.hf:hover,.plan.pick.hf:hover{border-color:var(--ink)}
.tier .flag{color:var(--good);background:#fff;border-color:rgba(31,107,74,.3)}
.plan{background:var(--purple-tint);border-color:var(--purple-line)}
.plan.pick{background:var(--tint-green);border-color:var(--ink)}
.plan-badge{color:var(--good);background:#fff;border-color:rgba(31,107,74,.3)}
.plan-amt,.tier .amt{color:var(--ink)}
.guar{background:var(--tint-pink);border-color:rgba(166,54,122,.25)}
.excl{border-color:var(--line)}
.proof b{color:var(--ink)}
.card .ic{background:var(--tint-lavender);color:var(--purple)}
.exhibit img{border-color:var(--line);box-shadow:0 30px 60px -36px rgba(0,0,0,.25)}
.dcard,.figure{box-shadow:none}
.scope-count{border-color:var(--line);background:#fff}
.scope-h,.eyebrow,.start-note,.cap .n,.parith-h,.tier .n,.start-chips span,.gfx-sev{font-family:var(--mono);color:var(--ink);letter-spacing:0}
.gfx-critical{background:#C0392B}.gfx-high{background:#C96A0E}.gfx-medium{background:#A38200}.gfx-low{background:#808080}   /* graphics: >= 3:1 on white */
.gfx-track,.p-track{background:#EDEDED;border-color:var(--line)}
.p-fill{background:#B3B3B3}.p-ours .p-fill{background:var(--accent)}
.engines i,.hero-caps i{border-color:var(--line);color:var(--muted)}
.st.wired{border-color:var(--faint)}
/* ---- the film ---- */
.demo-shell{background:#F2F2F2;border-color:var(--line);box-shadow:0 30px 60px -36px rgba(0,0,0,.25)}
.demo-video{background:#F2F2F2}
/* ---- closing CTA: their black-bordered panel with the haze inside ---- */
.close-cta{border:2px solid var(--ink);border-radius:16px;margin:0 12px 12px;
  background:radial-gradient(60% 55% at 80% 20%,rgba(214,208,255,.7),rgba(214,208,255,0) 70%),radial-gradient(50% 50% at 15% 90%,rgba(255,214,236,.6),rgba(255,214,236,0) 70%),#fff}
.close-cta::before{background:radial-gradient(closest-side at 32% 40%,rgba(211,245,232,.9),rgba(211,245,232,0) 72%),radial-gradient(closest-side at 68% 62%,rgba(214,208,255,.8),rgba(214,208,255,0) 72%),radial-gradient(closest-side at 52% 22%,rgba(255,214,236,.7),rgba(255,214,236,0) 72%)}
/* ---- footer: theirs is black ---- */
footer{background:#000;color:var(--plum);border-top:0;margin:0 12px 12px;border-radius:12px}
footer::before{content:none}
footer .brand{color:#fff}
footer .brand .mark{background:#fff;color:#000}
footer h3{color:#fff}
footer a:hover,footer a:focus-visible{color:#fff}
.foot-brand a:not(.brand){color:#fff}
footer .legal{border-top:1px solid rgba(255,255,255,.14);color:var(--plum)}
/* ---- faq, film captions, misc ---- */
.faq{border-top-color:var(--line)}
.faq details{border-bottom-color:var(--line)}
.faq summary{color:var(--ink)}
.faq summary::after{color:var(--muted)}
.demo-caps li{background:rgba(23,23,23,.86);color:#fff}
.demo-play{background:rgba(23,23,23,.86);border-color:rgba(255,255,255,.2);color:#fff}
.who-photo{border-color:var(--line)}


/* ---------- pass J: the hero as previously built - the copy overlapping Quinn ----------
   Left-aligned copy column, the robot large at the bottom-right BEHIND it, a scrim
   fading right so the headline stays readable where the robot passes under it.
   (The pre-SearchAtlas geometry, inside the SynthAI panel.) */
.hero-copy{position:relative;z-index:2;text-align:left;max-width:640px;margin:0}
.hero-copy h1{font-size:clamp(2.6rem,4.4vw,3.9rem);line-height:1.08;text-wrap:balance}
.lede{max-width:560px;margin:20px 0 0}
.kick{margin:14px 0 0;max-width:560px}
.hero-actions{justify-content:flex-start}
.hero-checks{justify-content:flex-start;margin:22px 0 0}
.hero-checks li:first-child{padding-left:0}
/* the scrim: white over the copy, fading over the 120px beyond it, so the robot's
   arm shows through faintly under the lede as it did before */
.hero-copy::before{content:"";position:absolute;inset:-90px -240px -130px -140px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 44% 48%,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 46%,rgba(255,255,255,.6) 62%,rgba(255,255,255,0) 76%)}
/* Quinn: bottom-right OF THE PANEL, scaled up, behind the copy; the panel clips his
   legs at its foot exactly (the scene frames him knees-up, so the canvas bottom must
   sit on the panel's edge or the cut shows). `.hero>.wrap` was position:relative for
   its z-index, which made the copy's box the containing block and hung the robot off
   the copy's bottom instead of the panel's - measured: wrap bottom 585, panel 850. */
.hero>.wrap{position:static}
@media(min-width:901px){
  .hero{min-height:740px;padding-bottom:0}
  .figure-wrap{position:absolute;inset:auto 0 0 auto;width:min(62vw,820px);aspect-ratio:1012/662;margin:0;z-index:1;pointer-events:none;transform:none}
  .figure-box{width:100%;height:100%;transform:translate(22%,0) scale(1.4);transform-origin:100% 100%}
}
/* between 901 and 1199 the copy column takes most of the width: narrower copy,
   a tighter scrim, the robot further right so the chest clears the fade */
@media(min-width:901px) and (max-width:1199px){
  .hero-copy{max-width:540px}
  .hero-copy::before{inset:-90px -170px -130px -140px}
}
@media(min-width:1200px) and (max-width:1399px){.figure-box{transform:translate(-2%,0) scale(1.34)}}
@media(min-width:1400px){.figure-box{transform:translate(-6%,0) scale(1.28)}}
@media(max-width:900px){
  /* below the copy at full width; the embed zooms the scene out on phones, so the
     box is scaled up instead and the panel clips the legs as on desktop */
  .hero{padding-bottom:0}
  /* a portrait box on phones: the landscape 1012/662 aspect shows head and
     shoulders only at a width of 326px */
  .figure-wrap{margin-top:28px;aspect-ratio:1/1;max-width:420px;margin-inline:auto}
  .figure{aspect-ratio:auto}
  .figure-box{width:100%;height:100%;transform:none}
  .hero-copy::before{display:none}
}
.figure{position:relative;width:100%;height:100%}
/* no shell card: the robot floats on the panel's haze */
.figure .rp-shell{background:transparent;border:0;box-shadow:none;border-radius:0}
.figure .rp-env,.figure .rp-grid,.figure .rp-glow,.figure .rp-fade{display:none}
/* the chest badge: positioned in px by the script; hidden until the torso is found */
.rp-badge{position:absolute;left:0;top:0;width:64px;height:64px;transform:translate(-50%,-50%);opacity:0;
  transition:opacity .5s ease;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))}
.rp-badge.on{opacity:1}
.rp-badge svg{display:block;width:100%;height:100%}

/* ---------- pass K: light glass (Sprint 192, owner 2026-10-16: "Light glass everywhere") ----------
   The owner's five "UI/UX Effects Series" screenshots, and the app since Sprint 191: a lavender ground under a
   static glow field, white glass panels with a lit edge and a violet-tinted depth, ONE gradient with its glow
   for the main action, pill labels, heavy display type with a grey extruded second line. The ground is OPAQUE
   on html (design_guard composites translucent layers down to it and never sees body::before); every text
   colour here keeps >= 4.5:1 over the field's worst composite (tests/test_s192_site_glass.py). No blur on
   panels, and the old drifting .glow stays off: an animated layer under glass is where the frames went. The
   robot stays - the owner's - and keeps its yellow. */
:root{
  --ground:#EAE6F8;
  --white:rgba(255,255,255,.76);
  --band:rgba(255,255,255,.6);
  --ink:#18142B;
  --muted:#433E5C;
  --faint:#524C69;
  --line:#E0DAF0;
  --accent:#5B3FBF;
  --accent-ink:#18142B;
  --accent-wash:#ECE7FC;
  --purple:#4E30AE;
  --lavender:#4E30AE;
  --nav-hi:#4E30AE;
  --plum:#C9C3E3;
  --purple-tint:rgba(255,255,255,.62);
  --purple-line:rgba(91,63,191,.16);
  --tint-lavender:#ECE7FC;
  /* the gradient words, its magenta end a shade darker: on the glass hero (lavender showing through)
     #A6367A measured 4.47:1 for "with its receipt." - #982F70 keeps >= 4.5 on the haze's worst stop */
  --grad-text:linear-gradient(90deg,#5B3FBF,#982F70);
  --grad-btn:linear-gradient(135deg,#5B3FBF 0%,#7B3FD0 55%,#A23BB8 100%);
  --glow-btn:0 8px 22px -8px rgba(110,63,208,.6),0 2px 6px -2px rgba(91,63,191,.32);
  --glass-edge:rgba(255,255,255,.92);
  --glow-1:rgba(124,92,255,.16);--glow-2:rgba(217,70,239,.09);--glow-3:rgba(99,102,241,.11);
  --depth:0 1px 2px rgba(48,30,120,.05),0 22px 48px -28px rgba(48,30,120,.30),inset 0 1px 0 var(--glass-edge);
  --depth-card:0 1px 2px rgba(48,30,120,.04),0 14px 30px -22px rgba(48,30,120,.28),inset 0 1px 0 var(--glass-edge);
  --r-panel:24px;
}
html{background:var(--ground)}
body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48rem 36rem at 6% -8%,var(--glow-1),transparent 70%),
             radial-gradient(40rem 32rem at 104% 6%,var(--glow-2),transparent 72%),
             radial-gradient(44rem 36rem at 34% 110%,var(--glow-3),transparent 70%)}
/* the panels: glass with a lit edge and depth, 16px apart on the field */
main > section,main > .band,main > header.hero,.close-cta{background:var(--white);border:1px solid var(--glass-edge);
  border-radius:var(--r-panel);box-shadow:var(--depth);margin:0 0 16px}
main > header.hero{background:
    radial-gradient(60% 55% at 82% 18%,rgba(214,208,255,.62),rgba(214,208,255,0) 70%),
    radial-gradient(55% 50% at 14% 86%,rgba(255,214,236,.5),rgba(255,214,236,0) 70%),
    var(--white)}
.close-cta{margin:0 12px 16px}
@media(max-width:640px){main > section,main > .band,main > header.hero,.close-cta{border-radius:16px;margin-bottom:10px}}
/* display type: heavy black, and the second line grey and extruded (the screenshots' headline) */
h1,h2{color:var(--ink)}
.hero-copy h1{font-weight:800;letter-spacing:-.035em;line-height:1.04}
.hero-copy h1 .h1-2{display:block;margin-top:.06em;color:#6A6485;
  text-shadow:0 1px 0 #DDD8EE,0 2px 0 #D3CDE8,0 3px 0 #C9C2E1,0 4px 0 #BFB7DA,0 12px 22px rgba(48,30,120,.2)}
.hero-copy h1 .h1-2 .grad{text-shadow:none}   /* a shadow under clipped text shows through the glyph */
h2{font-weight:600;letter-spacing:-.03em}
/* pill labels */
.eyebrow,.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);border:1px solid rgba(91,63,191,.2);box-shadow:0 1px 2px rgba(48,30,120,.06);
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lavender)}
/* buttons: pills; the gradient with its glow for the main action, glass for the second */
.btn{border-radius:var(--r-pill);font-family:var(--sans);font-size:.95rem;font-weight:600;text-transform:none;letter-spacing:-.005em}
.btn-primary{background:var(--grad-btn);color:#fff;border-color:transparent;box-shadow:var(--glow-btn)}
.btn-primary:hover{background:var(--grad-btn);filter:brightness(1.08);transform:scale(1.02)}
.btn-ghost,.btn-purple{background:rgba(255,255,255,.72);color:var(--ink);border:1px solid rgba(91,63,191,.3)}
.btn-ghost:hover,.btn-purple:hover{background:#fff;border-color:rgba(91,63,191,.55)}
.float-cta{background:var(--grad-btn);color:#fff;box-shadow:var(--glow-btn);border-radius:var(--r-pill);
  font-family:var(--sans);text-transform:none;font-weight:600}
.announce{background:var(--grad-btn);color:#fff}
/* the bar: frosted (the page scrolls under it), and its menus */
.nav{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(91,63,191,.08)}
.nav-dd-panel{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-color:rgba(91,63,191,.14);box-shadow:0 24px 60px -20px rgba(48,30,120,.28)}
@media(max-width:1139px){.nav-links.open{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}}
/* cards inside the panels: glass on glass, told apart by their depth */
.card,.cap,.mcp-card,.refuse li,.gfx-refuse li,.parith-note,.tier,.plan,.price-new,.guar{box-shadow:var(--depth-card)}
.card,.refuse li{border-radius:20px}
/* the footer: deep indigo with the violet glow rising (the glow is a pseudo-element: the footer stays one
   opaque colour, so the guard scores its light text against what is really under it) */
footer{position:relative;background:#16122B;color:var(--plum);border-radius:var(--r-panel);overflow:hidden}
footer::before{content:"";position:absolute;inset:auto 0 0 0;height:420px;pointer-events:none;
  background:radial-gradient(60% 90% at 50% 100%,rgba(122,76,183,.42),rgba(122,76,183,0) 70%)}
footer .legal{border-top:1px solid rgba(255,255,255,.12);color:var(--plum)}
/* ---------- pass L: Search Atlas's design language in OUR colours, and frosted glass (Sprint 199) ----------
   Owner 2026-10-16: "copy their design language ... keep our own colour scheme - do not change colours - just
   learn their design and apply to our website - also add glassmorphism". Measured on searchatlas.com/pricing in
   Chrome (getComputedStyle, 2026-10-16): cards are a 10-12% accent tint with a hairline accent edge (30%) at a
   16px radius and no shadow; the recommended plan is lifted and tinted; the main button is a solid pill with a
   4px soft ring and a wide glow, the second a hairline outline pill; badges are pills (accent text, 5% fill,
   hairline edge); navigation is sentence-case sans; prices carry -0.02em; a plan's credits sit in an inset pill.
   Applied here with our violet, lavender and magenta only. The mint (0,255,212) left in older passes is THEIR
   accent, not ours: every remaining use is repainted violet below.
   Glass: the panels are frosted (blur over the field) and the field carries four static orbs so the frost has
   something to show. The orbs are fixed and nothing animates under the glass (an animated layer under blur is
   where frames went in Sprint 191). Text is scored over the orbs' worst composite: tests/test_s199_site_language.py.
   Sprint 202 (owner 2026-10-17: "translucent glassmorphism on the marketing website"): the frost was milky (.58
   white, and the hero had an OPAQUE white base, so its blur showed nothing). Now: see-through panels (.34) with a
   highlight and a side rim, cards that shade from bright to clear, and smaller, stronger orbs inside the window.
   Text is scored over the field's EXACT worst point (tests/glass_field.py), no longer every orb stacked. */
:root{
  --glass:rgba(255,255,255,.34);
  --glass-hero:rgba(255,255,255,.52);   /* the hero's gradient words need it: 4.6:1 at the field's worst point */
  --glass-card:rgba(255,255,255,.46);
  --glass-shine:radial-gradient(60% 50% at 0% 0%,rgba(255,255,255,.26),rgba(255,255,255,0) 70%),
    linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%);
  --glass-card-fill:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.30));
  --glass-rim:inset 1px 0 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.25);
  --depth:0 1px 2px rgba(48,30,120,.05),0 30px 64px -34px rgba(76,48,170,.42),inset 0 1px 0 var(--glass-edge),var(--glass-rim);
  --edge-l:rgba(91,63,191,.22);
  --edge-pick:rgba(91,63,191,.48);
  --tint-pick:rgba(91,63,191,.08);
  --frost:saturate(1.8) blur(26px);
  --orb-1:rgba(124,92,255,.56);--orb-2:rgba(217,70,239,.38);--orb-3:rgba(99,102,241,.40);--orb-4:rgba(167,112,255,.34);
  --ring-btn:0 0 0 4px rgba(91,63,191,.12),0 12px 36px -8px rgba(124,92,255,.5);
}
body::before{background:
  radial-gradient(30rem 26rem at 6% 14%,var(--orb-1),transparent 66%),
  radial-gradient(28rem 24rem at 96% 22%,var(--orb-2),transparent 66%),
  radial-gradient(32rem 26rem at 22% 94%,var(--orb-3),transparent 66%),
  radial-gradient(28rem 24rem at 80% 72%,var(--orb-4),transparent 66%)}
/* frosted panels (the hero keeps its own haze over the glass: its gradient words are scored on it; the closing
   panel keeps its rotating aurora, which IS its glass - nothing animated sits under a blur) */
main > section,main > .band{background:var(--glass-shine),var(--glass)}
main > header.hero{background:
    radial-gradient(60% 55% at 82% 18%,rgba(214,208,255,.40),rgba(214,208,255,0) 70%),
    radial-gradient(55% 50% at 14% 86%,rgba(255,214,236,.34),rgba(255,214,236,0) 70%),
    var(--glass-shine),var(--glass-hero)}
main > section,main > .band,main > header.hero{-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);
  border-color:rgba(255,255,255,.72)}
/* cards: their tint-and-hairline card, in our violet */
.card,.cap,.mcp-card,.refuse li,.tier,.plan,.price-new{background:var(--glass-card-fill);border:1px solid var(--edge-l);
  border-radius:16px;box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-rim),0 14px 34px -22px rgba(76,48,170,.38)}
.card:hover,.cap:hover,.tier.hf:hover,.plan.hf:hover{border-color:rgba(91,63,191,.38)}
/* the recommended plan: lifted, tinted, its edge lit (theirs: raised, accent tint, accent edge) */
.plan.pick,.tier.pick{background:linear-gradient(var(--tint-pick),var(--tint-pick)),var(--glass-card);border-color:var(--edge-pick);
  box-shadow:0 0 0 4px rgba(91,63,191,.06),0 26px 50px -26px rgba(91,63,191,.45),inset 0 1px 0 var(--glass-edge)}
@media(min-width:900px){.plans{align-items:start}.plan.pick{transform:translateY(-14px)}}
.tier.pick.hf:hover,.plan.pick.hf:hover{border-color:rgba(91,63,191,.62)}
.guar{background:linear-gradient(var(--tint-pick),var(--tint-pick)),var(--glass-card);border-color:var(--edge-pick)}
/* badges: pill, accent text, a 6% fill, the hairline edge */
.plan-badge,.tier .badge,.eyebrow,.hero-copy .eyebrow{background:rgba(91,63,191,.06);border:1px solid var(--edge-pick);
  box-shadow:none;color:var(--lavender)}
/* each plan's level, Free to Agency, as five segments (theirs: four bars over each tier) */
.plans > .plan{--lvl:1}
.plans > .plan:nth-child(2){--lvl:2}.plans > .plan:nth-child(3){--lvl:3}
.plans > .plan:nth-child(4){--lvl:4}.plans > .plan:nth-child(5){--lvl:5}
.plans > .plan::before{content:"";display:block;flex:none;height:3px;margin:0 0 4px;border-radius:2px;
  background:
    repeating-linear-gradient(90deg,var(--accent) 0 calc(100% / var(--lvl) - 4px),transparent calc(100% / var(--lvl) - 4px) calc(100% / var(--lvl)))
      0 0 / calc(var(--lvl) * 20%) 100% no-repeat,
    repeating-linear-gradient(90deg,var(--line) 0 calc(20% - 4px),transparent calc(20% - 4px) 20%)}
/* prices: their weight and tracking, our ink */
.plan-amt{color:var(--ink);font-weight:600;letter-spacing:-.025em}
.tier .amt{font-weight:600;letter-spacing:-.025em}
/* a plan's credits in an inset pill (theirs: the Universal Credits row) */
.plan-meta{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid var(--edge-l);
  color:var(--ink);font-variant-numeric:tabular-nums}
/* buttons: the main one a pill with a soft ring and a wide glow; the second a frosted hairline pill */
.btn-primary,.float-cta{box-shadow:var(--ring-btn)}
.btn-primary:hover{box-shadow:0 0 0 5px rgba(91,63,191,.16),0 16px 44px -8px rgba(124,92,255,.6)}
.btn-ghost,.btn-purple{background:rgba(255,255,255,.5);-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);
  border:1px solid rgba(91,63,191,.32)}
/* navigation: sentence-case sans, as theirs (the uppercase mono was a pass copied from another site) */
.nav-links a,.nav-dd-btn,.nav-dd-link{font-family:var(--sans);font-size:.95rem;font-weight:500;text-transform:none;letter-spacing:-.005em}
.nav-dd-panel h4{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.08em}
/* the rest of THEIR mint, repainted ours */
.nav-dd-panel .tag{background:rgba(91,63,191,.06);border-color:var(--edge-pick)}
.tier .flag{border-color:var(--edge-pick)}
@media(min-width:760px){.cards .card-out{background:linear-gradient(213deg,rgba(124,92,255,.10),rgba(122,76,183,.14) 70%);
  border-color:var(--edge-pick)}}
.close-cta::before{background:
    radial-gradient(closest-side at 32% 40%,rgba(124,92,255,.18),rgba(124,92,255,0) 72%),
    radial-gradient(closest-side at 68% 62%,rgba(122,76,183,.36),rgba(122,76,183,0) 72%),
    radial-gradient(closest-side at 52% 22%,rgba(255,173,219,.14),rgba(255,173,219,0) 72%)}
.float-cta{background:var(--grad-btn)}
.p-ours-2 .p-fill{background:rgba(124,92,255,.55)}
.hf-dot{filter:drop-shadow(0 0 6px rgba(124,92,255,.85))}
/* Sprint 202 (owner 2026-10-17: "framer motions"): the springs of assets/qd-motion.js (Motion, the vanilla build of
   Framer Motion). It sets html.qm only when Motion loaded and reduced motion is off; the springs move --qm-x/-y/-s,
   applied with the individual translate and scale properties so the 3D tilt's transform still composes. Where the
   springs run, the CSS hover and press transforms they replace step aside (two motions on one element would double). */
.qm-el{--qm-x:0px;--qm-y:0px;--qm-s:1}
.qm .qm-el{translate:var(--qm-x) var(--qm-y);scale:var(--qm-s)}
.qm .btn.qm-el:hover,.qm .btn.qm-el:active,.qm .hf.qm-el:hover{transform:none}
/* Sprint 215 (owner 2026-10-18: "framer motions ... applied throughout"): the app's arrivals, on the site, on Motion
   (assets/site.js). While .va is on, Motion moves --va-o / --va-y / --va-s (a graph's --va-r); the class and the
   properties go once it settles, so the picture rests exactly as drawn. A count-up's figure is held unseen (.cu) until
   it starts, its text untouched until then. Only under .qm: without Motion, or under reduced motion, none of it applies. */
.qm .va{opacity:var(--va-o,1);translate:0 var(--va-y,0px);scale:var(--va-s,1)}
.qm .vg-node.va{transform-origin:0 0}   /* centred by translate(-50%,-50%): scaled from its anchor, it stays on its point */
.qm .vg-track i.va{scale:var(--va-s,1) 1;transform-origin:0 50%;translate:none}
.qm .vg-graph svg.va{clip-path:circle(var(--va-r,150%) at 50% 50%)}
.qm .vg-orch .vg-graph svg.va{clip-path:inset(0 calc(100% - var(--va-r,150%)) 0 0)}
.qm .cu{opacity:0}
/* the nav's lens: the reel's gliding selection (the app's rail has had it since Sprint 212). One highlight springs from
   item to item under a fine pointer and fades when the pointer leaves the bar; under it, a hovered item's own tint steps
   aside. Keyboard focus and an open menu keep theirs. Behind the text (the nav is its stacking context), over the glass. */
.nav-lens{position:absolute;left:0;top:0;z-index:-1;width:0;height:0;border-radius:var(--r-btn);background:rgba(0,0,0,.05);
  opacity:0;pointer-events:none;transition:opacity var(--dur-hover) ease}
.nav-lens.is-on{opacity:1}
.nav-links:has(> .nav-lens.is-on) > a:hover,.nav-links:has(> .nav-lens.is-on) .nav-dd:hover :is(.nav-dd-link,.nav-dd-btn){background:transparent}
@media(max-width:1139px){.nav-lens{display:none}}
/* phones: a lighter frost (its cost scales with the radius) */
@media(max-width:640px){:root{--frost:saturate(1.7) blur(14px)}}
/* nothing that loops may sit in a frosted panel's backdrop (it would be re-blurred every frame, for ever):
   the robot's feet overhang the next section by ~22px - its own section paints above, so they stand IN FRONT of
   that glass; the closing panel's buttons sat over its rotating aurora - they take a firmer fill, no frost */
.mascot-slot{position:relative;z-index:1}
.close-cta .btn-purple,.close-cta .btn-ghost{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.78)}

/* ---------- pass M: the multi-page site (Sprint 203, owner 2026-10-17: "individual pages rather than all info on
   the hero page"; "illustrations leading to individual pages"). Every panel keeps pass L's glass; text sits on a
   panel, never on the bare field (tests/test_s199 + test_s203 hold it). ---------- */
/* one stylesheet for every page now: it declares the defaults of the two variables that page markup sets
   (--c: the checks' dimension colour, set by bin/site_graphics' block; --rise: the hero's entrance step) */
:root{--c:#808080;--rise:0}
:root{
  --t-crit:#A1192B;--t-crit-bg:rgba(220,38,38,.10);
  --t-high:#9A3F06;--t-high-bg:rgba(234,88,12,.11);
  --t-med:#6E5100;--t-med-bg:rgba(202,138,4,.15);
  --t-ok:#17603F;--t-ok-bg:rgba(22,163,74,.12);
  --t-plan:#4E30AE;--t-plan-bg:rgba(91,63,191,.10);
  --t-off:#4A4458;--t-off-bg:rgba(74,68,88,.10);
  --t-info:#2F4A7A;--t-info-bg:rgba(47,91,183,.10);
}
/* an inner page's header is a frosted panel like every section */
main > header.page-hero{background:var(--glass-shine),var(--glass);-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);
  border:1px solid rgba(255,255,255,.72);border-radius:var(--r-panel);box-shadow:var(--depth);margin:0 0 16px;padding:56px 0 52px}
.ph-grid{display:grid;gap:36px;align-items:center}
@media(min-width:960px){.ph-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--f-xs);color:var(--muted);margin:0 0 18px}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.ph-group{margin:0 0 8px;font-size:var(--f-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lavender)}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:var(--ink)}
.ph-sub{margin:10px 0 0;font-size:var(--f-xl);color:var(--muted);font-weight:500}
.page-hero .lede{margin:22px 0 0;max-width:56ch;color:var(--ink)}
.page-hero .hero-actions{margin-top:28px}
/* inner pages: headings sized for a page about one thing, not the home page's display type */
body:not(.page-home) main section h2{font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.15;font-weight:500}
body:not(.page-home) main .page-top h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.1;font-weight:700;letter-spacing:-.03em;
  color:var(--ink);max-width:26ch;text-wrap:balance}
.page-top .sec-head{max-width:70ch}            /* the home page's 44ch column stacked a page title six lines deep */
.page-top .sec-head[style*="center"] h1{margin-left:auto;margin-right:auto}
.narrow{max-width:820px}
.disc-body p{font-size:var(--f-l);line-height:1.72;color:var(--ink);margin:18px 0 0;max-width:68ch}
.disc-body p b{font-weight:600}
.disc-spec .caps-one{grid-template-columns:1fr;max-width:820px;margin-top:26px}
.spec-note{margin:20px 0 0;font-size:var(--f-s);line-height:1.6;color:var(--muted);max-width:72ch}
.spec-note .st{margin:0 6px 0 0;vertical-align:-1px}
.disc-next p{font-size:var(--f-m);line-height:1.6;color:var(--muted);margin:12px 0 0;max-width:64ch}
.disc-next p + h2{margin-top:44px}
.others{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.others a{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:12px 14px;border-radius:12px;text-decoration:none;
  color:var(--ink);font-weight:600;background:rgba(255,255,255,.55);border:1px solid var(--edge-l);
  transition:border-color var(--dur-hover) ease,background var(--dur-hover) ease}
.others a span{font-weight:400;font-size:var(--f-xs);color:var(--muted)}
.others a:hover{border-color:var(--edge-pick);background:rgba(255,255,255,.78)}
.page-next p{margin:0;font-size:var(--f-m);line-height:1.6;color:var(--muted);max-width:68ch}
main > section.page-next{padding:36px 0}

/* the product moment: a small, real piece of the product (a measured finding or a tool's state) */
.pm{margin:0;padding:16px 16px 14px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.66));
  border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 10px 26px -18px rgba(76,48,170,.45);color:var(--ink)}
.pm-cap{font-size:var(--f-2xs);font-weight:600;letter-spacing:.02em;color:var(--muted);margin:0 0 10px}
.pm-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pm-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;font-size:var(--f-s);line-height:1.4}
.pm-txt b{font-weight:600;margin-right:2px}
.pm-tag{display:inline-block;min-width:84px;text-align:center;padding:3px 8px;border-radius:7px;font-size:var(--f-2xs);
  font-weight:700;letter-spacing:.01em;white-space:nowrap}
.t-crit{color:var(--t-crit);background:var(--t-crit-bg)}.t-high{color:var(--t-high);background:var(--t-high-bg)}
.t-med{color:var(--t-med);background:var(--t-med-bg)}.t-ok{color:var(--t-ok);background:var(--t-ok-bg)}
.t-plan{color:var(--t-plan);background:var(--t-plan-bg)}.t-off{color:var(--t-off);background:var(--t-off-bg)}
.t-info{color:var(--t-info);background:var(--t-info-bg)}
.ph-fig .pm{padding:22px 22px 20px}
.ph-fig .pm-row{font-size:var(--f-m)}

/* the home page: eleven disciplines, each a card that leads to its page */
.disc-group{margin-top:40px}
.disc-group .scope-h{margin-bottom:14px}
.disc-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.disc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* wide: each group fills its row exactly - as many columns as it has cards */
@media(min-width:1100px){.disc-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.disc-grid.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.disc{position:relative;min-width:0;display:flex;flex-direction:column;gap:16px;padding:12px 12px 18px;border-radius:24px;
  background:linear-gradient(140deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.16) 30%,rgba(255,255,255,0) 56%,
    rgba(255,255,255,.1) 100%),rgba(255,255,255,.3);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(28,30,70,.06),
    0 14px 34px -22px rgba(76,48,170,.32);
  transition:border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease}
.disc:hover{border-color:rgba(91,63,191,.38)}
.disc:focus-within{outline:3px solid var(--accent);outline-offset:3px}
/* Sprint 207 (owner, on the Sprint 205 glass objects: "all these look like a kids project ... searchatlas.com/v1 looks
   way better"; answered "keep light, fix the cards"): each card shows a small working picture of what the discipline
   reads, drawn in HTML. Sprint 208 (owner: "there is no content in them ... add glassmorphism and make them
   translucent - like we have at our website - quintessentianetwork.com"): every placeholder shape is real content now
   - the sample audit's own figures and URLs, the pages' own words, our real share preview - held to its source by
   tests/test_s207_cards.py; and the surfaces are quintessentianetwork.com's glass, measured: a 30% white fill under a
   140-degree sheen, a 72% white edge, a lit top edge, a faint dark hairline. The section behind is already frosted,
   so the cards and pictures are translucent without a blur of their own (no frost inside frost). */
.vg{position:relative;flex:none;margin:0;height:236px;padding:12px 14px;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;font-size:11.5px;line-height:1.35;color:var(--muted);
  background:linear-gradient(140deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 40%,rgba(255,255,255,.04) 100%),
    rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(28,30,70,.045)}
/* one column (phones): no row to line up with, so a picture may grow to fit its content */
@media(max-width:699px){.vg{height:auto;min-height:200px}}
/* just after the grid gains a column the cards are at their narrowest: every picture a little taller, so a row's
   titles still line up */
@media(min-width:700px) and (max-width:819px){.vg{height:272px}}
@media(min-width:1100px) and (max-width:1279px){.vg{height:244px}}
.vg > *{flex-shrink:0}   /* nothing squashed to fit: a picture that does not fit fails the test */
.vg-top{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-top i{flex:none;width:7px;height:7px;border-radius:50%;background:rgba(91,63,191,.22)}
.vg-top span{margin-left:5px;overflow:hidden;text-overflow:ellipsis}
.vg-meter{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:baseline}
.vg-meter b,.vg-tile b{color:var(--ink);font-weight:600}
.vg-track{grid-column:1 / -1;height:8px;border-radius:99px;background:rgba(91,63,191,.12);overflow:hidden}
.vg-track i{display:block;height:100%;min-width:8px;border-radius:inherit;background:linear-gradient(90deg,#6B4BE6,#A78BFA)}
.vg-seo .vg-track i{width:6.2%}   /* 25 of the 404 pages read */
.vg-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.vg-tile{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:12px;min-width:0}
.vg-tile b{font-size:15px;letter-spacing:-.01em}
.vg-pill{align-self:flex-start;display:inline-flex;align-items:center;padding:2px 7px;border-radius:99px;font-size:10px;
  font-weight:700;letter-spacing:.01em;white-space:nowrap}
.vg-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.vg-rows{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.vg-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;padding:6px 10px;
  border-radius:10px;min-width:0}
.vg-row > span:first-child{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.vg-note{margin-top:auto;font-size:10.5px;color:var(--faint)}
.vg-chips{display:flex;flex-wrap:wrap;gap:4px}
.vg-chip{padding:2px 7px;border-radius:99px;font-family:var(--mono);font-size:9.5px;color:var(--ink);white-space:nowrap}
.vg-k{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.vg-aeo{gap:7px}.vg-aeo .vg-chip{padding:1px 6px}
/* a graph: nodes placed in percent of the panel, lines in an SVG that stretches with it */
.vg-graph{position:relative;flex:1;min-height:0}
.vg-graph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vg-graph line,.vg-graph path{stroke:rgba(91,63,191,.35);stroke-width:1.2;fill:none;vector-effect:non-scaling-stroke}
.vg-node{position:absolute;transform:translate(-50%,-50%);padding:5px 9px;border-radius:10px;color:var(--ink);
  font-weight:600;font-size:10.5px;white-space:nowrap}
.vg-node.hub{padding:9px 12px;border-radius:99px;color:#fff;border:1px solid transparent;
  background:linear-gradient(135deg,#4E30AE,#6447E3);box-shadow:0 6px 18px -8px rgba(91,63,191,.7)}   /* white text >= 4.5:1 */
.vg-orch .vg-node{font-size:9.5px;padding:4px 7px}.vg-orch .vg-node.hub{padding:7px 10px}
/* the graphs' nodes, placed in percent of the panel (no style attributes: our own audit counts them) */
.vg-geo .n0{left:50%;top:50%}.vg-geo .n1{left:50%;top:10%}.vg-geo .n2{left:15%;top:42%}.vg-geo .n3{left:85%;top:42%}
.vg-geo .n4{left:26%;top:88%}.vg-geo .n5{left:74%;top:88%}
.vg-orch .n0{left:15%;top:26%}.vg-orch .n1{left:15%;top:74%}.vg-orch .n2{left:50%;top:16%}.vg-orch .n3{left:50%;top:50%}
.vg-orch .n4{left:50%;top:84%}.vg-orch .n5{left:85%;top:50%}
/* draft, then review: two steps with a chevron between them */
.vg-flow{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vg-flow::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-70%,-50%) rotate(45deg);
  border-top:1.5px solid rgba(91,63,191,.55);border-right:1.5px solid rgba(91,63,191,.55)}
.vg-step{display:flex;flex-direction:column;gap:4px;padding:9px 10px;border-radius:12px;min-width:0}
.vg-step b{color:var(--ink);font-weight:600;font-size:12px;line-height:1.3}
/* the real share preview: our image, title and description, cut where a share card would cut them */
.vg-card{display:flex;gap:9px;padding:8px;border-radius:12px;min-width:0}
.vg-img{flex:none;width:58px;height:58px;object-fit:cover;object-position:15% 50%;border-radius:9px;align-self:flex-start;
  border:1px solid rgba(255,255,255,.85)}   /* the card's own image, cropped to its robot */
.vg-card > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vg-ttl{color:var(--ink);font-weight:600;font-size:11px;line-height:1.3}
.vg-dsc{font-size:10px;line-height:1.35;color:var(--muted)}
.vg-ttl,.vg-dsc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.vg-url{font-family:var(--mono);font-size:9.5px;color:var(--muted);padding:5px 8px;border-radius:8px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.vg-check{display:flex;align-items:center;gap:7px;color:var(--ink)}
.vg-check::before{content:"";flex:none;width:12px;height:12px;border-radius:4px;border:1.5px solid rgba(91,63,191,.5);
  background:linear-gradient(135deg,rgba(91,63,191,.14),rgba(91,63,191,0))}
/* every surface inside a picture: the same glass, a step brighter than the panel */
.vg-tile,.vg-row,.vg-node:not(.hub),.vg-chip,.vg-card,.vg-step,.vg-url{background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(28,30,70,.07)}
.vg-chip.on{background:rgba(91,63,191,.1);border-color:rgba(91,63,191,.32)}
.disc-txt{display:flex;flex-direction:column;gap:6px;flex:1;padding:0 6px}
.disc h3{font-size:var(--f-xl);font-weight:600;letter-spacing:-.012em}
.disc-link{color:var(--ink);text-decoration:none}
.disc-link:focus-visible{outline:none}
.disc-link::after{content:"";position:absolute;inset:0;border-radius:inherit}   /* the whole card is the link */
.disc-sub{margin:0;font-size:var(--f-xs);font-weight:600;color:var(--lavender)}
.disc-txt p:not(.disc-sub){margin:0;font-size:var(--f-s);line-height:1.55;color:var(--muted)}
.disc-more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:var(--f-s);font-weight:600;color:var(--lavender)}
.disc-more .arr{width:14px;height:14px}

/* three doors: the audit, how it works, why us */
.doors{display:grid;gap:18px}
@media(min-width:900px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{position:relative;padding:24px;border-radius:16px;background:var(--glass-card-fill);border:1px solid var(--edge-l);
  box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-rim),0 14px 34px -22px rgba(76,48,170,.38)}
.door:hover{border-color:rgba(91,63,191,.38)}
.door:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.door-k{margin:0 0 10px;font-size:var(--f-xs);font-weight:600;color:var(--lavender)}
.door h3{font-size:var(--f-xl);font-weight:600;line-height:1.3;letter-spacing:-.015em}
.door h3 a{color:var(--ink);text-decoration:none}
.door h3 a:focus-visible{outline:none}
.door h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.door p:last-child{margin:12px 0 0;font-size:var(--f-s);line-height:1.55;color:var(--muted)}
main > section.doors-sec{padding:44px 0}
.film-sec .demo{margin-top:0}
.price-door .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.price-door .sec-head{max-width:64ch}.price-door .sec-head h2{max-width:28ch;margin-left:auto;margin-right:auto}

/* How it works: the 52 checks as a list you can READ, not squares you hover (owner, screenshot 2) */
.page-how .gfx-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.page-how .gfx-cell{aspect-ratio:auto;cursor:default;display:flex;align-items:center;min-height:44px;padding:8px 12px 8px 14px;
  border-radius:10px;border-left:4px solid var(--c);background:rgba(255,255,255,.62)}
.page-how .gfx-cell:hover,.page-how .gfx-cell:focus-visible{transform:none;background:rgba(255,255,255,.85)}
.page-how .gfx-vis{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;
  font-size:var(--f-s);line-height:1.35;color:var(--ink)}
.page-how .gfx-sub{max-width:70ch}

/* the footer: six columns once there is room; the eleven disciplines in two */
@media(min-width:900px){.foot-grid{grid-template-columns:1.5fr 1fr 1.7fr 1fr 1fr .8fr;gap:32px}}
.foot-disc{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-content:start}
.foot-disc h3{grid-column:1 / -1}
@media (prefers-reduced-motion:reduce){.disc,.door,.others a{transition:none}}
/* touch targets at phone width (site-app/e2e/touch_targets.mjs --marketing sweeps every page now) */
.nav .brand{min-width:44px;min-height:44px}
.demo-play{width:46px;height:46px}
.price-new a[href="/prices.html"]{display:inline-flex;align-items:center;min-height:44px}
.legend a{display:inline-flex;align-items:center;min-height:44px}   /* a flex item in the legend's flex span: its own target */