/* ============================================================================
   JustAudit, "Folio"
   One stylesheet for every customer-facing page. admin.css layers on top of it.

   The identity is the desktop app's: warm paper, one ink navy, one oxide red, a serif
   that behaves like a printed masthead, hairline rules doing the work that borders and
   boxes do elsewhere. What is new here is the execution, a real modular type scale,
   three layers of paper with warm elevation instead of flat fills, 2px corners rather
   than dead-square ones, and motion that eases in rather than appearing.

   Written mobile-first: every rule that adds columns is a min-width query.
   Every animation is opt-out via prefers-reduced-motion, at the bottom of this file.
   ============================================================================ */

/* ── Tokens ─────────────────────────────────────────────────────────────────
   Light is the base palette on bare :root. Dark is redefined twice, once under
   prefers-color-scheme for people who never touch the toggle, once under
   [data-theme=dark] so the toggle wins in both directions. Nothing gets its only
   definition inside a media query. */
:root {
  color-scheme: light dark;

  --canvas:      #F6F2E8;   /* the page */
  --surface:     #FFFDF7;   /* raised: cards, the masthead */
  --surface-2:   #EFEADC;   /* sunk: code, table heads, inset wells */
  --surface-3:   #E5DECB;   /* deeper still: meters, tracks */

  --ink:         #1A1814;
  --ink-2:       #4B4639;
  --ink-3:       #7C7462;

  --rule:        #E0D8C5;
  --rule-2:      #CDC3A9;

  --navy:        #173A5E;
  --navy-2:      #0F2A46;
  --navy-ink:    #F6F2E8;   /* text that sits on navy */
  --navy-wash:   #E6EBF2;

  --oxide:       #B4432C;
  --oxide-2:     #8E3220;
  --oxide-wash:  #F7E3DC;

  --ok:          #2F6B4F;   --ok-wash:   #E3EDE5;
  --warn:        #8A5B14;   --warn-wash: #F4E7CC;
  --bad:         #B4432C;   --bad-wash:  #F7E3DC;

  /* Warm shadows, not grey ones, a grey shadow on cream reads as dirt. */
  --lift-1: 0 1px 2px rgba(58,44,20,.05), 0 2px 6px -2px rgba(58,44,20,.07);
  --lift-2: 0 2px 4px rgba(58,44,20,.06), 0 10px 26px -8px rgba(58,44,20,.14);
  --lift-3: 0 4px 8px rgba(58,44,20,.07), 0 24px 56px -16px rgba(58,44,20,.22);

  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
  --mono:  "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --r:     2px;    /* the house radius: present, but barely */
  --r-lg:  4px;
  --tap:   46px;

  --ease:      cubic-bezier(.22, 1, .36, 1);   /* the site's one easing curve */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t:         .18s var(--ease-soft);

  --head-h: 68px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:     #14130F;
    --surface:    #1D1B15;
    --surface-2:  #26231A;
    --surface-3:  #302C20;
    --ink:        #F0EADB;
    --ink-2:      #C6BEA7;
    --ink-3:      #8E8672;
    --rule:       #322E22;
    --rule-2:     #45402E;
    --navy:       #8FB2DA;
    --navy-2:     #A9C6E7;
    --navy-ink:   #0E1A26;
    --navy-wash:  #1B2836;
    --oxide:      #D07B5D;
    --oxide-2:    #E29578;
    --oxide-wash: #35211A;
    --ok:         #7FB394;  --ok-wash:   #1D2A22;
    --warn:       #D2A45B;  --warn-wash: #2E2614;
    --bad:        #D07B5D;  --bad-wash:  #35211A;
    --lift-1: 0 1px 2px rgba(0,0,0,.4);
    --lift-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 28px -10px rgba(0,0,0,.6);
    --lift-3: 0 4px 10px rgba(0,0,0,.45), 0 28px 60px -18px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --canvas:     #14130F;
  --surface:    #1D1B15;
  --surface-2:  #26231A;
  --surface-3:  #302C20;
  --ink:        #F0EADB;
  --ink-2:      #C6BEA7;
  --ink-3:      #8E8672;
  --rule:       #322E22;
  --rule-2:     #45402E;
  --navy:       #8FB2DA;
  --navy-2:     #A9C6E7;
  --navy-ink:   #0E1A26;
  --navy-wash:  #1B2836;
  --oxide:      #D07B5D;
  --oxide-2:    #E29578;
  --oxide-wash: #35211A;
  --ok:         #7FB394;  --ok-wash:   #1D2A22;
  --warn:       #D2A45B;  --warn-wash: #2E2614;
  --bad:        #D07B5D;  --bad-wash:  #35211A;
  --lift-1: 0 1px 2px rgba(0,0,0,.4);
  --lift-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 28px -10px rgba(0,0,0,.6);
  --lift-3: 0 4px 10px rgba(0,0,0,.45), 0 28px 60px -18px rgba(0,0,0,.7);
}

/* ── Reset and cross-engine normalisation ───────────────────────────────────
   Chrome's UA sheet inherits font and colour into form controls; Firefox's does not,
   and falls back to the OS UI font in OS-native shapes. Everything below exists so the
   two engines render the same page, not two different ones. */
*, *::before, *::after { box-sizing: border-box; }
/* Class rules below set display on .btn and .nav-drawer, both of which are also toggled
   with the hidden attribute, without this they win and "hidden" does nothing. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;   /* iOS must not re-scale text when rotated */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16.5px/1.65 var(--sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;        /* a long key or URL must not widen the page */
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font-family: inherit; color: inherit; margin: 0; }
button { -webkit-appearance: none; appearance: none; background: none; border: 0; cursor: pointer; }
button::-moz-focus-inner { border: 0; padding: 0; }
/* type=date keeps its native appearance in both engines on purpose: stripping it takes
   Chrome's calendar affordance with it, and the two date pickers cannot be reconciled
   short of replacing the control, which is not worth it for two fields. */
input:not([type=checkbox]):not([type=radio]):not([type=date]), select, textarea {
  -webkit-appearance: none; appearance: none;
}
input[type=checkbox], input[type=radio] { appearance: auto; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Firefox dims placeholders to ~.54 opacity; Chrome does not. */
::placeholder { color: var(--ink-3); opacity: 1; }
::selection { background: var(--oxide); color: #fff; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--oxide); }

:focus-visible {
  outline: 2px solid var(--oxide);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--navy); color: var(--navy-ink);
  padding: 10px 18px; border-radius: var(--r); font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; color: var(--navy-ink); }

.ic { width: 20px; height: 20px; flex: none; }

/* ── Motion primitives ──────────────────────────────────────────────────────
   All content is 100% visible by default. Smooth entrance transitions apply
   without hiding elements if JS or observers are delayed. */
[data-reveal] {
  opacity: 1;
  transform: none;
}
.js [data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@keyframes rise    { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheen   { from { background-position: -140% 0; } to { background-position: 240% 0; } }
@keyframes drawrule{ from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse   { 0%,100%{box-shadow:0 0 0 4px var(--ok-wash)} 50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ok) 14%, transparent)} }
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes shimmer { from{background-position:-200% 0} to{background-position:200% 0} }

/* ── Layout ─────────────────────────────────────────────────────────────────
   Three widths, one padding rhythm. Nothing on the site sets its own max-width. */
.wrap      { width: 100%; max-width: 720px;  margin-inline: auto; padding-inline: 20px; }
.wrap-mid  { width: 100%; max-width: 960px;  margin-inline: auto; padding-inline: 20px; }
.wrap-wide { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.section       { padding-block: 56px; }
.section-tight { padding-block: 34px; }
@media (min-width: 760px) {
  .wrap, .wrap-mid, .wrap-wide { padding-inline: 28px; }
  .section       { padding-block: 88px; }
  .section-tight { padding-block: 48px; }
}

/* A ruled divider that reads as the edge of a page, not a horizontal rule. */
.divider {
  border: 0; height: 1px; margin: 0;
  background: linear-gradient(90deg, transparent, var(--rule-2) 12%, var(--rule-2) 88%, transparent);
}

/* ── Masthead ───────────────────────────────────────────────────────────────
   Transparent over the canvas at rest; on scroll site.js adds .is-stuck, which brings in
   the surface colour, the rule and the lift. The oxide hairline across the very top is
   the one piece of brand theatre the old site had, kept and thinned. */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
/* Fallback: Firefox before 103 and any engine with backdrop-filter disabled gets an
   opaque bar rather than text over text. */
@supports not (backdrop-filter: blur(1px)) { .masthead { background: var(--canvas); } }
.masthead::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--oxide), var(--oxide-2) 40%, var(--navy));
}
.masthead.is-stuck {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom-color: var(--rule);
  box-shadow: var(--lift-1);
}
.masthead-in {
  max-width: 1200px; margin-inline: auto; padding: 12px 20px;
  min-height: var(--head-h);
  display: flex; align-items: center; gap: 14px;
}
@media (min-width: 760px) { .masthead-in { padding-inline: 28px; } }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark { display: grid; place-items: center; color: var(--navy); }
.brand-mark .logo { width: 30px; height: 30px; display: block; }
.brand-text {
  display: flex; flex-direction: column; line-height: 1;
  font: 700 20px/1 var(--serif); letter-spacing: -.015em;
  font-variation-settings: "opsz" 32;
}
.brand-text em {
  font: 500 10px/1.2 var(--sans); font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px;
}
@media (max-width: 519px) { .brand-text em { display: none; } }

.nav-main { display: none; margin-left: auto; gap: 2px; }
@media (min-width: 900px) { .nav-main { display: flex; align-items: center; } }
.nav-main a {
  position: relative; text-decoration: none; color: var(--ink-2);
  font-size: 14px; font-weight: 500; padding: 10px 14px; border-radius: var(--r);
  transition: color var(--t), background var(--t);
}
.nav-main a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  background: var(--oxide); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-main a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav-main a:hover::after,
.nav-main a[aria-current="page"]::after { transform: scaleX(1); }
.nav-main a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.masthead-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 900px) { .masthead-end { margin-left: 10px; } }

.theme-toggle {
  width: 40px; height: 40px; display: grid; place-items: center; position: relative;
  border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink-2);
  background: var(--surface);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--rule-2); }
.theme-toggle .ti { position: absolute; display: grid; place-items: center;
                    transition: opacity .3s var(--ease), transform .4s var(--ease); }
.theme-toggle .ic { width: 18px; height: 18px; }
/* Light theme shows the moon (what you would switch to); dark shows the sun. */
.ti-sun  { opacity: 0; transform: rotate(-70deg) scale(.6); }
.ti-moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ti-sun  { opacity: 1; transform: none; }
  :root:not([data-theme="light"]) .ti-moon { opacity: 0; transform: rotate(70deg) scale(.6); }
}
:root[data-theme="dark"] .ti-sun  { opacity: 1; transform: none; }
:root[data-theme="dark"] .ti-moon { opacity: 0; transform: rotate(70deg) scale(.6); }
:root[data-theme="light"] .ti-sun  { opacity: 0; transform: rotate(-70deg) scale(.6); }
:root[data-theme="light"] .ti-moon { opacity: 1; transform: none; }

.nav-cta { display: none; }
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }

.nav-burger {
  width: 40px; height: 40px; display: grid; place-items: center; position: relative;
  border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink);
  background: var(--surface);
}
@media (min-width: 900px) { .nav-burger { display: none; } }
.nav-burger .ic { width: 20px; height: 20px; position: absolute;
                  transition: opacity .22s var(--ease), transform .3s var(--ease); }
.nav-burger .i-shut { opacity: 0; transform: rotate(-90deg) scale(.7); }
.nav-burger[aria-expanded="true"] .i-open { opacity: 0; transform: rotate(90deg) scale(.7); }
.nav-burger[aria-expanded="true"] .i-shut { opacity: 1; transform: none; }

.nav-drawer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding: 10px 20px 20px;
  display: grid; gap: 2px;
  animation: rise .3s var(--ease) both;
}
@media (min-width: 900px) { .nav-drawer { display: none !important; } }
.nav-drawer a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 4px; text-decoration: none; color: var(--ink);
  font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--rule);
}
.nav-drawer a .ic { width: 17px; height: 17px; color: var(--ink-3); transition: transform var(--t); }
.nav-drawer a:hover .ic { transform: translateX(3px); color: var(--oxide); }
.nav-drawer a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.nav-drawer .drawer-cta {
  margin-top: 14px; border: 0; border-radius: var(--r);
  background: var(--navy); color: var(--navy-ink);
  justify-content: center; gap: 10px; font-weight: 600; padding: 15px;
}
.nav-drawer .drawer-cta .ic { color: currentColor; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--tap); padding: 13px 22px;
  border: 1px solid transparent; border-radius: var(--r);
  font: 600 15px/1.2 var(--sans); letter-spacing: -.005em;
  text-decoration: none; text-align: center; cursor: pointer; position: relative;
  transition: background var(--t), border-color var(--t), color var(--t),
              transform .16s var(--ease), box-shadow var(--t);
}
.btn .ic { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--navy); border-color: var(--navy); color: var(--navy-ink);
  box-shadow: var(--lift-1);
}
.btn-primary:hover {
  background: var(--navy-2); border-color: var(--navy-2); color: var(--navy-ink);
  box-shadow: var(--lift-2); transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-accent { background: var(--oxide); border-color: var(--oxide); color: #FFF6F2; box-shadow: var(--lift-1); }
.btn-accent:hover { background: var(--oxide-2); border-color: var(--oxide-2); color: #FFF6F2;
                    box-shadow: var(--lift-2); transform: translateY(-1px); }

.btn-ghost { background: var(--surface); border-color: var(--rule-2); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }

.btn-quiet { padding-inline: 12px; min-height: 40px; color: var(--ink-2); font-weight: 500; }
.btn-quiet:hover { color: var(--ink); background: var(--surface-2); }

.btn-sm { min-height: 40px; padding: 9px 16px; font-size: 14px; }
.btn-lg { min-height: 54px; padding: 16px 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled, .btn.is-off { opacity: .5; pointer-events: none; box-shadow: none; }
.btn-arrow:hover .ic { transform: translateX(4px); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }
@media (max-width: 479px) { .btn-row .btn { flex: 1 1 100%; } }

/* ── Type ───────────────────────────────────────────────────────────────── */
.display {
  font: 700 clamp(34px, 6.4vw, 62px)/1.06 var(--serif);
  font-variation-settings: "opsz" 120;
  letter-spacing: -.026em; margin: 0 0 18px; color: var(--ink); text-wrap: balance;
}
.title {
  font: 700 clamp(26px, 3.8vw, 38px)/1.15 var(--serif);
  font-variation-settings: "opsz" 60;
  letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance;
}
.subtitle {
  font: 600 clamp(19px, 2.2vw, 22px)/1.3 var(--serif);
  font-variation-settings: "opsz" 30;
  letter-spacing: -.012em; margin: 0 0 10px;
}
.lede {
  font-size: clamp(17px, 1.9vw, 20px); line-height: 1.6;
  color: var(--ink-2); margin: 0 0 28px; max-width: 40ch; text-wrap: pretty;
}
.center .lede, .lede.center { margin-inline: auto; }
.muted { color: var(--ink-3); font-size: 15px; }
.center { text-align: center; }

/* The marginal note a reviewer writes beside a section, small, oxide, spaced caps. */
.kicker {
  display: block; font: 600 11.5px/1.4 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; color: var(--oxide);
  margin: 0 0 12px;
}

/* A chip is a stamped label, not a pill: square-ish, outlined, never filled. */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--navy); border: 1px solid color-mix(in srgb, var(--navy) 35%, transparent);
  background: var(--navy-wash);
  padding: 8px 14px; border-radius: 999px; margin-bottom: 22px;
}
.chip .ic { width: 14px; height: 14px; }
.chip-accent { color: var(--oxide); background: var(--oxide-wash);
               border-color: color-mix(in srgb, var(--oxide) 35%, transparent); }

code {
  font: 500 .875em/1.5 var(--mono); background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: .12em .38em; word-break: break-word;
}
/* A key on the keyboard, or a button named so it can be hunted for verbatim. */
kbd, .ui {
  display: inline-block;
  font: 600 .8em/1.5 var(--mono); background: var(--surface);
  color: var(--ink); border: 1px solid var(--rule-2); border-bottom-width: 2px;
  border-radius: var(--r); padding: .1em .45em; white-space: nowrap;
  box-shadow: var(--lift-1);
}

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--lift-1);
}
@media (min-width: 600px) { .card { padding: 30px; } }
.card + .card { margin-top: 16px; }

/* A card that lifts on hover, for anything you can click through. */
.card-live { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color var(--t); }
.card-live:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: var(--rule-2); }

/* The working object on a page, the form you came to fill in. A navy top rule that
   draws itself gives it authority without a heavier border. */
.card-work { position: relative; overflow: hidden; box-shadow: var(--lift-2); }
.card-work::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--oxide));
  transform-origin: left; animation: drawrule .7s var(--ease) both;
}

.grid { display: grid; gap: 18px; }
@media (min-width: 620px)  { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px) and (max-width: 899px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Hero ───────────────────────────────────────────────────────────────────
   The ruled-paper wash behind it is two repeating gradients masked to fade out, a
   ledger's ruling, not a texture image. */
.hero { position: relative; overflow: hidden; padding-block: 52px 40px; }
@media (min-width: 760px) { .hero { padding-block: 84px 60px; } }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 31px,
      color-mix(in srgb, var(--rule-2) 55%, transparent) 31px 32px),
    repeating-linear-gradient(to right, transparent 0 31px,
      color-mix(in srgb, var(--rule-2) 26%, transparent) 31px 32px);
  -webkit-mask-image: radial-gradient(120% 88% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 88% at 50% 0%, #000 0%, transparent 72%);
  opacity: .8;
}
.hero > * { position: relative; z-index: 1; }
.hero.center { text-align: center; }
.hero.center .display, .hero.center .lede { margin-inline: auto; }
.hero.center .lede { max-width: 46ch; }

/* Split hero: the argument on one side, the working card on the other. */
.split { display: grid; gap: 34px; align-items: start; }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 60px; }
  .split-sticky { position: sticky; top: calc(var(--head-h) + 24px); }
}

/* A short proof list. Ticks in a ruled column, not bullets. */
.ticks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
            color: var(--ink-2); font-size: 15.5px; }
.ticks .ic { width: 22px; height: 22px; margin-top: 1px; color: var(--ok); }
.ticks strong { color: var(--ink); font-weight: 600; }

/* A row of small facts under a hero. */
.factbar {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  font-size: 13.5px; color: var(--ink-3);
}
.factbar span { display: inline-flex; align-items: center; gap: 7px; }
.factbar .ic { width: 15px; height: 15px; color: var(--ink-3); }

/* ── Feature cards ──────────────────────────────────────────────────────── */
.feature { display: flex; flex-direction: column; }
.fic {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--surface-2); color: var(--navy);
  margin-bottom: 18px; transition: color var(--t), border-color var(--t), background var(--t);
}
.fic .ic { width: 21px; height: 21px; }
.card-live:hover .fic { color: var(--oxide); border-color: var(--oxide); background: var(--oxide-wash); }
.feature h3 {
  font: 600 19px/1.3 var(--serif); font-variation-settings: "opsz" 24;
  letter-spacing: -.012em; margin: 0 0 8px;
}
.feature p { color: var(--ink-2); font-size: 15px; margin: 0; }

/* ── Steps ──────────────────────────────────────────────────────────────────
   A numbered plate on a ruled spine. The rule between plates draws down the list. */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 28px 56px; color: var(--ink-2); font-size: 15.5px;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--surface); color: var(--navy);
  border: 1px solid var(--navy); border-radius: var(--r);
  font: 700 12px/1 var(--mono); letter-spacing: .02em;
}
.steps li::after {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 1px;
  background: linear-gradient(to bottom, var(--rule-2), var(--rule));
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps strong { display: block; color: var(--ink); font-size: 16.5px; font-weight: 600; margin-bottom: 3px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field > label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 7px; letter-spacing: -.005em;
}
.field .opt { color: var(--ink-3); font-weight: 400; }
.field .hint { font-size: 13.5px; color: var(--ink-3); margin-top: 7px; line-height: 1.5; }

/* Low specificity on purpose: an <input> with no type still needs field styling, and a
   page-level override must not have to win a specificity fight. 16px is not a taste
   call, anything smaller makes iOS Safari zoom the page on focus. */
input, select, textarea {
  width: 100%; padding: 13px 14px;
  font: 400 16px/1.5 var(--sans);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-2); border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
textarea { resize: vertical; min-height: 120px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 16%, transparent);
}
input:user-invalid { border-color: var(--bad); }
input[type=checkbox], input[type=radio], input[type=submit], input[type=button], input[type=hidden] {
  width: auto; padding: 0; border: 0; background: none; box-shadow: none;
}
select {
  /* One chevron, drawn as a data URI, so Chrome and Firefox show the same control. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237C7462' stroke-width='1.8'%3E%3Cpath d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}

/* Two fields side by side on a card wide enough for it. */
.fields-2 { display: grid; gap: 0; }
@media (min-width: 560px) { .fields-2 { grid-template-columns: 1fr 1fr; column-gap: 16px; } }

/* The one-time code: six big monospace characters, spaced like a printed token. */
.otp-input {
  font: 700 clamp(26px, 8vw, 34px)/1.3 var(--mono) !important;
  letter-spacing: .42em; text-align: center; text-indent: .42em;
  padding-block: 18px;
}

/* ── Notices ────────────────────────────────────────────────────────────────
   A stamped annotation in the margin: a solid rule in the notice's colour on the leading
   edge, a wash behind, ink you can actually read on it. */
.note {
  position: relative; margin: 16px 0; padding: 15px 17px 15px 19px;
  font-size: 15px; line-height: 1.55;
  border: 1px solid; border-left-width: 3px; border-radius: var(--r);
  animation: rise .4s var(--ease) both;
}
.note strong { display: block; margin-bottom: 2px; }
.note :last-child { margin-bottom: 0; }
.note a { color: inherit; }
.note-err  { background: var(--bad-wash);  border-color: var(--bad);  color: var(--bad); }
.note-ok   { background: var(--ok-wash);   border-color: var(--ok);   color: var(--ok); }
.note-warn { background: var(--warn-wash); border-color: var(--warn); color: var(--warn); }
.note-info { background: var(--navy-wash); border-color: var(--navy); color: var(--navy); }

/* ── The product key ────────────────────────────────────────────────────────
   The credential panel. Navy plate, monospace, ruled top and bottom like a certificate,
   with one slow sheen across it when the page loads so the eye lands there first. */
.keyplate {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--navy-ink);
  border-radius: var(--r-lg); box-shadow: var(--lift-2);
  padding: 26px 18px 22px; text-align: center; margin: 22px 0 12px;
}
.keyplate::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--oxide), color-mix(in srgb, var(--oxide) 40%, transparent));
}
.keyplate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.14) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: sheen 2.2s var(--ease) .35s 1 both;
}
.keyplate .keylabel {
  display: block; font: 600 11px/1 var(--sans); letter-spacing: .18em;
  text-transform: uppercase; opacity: .62; margin-bottom: 14px;
}
.keyplate .keycode {
  display: block; font: 700 clamp(19px, 5.4vw, 29px)/1.35 var(--mono);
  letter-spacing: .07em; user-select: all; word-break: break-word;
}
.copy-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
.btn-copy.is-done { color: var(--ok); border-color: var(--ok); background: var(--ok-wash); }

/* ── Stamps ─────────────────────────────────────────────────────────────────
   A status you would rubber-stamp on a working paper: outlined, spaced caps, a dot for
   the state. Never a soft filled sticker. */
.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 13px; border: 1px solid currentColor; border-radius: 999px;
  white-space: nowrap; background: transparent;
}
.stamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stamp-ok   { color: var(--ok);    background: var(--ok-wash); }
.stamp-warn { color: var(--warn);  background: var(--warn-wash); }
.stamp-bad  { color: var(--bad);   background: var(--bad-wash); }
.stamp-mut  { color: var(--ink-3); }

/* ── Device rows ────────────────────────────────────────────────────────── */
.device {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--rule); flex-wrap: wrap;
}
.device .dev-name { font-weight: 600; display: flex; align-items: center; gap: 9px; }
.device .dev-name .ic { width: 17px; height: 17px; color: var(--ink-3); }
.device .dev-meta { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }

/* ── Tables ─────────────────────────────────────────────────────────────────
   A register: an ink rule above and below the head, hairlines between rows, tabular
   figures, and horizontal scroll inside its own box rather than a wider page. */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 20px 0; border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface);
}
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td {
  text-align: left; padding: 13px 16px; vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
table.data th {
  font: 600 11.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; background: var(--surface-2);
  border-bottom: 2px solid var(--navy);
}
table.data tbody tr { transition: background var(--t); }
table.data tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
table.data tr:last-child td { border-bottom: 0; }
table.data td strong { font-weight: 600; color: var(--ink); }

/* ── Screenshots ────────────────────────────────────────────────────────── */
figure.shot { margin: 28px 0; }
figure.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule-2); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--lift-2);
}
figure.shot figcaption {
  font-size: 13.5px; color: var(--ink-3); margin-top: 12px; text-align: center;
  font-style: italic;
}

/* ── Disclosure (FAQ, contents) ────────────────────────────────────────────
   grid-template-rows 0fr → 1fr is the one height animation that works in all three
   engines without measuring anything in JavaScript. */
.disc {
  border-bottom: 1px solid var(--rule);
}
.disc > summary {
  list-style: none; cursor: pointer; padding: 20px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 600 17px/1.4 var(--sans); color: var(--ink);
  transition: color var(--t);
}
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary:hover { color: var(--navy); }
.disc > summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease), border-color var(--t);
}
.disc[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); border-color: var(--oxide); }
.disc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.disc[open] .disc-body { grid-template-rows: 1fr; }
.disc-body > div { overflow: hidden; }
.disc-body p { margin: 0 0 16px; color: var(--ink-2); font-size: 15.5px; }
.disc-body ul { margin: 0 0 16px; padding-left: 20px; }
.disc-body li { color: var(--ink-2); font-size: 15.5px; margin-bottom: 9px; }
.disc-body li::marker { color: var(--oxide); }
.disc-body .mono-block { font-size: 13px; }

/* ── Guide ──────────────────────────────────────────────────────────────── */
.guide-layout { display: block; }
@media (min-width: 1000px) {
  .guide-layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 56px; align-items: start; }
}

.toc { margin: 0 0 30px; }
.toc-title { display: none; }
.toc > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; padding: 15px 18px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after {
  content: ""; width: 10px; height: 10px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease);
}
.toc[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.toc ol { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: toc; }
@media (max-width: 999px) {
  .toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
}
.toc li { counter-increment: toc; }
.toc a {
  display: block; padding: 8px 12px; text-decoration: none; border-radius: var(--r);
  color: var(--ink-2); font-size: 14.5px; line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero); margin-right: 9px;
  font: 500 12px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.toc a:hover { color: var(--ink); background: var(--surface-2); border-left-color: var(--oxide); }
.toc a.is-here { color: var(--navy); background: var(--navy-wash); border-left-color: var(--navy); font-weight: 500; }
.toc a.is-here::before { color: var(--navy); }
@media (min-width: 1000px) {
  .toc { position: sticky; top: calc(var(--head-h) + 24px); margin: 0; max-height: calc(100vh - var(--head-h) - 60px); overflow-y: auto; }
  .toc > summary { display: none; }
  .toc ol { margin-top: 0; }
  .toc-title {
    display: block; font: 600 11.5px/1.4 var(--sans); letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; padding-left: 12px;
  }
}

.guide-sec { scroll-margin-top: calc(var(--head-h) + 20px); }
.guide-sec + .guide-sec { border-top: 1px solid var(--rule); margin-top: 52px; padding-top: 48px; }
.guide-sec h2 {
  font: 700 clamp(25px, 3.4vw, 32px)/1.18 var(--serif); font-variation-settings: "opsz" 48;
  letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance;
}
.guide-sec h3 {
  font: 600 19px/1.35 var(--serif); font-variation-settings: "opsz" 24;
  letter-spacing: -.012em; margin: 32px 0 10px;
}
.guide-sec p, .guide-sec li { color: var(--ink-2); }
.guide-sec ul, .guide-sec ol { padding-left: 24px; margin: 14px 0; }
.guide-sec li { margin-bottom: 9px; }
.guide-sec li::marker { color: var(--oxide); }
.guide-sec strong { color: var(--ink); font-weight: 600; }

/* ── Footer ─────────────────────────────────────────────────────────────────
   A navy band with the oxide hairline as its only ornament, so the page is bound top
   and bottom by the same rule. */
.colophon {
  margin-top: 80px; background: var(--navy-2); color: color-mix(in srgb, var(--navy-ink) 78%, transparent);
  border-top: 3px solid var(--oxide);
  font-size: 14.5px;
}
.colophon-in {
  max-width: 1200px; margin-inline: auto; padding: 52px 20px 40px;
  display: grid; gap: 36px;
}
@media (min-width: 760px) { .colophon-in { padding-inline: 28px; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } }
.colophon-brand .brand-mark { color: var(--navy-ink); }
.colophon-name {
  font: 700 21px/1 var(--serif); font-variation-settings: "opsz" 32;
  letter-spacing: -.015em; color: var(--navy-ink); margin: 14px 0 10px;
}
.colophon-line { margin: 0; line-height: 1.65; opacity: .82; }
.colophon-head {
  font: 600 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-ink); opacity: .58; margin: 0 0 14px;
}
.colophon-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.colophon-col a {
  color: inherit; text-decoration: none; position: relative;
  transition: color var(--t);
}
.colophon-col a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.colophon-col a:hover { color: var(--navy-ink); }
.colophon-col a:hover::after { transform: scaleX(1); }
.colophon-rule {
  max-width: 1200px; margin-inline: auto; padding: 20px;
  border-top: 1px solid color-mix(in srgb, var(--navy-ink) 16%, transparent);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 13px; opacity: .7;
}
@media (min-width: 760px) { .colophon-rule { padding-inline: 28px; } }
.colophon-folio { font: 500 12px var(--mono); letter-spacing: .04em; }

/* ── Utilities ──────────────────────────────────────────────────────────── */
.stack-sm > * + * { margin-top: 10px; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: 32px; }
.flow-end { margin-left: auto; }
.vis-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────
   Everything above degrades to an instant, fully-visible page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Print: the guide is the page people print. Drop the chrome, keep the words. */
@media print {
  .masthead, .colophon, .toc, .skip, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card, .table-scroll { box-shadow: none; border-color: #999; }
  .guide-sec { page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ── Story and retention ──────────────────────────────────────────────────
   Wow must feel editorial, not template. Paper grain, ledger lines and a
   measured reveal do more than gradients. Everything here degrades to a
   still page with JS off. */
.read-progress{position:fixed;inset:0 0 auto;height:2px;z-index:50;pointer-events:none;background:transparent}
.read-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--oxide),var(--navy));transform-origin:left;transition:width .12s linear}
.display-xl{font:700 clamp(36px,6.6vw,64px)/.98 var(--serif);letter-spacing:-.03em;margin:14px 0 16px;max-width:14ch;text-wrap:balance}
.display-xl em{font-style:normal;color:var(--oxide)}
.lede-xl{font-size:clamp(17px,2vw,19px);line-height:1.6;color:var(--ink-2);max-width:48ch;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--navy) 14%, var(--rule));background:var(--surface);color:var(--ink-3);font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-wash);animation:pulse 2.2s ease infinite}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-trust{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-3)}
.hero-trust span{display:inline-flex;gap:7px;align-items:center}
.hero-trust .ic{width:15px;height:15px}
.hero-card-sub{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--ink-3)}
.mini-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.mini-proof div{background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r);padding:12px 10px;text-align:center}
.mini-proof b{display:block;font:700 18px var(--serif);letter-spacing:-.02em;color:var(--navy)}
.mini-proof span{font:600 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.paper-stack{position:relative;isolation:isolate}
.paper-stack .sheet{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--lift-2);padding:18px;overflow:hidden}
.paper-stack .sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--navy),var(--oxide))}
.sheet-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.sheet-dot{width:10px;height:10px;border-radius:50%;background:var(--rule-2)}
.sheet-title{font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.sheet-grid{display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:13.5px;color:var(--ink-2);align-items:center}
.sheet-grid b{color:var(--ink);font-weight:600}
.sheet-row{display:contents}
.sheet-row span:last-child{justify-self:end;font:600 11px var(--sans);padding:4px 8px;border-radius:999px;border:1px solid var(--rule);background:var(--surface-2)}
.sheet-row.is-ok span:last-child{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 22%, var(--rule));background:var(--ok-wash)}
.sheet-row.is-warn span:last-child{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 22%, var(--rule));background:var(--warn-wash)}
.sheet-foot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule-2);display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-3)}
.ledger{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--navy);border-radius:4px;box-shadow:var(--lift-1)}
.ledger-head{padding:14px 16px;background:var(--surface-2);border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:10px;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ledger-body{padding:18px 16px}
.before-after{display:grid;gap:14px;margin-top:18px}
@media(min-width:640px){.before-after{grid-template-columns:1fr 1fr}}
.ba{border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--surface);transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.ba:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.ba-head{padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ba.stale .ba-head{color:var(--bad);background:color-mix(in srgb,var(--bad-wash) 65%, var(--surface-2))}
.ba.clean .ba-head{color:var(--ok)}
.ba ul{margin:0;padding:12px 12px 12px 22px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.ba li{margin-bottom:6px}
.ba li::marker{color:var(--oxide)}
.timeline{position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:linear-gradient(to bottom,var(--navy),var(--oxide));opacity:.35}
.tl-item{position:relative;padding:0 0 28px 22px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-23px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--navy);box-shadow:0 0 0 4px var(--navy-wash);transition:transform .26s var(--ease), background .26s var(--ease)}
.tl-item.is-oxide::before{border-color:var(--oxide);box-shadow:0 0 0 4px var(--oxide-wash)}
.tl-item.is-in::before{transform:scale(1.12);background:var(--navy-wash)}
.tl-item h3{margin:0 0 6px;font:600 16px var(--sans);letter-spacing:-.01em}
.tl-item p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.tl-item .ui{font-size:.78em}
.scene{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--lift-2)}
.scene-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--rule);font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.scene-bar i{width:9px;height:9px;border-radius:50%;background:var(--rule-2)}
.scene-body{padding:22px}
.tab-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tab-pill{padding:6px 11px;border-radius:999px;border:1px solid var(--rule);background:var(--surface-2);font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);transition:all var(--t);cursor:default}
.tab-pill.is-on{background:var(--navy);color:var(--navy-ink);border-color:var(--navy)}
.tab-pill:hover{transform:translateY(-1px);border-color:var(--rule-2)}
.metric{display:flex;align-items:baseline;gap:8px}
.metric b{font:700 22px var(--serif);letter-spacing:-.02em}
.metric span{font-size:12.5px;color:var(--ink-3)}
.showcase{display:grid;gap:18px}
@media(min-width:900px){.showcase{grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}}
.shot-frame{position:relative;overflow:hidden;border:1px solid var(--rule-2);border-radius:12px;background:var(--surface);box-shadow:var(--lift-2);transition:transform .32s var(--ease), box-shadow .32s var(--ease)}
.shot-frame:hover{transform:translateY(-3px);box-shadow:var(--lift-3)}
.shot-frame img{display:block;width:100%;height:auto}
.shot-cap{padding:10px 12px;background:var(--surface-2);border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-3);text-align:center;font-style:italic}
.reveal-line{position:relative;display:inline-block}
.reveal-line::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--oxide),var(--navy));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.reveal-line.is-in::after{transform:scaleX(1)}
.count{font-variant-numeric:tabular-nums}
.sticky-cta{position:fixed;inset:auto 12px 12px;z-index:38;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--lift-3);transform:translateY(120%);opacity:0;transition:transform .42s var(--ease), opacity .28s var(--ease)}
.sticky-cta.is-on{transform:none;opacity:1}
@media(min-width:700px){.sticky-cta{left:auto;right:22px;bottom:22px;max-width:420px}}
.sticky-cta p{margin:0;font:600 13.5px var(--sans);color:var(--ink)}
.sticky-cta small{display:block;font:400 12.5px var(--sans);color:var(--ink-3)}
.story-hero{position:relative;overflow:hidden;padding:56px 0 36px}
@media(min-width:760px){.story-hero{padding:88px 0 56px}}
.story-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(980px 420px at 18% -8%, color-mix(in srgb,var(--oxide) 7%, transparent), transparent 62%),
    radial-gradient(860px 380px at 92% 0%, color-mix(in srgb,var(--navy) 8%, transparent), transparent 58%),
    repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb,var(--rule-2) 38%, transparent) 31px 32px);
  -webkit-mask-image:radial-gradient(118% 92% at 50% 0%, #000 38%, transparent 78%);mask-image:radial-gradient(118% 92% at 50% 0%, #000 38%, transparent 78%);opacity:.85}
.story-hero > *{position:relative}
/* Two columns only where there is room: at phone width this rule would squeeze the
   product-key card into half the screen, which is how it went tiny on mobile. */
@media(min-width:1000px){.split-story{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:52px}}

/* ── Monospace block ────────────────────────────────────────────────────────
    A fingerprint or a command the visitor is meant to copy: selectable in one
    gesture, and allowed to wrap rather than overflow its card on a phone. */
.mono-block {
  font: 500 13.5px/1.7 var(--mono); letter-spacing: .02em;
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 12px 14px; margin: 0;
  overflow-wrap: anywhere; word-break: break-all; user-select: all;
  color: var(--ink);
}

/* A sign-out that reads as a link but posts, so no third-party <img> can trigger it. */
.inline-form{display:inline}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:inherit;
         text-decoration:underline;cursor:pointer}


/* ── Portal: what the customer's plan includes ────────────────────────────
   Included and not-included read as one list on purpose: a feature they cannot
   see is a feature they never ask for. */
.planlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 20px; }
.planlist li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.planlist li span { width: 1em; text-align: center; font-weight: 700; }
.planlist .is-on { color: var(--ink); }
.planlist .is-on span { color: var(--ok); }
.planlist .is-off { color: var(--ink-3); }