/* AsoTheory landing: Palantir-flavoured: restrained, technical, hairline rules. Light + dark. */

:root{
  --bg:#FFFFFF;
  --bg-alt:#F6F7F9;
  --surface:#FFFFFF;
  --ink:#0B0E14;
  --ink-2:#3D4655;
  --ink-3:#6B7684;
  --ink-4:#9AA4B2;
  --line:#E3E7EC;
  --line-2:#CFD5DD;
  --blue:#2D72D2;
  --blue-hover:#215DB0;
  --blue-tint:#EEF4FC;
  --blue-line:#C9DDF6;
  --green:#1C6E42; --green-bg:#E7F5EC; --green-line:#BFE0CC;
  --orange:#935610; --orange-bg:#FDF0E1; --orange-line:#F2D4AF;
  --red:#AC2F33;    --red-bg:#FBEAEA;    --red-line:#EDC4C5;

  --nav-bg:rgba(255,255,255,.88);
  --btn-hover-bg:#F6F7F9;
  --shot-bar:#EDEFF3;
  --shot-dot:#C8CDD6;
  --shot-shadow:0 1px 2px rgba(11,14,20,.06), 0 18px 50px rgba(11,14,20,.16);

  /* contrast band: stays dark in light mode, goes darker still in dark mode */
  --band:#0B0E14;
  --band-2:#151A23;
  --band-line:#242B36;
  --band-tx:#FFFFFF;
  --band-tx-2:#A3ADBB;
  --band-tx-3:#8B95A5;
  --band-tx-4:#5C6779;
  --band-chip-bg:#111C2C;
  --band-chip-line:#26456F;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}

[data-theme="dark"]{
  --bg:#0E1218;
  --bg-alt:#141922;
  --surface:#171D26;
  --ink:#EDF0F4;
  --ink-2:#A7B0BC;
  --ink-3:#8A94A2;
  --ink-4:#6B7583;
  --line:#262E39;
  --line-2:#39434F;
  --blue:#4C90F0;
  --blue-hover:#8ABBFF;
  --blue-tint:#16273F;
  --blue-line:#2B4468;
  --green:#72CA9B; --green-bg:#17362A; --green-line:#2A5842;
  --orange:#FBB360; --orange-bg:#3A2C1A; --orange-line:#5E4526;
  --red:#FA999C;    --red-bg:#3B2124;    --red-line:#5E3438;

  --nav-bg:rgba(14,18,24,.88);
  --btn-hover-bg:#1B222C;
  --shot-bar:#1B222C;
  --shot-dot:#39434F;
  --shot-shadow:0 12px 44px rgba(0,0,0,.6);

  --band:#05080C;
  --band-2:#0C1118;
  --band-line:#1C232D;
  --band-tx:#EDF0F4;
  --band-tx-2:#A7B0BC;
  --band-tx-3:#8A94A2;
  --band-tx-4:#5F6A78;
  --band-chip-bg:#0E1926;
  --band-chip-line:#254163;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}

/* ---------------------------------------------------- type */
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow:after{content:"";flex:1;height:1px;background:var(--line)}
h1{font-size:clamp(42px,5.6vw,68px);line-height:1.05;letter-spacing:-.035em;font-weight:600}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.15;letter-spacing:-.025em;font-weight:600}
h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.lead{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:640px}
.muted{color:var(--ink-3)}
.small{font-size:15px}
.tiny{font-size:13px}
.mono{font-family:var(--mono)}

/* ---------------------------------------------------- nav */
.nav{
  position:sticky;top:0;z-index:60;background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.nav-in{position:relative}
.nav-in{display:flex;align-items:center;gap:28px;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.01em}
/* The real logo, replacing the letter-A placeholder badge.
 *
 * `background:none` is load-bearing rather than tidy-up. The artwork is a dark
 * rounded square on a transparent field, so any inherited image background
 * paints a hard-cornered block behind it and the rounding disappears. The app
 * stylesheet sets exactly such a rule, and this is the same fault that made the
 * Google Play mark look like it had a black box around it.
 *
 * Served at 64px for a 24px slot so it stays sharp on a 2x display, and sized in
 * CSS as well as in the width/height attributes so a slow-loading icon does not
 * shift the header. */
.logo .mk{width:24px;height:24px;border-radius:5px;background:none;
  display:block;flex-shrink:0;object-fit:contain}
/* The footer wears it a shade smaller. In CSS rather than inline, because the
   rule above sets an explicit width that would otherwise win over the element's
   width attribute and silently re-inflate it to 24px. */
.fc-brand .logo .mk{width:21px;height:21px;border-radius:4px}
/* align-items:center matters here: "Products" is a button and "Pricing" is an
   anchor, so without it flex stretches them to different heights and their text
   baselines do not line up. */
.nav-links{display:flex;align-items:center;gap:24px;margin-left:12px}
/* Scoped to the top-level nav links only. It used to be `.nav-links a`, which
   also matched every anchor inside the mega dropdown — and at specificity
   (0,1,1) it beat `.mm-item`, `.mm-feature` and `.mm-hero` at (0,1,0). The
   result was that all three were laid out inline-flex against their authors'
   intent: the feature panel's preview collapsed to 2px wide and its title and
   body text sat side by side rather than stacked, and the Magic banner
   shrink-wrapped to 452px instead of spanning the panel.

   `> a` keeps the rule on the direct children it was written for. The dropdown
   is a child of `.mm-wrap`, not of `.nav-links` directly, so it is untouched. */
.nav-links > a{font-size:15px;line-height:1;color:var(--ink-2);display:inline-flex;align-items:center}
.nav-links > a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ---------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;
  padding:9px 18px;border-radius:3px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:var(--ink-4);background:var(--btn-hover-bg)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.dark:hover{opacity:.85}
/* The primary CTA, in the exact blue of the word "record" in the headline, so
   the promise and the button that acts on it are visibly the same thing.
 *
 * Dark text rather than white, and not a stylistic choice: #6BA6F5 against white
 * text is 2.5:1, which fails WCAG AA for any text size. Against the near-black
 * ink it is 7.6:1. The dark-hero blue button already used dark text for the same
 * reason, so this is consistent rather than new. */
.btn.accent{background:var(--hl);border-color:var(--hl);color:#0B0E14;font-weight:600}
.btn.accent:hover{background:#8ABBFF;border-color:#8ABBFF}

.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
[data-theme="dark"] .btn.blue{color:#0B0E14}
.btn.blue:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn.ghost{background:none;border-color:transparent;padding-left:0}
.btn.ghost:hover{background:none;color:var(--blue)}
.btn.lg{padding:12px 24px;font-size:16px}
.btn.icon{padding:8px 10px}

/* theme toggle */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--ink-2);
  cursor:pointer;transition:.15s;flex-shrink:0}
.theme-btn:hover{color:var(--ink);border-color:var(--ink-4);background:var(--btn-hover-bg)}
.theme-btn .moon{display:none}
[data-theme="dark"] .theme-btn .moon{display:block}
[data-theme="dark"] .theme-btn .sun{display:none}

/* ----------------------------------------------------------------------------
   Always-dark zone: the hero only. Everything below it follows the active theme.
   Implemented by re-pointing the light-mode tokens at the dark palette for this
   subtree, so it is one block rather than a parallel set of overrides.
   ------------------------------------------------------------------------- */
.zone-dark{
  --bg:var(--band);
  --bg-alt:var(--band-2);
  --surface:var(--band-2);
  --ink:var(--band-tx);
  --ink-2:var(--band-tx-2);
  --ink-3:var(--band-tx-3);
  --ink-4:var(--band-tx-4);
  --line:var(--band-line);
  --line-2:#333D4B;
  --blue:#4C90F0;
  --blue-hover:#8ABBFF;
  --blue-tint:#16273F;
  --blue-line:#2B4468;
  --green:#72CA9B; --green-bg:#17362A; --green-line:#2A5842;
  --orange:#FBB360; --orange-bg:#3A2C1A; --orange-line:#5E4526;
  --red:#FA999C;    --red-bg:#3B2124;    --red-line:#5E3438;
  --btn-hover-bg:#161C25;
  --shot-bar:#131922;
  --shot-dot:#333D4B;
  --shot-shadow:0 18px 60px rgba(0,0,0,.55);
  background:var(--band);
  color:var(--band-tx);
  border-bottom:1px solid var(--band-line);
}
.zone-dark .btn.dark{background:var(--band-tx);border-color:var(--band-tx);color:var(--band)}
.zone-dark .btn.dark:hover{opacity:.88}
.zone-dark .btn.blue{color:#0B0E14}

/* ---------------------------------------------------- hero */
/* The dark band is the hero and nothing else. It used to run on through the
   sources and the counts, which made three unrelated things read as one long
   pitch; ending it here lets the sources land as page content instead. */
.hero{padding:88px 0 56px;position:relative;overflow:hidden}

/* Sources and counts, on the active theme. No bottom border: .shot-wrap below
   already draws a border-top, and two hairlines meeting reads as a 2px seam. */
.proof-band{background:var(--bg);padding:44px 0 0}
.proof-band .proof{margin-top:0}
.proof-band .stats{margin-top:44px;border-top:1px solid var(--line)}
.proof-band .stat{padding-bottom:26px}
.hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 10%,transparent 70%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 10%,transparent 70%);
  opacity:.7;
}
/* The payoff phrase in the headline, in the product blue. Lifted a step so it
   holds contrast against the dark hero, where the standard blue reads muddy. */
/* One token, so the headline word and the CTA button cannot drift apart. */
:root{--hl:#6BA6F5}
.hl{color:var(--hl)}
[data-theme="dark"] .hl{color:var(--hl)}
.hl::selection{background:var(--hl);color:var(--band)}

.hero-in{position:relative}
/* Two columns: the pitch on the left, the product's actual output on the right.
   The right column was dead space, and a live capture feed demonstrates the
   claim rather than restating it. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px;align-items:start}
.hero-copy{min-width:0}
.hero h1{max-width:15ch;margin-bottom:22px}

/* ---------------------------------------------------- hero visual
   A rank line with the dated change annotated on it. This is the product's
   central claim rendered rather than described, so it earns the space that the
   right column was wasting. */
.viz{
  position:relative;border:1px solid var(--line);border-radius:4px;
  background:var(--surface);box-shadow:var(--shot-shadow);margin-top:52px;
}
.viz-head{display:flex;align-items:center;gap:9px;padding:12px 15px;
  border-bottom:1px solid var(--line);background:var(--bg-alt)}
.viz-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);margin-right:auto}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(114,202,155,.6);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(114,202,155,.55)}
  70%{box-shadow:0 0 0 7px rgba(114,202,155,0)}
  100%{box-shadow:0 0 0 0 rgba(114,202,155,0)}
}
.viz-chart{padding:16px 15px 6px}
.viz-chart svg{display:block;width:100%;height:auto;overflow:visible}
.vz-grid{stroke:var(--line);stroke-width:1}
.vz-axis{fill:var(--ink-4);font-family:var(--mono);font-size:9.5px}
.vz-area{opacity:.9}
.vz-line{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.vz-mark{stroke:var(--ink-4);stroke-width:1;stroke-dasharray:3 3}
.vz-mark-lbl{fill:var(--ink-3);font-family:var(--mono);font-size:9.5px}
.vz-dot{fill:var(--surface);stroke:var(--blue);stroke-width:2.4}
.vz-badge{fill:var(--green-bg);stroke:var(--green-line)}
.vz-badge-tx{fill:var(--green);font-family:var(--mono);font-size:10px;font-weight:700}

.viz-rows{border-top:1px solid var(--line)}
.vz-row{display:flex;align-items:center;gap:10px;padding:9px 15px;
  border-bottom:1px solid var(--line);font-size:13px}
.vz-row:last-child{border-bottom:0}
.vz-kw{font-weight:600;min-width:96px}
.vz-rank{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);min-width:30px}
.vz-move{font-family:var(--mono);font-size:11px}
.vz-scores{margin-left:auto;display:flex;gap:12px;align-items:center}
.vz-score{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-4)}
.vz-score b{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);min-width:16px;text-align:right}
.vz-bar{width:34px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.vz-bar span{display:block;height:4px;border-radius:2px}

/* In the flow, so it can never sit on top of the keyword rows, but pulled left
   past the panel edge and shadowed so it still reads as a callout. */
.viz-float{
  /* Centred within the panel rather than hung off its left edge. The old negative
     left margin made it overhang by 26px on one side only, which read as
     misalignment rather than as a deliberate callout. It now sits inset equally,
     slightly wider than the rows below so it still reads as floating above them. */
  position:relative;z-index:2;margin:2px auto 14px;width:calc(100% - 22px);
  border:1px solid var(--line-2);border-radius:4px;background:var(--bg-alt);
  box-shadow:0 10px 30px rgba(0,0,0,.45);padding:9px 11px;
  opacity:0;transform:translateY(6px);animation:floatIn .5s .7s ease forwards;
}
.vf-when{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4);
  white-space:nowrap}
@keyframes floatIn{to{opacity:1;transform:none}}
.vf-head{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.vf-head img{width:17px;height:17px;border-radius:4px;border:1px solid var(--line)}
.vf-app{font-size:12.5px;font-weight:600}
.vf-diff{border:1px solid var(--line);border-radius:2px;overflow:hidden;
  font-family:var(--mono);font-size:10.5px;line-height:1.5}
.vf-diff div{padding:3px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-diff .o{background:var(--red-bg);color:var(--red);border-bottom:1px solid var(--line)}
.vf-diff .n{background:var(--green-bg);color:var(--green)}
.hero .lead{margin-bottom:30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.hero-note{font-family:var(--mono);font-size:13px;color:var(--ink-4);letter-spacing:.02em}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:64px}
.stat{padding:20px 32px;border-right:1px solid var(--line)}
.stats .stat:first-child{padding-left:0}
.stats .stat:last-child{border-right:0;padding-right:0}
.stat .n{font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-4);margin-top:4px}

/* ---------------------------------------------------- product shot
   Sits on the light page. The wireframe is mostly white, so the section gets a
   tinted, faintly gridded backdrop and the panel a real shadow, otherwise the
   interface dissolves into the page. */
.shot-wrap{
  position:relative;background:var(--bg-alt);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:44px 0 64px;
}
.shot-wrap:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 0%,transparent 75%);
  opacity:.55;
}
/* Wider than the rest of the page on purpose. This is the one place a visitor
   can see the actual interface, and the mock has a fixed 196px sidebar plus a
   data table, so every pixel taken off the width comes out of the table. Given
   its own wrap so widening it cannot shift the surrounding sections. */
.shot-wrap .wrap{position:relative;max-width:1360px}
.shot-hint{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.shot-hint:before{content:"";width:16px;height:1px;background:var(--line-2)}
.shot{border:1px solid var(--line-2);border-radius:4px;background:var(--surface);overflow:hidden;
  box-shadow:var(--shot-shadow)}
.shot-bar{height:38px;background:var(--shot-bar);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:7px;padding:0 12px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--shot-dot)}
.shot-url{margin-left:12px;font-family:var(--mono);font-size:12px;color:var(--ink-4);
  background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:2px 10px}
.ui{display:flex;min-height:520px;font-size:13.5px}
.ui-side{width:214px;border-right:1px solid var(--line);padding:10px 8px;flex-shrink:0;background:var(--surface)}
.ui-ent{display:flex;gap:8px;align-items:center;padding:8px 6px 12px;border-bottom:1px solid var(--line);
  margin-bottom:8px}
.ui-ent .ic{width:26px;height:26px;border-radius:5px;flex-shrink:0;border:1px solid var(--line)}
.ui-grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-4);
  font-weight:600;padding:9px 8px 4px}
.ui-nav{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;color:var(--ink-2);
  margin-bottom:2px;border:1px solid transparent;transition:background .12s,color .12s}
.ui-nav:hover{background:var(--bg-alt);color:var(--ink)}
.ui-nav.on{background:var(--blue-tint);color:var(--blue);font-weight:500;border-color:var(--blue-line)}
.ui-nav .sq{width:11px;height:11px;border-radius:2px;background:currentColor;opacity:.35;flex-shrink:0}
.ui-badge{margin-left:auto;font-size:10.5px;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:7px;padding:0 5px;color:var(--ink-3)}
.ui-main{flex:1;padding:18px 22px;min-width:0;background:var(--surface);overflow:hidden}
.ui-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ui-h .ic{width:34px;height:34px;border-radius:7px;flex-shrink:0;border:1px solid var(--line)}
.ui-h .t{font-size:16px;font-weight:600;letter-spacing:-.01em}
.demo-panel{animation:fade .22s ease}
.demo-panel.hidden{display:none}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.ui-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:10px}
.ui-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ui-tbl th{text-align:left;color:var(--ink-4);font-weight:500;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;padding:6px 9px;border-bottom:1px solid var(--line);background:var(--bg-alt)}
.ui-tbl td{padding:5px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.ui-tbl tr:last-child td{border-bottom:0}
.ui-diff{margin:0 11px 7px;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  font-family:var(--mono);font-size:11px}
.ui-diff .dl{padding:3px 8px}
.ui-diff .old{background:var(--red-bg);color:var(--red);border-bottom:1px solid var(--line)}
.ui-diff .new{background:var(--green-bg);color:var(--green)}
.ui-note{border:1px solid var(--line);border-left:2px solid var(--blue);background:var(--bg-alt);
  padding:9px 11px;border-radius:2px;font-size:11.5px;color:var(--ink-3);line-height:1.55}
.gl{width:16px;height:16px;border-radius:2px;display:inline-grid;place-items:center;font-size:10px;
  flex-shrink:0;background:var(--blue-tint);color:var(--blue);border:1px solid var(--blue-line)}
.gl.g{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.gl.o{background:var(--orange-bg);color:var(--orange);border-color:var(--orange-line)}
.mbar{display:inline-flex;align-items:center;gap:5px}
.mbar-n{min-width:16px;font-variant-numeric:tabular-nums}
.mbar-track{display:inline-block;width:34px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.mbar-fill{display:block;height:3px;border-radius:2px}
.mspark svg{vertical-align:middle}
.ui-split{display:grid;grid-template-columns:1fr 200px;border:1px solid var(--line);
  border-radius:3px;margin-bottom:12px}
.ui-split .l{padding:11px 13px}
.ui-split .r{border-left:1px solid var(--line);background:var(--bg-alt);padding:11px 13px}
.ui-f{display:flex;gap:12px;padding:3px 0;font-size:12.5px}
.ui-f .k{width:74px;color:var(--ink-3);flex-shrink:0}
.ui-kv{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0}
.ui-kv .k{color:var(--ink-3)}
.ui-panel{border:1px solid var(--line);border-radius:3px;overflow:hidden}
.ui-ph{display:flex;align-items:center;gap:7px;padding:7px 11px;border-bottom:1px solid var(--line);
  font-weight:600;font-size:12.5px}
.ui-cnt{font-size:11px;color:var(--ink-3);background:var(--bg-alt);border:1px solid var(--line);
  border-radius:8px;padding:0 5px;font-weight:500}
.ui-row{display:flex;align-items:center;gap:8px;padding:6px 11px;border-bottom:1px solid var(--line);
  font-size:12.5px}
.ui-row:last-child{border-bottom:0}
.ui-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.ui-rt{margin-left:auto;color:var(--ink-3);font-size:12px}
.pill{font-size:11px;padding:0 5px;border-radius:2px;border:1px solid;font-weight:500}
.pill.b{background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
.pill.r{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.pill.o{background:var(--orange-bg);color:var(--orange);border-color:var(--orange-line)}
.pill.g{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.pill.n{background:var(--bg-alt);color:var(--ink-3);border-color:var(--line);
  font-family:var(--mono);text-transform:uppercase}
.pill:not(.b):not(.r):not(.o):not(.g):not(.n){background:var(--bg-alt);color:var(--ink-3);border-color:var(--line)}

/* ---------------------------------------------------- sections */
section{padding:84px 0}
.sec-head{margin-bottom:44px;max-width:760px}
.sec-head h2{margin-bottom:14px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.cell{padding:28px 28px 28px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cell:nth-child(3n){border-right:0;padding-right:0}
.cell:nth-child(3n+2),.cell:nth-child(3n+3){padding-left:28px}
.cell .no{font-family:var(--mono);font-size:12px;color:var(--ink-4);letter-spacing:.1em;margin-bottom:12px}
.cell h3{margin-bottom:8px}
.cell p{font-size:15.5px;color:var(--ink-2);line-height:1.6}

.ftable{width:100%;border-collapse:collapse;font-size:15px;border-top:1px solid var(--line)}
.ftable th{text-align:left;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-4);font-weight:500;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line)}
.ftable td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ftable td:first-child{font-weight:500;width:26%}
.ftable td.d{color:var(--ink-2);font-size:14.5px}

/* contrast band */
.dark-band{background:var(--band);color:var(--band-tx);border-top:1px solid var(--band-line);
  border-bottom:1px solid var(--band-line)}
.dark-band .eyebrow{color:var(--band-tx-4)}
.dark-band .eyebrow:after{background:var(--band-line)}
.dark-band .lead{color:var(--band-tx-2)}
.dark-band h2{color:var(--band-tx)}
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;
  border-top:1px solid var(--band-line)}
/* Columns are separated by hairline rules, so each needs breathing room on both
   sides of the rule. Only the outer edges sit flush with the container. */
.step{padding:24px 28px;border-right:1px solid var(--band-line)}
.step:first-child{padding-left:0}
.step:last-child{border-right:0;padding-right:0}
.step .n{font-family:var(--mono);font-size:12px;color:var(--band-tx-4);letter-spacing:.1em;margin-bottom:10px}
.step h3{font-size:16px;margin-bottom:6px;color:var(--band-tx)}
.step p{font-size:14.5px;color:var(--band-tx-3);line-height:1.55}
.callout{border:1px solid var(--band-line);background:var(--band-2);border-radius:3px;
  padding:22px 24px;margin-top:36px;display:flex;gap:20px;align-items:flex-start}
.callout .tagm{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--blue);
  border:1px solid var(--band-chip-line);background:var(--band-chip-bg);padding:3px 8px;
  border-radius:2px;flex-shrink:0}
.callout p{font-size:15px;color:var(--band-tx-2);line-height:1.65}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:var(--surface)}
.plan{padding:30px 28px;border-right:1px solid var(--line)}
.plan:last-child{border-right:0}
.ftable td:not(:first-child),.ftable th:not(:first-child){padding-left:20px}
.plan.hi{background:var(--bg-alt)}
.plan .pn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.plan .pp{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.plan .pp span{font-size:15px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.plan .pd{font-size:15px;color:var(--ink-2);margin:12px 0 20px;min-height:42px}
.plan ul{list-style:none;margin-bottom:24px}
/* The dash is a flex item exactly one line tall, with the rule painted at its
   vertical centre by a background gradient. The previous version absolutely
   positioned it at a fixed top offset, which only lined up at one font size and
   drifted visibly as soon as anything scaled or a feature wrapped to two lines:
   the marker stayed pinned near the top of the item while the text moved. */
/* A tick, drawn as an inline SVG data URI so it needs no markup change and no
   icon font. Sized to one line box and centred inside it, so it tracks the text
   at any font size and stays aligned when a feature wraps to two lines: the
   previous marker was absolutely positioned at a fixed offset and only lined up
   at one size. */
.plan li{font-size:15px;color:var(--ink-2);padding:6px 0;
  display:flex;align-items:flex-start;gap:10px;line-height:1.55}
.plan li:before{
  content:"";flex:0 0 15px;height:1.55em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239AA4B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center center;background-size:14px 14px;
}
.plan li.on:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232D72D2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}
[data-theme="dark"] .plan li.on:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234C90F0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}

/* faq */
.faq{border-top:1px solid var(--line)}
/* Two columns: question left, answer right.
   The explicit column assignments are what make a multi-paragraph answer work.
   Grid auto-places children in order, so a second <p> landed back in column one,
   under the question, reading as a stray block of text with no heading. Pinning
   the heading to column one and every paragraph to column two means an answer
   can be any length without the markup needing a wrapper. Row gap is zeroed for
   the same reason: consecutive paragraphs should read as one answer, not as
   separate rows of the grid. */
.faq-item{border-bottom:1px solid var(--line);padding:22px 0;display:grid;
  grid-template-columns:300px 1fr;column-gap:36px;row-gap:0;align-items:start}
.faq-item h3{font-size:16px;grid-column:1;grid-row:1}
.faq-item p{font-size:15.5px;color:var(--ink-2);line-height:1.65;grid-column:2}
.faq-item p + p{margin-top:14px}

.cta{text-align:center;padding:92px 0}
.cta h2{margin-bottom:16px}
.cta .lead{margin:0 auto 28px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

footer{border-top:1px solid var(--line);padding:46px 0 30px;background:var(--bg-alt)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px 26px}
.fc{display:flex;flex-direction:column;gap:9px;min-width:0}
.fc-h{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}
.fc a{font-size:14px;color:var(--ink-3);line-height:1.4}
.fc a:hover{color:var(--ink);text-decoration:none}
.fc-brand{gap:12px;padding-right:22px}
.fc-blurb{font-size:14px;color:var(--ink-4);line-height:1.55;margin:0}
.fc-blurb.tiny{font-size:13px}
.foot-base{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:34px;padding-top:20px;
  border-top:1px solid var(--line)}
.foot-base .c{font-size:13px;color:var(--ink-4)}

/* legacy single-row footer, still used by any page not yet on the shared mount */
.foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot .c{font-size:14px;color:var(--ink-4)}
.foot-links{margin-left:auto;display:flex;gap:20px}
.foot-links a{font-size:14px;color:var(--ink-3)}
.foot-links a:hover{color:var(--ink)}

/* ------------------------------------------------ blog and docs */
.c-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;padding:44px 0}
.c-index.tight{padding:14px 0 26px}
.c-card{display:flex;flex-direction:column;gap:8px;padding:22px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  color:inherit;transition:border-color .12s}
.c-card:hover{border-color:var(--line-2);text-decoration:none}
.c-card h3{font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
.c-card p{font-size:14.5px;color:var(--ink-3);line-height:1.55;margin:0}
.c-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.c-date{font-size:13px;color:var(--ink-4)}
.c-more{font-size:14px;color:var(--blue);margin-top:auto;padding-top:6px}
.c-byline{font-size:14px;color:var(--ink-3);margin-top:14px}
.crumb{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* A single measure for body copy. Long-form text set the full width of the page
   is unreadable regardless of how good the typography is. */
.c-body{max-width:720px;padding:44px 0 10px}
.c-body p{font-size:16.5px;line-height:1.7;color:var(--ink-2);margin:0 0 18px}
.c-h2{font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  margin:36px 0 14px}
.c-body > .c-h2:first-child{margin-top:0}
.c-list{margin:0 0 20px;padding-left:20px}
.c-list li{font-size:16.5px;line-height:1.7;color:var(--ink-2);margin-bottom:9px}
.c-code{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin:0 0 20px;overflow-x:auto;font-size:14px;line-height:1.6}
.c-note{margin:0 0 22px;font-size:15px;line-height:1.6}
.c-table-wrap{overflow-x:auto;margin:0 0 24px}
.c-table{width:100%;border-collapse:collapse;font-size:15px}
.c-table th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);padding:0 16px 9px 0;
  border-bottom:1px solid var(--line);white-space:nowrap}
.c-table td{padding:11px 16px 11px 0;border-bottom:1px solid var(--line);
  color:var(--ink-2);line-height:1.55;vertical-align:top}
.c-table td.c-first{color:var(--ink);font-weight:500;white-space:nowrap}
.c-next{border-top:1px solid var(--line);padding-top:30px;margin-top:44px}

.c-layout{display:grid;grid-template-columns:220px 1fr;gap:44px;padding:44px 0}
.c-side{position:sticky;top:80px;align-self:start;display:flex;
  flex-direction:column;gap:22px}
.c-side-group{display:flex;flex-direction:column;gap:5px}
.c-side-label{font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:4px}
.c-side-link{font-size:14.5px;color:var(--ink-3);line-height:1.4;padding:4px 0}
.c-side-link:hover{color:var(--ink);text-decoration:none}
.c-side-link.on{color:var(--blue);font-weight:500}
.c-main{min-width:0}
.c-main .c-body{padding-top:0}
.c-doc-group + .c-doc-group{margin-top:20px}

@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .fc-brand{grid-column:1 / -1;padding-right:0}
  .c-layout{grid-template-columns:1fr;gap:26px;padding:30px 0}
  .c-side{position:static;flex-direction:row;flex-wrap:wrap;gap:18px;
    border-bottom:1px solid var(--line);padding-bottom:20px}
  .c-body{padding-top:26px}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
}

@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .viz{margin-top:34px;max-width:560px}
  .viz-float{width:calc(100% - 16px)}
}
@media(max-width:900px){
  .wrap{padding:0 20px}
  .nav-links{display:none}
  .stats,.grid-3,.method,.plans{grid-template-columns:1fr}
  .stat,.step{border-right:0;border-bottom:1px solid var(--line);padding-left:0;padding-right:0}
  .step{border-bottom-color:var(--band-line)}
  .plan{padding-left:22px;padding-right:22px}
  .cell{border-right:0;padding-left:0 !important;padding-right:0}
  .plan{border-right:0;border-bottom:1px solid var(--line)}
  /* One column on narrow screens, so the explicit column pins from the desktop
     rule have to be released or grid-column:2 would invent a second track and
     push every answer off the side. */
  .faq-item{grid-template-columns:1fr;column-gap:0;row-gap:8px}
  .faq-item h3,.faq-item p{grid-column:1}
  .faq-item h3{grid-row:auto}
  .ui-side{display:none}
  section{padding:56px 0}
  .hero{padding-top:56px}
}

/* ============================================================ mega menu */
/* display:flex is load-bearing, not decoration.
   The wrap is a plain block containing an inline-level button, so its height was
   set by a line box using the inherited 1.6 line-height: 27.2px against the
   15px of the sibling anchors. Centring the row then centred two boxes of
   different heights, leaving "Products" sitting about a pixel below "Pricing".
   Flex makes the wrap adopt the button's height and the whole row lines up. */
.mm-wrap{position:static;display:flex;align-items:center}
.mm-trigger{font:inherit;font-size:15px;line-height:1;color:var(--ink-2);background:none;
  border:0;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:6px}
.mm-trigger:hover,.mm-wrap.open .mm-trigger{color:var(--ink)}
.mm-caret{font-size:9px;color:var(--ink-4);transition:transform .16s}
.mm-wrap.open .mm-caret{transform:rotate(180deg)}
.mega{
  /* Absolute against .nav (sticky counts as positioned). Avoids position:fixed,
     which the nav's backdrop-filter would turn into a containing-block trap. */
  position:absolute;left:0;right:0;top:100%;z-index:70;
  background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.mm-wrap.open .mega{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:1160px;margin:0 auto;padding:30px 32px 26px;
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px}
/* Three fixed columns filled by the balancer in nav.js, so the grid never wraps
   to a second row and never leaves a hole. align-content:start keeps short
   columns pinned to the top rather than distributing their groups down the
   height of the tallest one. */
.mm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.mm-col{align-content:start}
.mm-set + .mm-set{margin-top:24px}
.mm-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:14px}

/* Magic, across the top. Full bleed to the panel edges so it reads as a banner
   rather than as a wide first item in the grid below it. */
.mm-hero{display:flex;align-items:center;gap:14px;
  max-width:1160px;margin:0 auto;padding:15px 32px;
  border-bottom:1px solid var(--line);background:var(--bg-alt);
  transition:background .12s}
.mm-hero:hover{background:var(--blue-tint)}
.mm-hero .p-ico{width:32px;height:32px}
.mm-hero-tx{min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mm-hero-name{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.mm-hero-tag{font-size:13px;color:var(--ink-3)}
.mm-hero-cta{margin-left:auto;flex-shrink:0;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.mm-item{display:flex;gap:11px;padding:8px 9px;margin:0 -9px;border-radius:3px;
  align-items:flex-start;transition:background .12s}
.mm-item:hover{background:var(--bg-alt)}
.mm-txt{min-width:0}
.mm-name{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.mm-tag{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:1px}
.p-ico{width:28px;height:28px;border-radius:5px;display:grid;place-items:center;flex-shrink:0;
  background:var(--blue-tint);color:var(--blue);border:1px solid var(--blue-line)}
.p-ico.t-green{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.p-ico.t-orange{background:var(--orange-bg);color:var(--orange);border-color:var(--orange-line)}
.p-ico.t-red{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}

.mm-side{border-left:1px solid var(--line);padding-left:34px}
.mm-feature{display:block}
.mm-feature-art{position:relative;height:104px;border:1px solid var(--line);border-radius:3px;
  background:var(--bg-alt);overflow:hidden;margin-bottom:13px}
.mfa-line{position:absolute;left:12%;right:12%;bottom:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--line-2) 0 46%,var(--blue) 46% 100%)}
.mfa-mark{position:absolute;left:46%;top:16px;bottom:16px;width:1px;
  background:repeating-linear-gradient(180deg,var(--ink-4) 0 3px,transparent 3px 6px)}
.mm-feature-title{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.mm-feature-copy{font-size:13px;color:var(--ink-3);line-height:1.55;margin-bottom:9px}
.mm-feature-cta{font-size:13px;color:var(--blue);font-weight:500}
.mega-foot{border-top:1px solid var(--line);background:var(--bg-alt)}
.mega-foot{display:flex;align-items:center;gap:16px;padding:12px 32px;
  max-width:1160px;margin:0 auto}
.mm-foot-links{margin-left:auto;display:flex;gap:20px}
.mm-foot-links a{font-size:13.5px;color:var(--ink-2)}
.mm-foot-links a:hover{color:var(--blue)}

/* ============================================================ product pages */
.p-hero{padding:52px 0 60px;border-bottom:1px solid var(--band-line)}
.p-back{font-size:13.5px;color:var(--ink-3);display:inline-block;margin-bottom:22px}
.p-back:hover{color:var(--ink)}
.p-hero-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.p-h1{font-size:clamp(34px,4.4vw,54px);line-height:1.06;letter-spacing:-.03em;
  font-weight:600;margin-bottom:18px;max-width:20ch}

.p-group{margin-bottom:44px}
.p-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.p-card{display:block;border:1px solid var(--line);border-radius:4px;padding:20px;
  background:var(--surface);transition:border-color .14s,transform .14s}
.p-card:hover{border-color:var(--ink-4);transform:translateY(-2px)}
.p-card .p-ico{margin-bottom:13px}
.p-card-name{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.p-card-tag{font-size:13.5px;color:var(--ink-3);line-height:1.5;margin-bottom:13px}
.p-card-cta{font-size:13px;color:var(--blue);font-weight:500}

.p-does{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line)}
.p-does-item{padding:26px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.p-does-item:first-child{padding-left:0}
.p-does-item:last-child{border-right:0;padding-right:0}
.p-num{font-family:var(--mono);font-size:11px;color:var(--ink-4);letter-spacing:.1em;margin-bottom:11px}
.p-does-item h3{margin-bottom:7px}
.p-does-item p{font-size:14.5px;color:var(--ink-2);line-height:1.6}

@media(max-width:1040px){
  .mm-wrap{position:relative}
  .mega{left:auto;right:auto;top:calc(100% + 10px);width:min(92vw,620px);
    border:1px solid var(--line);border-radius:4px}
  .mega-in{grid-template-columns:1fr;gap:26px;padding:22px}
  .mm-cols{grid-template-columns:1fr 1fr}
  .mm-side{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}
  .mega-foot{padding:12px 22px;flex-wrap:wrap;gap:10px}
  .p-does{grid-template-columns:1fr}
  .p-does-item{border-right:0;padding-left:0;padding-right:0}
}


/* ------------------------------------------------ hero selling points */
/* Two by two. Four claims read as a scannable set; five stacked bullets read as
   a wall, which is what this replaced. Collapses to one column on a narrow
   viewport rather than squeezing two. */
.hero-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 20px;margin:20px 0 24px}
/* Centred, not flex-start: these are single-line headlines now that the
   explanatory sentences are gone, so a top-aligned 28px icon beside one line of
   text would sit visibly high. */
.hp{display:flex;gap:11px;align-items:center}
.hp-ic{flex-shrink:0;width:28px;height:28px;border-radius:7px;display:flex;
  align-items:center;justify-content:center;background:var(--blue-tint);
  border:1px solid var(--blue-line);color:var(--blue)}
.hp b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);
  line-height:1.35}
.hp p{font-size:14px;line-height:1.5;color:var(--ink-3);margin:0}
@media (max-width:860px){
  .hero-grid2{grid-template-columns:1fr;gap:13px}
}

/* ------------------------------------------------ credibility strip */
.proof{margin:34px auto 0;text-align:center;max-width:900px}
.proof-label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);
  margin-bottom:13px}
.proof-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.proof-item{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;background:var(--bg-alt)}
.proof-item svg{flex-shrink:0}
.proof-note{margin:14px auto 0;max-width:640px;font-size:13px;line-height:1.6;color:var(--ink-4)}
@media (max-width:720px){
  .proof-item{font-size:13px;padding:6px 12px}
}


/* ------------------------------------------------ legal pages */
.legal{padding:52px 0 80px;max-width:820px}
.legal-head h1{font-size:40px;letter-spacing:-.02em;margin:6px 0 14px}
.legal-tabs{display:flex;gap:6px;margin-top:22px;border-bottom:1px solid var(--line);
  padding-bottom:0}
.legal-tabs .lt{font-size:14.5px;color:var(--ink-3);padding:8px 13px;border-radius:6px 6px 0 0;
  border:1px solid transparent;border-bottom:0;text-decoration:none}
.legal-tabs .lt.on{color:var(--ink);background:var(--bg-alt);border-color:var(--line)}
.legal-sec{padding-top:40px;scroll-margin-top:80px}
.legal-sec h2{font-size:27px;letter-spacing:-.01em;margin-bottom:4px}
.legal-sec h3{font-size:18px;margin:28px 0 9px}
.legal-sec p{font-size:16px;line-height:1.68;color:var(--ink-2);margin-bottom:12px}
.legal-sec .upd{font-size:13px;color:var(--ink-4);margin-bottom:18px}
.legal-list{margin:0 0 14px;padding-left:20px}
.legal-list li{font-size:16px;line-height:1.62;color:var(--ink-2);margin-bottom:7px}
.legal-table{width:100%;border-collapse:collapse;margin:12px 0 20px;
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.legal-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-4);background:var(--bg-alt);padding:9px 13px;border-bottom:1px solid var(--line);
  font-weight:500}
.legal-table td{padding:11px 13px;border-bottom:1px solid var(--line);font-size:14.5px;
  line-height:1.55;color:var(--ink-2);vertical-align:top}
.legal-table tr:last-child td{border-bottom:0}
.legal-table td b{color:var(--ink)}
@media (max-width:720px){
  .legal-head h1{font-size:31px}
  .legal-table{font-size:13px}
  .legal-tabs{overflow-x:auto}
}

.legal-sec .mono{font-family:var(--mono,ui-monospace,monospace);font-size:13.5px;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;padding:1px 5px}


/* ================================================= mobile navigation */
.nav-burger{display:none;background:none;border:0;color:var(--ink-2);cursor:pointer;
  padding:6px;margin-left:auto;border-radius:5px;align-items:center}
.nav-burger:hover{color:var(--ink);background:var(--bg-alt)}
.nav-mobile{position:fixed;inset:60px 0 0;background:var(--bg);z-index:59;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line);opacity:0;transition:opacity .16s ease}
.nav-mobile.on{opacity:1}
.nm-in{padding:20px;display:flex;flex-direction:column;gap:8px;max-width:520px;margin:0 auto}
.nm-in .btn.block{width:100%;justify-content:center;padding:11px 14px;font-size:16px}
.nm-group{margin-top:16px}
.nm-group .mm-label{margin-bottom:6px}
.nm-item{display:flex;align-items:center;gap:11px;padding:11px 4px;font-size:16px;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.nm-item:last-child{border-bottom:0}
.nm-item.plain{color:var(--ink-2)}
.nm-item:active{background:var(--bg-alt)}

/* ================================================= small screens */
@media (max-width:900px){
  .nav-burger{display:flex}
  /* The two header buttons plus a burger is too much for a narrow bar, and the
     buttons are repeated at the top of the mobile panel anyway. */
  .nav-cta .btn{display:none}
}

@media (max-width:600px){
  .wrap{padding:0 16px}
  section{padding:44px 0}
  h1{font-size:33px;line-height:1.12}
  h2{font-size:25px}
  .lead{font-size:17px}
  .hero-in{padding-top:26px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{justify-content:center;width:100%}
  .hero-note{text-align:center}
  .viz{margin-top:26px}
  /* The diff callout overhangs the panel edge on desktop; on a phone there is no
     room to overhang into, so it sits inside. */
  .viz-float{width:100%}
  .proof-row{flex-direction:column;align-items:stretch}
  .proof-item{justify-content:center}
  .shot-wrap{display:none}          /* an interactive desktop mock is unusable at this width */
  .stats .stat{padding:14px 0}
  .plan{padding:20px 16px}
  .pp{font-size:30px}
  .faq-item{padding:16px 0}
  .foot{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-links{flex-wrap:wrap;gap:14px}
  .legal-head h1{font-size:28px}
  .legal-table thead{display:none}
  /* A four-column policy table cannot hold its shape at 375px, so each row becomes
     a labelled block instead of a horizontal scroll nobody will discover. */
  .legal-table,.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:100%}
  .legal-table tr{border-bottom:1px solid var(--line);padding:6px 0}
  .legal-table tr:last-child{border-bottom:0}
  .legal-table td{border:0;padding:5px 12px}
  .legal-table td:before{content:attr(data-l);display:block;font-size:11px;
    text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4);margin-bottom:2px}
}

/* ---------------------------------------------------- demo rank chart */
/* preserveAspectRatio="none" stretches the SVG to the box, which distorts any
   text or circle inside it. Axis labels therefore live outside as positioned
   spans, and strokes carry vector-effect so they keep their weight. */
.ui-chart{position:relative;height:150px;margin:2px 0 6px}
.ui-chart-svg{width:100%;height:100%;display:block}
.ui-chart-ax{position:absolute;inset:0;pointer-events:none}
/* Rank labels, right-aligned inside the chart's left gutter with a gap before
   the gridline starts. `--pl` is set inline by landing.js from the same constant
   that positions the gridlines, so the two cannot drift apart. Falls back to a
   sane value if the property is ever missing. */
.ui-chart-ax span{position:absolute;left:0;width:var(--pl,8%);
  box-sizing:border-box;text-align:right;padding-right:10px;
  transform:translateY(-50%);
  font-family:var(--mono);font-size:10px;color:var(--ink-4)}
/* `left` is set inline from the marker position. translateX(-50%) centres the
   caption over the dashed line instead of hanging it off to one side. */
.ui-chart-note{position:absolute;top:2px;transform:translateX(-50%);
  font-size:10px;color:var(--ink-4);
  background:var(--surface);padding:0 5px;white-space:nowrap}
.ui-legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:2px 0 2px}
.ui-legend .ul{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--ink-3)}
.ui-legend .ul i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ui-legend .ul em{font-style:normal;font-family:var(--mono);font-size:10px;
  color:var(--ink-4);text-transform:uppercase}

/* ---------------------------------------------------- features */
.sec-head.centred{text-align:center;max-width:760px;margin:0 auto}
.sec-head.centred .lead{margin:0 auto}
.pillhead{display:inline-block;font-size:14px;font-weight:500;padding:5px 16px;
  border:1px solid var(--line-2);border-radius:99px;color:var(--ink-2);margin-bottom:20px}

.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:34px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:20px;transition:border-color .18s ease,transform .18s ease}
.feat:hover{border-color:var(--line-2);transform:translateY(-2px)}
.feat h3{font-size:20px;margin:20px 0 12px;letter-spacing:-.015em}

.feat-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.feat-list li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.feat-list li:before{
  content:"";flex:0 0 17px;height:1.5em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232D72D2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.6' stroke-opacity='.35'/%3E%3Cpath d='M4.8 8.2l2.2 2.2 4.2-4.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center center;background-size:16px 16px;
}
[data-theme="dark"] .feat-list li:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234C90F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.6' stroke-opacity='.35'/%3E%3Cpath d='M4.8 8.2l2.2 2.2 4.2-4.6'/%3E%3C/svg%3E");
}

/* The preview panel: a live miniature of the real interface rather than a
   screenshot, so it stays sharp at any size, follows the theme, and cannot go
   stale when the product changes. */
.fp{background:var(--bg-alt);border:1px solid var(--line);border-radius:9px;
  padding:13px 14px;height:236px;overflow:hidden;position:relative;
  font-size:12px;line-height:1.45}
.fp:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38px;
  background:linear-gradient(transparent,var(--bg-alt));pointer-events:none}
.fp-head{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  color:var(--ink);padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line)}
.fp-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}
.fp-dot.mg{background:linear-gradient(135deg,#4C90F0,#C58AF0 55%,#FBB360)}
.fp-r{margin-left:auto;font-weight:400;color:var(--ink-4);font-size:11px}

.fp-ch{display:flex;align-items:center;gap:7px;padding:6px 0}
/* The real store icons, served from Apple's own CDN, so the preview shows the
   apps somebody would actually be tracking rather than coloured initials. The
   hairline border keeps a light icon from bleeding into a light panel. */
.fp-ic{width:17px;height:17px;border-radius:4px;flex-shrink:0;object-fit:cover;
  border:1px solid var(--line);background:var(--surface)}
.fp-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.fp-t em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-4);
  text-transform:uppercase;margin:0 3px}
.fp-w{color:var(--ink-4);font-size:11px;flex-shrink:0}
.fp-diff{margin:2px 0 6px;border-radius:5px;overflow:hidden;font-family:var(--mono);font-size:10.5px}
.fp-diff .o{background:var(--red-bg);color:var(--red);padding:4px 8px}
.fp-diff .n{background:var(--green-bg);color:var(--green);padding:4px 8px}

.fp-tbl{width:100%;border-collapse:collapse}
.fp-tbl td{padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.fp-tbl td.k{color:var(--ink)}
.fp-tbl td.r{text-align:right;font-family:var(--mono);width:64px;color:var(--ink)}
.fp-tbl td.a{text-align:right;width:44px;font-family:var(--mono);font-size:10.5px;color:var(--ink-4)}
.fp-tbl.price td.k{font-size:11.5px}

.fp-reach .fp-rr{display:flex;align-items:center;gap:8px;padding:7px 0}
.fp-reach .k{flex:1;min-width:0;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fp-rn{font-size:11px;color:var(--ink-4);padding:0 0 7px;border-bottom:1px solid var(--line);
  margin-bottom:2px;line-height:1.45}

.fp-chart{height:112px;margin:2px 0 8px}
.fp-legend{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:10.5px;color:var(--ink-3)}
.fp-legend span{display:inline-flex;align-items:center;gap:5px}
.fp-legend i{width:7px;height:7px;border-radius:50%}

.fp-ops{display:flex;flex-direction:column;gap:9px}
.fp-op{display:flex;gap:9px}
.fp-op .n{flex:0 0 18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:700;background:var(--blue-tint);color:var(--blue);
  border:1px solid var(--blue-line)}
.fp-op b{display:block;font-size:12px;color:var(--ink);line-height:1.35;margin-bottom:2px}
.fp-op p{font-size:11px;color:var(--ink-4);line-height:1.4}

/* Cards arrive as the section scrolls in. Starts revealed so a browser without
   IntersectionObserver, or with the script blocked, shows content not blanks. */
.feats.will-reveal .feat{opacity:0;transform:translateY(16px)}
.feats.revealed .feat{opacity:1;transform:none;
  transition:opacity .55s ease var(--d),transform .55s cubic-bezier(.2,.7,.3,1) var(--d)}
@media (prefers-reduced-motion: reduce){
  .feats.will-reveal .feat{opacity:1;transform:none}
  .feats.revealed .feat,.feat{transition:none}
}
@media(max-width:900px){ .feats{grid-template-columns:1fr} }

/* ====================================================================
   Mobile pass
   ==================================================================== */

/* Tablets and small laptops. */
@media (max-width:900px){
  /* Four stats in one column is a lot of scrolling for four short facts.
     Two by two keeps them scannable. */
  .stats{grid-template-columns:1fr 1fr}
  .stat{border-right:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}

  /* The stacked dropdown columns need breathing room once they are one column. */
  .mm-hero{padding:13px 22px}

  /* The demo card's split panel would squeeze its right column to nothing. */
  .ui-split{grid-template-columns:1fr}
  .ui-split > * + *{border-left:0;border-top:1px solid var(--line)}
}

@media (max-width:600px){
  /* Touch targets. A 37px-tall button is under every platform guideline, and
     this is the size that decides whether the primary call to action is easy
     or fiddly on the one device most first visits arrive from. */
  .btn{min-height:44px;padding:11px 18px}
  .btn.lg{min-height:48px;padding:13px 22px}
  .theme-btn{width:40px;height:40px}
  .nav-burger{min-width:44px;min-height:44px}

  /* Section headings were sized for a wide measure. */
  .sec-head{margin-bottom:28px}
  .sec-head.centred{text-align:left}
  .eyebrow{margin-bottom:14px}

  /* The coverage table: thirteen fields against three columns of prose, which
     at this width gives the description column about fifteen characters. Each
     row becomes a small card with its own labels instead, the same treatment
     the legal tables already use. A horizontal scroll would technically work
     and nobody would ever discover it. */
  .ftable thead{display:none}
  .ftable,.ftable tbody,.ftable tr,.ftable td{display:block;width:100%}
  .ftable tr{border-bottom:1px solid var(--line);padding:12px 0}
  .ftable tr:last-child{border-bottom:0}
  .ftable td{border:0;padding:2px 0}
  .ftable td:first-child{width:auto;font-size:16px;font-weight:600}
  .ftable td:not(:first-child){padding-left:0}
  .ftable td.d{font-size:14.5px;margin-top:4px}
  /* The severity pill reads as its own line without a caption; the description
     does not, so only that one gets a label. */
  .ftable td.d:before{content:attr(data-l);display:block;font-size:11px;
    text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4);margin-bottom:3px}

  /* Feature cards: tighter frame, shorter preview, so a card plus its bullets
     is close to one screenful rather than one and a half. */
  .feats{gap:14px;margin-top:24px}
  .feat{padding:14px;border-radius:10px}
  .feat h3{font-size:18px;margin:16px 0 10px}
  .feat-list li{font-size:14.5px}
  .fp{height:196px;padding:11px 12px}
  .fp-chart{height:92px}

  /* Footer: the two product columns stack, so the labels do more work. */
  .foot-grid{gap:22px}
  .foot-base{flex-direction:column;gap:6px;margin-top:24px}

  /* Long unbroken strings, mostly URLs and package ids, must not push the
     page sideways. */
  .c-body,.fc,.faq-item p{overflow-wrap:anywhere}
}

/* Small phones. */
@media (max-width:400px){
  .wrap{padding:0 14px}
  h1{font-size:29px}
  h2{font-size:23px}
  .feat{padding:12px}
  .fp{height:180px}
  .pp{font-size:26px}
  .proof-item{font-size:12.5px}
}

/* Nothing may exceed the viewport. Images and embedded media are the usual
   culprits, and a single overflowing element makes the whole page pan
   sideways, which reads as broken rather than as one bad element. */
img,svg,video,table{max-width:100%}

/* Grid and flex children default to min-width:auto, which means they refuse to
   shrink below their own min-content width. One stubborn child — a chart, a
   monospace diff line, a nowrap row — then widens the whole track, and because
   .hero clips its overflow the result is text sliced off mid-word rather than a
   scrollbar that would have made the cause obvious.
   Setting min-width:0 lets the track shrink to the viewport and the text wrap,
   which is what it should have done. */
.hero-grid > *,
.hero-grid2 > *,
.hero-copy,
.viz,
.feats > *,
.plans > *,
.foot-grid > *,
.proof-row > *,
.stats > *{min-width:0}

/* Long words and unbroken strings wrap rather than push the page sideways. */
.hero-copy h1,.hero-copy .lead,.hp b,.hero-note{overflow-wrap:break-word}