/* Advertised landing page, v3 (professional B2B). Direction and tokens:
   docs/landing/DESIGN.md. No inline styles: the CSP is default-src 'self'. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-wdth-wght.woff2") format("woff2-variations"),
       url("fonts/archivo-wdth-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #FBFCFD;
  --surface: #FFFFFF;
  --subtle: #F1F4F7;
  --panel: #0F1B2D;
  --text: #0F1B2D;
  --muted: #536175;
  --line: #D5DBE3;
  --field-border: #7B8798;
  --on-panel: #E9EEF4;
  --on-panel-muted: #A4B0C0;
  --accent: #0A6B4F;          /* ledger green: CTA, links, handed-over cells */
  --accent-hover: #08563F;
  --on-accent: #FFFFFF;
  --accent-soft: #E6F2ED;
  --flag: #8A4B00;            /* placeholders */
  --error: #B42318;
  --focus: #0F1B2D;

  --font: "Archivo", Arial, sans-serif;
  --fs-label: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-table: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.625rem, 1vw + 1.25rem, 2rem);
  --fs-hero: clamp(2.125rem, 2.4vw + 1.2rem, 3.375rem);

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 6rem;

  --radius-control: 6px;
  --radius-panel: 10px;

  color-scheme: light;
  --tile: #FFFFFF;
  --picker-bg: #FFFFFF;
  --picker-text: #0F1B2D;
  --picker-line: #D5DBE3;
  --picker-hover: #F1F4F7;
  --picker-accent: #0A6B4F;
  --band: #0F1B2D;
  --handed: #0F1B2D;
  --ring: rgb(10 107 79 / 0.18);
  --shadow: 0 1px 2px rgb(15 27 45 / 0.06), 0 8px 24px -12px rgb(15 27 45 / 0.16);
}

/* Dark tokens apply for Auto on a dark OS, and for an explicit Dark choice.
   data-theme is set server-side from the `theme` cookie (see theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1320;
    --surface: #142033;
    --subtle: #101A2A;
    --panel: #142033;
    --text: #E9EEF4;
    --muted: #A4B0C0;
    --line: #24324A;
    --accent: #5CC9A3;
    --accent-hover: #7AD6B6;
    --on-accent: #0F1B2D;
    --accent-soft: #10302A;
    --flag: #F2C46D;
    --error: #FF8A80;
    --focus: #5CC9A3;
    --band: #142033;
    --handed: #10302A;
    --picker-bg: #142033;
    --picker-text: #E9EEF4;
    --picker-line: #2E3D57;
    --picker-hover: #1C2A40;
    --picker-accent: #5CC9A3;
    --ring: rgb(92 201 163 / 0.28);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1320;
  --surface: #142033;
  --subtle: #101A2A;
  --panel: #142033;
  --text: #E9EEF4;
  --muted: #A4B0C0;
  --line: #24324A;
  --accent: #5CC9A3;
  --accent-hover: #7AD6B6;
  --on-accent: #0F1B2D;
  --accent-soft: #10302A;
  --flag: #F2C46D;
  --error: #FF8A80;
  --focus: #5CC9A3;
  --band: #142033;
  --handed: #10302A;
  --picker-bg: #142033;
  --picker-text: #E9EEF4;
  --picker-line: #2E3D57;
  --picker-hover: #1C2A40;
  --picker-accent: #5CC9A3;
  --ring: rgb(92 201 163 / 0.28);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0; }

a { color: var(--accent); text-underline-offset: 0.2em; }

::selection { background: var(--accent-soft); color: var(--text); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  left: var(--s3);
  top: -4rem;
  z-index: 10;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-control);
}
.skip-link:focus { top: var(--s3); }

/* ---------- Header and footer ---------- */
.site-header { border-bottom: 1px solid var(--line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 4rem;
}

.theme-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--subtle);
}

.theme-switch[hidden] { display: none; }

.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  min-width: 2.25rem;
  justify-content: center;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.theme-switch button:hover { color: var(--text); }

.theme-switch button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(15 27 45 / 0.12);
}

.theme-switch svg { flex: none; }

@media (max-width: 30rem) {
  .theme-switch button { padding: 0 0.5rem; }
  .theme-switch__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  color: var(--text);
  text-decoration: none;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Mark: two bars of unequal length, budget split between channels. */
.wordmark__led {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 3px;
  background:
    linear-gradient(var(--accent), var(--accent)) 3px 3px / 4px 12px no-repeat,
    linear-gradient(var(--bg), var(--bg)) 11px 8px / 4px 7px no-repeat,
    var(--text);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s5);
  color: var(--muted);
  font-size: var(--fs-small);
}

.site-footer__inner { display: grid; gap: var(--s2); }

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-weight: 600;
}

@media (min-width: 56rem) {
  .site-footer__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s5);
    align-items: start;
  }
}

/* ---------- Buttons and form ---------- */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 var(--s4);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(15 27 45 / 0.2);
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.button-primary:hover { background: var(--accent-hover); }
.button-primary:active { box-shadow: inset 0 1px 2px rgb(15 27 45 / 0.25); }

.waitlist { display: grid; gap: var(--s3); }
.waitlist__fields { display: grid; gap: var(--s3); }
.field { display: grid; gap: var(--s1); align-content: start; }
.field label { font-size: var(--fs-small); font-weight: 600; }

.field input,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: 0 0.85rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.field input,
.field select { transition: border-color 120ms ease, box-shadow 120ms ease; }

.field input:hover,
.field select:hover { border-color: var(--text); }

.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px var(--ring);
}

/* ---------- Select ("Monthly ad spend") ---------- */
/* Closed state, all browsers: custom chevron on a wrapper (a <select> can't
   have ::after), muted placeholder until a range is picked. The chevron is a
   mask so it takes the theme colour; data: URIs would be blocked by the CSP. */
.select { position: relative; display: block; }

.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.85rem;
  width: 1rem;
  height: 1rem;
  translate: 0 -50%;
  background-color: var(--muted);
  mask: url("chevron-down.svg") center / contain no-repeat;
  pointer-events: none;
  transition: rotate 150ms ease;
}

.select:hover::after { background-color: var(--text); }

.field select {
  appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  text-overflow: ellipsis;
}

/* Required + empty value = still showing "Choose a range". */
.field select:invalid { color: var(--muted); }
.field select option { color: var(--picker-text); background: var(--picker-bg); }

/* Open state, where styleable selects exist (Chrome/Edge 135+): a designed
   option panel. Other browsers keep their native list. */
@supports (appearance: base-select) {
  .field select,
  .field select::picker(select) { appearance: base-select; }

  .field select { display: flex; align-items: center; }
  .field select::picker-icon { display: none; }
  .select:has(select:open)::after { rotate: 180deg; }

  .field select::picker(select) {
    /* Chrome's default opens on whichever side has more room (often up).
       Prefer below, and flip only when it doesn't fit. */
    position-try-order: normal;
    margin-block: 0.375rem;
    padding: 0.3125rem;
    border: 1px solid var(--picker-line);
    border-radius: var(--radius-panel);
    background: var(--picker-bg);
    color: var(--picker-text);
    box-shadow: var(--shadow);
  }

  .field select option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-control);
    cursor: pointer;
  }

  /* The placeholder isn't a choice. */
  .field select option[value=""] { display: none; }

  .field select option:hover,
  .field select option:focus-visible {
    background: var(--picker-hover);
    outline: none;
  }

  .field select option:checked { font-weight: 600; }

  .field select option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--picker-accent);
    font-weight: 700;
  }
}

.field [aria-invalid="true"] { border: 2px solid var(--error); }

.field__error {
  color: var(--error);
  font-size: var(--fs-small);
  font-weight: 600;
}

.waitlist__note { color: var(--muted); font-size: var(--fs-small); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s4) var(--s6); }

/* Mobile order: copy and form, then logos, then the table. */
.hero__grid {
  display: grid;
  grid-template-areas: "copy" "platforms" "table";
  gap: var(--s4) var(--s5);
}

.hero__copy { grid-area: copy; }
.hero__aside { display: contents; }
.hero__platforms { grid-area: platforms; }
.handover { grid-area: table; }

.hero__copy { display: grid; gap: var(--s4); align-content: start; }

.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.hero__sub {
  max-width: 36rem;
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem);
  color: var(--muted);
}

/* ---------- Handover table (signature device) ---------- */
.handover {
  align-self: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.handover__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-table);
  line-height: 1.45;
}

.handover__table caption {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: left;
  caption-side: top;
}

.handover__table thead th {
  padding: var(--s2) var(--s4);
  background: var(--subtle);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: left;
}

.handover__table tbody tr + tr { border-top: 1px solid var(--line); }

.handover__table tbody th,
.handover__table td {
  padding: var(--s3) var(--s4);
  text-align: left;
  vertical-align: top;
}

.handover__table tbody th { font-weight: 600; }

@media (min-width: 40rem) {
  .handover__table { table-layout: fixed; }
  .handover__table thead th:nth-child(1) { width: 36%; }
  .handover__table thead th:nth-child(2) { width: 28%; }
  .handover__table thead th:nth-child(3) { width: 36%; }
  .handover__table tbody th,
  .handover__table td { padding-inline: var(--s3); }
  .handover__table thead th { padding-inline: var(--s3); }
}
.handover__table td { color: var(--muted); }

/* The column the page argues for: Advertised takes these over. */
.handover__table thead th:last-child,
.handover__table td.is-handed,
.handover__table td.is-kept {
  background: var(--accent-soft);
}
.handover__table thead th:last-child {
  color: var(--text);
  box-shadow: inset 0 2px 0 var(--accent);
}
.handover__table td.is-handed { color: var(--text); font-weight: 600; }
.handover__table td.is-kept { color: var(--text); }

/* Mobile: each row becomes a labelled block. */
@media (max-width: 39.99rem) {
  .handover__table thead { display: none; }
  .handover__table tbody,
  .handover__table tr,
  .handover__table tbody th,
  .handover__table td { display: block; }
  .handover__table tbody th { padding-bottom: var(--s2); }
  .handover__table td { padding-block: var(--s2); }
  .handover__table td:last-child { padding-bottom: var(--s3); }
  .handover__table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: var(--fs-label);
    font-weight: 600;
  }
}

/* ---------- Platform logos (inside the hero, so they're in the first view) ---------- */
.platforms { display: grid; gap: var(--s2); }

.platforms__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--muted);
}

.platforms__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* White tiles so official full-colour logos sit on a neutral background. */
.logo-tile {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s1);
  min-height: 3rem;
  padding: 0.375rem var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--tile);
  color: #0F1B2D;
  text-align: center;
}

.logo-tile img {
  display: block;
  width: 100%;
  max-width: 6.5rem;
  height: 1.75rem;
  object-fit: contain;
}

.logo-tile__name { font-weight: 600; }

.logo-tile__note {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #8A4B00;
}

/* ---------- Loop: by hand vs with Advertised ---------- */
.loop { padding-block: var(--s6); }

.loop h2 { max-width: 26ch; }

.loop__grid {
  display: grid;
  margin-top: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.loop__col {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: var(--s5) var(--s4);
}

.loop__col ol {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.loop__col li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--s2);
}

.loop__col li::before {
  content: counter(step);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.loop__col--manual { background: var(--surface); color: var(--muted); }
.loop__col--manual h3 { color: var(--text); }

.loop__col--auto {
  background: var(--handed);
  color: #E9EEF4;
  --focus: #5CC9A3;
  --accent: #5CC9A3;
  --accent-hover: #7AD6B6;
  --on-accent: #0F1B2D;
}
.loop__col--auto li::before { color: #5CC9A3; }
.loop__col--auto .button-primary { justify-self: start; margin-top: var(--s3); }

/* ---------- Proof placeholders ---------- */
.proof { padding-block: var(--s5) var(--s6); }

.proof__slots { display: grid; gap: var(--s3); margin-top: var(--s4); }

.placeholder { color: var(--flag); font-weight: 600; }

.proof__slots .placeholder {
  padding: var(--s4);
  border: 1px dashed var(--flag);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

/* ---------- FAQ ---------- */
.faq { padding-block: var(--s5) var(--s7); }

.faq__inner { display: grid; gap: var(--s4); }

.faq__list { border-top: 1px solid var(--line); max-width: 50rem; }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  min-height: 3.5rem;
  padding-block: var(--s3);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  color: var(--muted);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
}

.faq summary:hover { color: var(--accent); }
.faq details[open] summary::after { content: "\2212"; color: var(--accent); }

.faq details p { padding-bottom: var(--s4); max-width: 42rem; color: var(--muted); }

/* ---------- Closing CTA ---------- */
.closing {
  background: var(--band);
  border-top: 1px solid var(--line);
  color: #E9EEF4;
  --text: #E9EEF4;
  --muted: #A4B0C0;
  --focus: #5CC9A3;
  --accent: #5CC9A3;
  --accent-hover: #7AD6B6;
  --on-accent: #0F1B2D;
  --error: #FF8A80;
  --field-border: #A4B0C0;
  --surface: #FFFFFF;
}

.closing__grid { display: grid; gap: var(--s5); padding-block: var(--s6); }
.closing__grid > div { display: grid; gap: var(--s3); align-content: start; }
.closing p { color: #A4B0C0; }
/* Fields stay white on the navy band, so they use the light field palette. */
.closing .field input,
.closing .select {
  --text: #0F1B2D;
  --muted: #536175;
  --picker-bg: #FFFFFF;
  --picker-text: #0F1B2D;
  --picker-line: #D5DBE3;
  --picker-hover: #F1F4F7;
  --picker-accent: #0A6B4F;
}

/* ---------- Notice pages (joined, rate limited) ---------- */
.notice { padding-block: var(--s7); min-height: 55vh; }
.notice .wrap { display: grid; gap: var(--s3); }
.notice h1 { font-size: var(--fs-hero); max-width: 18ch; }

/* ---------- Breakpoints ---------- */
@media (min-width: 40rem) {
  .loop__grid { grid-template-columns: 1fr 1fr; }
  .loop__col { padding: var(--s5); }
}

@media (min-width: 56rem) {
  .waitlist__fields {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
    align-items: start;
  }
  .waitlist__fields .button-primary { margin-top: calc(0.875rem * 1.6 + var(--s1)); }
}

@media (min-width: 64rem) {
  /* Desktop: the hero fills the viewport below the header (4rem + 1px
     border) and centres its content, so the next section starts below the
     fold instead of showing a half-cut heading. */
  .hero {
    display: grid;
    align-content: center;
    min-height: calc(100svh - 4rem - 1px);
    padding-block: var(--s5);
  }
  /* Copy on the left; table with the logos under it on the right. Both
     columns are centred against each other. */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy aside";
    gap: var(--s6);
    align-items: center;
  }
  .hero__aside {
    grid-area: aside;
    display: grid;
    gap: var(--s4);
  }
  .hero__aside > * { grid-area: auto; }
  .closing__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .faq__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
}

/* Beside the table the hero form is too narrow for one row: fields on one
   row, button below. */
@media (min-width: 64rem) {
  .hero .waitlist__fields { grid-template-columns: 1fr 1fr; }
  .hero .waitlist__fields .button-primary { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
}

/* Small phones (360px): tighten the hero so the logo row stays in the first view. */
@media (max-width: 23rem) {
  .hero { padding-top: var(--s3); }
  .hero__grid { row-gap: var(--s3); }
  .hero__copy { gap: var(--s3); }
  .waitlist__fields { gap: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button-primary,
  .theme-switch button,
  .field input,
  .field select { transition: none; }
}