/* styles/site.css */
@font-face {
  font-family: "Archivo Black";
  src: url("/assets/fonts/archivo-black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--red-text); text-decoration: none; }
a:hover { color: var(--red); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 900;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -0.04em; }
h2 { font-size: clamp(29px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.032em; }
h3 { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.2;  letter-spacing: -0.022em; }
p  { margin: 0; }

.section { padding: clamp(48px, 6vw, 92px) var(--pad-x); }
.section--alt { background: var(--surface-2); border-top: 1px solid var(--border); }
.section--red { background: var(--red); color: var(--cream); }

/* eyebrow: red rule + wide-tracked label — mirrors the app's "— SCAN STATION" */
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); flex: none; }
.eyebrow span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--red-text);
}
/* --red-text does not clear AA on --surface (3.86:1) — an eyebrow nested in a
   card (e.g. the "From scan to execution" pipeline block) must go cream. */
.card .eyebrow span { color: var(--cream); }
.section--red .eyebrow::before { background: var(--cream); }
.section--red .eyebrow span { color: var(--cream); }
.section--red p { color: var(--on-red); }

/* every card block carries a 2px red top stripe */
.card {
  background: var(--surface);
  border-top: 2px solid var(--red);
  border-radius: 6px;
  padding: clamp(24px, 2vw, 32px);
}
.card--muted { border-top-color: #333333; }
.card--orange { border-top-color: var(--orange); }

.grid { display: grid; gap: 22px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: flex; gap: clamp(32px, 5vw, 80px); align-items: center; }

.num { font-family: var(--display); letter-spacing: -0.04em; line-height: 1; }
.body-lg { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--gray-light); }
.meta { font-size: 15px; line-height: 1.55; color: var(--gray-light); }
.dim { color: var(--gray-mid); }

@media (max-width: 900px) {
  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { flex-direction: column; align-items: stretch; }
}
@media (max-width: 560px) {
  .grid--4, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Sticky chrome: the nav stays pinned while the page scrolls, so the section
   links stay reachable after jumping to one. Translucent + blurred so content
   passing underneath reads as depth rather than a hard band. */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px var(--pad-x);
  background: rgba(5, 5, 5, .82);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
/* Browsers without backdrop-filter get an opaque bar rather than unreadable
   text over scrolling content. */
@supports not (backdrop-filter: blur(20px)) {
  .nav { background: var(--canvas); }
}
/* Anchor targets clear the sticky bar instead of hiding behind it. */
:target, [id] { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.nav__brand { display: flex; align-items: center; gap: 14px; }
.wordmark { display: flex; flex-direction: column; line-height: 1; font-family: var(--display); font-size: 15px; letter-spacing: -0.01em; }
.wordmark b { color: var(--cream); font-weight: 900; }
.wordmark i { color: var(--red); font-style: normal; font-weight: 900; }
.nav__links { display: flex; gap: 36px; }
.nav__links a { font-size: 14px; font-weight: 500; color: var(--gray-light); }
.nav__links a:hover { color: var(--cream); }

.footer { padding: 52px var(--pad-x) 56px; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__links { display: flex; gap: 34px; }
.footer__links a { font-size: 14px; color: var(--gray-light); }
.footer__legal {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--gray-mid);
}
@media (max-width: 760px) {
  .nav__links { display: none; }
}

.hero { position: relative; overflow: hidden; display: flex; gap: clamp(32px, 4vw, 56px);
        align-items: center; padding: clamp(40px, 6vw, 100px) var(--pad-x); }
.hero__rings { position: absolute; right: -22%; top: -26%; width: min(1100px, 90vw);
               pointer-events: none; }
.hero__copy { position: relative; flex: 1 1 560px; min-width: 0; }
.hero__accent { color: var(--red); }
.hero__sub { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--gray-light);
             margin: 30px 0 44px; max-width: 34em; }
.hero__note { font-size: 14px; color: var(--gray-mid); margin-top: 18px; }
.hero__card { position: relative; flex: 0 1 460px; min-width: 0; }

.badges { display: flex; flex-wrap: wrap; gap: 12px; }
/* Store-badge lockup: black plate, hairline border, small line above the store
   name — the proportions the real App Store / Google Play badges use. */
.badge {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 56px; padding: 9px 18px;
  background: #000; border: 1px solid #A6A6A6; border-radius: 9px;
  color: #FFF; text-decoration: none;
}
.badge:hover { border-color: #FFF; color: #FFF; }
.badge__glyph { flex: none; }
.badge__text { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.badge__text small {
  font-family: var(--body); font-size: 11px; font-weight: 400;
  letter-spacing: .01em; text-transform: none; color: #FFF;
}
.badge__text b {
  font-family: var(--body); font-size: 20px; font-weight: 600;
  letter-spacing: -.01em; margin-top: 1px;
}

/* Card and chip are an offset stack: the card sits right, the chip sits left and
   is narrower, so the card's bottom-right corner stays visible below the chip's
   top edge. When the chip was wider than the card it enclosed the card's bottom
   edge and the card read as truncated rather than layered. */
.reticle { position: relative; margin: 0 0 -40px auto; width: min(330px, 72%); rotate: -4deg; }
.reticle img { border-radius: 15px; box-shadow: 0 40px 90px rgba(0,0,0,.8); }
.reticle__c { position: absolute; width: 46px; height: 46px; border: 0 solid var(--red); }
.reticle__c--tl { left: -14px; top: -14px; border-left-width: 3px; border-top-width: 3px; border-top-left-radius: 6px; }
.reticle__c--tr { right: -14px; top: -14px; border-right-width: 3px; border-top-width: 3px; border-top-right-radius: 6px; }
.reticle__c--bl { left: -14px; bottom: -14px; border-left-width: 3px; border-bottom-width: 3px; border-bottom-left-radius: 6px; }
.reticle__c--br { right: -14px; bottom: -14px; border-right-width: 3px; border-bottom-width: 3px; border-bottom-right-radius: 6px; }

.chip { position: relative; width: min(400px, 92%); margin-right: auto; box-shadow: 0 24px 60px rgba(0,0,0,.75); }
.chip__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.chip__live, .chip__pill { display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.chip__live i, .chip__pill i, .band__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-hi); }
.chip__pill { background: #241012; border: 1px solid #46181C; border-radius: 999px; padding: 4px 11px; font-size: 9px; }
.chip__name { font-family: var(--display); font-size: 24px; letter-spacing: -.03em; }
.chip__meta { font-size: 13px; color: var(--gray-mid); margin: 6px 0 20px; }
.chip__ladder-head { font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gray-mid); margin-bottom: 12px; }
.chip__insight { font-size: 13px; line-height: 1.5; color: var(--gray-light);
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-2); }
.chip__insight em { font-style: italic; font-weight: 700; color: var(--cream); }
.chip__source { font-size: 11px; color: var(--gray-mid); margin-top: 8px; }

.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ladder__row { display: flex; align-items: center; gap: 14px; }
.ladder__label { font-size: 12px; font-weight: 700; width: 76px; flex: none; }
.ladder__track { flex: 1 1 auto; height: 22px; background: #252525; border-radius: 3px; overflow: hidden; }
.ladder__track i { display: block; height: 100%; }
.ladder__bar--raw { background: #3A3A3A; }
.ladder__bar--graded { background: #7A1A20; }
.ladder__bar--top { background: var(--red); }
.ladder__value { font-family: var(--display); font-size: 16px; letter-spacing: -.03em;
  width: 90px; text-align: right; flex: none; }

.band { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding: 34px var(--pad-x); background: var(--surface-3);
  border-block: 1px solid var(--border); }
.band__stats { display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.band__stats .num { font-size: clamp(25px, 2.4vw, 34px); display: block; }
.band__stats small { display: block; margin-top: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gray-mid); }
.band__live { display: inline-flex; align-items: center; gap: 8px; font-size: 10px;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-mid); }

@media (max-width: 900px) {
  .hero { flex-direction: column; align-items: stretch; }
  .hero__card { display: flex; flex-direction: column; align-items: center; }
  .reticle { margin: 0 auto 26px; rotate: none; width: min(300px, 80%); }
  .chip { width: 100%; margin-right: 0; }
  .ladder__label { width: 62px; }
  .ladder__value { width: 72px; font-size: 14px; }
}

.spread img { border-radius: 7px; margin-bottom: 18px; width: 100%; height: auto; }
.spread__meta { font-size: 12px; margin-top: 5px; }
.pillar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pillar__score { font-family: var(--display); font-size: 21px; letter-spacing: -.03em; color: var(--green); }
.pillar__bar { height: 4px; background: #252525; border-radius: 2px; overflow: hidden; margin-bottom: 16px; }
.pillar__bar i { display: block; height: 100%; background: var(--green); }
.shot { flex: 0 0 auto; width: min(330px, 100%); border-radius: 26px; border: 1px solid var(--border-2); }

.graders { width: 100%; max-width: 620px; border-collapse: collapse; text-align: left; }
.graders caption { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--red-text); padding-bottom: 16px; }
.graders th, .graders td { padding: 13px 0; border-bottom: 1px solid #222; }
.graders thead th { font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gray-mid); border-bottom-color: var(--border-2); }
.graders tbody th { font-family: var(--display); font-size: 15px; letter-spacing: -.02em; color: var(--gray-light); font-weight: 900; }
.graders td { font-family: var(--display); font-size: 15px; letter-spacing: -.03em; text-align: right; }
.graders td:last-child { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--gray-mid); }
.graders__best { color: var(--red-text); }

.fan { display: flex; align-items: center; flex: 0 0 auto; }
.fan img { width: 118px; height: auto; border-radius: 7px; box-shadow: 0 16px 40px rgba(0,0,0,.65); }
.fan img + img { margin-left: -30px; }
.fan img:nth-child(1) { rotate: -8deg; }
.fan img:nth-child(2) { rotate: -2deg; }
.fan img:nth-child(3) { rotate: 4deg; }
.fan img:nth-child(4) { rotate: 10deg; }

.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 15px 28px; border-radius: 999px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }
.btn--cream { background: var(--cream); color: #160505; }
.btn--cream:hover { background: #fff; color: #160505; }
.btn--red { background: var(--red); color: var(--cream); }
.btn--red:hover { background: var(--accent-deep); color: var(--cream); }

.notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.notes li { border-left: 2px solid rgba(245,236,213,.35); padding-left: 22px; }
.notes b { display: block; font-family: var(--display); font-size: 17px; margin-bottom: 6px; }
.notes span { font-size: 15px; line-height: 1.5; color: var(--on-red); }

.stripe { background: var(--red); padding: 18px var(--pad-x); text-align: center; }
.stripe span { font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cream); }

@media (max-width: 560px) {
  .fan img { width: 84px; }
  .fan img + img { margin-left: -22px; }
}

/* Long-form legal pages get their own reading column, centred, with ONE measure
   shared by headings, rules, tables and body text. Previously the block had a
   max-width but no auto margin (so it sat hard-left with ~620px of dead space
   at 1440), and paragraphs carried a separate 68ch cap that left them 67px
   narrower than the rules and tables they sat between. */
.legal {
  max-width: calc(600px + 2 * var(--gutter));
  margin-inline: auto;
  /* MUST override .section's `padding-inline: var(--pad-x)`. --pad-x contains a
     percentage, and percentage padding resolves against the CONTAINING BLOCK's
     width, not the element's own. Once .legal caps itself at ~800px, --pad-x
     still computes from the full viewport, so above ~1540px the padding grows
     past the element's own width and the text column collapses to a word per
     line. Its own gutter keeps the column honest at every width. */
  padding-inline: var(--gutter);
}
.legal h1 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 8px; }
.legal h2 { font-size: clamp(21px, 2vw, 26px); margin: 40px 0 12px; }
.legal h3 { margin: 26px 0 8px; }
.legal p, .legal li { font-size: 17px; line-height: 1.7; color: var(--gray-light); }
.legal p, .legal ul, .legal ol { margin: 0 0 14px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.legal table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15px; }
.legal th, .legal td { border: 1px solid var(--border-2); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal thead th { background: var(--surface); color: var(--cream); }
.legal code { background: var(--surface); padding: 1px 6px; border-radius: 4px; }
@media (max-width: 640px) { .legal table { display: block; overflow-x: auto; } }

.step b { display: block; font-family: var(--display); font-size: 19px; letter-spacing: -.022em; margin-bottom: 8px; border-top: 2px solid var(--red); padding-top: 18px; }
.step span { font-size: 14px; line-height: 1.5; color: var(--gray-mid); }
.step--future b { border-top-color: #333; color: var(--gray-mid); }
.step--future em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange); margin-left: 8px; }
@media (max-width: 900px) { .card .grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px) { .card .grid { grid-template-columns: minmax(0,1fr) !important; } }