/* ============================================================
   ATHLETE FRESH · WHOLESALE TRADE SITE
   Design system, shared by index.html and ways-to-partner.html
   Palette and type verified against the brand guidelines
   ============================================================ */

/* ---------- 01 FONTS ----------
   Local variable woff2. Plus Jakarta Sans carries wght 200 to 800,
   Montserrat carries 100 to 900. Montserrat's default instance is
   100, so every rule states its weight. Never leave it implicit. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 02 TOKENS ----------
   Four brand colors, flat. An alpha wash of Charged Blue over the
   dark ground mixes to a teal that is not in the brand book, so every
   muted value below is a pre-flattened hex from the brand tint scale
   at 80, 60, 40 and 20 percent. No rgba() fills. */

:root {
  /* the four */
  --ground: #000E2B;   /* Cetacean Blue, primary ground */
  --accent: #2ABBDA;   /* Charged Blue, accent and CTAs */
  --paper:  #F1F1F1;   /* Designers White */
  --black:  #000000;   /* True Black */

  /* Designers White on Cetacean Blue, brand tint scale */
  --paper-80: #C1C4C9;
  --paper-60: #9196A2;
  --paper-40: #60697A;
  --paper-20: #303B53;

  /* Charged Blue on Cetacean Blue, brand tint scale */
  --accent-80: #2298B7;
  --accent-60: #197694;
  --accent-40: #115371;
  --accent-20: #08314E;

  /* raised surface, one step off the ground */
  --surface: #041634;

  --font-head: 'Plus Jakarta Sans', Arial, sans-serif;
  --font-body: 'Montserrat', Arial, sans-serif;

  /* Bold is 700. The brand calls for Plus Jakarta Sans Bold, not
     ExtraBold, so nothing in this file goes above 700. */
  --w-head: 700;
  --w-body: 400;

  --h1: clamp(3.1rem, 7.2vw, 5.6rem);
  --h2: clamp(2rem, 4.2vw, 3.4rem);
  --h3: clamp(1.35rem, 2.2vw, 1.85rem);
  --lede: clamp(1.05rem, 1.5vw, 1.3rem);

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1200px;

  --bracket: 20px;        /* corner bracket arm length at rest */
  --bracket-tight: 30px;  /* arm length on hover, corners tighten */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;           /* section fade-slide, per the motion budget */
}

/* ---------- 03 RESET AND BASE ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Clipped at every width, not just mobile: the oversized section
     numerals are deliberately bled off the left edge. Per-element
     overflow is still checked in verification, so this hides nothing. */
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--w-head); margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 9vw, 132px) 0; }
.section--tight { padding: clamp(48px, 6vw, 88px) 0; }
.section--edge { border-top: 1px solid var(--paper-20); }

/* type helpers */
.h1 { font-size: var(--h1); line-height: 0.98; letter-spacing: -0.03em; }
.h2 { font-size: var(--h2); line-height: 1.04; letter-spacing: -0.02em; }
.h3 { font-size: var(--h3); line-height: 1.15; letter-spacing: -0.01em; }
.lede { font-size: var(--lede); line-height: 1.55; color: var(--paper-80); max-width: 60ch; }
.body-muted { color: var(--paper-80); }
.accent { color: var(--accent); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- 04 MOTIFS ----------
   Numbered section label with accent rule, thin rules, corner
   brackets, internal-reference footer. These carry the identity.
   No card shadows, no rounded gradients, anywhere. */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: var(--w-body);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper-80);
}
.eyebrow .num { color: var(--accent); }
/* Square accent marker, sized to the cap height of the label. */
.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--accent);
}
.eyebrow .rule {
  flex: 1;
  height: 1px;
  background: var(--paper-20);
  min-width: 0;
}
/* color is set alongside background so the UA grey never shows up in
   a palette audit, even though border:0 means it cannot paint. */
.rule-thin { height: 1px; background: var(--paper-20); color: var(--paper-20); border: 0; margin: 0; }

/* Corner brackets. Four arms that draw themselves when the block
   enters view, then tighten on hover. Arms are flat borders, so
   they never introduce a color outside the palette. */
.brk { position: relative; }
.brk > .brk-c {
  position: absolute;
  width: var(--bracket);
  height: var(--bracket);
  /* Immune to container rules. A grid parent styling "> *" was
     padding these arms out to 62px and painting them. */
  padding: 0;
  margin: 0;
  background: none;
  border-color: var(--accent);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  transition: width 320ms var(--ease), height 320ms var(--ease), border-color 200ms var(--ease);
}
.brk > .tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.brk > .tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.brk > .bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.brk > .br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* Motion item 05: brackets draw themselves on enter. Collapsed to
   zero only once JS is confirmed running (html.af-js), so a failed
   script never leaves a block unframed. */
.af-js .brk[data-draw] > .brk-c { width: 0; height: 0; }
.af-js .brk[data-draw].is-in > .brk-c { width: var(--bracket); height: var(--bracket); }

.internal-ref {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* paper-60, not paper-40: at 10px this is body text and paper-40
     only reaches 3.46:1 against the ground, under the 4.5:1 AA bar. */
  color: var(--paper-60);
}

/* ---------- 05 BUTTONS ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 28px;
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid transparent;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn--primary { background: var(--accent); color: var(--ground); }
.btn--primary:hover { background: var(--paper); }
.btn--ghost { border-color: var(--paper-40); color: var(--paper); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { min-height: 42px; padding: 11px 18px; font-size: 11px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 06 CARDS ----------
   Motion item 06: on hover the bracket corners tighten and an
   accent line slides in from the left. Nothing else moves. */

.card {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  background: var(--surface);
  border: 1px solid var(--paper-20);
  min-width: 0;
  transition: border-color 200ms var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease);
}
.card:hover { border-color: var(--accent-40); }
.card:hover::after { transform: scaleX(1); }
.card:hover > .brk-c { width: var(--bracket-tight); height: var(--bracket-tight); }
.card-k {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.card-t { font-family: var(--font-head); font-weight: var(--w-head); font-size: 1.15rem; line-height: 1.2; margin-bottom: 10px; }
.card-b { font-size: 14px; line-height: 1.65; color: var(--paper-80); }

/* callout strip with a left accent bar */
.callout {
  border-left: 3px solid var(--accent);
  padding: 18px 0 18px 22px;
  color: var(--paper-80);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- BUYBACK PANEL ----------
   Risk reversal in section 07. Terms are the exact published set,
   so the layout gives the fine print real room instead of squeezing
   it into a terms cell. */
.bb {
  position: relative;
  margin-top: clamp(22px, 3vw, 34px);
  padding: clamp(24px, 4vw, 46px);
  background: var(--surface);
  border: 1px solid var(--accent-40);
}
.bb-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.bb-grid p { color: var(--paper-80); font-size: 15px; line-height: 1.7; max-width: 54ch; }
.bb-grid p + p { margin-top: 14px; }
.bb-grid .h3 { margin: 10px 0 16px; }
.bb-rows { border-top: 1px solid var(--paper-20); min-width: 0; }
.bb-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--paper-20);
  font-size: 13px;
  line-height: 1.5;
}
.bb-row .bk {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-60);
  padding-top: 3px;
}
.bb-row .bv { color: var(--paper); overflow-wrap: break-word; }
.bb-row .bv b { font-family: var(--font-head); font-weight: var(--w-head); color: var(--accent); }
.bb-fine {
  margin-top: clamp(20px, 3vw, 30px);
  padding-top: 18px;
  border-top: 1px solid var(--paper-20);
  font-size: 12px;
  line-height: 1.65;
  color: var(--paper-60);
  max-width: 92ch;
}
@media (max-width: 900px) {
  .bb-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .bb-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* data table with accent header */
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtable th {
  text-align: left;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--ground);
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dtable td { padding: 14px 16px; border-bottom: 1px solid var(--paper-20); color: var(--paper-80); }
.dtable tr td:first-child { color: var(--paper); }
.table-scroll { overflow-x: auto; }

/* ---------- 07 MOTION ----------
   The whole budget, and nothing beyond it:
   1 hero word split, 2 number count up, 3 section fade slide,
   4 sticky mechanism sequence, 5 brackets draw, 6 card hover.
   Every hidden state is scoped to html.af-js, which afw.js sets
   synchronously. If that file fails to load, nothing hides. */

.af-js .reveal { opacity: 0; transform: translateY(10px); }
.af-js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) ease-out, transform var(--dur) ease-out;
}

/* hero headline, word by word, fast. The two sentences are separate
   .split blocks so each word animates on its own; the second carries
   the cascade forward through data-delay. */
.h1 .split { display: block; }
.af-js .split .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.af-js .split .word > i { display: inline-block; font-style: inherit; transform: translateY(105%); }
.af-js .split.is-in .word > i {
  transform: none;
  transition: transform 420ms var(--ease);
  transition-delay: calc(var(--i, 0) * 34ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .af-js .reveal,
  .af-js .split .word > i { opacity: 1 !important; transform: none !important; transition: none !important; }
  .af-js .brk[data-draw] > .brk-c { width: var(--bracket); height: var(--bracket); }
  .card::after { transition: none; }
}

/* ---------- 08 HEADER ----------
   The book-a-call CTA lives here and the bar arrives after the
   first scroll. It starts off-canvas only when JS is running. */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  background: var(--ground);
  border-bottom: 1px solid var(--paper-20);
}
.af-js .hdr { transform: translateY(-100%); transition: transform 260ms var(--ease); }
.af-js .hdr.is-on { transform: none; }
.hdr-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img { width: 26px; height: 26px; }
.brand-wm {
  font-family: var(--font-head);
  font-weight: var(--w-head);
  font-size: 17px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand-wm b { font-weight: var(--w-head); color: var(--accent); }
.hdr-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.hdr-nav a {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-80);
  padding: 8px 0;
}
.hdr-nav a:hover { color: var(--accent); }
@media (max-width: 900px) {
  .hdr-nav .hdr-link { display: none; }
  .hdr-nav { margin-left: auto; gap: 12px; }
}

/* ---------- 09 HERO ---------- */

.hero { padding: clamp(96px, 14vw, 190px) 0 clamp(56px, 7vw, 96px); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { max-width: 22ch; }
.hero .lede { margin-top: 22px; }
/* The locked slogan, carrying the split-fill word. */
.hero-slogan {
  margin-top: 22px;
  font-family: var(--font-head);
  font-weight: var(--w-head);
  font-size: clamp(1.35rem, 2.7vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.hero .btn-row { margin-top: 34px; }
.hero-stage { position: relative; }
.hero-stage img { width: 100%; height: auto; }
.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--paper-20);
  border: 1px solid var(--paper-20);
}
.hero-meta > div { background: var(--ground); padding: 18px 20px; }
.hero-meta .k { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-60); }
/* "Performance" is the longest value and must fit a third of the
   left hero column, which is only about 140px at 1024px wide. */
.hero-meta .v { font-family: var(--font-head); font-weight: var(--w-head); font-size: clamp(1.05rem, 1.5vw, 1.45rem); margin-top: 6px; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { order: -1; max-width: 340px; }
}
/* Three cells cannot hold "Performance" and "Greenside" once the
   column is under about 130px, so stack them on small screens. */
@media (max-width: 640px) {
  .hero-meta { grid-template-columns: minmax(0, 1fr); }
  .hero-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .hero-meta .v { margin-top: 0; font-size: 1.2rem; }
}

/* ---------- 10 THE MATH ----------
   Signature block. Corner brackets, counting numbers. */

.math { position: relative; padding: clamp(30px, 5vw, 58px); border: 1px solid var(--paper-20); background: var(--surface); }
.math-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
  margin-top: 30px;
}
.math-cell .k { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-60); margin-bottom: 10px; }
.math-cell .v {
  font-family: var(--font-head);
  font-weight: var(--w-head);
  /* floor is 1.75rem so "$29.99" still fits a 100px cell when the
     grid drops to two columns on a 320px screen */
  font-size: clamp(1.75rem, 4.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.math-cell .n { font-size: 13px; color: var(--paper-60); margin-top: 10px; line-height: 1.5; }
.math-cell--hi .v { color: var(--accent); }
.math-foot { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--paper-20); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; }
.math-foot .big { font-family: var(--font-head); font-weight: var(--w-head); font-size: 1.5rem; }
@media (max-width: 760px) { .math-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* reorder calculator */
.calc { margin-top: clamp(28px, 4vw, 44px); }
.calc-head { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; justify-content: space-between; }
.calc-bags { font-family: var(--font-head); font-weight: var(--w-head); font-size: 1.35rem; }
.calc input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  margin: 14px 0 0;
  background: none;
  cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--paper-40); }
.calc input[type="range"]::-moz-range-track { height: 2px; background: var(--paper-40); }
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  margin-top: -10px;
  background: var(--accent);
  border: 0;
}
.calc input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--accent); border: 0; border-radius: 0; }
.calc-out {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  background: var(--paper-20);
  border: 1px solid var(--paper-20);
}
.calc-out > div { background: var(--ground); padding: 20px; }
.calc-out .k { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-60); }
.calc-out .v { font-family: var(--font-head); font-weight: var(--w-head); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; margin-top: 8px; }
.calc-out .v.hi { color: var(--accent); }
.calc-note { font-size: 12px; color: var(--paper-60); margin-top: 14px; line-height: 1.6; }
@media (max-width: 820px) { .calc-out { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 11 GRIDS ---------- */

.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--paper-20); border: 1px solid var(--paper-20); }
.g4 > *:not(.brk-c) { background: var(--ground); padding: clamp(20px, 2.6vw, 30px); min-width: 0; }
@media (max-width: 900px) { .g3 { grid-template-columns: minmax(0, 1fr); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g2 { grid-template-columns: minmax(0, 1fr); } .g4 { grid-template-columns: minmax(0, 1fr); } }

/* numbered argument list */
.args { display: grid; gap: clamp(18px, 2.5vw, 30px); margin-top: 40px; }
.arg { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); align-items: start; padding-top: 24px; border-top: 1px solid var(--paper-20); }
.arg .an { font-family: var(--font-head); font-weight: var(--w-head); font-size: 1.5rem; color: var(--accent); line-height: 1; }
.arg .at { font-family: var(--font-head); font-weight: var(--w-head); font-size: var(--h3); line-height: 1.18; margin-bottom: 10px; }
.arg .ab { color: var(--paper-80); font-size: 15px; line-height: 1.65; max-width: 62ch; }
@media (max-width: 560px) { .arg { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* ---------- 12 PRODUCTS ---------- */

.pcard { display: flex; flex-direction: column; }
.pcard-img { background: var(--ground); border: 1px solid var(--paper-20); margin-bottom: 20px; display: grid; place-items: center; padding: 22px; }
.pcard-img img { width: 100%; max-width: 200px; height: auto; }
.pcard-img .plate { width: 100%; max-width: 200px; height: auto; }
.plate .ln { fill: none; stroke: var(--paper-40); stroke-width: 2; }
.plate .hi { fill: none; stroke: var(--accent); stroke-width: 2; }
.plate .fillac { fill: var(--accent); }
.pcard .price { font-family: var(--font-head); font-weight: var(--w-head); font-size: 1.35rem; color: var(--accent); }
.pcard .spec { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-60); margin-top: 8px; }
.pcard .card-b { margin-top: 14px; }
.pill {
  display: inline-block;
  padding: 5px 10px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--accent-40);
  color: var(--accent);
}
.pill--soon { border-color: var(--paper-40); color: var(--paper-60); }

/* quieter teaser row, no price and no buy control */
.teasers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--paper-20); border: 1px solid var(--paper-20); margin-top: 30px; }
.teaser { background: var(--ground); padding: 24px 20px; text-align: center; min-width: 0; }
.teaser img { width: 100%; max-width: 96px; margin: 0 auto 16px; height: auto; }
.teaser .tn { font-family: var(--font-head); font-weight: var(--w-head); font-size: 1rem; }
.teaser .tc { font-size: 11px; color: var(--paper-60); margin-top: 6px; line-height: 1.5; }
@media (max-width: 760px) { .teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "BackCountry" is one unbreakable word and runs 103px at 1rem */
@media (max-width: 380px) {
  .teaser .tn { font-size: 0.9rem; overflow-wrap: break-word; }
  .teaser { padding: 20px 12px; }
}

/* ---------- 13 STICKY MECHANISM SEQUENCE ----------
   Motion item 04. Two panels pinned while the visual swaps. The
   section is tall, the inner frame sticks, and afw.js flips
   data-step from 1 to 2 at the halfway mark. */

.mech { position: relative; }
.mech-track { height: 200vh; }
.mech-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mech-in {
  width: 100%;
  max-width: var(--maxw);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.mech-panels { position: relative; min-width: 0; }
.mech-panel { transition: opacity 260ms var(--ease); }
.mech-panel + .mech-panel { position: absolute; inset: 0; }
.mech-visual { position: relative; aspect-ratio: 1 / 1; min-width: 0; }
.mech-visual > svg, .mech-visual > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity 320ms var(--ease);
}
.mech-step { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.mech-panel h2 { font-size: var(--h2); line-height: 1.02; letter-spacing: -0.02em; }
.mech-panel p { margin-top: 18px; color: var(--paper-80); max-width: 42ch; font-size: var(--lede); line-height: 1.55; }
.mech-dots { display: flex; gap: 8px; margin-top: 30px; }
.mech-dots span { width: 26px; height: 2px; background: var(--paper-40); transition: background 200ms var(--ease); }

/* step state, driven by data-step on .mech */
.mech .mech-panel:nth-child(1), .mech .mech-visual > *:nth-child(1) { opacity: 1; }
.mech .mech-panel:nth-child(2), .mech .mech-visual > *:nth-child(2) { opacity: 0; }
.mech[data-step="2"] .mech-panel:nth-child(1), .mech[data-step="2"] .mech-visual > *:nth-child(1) { opacity: 0; }
.mech[data-step="2"] .mech-panel:nth-child(2), .mech[data-step="2"] .mech-visual > *:nth-child(2) { opacity: 1; }
.mech .mech-dots span:nth-child(1) { background: var(--accent); }
.mech[data-step="2"] .mech-dots span:nth-child(1) { background: var(--paper-40); }
.mech[data-step="2"] .mech-dots span:nth-child(2) { background: var(--accent); }

/* No JS, or reduced motion: unpin and show both panels in order. */
.mech-fallback { display: none; }
@media (max-width: 700px) {
  .mech-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mech-visual { max-width: 260px; margin: 0 auto; }
  .mech-panel p { font-size: 1rem; }
}
html:not(.af-js) .mech-track { height: auto; }
html:not(.af-js) .mech-pin { position: static; height: auto; padding: clamp(48px, 7vw, 90px) 0; }
html:not(.af-js) .mech-panel + .mech-panel { position: static; margin-top: 48px; }
html:not(.af-js) .mech-panel, html:not(.af-js) .mech-visual > svg, .mech-visual > img { opacity: 1 !important; }
html:not(.af-js) .mech-visual > *:nth-child(2) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mech-track { height: auto; }
  .mech-pin { position: static; height: auto; padding: clamp(48px, 7vw, 90px) 0; }
  .mech-panel + .mech-panel { position: static; margin-top: 48px; }
  .mech-panel, .mech-visual > svg, .mech-visual > img { opacity: 1 !important; }
  .mech-visual > *:nth-child(2) { display: none; }
}

/* ---------- 14 HOUSE USE, FULL WIDTH ---------- */

.house { background: var(--surface); border-top: 1px solid var(--paper-20); border-bottom: 1px solid var(--paper-20); }
.house-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .house-grid { grid-template-columns: minmax(0, 1fr); } }
.house-list { display: grid; gap: 20px; margin-top: 28px; }
.house-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; color: var(--paper-80); font-size: 15px; line-height: 1.6; }
.house-list .hn { color: var(--accent); font-family: var(--font-head); font-weight: var(--w-head); font-size: 13px; padding-top: 2px; }

/* ---------- 15 STEPS ---------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--paper-20); border: 1px solid var(--paper-20); margin-top: 40px; }
.step { background: var(--ground); padding: clamp(22px, 3vw, 34px); min-width: 0; }
.step .sn { font-family: var(--font-head); font-weight: var(--w-head); font-size: 2.2rem; color: var(--accent-60); line-height: 1; }
.step .st { font-family: var(--font-head); font-weight: var(--w-head); font-size: 1.1rem; margin: 14px 0 8px; }
.step .sb { font-size: 14px; color: var(--paper-80); line-height: 1.6; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 16 CROSS LINK ---------- */

.xlink { position: relative; padding: clamp(30px, 5vw, 56px); border: 1px solid var(--paper-20); background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
@media (max-width: 760px) { .xlink { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 17 FORM ---------- */

.apply-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (max-width: 900px) { .apply-grid { grid-template-columns: minmax(0, 1fr); } }
.fstep[hidden] { display: none; }
.fprog { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-60); }
.fprog b { font-weight: var(--w-body); color: var(--accent); }
.fprog .bar { flex: 1; height: 2px; background: var(--paper-20); min-width: 0; }
.fprog .bar i { display: block; height: 2px; background: var(--accent); transition: width 260ms var(--ease); }
.frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .frow { grid-template-columns: minmax(0, 1fr); } }
.field { display: block; margin-bottom: 16px; min-width: 0; }
.field > span { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-60); margin-bottom: 8px; }
.field input, .field select {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  font-size: 16px;   /* 16px keeps iOS from zooming the form */
  background: var(--ground);
  border: 1px solid var(--paper-40);
  transition: border-color 200ms var(--ease);
}
.field input:focus, .field select:focus { border-color: var(--accent); outline: none; }
.field select { appearance: none; background-image: none; }
/* Netlify honeypot. Off-canvas and stripped of UA chrome so it never
   contributes a colour outside the palette. */
/* No JS, no stepper. Show both steps as one long form and drop the
   Continue / Back controls, otherwise the contact fields are
   unreachable and the application cannot be completed. */
html:not(.af-js) .fstep[hidden] { display: block; }
html:not(.af-js) .fprog,
html:not(.af-js) [data-next],
html:not(.af-js) [data-back] { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp input { border: 0; background: none; }
.form-note { font-size: 12px; color: var(--paper-60); margin-top: 16px; line-height: 1.6; }
.form-ok { display: none; }
.form-ok.is-on { display: block; }
form.is-sent { display: none; }

/* ---------- 18 ACCORDIONS ---------- */

.faq { margin-top: 40px; border-top: 1px solid var(--paper-20); }
.faq-i { border-bottom: 1px solid var(--paper-20); }
.faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  text-align: left;
  font-family: var(--font-head);
  font-weight: var(--w-head);
  font-size: 1.05rem;
  line-height: 1.3;
  transition: color 200ms var(--ease);
}
.faq-q:hover { color: var(--accent); }
.faq-q .qp { justify-self: end; width: 14px; height: 14px; position: relative; }
.faq-q .qp::before, .faq-q .qp::after { content: ""; position: absolute; background: var(--accent); transition: transform 240ms var(--ease); }
.faq-q .qp::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq-q .qp::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq-i.is-open .qp::after { transform: scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease); }
.faq-i.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: 24px; color: var(--paper-80); font-size: 15px; line-height: 1.7; max-width: 68ch; }
html:not(.af-js) .faq-a { grid-template-rows: 1fr; }

/* ---------- 19 PARTNER PAGE BLOCKS ---------- */

.pblocks { display: grid; gap: 1px; background: var(--paper-20); border: 1px solid var(--paper-20); margin-top: clamp(36px, 5vw, 56px); }
.pblock {
  position: relative;
  background: var(--ground);
  padding: clamp(26px, 4vw, 46px);
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
  transition: background 200ms var(--ease);
}
.pblock:hover { background: var(--surface); }
.pblock .pn { font-family: var(--font-head); font-weight: var(--w-head); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--accent-60); line-height: 1; transition: color 200ms var(--ease); }
.pblock:hover .pn { color: var(--accent); }
.pblock h3 { margin-bottom: 12px; }
.pblock p { color: var(--paper-80); font-size: 15px; line-height: 1.65; max-width: 60ch; }
.pblock .rate { display: inline-flex; gap: 16px; margin-top: 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) {
  .pblock { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pblock .btn { justify-self: start; }
}

/* ---------- 20 FOOTER ---------- */

.ftr { border-top: 1px solid var(--paper-20); padding: clamp(44px, 6vw, 72px) 0 40px; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 760px) { .ftr-grid { grid-template-columns: minmax(0, 1fr); } }
.ftr h5 { font-family: var(--font-body); font-weight: var(--w-body); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-60); margin: 0 0 16px; }
.ftr a { display: block; font-size: 14px; color: var(--paper-80); padding: 9px 0; overflow-wrap: break-word; }
.ftr a:hover { color: var(--accent); }
.ftr-blurb { color: var(--paper-60); font-size: 14px; line-height: 1.7; max-width: 46ch; }
.ftr-base { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--paper-20); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }

/* ---------- 21 SKIP LINK ---------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--accent); color: var(--ground); padding: 10px 16px; }


/* ============================================================
   22 TICKER
   Marquee at the very top of the document, in normal flow so it
   scrolls away and never stacks with the sticky header. The track
   holds the phrase twice so the loop is seamless at -50%.
   ============================================================ */

.ticker {
  border-bottom: 1px solid var(--paper-20);
  overflow: hidden;
  background: var(--ground);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: af-marquee 46s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-run {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  padding: 9px 0;
}
.ticker-run span {
  flex: 0 0 auto;
  padding: 0 18px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
@keyframes af-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
}

/* ============================================================
   23 SPEC CHIPS
   Bracketed data badges. These carry the internal-reference
   identity onto the page itself.
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--paper-40);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-80);
  /* Wrapping, not nowrap: chips sit in columns as narrow as 176px
     (a terms cell) and "Response: 2 business days" needs 232px. */
  white-space: normal;
  line-height: 1.35;
  max-width: 100%;
}
.chip::before, .chip::after { color: var(--accent); font-size: 11px; line-height: 1; }
.chip::before { content: "["; }
.chip::after  { content: "]"; }
.chip b { font-weight: var(--w-body); color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 420px) {
  .chip { font-size: 9px; letter-spacing: 0.14em; padding: 6px 8px; }
}

/* ============================================================
   24 OVERSIZED SECTION NUMERALS
   Outline numerals cropped by the left page edge. Decorative only,
   so they are aria-hidden in the markup and never selectable.
   ============================================================ */

.numeral {
  position: absolute;
  left: -0.08em;
  top: 0;
  z-index: 0;
  font-family: var(--font-head);
  font-weight: var(--w-head);
  font-size: clamp(9rem, 21vw, 20rem);
  line-height: 0.74;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--paper-20);
  pointer-events: none;
  user-select: none;
}
.has-numeral {
  position: relative;
  /* x stays visible so the numeral bleeds off the left edge, y is
     clipped so it cannot ride up over the previous section's content
     (it was landing on the hero CTA). */
  overflow: visible clip;
}
.has-numeral > .wrap { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .numeral { font-size: clamp(7rem, 34vw, 12rem); }
}

/* Split fill: top half solid Charged Blue, bottom half outlined. */
.splitfill {
  background-image: linear-gradient(to bottom, var(--accent) 0 50%, transparent 50% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  padding-right: 0.06em;
}

/* ============================================================
   25 PROGRESS RAIL
   Desktop: fixed dots on the right edge, one per section, name on
   hover. Mobile: a slim scroll bar pinned to the top.
   ============================================================ */

.rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  text-decoration: none;
}
.rail .dot {
  width: 9px;
  height: 9px;
  border: 1px solid var(--paper-40);
  background: none;
  flex: 0 0 auto;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.rail .rname {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-60);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  pointer-events: none;
  white-space: nowrap;
}
.rail a:hover .rname, .rail a:focus-visible .rname { opacity: 1; transform: none; }
.rail a:hover .dot { border-color: var(--accent); }
.rail a.is-here .dot { background: var(--accent); border-color: var(--accent); }
.railbar { display: none; }
@media (max-width: 1100px) {
  .rail { display: none; }
  .railbar {
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 95;
    background: var(--paper-20);
  }
  .railbar i { display: block; height: 2px; width: 0; background: var(--accent); }
}

/* ============================================================
   26 CUSTOM CURSOR
   A bracket pair that tightens on links and buttons. Desktop fine
   pointers only, off under reduced motion, and the native caret is
   restored over text fields so typing still behaves.
   ============================================================ */

.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .af-cursor .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 9999;
    pointer-events: none;
    font-family: var(--font-head);
    font-weight: var(--w-head);
    font-size: 20px;
    line-height: 1;
    color: var(--accent);
    will-change: transform;
  }
  .af-cursor .cursor i {
    position: absolute;
    top: -10px;
    font-style: normal;
    transition: transform 160ms var(--ease);
  }
  .af-cursor .cursor .cl { left: -14px; }
  .af-cursor .cursor .cr { left: 6px; }
  .af-cursor.is-over .cursor .cl { transform: translateX(5px); }
  .af-cursor.is-over .cursor .cr { transform: translateX(-5px); }
  .af-cursor, .af-cursor a, .af-cursor button { cursor: none; }
  .af-cursor input, .af-cursor select, .af-cursor textarea { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
  .af-cursor, .af-cursor a, .af-cursor button { cursor: auto; }
}

/* ============================================================
   27 VERTICALS DRAG RAIL
   Six verticals, snap scrolling, drag to pan. Focusable so the
   keyboard can scroll it too, not just the mouse.
   ============================================================ */

.vrail {
  display: flex;
  gap: 1px;
  margin-top: 30px;
  padding-bottom: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  background: var(--paper-20);
  border: 1px solid var(--paper-20);
  cursor: grab;
  scrollbar-width: thin;
}
.vrail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.vrail::-webkit-scrollbar { height: 3px; }
.vrail::-webkit-scrollbar-track { background: var(--ground); }
.vrail::-webkit-scrollbar-thumb { background: var(--accent-40); }
.vcard {
  flex: 0 0 clamp(200px, 25vw, 260px);
  scroll-snap-align: start;
  background: var(--ground);
  padding: 24px 20px 26px;
  min-width: 0;
  position: relative;
  transition: background 200ms var(--ease);
}
.vrail:not(.is-dragging) .vcard:hover { background: var(--surface); }
.vcard img { width: 100%; max-width: 128px; margin: 0 auto 16px; height: auto; pointer-events: none; }
.vcard .vn { font-size: 10px; letter-spacing: 0.22em; color: var(--accent); }
.vcard .vt { font-family: var(--font-head); font-weight: var(--w-head); font-size: 1.1rem; margin: 8px 0 6px; }
.vcard .vd { font-size: 12px; line-height: 1.5; color: var(--paper-60); }
.vcard--soon img { filter: grayscale(1) brightness(0.72); }
.vcard--soon .vt, .vcard--soon .vn { color: var(--paper-60); }
.vrail-hint { margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   28 MECHANISM LINE ART
   Replaces the packaging photography in the sticky sequence with a
   drawn two-panel diagram, so nothing there depends on a render.
   ============================================================ */

.mech-art { max-width: 420px; margin: 0 auto; }
.mech-art .ln { fill: none; stroke: var(--paper-40); stroke-width: 2; }
.mech-art .hi { fill: none; stroke: var(--accent); stroke-width: 2; }
.mech-art .fillac { fill: var(--accent); }
.mech-art .fillpa { fill: var(--paper-40); }
.mech-art .lbl {
  fill: var(--paper-60);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============================================================
   29 LEARN MORE BANNER, TIMELINE AND ENGINE
   ============================================================ */

.banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--accent-40);
  background: var(--surface);
}
@media (max-width: 760px) { .banner { grid-template-columns: minmax(0, 1fr); } }

.tl { display: grid; gap: 1px; background: var(--paper-20); border: 1px solid var(--paper-20); margin-top: clamp(32px, 5vw, 52px); }
.tl-step {
  position: relative;
  background: var(--ground);
  display: grid;
  grid-template-columns: clamp(74px, 9vw, 128px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(26px, 4vw, 46px);
  transition: background 200ms var(--ease);
}
.tl-step:hover { background: var(--surface); }
.tl-n {
  font-family: var(--font-head);
  font-weight: var(--w-head);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent-60);
  transition: -webkit-text-stroke-color 200ms var(--ease);
  user-select: none;
}
.tl-step:hover .tl-n { -webkit-text-stroke-color: var(--accent); }
.tl-t { font-family: var(--font-head); font-weight: var(--w-head); font-size: var(--h3); margin-bottom: 10px; }
.tl-b { color: var(--paper-80); font-size: 15px; line-height: 1.7; max-width: 60ch; }
.tl-step .chip-row { margin-top: 18px; }
@media (max-width: 560px) {
  .tl-step { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* inset browser frame around the invented dashboard graphic */
.frame { border: 1px solid var(--paper-20); background: var(--surface); }
.frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--paper-20);
}
.frame-bar i { width: 8px; height: 8px; border: 1px solid var(--paper-40); display: block; }
.frame-bar span {
  margin-left: 10px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-60);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-body { padding: clamp(16px, 2.5vw, 26px); }
.frame-body svg { width: 100%; height: auto; display: block; }

.engine { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(32px, 5vw, 52px); }
@media (max-width: 900px) { .engine { grid-template-columns: minmax(0, 1fr); } }
.engine-list { display: grid; gap: 1px; background: var(--paper-20); border: 1px solid var(--paper-20); }
.engine-item { background: var(--ground); padding: clamp(20px, 3vw, 30px); transition: background 200ms var(--ease); }
.engine-item:hover { background: var(--surface); }
.engine-item .en { font-size: 10px; letter-spacing: 0.24em; color: var(--accent); }
.engine-item .et { font-family: var(--font-head); font-weight: var(--w-head); font-size: 1.05rem; margin: 8px 0 8px; }
.engine-item .eb { font-size: 14px; line-height: 1.65; color: var(--paper-80); }

/* ============================================================
   30 FOOTER WORDMARK
   Enormous, cropped by the bottom edge. Flat brand tint, not an
   opacity wash, so it stays inside the palette.
   ============================================================ */

.ftr-mark {
  margin-top: clamp(40px, 6vw, 72px);
  overflow: hidden;
  height: clamp(52px, 8vw, 118px);
  user-select: none;
  pointer-events: none;
}
.ftr-mark span {
  display: block;
  font-family: var(--font-head);
  font-weight: var(--w-head);
  font-size: clamp(4.2rem, 15.5vw, 15rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: var(--paper-20);
  white-space: nowrap;
}

/* ============================================================
   31 DUOTONE
   Ready for real photography. The repo has no photo library, only
   packaging renders, and renders must stay true colour so a buyer
   sees the actual pack. Apply this to photos when they exist.
   ============================================================ */

.duotone {
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  background: var(--ground);
  mix-blend-mode: luminosity;
}