/* LandingQA marketing site
   Values mirror the Claude Design prototype (LandingQA Landing Page.dc.html).
   The prototype carried everything as inline styles; here they are tokens and
   component rules, and the prototype's `style-hover` attributes become real
   :hover rules. Its `data-m` responsive helpers collapse at 1100px — that
   breakpoint and those behaviours are preserved below. */

:root {
  --bg: #080813;
  --panel: #120f2c;
  --panel-deep: #0d0b20;
  --panel-inset: #0c0b1c;
  --line: #29224b;
  --line-soft: #221c42;
  --line-inner: #2b2450;
  --line-dashed: #3a3364;
  --line-mute: #6d6690;
  --sketch: #4b4470;

  --cream: #faf7f1;
  --cream-card: #fdfbf7;
  --white: #fff;
  --cream-line: #e2dbcc;
  --cream-line-2: #ded7c8;
  --cream-line-3: #e4ded1;
  --cream-line-4: #eee7da;
  --cream-line-5: #e6e0d3;
  --cream-fill: #e9e4d9;

  --ink: #14121f;
  --ink-2: #3f3a4d;
  --ink-3: #4a4557;
  --ink-4: #5f5a6b;
  --ink-5: #6b6580;

  --paper: #f6f4ef;
  --paper-2: #e8e5f2;
  --paper-3: #c3bfd4;
  --paper-4: #b9b4cc;
  --paper-5: #cfcbdd;
  --paper-6: #a49fb5;
  --paper-7: #9a94a8;
  --paper-8: #8d879f;

  --orange: #f4603c;
  --orange-hi: #ff7350;
  --orange-deep: #c14a2a;
  --teal: #1f9d94;
  --teal-2: #2a9d94;
  --teal-bright: #4ecdc0;
  --teal-badge-bg: #cfe9e6;
  --teal-badge-ink: #0f5f59;
  --teal-badge-dark: #153c38;
  --violet-badge-bg: #e3ddf4;
  --violet-badge-ink: #3b2f6b;
  --brandmock: #2e1b6b;
  --green: #12a05f;
  --amber: #f0a91b;

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 14px;
  --shell: 1360px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--orange); }
::placeholder { color: var(--paper-7); }

h1, h2, h3 { font-family: var(--serif); letter-spacing: -0.01em; }

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

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 32px;
}

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

/* ---------- shared surfaces ---------- */

.card-cream {
  background: var(--cream);
  border-radius: var(--radius);
  color: var(--ink);
}

.card-dark {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card-deep {
  background: var(--panel-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.eyebrow {
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  margin: 0 0 14px;
}

.step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.badge {
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 4px;
}
.badge-measured { background: var(--teal-badge-bg); color: var(--teal-badge-ink); }
.badge-measured-dark { background: var(--teal-badge-dark); color: var(--teal-bright); }
.badge-sm { font-size: 10.5px; letter-spacing: 0.07em; padding: 4px 8px; }
.badge-inferred { background: var(--violet-badge-bg); color: var(--violet-badge-ink); }
.badge-inferred-dark { background: #2e2457; color: #c8baff; }
.badge-observed-dark { background: #4d3210; color: #ffd080; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 700;
  text-align: center;
}

.btn-primary { background: var(--orange-deep); color: var(--white); }
.btn-primary:hover { background: #a93e23; color: var(--white); }

.btn-ghost {
  border: 1px solid var(--line-mute);
  color: var(--paper);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

.note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--cream-line-3);
  border-radius: 8px;
  padding: 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-3);
}
.note-center { align-items: center; justify-content: center; gap: 8px; padding: 9px; font-size: 13px; }
.note-teal {
  background: #e9f3f2;
  border-color: #cfe4e1;
  color: #26404a;
  padding: 12px;
}
.note svg, .note-center svg { flex: none; }

.mock {
  border: 1px solid var(--cream-line-2);
  border-radius: 8px;
  background: var(--white);
}

.bar { height: 4px; background: var(--cream-fill); display: block; }

.crop { border: 1.5px dashed var(--orange); border-radius: 6px; padding: 8px; }

/* ---------- nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 0;
}

.brand {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 44px;
  font-size: 16px;
}

.nav-links a { color: var(--paper-2); }
.nav-links a:hover { color: var(--orange); }

.nav-cta {
  background: var(--orange-deep);
  color: var(--white);
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
}
.nav-cta:hover { background: #a93e23; color: var(--white); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr minmax(560px, 660px) 1fr;
  align-items: center;
  gap: 24px;
  padding: 26px 0 10px;
}

.hero-art { opacity: 0.85; }
.hero-body { text-align: center; }

.hero h1 {
  font-weight: 800;
  font-size: 60px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.hero-sub {
  margin: 0 auto 26px;
  max-width: 600px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--paper-3);
}

.scan-form {
  display: flex;
  gap: 14px;
  align-items: stretch;
  justify-content: center;
}

.scan-field {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: 12px;
  padding: 0 18px;
  flex: 1;
  max-width: 390px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.scan-field svg { flex: none; }

.scan-field input {
  border: 0;
  outline: 0;
  padding: 18px 0;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--ink);
  width: 100%;
  background: transparent;
}

.scan-submit {
  border-radius: 12px;
  padding: 0 34px;
  font-size: 19px;
  box-shadow: 0 12px 40px rgba(244, 96, 60, 0.28);
}

.hero-meta {
  display: flex;
  gap: 26px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 16px;
  flex-wrap: wrap;
}

.hero-meta a { font-weight: 600; font-size: 15px; }

.reassure {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  max-width: 330px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--paper-6);
}
.reassure svg { margin-top: 2px; flex: none; }

.kicker {
  text-align: center;
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  margin: 14px 0 18px;
}

/* ---------- 5-step pipeline ---------- */

.pipeline {
  padding: 40px 32px 32px;
  margin-bottom: 22px;
}

.pipeline-close {
  max-width: 900px;
  margin: 30px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--cream-line-3);
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.pipeline-grid {
  display: grid;
  grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr 26px 1fr;
  gap: 6px;
  align-items: stretch;
}

.pipeline-grid > .step { border-right: 1px solid var(--cream-line-3); padding-right: 18px; }
.pipeline-grid > .step:last-child { border-right: 0; padding-right: 0; }

.step-head {
  display: flex;
  /* Not center: "Correction proposal" wraps to two lines and centring dropped
     its dot 13px below the other four. Align to the first line instead. */
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.step-head b {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
}

/* optical centre against the first line: (19 * 1.35 - 24) / 2 */
.step-head .step-dot { margin-top: 1px; }

.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--ink);
}

.wire-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  color: var(--ink-5);
  margin-bottom: 8px;
}
.wire-head b { font-size: 9px; color: var(--ink); }

.pill-mock {
  background: var(--brandmock);
  color: var(--white);
  padding: 2px 6px;
  border-radius: 3px;
}

.finding-title { font-weight: 700; font-size: 15px; margin-bottom: 5px; }
.finding-label { font-weight: 700; font-size: 13.5px; }
.finding-body { margin: 2px 0 12px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

.diff-remove {
  border: 1px solid #f1c6b8;
  border-radius: 6px 6px 0 0;
  background: #fdf1ee;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: #b5442a;
  line-height: 1.5;
}

.diff-add {
  border: 1px solid var(--cream-line-2);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #f2f1ec;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: #2f3a33;
  line-height: 1.5;
}

.compare-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--cream-line-4);
}
.compare-row:last-child { border-bottom: 0; }

.compare-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--white);
  font-weight: 800;
}

.compare-row b { display: block; font-size: 14px; }
.compare-row .sub { font-size: 12.5px; color: var(--ink-4); }
.chev { color: var(--paper-7); }

/* ---------- feature pair ---------- */

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 26px;
}

.feature {
  padding: 30px;
  display: flex;
  gap: 24px;
}

.feature-orb {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.feature h3 { font-weight: 700; font-size: 26px; margin: 0 0 10px; }

.feature p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.feature-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.feature-point {
  display: flex;
  gap: 11px;
  align-items: center;
  font-size: 13.5px;
  line-height: 1.4;
}
.feature-point svg { flex: none; }

/* ---------- scope strip ---------- */

.scope {
  display: flex;
  gap: 34px;
  justify-content: center;
  align-items: center;
  padding: 6px 0 46px;
  color: var(--paper-3);
  font-size: 15px;
}
.scope span { display: flex; gap: 10px; align-items: center; }
.scope .sep { color: #3a3358; }

/* ---------- lenses ---------- */

.section-cream-lg {
  padding: 40px 36px;
  margin-bottom: 22px;
}

.section-title {
  font-weight: 800;
  font-size: 42px;
  text-align: center;
  margin: 0 0 12px;
}

.section-lede {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 30px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.lenses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lens {
  border: 1px solid var(--cream-line);
  border-radius: 10px;
  background: var(--cream-card);
  padding: 16px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.lens-orb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--white);
}

.lens b { display: block; font-size: 17px; margin-bottom: 3px; }
.lens .sub { font-size: 13.5px; color: var(--ink-3); }

/* ---------- measured vs inferred ---------- */

.split { padding: 36px; margin-bottom: 22px; }

.split h2 {
  font-weight: 800;
  font-size: 38px;
  text-align: center;
  margin: 0 0 28px;
}

.split-grid {
  display: grid;
  grid-template-columns: 210px 1fr 210px 1fr;
  gap: 22px;
  align-items: center;
}

.split-card {
  border: 1px solid var(--line-inner);
  border-radius: 10px;
  padding: 22px;
}

.split-card .label {
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 19px;
  margin-bottom: 10px;
}
.split-card .label.measured { color: var(--teal-bright); }
.split-card .label.inferred { color: var(--orange); }

.split-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper-5);
}

.split-foot {
  text-align: center;
  margin: 26px 0 0;
  font-size: 14px;
  color: var(--paper-6);
}

/* ---------- example report ---------- */

.band { padding: 56px 0 0; }

.band-head {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: center;
  margin-bottom: 26px;
}

.band-head h2 {
  font-weight: 800;
  font-size: 54px;
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}

.band-head p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--paper-3);
  max-width: 520px;
  text-wrap: pretty;
}

.report {
  background: var(--cream);
  border-radius: var(--radius);
  color: var(--ink);
  overflow: hidden;
}

.report-flag {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px 24px 16px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.13em;
}

.report-body { padding: 4px 24px 24px; }

.report-block { padding: 18px 0 0; }

.report-block + .report-block { border-top: 1px solid var(--cream-line); margin-top: 22px; }

.report-block-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  margin: 0 0 16px;
  text-transform: uppercase;
}

.shots {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 26px;
  align-items: start;
}

.shot-group { min-width: 0; }

.shot-label {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 13.5px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.shot-label svg { flex: none; }

.shot { padding: 12px; margin-bottom: 0; }

.mobile-pair {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px;
  align-items: start;
}

.confidence {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #eaf4f3;
  border: 1px solid #cfe4e1;
  border-radius: 8px;
  padding: 12px;
  font-size: 12.5px;
  line-height: 1.4;
}
.confidence svg { flex: none; }

.report-more {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--cream-line);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.report-more:hover { color: var(--ink-2); }
.report-more .go { font-weight: 700; color: var(--teal-badge-ink); white-space: nowrap; }
.report-more:hover .go { color: var(--orange); }

.table-head {
  display: grid;
  grid-template-columns: 1.1fr 1.15fr 1fr 1fr;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 18px 0 12px;
  border-bottom: 1px solid var(--cream-line);
}

/* pad the cells, not the container, so the header's column edges line up
   with the rows below it */
.table-head > span { padding: 0 16px; min-width: 0; }

.table-row {
  display: grid;
  grid-template-columns: 1.1fr 1.15fr 1fr 1fr;
  border-bottom: 1px solid var(--cream-line);
}
.table-row:last-child { border-bottom: 0; }
/* Each row is its own grid, so a long unbreakable value in one cell resolved
   that row's fr tracks differently from every other row — row 3's evidence
   column took 314px against 191px in rows 1 and 2, and the dividers stopped
   lining up. min-width:0 pins every row to the same ratio. */
.table-row > div {
  padding: 18px 16px;
  border-right: 1px solid var(--cream-line);
  min-width: 0;
}
.table-row > div:last-child { border-right: 0; }

.rank {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.rank span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.rank b { font-size: 14.5px; line-height: 1.35; }

.evidence-label {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: 9px;
}
.evidence-label svg { flex: none; margin-top: 1px; }

.cell-action {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.45;
}
.cell-action svg { flex: none; }

.fix-orb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Label above value, not beside it: a 62px key left ~77px for the URL in this
   column and broke it into four fragments. Stacked, it gets the full width. */
.url-rows { padding: 10px; font-size: 11px; line-height: 1.5; }
.url-rows > div { margin-bottom: 8px; }
.url-rows > div:last-child { margin-bottom: 0; }
.url-rows .key {
  display: block;
  color: var(--ink-4);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.url-rows .val { display: block; color: #0f766e; font-family: var(--mono); overflow-wrap: anywhere; }

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--panel-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 34px;
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: 230px 1fr auto auto;
  gap: 28px;
  align-items: center;
}

.cta-band h3 {
  font-weight: 800;
  font-size: 34px;
  margin: 0 0 8px;
}

.cta-band p { margin: 0; font-size: 15px; color: var(--paper-4); }

.cta-band a.btn-primary,
.cta-band a.btn-ghost {
  font-size: 19px;
  border-radius: 10px;
}
.cta-band a.btn-primary { padding: 20px 40px; }
.cta-band a.btn-ghost { padding: 20px 36px; font-weight: 600; }

/* ---------- how it works ---------- */

.how {
  padding: 44px 36px;
  margin: 56px 0 22px;
}

.how h2 { font-weight: 800; font-size: 44px; text-align: center; margin: 0 0 12px; }

.how-lede {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 34px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.how-grid {
  display: grid;
  grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr;
  gap: 8px;
  /* stretch so each column shares the row height and the mock below it has
     free space to centre in */
  align-items: stretch;
}

.how-grid > div:not(.arrow) {
  display: flex;
  flex-direction: column;
}

/* One- and two-line subs otherwise started the mocks 16px apart. */
.how-step-sub { min-height: 36px; }

/* Headings stay pinned at the top; the mocks centre in what is left. */
.how-grid > div:not(.arrow) > .mock {
  margin-top: auto;
  margin-bottom: auto;
}

/* Matches the heading block height, so the arrow centres on the mocks
   rather than on the full column. */
.how-arrow { padding-top: 78px; }

.how-step-head {
  display: flex;
  gap: 10px;
  /* same latent bug: these labels wrap on mobile */
  align-items: flex-start;
  margin-bottom: 4px;
}
.how-step-head b { font-size: 17px; line-height: 1.4; }

.how-step-sub { margin: 0 0 14px 34px; font-size: 13px; color: var(--ink-3); }

.dots { display: flex; gap: 4px; margin-bottom: 10px; }
.dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--cream-line-2); }

.fake-input {
  border: 1px solid var(--cream-line-3);
  border-radius: 5px;
  padding: 7px 9px;
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 10px;
  color: var(--ink-5);
  margin-bottom: 10px;
}

/* Optional context fields — what turns an Instant Audit into a Contextual one. */
.ctx-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.ctx-field {
  display: flex;
  gap: 8px;
  align-items: baseline;
  border: 1px solid var(--cream-line-3);
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 10px;
  line-height: 1.3;
}

.ctx-field .k {
  color: var(--ink-5);
  flex: none;
  width: 46px;
}

.ctx-field .v { color: var(--ink); font-weight: 600; }

.fake-cta {
  background: var(--orange-deep);
  color: var(--white);
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  padding: 10px;
  border-radius: 6px;
}

.capture-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cream-line-4);
}
.capture-row:last-child { border-bottom: 0; }
.capture-row .ic { width: 26px; color: var(--ink-2); display: flex; justify-content: center; }
.capture-row b { display: block; font-size: 13px; }
.capture-row .sub { font-size: 11.5px; color: var(--ink-4); }
.capture-row .yield {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  background: var(--cream-fill);
  border-radius: 4px;
  padding: 4px 8px;
  white-space: nowrap;
}

.ready-card { padding: 16px; }
.ready-card .title { font-family: var(--serif); font-weight: 700; font-size: 19px; margin-bottom: 10px; }
.ready-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 13px;
}
.ready-check:last-child { margin-bottom: 0; }
.ready-check svg { flex: none; }
.ready-check .sub { color: var(--ink-4); font-size: 12px; }

.locked-preview { padding: 12px; display: flex; gap: 10px; }
.locked-rail {
  width: 22px;
  background: var(--panel-deep);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 5px;
}
.locked-rail span { height: 3px; background: #3c3564; }
.locked-lines { flex: 1; position: relative; display: flex; flex-direction: column; gap: 7px; }
.locked-lines .lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.locked-lines .lock span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.86);
}

/* ---------- report-ready dark panel ---------- */

.ready {
  background: var(--panel-deep);
  border-radius: 12px;
  padding: 32px;
  margin-top: 30px;
  color: var(--paper);
}

/* Header spans the panel so the three columns below it share a top edge —
   previously they aligned to the heading, which staggered every column. */
.ready-head {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line-inner);
}

.ready-cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}
.ready-cols > * { min-width: 0; }

.ready h3 { font-weight: 800; font-size: 32px; margin: 0 0 8px; }
.ready .lede { margin: 0; font-size: 14px; color: var(--paper-4); }

.preview-finding {
  border: 1px solid var(--line-inner);
  border-radius: 10px;
  padding: 14px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  /* the thumb is shorter than the finding text — centre it against it rather
     than pinning it to the top */
  align-items: center;
}

.preview-thumb {
  border: 1px solid var(--line-dashed);
  border-radius: 8px;
  padding: 10px;
  background: var(--cream);
  color: var(--ink);
}

.pt-head {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 8px;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.pt-head b { font-size: 8.5px; color: var(--ink); }

.pt-h1 { font-weight: 700; font-size: 11.5px; line-height: 1.2; margin-bottom: 5px; }

.pt-sub { font-size: 7.5px; color: var(--ink-5); line-height: 1.45; margin-bottom: 12px; }

/* The fold marker is the point of this thumb: the action sits under it. */
.pt-fold {
  position: relative;
  border-top: 1px dashed var(--orange);
  margin: 0 -10px 10px;
  text-align: center;
}
.pt-fold span {
  position: relative;
  top: -5px;
  background: var(--cream);
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 6.5px;
  letter-spacing: 0.04em;
  color: var(--orange);
}

.pt-crop { border: 1.5px dashed var(--orange); border-radius: 5px; padding: 4px; }

.pt-cta {
  background: #2e1b6b;
  color: var(--white);
  text-align: center;
  font-size: 8.5px;
  padding: 6px;
  border-radius: 4px;
}

.preview-metric {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 5px;
  background: var(--teal-badge-dark);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--paper-6);
}
.preview-metric b { color: var(--teal-bright); font-weight: 500; }

.preview-scores {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--paper-6);
}
.preview-scores b { color: var(--paper); font-weight: 500; }

.preview-finding h4 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 8px;
}
.preview-finding p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--paper-3); }

.preview-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--paper-6);
}
.preview-note svg { flex: none; }

.locked-list {
  border: 1px solid var(--line-inner);
  border-radius: 10px;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}
.locked-list li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}
.locked-list li:last-child { border-bottom: 0; }
.locked-list svg { flex: none; }

.unlock {
  border-left: 1px dashed var(--line-dashed);
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.unlock .orb {
  display: inline-flex;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--line-mute);
  align-items: center;
  justify-content: center;
  /* .unlock is a flex column, so text-align does not reach this fixed-width
     item — auto side margins are what centre it on the cross axis. */
  margin: 0 auto 20px;
}
.unlock .btn-primary {
  display: block;
  font-size: 18px;
  padding: 17px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.unlock .link { display: block; font-weight: 600; font-size: 15px; margin-bottom: 18px; }
.unlock p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--paper-6); }

/* ---------- deliverables ---------- */

.deliverables { padding: 38px 32px; margin-bottom: 22px; }

.deliverables h2 {
  font-weight: 800;
  font-size: 38px;
  text-align: center;
  margin: 0 0 30px;
}

.deliverable-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.deliverable {
  border: 1px solid var(--line-inner);
  border-radius: 10px;
  padding: 18px;
  /* previews push to the bottom so all six sit on one baseline despite
     different body lengths */
  display: flex;
  flex-direction: column;
}

.deliverable .dv { margin-top: auto; }

.deliverable .orb {
  display: inline-flex;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-dashed);
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

/* direct child only — a descendant selector also caught the <b> inside each
   card's preview and rendered priority values at title size */
.deliverable > b {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  margin-bottom: 8px;
}

.deliverable p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper-4);
}

/* Each card previews its own deliverable rather than the same skeleton bars. */
.deliverable .dv {
  border: 1px solid var(--line-inner);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--paper-4);
}

.dv-row { display: flex; gap: 9px; align-items: center; }
.dv-row i { font-style: normal; flex: none; color: var(--teal-bright); }
.dv-row i.n {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.dv-row b {
  margin-left: auto;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--paper);
}

/* must out-specify `.deliverable .dv`, which sets flex-direction: column */
.deliverable .dv-tags { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.dv-tag {
  background: var(--line-inner);
  color: var(--paper-4);
  border-radius: 4px;
  padding: 5px 9px;
  font-size: 12px;
}

.dv-metric { font-family: var(--mono); color: var(--paper-6); }
.dv-metric b { color: var(--teal-bright); font-weight: 500; }
.dv-sub { font-family: var(--mono); font-size: 12px; color: var(--paper-8); }

.dv-del,
.dv-add {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 4px;
}
.dv-del { background: #2a1512; color: #e08a72; }
.dv-add { background: #12241c; color: #7fd3a8; }

.guarantee {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  font-size: 15px;
  color: var(--paper-3);
}

/* ---------- why landingqa ---------- */

.why-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 26px;
}

.why-head h2 {
  font-weight: 800;
  font-size: 50px;
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}

.why-head p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--paper-3);
  max-width: 520px;
  text-wrap: pretty;
}

.why-pull {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 31px;
  line-height: 1.3;
  color: var(--orange);
}

.compare {
  background: var(--cream);
  border-radius: var(--radius);
  color: var(--ink);
  overflow: hidden;
}

.cmp-row {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.35fr;
}

.cmp-head-ours {
  border: 1.5px solid var(--orange);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: -1px;
}

.cmp-head-ours .orb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.cmp-head-theirs {
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.cmp-head-theirs svg { flex: none; }

.cmp-head-ours span:last-child,
.cmp-head-theirs span:last-child {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 25px;
}

.cmp-body { border-top: 1px solid var(--cream-line-5); }

.cmp-body .label {
  padding: 20px 22px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.cmp-body .label span { color: var(--ink); display: flex; flex: none; }
.cmp-body .label b { font-size: 16px; }

.cmp-body .ours {
  padding: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  border-left: 1.5px solid var(--orange);
  border-right: 1.5px solid var(--orange);
  background: var(--cream-card);
}

.cmp-body .theirs {
  padding: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.cmp-foot > div:nth-child(2) {
  height: 14px;
  border: 1.5px solid var(--orange);
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

.method {
  background: var(--panel-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  margin-top: 22px;
}

.method h3 {
  font-weight: 800;
  font-size: 32px;
  text-align: center;
  margin: 0 0 26px;
}

.method-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
}

.method-step { display: flex; gap: 12px; align-items: center; flex: 1; }

.method-step .box {
  border: 1px solid var(--line-inner);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  flex: 1;
}
.method-step .box > .ic { color: var(--teal-bright); display: flex; flex: none; }
.method-step b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.method-step .sub { font-size: 12.5px; line-height: 1.45; color: var(--paper-4); }

.method-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-dashed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper-4);
  flex: none;
}

.method-foot {
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  flex-wrap: wrap;
}

.method-foot .claim {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--teal-bright);
  font-size: 15.5px;
}

.method-foot .btn-primary {
  font-size: 17px;
  padding: 16px 30px;
  border-radius: 8px;
}

.method-foot .underline {
  font-weight: 600;
  font-size: 17px;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 3px;
}

/* ---------- proof ---------- */

.proof {
  padding: 40px;
  margin: 56px 0 22px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: start;
}

.proof h2 {
  font-weight: 800;
  font-size: 38px;
  margin: 0 0 18px;
}

.proof p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper-3);
  text-wrap: pretty;
}

.proof .proof-close {
  margin: 26px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.35;
  color: var(--orange);
}

.proof-findings {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0 0;
}

.proof-finding {
  border-left: 2px solid var(--line-dashed);
  padding: 2px 0 2px 16px;
}

.proof-finding .badge { margin-bottom: 8px; }

.proof-finding b {
  display: block;
  font-size: 15.5px;
  line-height: 1.4;
  margin-bottom: 5px;
  color: var(--paper);
}

.proof-finding p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--paper-4);
}

.proof-action {
  border: 1px solid var(--line-inner);
  border-radius: 12px;
  padding: 24px;
  position: sticky;
  top: 24px;
}

.proof-action-title {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 10px;
}

.proof-action .proof-action-lede {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-4);
}

.proof-action ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.proof-action li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--paper);
}

.proof-action li::before {
  content: "\2713";
  color: var(--teal-bright);
  font-weight: 700;
  flex: none;
}

.proof-action .btn-primary {
  width: 100%;
  font-size: 18px;
  padding: 17px;
  border-radius: 8px;
}

.proof-action > p {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--paper-6);
}

/* ---------- faq ---------- */

.faq {
  padding: 42px 36px;
  margin: 56px 0 22px;
}

.faq h2 {
  font-weight: 800;
  font-size: 42px;
  text-align: center;
  margin: 0 0 28px;
}

.faq-list {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--cream-line);
  border-radius: 8px;
  background: var(--cream-card);
  overflow: hidden;
}

.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  display: grid;
  grid-template-columns: 34px 1fr 1.2fr 20px;
  gap: 14px;
  align-items: center;
  padding: 15px 18px;
  text-align: left;
  color: var(--ink);
}

.faq-q .plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal-2);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
}

.faq-q b { font-size: 15px; }
.faq-q .a { font-size: 14px; color: var(--ink-2); }
.faq-q .chev { text-align: right; }

.faq-detail {
  margin: 0;
  padding: 0 18px 18px 66px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 820px;
}
.faq-item[data-open="false"] .faq-detail { display: none; }

/* ---------- final cta ---------- */

.final {
  padding: 40px;
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 30px;
  align-items: center;
}

.final h2 {
  font-weight: 800;
  font-size: 38px;
  margin: 0 0 22px;
}

.final .scan-form { max-width: 760px; justify-content: flex-start; }
.final .scan-field { border-radius: 10px; box-shadow: none; max-width: none; }
.final .scan-field input { padding: 17px 0; font-size: 16px; }
.final .scan-submit { border-radius: 10px; padding: 0 30px; font-size: 18px; box-shadow: none; }
.final .fineprint { margin: 14px 0 0; font-size: 14px; color: var(--paper-6); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 28px 0 46px;
  display: flex;
  gap: 56px;
  justify-content: center;
  font-size: 15px;
}

/* ---------- responsive (prototype breakpoint) ---------- */

@media (max-width: 1100px) {
  .shell { padding: 0 16px; }

  .hero,
  .features,
  .feature-points,
  .lenses,
  .split-grid,
  .band-head,
  .shots,
  .mobile-pair,
  .table-row,
  .cta-band,
  .how-grid,
  .ready-cols,
  .preview-finding,
  .deliverable-grid,
  .why-head,
  .cmp-row,
  .proof,
  .final,
  .pipeline-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-art,
  .band-head svg,
  .table-head,
  .cmp-foot,
  .final > svg {
    display: none;
  }

  .scan-form,
  .hero-meta,
  .method-row {
    flex-direction: column;
    align-items: stretch;
  }

  .scan-form .scan-field { max-width: none; }
  .scan-form .scan-submit { padding: 17px 30px; }

  .scope,
  .site-footer,
  .guarantee,
  .method-foot,
  .nav {
    flex-wrap: wrap;
    gap: 18px;
    justify-content: flex-start;
  }

  .arrow,
  .how-arrow {
    transform: rotate(90deg);
    padding-top: 0;
    margin: 4px auto;
  }

  .how-step-sub { min-height: 0; }
  .how-grid > div:not(.arrow) > .mock { margin-top: 0; margin-bottom: 0; }

  .pipeline-grid > .step {
    border-right: 0;
    padding-right: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--cream-line-3);
  }
  .pipeline-grid > .arrow { border-bottom: 0; padding-bottom: 0; }
  /* the closer draws its own rule — don't stack two */
  .pipeline-grid > .step:last-child { border-bottom: 0; padding-bottom: 0; }

  .report-body { padding: 4px 16px 20px; }
  .table-row > div { border-right: 0; padding: 14px 18px; }

  .cmp-row > div,
  .cmp-body > div {
    border-left: 0;
    border-right: 0;
  }
  .cmp-row > div:empty { display: none; }

  /* Brand + CTA on one row, links on a second. At 18px gap the four links
     summed to 358px against 343px available and wrapped onto a third row,
     pushing the headline down. Tighter gap fits them; nowrap + scroll keeps
     it two rows on narrower phones too. */
  .nav { gap: 12px; padding: 18px 0; }
  .nav-links {
    order: 3;
    width: 100%;
    gap: 12px;
    font-size: 13.5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  /* Without this the container's nowrap just squeezes each link until its own
     label wraps to two lines. Keep labels intact and let the row scroll. */
  .nav-links a { white-space: nowrap; }
  .nav-links::-webkit-scrollbar { display: none; }

  /* "Check my landing page" wrapped to two lines at 19px with 40px of side
     padding inside a 273px column. */
  .cta-band a.btn-primary,
  .cta-band a.btn-ghost {
    font-size: 17px;
    padding: 18px 24px;
  }

  .hero h1,
  .band-head h2,
  .why-head h2 { font-size: 34px; }

  .section-title,
  .split h2,
  .how h2,
  .deliverables h2,
  .faq h2,
  .proof h2,
  .final h2 { font-size: 27px; }

  .proof { padding: 28px 20px; }
  .proof .proof-close { font-size: 20px; }
  .proof-action { position: static; }
  .proof-action-title { font-size: 21px; }

  .unlock {
    border-left: 0;
    border-top: 1px dashed var(--line-dashed);
    padding-left: 0;
    padding-top: 24px;
  }

  .cta-band h3,
  .method h3 { font-size: 24px; }

  .section-cream-lg,
  .how,
  .pipeline,
  .faq { padding-left: 20px; padding-right: 20px; }

  /* The 96px orb beside the text left a ~245px column: 3-line headings and a
     ragged 7-line body. Stack it instead. */
  .feature { flex-direction: column; }

  /* The lone "|" dangled at the end of the wrapped first line. */
  .scope .sep { display: none; }

  /* .table-head is hidden here, which left every stacked cell unlabelled --
     no way to tell a correction from a validation plan. Re-label the cells. */
  .table-row > div:nth-child(2)::before { content: "Evidence"; }
  .table-row > div:nth-child(3)::before { content: "Correction"; }
  .table-row > div:nth-child(4)::before { content: "Validation plan"; }
  .table-row > div:nth-child(n+2)::before {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-4);
  }
  .table-row > .cell-action { flex-wrap: wrap; }

  /* Same problem, worse: the two column headers stacked at the top and then
     all twelve answers followed with nothing saying whose they were. Drop the
     header row and attribute each answer where it sits. */
  .cmp-row:not(.cmp-body) { display: none; }
  .cmp-body .ours,
  .cmp-body .theirs {
    border-left: 0;
    border-right: 0;
  }
  .cmp-body .ours::before,
  .cmp-body .theirs::before {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .cmp-body .ours::before { content: "LANDINGQA"; color: var(--orange); }
  .cmp-body .theirs::before { content: "A ONE-OFF AI CHAT"; color: var(--ink-4); }
  .cmp-body .label { padding-bottom: 0; }

  /* Stacking all four children left the "+" and the chevron orphaned on their
     own lines. Keep the "+" beside the question; the chevron is redundant. */
  .faq-q {
    grid-template-columns: 24px 1fr;
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
  }
  .faq-q .plus { grid-column: 1; }
  .faq-q b { grid-column: 2; }
  /* Answer spans full width so it lines up with the expanded detail below
     rather than sitting indented to its right. */
  .faq-q .a { grid-column: 1 / -1; }
  .faq-q .chev { display: none; }

  /* 66px of indent aligned the answer under the desktop text column; here it
     just squeezed the answer into ~230px. */
  .faq-detail { padding-left: 20px; }
}

/* ---------- smallest phones ---------- */

/* At 375px the brand and CTA share a row at their designed sizes. Below ~360px
   they no longer fit and the nav grows to three rows, so trim both there only. */
@media (max-width: 360px) {
  .brand { font-size: 22px; }
  .nav-cta { font-size: 14px; padding: 11px 18px; }
}