/* ==========================================================================
   BtrRep — marketing site
   --------------------------------------------------------------------------
   An instrument panel, not a brochure. Near-white ground, hairline rules,
   one signal colour that only ever means "live / this cycle", and every
   figure set in tabular mono. Two sections invert to near-black — the floor
   board, because a television in a sales room really is dark, and the closing
   call to action.

   Layers, in order:  tokens · reset · type · primitives · nav · sections
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
/* The palette is the app's, lifted verbatim from btrrep_BL_train_FLIPPED.html so
   a prospect who clicks "Sign in" lands somewhere that looks like the same
   company. Green-tinted neutrals, one emerald accent, amber and red as state.

   Emerald is for DATA — the live dot, this cycle's bar, the pace ring, a
   positive delta. It is not the button colour: white on #0A8F5F is 4.1:1, which
   fails AA at button-label size, and the reference this is drawn from puts its
   buttons in charcoal anyway. --sig-tx is the darkened emerald for small text. */
:root{
  /* ground — app --bg / --bg2 / --card */
  --ink:      #F4F6F5;   /* page            */
  --ink-2:    #FFFFFF;   /* raised panel    */
  --ink-3:    #ECEFEE;   /* inset / track   */
  --ink-4:    #E1E6E4;   /* hover           */

  /* rules — app --border / --border-hi */
  --line:     rgba(11,26,23,.09);
  --line-2:   rgba(11,26,23,.16);
  --line-3:   rgba(11,26,23,.28);

  /* text — app --text / --sl / --sll */
  --tx:       #121A18;
  --tx-2:     #4E5A57;
  --tx-3:     #5F6A67;   /* was #7C8784 — 3.17:1 on the .alt band, failed AA in 45 rules */

  /* signal — "live", "this cycle", "on pace". Nothing decorative wears it. */
  --sig:      #0A8F5F;   /* app --green (light) — fills, bars, dots, display   */
  --sig-tx:   #07734B;   /* the same green, darkened until small text passes AA */
  --sig-ink:  #FFFFFF;
  --sig-8:    rgba(10,143,95,.07);
  --sig-16:   rgba(10,143,95,.15);
  --sig-32:   rgba(10,143,95,.30);
  --sig-hov:  #07734B;

  /* buttons sit in ink, not in the accent */
  --btn-bg:   #121A18;
  --btn-tx:   #F4F6F5;
  --btn-hov:  #28332F;

  /* semantics — app --red / --amber */
  --warn:     #B93A2F;
  --warn-12:  rgba(185,58,47,.09);
  --amber:    #8F6410;
  --up:       #07734B;

  /* data */
  --bar-prior:rgba(11,26,23,.15);
  --land:     #E3E8E6;
  --land-on:  #D5DCD9;

  /* surfaces */
  --sh-panel: 0 1px 2px rgba(11,26,23,.05), 0 20px 44px -26px rgba(11,26,23,.20);
  --sh-card:  0 1px 2px rgba(11,26,23,.04), 0 10px 24px -18px rgba(11,26,23,.16);
  --nav-bg:   rgba(244,246,245,.74);
  --nav-bg-2: rgba(244,246,245,.92);
  --hover:    rgba(11,26,23,.05);

  /* type */
  /* Inter, to match the app. The two surfaces used to disagree — this site was
     Instrument Sans while btrrep.com/app was Segoe UI — which read as two
     products. Instrument Serif stays: it carries the editorial italics and
     pairs with Inter the same way it paired with Instrument Sans. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* radius — softer than the first pass; the reference is all rounded cards */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* metrics */
  --wrap: 1240px;
  --gut:  clamp(20px, 4.4vw, 56px);
  --sec:  clamp(76px, 9vw, 124px);
  --ease: cubic-bezier(.16,1,.3,1);
}

/* The inverted band — the app's dark theme, same token names, so every
   primitive inside follows without a single duplicated rule. */
.night{
  --ink:      #0B100F;   /* app --bg   */
  --ink-2:    #151B1A;   /* app --card */
  --ink-3:    #131A18;
  --ink-4:    #1C2322;   /* app --card-hi */
  --line:     rgba(255,255,255,.08);
  --line-2:   rgba(255,255,255,.14);
  --line-3:   rgba(255,255,255,.26);
  --tx:       #E8EDEB;
  --tx-2:     #A2AEAA;
  --tx-3:     #7A8683;
  --sig:      #12B981;   /* app --green (dark) */
  --sig-tx:   #12B981;
  --sig-ink:  #06110C;
  --sig-8:    rgba(18,185,129,.10);
  --sig-16:   rgba(18,185,129,.18);
  --sig-32:   rgba(18,185,129,.34);
  --sig-hov:  #3FD3A0;
  --btn-bg:   #E8EDEB;
  --btn-tx:   #0B100F;
  --btn-hov:  #FFFFFF;
  --warn:     #E5645F;
  --warn-12:  rgba(229,100,95,.13);
  --amber:    #D9A036;
  --up:       #12B981;
  --bar-prior:rgba(255,255,255,.19);
  --sh-panel: 0 -1px 0 rgba(255,255,255,.04) inset, 0 40px 90px -44px rgba(0,0,0,.95);
  --sh-card:  0 20px 44px -30px rgba(0,0,0,.9);
  --hover:    rgba(255,255,255,.055);
  background:var(--ink); color:var(--tx);
}

/* The quiet band — pricing and questions sit a step off the page ground. */
.alt{ --ink:#EAEEEC; --ink-3:#E1E6E4; --ink-4:#D7DEDB;
  background:var(--ink); border-block:1px solid var(--line); }

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--tx);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--sig); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--sig); color:var(--sig-ink); }

.skip{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--btn-bg); color:var(--btn-tx); padding:10px 16px; border-radius:var(--r-sm);
  font:500 14px/1 var(--mono);
}
.skip:focus{ left:12px; }

/* -------------------------------------------------------------------- type */
.d1,.d2,.d3,.d4{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.02;
  text-wrap:balance;
}
.d1{ font-size:clamp(44px,7.4vw,92px); line-height:.98; letter-spacing:-.038em; }
.d2{ font-size:clamp(31px,4.1vw,54px); line-height:1.04; }
.d3{ font-size:clamp(21px,2.05vw,27px); line-height:1.16; letter-spacing:-.024em; }
.d4{ font-size:17px; line-height:1.32; letter-spacing:-.014em; font-weight:600; }

/* the one editorial voice on the page — used on single words, never a block */
em.say{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.01em; color:var(--sig);
}
em.say-p{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--tx); }

.lede{
  font-size:clamp(17.5px,1.55vw,20.5px);
  line-height:1.58; color:var(--tx-2); max-width:60ch; text-wrap:pretty;
}
.copy{ color:var(--tx-2); max-width:64ch; text-wrap:pretty; }
.copy strong,.lede strong{ color:var(--tx); font-weight:500; }

/* mono is the instrument voice: labels, counts, timestamps, section numbers */
.mono,.figs{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.figs{ font-feature-settings:"tnum" 1; }

.eyebrow{
  font:500 11.5px/1 var(--mono);
  letter-spacing:.15em; text-transform:uppercase; color:var(--tx-3);
}

/* -------------------------------------------------------------- primitives */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wide{ max-width:1440px; }

.sec{ padding-block:var(--sec); position:relative; scroll-margin-top:76px; }

/* section head: hairline + mono index in the gutter. Editorial, not decorative. */
.shead{
  display:grid; grid-template-columns:minmax(0,104px) minmax(0,1.16fr) minmax(0,.68fr);
  gap:0 clamp(24px,3vw,48px); align-items:start;
  padding-top:22px; border-top:1px solid var(--line); margin-bottom:clamp(34px,4vw,54px);
}
.shead .ix{ font:500 11.5px/1.6 var(--mono); color:var(--sig-tx); letter-spacing:.1em; }
.shead .ix span{ display:block; color:var(--tx-3); letter-spacing:.15em; }
.shead h2{ max-width:22ch; }
.shead .copy{ padding-top:7px; max-width:46ch; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.4vw,72px); align-items:start; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,30px); }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 24px; border-radius:var(--r-sm); border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-tx);
  font:600 15px/1 var(--sans); letter-spacing:-.012em; cursor:pointer;
  transition:transform .22s var(--ease), background .22s, box-shadow .22s;
}
.btn:hover{ background:var(--btn-hov); transform:translateY(-1px);
  box-shadow:0 10px 26px -14px rgba(11,26,23,.5); }
.btn:active{ transform:translateY(0); }
.btn .arw{ transition:transform .28s var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }

.btn-ghost{
  background:transparent; color:var(--tx); border-color:var(--line-2);
}
.btn-ghost:hover{ background:var(--hover); border-color:var(--line-3); box-shadow:none; }

.btn-sm{ padding:10px 17px; font-size:13.5px; }

/* status pill — the only pill shape on the site */
.live{
  display:inline-flex; align-items:center; gap:7px;
  font:500 11.5px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--sig-tx);
}
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--sig); flex:none;
  box-shadow:0 0 0 0 var(--sig-32); animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 var(--sig-32); }
  70%{ box-shadow:0 0 0 7px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* reveal */
.rv{ opacity:0; transform:translateY(16px); }
.rv.in{
  opacity:1; transform:none;
  transition:opacity .72s var(--ease) var(--d,0ms), transform .72s var(--ease) var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .dot{ animation:none; }
}

/* ================================================================= 1. NAV = */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--nav-bg);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.stuck{ border-bottom-color:var(--line); background:var(--nav-bg-2); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px; }

.brand{ display:inline-flex; align-items:center; gap:10px; flex:none; }
.brand-tx{ font-weight:600; letter-spacing:-.028em; font-size:18px; }
.brand-tx b{ font-weight:600; }

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a.lnk{
  padding:8px 12px; border-radius:4px;
  font:500 14.5px/1 var(--sans); letter-spacing:-.01em; color:var(--tx-2);
  transition:color .2s, background .2s;
}
.nav-links a.lnk:hover{ color:var(--tx); background:var(--hover); }
.nav-links a.lnk[aria-current]{ color:var(--tx); }
.nav-links a.lnk[aria-current]::after{
  content:""; display:block; height:1.5px; margin-top:5px; border-radius:2px;
  background:var(--sig);
}
.nav-sep{ width:1px; height:20px; background:var(--line-2); margin:0 8px; }

.burger{
  display:none; background:none; border:1px solid var(--line-2); border-radius:4px;
  width:38px; height:34px; cursor:pointer; padding:0; place-items:center;
}
.burger i{ display:block; width:15px; height:1.5px; background:var(--tx); position:relative; }
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:15px; height:1.5px; background:var(--tx);
  transition:transform .25s var(--ease);
}
.burger i::before{ top:-5px; } .burger i::after{ top:5px; }

/* ================================================================ 2. HERO = */
.hero{ position:relative; padding-top:clamp(56px,7.5vw,104px); padding-bottom:0; overflow:hidden; }
/* one soft wash behind the headline — no rainbow, no blobs */
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:70vh; pointer-events:none;
  background:radial-gradient(62% 64% at 50% 6%, var(--sig-8), transparent 70%);
}
.hero-in{ position:relative; z-index:1; }

.hero-top{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(26px,4vw,60px); align-items:end;
}
.hero h1{ max-width:13ch; margin:20px 0 0; }
.hero-aside{ padding-bottom:8px; }
.hero .lede{ margin-top:0; max-width:44ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  font:500 12.5px/1 var(--mono); color:var(--tx-3); letter-spacing:.04em;
}
.hero-meta b{ color:var(--tx-2); font-weight:500; }

/* ---- device shell: the product, shown rather than described ------------- */
.dev-hold{ margin-top:clamp(46px,5.6vw,78px); position:relative; }
.dev-hold::after{ /* the panel sinks into the next section */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:clamp(44px,6vw,104px);
  background:linear-gradient(to bottom, transparent, var(--ink)); pointer-events:none; z-index:2;
}
.dev{
  border:1px solid var(--line); border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--ink-2);
  box-shadow:var(--sh-panel);
  overflow:hidden;
}
.dev-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 16px; border-bottom:1px solid var(--line); background:var(--ink-3);
}
.dev-bar .l,.dev-bar .r{ display:flex; align-items:center; gap:14px; min-width:0; }
.dev-bar .path{ font:400 12px/1 var(--mono); color:var(--tx-3); }
.dev-bar .path b{ color:var(--tx-2); font-weight:500; }

.dev-body{ display:grid; grid-template-columns:186px minmax(0,1fr) 244px; min-height:430px; }
.dev-rail{ border-right:1px solid var(--line); padding:16px 12px; }
.dev-rail .lbl{ font:500 10.5px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--tx-3); margin:0 0 11px 9px; }
.dev-rail a{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 9px 7px 14px; border-radius:4px; font-size:13.5px; color:var(--tx-2);
  letter-spacing:-.008em;
}
.dev-rail a.on{ background:var(--hover); color:var(--tx); font-weight:500; }
.dev-rail a.on::before{ content:""; position:absolute; left:5px; top:50%; margin-top:-6.5px;
  width:2px; height:13px; background:var(--sig); border-radius:2px; }
.dev-rail a em{ font-style:normal; font:500 10.5px/1 var(--mono); color:var(--tx-3); }
.dev-rail hr{ border:0; border-top:1px solid var(--line); margin:13px 4px; }

.dev-main{ padding:18px 20px 22px; min-width:0; }
.dev-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.dev-head .sub{ font:400 12px/1.5 var(--mono); color:var(--tx-3); margin-top:5px; }
.legend{ display:flex; gap:14px; font:400 11px/1 var(--mono); color:var(--tx-3); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend b{ width:16px; height:4px; border-radius:2px; display:block; }

.dev-side{ border-left:1px solid var(--line); padding:18px 16px; display:grid; gap:12px; align-content:start; }

/* ---- board rows --------------------------------------------------------- */
.board{ display:grid; }
.row{
  display:grid; grid-template-columns:26px minmax(0,1fr) minmax(90px,1.35fr) 74px;
  gap:14px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.row:last-child{ border-bottom:0; }
.row .rank{ font:500 12px/1 var(--mono); color:var(--tx-3); text-align:right; }
.row .who .nm{ font-size:14px; font-weight:500; letter-spacing:-.014em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.row .who .mt{ font:400 11px/1.4 var(--mono); color:var(--tx-3); margin-top:1px; }
.bars{ display:grid; gap:4px; }
.trk{ height:5px; border-radius:3px; background:var(--ink-3); overflow:hidden; }
.fil{ height:100%; border-radius:3px; transform:scaleX(0); transform-origin:left;
  transition:transform .95s var(--ease) var(--d,0ms); }
.trk.prior .fil{ background:var(--bar-prior); }
.trk.now   .fil{ background:var(--sig); }
.row .num{ text-align:right; }
.row .num b{ font:500 15px/1 var(--mono); font-variant-numeric:tabular-nums; }
.row .num span{ display:block; font:400 11px/1.5 var(--mono); color:var(--up); }
.row .num span.dn{ color:var(--warn); }
.row .num span.fl{ color:var(--tx-3); }

/* ---- side tiles --------------------------------------------------------- */
.tile{ border:1px solid var(--line); border-radius:var(--r-md); padding:13px 14px; background:var(--ink-3); }
.tile .lbl{ font:500 10.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--tx-3); margin:0 0 9px; }
.tile .big{ font:500 26px/1 var(--mono); letter-spacing:-.03em; }
.tile .big small{ font-size:14px; color:var(--tx-3); }
.tile .note{ font:400 11px/1.5 var(--mono); color:var(--tx-3); margin-top:6px; }

.ring{ display:flex; align-items:center; gap:13px; }
.ring svg{ flex:none; transform:rotate(-90deg); }
.ring .rbg{ fill:none; stroke:var(--ink-4); stroke-width:6; }
.ring .rfg{ fill:none; stroke:var(--sig); stroke-width:6; stroke-linecap:round;
  transition:stroke-dashoffset .8s var(--ease); }

.mini{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.mini:last-child{ border-bottom:0; padding-bottom:0; }
.mini .k{ color:var(--tx-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini .v{ font:500 12px/1 var(--mono); flex:none; }
.mini .v.warn{ color:var(--warn); }
.legend b.prior{ background:var(--bar-prior); }
.legend b.now{ background:var(--sig); }

/* ---- capability rail ---------------------------------------------------- */
.rail{ border-block:1px solid var(--line); }
.rail-in{
  display:grid; grid-template-columns:repeat(6,1fr);
  font:500 11.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
}
.rail-in span{
  padding:19px 8px; text-align:center; color:var(--tx-3);
  border-left:1px solid var(--line); transition:color .25s;
}
.rail-in span:first-child{ border-left:0; }
.rail-in span:hover{ color:var(--tx-2); }

/* ============================================================= 3. PROBLEM = */
.faults{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
.fault{
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px clamp(20px,2vw,28px) 30px; box-shadow:var(--sh-card);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.fault:hover{ transform:translateY(-3px); box-shadow:var(--sh-panel); }
.fault .n{ font:500 11.5px/1 var(--mono); color:var(--sig-tx); letter-spacing:.1em; }
.fault h3{ margin:18px 0 12px; }
.fault p{ color:var(--tx-2); font-size:15.5px; line-height:1.6; }
.fault p{ margin-bottom:22px; }
.fault .tag{ align-self:flex-start; margin-top:auto; font:400 11px/1 var(--mono);
  color:var(--tx-3); background:var(--ink-3); border-radius:var(--r-pill); padding:7px 13px; }

/* =============================================================== 4. SYSTEM = */
.sys{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,64px); align-items:start; }
.sys-sticky{ position:sticky; top:100px; }
@media (max-width:960px){ .sys-sticky{ position:static; } }

.tabs{ display:flex; gap:0; border-bottom:1px solid var(--line); margin:26px 0 0; flex-wrap:wrap; }
.tabs button{
  background:none; border:0; border-bottom:1.5px solid transparent; cursor:pointer;
  padding:11px 15px 11px 0; margin-right:22px;
  font:500 12px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--tx-3); transition:color .2s, border-color .2s;
}
.tabs button:hover{ color:var(--tx-2); }
.tabs button[aria-selected="true"]{ color:var(--sig-tx); border-bottom-color:var(--sig); }

.pane{ display:none; }
.pane.on{ display:block; animation:fade .45s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .pane.on{ animation:none; } }

.panel{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-2);
  box-shadow:var(--sh-panel);
  overflow:hidden;
}
.panel-hd{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px; border-bottom:1px solid var(--line); background:var(--ink-3);
}
.panel-hd .t{ font-size:14px; font-weight:500; letter-spacing:-.014em; }
.panel-hd .s{ font:400 11.5px/1 var(--mono); color:var(--tx-3); }
.panel-bd{ padding:16px 18px 20px; }

.pts{ display:grid; gap:2px; margin-top:30px; }
.pts li{ padding:17px 0; border-top:1px solid var(--line); color:var(--tx-2);
  font-size:15.5px; line-height:1.6; }
.pts li b{ display:block; color:var(--tx); font-weight:600; font-size:15.5px;
  letter-spacing:-.014em; margin-bottom:5px; }
.pts li:last-child{ border-bottom:1px solid var(--line); }

/* phone mock (rep pane) */
.phone{ width:236px; margin-inline:auto; border:1px solid var(--line-2); border-radius:28px;
  background:var(--ink-3); padding:9px; box-shadow:0 22px 50px -28px rgba(0,0,0,.35); }
.phone-in{ border:1px solid var(--line); border-radius:20px; background:var(--ink-2); padding:14px 13px; }
.phone-top{ display:flex; justify-content:space-between; font:400 10px/1 var(--mono);
  color:var(--tx-3); margin-bottom:14px; }
.stat-hero{ text-align:center; padding:6px 0 14px; }
.stat-hero b{ display:block; font:500 46px/1 var(--mono); letter-spacing:-.04em; }
.stat-hero i{ font-style:normal; font:400 11px/1 var(--mono); color:var(--tx-3);
  letter-spacing:.12em; text-transform:uppercase; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.chip{ font:500 10.5px/1 var(--mono); padding:5px 9px; border-radius:var(--r-xs);
  border:1px solid var(--line); color:var(--tx-2); }
.chip.sig{ border-color:var(--sig-32); color:var(--sig-tx); background:var(--sig-8); }
.chip.warn{ border-color:rgba(255,122,69,.34); color:var(--warn); background:var(--warn-12); }

/* ============================================================ 5. FLOOR TV = */
.tv{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-2);
  padding:clamp(18px,2.4vw,30px); box-shadow:0 40px 100px -50px #000;
}
.tv-hd{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tv-mark{ font-size:19px; font-weight:600; letter-spacing:-.03em; }
.tv-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-block:1px solid var(--line); margin-bottom:4px; }
.tv-stat{ background:var(--ink-2); padding:16px 14px; }
.tv-stat b{ display:block; font:500 clamp(26px,3.4vw,40px)/1 var(--mono); letter-spacing:-.04em; }
.tv-stat span{ display:block; margin-top:7px; font:400 10.5px/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); }
.tv-stat.hot b{ color:var(--sig); }

.tv-row{ display:grid; grid-template-columns:34px minmax(0,1fr) auto 78px; gap:16px;
  align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.tv-row:last-child{ border-bottom:0; }
.tv-row .r{ font:500 13px/1 var(--mono); color:var(--tx-3); }
.tv-row .nm{ font-size:clamp(16px,1.7vw,20px); font-weight:500; letter-spacing:-.02em; }
.tv-row .pc{ font:400 12px/1 var(--mono); color:var(--tx-3); }
.tv-row .v{ text-align:right; font:500 clamp(18px,2vw,24px)/1 var(--mono); letter-spacing:-.03em; }
.tv-row.lead .nm{ color:var(--sig); }
.tv-row.lead .v{ color:var(--sig); }

/* scrubber */
.scrub{ display:grid; gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.scrub-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font:400 12px/1 var(--mono); color:var(--tx-3); }
.scrub-hd b{ color:var(--tx); font-weight:500; font-size:13px; }
.scrub input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:44px;
  background:transparent; cursor:pointer; touch-action:pan-y; }
.scrub input[type=range]:active{ cursor:grabbing; }
.scrub input[type=range]::-webkit-slider-runnable-track{ height:3px; border-radius:2px;
  background:linear-gradient(to right,var(--sig) var(--p,50%),var(--ink-4) var(--p,50%)); }
.scrub input[type=range]::-moz-range-track{ height:3px; border-radius:2px; background:var(--ink-4); }
.scrub input[type=range]::-moz-range-progress{ height:3px; border-radius:2px; background:var(--sig); }
.scrub input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%; background:var(--sig); margin-top:-8.5px;
  border:3px solid #08090B; box-shadow:0 0 0 1px var(--sig-32); }
.scrub input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%;
  background:var(--sig); border:3px solid #08090B; }
.scrub .ticks{ display:flex; justify-content:space-between; font:400 10.5px/1 var(--mono);
  color:var(--tx-3); }

/* ==================================================================== 6. QA */
.flow{ display:grid; gap:0; margin-top:6px; }
.step{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:16px; position:relative;
  padding-bottom:22px; }
.step:last-child{ padding-bottom:0; }
.step::before{ content:""; position:absolute; left:12px; top:22px; bottom:0; width:1px;
  background:var(--line); }
.step:last-child::before{ display:none; }
.step .bul{ width:25px; height:25px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--ink); display:grid; place-items:center; position:relative; z-index:1;
  font:500 10.5px/1 var(--mono); color:var(--tx-3); }
.step.hot .bul{ border-color:var(--sig); color:var(--sig-tx); background:var(--sig-8); }
.step h4{ font-size:15.5px; font-weight:600; letter-spacing:-.016em; }
.step p{ color:var(--tx-2); font-size:14.5px; line-height:1.58; margin-top:4px; }

.qcard{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--ink-3); padding:15px; }
.qcard + .qcard{ margin-top:10px; }
.qcard .hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.qcard .adr{ font-size:14px; font-weight:500; letter-spacing:-.014em; }
.qcard .mt{ font:400 11px/1.5 var(--mono); color:var(--tx-3); margin-top:2px; }
.qcard .nt{ margin-top:11px; padding-top:11px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--tx-2); line-height:1.55; }
.qcard .nt i{ font-family:var(--serif); font-style:italic; color:var(--tx); }

/* ============================================================= 7. TRAINING */
.chat{ display:grid; gap:11px; }
.bub{ max-width:82%; padding:12px 15px; border-radius:12px; font-size:14.5px; line-height:1.55; }
.bub.them{ background:var(--ink-3); border:1px solid var(--line); border-bottom-left-radius:4px;
  color:var(--tx); }
.bub.you{ background:var(--sig-8); border:1px solid var(--sig-32); border-bottom-right-radius:4px;
  margin-left:auto; color:var(--tx); }
.bub .who{ display:block; font:500 10.5px/1 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--tx-3); margin-bottom:7px; }
.bub.you .who{ color:var(--sig-tx); }
.score{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-top:16px; }
.score div{ background:var(--ink-3); padding:13px; }
.score b{ display:block; font:500 21px/1 var(--mono); letter-spacing:-.03em; }
.score span{ display:block; margin-top:6px; font:400 10.5px/1.3 var(--mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3); }

/* ================================================================== 8. MAP */
.map-shell{ position:relative; margin-top:8px; }
#map svg{ width:100%; height:auto; }
#map .st{ fill:var(--land); stroke:var(--ink); stroke-width:.9; }
#map .st.on{ fill:var(--land-on); }
#map .mk-halo{ fill:var(--sig-16); }
#map .mk{ fill:var(--sig); fill-opacity:.82; transform:scale(0); transform-origin:center;
  transform-box:fill-box; transition:transform .6s var(--ease) var(--d,0ms), fill-opacity .2s; }
#map.in .mk{ transform:scale(1); }
#map .mk:hover{ fill-opacity:1; }
@media (prefers-reduced-motion:reduce){ #map .mk{ transform:scale(1); } }

.tip{ position:absolute; transform:translate(-50%,-140%); pointer-events:none;
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:5px;
  padding:7px 11px; font:400 11.5px/1 var(--mono); color:var(--tx); white-space:nowrap;
  opacity:0; transition:opacity .16s; box-shadow:var(--sh-panel); }
.tip.show{ opacity:1; }

.mkts{ display:none; }
.mkts ul{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.mkts li{ background:var(--ink-2); padding:11px 13px; display:flex; align-items:baseline;
  justify-content:space-between; gap:10px; font-size:13.5px; }
.mkts li b{ font:500 12.5px/1 var(--mono); color:var(--tx-2); font-weight:500; }
@media (hover:none),(max-width:760px){
  .map-shell{ display:none; }
  .mkts{ display:block; }
}
.legend-row{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:16px;
  font:400 11.5px/1.6 var(--mono); color:var(--tx-3); }

.band{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(34px,4vw,54px); }
.band > div{ background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:24px 22px; box-shadow:var(--sh-card); }
.band b{ display:block; font:500 clamp(28px,3.2vw,38px)/1 var(--mono); letter-spacing:-.04em; }
.band span{ display:block; margin-top:9px; font-size:13.5px; color:var(--tx-3); line-height:1.45; }

/* ============================================================ 9. QUIET BAND */
/* pull-quote */
.quote{ max-width:24ch; }
.quote p{ font-family:var(--serif); font-size:clamp(27px,3.5vw,44px); line-height:1.14;
  letter-spacing:-.02em; }
.quote cite{ display:block; margin-top:22px; font:500 11.5px/1.6 var(--mono);
  font-style:normal; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-3); }

/* ============================================================= 10. PRICING */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
.plan{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px 30px; display:flex; flex-direction:column; box-shadow:var(--sh-card); }
.plan.core{ background:#0B100F; color:#E8EDEB; border-color:#0B100F; }
.plan.core .plan-n,.plan.core .plan-d{ color:#A2AEAA; }
.plan.core .plan-p b{ color:#12B981; }
.plan.core .plan-l li{ border-color:rgba(255,255,255,.1); color:#C3CCC9; }
.plan.core .plan-l li::before{ background:#12B981; }
.plan-n{ font:500 11.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--tx-3); }
.plan-p{ margin-top:18px; display:flex; align-items:baseline; gap:7px; }
.plan-p b{ font:500 clamp(32px,3.6vw,42px)/1 var(--mono); letter-spacing:-.045em; }
.plan-p i{ font-style:normal; font:400 12px/1.4 var(--mono); color:var(--tx-3); }
.plan-d strong{ color:var(--tx); font-weight:600; }
.plan-d{ margin-top:12px; font-size:14.5px; line-height:1.55; color:var(--tx-2); }
.plan-l{ margin-top:20px; display:grid; }
.plan-l li{ position:relative; padding:9px 0 9px 18px; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.5; color:var(--tx-2); }
.plan-l li::before{ content:""; position:absolute; left:0; top:16px; width:6px; height:1.5px;
  background:var(--tx-3); }

.addons{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(14px,1.6vw,20px); }
.addon{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px; display:flex; align-items:baseline;
  justify-content:space-between; gap:16px; box-shadow:var(--sh-card); }
.addon .k{ font-size:14.5px; font-weight:500; letter-spacing:-.014em; }
.addon .k em{ display:block; font-style:normal; font-size:13px; font-weight:400;
  color:var(--tx-2); margin-top:3px; line-height:1.45; }
.addon .v{ font:500 15px/1 var(--mono); white-space:nowrap; }
.addon .v.free{ color:var(--up); }

.fineprint{ margin-top:18px; font:400 12.5px/1.7 var(--mono); color:var(--tx-3); max-width:76ch; }

/* ================================================================= 11. FAQ */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-size:17px; font-weight:500; letter-spacing:-.018em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:8px; top:29px; width:11px; height:11px;
  border-right:1.5px solid var(--tx-3); border-bottom:1.5px solid var(--tx-3);
  transform:rotate(45deg); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(225deg); top:32px; }
.faq details p{ color:var(--tx-2); font-size:15.5px; line-height:1.65; padding:0 8ch 24px 0;
  max-width:76ch; }

/* --------------------------------------------------------------- booking -- */
.book{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:20px 22px; margin-bottom:4px;
  border:1px solid var(--sig-32); background:var(--sig-8); border-radius:var(--r-lg);
}
.book-k{ font-size:17px; font-weight:600; letter-spacing:-.018em; }
.book-s{ font-size:14px; line-height:1.5; color:var(--tx-2); margin-top:4px; max-width:36ch; }
.book .btn{ flex:none; }
.book-or{
  display:flex; align-items:center; gap:14px; margin:22px 0;
  font:500 11.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--tx-3);
}
.book-or::before,.book-or::after{ content:""; height:1px; background:var(--line); flex:1 1 auto; }
@media (max-width:520px){
  .book{ display:block; }
  .book .btn{ width:100%; justify-content:center; margin-top:16px; }
}

/* ================================================================ 12. FORM */
.form{ display:grid; gap:16px; }
.form .btn{ justify-self:start; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:grid; gap:7px; }
.field label{ font:500 11.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--tx-3); }
.field input,.field select,.field textarea{
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:13px 14px; font-size:15px; color:var(--tx); transition:border-color .2s, background .2s;
  width:100%;
}
.field textarea{ min-height:92px; resize:vertical; }
.field select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-3) 50%),
                   linear-gradient(135deg,var(--tx-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--sig); background:var(--ink-2); }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--sig); outline-offset:2px; }
.field .err{ display:none; font:500 11.5px/1.4 var(--mono); color:var(--warn); }
.field.bad input,.field.bad select,.field.bad textarea{ border-color:var(--warn); }
.field.bad .err{ display:block; }
.field .help{ font:400 11.5px/1.5 var(--mono); color:var(--tx-3); }
.hp{ position:absolute; left:-9999px; }
.form-note{ font:400 12px/1.6 var(--mono); color:var(--tx-3); }
.sent[hidden]{ display:none; }
.sent{ border:1px solid var(--sig-32); background:var(--sig-8);
  border-radius:var(--r-md); padding:26px; }
.sent:focus-visible{ outline:2px solid var(--sig); outline-offset:3px; }
.sent b{ display:block; font-size:19px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px; }
.sent p{ color:var(--tx-2); font-size:15px; line-height:1.6; }

/* ============================================================== 13. FOOTER */
footer{ border-top:1px solid var(--line); padding-block:clamp(46px,5vw,70px) 34px; }
.foot{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,48px); }
.foot h3{ font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-3); margin:0 0 15px; }
.foot ul{ display:grid; gap:10px; }
.foot a{ color:var(--tx-2); font-size:14.5px; transition:color .2s; }
.foot a:hover{ color:var(--sig-tx); }
.foot .blurb{ margin-top:15px; color:var(--tx-3); font-size:13.5px; line-height:1.65; max-width:38ch; }
.foot-base{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:clamp(34px,4vw,56px); padding-top:22px; border-top:1px solid var(--line);
  font:400 12px/1 var(--mono); color:var(--tx-3); }

/* =========================================================== 14. RESPONSIVE */
@media (max-width:1120px){
  .dev-body{ grid-template-columns:164px minmax(0,1fr) 216px; }
}
@media (max-width:980px){
  .dev-body{ grid-template-columns:minmax(0,1fr) 230px; }
  .dev-rail{ display:none; }
  .hero-top{ grid-template-columns:1fr; align-items:start; }
  .hero-aside{ padding-bottom:0; }
  .hero h1{ max-width:16ch; }
  .hero .lede{ margin-top:24px; max-width:60ch; }
  /* .shead has THREE children. Declaring two tracks here auto-placed every
     positioning paragraph into the 104px index gutter as a text ribbon. */
  .shead{ grid-template-columns:minmax(0,104px) minmax(0,1fr); }
  .shead h2{ grid-column:2; max-width:none; margin-bottom:16px; }
  .shead .copy{ grid-column:2; padding-top:0; max-width:64ch; }
  .faults{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
  .plans{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .sys{ grid-template-columns:1fr; }
  .grid2{ grid-template-columns:1fr; }
  .rail-in{ grid-template-columns:repeat(3,1fr); }
  .grid3{ grid-template-columns:1fr 1fr; }
  .grid4{ grid-template-columns:1fr 1fr; }
  .rail-in span:nth-child(4){ border-left:0; }
  .rail-in span:nth-child(n+4){ border-top:1px solid var(--line); }
  .band{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  body{ font-size:16.5px; }
  .nav-links .lnk,.nav-sep{ display:none; }
  .burger{ display:grid; }
  .nav-links.open{ position:absolute; top:64px; left:0; right:0; display:grid; gap:2px;
    background:var(--ink-2); border-bottom:1px solid var(--line); padding:12px var(--gut) 18px; }
  .nav-links.open .lnk{ display:block; padding:11px 0; border-bottom:1px solid var(--line);
    font-size:16px; }
  .nav-links.open .nav-sep{ display:none; }
  .nav-links.open .btn{ margin-top:12px; justify-content:center; }
  .shead{ grid-template-columns:1fr; gap:14px; }
  .shead h2,.shead .copy{ grid-column:1; }
  .shead .ix span{ display:inline; margin-left:10px; }
  /* the panel's top bar has three things to say and no room for two of them */
  .dev-bar{ padding:10px 12px; }
  .dev-bar .path{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dev-bar .r .path{ display:none; }
  .dev-body{ grid-template-columns:1fr; min-height:0; }
  .dev-side{ border-left:0; border-top:1px solid var(--line);
    grid-template-columns:1fr 1fr; gap:10px; }
  .dev-side .tile:last-child{ grid-column:1/-1; }
  .row{ grid-template-columns:20px minmax(0,1fr) 66px; }
  .row .bars{ display:none; }
  .tv-stats{ grid-template-columns:1fr 1fr; }
  .tv-row{ grid-template-columns:26px minmax(0,1fr) 60px; }
  .tv-row .pc{ display:none; }
  .two,.addons,.score,.grid3,.grid4{ grid-template-columns:1fr; }
  .band{ grid-template-columns:1fr; }
  .foot{ grid-template-columns:1fr 1fr; }
  .foot .foot-brand{ grid-column:1/-1; }
  .faq details p{ padding-right:0; }
}
@media (max-width:460px){
  .rail-in{ grid-template-columns:repeat(2,1fr); }
  .rail-in span:nth-child(odd){ border-left:0; }
  .rail-in span:nth-child(n+3){ border-top:1px solid var(--line); }
  .hero-cta .btn{ width:100%; justify-content:center; }
}

/* print — someone will forward this to a boss as a PDF */
@media print{
  body{ background:#fff; color:#000; }
  .nav,.hero::before,.scrub,.burger{ display:none; }
  .sec{ padding-block:24px; break-inside:avoid; }
  /* Chrome omits backgrounds when printing, which left the floor board, the
     closing CTA and the Core pricing card as pale text on white paper — the
     three blocks most likely to be forwarded as a PDF. Flip the inverted
     scopes back to ink-on-paper instead of relying on a background. */
  .night,.plan.core{
    --ink:#fff; --ink-2:#fff; --ink-3:#F4F6F5; --ink-4:#EDEFEE;
    --tx:#000; --tx-2:#333; --tx-3:#5F6A67; --line:#ccc; --line-2:#bbb;
    --sig:#07734B; --sig-tx:#07734B; --bar-prior:#bbb;
    background:#fff !important; color:#000 !important; border-color:#ccc !important;
  }
  .plan.core,.plan.core .plan-n,.plan.core .plan-d,
  .plan.core .plan-p b,.plan.core .plan-l li{ color:#000 !important; }
  .tv,.tv-stat,.panel,.dev,.dev-bar,.panel-hd{ background:#fff !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10px; color:#555; }
}

/* ==========================================================================
   APP-FIDELITY MOCKUPS  (.ap-*)
   --------------------------------------------------------------------------
   These reproduce the real product's component language so the marketing page
   stops showing UI that does not exist. Spec lifted from the shipped bundle
   (btrrep_BL_deploy/index.html): 4-up KPI grid with a 3px accent bar, 26px
   mono tabular values, 10px/600/.6px uppercase labels, uppercase card headers,
   bordered tables with micro uppercase column heads.

   EVERY class here is `ap-` prefixed, modifiers included. The stylesheet has a
   global utility layer and a bare modifier (.sec, .warn, .on) silently
   inherits it — see the class-collision note in the design memory.
   Uses the site tokens only, so `.night` re-themes these for free.
   ========================================================================== */

.ap-win{
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--ink-2); box-shadow:var(--sh-card);
  display:grid; grid-template-columns:52px 1fr;
}
.ap-win.ap-norail{ grid-template-columns:1fr }

/* Collapsed rail — 16px icons, no animated geometry (a11y-tree cost). */
.ap-rail{
  background:var(--ink); border-right:1px solid var(--line);
  padding:10px 0; display:flex; flex-direction:column; align-items:center; gap:3px;
}
.ap-rail i{
  width:30px; height:30px; border-radius:var(--r-xs);
  display:grid; place-items:center; color:var(--tx-3);
}
.ap-rail i svg{ width:16px; height:16px; display:block }
.ap-rail i.ap-on{ background:var(--sig-8); color:var(--sig-tx) }
.ap-rail hr{ width:18px; border:0; border-top:1px solid var(--line-2); margin:5px 0 }

.ap-hd{
  padding:13px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--ink-2);
}
.ap-ttl{
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.6px; color:var(--tx-3);
}
.ap-meta{ font-family:var(--mono); font-size:11px; color:var(--tx-3) }
.ap-bd{ padding:16px 18px }

/* KPI grid ---------------------------------------------------------------- */
.ap-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.ap-kpi{
  position:relative; overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:15px 14px 13px;
}
.ap-kpi::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--line-2);
}
.ap-kpi.ap-acc::before{ background:var(--sig) }
.ap-kpi.ap-bad::before{ background:var(--warn) }
.ap-kpi-lbl{
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.6px;
  color:var(--tx-3); margin-bottom:8px;
}
.ap-kpi-val{
  font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:-.8px;
  font-variant-numeric:tabular-nums; color:var(--tx); line-height:1.05; display:block;
}
.ap-kpi-val.ap-sig{ color:var(--sig-tx) }
.ap-kpi-sub{ font-size:11px; color:var(--tx-3); margin-top:5px; display:block }

/* Tables ------------------------------------------------------------------ */
.ap-tbl{ width:100%; border-collapse:collapse; font-size:13px }
.ap-tbl th{
  text-align:left; font-size:10px; font-weight:600; color:var(--tx-3);
  text-transform:uppercase; letter-spacing:.05em;
  padding:8px 10px; border-bottom:1px solid var(--line-2);
}
.ap-tbl td{ padding:9px 10px; border-bottom:1px solid var(--line); color:var(--tx-2) }
.ap-tbl tr:last-child td{ border-bottom:0 }
.ap-tbl td.ap-nm{ color:var(--tx); font-weight:500 }
.ap-tbl td.ap-n{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  text-align:right; color:var(--tx);
}
.ap-tbl td.ap-n.ap-up{ color:var(--up) }

/* Chips / pills ----------------------------------------------------------- */
.ap-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
.ap-chip{
  font-size:11px; padding:4px 9px; border-radius:var(--r-pill);
  background:var(--ink-3); color:var(--tx-2); border:1px solid var(--line);
}
.ap-chip.ap-sig{ background:var(--sig-8); color:var(--sig-tx); border-color:var(--sig-16) }
.ap-chip.ap-warn{ background:var(--warn-12); color:var(--warn); border-color:transparent }

/* Bars (used in the crew/standings panels) -------------------------------- */
.ap-bar{ height:7px; border-radius:var(--r-pill); background:var(--ink-3); overflow:hidden }
.ap-bar span{ display:block; height:100%; border-radius:var(--r-pill); background:var(--sig) }

@media (max-width:900px){
  .ap-kpis{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px){
  .ap-win{ grid-template-columns:1fr }
  .ap-rail{ display:none }
  .ap-bd{ padding:14px }
  .ap-hd{ padding:12px 14px }
}

/* ==========================================================================
   LEGAL / PROSE SUBPAGES  (.lg-*)
   --------------------------------------------------------------------------
   /security /privacy /terms /changelog. Prose ported from the archived Rowen
   site; this layer re-homes it on the emerald tokens. Every class `lg-`
   prefixed, modifiers included — the sheet has a global utility layer.
   ========================================================================== */

.lg-main{ padding-top:calc(var(--sec) * .62) }
.lg-head{ max-width:none; margin-bottom:clamp(40px,4.6vw,64px) }
.lg-crumb{
  font:400 12px/1 var(--mono); color:var(--tx-3);
  display:flex; align-items:center; gap:8px; margin-bottom:20px;
}
.lg-crumb a{ color:var(--tx-3); text-decoration:none; border-bottom:1px solid var(--line-2) }
.lg-crumb a:hover{ color:var(--sig-tx); border-color:var(--sig) }
.lg-body p.lg-meta,
.lg-meta{
  font:400 12px/1.5 var(--mono); color:var(--tx-3);
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}

/* Table of contents ------------------------------------------------------- */
.lg-toc{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px; margin:0 0 clamp(34px,3.6vw,50px);
}
.lg-toc p{
  font:500 10.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--tx-3); margin:0 0 12px;
}
.lg-toc ol{ margin:0; padding:0; list-style:none; counter-reset:lgtoc;
  display:grid; grid-template-columns:repeat(2,1fr); gap:7px 24px }
.lg-toc li{ counter-increment:lgtoc; font-size:14.5px }
.lg-toc li::before{
  content:counter(lgtoc,decimal-leading-zero); font-family:var(--mono);
  font-size:11px; color:var(--tx-3); margin-right:9px;
}
.lg-toc a{ color:var(--tx-2); text-decoration:none }
.lg-toc a:hover{ color:var(--sig-tx) }

/* Prose ------------------------------------------------------------------- */
.lg-body{ max-width:72ch }
.lg-body > section{ margin-bottom:clamp(38px,4vw,56px); scroll-margin-top:88px }
.lg-body h2{
  font:600 clamp(20px,2.05vw,25px)/1.25 var(--sans); letter-spacing:-.02em;
  color:var(--tx); margin:0 0 16px; display:flex; gap:12px; align-items:baseline;
}
.lg-body h2 .lg-n{
  font:400 12px/1 var(--mono); color:var(--sig-tx); flex:none;
}
.lg-body h3{
  font:600 16px/1.35 var(--sans); color:var(--tx); margin:26px 0 10px;
}
.lg-body p{ font-size:16.5px; line-height:1.65; color:var(--tx-2); margin:0 0 15px }
/* The lead sits in .lg-head on all four legal pages, never in .lg-body, so the
   .lg-body-scoped rule alone never reached it: it rendered at the inherited body
   size with margin:0 from the global reset, and .d1's 1.207em text box overflows
   its .98 line-height far enough that the h1 descender crossed into the lead's
   first line (measured 6.8px of overlap at a 92px h1). Both placements styled. */
.lg-body p.lg-lead,
.lg-head p.lg-lead{ font-size:18px; color:var(--tx); line-height:1.55 }
.lg-head p.lg-lead{ margin-top:clamp(16px,1.5vw,22px); max-width:64ch }
.lg-body a{ color:var(--sig-tx); text-underline-offset:3px }
.lg-body ul{ margin:0 0 16px; padding:0; list-style:none }
.lg-body ul li{
  position:relative; padding:0 0 0 20px; margin-bottom:9px;
  font-size:16px; line-height:1.6; color:var(--tx-2);
}
.lg-body ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:2px; border-radius:1px; background:var(--sig);
}
.lg-body strong{ color:var(--tx); font-weight:600 }

.lg-note{
  background:var(--sig-8); border:1px solid var(--sig-16);
  border-radius:var(--r-md); padding:18px 20px; margin:22px 0;
}
.lg-note p{ margin:0; font-size:15.5px; color:var(--tx-2) }
.lg-note p + p{ margin-top:10px }

/* Changelog --------------------------------------------------------------- */
.lg-log{ max-width:76ch }
.lg-log-e{
  display:grid; grid-template-columns:132px 1fr; gap:28px;
  padding:26px 0; border-top:1px solid var(--line);
}
.lg-log-e:first-child{ border-top:0; padding-top:0 }
.lg-log-d{ font:400 12.5px/1.5 var(--mono); color:var(--tx-3) }
.lg-log-d b{ display:block; color:var(--sig-tx); font-weight:500 }
.lg-log-b h3{ margin:0 0 10px; font:600 17px/1.3 var(--sans); color:var(--tx) }

@media (max-width:760px){
  .lg-toc ol{ grid-template-columns:1fr }
  .lg-log-e{ grid-template-columns:1fr; gap:10px }
}