/* ============================================================
   InBooked design tokens
   Light page, dark anchor sections. Apple-adjacent: generous
   whitespace, restrained type, high contrast, almost no ornament.
   ============================================================ */
:root {
  /* Light surfaces (the page default) */
  --bg: #FFFFFF;
  --alt: #F4F4F5;
  --border: #E4E4E7;
  --ink: #18181B;
  --ink-2: #52525B;
  --accent: #6D48D7;      /* 5.9:1 on white. The only accent on light. */
  --accent-ink: #FFFFFF;

  /* Dark anchor sections. Applied via .dark, never globally. */
  --d-bg: #0D0D0D;
  --d-ink: #FFFFFF;
  --d-ink-2: #9A9A9A;
  --d-border: #262626;
  --d-accent: #A78BFA;    /* 7.2:1 on #0D0D0D. Never used on white. */

  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-num: 'Outfit', sans-serif;

  /* Type scale. Deliberately short: nothing needs a viewport
     scroll to clear a single heading. */
  --fs-hero: clamp(1.75rem, 5.4vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 3vw, 2rem);
  --fs-h3: clamp(1.05rem, 1.7vw, 1.25rem);
  --fs-body: clamp(0.9375rem, 1.15vw, 1.0625rem);
  --fs-lede: clamp(1rem, 1.4vw, 1.1875rem);
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;
  --fs-num: clamp(1.75rem, 4.6vw, 3rem);

  --wrap: 1120px;
  --pad: clamp(1.25rem, 5vw, 2rem);
  --section-y: clamp(2.25rem, 8vw, 6.5rem);
  --r: 12px;
  --r-sm: 8px;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
strong, b { font-weight: 600; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.dark :focus-visible { outline-color: var(--d-accent); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ============================================================
   Primitives
   ============================================================ */
/* One rhythm everywhere. Sections used to carry three different
   padding values, which is what left stray runs after the shorter
   ones. Every section now opens and closes on the same measure. */
.section { padding-block: var(--section-y); }

/* Dark anchor sections. Only three of these on the page:
   the proof band, the receipts, and the footer. */
.dark {
  background: var(--d-bg);
  color: var(--d-ink-2);
}
.dark h1, .dark h2, .dark h3, .dark strong, .dark b { color: var(--d-ink); }
.dark .label { color: var(--d-accent); }
.dark .lede { color: var(--d-ink-2); }
.dark a:not(.btn):not(.logo) { color: var(--d-accent); }

.label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.875rem;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.sec-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sec-head .lede { margin-top: 1rem; }

.num {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: var(--fs-num);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dark .num { color: var(--d-ink); }

/* Buttons. 48px min height clears the 44px minimum tap target
   with room for the 12px inter-control padding. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.btn--solid {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--solid:hover { background: #5B3AB8; }
.dark .btn--solid { background: var(--d-accent); color: #16121F; }
.dark .btn--solid:hover { background: #BCA6FB; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--alt); }

/* Inline text link */
.tlink {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}
.dark .tlink { color: var(--d-accent); }

/* ============================================================
   Motion. One 150ms opacity fade on section entry, nothing else.
   The .js gate means the page renders fully visible without
   JavaScript: no content is reachable only through animation.
   ============================================================ */
.js .fade { opacity: 0; }
.js .fade.in { opacity: 1; transition: opacity 150ms linear; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fade, .js .fade.in { opacity: 1; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Nav. Light bar, hairline bottom border. Replaces the floating
   dark pill, which overlapped and clipped the heading behind it.
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
}
@media (min-width: 860px) {
  .nav__inner { min-height: 60px; }
}
.logo {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.dark .logo { color: var(--d-ink); }
.logo .dot { color: var(--accent); }
.dark .logo .dot { color: var(--d-accent); }

.nav__links {
  display: none;
  list-style: none;
  gap: 1.75rem;
  margin-inline: auto;
}
.nav__links a {
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav__links a:hover { color: var(--ink); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Compact in width, but never under the 44px tap-target floor. */
.nav .btn {
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
}

/* Mobile section menu. A native <details> so it needs no JavaScript and
   opens instantly: the four anchors are the only way a phone visitor can
   reach the proof, and they were absent entirely. */
.navmenu { position: relative; }
.navmenu summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.navmenu summary::-webkit-details-marker { display: none; }
.navmenu summary:hover { background: var(--alt); }

/* Three bars, drawn rather than shipped as an icon file. */
.navmenu__bars,
.navmenu__bars::before,
.navmenu__bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
}
.navmenu__bars { position: relative; }
.navmenu__bars::before,
.navmenu__bars::after { content: ""; position: absolute; left: 0; }
.navmenu__bars::before { top: -5px; }
.navmenu__bars::after { top: 5px; }

.navmenu[open] .navmenu__bars { background: transparent; }
.navmenu[open] .navmenu__bars::before { top: 0; transform: rotate(45deg); }
.navmenu[open] .navmenu__bars::after { top: 0; transform: rotate(-45deg); }

.navmenu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 110;
  min-width: 11rem;
  list-style: none;
  padding: 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 8px 24px -12px rgba(24, 24, 27, 0.25);
}
.navmenu__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
}
.navmenu__list a:hover { background: var(--alt); }

@media (min-width: 860px) {
  .nav__links { display: flex; }
  .navmenu { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding-top: clamp(1.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(1.5rem, 4vw, 3.5rem);
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.875rem;
  line-height: 1.4;
}
.hero h1 {
  max-width: 950px;
  margin-bottom: clamp(0.875rem, 2vw, 1.375rem);
}
.hero__sub {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ============================================================
   Proof band. Dark block one. Sits directly under the hero and
   must be reachable without scrolling at 360px.
   ============================================================ */
.proofband { padding-block: clamp(1.25rem, 3.5vw, 2.5rem); }
.proofband__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 2vw, 2rem);
}
.proofband__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.proofband__n {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(1.5rem, 6.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}
.proofband__l {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--d-ink-2);
}
.proofband__src {
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
  padding-top: clamp(0.875rem, 2vw, 1.125rem);
  border-top: 1px solid var(--d-border);
  font-size: 0.75rem;
  color: var(--d-ink-2);
}
.proofband__src a { color: var(--d-accent); text-underline-offset: 3px; }

/* Inline links that sit alone at the end of a block are real tap
   targets on a phone. Padding lifts them to the 44px minimum; the
   negative margin keeps them from pushing the layout around. */
.proofband__src a,
.testi figcaption .tlink,
.cap .tlink,
.crumb a {
  display: inline-block;
  padding-block: 0.875rem;
  margin-block: -0.625rem;
}


@media (min-width: 560px) {
  .proofband__l { font-size: 0.8125rem; }
}

/* ============================================================
   Shared helpers
   ============================================================ */
.section--alt { background: var(--alt); }
.dot { color: var(--accent); }
.dark .dot { color: var(--d-accent); }

/* Small print. Honesty signals ("Illustrative") use this and are
   placed with the thing they qualify, never at the end of a scroll. */
.cap {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 0.75rem;
}
.cap--lead { margin-top: 1rem; max-width: 60ch; }
.dark .cap { color: var(--d-ink-2); }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Problem
   ============================================================ */
.problem h2 { max-width: 22ch; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.problem__grid { display: grid; gap: 1.125rem; max-width: 62ch; }
.problem__grid p { font-size: var(--fs-lede); line-height: 1.6; color: var(--ink-2); }

/* ============================================================
   How it works: three parts
   ============================================================ */
.part {
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--border);
}
/* Between-step spacing is deliberately about double the largest gap inside
   a step, so the rule reads as a boundary rather than another row. */
.part + .part { margin-top: clamp(2.5rem, 5vw, 3.75rem); }

.part__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* A wrapped flex container defaults to align-content:stretch. Stretched
     to a grid row's height, that distributed the two lines (number+heading,
     then the intro paragraph) across the whole column and parked the intro
     at the bottom, which put it below the right column's first paragraph in
     reading order. Pack to the top instead. */
  align-content: flex-start;
  column-gap: 0.875rem;
  row-gap: 0;
  margin-bottom: 1.125rem;
}
/* The number stays on the heading's first line at every width. Without
   these, a long heading like "Give them somewhere to land" cannot fit
   beside the number and wraps to its own flex line, so step 02 aligned
   differently from 01 and 03. */
.part__n { flex: 0 0 auto; }
.part__head h3 { flex: 1 1 0; min-width: 0; }
/* Sits in the left column under the heading on desktop; breaks to its own
   line on mobile, where the head is still a flex row. */
.part__intro {
  flex-basis: 100%;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
  margin-top: 1.125rem;   /* 18px: normal paragraph spacing under the heading */
}
.part__n {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.part__head h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }

.part__body { max-width: 64ch; display: grid; align-content: start; gap: 1.125rem; }
/* Cap the measure. The column is 657px wide to fit step 03's question
   grid, which is wider than a comfortable line length for prose. */
.part__body > p { max-width: 620px; }
.part__body p { color: var(--ink-2); }

@media (min-width: 900px) {
  /* align-items:start so neither column stretches: the row height follows
     the taller column and the shorter one is never padded to match. */
  .part { display: grid; grid-template-columns: 19rem 1fr; gap: 3rem; align-items: start; }
  .part__head { margin-bottom: 0; }
}

/* Ad mockup. Static: no reveal, no drag demo. */
.admock {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
  max-width: 22rem;
}
.admock picture { display: block; }
.admock img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 260px;
}
@media (min-width: 760px) { .admock img { max-height: 340px; } }
.admock__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--border);
}
.admock__txt { font-size: var(--fs-small); color: var(--ink); line-height: 1.4; }
.admock__cta {
  flex: none;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--alt);
  color: var(--ink);
  border: 1px solid var(--border);
}

/* Qualifying questions, both verticals side by side */
.qgrid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .qgrid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

.qcol__h {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.75rem;
  /* Heavier than the dividers below it, so the label anchors the column. */
  border-bottom: 1px solid #D4D4D8;
}
.qlist { list-style: none; }
.qlist li {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.qlist li:last-child { border-bottom: 0; }

/* The chat is a second, separate idea from the question columns. A full
   width rule plus a generous gap keeps the two from reading as one long
   stack, which is what made this step cluttered before. */
.qchat {
  margin-top: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* Narrower than the two question columns combined, so the bubbles read as
   messages rather than full width boxes. */
.chat {
  display: grid;
  gap: 0.375rem;
  max-width: 480px;
  justify-items: start;
}
.bub {
  max-width: 80%;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r);
  font-size: var(--fs-small);
  line-height: 1.45;
}
/* Scoped under .chat: `.part__body p` is (0,1,1) and would otherwise
   outrank a bare `.bub--out`, repainting the outgoing text secondary grey
   on purple. */
.chat .bub--in {
  background: var(--alt);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat .bub--out {
  background: var(--accent);
  color: #fff;
  justify-self: end;
  border-bottom-right-radius: 4px;
}
.chat__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-2);
  justify-self: end;
}
.chat__meta--in { justify-self: start; }

/* ============================================================
   Receipts (dark)
   ============================================================ */
.figs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
  padding-block: clamp(0.5rem, 2vw, 1rem);
}
@media (min-width: 760px) { .figs { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

.fig { display: flex; flex-direction: column; gap: 0.5rem; }
.fig__n {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(1.625rem, 5vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}
.fig__l { font-size: var(--fs-small); color: var(--d-ink-2); line-height: 1.35; }

.receipt-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--d-border);
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}
.receipt-cta p { color: var(--d-ink-2); max-width: 52ch; }

@media (min-width: 760px) {
  .receipt-cta {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
  }
}

/* ============================================================
   The month. Nine chips grouped under four week labels.

   This was full-width rows, which stretched the section over
   about three viewports and left a wide gap between each spec
   and its value. The point of the section is the rhythm of
   bookings across a month, and that only lands if all four
   weeks are visible at once, so each booking is now a pill
   sized to its own content.

   Name and value sit on the first line and the spec runs
   underneath, which keeps the pill narrow enough that two or
   three sit side by side. Day-of-week labels are gone: they
   added a column and the week grouping already carries the
   timing.
   ============================================================ */
.month {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.wk__h {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.75rem;
}

/* Wrap, never a fixed width: the chips find their own rhythm as
   the viewport narrows, down to one per line on a phone. */
/* A grid, not flex: content-sized flex items gave every week a
   different chips-per-row count and a ragged right edge. Equal
   columns and equal heights across all four weeks. */
.wk__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 12px;
}
@media (min-width: 800px) {
  .wk__list { grid-template-columns: repeat(3, 1fr); }
}

.chip {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-content: start;
  align-items: baseline;
  column-gap: 1.25rem;
  row-gap: 2px;
  padding: 10px 14px;
  background: var(--bg);
  /* Hairline intent; Blink rounds this up to 1px. See .pcard. */
  border: 0.5px solid var(--border);
  border-radius: var(--r);
}
.chip__name {
  grid-column: 1;
  grid-row: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.chip__val {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip__spec {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ============================================================
   The filter
   ============================================================ */
.nolist {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
}
.nolist li {
  position: relative;
  padding: 0.75rem 1rem 0.75rem 2.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.45;
}
/* A dash, not a colour-only cue: the meaning survives without colour. */
.nolist li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.35em;
  width: 10px;
  height: 1px;
  background: var(--ink-2);
}
@media (min-width: 700px) { .nolist { grid-template-columns: 1fr 1fr; gap: 0.625rem 1rem; } }

/* ============================================================
   Niche
   ============================================================ */
.refuse {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.refuse li {
  font-size: var(--fs-small);
  padding: 0.5rem 0.875rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-color: var(--ink-2);
}
.refuse .keep {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}

/* ============================================================
   Compare. Six rows. Stacks into paired rows on mobile so it
   never scrolls sideways.
   ============================================================ */
.cmp { width: 100%; border-collapse: collapse; }
.cmp thead { display: none; }
.cmp tr { display: block; padding: 0.625rem 0; border-bottom: 1px solid var(--border); }
.cmp tr:first-child { border-top: 1px solid var(--border); }
.cmp th[scope="row"] {
  display: block;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.375rem;
}
.cmp td {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.125rem 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-2);
}
.cmp td::before {
  content: attr(data-l);
  /* nowrap and a basis wide enough for "TYPICAL AGENCY": at a narrower
     basis the label itself wrapped to two lines, which is what made
     every second cell 15px taller than the first. */
  flex: 0 0 6rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.6;
}
/* Baseline-aligning a 14px empty box puts its bottom edge on the text
   baseline and inflates the line box by ~15px per cell. Centre it. */
.cmp td .mk { flex: none; display: inline-block; align-self: center; }


@media (min-width: 760px) {
  .cmp thead { display: table-header-group; }
  .cmp tr { display: table-row; padding: 0; border-bottom: 1px solid var(--border); }
  .cmp tr:first-child { border-top: 0; }
  .cmp thead th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 0 1rem 0.875rem 0;
    border-bottom: 1px solid var(--border);
  }
  .cmp th[scope="row"] {
    display: table-cell;
    margin: 0;
    padding: 1rem 1.5rem 1rem 0;
    vertical-align: middle;
    width: 32%;
  }
  .cmp td {
    display: table-cell;
    padding: 1rem 1rem 1rem 0;
    vertical-align: middle;
    width: 34%;
  }
  .cmp td::before { content: none; }
}

/* Tick and cross drawn in CSS, marked aria-hidden. The text beside
   them already carries the meaning, so colour is never the only cue. */
.mk {
  width: 14px; height: 14px;
  margin-right: 0.5rem;
  vertical-align: -2px;
  position: relative;
}
.mk--y::before, .mk--y::after,
.mk--n::before, .mk--n::after {
  content: ""; position: absolute; background: currentColor;
}
.mk--y { color: var(--accent); }
.mk--y::before { width: 5px; height: 1.5px; transform: rotate(45deg); left: 1px; top: 8px; }
.mk--y::after { width: 10px; height: 1.5px; transform: rotate(-50deg); left: 3px; top: 6px; }
.mk--n { color: #8A8A94; }
.mk--n::before { width: 12px; height: 1.5px; transform: rotate(45deg); top: 6px; left: 1px; }
.mk--n::after { width: 12px; height: 1.5px; transform: rotate(-45deg); top: 6px; left: 1px; }

/* ============================================================
   Clients
   ============================================================ */
.testi {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
/* 9:16 portrait ran to 565px tall and dominated a section whose
   message is the caption beside it. Height-capped; width follows. */
.testi__v {
  width: auto;
  max-width: 100%;
  max-height: 380px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--alt);
  aspect-ratio: 480 / 848;
}
@media (min-width: 760px) {
  .testi__v { max-height: 420px; }
}
.testi figcaption { display: grid; gap: 0.375rem; align-content: start; }
.testi figcaption strong { font-size: var(--fs-body); color: var(--ink); }
.testi figcaption span { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }

@media (min-width: 760px) {
  .testi { grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; }
}

.logos { padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--border); }
.logos__row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}
/* Sources are white ink on transparent, made for the old dark page.
   Inverted here so they read as dark marks on white. */
.logos__row picture { display: block; }
/* Sized by height, not width. Width-based sizing let the wide marks
   cover several times the area of the square ones at the same nominal
   size. Mac Realities sits smaller because it carries fine sub-text
   that reads heavy at the same cap height. */
.logos__row img {
  height: var(--lh, 40px);
  width: auto;
  max-width: 100%;
  opacity: var(--lo, 0.6);
  filter: invert(1);
}

/* ============================================================
   The offer
   ============================================================ */
/* Three cards under the three named parts. The flat seven-item
   list explained the bundle but had no scan layer, so a prospect
   had to read all seven to know what they were buying. Headings
   are the scan layer; the lines under them are the detail. */
.pcards {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
@media (min-width: 800px) {
  .pcards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
/* Equal height regardless of how many lines each card carries. */
.pcards { align-items: stretch; }

.pcard {
  background: var(--bg);
  /* Declared as a hairline. Blink rounds border-width up to a whole device
     pixel at every DPR, so this renders as 1px in Chrome; it is here as the
     intent, not as something the engine honours. For a genuinely finer line,
     lighten the colour rather than shrinking the width. */
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3.5vw, 2rem);
}
.pcard__h {
  font-size: var(--fs-h3);
  margin-bottom: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border);
}
.pcard__list { list-style: none; display: grid; gap: 0.875rem; }
.pcard__list li {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.cards { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
.card h3 { font-size: var(--fs-h3); }
.card p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }

.scoped { display: grid; gap: 1.25rem; justify-items: start; }
.scoped p { font-size: var(--fs-lede); color: var(--ink); max-width: 48ch; }

@media (min-width: 760px) {
  .scoped { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
}

/* ============================================================
   Custom solutions. Deliberately quiet: an upsell note, not a
   second business.
   ============================================================ */
/* Half the usual tight spacing. Floating in a large gap read as an
   orphan rather than a deliberate aside. */
.section--aside { padding-block: clamp(1.25rem, 3vw, 2.25rem); }
/* The close section carries a full section's top padding, which left the
   aside stranded across a ~138px run. Scoped to this pairing only, so the
   closing CTA keeps its usual spacing everywhere else. */
.section--aside + .close { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); }

.custom {
  max-width: 620px;
  /* Left aligned, not centred: the accent rule sits on the same content
     edge as every heading, eyebrow and the nav wordmark, which is what
     makes it read as a deliberate aside rather than a stray card. */
  padding: clamp(1.25rem, 3vw, 1.5rem);
  background: var(--alt);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--accent);
  /* Square on the accent side: a rounded corner cut by a single-sided
     rule reads as a rendering fault. */
  border-radius: 0 var(--r) var(--r) 0;
}
.custom .label { margin-bottom: 0.5rem; color: var(--accent); }
.custom p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }

/* ============================================================
   Close
   ============================================================ */
.close__ctas { margin-top: clamp(1.5rem, 3vw, 2rem); }
.close .lede { margin-top: 1rem; }

/* ============================================================
   Footer (dark block 3)
   ============================================================ */
footer { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.foot { display: grid; gap: 1rem; }
.foot p { font-size: var(--fs-small); color: var(--d-ink-2); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot__nav a {
  font-size: var(--fs-small);
  color: var(--d-ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.foot__nav a:hover { color: var(--d-ink); }

@media (min-width: 760px) {
  .foot {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
  }
}

/* ============================================================
   Case study page
   ============================================================ */
.crumb {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  margin-bottom: 1.25rem;
  letter-spacing: 0.04em;
}
.crumb a {
  color: var(--accent);
  text-decoration: none;
}
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb span { padding-inline: 0.375rem; }

/* Ads Manager screenshot. Inline at a readable width, tappable to
   open the file at full resolution. */
.shot { margin-top: clamp(2rem, 4vw, 3rem); }
.shot__link {
  display: block;
  border: 1px solid var(--d-border);
  border-radius: var(--r);
  overflow: hidden;
  background: #141414;
}
.shot__link img { width: 100%; height: auto; }
.shot figcaption {
  margin-top: 1rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--d-ink-2);
  max-width: 62ch;
}
.shot figcaption strong { display: block; color: var(--d-ink); margin-bottom: 0.25rem; }
.shot__tap {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-accent);
}

/* Methodology */
.method { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 68ch; }
.method__row { display: grid; gap: 0.625rem; }
.method__row h3 { font-size: var(--fs-h3); }
.method__row p { color: var(--ink-2); line-height: 1.6; }

@media (min-width: 900px) {
  .method__row {
    grid-template-columns: 16rem 1fr;
    gap: 0.625rem 2.5rem;
    align-items: start;
  }
  .method__row h3 { grid-row: span 3; }
  .method { max-width: none; }
  .method__row p { max-width: 62ch; }
}

/* Mobile type scale. Kept in a media query rather than in the clamp
   minimums so desktop resolves byte-identically to before. */
@media (max-width: 899px) {
  :root { --fs-body: 1rem; }          /* 16px */
  body { line-height: 1.6; }
  .part__head h3 { font-size: 1.375rem; }   /* 22px step headings */
  .pcard__list li { font-size: 15px; }
}