/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
   MARKETING REBRAND: the editorial system. Its own stylesheet, on purpose.

   This began life appended to host.css, on the reasoning that one stylesheet means one marketing style.
   That was wrong in both directions, and an adversarial review caught it:

     * It restyled the 23 pages still on the old chrome. Bare `body`, `p`, `a`, `h1..h3` and `:root`
       rules sitting LATER in the file win at equal specificity, so every /vs/, /for/, /host/ page
       silently took the new palette, the new type and a redefined --ink on top of its old layout.
     * It did not fully apply to the five pages it was written for. The old block's rules leak in
       wherever they are more specific or equally so: `header.nav` (0,1,1) beats `.nav` (0,1,0), so the
       nav kept the old grey background and lost its hairline; `.eyebrow` kept a white pill background
       and, with the new `display:block`, became a full-width bar; `p a, li a` (0,0,2) beat `a` (0,0,1),
       underlining every footer and menu link; `.url` kept its pill; `.btn` kept `line-height:1`.

   So the five rebranded pages link THIS file instead of host.css, which is what the design shipped as
   (assets/sv-brand-warm.css, a standalone stylesheet). A page is on one system or the other, never both.
   When a page migrates, swap its host.css link for this one. host.css goes away when the last one moves.

   The Google Fonts @import that shipped with the handoff is deliberately NOT here: /fonts.css self-hosts
   every family. See the note at the top of that file.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* SiteViewer marketing: editorial spec-sheet identity.
   Replaces the staging indigo-SaaS system. Tokens reconciled against the app
   (web/fonts.css, web/favicon.svg): the app's brand is Plus Jakarta Sans +
   #6366f1/#8b5cf6. Display type is a deliberate, flagged override; the accent
   stays inside the app's indigo family so app and marketing still read as one studio. */


:root{
  --paper:#FDFBF6;--paper-2:#F6F0E5;--white:#fff;
  --ink:#171A24;--ink-2:#2E3342;--body:#5E6270;--faint:#6B6F7C;
  --rule:#E4DCCF;--rule-2:#EFE9DE;--rule-strong:#D5C9B4;
  --ease:cubic-bezier(.2,.7,.2,1);
  --accent:#C1512A;--accent-2:#A34120;--accent-soft:#FAEBE2;--accent-line:#EFD3C3;
  --violet:#223766;--violet-soft:#EAEEF7;
  --warm:#C1512A;--warm-soft:#FAEBE2;
  --dark:#0E1B3D;--dark-2:#17264C;--dark-body:#B6C1DB;--dark-faint:#9BA8CC;--dark-rule:#24325A;
  --ok:#1B6E4E;--ok-bg:#E5F1EA;--amber:#8A5A1F;--amber-bg:#FAEBD8;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --logo:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px;--index:118px;--gut:56px;--band:104px;
  --shadow:0 30px 70px -40px rgba(23,26,36,.42),0 2px 8px -4px rgba(23,26,36,.1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga"}
img,svg{max-width:100%}img{height:auto;display:block}
p{margin:0 0 15px}p:last-child{margin-bottom:0}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--accent-2);text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-soft)}

/* type */
h1,.h1{font-family:var(--serif);font-size:clamp(42px,5.9vw,76px);line-height:1.01;font-weight:400;letter-spacing:-0.025em;color:var(--ink);margin:0 0 26px;max-width:17ch;text-wrap:balance}
h2,.h2{font-family:var(--serif);font-size:clamp(30px,3.5vw,45px);line-height:1.1;font-weight:400;letter-spacing:-0.022em;color:var(--ink);margin:0 0 20px;max-width:19ch;text-wrap:balance}
h3,.h3{font-family:var(--sans);font-size:17.5px;line-height:1.35;font-weight:600;letter-spacing:-0.012em;color:var(--ink);margin:0 0 6px;text-wrap:balance}
.lede{font-size:19.5px;line-height:1.58;max-width:56ch}
.prose{max-width:60ch}
.eyebrow{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--accent-2);margin:0 0 18px}
.eyebrow--dark{color:#E8A183}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
em,.it{font-family:var(--serif);font-style:italic}

/* layout: manuscript grid, index column on the left */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.band{padding:var(--band) 0;position:relative}
.band--tint{background:var(--paper-2)}
.band--white{background:var(--white)}
.band--dark{background:var(--dark);color:var(--dark-body);background-image:radial-gradient(900px 420px at 18% -10%,rgba(45,74,140,.5),transparent 62%),radial-gradient(700px 380px at 92% 110%,rgba(193,81,42,.16),transparent 60%)}
.band--dark h1,.band--dark h2,.band--dark h3{color:#fff}
.band--hero{padding:64px 0 0}
.band--hero-end{padding-bottom:96px}
.band--tight{padding:74px 0}
.idx{display:grid;grid-template-columns:var(--index) minmax(0,1fr);gap:var(--gut)}
.idx__mark{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-top:5px;border-top:1px solid var(--rule);line-height:1.5}
.band--dark .idx__mark{color:var(--dark-faint);border-top-color:var(--dark-rule)}
.idx__mark b{display:block;color:var(--ink);font-weight:500;font-size:11px}
.band--dark .idx__mark b{color:#fff}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:64px;align-items:center}
.split--flip>.split__text{order:2}.split--flip>.split__vis{order:1}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* hairline rule with a number sitting on it */
.hr{border:0;border-top:1px solid var(--rule);margin:0}
.band--dark .hr{border-top-color:var(--dark-rule)}

/* hanging-numeral point list, replaces feature cards */
.points{display:flex;flex-direction:column;gap:0;margin:30px 0 0;list-style:none;padding:0}
.points li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:16px;padding:17px 0;border-top:1px solid var(--rule)}
.points li:last-child{border-bottom:1px solid var(--rule)}
.band--dark .points li{border-color:var(--dark-rule)}
.points .n{font-family:var(--mono);font-size:10.5px;color:var(--faint);padding-top:4px;letter-spacing:.06em}
.band--dark .points .n{color:var(--dark-faint)}
.points p{font-size:16px;line-height:1.55;margin:0}
.points code{font-family:var(--mono);font-size:15px;color:var(--ink);background:var(--accent-soft);padding:1px 6px;border-radius:3px}
.band--dark .points code{color:#fff;background:#22345E}

/* buttons: ink primary, indigo reserved for interactive accents */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:-0.008em;padding:13px 25px;border-radius:9px;border:1px solid var(--accent);background:var(--accent);color:var(--white);cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.btn--onDark{background:#fff;border-color:#fff;color:var(--ink)}
.btn--onDark:hover{background:#E8A183;border-color:#E8A183;color:var(--dark)}
.btn--ghostDark{background:transparent;color:#fff;border-color:#384770}
.btn--ghostDark:hover{background:rgba(255,255,255,.06);color:#E8A183;border-color:#E8A183}
.tlink{font-size:15.5px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:2px}
.tlink:hover{color:var(--accent-2);border-color:var(--accent-line);text-decoration:none}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(253,251,246,.88);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule-2)}
/* three-column grid: brand, centred links, actions. Centred without leaving flow, so
   the link row can never overlap the brand or the buttons at any width. */
.nav__in{max-width:var(--wrap);margin:0 auto;padding:0 40px;height:62px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--logo);font-size:19.5px;font-weight:700;letter-spacing:-0.028em}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand__m{width:27px;height:27px;flex:none;display:block}
.foot .brand__m{width:29px;height:29px}
.nav__links{display:flex;gap:24px;justify-content:center;min-width:0}
.nav__links a{font-size:14.5px;font-weight:500;color:var(--body)}
.nav__links a:hover{color:var(--ink);text-decoration:none}
.nav__end{display:flex;align-items:center;gap:18px;justify-self:end}
.nav__end a:first-child{font-size:14.5px;font-weight:500;color:var(--body)}
.btn--sm{padding:8px 16px;font-size:14.5px}

/* announcement */
.annc{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:100px;padding:5px 15px 5px 6px;font-size:13.5px;font-weight:500;color:var(--ink-2);margin-bottom:34px}
.annc:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.annc b{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;background:var(--accent);color:#fff;padding:4px 8px;border-radius:100px;font-weight:500}

/* browser mock */
.mock{background:var(--white);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.mock__bar{height:36px;border-bottom:1px solid var(--rule-2);display:flex;align-items:center;gap:7px;padding:0 13px;background:var(--paper)}
.mock__dot{width:8px;height:8px;border-radius:50%;background:#DFD6C8;flex:none}
.mock__url{margin-left:8px;flex:1;height:20px;border-radius:100px;background:var(--white);border:1px solid var(--rule-2);display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.02em;overflow:hidden;white-space:nowrap}
.mock__url b{color:var(--ink);font-weight:500}
.mock__body{position:relative}
.ph{background:linear-gradient(180deg,#F3EDE2,#EAE2D4)}
.ph--rule{background:#D8CDBA;border-radius:3px}
.proof{display:grid;grid-template-columns:1.25fr 1fr;gap:20px}

/* hero pins */
.pin{position:absolute;width:27px;height:27px;border-radius:100px 100px 100px 4px;background:var(--accent);border:2px solid #fff;color:#fff;font-family:var(--mono);font-size:11px;font-weight:500;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 3px 12px -2px rgba(193,81,42,.55);transition:transform .16s ease;z-index:3}
.pin:hover,.pin[aria-expanded="true"]{transform:scale(1.16)}
.bubble{position:absolute;width:198px;background:#fff;border:1px solid var(--rule);border-radius:4px 14px 14px 14px;box-shadow:0 16px 40px -18px rgba(23,26,36,.45);padding:11px 13px;z-index:4;display:none}
.bubble.on{display:block}
.bubble .who{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.bubble .av{width:19px;height:19px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:9px;display:grid;place-items:center;flex:none}
.bubble .meta{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.bubble p{font-size:13px;line-height:1.45;color:var(--ink-2);margin:0}
@media (max-width:767px){.pin,.bubble{display:none!important}}

/* scene + chips */
.scene{background:var(--amber-bg);border:1px solid #EFD9BC;border-radius:12px;padding:26px 30px;max-width:620px;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:#5A4126}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;max-width:640px}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--rule);border-radius:100px;padding:7px 13px;font-size:14px;color:var(--body);cursor:pointer;transition:opacity .25s ease,transform .25s ease,border-color .16s ease,color .16s ease}
.chip:hover{border-color:var(--accent-line);color:var(--accent)}
.chip.gone{opacity:0;transform:scale(.94);pointer-events:none;visibility:hidden}
.chip svg{width:11px;height:11px;color:var(--faint);flex:none}

/* generic card / panel */
.panel{background:var(--white);border:1px solid var(--rule);border-radius:11px}
.panel--dark{background:var(--dark-2);border-color:var(--dark-rule)}
/* .points inside a .panel. The card draws the border, so the list must not add a 30px gap above its
   first row, must not draw its own outer rules against the card's (a visible double hairline), and must
   not run its text to the card's edge. Scoped to the composition rather than padding .panel itself,
   which is used bare elsewhere. */
.panel>.points{margin:0}
.panel>.points>li{padding-left:22px;padding-right:22px}
.panel>.points>li:first-child{border-top:0}
.panel>.points>li:last-child{border-bottom:0}
/* Only when the list is the card's own top or bottom edge. Where a label or an outcome line sits there
   instead, that element already supplies the breathing room and this would double it. */
.panel>.points:first-child>li:first-child{padding-top:22px}
.panel>.points:last-child>li:last-child{padding-bottom:22px}
.panel>.eyebrow{padding:22px 22px 0;margin-bottom:14px}
.panel>.mono{display:block;padding:0 22px 20px;margin-top:16px}
.panel>.prose{padding:0 22px;margin:0 0 16px}
.panel>.prose:last-child{padding-bottom:22px}
/* A price anchor: the figure a claim hangs off, in the display face so it reads as a headline number
   rather than a sentence that happens to start with a currency symbol. */
.panel>.figure{font-family:var(--serif);font-size:clamp(38px,4.4vw,54px);line-height:1;font-weight:400;letter-spacing:-0.022em;color:var(--ink);padding:0 22px;margin:0 0 12px}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:100px;background:var(--paper-2);color:var(--faint);border:1px solid var(--rule-2)}
.tag--ok{background:var(--ok-bg);color:var(--ok);border-color:#CFE5DA}
/* --accent as TEXT on --accent-soft is 4.03:1 and fails AA. The handoff is explicit that --accent
   is a fill colour and --accent-2 is the same hue for text; this pairing measures 5.41:1. */
.tag--brand{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-line)}
.tag--warm{background:var(--warm-soft);color:var(--warm);border-color:#F0D7C8}

/* straight answer */
.straight{max-width:760px;border:1px solid var(--rule);border-radius:14px;background:linear-gradient(180deg,#fff,var(--paper-2));padding:38px 40px}
.straight h3{font-family:var(--serif);font-size:29px;font-weight:400;letter-spacing:-0.02em;margin:14px 0 16px}

/* quotes */
.quote{background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:30px 32px;display:flex;flex-direction:column;gap:18px;height:100%}
.quote p{font-family:var(--serif);font-size:19px;line-height:1.48;color:var(--ink);letter-spacing:-0.012em;margin:0}
.quote--lead p{font-size:25px;line-height:1.4}
.quote .by{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:auto}
.quote .by b{color:var(--ink);font-weight:500}

/* pricing: ruled columns, not floating cards */
.price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.price__col{padding:30px 28px 32px;border:1px solid var(--rule);border-radius:14px;background:var(--white);display:flex;flex-direction:column;gap:16px;transition:border-color .18s ease,box-shadow .18s ease}
.price__col:hover{border-color:var(--rule-strong);box-shadow:0 2px 10px -6px rgba(23,26,36,.12)}
.price__col--hi{background:var(--dark);border-color:var(--dark)}
.price__col--hi:hover{border-color:var(--dark);box-shadow:0 14px 40px -20px rgba(14,27,61,.6)}
.price__col--hi .price__name{color:#fff}
.price__col--hi .price__fig{color:#fff}
.price__col--hi .price__fig span{color:var(--dark-faint)}
.price__col--hi .price__list{color:var(--dark-body)}
.price__col--hi .price__list b{color:#fff}
.price__col--hi .price__list svg{color:#E8A183}
.price__col--hi .tag--brand{background:rgba(232,161,131,.16);color:#F0B79C;border-color:rgba(232,161,131,.3)}
.price__col--hi .btn{background:#fff;color:var(--ink);border-color:#fff}
.price__col--hi .btn:hover{background:var(--paper);color:var(--ink)}
.price__name{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.price__fig{font-family:var(--serif);font-size:40px;line-height:1;font-weight:400;letter-spacing:-0.028em;color:var(--ink)}
.price__fig span{font-family:var(--sans);font-size:13.5px;font-weight:400;color:var(--faint);letter-spacing:0}
.price__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.45}
.price__list li{display:grid;grid-template-columns:15px minmax(0,1fr);gap:9px}
.price__list svg{width:12px;height:12px;color:var(--accent);margin-top:5px}
.price__list b{color:var(--ink);font-weight:600}
.price .btn{margin-top:auto;justify-content:center}

/* founder card (/about)
   A .panel carries no padding of its own - the padding it normally looks like it has comes from the
   composition rules for the children it usually holds (.points, .eyebrow, .prose). This card holds a
   bare <img> and bare <p>s, so it matched none of those rules and ran its content to the card edge.
   Dark ground so the one photograph on the site reads as a portrait and not as a fourth white card. */
.bio{background:var(--dark);border:1px solid var(--dark-rule);border-radius:11px;padding:34px 30px 30px;text-align:center;background-image:radial-gradient(560px 260px at 50% -20%,rgba(45,74,140,.55),transparent 64%)}
.bio__img{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 18px;border:1px solid var(--dark-rule)}
.bio__nm{margin:0;font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-0.022em;color:#fff}
.bio__role{margin:5px 0 0;font-size:14.5px;color:#E8A183}
.bio__meta{margin-top:10px;color:var(--dark-faint)}
.bio__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:22px}
.bio__tags .tag{background:rgba(255,255,255,.05);border-color:var(--dark-rule);color:var(--dark-body)}
.bio__link{margin:24px 0 0}
.bio__link .tlink{color:#fff;border-bottom-color:var(--dark-rule)}
.bio__link .tlink:hover{color:#E8A183;border-color:#E8A183}

/* credibility row (/about)
   These names were .tag pills at 9.5px mono, the same treatment as a status chip, so the recognisable
   part got read as metadata and skipped. They are set at reading size here and aligned into columns,
   because eight names left to wrap freely end with one stranded on a line of its own, which reads as
   an accident rather than a list. Three columns: the longest name here is "City University of New
   York", which does not fit a quarter of the content column at this size and would wrap. */
.brands{margin-top:38px;padding-top:26px;border-top:1px solid var(--rule-strong)}
.brands__l{margin:0 0 20px}
.brands__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 26px}
.brands__list li{font-size:17px;font-weight:500;letter-spacing:-0.018em;color:var(--ink-2);line-height:1.25}

/* legal documents (/privacy, /terms)
   These pages were self-contained: their own inline stylesheet, their own header and a four-link footer
   stub, on the system font stack and the old purple. Their MAIN is carried across verbatim - it is the
   highest-stakes copy on the site and nothing here should be able to reword it - so this scope styles
   the elements that copy actually uses, at document rather than display sizes. The band system's h1/h2
   are built for headlines; a numbered clause list needs to be denser than that. */
.legal{max-width:768px;margin:0 auto;padding:0 var(--pad,22px)}
.legal h1{font-family:var(--serif);font-size:clamp(34px,4.4vw,44px);font-weight:400;letter-spacing:-0.024em;line-height:1.1;color:var(--ink);margin:0 0 8px}
.legal .updated{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0 0 30px}
.legal .lead{font-size:17.5px;line-height:1.62;color:var(--ink-2);margin:0 0 14px}
.legal h2{font-family:var(--serif);font-size:23px;font-weight:400;letter-spacing:-0.018em;line-height:1.25;color:var(--ink);margin:38px 0 10px}
.legal p,.legal li{font-size:15.5px;line-height:1.7;color:var(--body)}
.legal p{margin:0 0 12px}
.legal ul{padding-left:20px;margin:10px 0 14px}
.legal li{margin:6px 0}
.legal li b,.legal p b{color:var(--ink-2);font-weight:600}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.legal a:hover{color:var(--accent-2)}
.legal table.sub{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
.legal table.sub th,.legal table.sub td{text-align:left;padding:10px 12px;border:1px solid var(--rule);vertical-align:top;color:var(--body)}
.legal table.sub th{background:var(--paper-2);font-weight:600;color:var(--ink)}
/* a long clause table must scroll inside its own box rather than pushing the page sideways on a phone */
.legal .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:700px){
  .legal h2{font-size:21px;margin-top:32px}
  .legal .lead{font-size:16.5px}
}

/* forms inside a legal/utility document (/contact, /report)
   Written brand-native rather than scoped across from each page's own stylesheet. A regex CSS scoper
   is the wrong tool here: the one on the other branch mis-handled @media, :is(), @keyframes and a
   content:"}" declaration, and its failure mode is a page that renders with a rule quietly wrong. */
.legal form{margin-top:28px;display:flex;flex-direction:column;gap:18px}
/* AN AUTHOR display RULE BEATS THE UA STYLESHEET'S [hidden]{display:none}. /contact finishes with
   `form.hidden = true`, and the flex rule above silently cancelled it: the form stayed on screen
   underneath the confirmation, so a sender who had just successfully submitted saw the whole form
   still sitting there inviting them to send again. Caught by driving the form in a browser; nothing
   static could see it. Applies to any element under .legal that the page hides by attribute. */
.legal [hidden]{display:none}
.legal label{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:7px}
.legal label .req{color:var(--faint);font-weight:400}
.legal .field-hint{font-size:13.5px;color:var(--faint);margin:0 0 8px}
.legal input[type=text],.legal input[type=email],.legal textarea{
  width:100%;padding:12px 13px;border:1px solid var(--rule);border-radius:9px;font:inherit;font-size:15px;
  background:var(--white);color:var(--ink)}
.legal input::placeholder,.legal textarea::placeholder{color:var(--faint)}
.legal input[type=text]:focus,.legal input[type=email]:focus,.legal textarea:focus{
  outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.legal textarea{min-height:158px;resize:vertical}
/* HONEYPOT. Off-screen, not display:none - a bot that reads the computed style skips a hidden field,
   and a real user must never see or tab into it. Changing this breaks the spam trap silently. */
.legal .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.legal form button{align-self:flex-start;background:var(--accent);color:var(--white);border:1px solid var(--accent);
  border-radius:9px;padding:13px 25px;font:inherit;font-size:15.5px;font-weight:600;letter-spacing:-0.008em;cursor:pointer;
  transition:background .16s ease,border-color .16s ease}
.legal form button:hover{background:var(--accent-2);border-color:var(--accent-2)}
.legal form button:disabled{opacity:.55;cursor:default}
.legal .form-msg{color:#B3261E;font-size:14px;min-height:4px}
.legal .success{background:var(--ok-bg);border:1px solid #CFE5DA;color:var(--ok);border-radius:11px;padding:16px 18px;font-size:15px;margin-top:26px}

/* /report: a richer form page than /contact, on the same .legal shell
   TWO DIFFERENT REVEAL MECHANISMS LIVE UNDER .legal AND THEY MUST NOT COLLIDE.
   /contact toggles the hidden ATTRIBUTE (form.hidden = true; ok.hidden = false).
   /report toggles CLASSES (form.classList.add('hide'); success.classList.add('show')).
   So report's display toggles are keyed on ITS OWN ids. A shared `.legal .success{display:none}`
   would win against [hidden] on /contact and that page's confirmation would never appear at all -
   the sender would submit successfully and see nothing happen. */
.legal .page-head{text-align:center;margin-bottom:34px}
.legal .page-head h1{margin-top:16px}
.legal .page-head p{font-size:17px;color:var(--body);margin-top:12px}
.legal__card{padding:32px 30px}
.legal .field{margin-bottom:20px}
.legal .field .hint{font-weight:400;color:var(--faint);font-size:13px}
.legal .actions{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.legal .actions .btn{min-width:168px;justify-content:center}
.legal .form-note{font-size:13px;color:var(--faint)}
.legal #form-msg{display:none;font-size:14px;font-weight:500;margin-top:18px}
.legal #form-msg.err{display:block;color:#B3261E}
.legal .hide{display:none}
.legal #success{display:none;text-align:center;padding:12px 4px 8px}
.legal #success.show{display:block}
.legal #success .check{width:52px;height:52px;border-radius:50%;background:var(--ok);display:grid;place-items:center;margin:0 auto 18px}
.legal #success .check svg{width:28px;height:28px;color:#fff}
.legal #success h2{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-0.02em;color:var(--ink);margin:0 0 10px}
.legal #success p{margin-bottom:22px}

/* footer */
.foot{background:var(--paper);border-top:1px solid var(--rule);padding:52px 0 40px}
.foot__grid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:34px}
.foot__brand{max-width:30ch}
.foot__brand .brand{margin-bottom:14px}
.foot__brand p{font-size:14px;line-height:1.6;color:var(--body)}
.foot__legal{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule-2);font-size:13.5px;color:var(--faint);display:flex;gap:8px 24px;flex-wrap:wrap}
.foot__legal b{color:var(--ink-2);font-weight:600}
.foot__legal a{font-size:13.5px;color:var(--faint)}
.foot__legal a:hover{color:var(--ink)}
.foot h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{font-size:14.5px;color:var(--body)}
.foot ul a{line-height:1.35}
.foot a:hover{color:var(--ink);text-decoration:none}
.foot__base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--rule-2);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* The six-column footer needs ~1140px to hold its longest label on one line. Measured, not guessed:
   at 1021px the Host column is 118.6px and the longest link is 136.9px. */
@media (max-width:1140px){
  .foot__grid{grid-template-columns:repeat(3,1fr);gap:30px}
  .foot__brand{grid-column:1/-1}
}

/* reveal */
/* GATED ON A CLASS JAVASCRIPT ADDS, and that is the whole point. A bare .rv{opacity:0} hides the page
   until a script un-hides it, so with JavaScript off - or with nav.js merely failing to load - every
   marketing page renders its hero and then nothing at all, measured at 10 of 11 sections on the home
   page. Now nothing is ever hidden unless the code that reveals it is already running. */
html.rv-on .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
html.rv-on .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.rv-on .rv{opacity:1;transform:none;transition:none}.chip{transition:none}html{scroll-behavior:auto}}

@media (max-width:1020px){
  :root{--index:0px;--gut:0px;--band:82px}
  .idx{grid-template-columns:minmax(0,1fr)}
  .idx__mark{display:flex;gap:10px;border-top:0;padding-top:0;margin-bottom:16px}
  .idx__mark b{display:inline}
  .split{grid-template-columns:minmax(0,1fr);gap:40px}
  .brands__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--flip>.split__text{order:1}.split--flip>.split__vis{order:2}
  .proof{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  .nav__links{gap:16px}
  .nav__links a{font-size:13.5px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .wrap,.nav__in{padding:0 22px}
  .nav__in{grid-template-columns:1fr auto}
  .nav__links,.nav__end{display:none}
  .lede{font-size:17.5px}
  .price{grid-template-columns:minmax(0,1fr)}
  .straight{padding:28px 24px}
  .quote{padding:24px 22px}.quote--lead p{font-size:21px}
  .scene{padding:22px;font-size:18px}
  .foot__grid{grid-template-columns:repeat(2,1fr)}
  .brands__list{grid-template-columns:minmax(0,1fr)}
  /* stack the legal bar as its own lines rather than letting it wrap raggedly */
  .foot__legal{flex-direction:column;gap:7px;align-items:flex-start}
  .foot__legal > span:last-child{margin-left:0!important;display:flex;gap:18px}
}

/* reduced motion: no animation, no transition, anywhere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* skip link, kept out of layout until focused */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:11px 18px;border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0;color:#fff;text-decoration:none}
[inert]{cursor:default}

/* rotating platform word in the closing CTA.
   inline-grid so overflow and min-width actually apply (min-width is ignored on
   non-replaced inline elements, which is what pins the button width). */
.plat{display:inline-grid;grid-auto-rows:1fr;vertical-align:bottom;overflow:hidden;text-align:left}
.plat__w{display:block;white-space:nowrap;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .24s ease}
.plat__w.out{transform:translateY(-100%);opacity:0}
.plat__w.in{transform:translateY(100%);opacity:0;transition:none}
@media (prefers-reduced-motion:reduce){.plat__w,.plat__w.out,.plat__w.in{transform:none;opacity:1;transition:none}}

/* AA on the tinted ground: --faint at #6B6F7C measures 4.42:1 on --paper-2,
   under the 4.5 minimum for small text. Scoped so the paper hierarchy holds. */
.band--tint{--faint:#656976}

.brand__m{color:currentColor}

/* lifetime access: a full-width ruled strip under the plans, not a boxed card */
.lifetime{margin-top:22px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lifetime summary{list-style:none;cursor:pointer;padding:15px 2px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--body)}
.lifetime summary::-webkit-details-marker{display:none}
.lifetime summary::after{content:"+";margin-left:auto;font-size:16px;font-weight:400;color:var(--faint);line-height:1}
.lifetime[open] summary::after{content:"\2013"}
.lifetime summary:hover{color:var(--ink)}
.lifetime__b{padding:2px 2px 20px;max-width:64ch}
.lifetime__b p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--body)}
.lifetime__b b{color:var(--ink);font-weight:600}
.lifetime__b .tlink{font-size:14px}

/* ── mobile menu ──────────────────────────────────────────────────────────
   A full-height paper panel rather than a dropdown: the same editorial
   system as the pages, with numbered links and a staggered reveal. */
.navbtn{display:none;width:42px;height:42px;margin-right:-9px;border:0;background:none;padding:0;cursor:pointer;color:var(--ink);justify-self:end;align-items:center;justify-content:center}
.navbtn i{display:block;position:relative;width:19px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .34s var(--ease),opacity .2s ease}
.navbtn i::before,.navbtn i::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .34s var(--ease),opacity .2s ease}
.navbtn i::before{top:-6px}
.navbtn i::after{top:6px}
body.menu-open .navbtn i{background:transparent}
body.menu-open .navbtn i::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .navbtn i::after{transform:translateY(-6px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:90;background:var(--paper);display:flex;flex-direction:column;padding:0 22px 30px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .34s var(--ease),visibility .34s}
body.menu-open .mnav{opacity:1;visibility:visible;transform:none}
.mnav__top{height:62px;display:flex;align-items:center;flex:none;border-bottom:1px solid var(--rule-2);margin:0 -22px 0;padding:0 22px}
.mnav__x{margin-left:auto;width:42px;height:42px;margin-right:-9px;border:0;background:none;padding:0;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.mnav__x svg{width:19px;height:19px}
.mnav__links{list-style:none;margin:0;padding:26px 0 0;flex:1}
.mnav__links li{border-bottom:1px solid var(--rule-2);opacity:0;transform:translateY(10px)}
body.menu-open .mnav__links li{opacity:1;transform:none;transition:opacity .4s var(--ease) calc(var(--i) * 45ms + 90ms),transform .46s var(--ease) calc(var(--i) * 45ms + 90ms)}
.mnav__links a{display:flex;align-items:baseline;gap:16px;padding:19px 2px;font-family:var(--serif);font-size:29px;font-weight:400;letter-spacing:-0.028em;color:var(--ink)}
.mnav__links a:hover,.mnav__links a:focus-visible{color:var(--accent-2);text-decoration:none}
.mnav__links a b{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--faint);flex:none;width:22px}
.mnav__links a[aria-current="page"]{color:var(--accent-2)}
.mnav__links a[aria-current="page"] b{color:var(--accent-2)}
.mnav__foot{flex:none;padding-top:24px;display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(10px)}
body.menu-open .mnav__foot{opacity:1;transform:none;transition:opacity .4s var(--ease) .34s,transform .46s var(--ease) .34s}
.mnav__foot .btn{justify-content:center;padding:15px 24px;font-size:16px}
.mnav__foot .lg{text-align:center;font-size:15.5px;font-weight:500;color:var(--body)}
.mnav__note{margin:4px 0 0;text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}

@media (max-width:760px){
  .navbtn{display:flex}
  body.menu-open{overflow:hidden}
}
@media (min-width:761px){
  .mnav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mnav,.mnav__links li,.mnav__foot,.navbtn i,.navbtn i::before,.navbtn i::after{transition-duration:0s!important;transition-delay:0s!important}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
   SHARED PAGE COMPONENTS. Lifted verbatim out of the compare and features pages' own <style> blocks when
   the five /vs/ pages started needing them too. Two copies of a rule is how two pages drift apart, so
   these live here once and the page blocks keep only what is genuinely local to that page.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* comparison card (compare hub + every /vs/ page) */
.vslist{display:flex;flex-direction:column;gap:16px;margin-top:36px}
.vs{border:1px solid var(--rule);border-radius:14px;background:var(--white);padding:26px 28px 24px}
.vs__h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.vs__h h3{margin:0;font-size:19px;letter-spacing:-0.02em}
.vs__h .tag{margin-left:auto}
.vs__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border-radius:10px;overflow:hidden;margin-bottom:18px}
.vs__col{background:var(--paper);padding:18px 20px 20px}
.vs__col--us{background:var(--white)}
.vs__col h4{margin:0 0 7px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.vs__col--us h4{color:var(--accent-2)}
.vs__col p{margin:0;font-size:15px;line-height:1.55;color:var(--body)}
.vs__col--us p{color:var(--ink-2)}
.vs__fair{margin:0 0 18px;padding:15px 0 0;border-top:1px solid var(--rule-2)}
.vs__fair h5{margin:0 0 5px;font-size:13.5px;font-weight:600;color:var(--ink)}
.vs__fair p{margin:0;font-size:14.5px;line-height:1.55;color:var(--body)}
@media (max-width:700px){.vs{padding:22px 20px}.vs__cols{grid-template-columns:minmax(0,1fr)}}

/* feature grid + comparison table (features page + every /vs/ page) */
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.fcell{padding:34px 40px 36px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.fcell:nth-child(2n+1){border-left:0}
.fcell h3{font-size:17.5px;margin-bottom:8px}
.fcell p{font-size:15.5px;line-height:1.55;margin:0}
.fcell .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:14px}
.fcell .tag{margin-top:14px}
.ftable{width:100%;border-collapse:collapse;font-size:15.5px}
.ftable caption{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-bottom:14px}
.ftable th,.ftable td{text-align:left;padding:14px 16px;border-top:1px solid var(--rule);vertical-align:top}
.ftable thead th{border-top:0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500;padding-bottom:10px}
.ftable tbody th{font-weight:600;color:var(--ink);width:38%}
.ftable td{color:var(--body)}
.ftable .y{color:var(--ok);font-weight:600}
.ftable .n{color:var(--faint)}
.ftable-wrap{overflow-x:auto}

@media (max-width:760px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .fcell{padding:26px 0 28px;border-left:0}
}