/* ============================================================
   Baseline — the officials' system of record
   Single committed identity: navy ground, paper insets.
   Every colour painted explicitly so the page holds on any host ground.
   ============================================================ */

:root{
  /* grounds */
  --night:#061924;
  --navy:#0B2A3B;
  --surf:#123549;
  --surf-2:#0E2C3E;
  --line:#1E4A61;
  --line-soft:#16394C;

  /* paper inset */
  --paper:#F4F7F6;
  --paper-2:#E9EFEC;
  --paper-line:#D5E0DD;

  /* ink */
  --chalk:#EEF3F1;
  --mist:#C3D6DE;
  --haze:#9FBDCB;
  --ash:#7B93A0;
  --slate:#5C7683;
  --ink:#0B2A3B;

  /* accents — optic is spent only on record moments */
  --optic:#D9F535;
  --teal:#17A398;
  --cobalt:#2D6BE0;
  --sky:#6FA8FF;
  --amber:#F2B90F;

  /* type */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  /* measure + rhythm */
  --max:1180px;
  --gutter:clamp(20px,4vw,48px);
  --rule:1px solid var(--line);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--night);
  color:var(--chalk);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}

a{color:var(--chalk);text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--optic);outline-offset:3px;border-radius:2px;
}

/* ---------- containers ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.prose{max-width:66ch}
.prose-wide{max-width:78ch}

/* ---------- record rail: monospace section codes ---------- */
.code{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ash);
}
.code--optic{color:var(--optic)}
.code--teal{color:var(--teal)}
.code--sky{color:var(--sky)}
.code--amber{color:var(--amber)}
.code--slate{color:var(--slate)}

/* ---------- headings ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.022em;text-wrap:balance;margin:0}
h1{font-size:clamp(38px,6.2vw,66px);line-height:1.02;font-weight:800;letter-spacing:-.032em}
h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.026em}
h3{font-size:clamp(19px,2vw,23px);line-height:1.2}
h4{font-size:16px;line-height:1.3;letter-spacing:-.01em}
p{margin:0}

.lede{font-size:clamp(16px,1.7vw,19px);line-height:1.58;color:var(--haze)}
.dim{color:var(--haze)}
.dimmer{color:var(--ash)}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  position:sticky;top:0;z-index:60;
  background:rgba(6,25,36,.88);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:var(--rule);
}
.masthead__inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:22px;height:62px;
}
.masthead__brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.masthead__brand img{height:22px;width:auto}
.masthead__brand span{
  font-family:var(--display);font-weight:800;font-size:17px;
  letter-spacing:-.03em;color:var(--chalk);
}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ash);padding:7px 11px;border-radius:3px;
  transition:color .15s ease,background .15s ease;
}
.nav a:hover{color:var(--chalk);background:var(--surf)}
.nav a[aria-current="page"]{color:var(--chalk);background:var(--surf);box-shadow:inset 0 -2px 0 var(--optic)}
.nav__cta{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--optic);color:var(--night)!important;
  padding:8px 14px;border-radius:3px;margin-left:8px;
  transition:filter .15s ease;
}
.nav__cta:hover{filter:brightness(1.08)}
@media (max-width:860px){
  .masthead__inner{height:auto;padding-block:12px;flex-wrap:wrap;gap:12px}
  .nav{width:100%;margin-left:0}
}

/* ============================================================
   SECTION SCAFFOLD — ruled, not boxed
   ============================================================ */
.band{padding-block:clamp(56px,8vw,96px);border-top:var(--rule)}
.band--flush{border-top:0}
.band--night{background:var(--night)}
.band--navy{background:var(--navy)}
.band--paper{background:var(--paper);color:var(--ink);border-top:0}
.band--paper h1,.band--paper h2,.band--paper h3,.band--paper h4{color:var(--ink)}
.band--paper .lede,.band--paper .dim{color:var(--slate)}
.band--paper .dimmer{color:var(--slate)}
.band--paper .code{color:var(--slate)}

.band__head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,44px)}
.band__head .code{margin:0}

/* ============================================================
   LEDGER — the core device. Hairline rows with entry codes.
   ============================================================ */
.ledger{display:flex;flex-direction:column;border-top:var(--rule)}
.band--paper .ledger{border-top:1px solid var(--paper-line)}

.entry{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:0 22px;
  padding-block:22px;
  border-bottom:var(--rule);
  align-items:start;
}
.band--paper .entry{border-bottom:1px solid var(--paper-line)}
.entry__no{
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--slate);
  padding-top:4px;font-variant-numeric:tabular-nums;
}
.entry__body{display:flex;flex-direction:column;gap:7px;min-width:0}
.entry__body p{color:var(--haze);font-size:14.5px;line-height:1.55}
.band--paper .entry__body p{color:var(--slate)}
@media (max-width:620px){
  .entry{grid-template-columns:1fr;gap:8px}
  .entry__no{padding-top:0}
}

/* two-column ledger (label / value) */
.deflist{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--rule)}
.band--paper .deflist{border-top:1px solid var(--paper-line)}
.deflist__row{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 22px;
  padding-block:14px;border-bottom:var(--rule);
}
.band--paper .deflist__row{border-bottom:1px solid var(--paper-line)}
.deflist__row dt{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);margin:0;padding-top:3px;
}
.band--paper .deflist__row dt{color:var(--slate)}
.deflist__row dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--mist)}
.band--paper .deflist__row dd{color:var(--slate)}
@media (max-width:620px){.deflist__row{grid-template-columns:1fr;gap:4px}}

/* ============================================================
   CARDS — only where objects are genuinely parallel
   ============================================================ */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
/* Short one-line items (reason codes, chips). The 300px floor on
   .grid--2 overflows any column narrower than that. */
.grid--tight{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}

.card{
  background:var(--surf);
  border:1px solid var(--line);
  border-radius:5px;
  padding:22px;
  display:flex;flex-direction:column;gap:9px;
  min-width:0;
}
.card p{font-size:13.8px;line-height:1.52;color:var(--haze)}
.card--paper{background:#FFF;border-color:var(--paper-line)}
.card--paper p{color:var(--slate)}
.card--paper h3,.card--paper h4{color:var(--ink)}
.card--mark{border-color:var(--optic)}
.card--tint{background:#16382B;border-color:var(--optic)}

/* ============================================================
   FIGURES — the four proof numbers
   ============================================================ */
.figs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fig{background:var(--surf);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.fig__n{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(30px,3.6vw,40px);line-height:1;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.fig__l{font-size:13px;line-height:1.45;color:var(--haze)}

/* before/after comparison — one scale, labelled at both ends */
.compare{display:flex;flex-direction:column;gap:18px}
.compare__row{display:grid;grid-template-columns:96px minmax(0,1fr) 58px;gap:14px;align-items:center}
.compare__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ash);text-align:right}
.compare__track{height:20px;background:var(--surf-2);border-radius:3px;overflow:hidden}
.compare__bar{height:100%;border-radius:0 3px 3px 0}
.compare__v{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--chalk);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .compare__row{grid-template-columns:76px minmax(0,1fr) 50px;gap:10px}
}

/* ============================================================
   PRODUCT SHOTS
   ============================================================ */
.shots{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.shot{flex:0 1 auto;display:flex;flex-direction:column;gap:9px;min-width:0}
.shot img{
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surf-2);
}
.shot--phone img{width:clamp(150px,20vw,204px)}
.shot--watch img{width:clamp(120px,15vw,158px);border-radius:16px}
.shot__cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.shot--plain img{border:0;background:none;border-radius:0}

.figure-wide{display:flex;flex-direction:column;gap:12px}
.figure-wide img{width:100%;border-radius:6px}
.figure-wide figcaption{font-size:13px;color:var(--ash);max-width:72ch}

/* split: text beside product */
/* The media column may take what it needs, but never below a readable
   measure for the text beside it — min() lets it still collapse on mobile. */
.split{display:grid;grid-template-columns:minmax(min(100%,22rem),1fr) minmax(0,auto);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(52px,7vw,84px);padding-bottom:clamp(48px,6vw,76px);background:var(--night)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(30px,5vw,60px);align-items:center}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--optic);display:block}
.hero__meta{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding-top:20px;margin-top:24px;border-top:var(--rule);
}
.pill{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:12px 20px;border-radius:4px;border:1px solid transparent;
  cursor:pointer;transition:filter .15s ease,background .15s ease,border-color .15s ease;
}
.btn--primary{background:var(--optic);color:var(--night)}
.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent;color:var(--chalk);border-color:var(--line)}
.btn--ghost:hover{background:var(--surf);border-color:var(--ash)}
.btn--paper{background:var(--ink);color:var(--paper)}
.btn[aria-disabled="true"]{
  background:var(--surf);color:var(--ash);border-color:var(--line);
  cursor:not-allowed;filter:none;
}

/* ============================================================
   DOWNLOAD PANELS
   ============================================================ */
.dl{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.dl__panel{
  background:var(--surf);border:1px solid var(--line);border-radius:6px;
  padding:26px;display:flex;flex-direction:column;gap:16px;min-width:0;
}
.dl__panel--android{border-color:var(--optic)}
.dl__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.status{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;border-radius:3px;white-space:nowrap;
}
.status--live{background:rgba(23,163,152,.18);color:var(--teal);border:1px solid rgba(23,163,152,.42)}
.status--pending{background:rgba(242,185,15,.14);color:var(--amber);border:1px solid rgba(242,185,15,.4)}
.status--na{background:var(--surf-2);color:var(--ash);border:1px solid var(--line)}

.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.meta__cell{background:var(--surf-2);padding:11px 13px;display:flex;flex-direction:column;gap:3px;min-width:0}
.meta__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.meta__v{font-family:var(--mono);font-size:12.5px;color:var(--mist);word-break:break-all;font-variant-numeric:tabular-nums}

.hash{
  font-family:var(--mono);font-size:11.5px;line-height:1.7;
  background:var(--night);border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;color:var(--mist);overflow-x:auto;white-space:pre;
}

.note{
  border-left:2px solid var(--amber);
  padding:2px 0 2px 16px;
  font-size:13.8px;line-height:1.55;color:var(--haze);
}
.note--optic{border-left-color:var(--optic)}
.note--teal{border-left-color:var(--teal)}
.band--paper .note{color:var(--slate)}

.steps{counter-reset:s;display:flex;flex-direction:column;gap:0;border-top:var(--rule)}
/* Deliberately NOT a grid.
   These items mix an inline <strong> with the sentence that follows it, and
   grid promotes every element child AND every text run to its own grid item.
   With two columns that pushes the trailing sentence onto a second row, into
   the narrow counter column - which renders it one word per line. Absolute
   positioning keeps the counter in the gutter while the content stays a single
   normal flow, whatever mix of inline elements and text it contains. */
.steps li{
  list-style:none;counter-increment:s;
  position:relative;
  padding:13px 0 13px 48px;
  border-bottom:var(--rule);
  font-size:14px;line-height:1.55;color:var(--mist);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:15px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--optic);
  font-variant-numeric:tabular-nums;
}
.steps{margin:0;padding:0}

/* ============================================================
   TABLE (comparison)
   ============================================================ */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:5px}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:13.8px}
table.cmp th,table.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp thead th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ash);background:var(--surf-2);font-weight:600;
}
table.cmp tbody th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);font-weight:600;width:132px;
}
table.cmp td{color:var(--haze);line-height:1.5}
table.cmp td.is-ours{color:var(--mist);background:rgba(217,245,53,.045)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}

/* ============================================================
   DECK GALLERY
   ============================================================ */
.deck{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.slide{display:flex;flex-direction:column;gap:10px;min-width:0}
.slide img{
  width:100%;border:1px solid var(--line);border-radius:5px;background:var(--surf);
}
.slide__cap{display:flex;gap:10px;align-items:baseline}
.slide__n{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--optic);font-variant-numeric:tabular-nums;flex:0 0 auto}
.slide__t{font-size:13px;color:var(--haze);line-height:1.4}

/* ============================================================
   CROSS-LINKS + FOOTER
   ============================================================ */
.jump{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.jump a{
  background:var(--surf);padding:20px;display:flex;flex-direction:column;gap:7px;
  transition:background .15s ease;min-width:0;
}
.jump a:hover{background:var(--surf-2)}
.jump__t{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--chalk)}
.jump__d{font-size:13px;color:var(--haze);line-height:1.45}

.footer{border-top:var(--rule);background:var(--night);padding-block:44px;font-size:13px}
.footer__grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start}
.footer__brand{display:flex;flex-direction:column;gap:10px}
.footer__brand img{height:20px;width:auto}
.footer h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);font-weight:600;margin-bottom:10px;
}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.footer a{color:var(--haze);transition:color .15s ease}
.footer a:hover{color:var(--chalk)}
.footer__legal{
  margin-top:32px;padding-top:20px;border-top:var(--rule);
  display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--slate);
}

/* sources line */
.src{font-size:11.5px;line-height:1.5;color:var(--slate);max-width:80ch}
.band--paper .src{color:var(--slate)}

/* utility */
.stack{display:flex;flex-direction:column}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}
.gap-28{gap:28px}.gap-36{gap:36px}.gap-44{gap:44px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:8px;z-index:100;background:var(--optic);color:var(--night);padding:9px 14px;border-radius:3px;font-family:var(--mono);font-size:12px}

/* ============================================================
   PAGER — the site moves the way the app does.
   Real links first; swipe is layered on by assets/js/pager.js.
   ============================================================ */

/* Native cross-document transition where the browser supports it. */
@view-transition{navigation:auto}

/* Vertical scroll stays with the browser; horizontal comes to us. */
#main{touch-action:pan-y;will-change:transform}

.pagerband{border-top:var(--rule);background:var(--night);padding-block:26px}

.pager{
  max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;
}
.pager__side{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  padding:12px 16px;border:1px solid var(--line);border-radius:5px;
  background:var(--surf);transition:background .15s ease,border-color .15s ease;
}
.pager__side:hover{background:var(--surf-2);border-color:var(--ash)}
.pager__next{text-align:right;align-items:flex-end}
.pager__dir{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--optic);
}
.pager__name{
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.02em;
  color:var(--chalk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.pager__side--empty{visibility:hidden}

.pager__dots{display:flex;gap:7px;list-style:none;margin:0;padding:0;align-items:center}
.pager__dots li{width:6px;height:6px;border-radius:999px;background:var(--line)}
.pager__dots li[aria-current="true"]{background:var(--optic);width:20px}

.pager__hint{
  text-align:center;margin-top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);
}

@media (max-width:640px){
  .pager{grid-template-columns:1fr 1fr;gap:10px}
  .pager__dots{grid-column:1 / -1;order:-1;justify-content:center;margin-bottom:4px}
}

/* edge chip revealed while a swipe is in progress */
.edge-chip{
  position:fixed;top:50%;z-index:70;
  transform:translateY(-50%) scale(.94);
  background:var(--optic);color:var(--night);
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:10px 14px;border-radius:4px;
  opacity:0;pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
  max-width:48vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.edge-chip[data-side="right"]{right:14px}
.edge-chip[data-side="left"]{left:14px}
.edge-chip.is-on{opacity:1;transform:translateY(-50%) scale(1)}
@media (prefers-reduced-motion:reduce){
  .edge-chip{transition:none}
}