/* ============================================================
   Mobile Messenger — landing page
   Built to "Mobile Messenger Design Guide v1.0" (foxhue for
   Leverage Lab, 2026-07-19). Values below are taken from the
   guide verbatim. Do not substitute.

   Colour balance is fixed: 70% surface / 15% content / 15% signal.
   ONE red element per view. If two things are red, neither is
   the message.
   ============================================================ */

:root {
  /* ── Colour — guide §03 ──────────────────────────────────── */
  --color-porcelain:  #F2F2F2;  /* primary surface, backgrounds */
  --color-white:      #FFFFFF;  /* cards and panels on Porcelain */
  --color-bone:       #D9D6CF;  /* secondary surface, soft fills */
  --color-clay:       #CFCCC4;  /* message lines, quiet UI detail */
  --color-stone:      #98938B;  /* muted captions, disabled states */
  --color-ink:        #262626;  /* text, dark surfaces, the outline */
  --color-red:        #C32313;  /* CTA, links, key words, AD tags */

  /* Semantic aliases — components reference these, never raw names. */
  --color-bg:         var(--color-porcelain);
  --color-surface:    var(--color-white);
  --color-text:       var(--color-ink);
  --color-muted:      var(--color-stone);
  --color-accent:     var(--color-red);
  --color-focus:      var(--color-ink);
  --color-danger:     var(--color-red);
  --color-on-ink:     var(--color-porcelain);

  /* ── Typography — guide §04 ──────────────────────────────── */
  /* Brand typeface is Inter Tight, in the wordmark and everywhere else. */
  --font-body: "Inter Tight", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);

  --text-display: clamp(2.5rem, 6vw, 3.5rem);  /* 56px web */
  --leading-display: 1.05;                      /* headlines set tight */
  --text-h1:      clamp(1.75rem, 3.4vw, 2rem);  /* 32px web */
  --leading-h1:   1.1;
  --text-h2:      1.375rem;                     /* 22px web */
  --leading-h2:   1.15;
  --text-base:    1rem;                         /* 16px */
  --leading-base: 1.55;                         /* guide: 1.5–1.6 */
  --text-caption: 0.8125rem;                    /* 13px */
  --leading-caption: 1.45;
  --text-button:  0.8125rem;                    /* 13px, all caps, tracked */

  --tracking-display: -0.02em;  /* guide: -1% to -2% */
  --tracking-button:  0.08em;

  /* ── Spacing — 8px base grid, guide §05 ──────────────────── */
  --space-1: 0.5rem;   /*  8 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-6: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-12: 6rem;    /* 96 */
  --space-16: 8rem;    /* 128 */

  /* ── Radius — guide §05 ──────────────────────────────────── */
  --radius-sm: 8px;    /* buttons, tags, message blocks — fixed */
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-phone: 12%; /* phone-like containers: 25% of height */
  --radius-pill: 999px;/* rounded-end message bars (brand texture) */

  /* No hard divider lines between sections. Depth is carried by
     surface colour change and space, so shadows stay minimal. */
  --shadow-sm: 0 1px 2px rgba(38,38,38,.05);
  --shadow-md: 0 8px 24px -12px rgba(38,38,38,.18);
  --shadow-lg: 0 24px 60px -28px rgba(38,38,38,.28);

  /* ── Motion ──────────────────────────────────────────────── */
  --duration-fast: 140ms;
  --duration-base: 300ms;
  --duration-slow: 640ms;
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.16,1.02,.3,1);

  --shell: 74rem;
  --d: 0ms;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 var(--text-base)/var(--leading-base) var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,p,dl,dd,figure,ol,ul { margin: 0; }
ul,ol { list-style: none; padding: 0; }
img { max-width: 100%; display: block; height: auto; }
button, input, select { font: inherit; color: inherit; }

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.shell { width: min(100% - 2rem, var(--shell)); margin-inline: auto; }

/* Sections separate by surface change and space — never a rule. */
.section { padding: var(--space-12) 0; }
.section--white { background: var(--color-surface); }
.section--bone  { background: var(--color-bone); }
.section--ink   { background: var(--color-ink); color: var(--color-on-ink); }

/* ── Focus ─────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.section--ink :focus-visible { outline-color: var(--color-porcelain); }

.skip-link {
  position: absolute; left: var(--space-2); top: -5rem; z-index: 100;
  display: flex; align-items: center; min-height: 44px;
  background: var(--color-ink); color: var(--color-porcelain);
  padding: 0 var(--space-2); border-radius: var(--radius-sm);
  font: 700 var(--text-button)/1 var(--font-body);
  letter-spacing: var(--tracking-button); text-transform: uppercase; text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-2); }

/* ── Type helpers ──────────────────────────────────────────── */
.display {
  font: 800 var(--text-display)/var(--leading-display) var(--font-display);
  letter-spacing: var(--tracking-display);
}
/* The red word — guide §04. One key word per headline, never more. */
.display em, .h1 em { font-style: normal; color: var(--color-accent); }
.section--ink .display em { color: var(--color-porcelain); } /* red never as fine text on ink */

.h1 { font: 700 var(--text-h1)/var(--leading-h1) var(--font-display); letter-spacing: var(--tracking-display); }
.h2 { font: 600 var(--text-h2)/var(--leading-h2) var(--font-display); letter-spacing: -0.01em; }
.caption { font: 500 var(--text-caption)/var(--leading-caption) var(--font-body); color: var(--color-muted); }
.section--ink .caption { color: var(--color-clay); }
.lede { font-size: var(--text-base); line-height: var(--leading-base); max-width: 46ch; }
.eyebrow {
  font: 500 var(--text-caption)/1 var(--font-body);
  letter-spacing: var(--tracking-button); text-transform: uppercase; color: var(--color-muted);
}
.section--ink .eyebrow { color: var(--color-clay); }

/* ── Buttons — guide §04: bold 700, 13px, all caps, tracked ── */
.btn {
  --btn-bg: transparent; --btn-fg: var(--color-ink); --btn-bd: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 48px; padding: 0 var(--space-3);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--radius-sm);
  font: 700 var(--text-button)/1 var(--font-body);
  letter-spacing: var(--tracking-button); text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
/* Red button = the single signal. One per view. */
.btn--red   { --btn-bg: var(--color-red); --btn-fg: var(--color-white); --btn-bd: var(--color-red); }
.btn--ink   { --btn-bg: var(--color-ink); --btn-fg: var(--color-porcelain); --btn-bd: var(--color-ink); }
.btn--quiet { --btn-bg: transparent; --btn-fg: var(--color-ink); --btn-bd: var(--color-clay); }
.btn--onink { --btn-bg: transparent; --btn-fg: var(--color-porcelain); --btn-bd: var(--color-stone); }
.btn--full  { width: 100%; }

.btn:hover  { transform: translateY(-1px); }
.btn--red:hover   { --btn-bg: #A81E10; --btn-bd: #A81E10; }
.btn--ink:hover   { --btn-bg: #111; --btn-bd: #111; }
.btn--quiet:hover { --btn-bd: var(--color-ink); background: rgba(38,38,38,.04); }
.btn--onink:hover { --btn-bd: var(--color-porcelain); background: rgba(242,242,242,.08); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.btn__spin { display: none; width: 13px; height: 13px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; }
.btn.is-loading .btn__spin { display: block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Nav ───────────────────────────────────────────────────── */
/* Separated from the page by surface, not a rule. */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(242,242,242,.92); backdrop-filter: blur(10px); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; }

/* Wordmark — guide §02. Two-tone is part of the logo:
   "Mobile" in Ink, "Messenger" in Message Red. Never one colour. */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; }
.wordmark__img { height: 45px; width: auto; }  /* long lockup min 40px (guide §02) */

.nav__menu { display: flex; align-items: center; gap: var(--space-3); }
.nav__menu a:not(.btn) {
  font: 500 var(--text-caption)/1 var(--font-body); letter-spacing: .04em;
  color: var(--color-ink); text-decoration: none; padding: var(--space-1) 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.nav__menu a:not(.btn):hover { border-bottom-color: var(--color-ink); }

.nav__toggle { display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: none; border: 1.5px solid var(--color-clay); border-radius: var(--radius-sm); cursor: pointer; }
.nav__bars { display: grid; gap: 5px; }
.nav__bars i { display: block; width: 20px; height: 2px; background: var(--color-ink); border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) var(--ease-out); }
.nav__toggle[aria-expanded="true"] .nav__bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars i:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { padding: var(--space-8) 0 var(--space-12); }
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.hero .display { margin: var(--space-2) 0 var(--space-3); }
.hero__lede { color: var(--color-ink); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-4); }
.hero__note { margin-top: var(--space-3); }

/* ── SIGNATURE: in-context ad placement ────────────────────
   Guide §05 — "the ad placement earns the only red on screen:
   a red keyline, a red AD tag, and a red action button."
   Built from the system: Porcelain surface, Clay message bars,
   Ink bars. Illustration, never a screenshot. ─────────────── */
/* Roomier gap so the format switcher isn't crammed against the phone. */
.placement { display: grid; gap: var(--space-4); }

/* Reset the fieldset: the UA border and legend notch were showing
   through as a stray box around the controls. */
.switcher { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* As a flex item with flex-basis 100% the legend takes its own row —
   no float needed, and it keeps its native <legend> semantics. */
.switcher__label { flex-basis: 100%; padding: 0; margin: 0 0 var(--space-1); }
.switcher input { position: absolute; opacity: 0; pointer-events: none; }
.switcher label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2);
  background: var(--color-white); border: 1.5px solid var(--color-clay); border-radius: var(--radius-sm);
  font: 500 var(--text-caption)/1 var(--font-body); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.switcher label:hover { border-color: var(--color-stone); }
.switcher input:checked + label { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-porcelain); }
.switcher input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* The phone. Corner radius 25% of height for phone-like containers. */
.phone {
  position: relative; width: 100%; max-width: 320px; margin-inline: auto;
  aspect-ratio: 320 / 620;
  background: var(--color-ink); border-radius: 44px; padding: 10px;
  box-shadow: var(--shadow-lg);
}
.phone__screen {
  height: 100%; background: var(--color-porcelain); border-radius: 36px; overflow: hidden;
  display: flex; flex-direction: column;
}
.phone__chrome { padding: var(--space-1) var(--space-2) 0; display: flex; justify-content: space-between; }
.phone__chrome span { height: 6px; width: 34px; background: var(--color-clay); border-radius: var(--radius-pill); }

.page { flex: 1; padding: var(--space-2); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.page__head { height: 12px; width: 62%; background: var(--color-ink); border-radius: var(--radius-pill); }
/* Rounded-end message bars in Clay — the brand texture. */
.bar { height: 8px; background: var(--color-clay); border-radius: var(--radius-pill); }
.bar--80 { width: 80%; } .bar--95 { width: 95%; } .bar--60 { width: 60%; } .bar--70 { width: 70%; }
.page__card { background: var(--color-white); border-radius: var(--radius-sm); padding: 10px; display: grid; gap: 8px; }

/* The placement itself — the only red in this view. */
.slot {
  position: relative; width: 100%;
  border: 2px solid var(--color-red); border-radius: var(--radius-sm);
  background: var(--color-white); display: grid; place-items: center;
  transition: aspect-ratio var(--duration-base) var(--ease-out);
}
.slot[data-format="320x50"]  { aspect-ratio: 320 / 50; }
.slot[data-format="300x250"] { aspect-ratio: 300 / 250; }
.slot__tag {
  position: absolute; top: -1px; left: -1px;
  background: var(--color-red); color: var(--color-white);
  font: 700 10px/1 var(--font-body); letter-spacing: .08em;
  padding: 4px 6px; border-radius: var(--radius-sm) 0 var(--radius-sm) 0;
}
/* Absolutely positioned so the slot's height is governed strictly by
   aspect-ratio — content must never push the format out of true. */
.slot__inner { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 8px; }
.slot__logo { height: 10px; width: 54px; background: var(--color-ink); border-radius: var(--radius-pill); flex: none; }
.slot__line { height: 6px; width: 68%; background: var(--color-clay); border-radius: var(--radius-pill); flex: none; }

/* 320×50 is a horizontal strip. Lay it out as one, and drop a line. */
.slot[data-format="320x50"] .slot__inner { flex-direction: row; gap: 8px; padding: 6px 8px; }
.slot[data-format="320x50"] .slot__logo { height: 8px; width: 34px; }
.slot[data-format="320x50"] .slot__line { flex: 1; width: auto; }
/* Guide §05 reference: red keyline + red AD tag + red action button.
   These three read as ONE red moment — the placement — not three. */
.slot__cta  { font: 700 9px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-white); background: var(--color-red); padding: 5px 8px; border-radius: var(--radius-sm); }
/* Class-based, not :nth-of-type — every child here is a <span>, so
   nth-of-type counted spans rather than lines and hid the wrong one. */
.slot[data-format="320x50"] .slot__line + .slot__line { display: none; }

.placement__meta { display: flex; justify-content: space-between; gap: var(--space-2); }

/* ── Feature rows ──────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-3); }
.card {
  background: var(--color-white); border-radius: var(--radius-sm);
  padding: var(--space-3); display: grid; gap: var(--space-1); align-content: start;
}
.section--white .card { background: var(--color-porcelain); }
.section--ink .card { background: rgba(242,242,242,.06); }
.card p { color: var(--color-ink); font-size: var(--text-base); }
.section--ink .card p { color: var(--color-clay); }
.card__mark { width: 28px; height: 8px; background: var(--color-clay); border-radius: var(--radius-pill); }
.section--ink .card__mark { background: var(--color-stone); }

.band__head { max-width: 56ch; margin-bottom: var(--space-6); display: grid; gap: var(--space-2); }

/* ── Embedded builder ──────────────────────────────────────
   Framed as a product window: Ink chrome bar over the live
   tool, 8px radius, no hard rules.

   Embedded at every width. The tool is responsive in its own
   right — below 768px it swaps the phone-in-page view for the
   ad unit plus its controls, which is the right thing to show
   on a phone. Hidden only until JS confirms a demo URL. */
.builder { display: none; margin: 0 0 var(--space-4); }
.builder.is-live { display: block; }
.builder.is-live ~ .builder-alt { display: none; }

.builder__chrome {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2); min-height: 44px;
  background: var(--color-ink); color: var(--color-porcelain);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font: 500 var(--text-caption)/1 var(--font-body);
}
.builder__dot { width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-red); flex: none; }
.builder__label { font-weight: 600; }
.builder__origin { color: var(--color-stone); }
.builder__pop {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--color-porcelain); text-decoration: none;
  border-bottom: 1.5px solid transparent;
}
.builder__pop:hover { border-bottom-color: var(--color-porcelain); }

/* The stage carries the border and clips the scaled render. Its height is
   set by JS to the scaled builder height, so the page reserves the right space. */
.builder__stage {
  position: relative; overflow: hidden;
  border: 1.5px solid var(--color-ink); border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--color-bone);
}
.builder__scaler { transform-origin: top left; }
/* Default (and mobile / no-JS): builder fills width at its native layout.
   JS overrides width/height/transform on desktop to the scaled 1440px render. */
.builder__frame { display: block; width: 100%; height: 760px; border: 0; }

/* ── Builder fallback ──────────────────────────────────────
   Stands in wherever the frame can't render properly. */
.builder-alt {
  margin-bottom: var(--space-4); padding: var(--space-4);
  background: var(--color-bone); border-radius: var(--radius-sm);
  display: grid; gap: var(--space-3);
}
.builder-alt__body { display: grid; gap: var(--space-1); }
.builder-alt__body p { max-width: 52ch; }
.builder-alt__action { display: grid; gap: var(--space-2); justify-items: start; }

/* Cards follow the proof rather than precede it. */
.grid--after { margin-top: var(--space-6); }

@media (min-width: 900px) {
  .demo { grid-template-columns: 1.4fr auto; gap: var(--space-8); padding: var(--space-6); }
  .demo__action { justify-items: end; text-align: right; }
}

/* ── Results ───────────────────────────────────────────────
   Composed rather than stacked: the claim is drawn, not just
   asserted, and market context is visibly secondary to it. */
.results { display: grid; gap: var(--space-6); }
.results__head { margin-bottom: 0; }
/* The two metric groups (click-through, then market context) stack in the
   right column, both in the same bar styling. */
.results__metrics { display: grid; gap: var(--space-8); }

/* The gauge — the product claim, shown. */
.gauge { margin: 0; display: grid; gap: var(--space-3); }
.gauge__caption {
  font: 500 var(--text-caption)/1 var(--font-body);
  letter-spacing: var(--tracking-button); text-transform: uppercase;
  color: var(--color-clay);
}
.gauge__row { display: grid; gap: var(--space-1); }
.gauge__key {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  font-size: var(--text-base); color: var(--color-clay);
}
.gauge__key b {
  font: 800 var(--text-h1)/1 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--color-porcelain);
}

/* Rounded-end track — the brand texture at scale. */
.gauge__track {
  position: relative; height: 18px; border-radius: var(--radius-pill);
  background: rgba(242,241,234,.10); overflow: hidden;
}
.gauge__fill {
  position: absolute; inset-block: 0; left: 0; width: 0;
  border-radius: var(--radius-pill);
  transition: width var(--duration-slow) var(--ease-spring) var(--d);
}
.gauge__fill--base   { background: var(--color-stone); }
/* Red as a filled shape is the sanctioned use of red on Ink (guide §03). */
.gauge__fill--range  { background: rgba(195,35,19,.42); }
.gauge__fill--solid  { background: var(--color-red); }

/* Bars draw in when the section arrives. */
.reveal.is-in .gauge__fill { width: var(--w); }

.gauge__note {
  font: 400 var(--text-caption)/var(--leading-caption) var(--font-body);
  color: var(--color-stone);
}

/* ── Partner band (secondary audience) ─────────────────────── */
.split { display: grid; gap: var(--space-6); align-items: start; }
.list { display: grid; gap: var(--space-2); }
.list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: start; }
.list .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-stone); margin-top: 8px; }

/* ── Form ──────────────────────────────────────────────────── */
.form { display: grid; gap: var(--space-2); max-width: 26rem; }
.field { display: grid; gap: var(--space-1); }
.field label { font: 500 var(--text-caption)/1 var(--font-body); letter-spacing: .04em; color: var(--color-muted); }
.field input, .field select {
  min-height: 48px; padding: 0 var(--space-2);
  background: var(--color-white); color: var(--color-ink);
  border: 1.5px solid var(--color-clay); border-radius: var(--radius-sm);
  font: 400 var(--text-base)/1 var(--font-body);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.field input::placeholder { color: var(--color-stone); }
.field input:hover, .field select:hover { border-color: var(--color-stone); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--color-ink); }
.field input[aria-invalid="true"] { border-color: var(--color-red); }
.field input[disabled], .field select[disabled] { opacity: .5; cursor: not-allowed; background: var(--color-bone); }
.field__err { font: 500 var(--text-caption)/var(--leading-caption) var(--font-body); color: var(--color-red); }

.form__status { font: 500 var(--text-caption)/1.5 var(--font-body); min-height: 1.2rem; }
.form__status.is-ok  { color: var(--color-ink); }
.form__status.is-err { color: var(--color-red); }

/* ── Footer ────────────────────────────────────────────────── */
.foot { background: var(--color-ink); color: var(--color-on-ink); padding: var(--space-6) 0; }
.foot__inner { display: grid; gap: var(--space-3); }
/* Master lockup carries its own colour; clear space on all sides equals the
   height of the red ad block in the mark (guide §02). */
.foot__logo { height: 44px; width: auto; }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.foot__nav a { font: 500 var(--text-caption)/1 var(--font-body); color: var(--color-porcelain); text-decoration: none;
  border-bottom: 1.5px solid transparent; padding-bottom: 2px; }
.foot__nav a:hover { border-bottom-color: var(--color-porcelain); }
.foot__fine { font: 400 var(--text-caption)/1.5 var(--font-body); color: var(--color-stone); }

/* ── Offline notice ────────────────────────────────────────── */
.offline {
  position: fixed; left: 50%; bottom: var(--space-2); transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: var(--space-1);
  background: var(--color-ink); color: var(--color-porcelain);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  font: 500 var(--text-caption)/1.4 var(--font-body); box-shadow: var(--shadow-lg);
  max-width: calc(100% - 2rem);
}
.offline__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-stone); flex: none; }
/* MUST come after the display:flex rule. A class selector outranks the UA
   stylesheet's [hidden] { display: none }, so without this the banner stays
   visible even with the hidden attribute set. */
.offline[hidden] { display: none; }

/* ── Reveal ────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--duration-slow) var(--ease-out) var(--d),
              transform var(--duration-slow) var(--ease-spring) var(--d);
}

/* ── Breakpoints ───────────────────────────────────────────── */
@media (max-width: 899px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch;
    gap: var(--space-1); padding: var(--space-2) 1rem var(--space-3);
    background: var(--color-porcelain); box-shadow: var(--shadow-md); display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a:not(.btn) { min-height: 44px; display: flex; align-items: center; }
  .foot__nav { flex-direction: column; gap: 0; }
  .foot__nav a { min-height: 44px; display: flex; align-items: center; }
}

@media (min-width: 640px) {
  .grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .builder-alt__action { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* Narrative on the left; both metric groups stacked on the right. */
  .results {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start; gap: var(--space-6) var(--space-12);
  }

  .section { padding: var(--space-16) 0; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-12); }
  /* The phone was centring inside its column while the switcher and
     caption were left-aligned to it — 99px out, which read as an
     accident. Share the column's left edge instead. */
  .placement .phone { margin-inline: 0; }
  .grid  { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .foot__inner { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6); }
  .foot__nav { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-PAGE ADDITIONS
   Components introduced when the single page became Home / About /
   Product / Contact. All reuse the existing tokens and stay within
   the one-red-moment-per-view discipline.
   ═══════════════════════════════════════════════════════════════ */

/* ── Active nav state ──────────────────────────────────────── */
.nav__menu a[aria-current="page"]:not(.btn) {
  color: var(--color-ink); border-bottom-color: var(--color-ink);
}
.foot__nav a[aria-current="page"] { border-bottom-color: var(--color-porcelain); }

/* Leverage Lab links → leveragelab.com. Ink/inherit with a soft underline,
   never red — a red link in every footer/eyebrow would break the
   one-red-moment discipline. color:inherit adapts to any surface (stone
   eyebrow, ink heading, porcelain footer). */
.ll {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
.ll:hover { text-decoration-color: currentColor; }

/* Lead header at the top of a page carries a display-size heading. */
.band__head--lead { max-width: 40ch; }
.band__head--lead .display { margin: var(--space-2) 0 var(--space-3); }

/* ── Home pillar cards (link cards) ────────────────────────── */
/* Flex column so the arrow-link can be pushed to the bottom of every card;
   since the cards are equal height (grid row), the links then line up. */
.card--link { position: relative; display: flex; flex-direction: column; }
.card__link {
  margin-top: auto; padding-top: var(--space-2); align-self: start;
  font: 500 var(--text-caption)/1 var(--font-mono, var(--font-body));
  letter-spacing: .04em; color: var(--color-ink); text-decoration: none;
  border-bottom: 1.5px solid var(--color-clay); padding-bottom: 2px;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.card--link:hover .card__link { border-bottom-color: var(--color-ink); }
/* Whole card is the target. */
.card--link .card__link::after { content: ""; position: absolute; inset: 0; }

/* ── CTA band ──────────────────────────────────────────────── */
.cta-band {
  display: grid; gap: var(--space-4);
  padding: var(--space-6); background: var(--color-bone);
  border-radius: var(--radius-sm); align-items: center;
}
.cta-band__body { display: grid; gap: var(--space-2); }
.cta-band__body .lede { max-width: 46ch; }
.cta-band__action { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Reach: inventory field ────────────────────────────────── */
.reach { display: grid; gap: var(--space-6); align-items: center; }
.reach__lead { display: grid; gap: var(--space-3); }
.reach__facts { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-2) 0 0; }
.reach__facts dd { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--text-base); max-width: 22ch; }
.reach__fig { font: 800 var(--text-display)/1 var(--font-display); letter-spacing: var(--tracking-display); }
/* A field of small circles: dense Clay dots are the app inventory, and a
   sparse Ink scatter is "your ad, running". Square cells keep the dots
   circular (they were ellipses before). Ink not red, so the section's one
   red stays on the headline word. A caption spells out the meaning. */
.reach__viz { display: grid; gap: var(--space-2); }
.reach__field {
  aspect-ratio: 5 / 4; border-radius: var(--radius-sm); overflow: hidden;
  background-color: var(--color-white);
  background-image:
    radial-gradient(var(--color-ink) 6%, transparent 8%),     /* your ad — sparse */
    radial-gradient(var(--color-clay) 22%, transparent 27%);  /* the inventory — dense */
  background-size: 115px 115px, 23px 23px;
  background-position: 46px 34px, 0 0;
  box-shadow: inset 0 0 0 1.5px var(--color-clay);
}
.reach__key { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.reach__key span { display: inline-flex; align-items: center; gap: var(--space-1); }
.reach__key i { width: 10px; height: 10px; border-radius: var(--radius-pill); flex: none; }
.reach__key .is-app { background: var(--color-clay); }
.reach__key .is-ad  { background: var(--color-ink); width: 12px; height: 12px; }

/* ── Targeting: layered signals + meter ────────────────────── */
.targeting { display: grid; gap: var(--space-6); align-items: start; }
.targeting__lead { display: grid; gap: var(--space-3); }

.layers { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.layers__legend { padding: 0; margin-bottom: var(--space-1); }
.layer {
  display: flex; align-items: flex-start; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2);
  background: var(--color-white); border: 1.5px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.layer:hover { border-color: var(--color-clay); }
.layer__input { position: absolute; opacity: 0; width: 0; height: 0; }
.layer__box {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--color-stone); border-radius: 5px;
  background: var(--color-white); position: relative;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.layer__input:checked + .layer__box { background: var(--color-ink); border-color: var(--color-ink); }
.layer__input:checked + .layer__box::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--color-porcelain); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.layer__input:focus-visible + .layer__box { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.layer__text { font-size: var(--text-base); line-height: 1.4; color: var(--color-ink); }
.layer__text b { font-weight: 700; }

.meter {
  margin: 0; padding: var(--space-3); background: var(--color-white);
  border-radius: var(--radius-sm); display: grid; gap: var(--space-2); align-content: start;
}
.meter__caption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.meter__state { font: 700 var(--text-h2)/1 var(--font-display); letter-spacing: -0.01em; }
.meter__count { font: 500 var(--text-caption)/1 var(--font-body); color: var(--color-stone); }
.meter__track { height: 18px; border-radius: var(--radius-pill); background: var(--color-bone); overflow: hidden; }
.meter__fill {
  display: block; height: 100%; width: 100%;
  background: var(--color-ink); border-radius: var(--radius-pill);
  transition: width var(--duration-slow) var(--ease-spring);
}
.meter__scale { display: flex; justify-content: space-between; gap: var(--space-2);
  font: 500 var(--text-caption)/1 var(--font-body); color: var(--color-stone); }
.meter__note { margin-top: var(--space-1); }

/* ── Formats: filled red ad units in a simple phone outline ──
   Both phones the same size, so the ad-block heights read as a
   true-scale comparison. The filled red units carry the section's
   red moment. */
.formats { display: grid; gap: var(--space-8); justify-items: center; }
.fmt { margin: 0; display: grid; gap: var(--space-3); justify-items: center; }

.fmt__phone {
  /* Explicit width, not 100% — the parent .fmt is display:grid with an auto
     column, so a percentage would resolve to content width and make the two
     phones unequal. 210px fixed keeps both identical; capped for tiny screens. */
  width: 210px; max-width: 100%; aspect-ratio: 210 / 430;
  background: var(--color-white); border: 2px solid var(--color-ink);
  border-radius: 28px; padding: 18px 12px 14px;
  display: flex; flex-direction: column; gap: 9px; position: relative; overflow: hidden;
}
.fmt__notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 5px; border-radius: var(--radius-pill); background: var(--color-clay);
}
/* Faint article lines for context — the brand's message-bar texture. */
.fmt__line { height: 6px; border-radius: var(--radius-pill); background: var(--color-clay); flex: none; }
.fmt__line--95 { width: 95%; } .fmt__line--80 { width: 80%; } .fmt__line--60 { width: 60%; }
.fmt__spacer { flex: 1 1 auto; } /* pushes the banner to the bottom */

/* The ad unit — filled Message Red, at true aspect ratio. */
.fmt__ad {
  position: relative; width: 100%; flex: none;
  background: var(--color-red); color: #fff; border-radius: 6px; overflow: hidden;
  display: flex; padding: 9px;
}
.fmt__ad[data-format="300x250"] {
  aspect-ratio: 300 / 250; flex-direction: column; justify-content: space-between; gap: 6px;
}
.fmt__ad[data-format="320x50"] {
  aspect-ratio: 320 / 50; flex-direction: row; align-items: center; gap: 6px; padding: 5px 7px;
}
/* AD tag: white on red here (the unit itself is red), so it stays legible. */
.fmt__tag {
  position: absolute; top: 0; left: 0; background: #fff; color: var(--color-red);
  font: 700 8px/1 var(--font-body); letter-spacing: .08em; padding: 3px 5px;
  border-radius: 0 0 5px 0;
}
.fmt__adlogo { width: 26px; height: 11px; background: #fff; border-radius: 2px; flex: none; }
.fmt__adline { height: 5px; background: rgba(255,255,255,.75); border-radius: var(--radius-pill); }
.fmt__ad[data-format="300x250"] .fmt__adline { width: 72%; }
.fmt__ad[data-format="320x50"]  .fmt__adline { flex: 1; }
.fmt__adcta {
  background: var(--color-ink); color: #fff;
  font: 700 7px/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 3px; white-space: nowrap; flex: none;
}
.fmt__ad[data-format="300x250"] .fmt__adcta { align-self: flex-end; }

.fmt__cap { font-size: var(--text-base); color: var(--color-muted); text-align: center; }
.fmt__cap b { color: var(--color-ink); font-weight: 700; }

/* ── About: prose, timeline, mission, family ───────────────── */
.prose { max-width: 62ch; margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.prose p { font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-ink); }
.ink-em { font-style: normal; font-weight: 600; }

.timeline { display: grid; gap: var(--space-4); counter-reset: none; }
.tstep {
  position: relative; padding: var(--space-3);
  background: var(--color-white); border-radius: var(--radius-sm);
  display: grid; gap: var(--space-1);
}
.tstep__rail { display: block; width: 32px; height: 4px; border-radius: var(--radius-pill); background: var(--color-clay); }
.tstep--now .tstep__rail { background: var(--color-red); }
.tstep__year { font: 500 var(--text-caption)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-stone); }
.tstep__title { font: 700 var(--text-h2)/1.1 var(--font-display); letter-spacing: -0.01em; }
.tstep__body { color: var(--color-muted); font-size: var(--text-base); }

.mission { display: grid; gap: var(--space-4); }
.mission__lead { display: grid; gap: var(--space-2); }
.mission__body { max-width: 60ch; color: var(--color-clay); }

.family { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.family__brand {
  padding: var(--space-3); background: var(--color-porcelain);
  border-radius: var(--radius-sm); display: grid; gap: var(--space-1); align-content: start;
}
.family__brand--this { background: var(--color-white); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.family__mark { width: 28px; height: 8px; border-radius: var(--radius-pill); background: var(--color-clay); }
.family__brand--this .family__mark { background: var(--color-red); }
.family__brand p { color: var(--color-muted); font-size: var(--text-base); }

/* ── Contact: details ──────────────────────────────────────── */
.details { display: grid; gap: var(--space-4); margin: 0; }
.details__item dt { font: 500 var(--text-caption)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-stone); }
.details__item dd { margin: var(--space-1) 0 0; font: 600 var(--text-lg, 1.25rem)/1.2 var(--font-display); }
.details__item a { color: var(--color-ink); text-decoration: none; border-bottom: 1.5px solid var(--color-clay); }
.details__item a:hover { border-bottom-color: var(--color-ink); }

/* ── Multi-page responsive ─────────────────────────────────── */
@media (min-width: 640px) {
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .family   { grid-template-columns: repeat(3, 1fr); }
  .details  { grid-template-columns: repeat(3, 1fr); }
  /* Two phones as a centred, top-aligned pair. Fixed 210px tracks so both
     phones are identical — auto tracks sized to content ("Contact us" vs
     "Go") and made them unequal. */
  .formats  { grid-template-columns: repeat(2, 210px); justify-content: center;
              align-items: start; gap: var(--space-16); }
}
@media (min-width: 900px) {
  .cta-band  { grid-template-columns: 1fr auto; gap: var(--space-8); padding: var(--space-8) var(--space-6); }
  .reach     { grid-template-columns: 1.05fr .95fr; gap: var(--space-12); }
  .targeting { grid-template-columns: 5fr 7fr; gap: var(--space-12); }
  .mission   { grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: start; }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}