/* ============================================================
   Brivtex public marketing surfaces.

   Replaces the five-stylesheet cascade (brivtex.css -> v2 ->
   signal-light -> v3 -> v4) that public pages used to load, in
   which .lp-hero was declared three separate times and each fix
   landed as a new layer on top of the last. Everything a public
   page needs is here, consuming tokens from brivtex-brand.css.

   Covers: /, /product/, /about/, /for/<slug>/, /pricing/.
   The signed-in app is not in scope and keeps its own chain.

   Breakpoints: 640 and 900 only. The previous build used
   eighteen distinct values across eight files, which is why
   adjacent components collapsed at different widths.
   ============================================================ */

/* ── 1. Reset & base ──────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-600);
  background-color: var(--surface);
  /* Page Theme Lock: the public site is light, top to bottom.
     The hero is a dark panel drawn on this canvas, not a second
     theme the visitor scrolls into. */
}

img {
  max-width: 100%;
  display: block;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: var(--brand-ink);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 800;
}

/* Sticky nav is 64px. Without this every anchor target lands
   underneath it, which made "How it works" appear to jump to the
   wrong place. */
:target,
[id] {
  scroll-margin-top: 84px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--s-4);
  top: var(--s-4);
  z-index: 2000;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
}

/* ── 2. Layout primitives ─────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mk-section,
.lp-section {
  padding-block: var(--section-y);
}

/* ── 3. Buttons ───────────────────────────────────────────
   Pill radius is preserved from the existing brand. Every other
   surface on the page uses the --r-* ramp. */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast), box-shadow var(--t-fast);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-nav:hover {
  text-decoration: none;
}

/* Flat brand blue, not the brand gradient. White on #1868DB
   measures 5.19:1; white over the gradient's #1EC7AE end measures
   2.1:1, so a wide button running blue to teal puts its own label
   below AA across most of its width. The previous build had this
   defect. The gradient survives everywhere it carries no text. */
.btn-primary {
  background-color: var(--brand-blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--brand-blue-hover);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  background-color: var(--brand-blue-press);
  box-shadow: none;
}

.btn-secondary {
  background-color: var(--surface);
  border-color: var(--hairline-strong);
  color: var(--ink-700);
}

.btn-secondary:hover {
  border-color: var(--ink-400);
  color: var(--ink-900);
}

.btn-ghost {
  background-color: transparent;
  border-color: var(--hairline-strong);
  color: var(--ink-600);
}

.btn-ghost:hover {
  background-color: var(--surface-sunken);
  color: var(--ink-900);
}

.btn-block {
  width: 100%;
}

:where(.btn-primary, .btn-secondary, .btn-ghost, .btn-nav):focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.inline-form {
  display: inline-flex;
}

/* ── 4. Navigation ────────────────────────────────────────
   Light nav on a light page. The old build inverted the nav to
   white-on-dark for .landing-page, then had to un-invert it on
   scroll, which is the theme flip Section 4.11 forbids. Markup
   structure and every label are unchanged. */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  height: 64px;
  background-color: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav-logo {
  display: inline-flex;
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}

.nav-logo:hover {
  opacity: 0.72;
}

.nav-logo-img {
  width: 28px;
  height: 36px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin-inline: auto;
}

.nav-link {
  color: var(--ink-500);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: color var(--t-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--ink-900);
  text-decoration: none;
}

.nav-link:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

.nav-actions .nav-link {
  font-weight: 600;
}

.btn-nav {
  min-height: 38px;
  padding: 8px 18px;
  background-color: var(--brand-blue);
  color: #fff;
}

.btn-nav:hover {
  background-color: var(--brand-blue-hover);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-nav--ghost {
  background-image: none;
  background-color: transparent;
  border-color: var(--hairline-strong);
  color: var(--ink-600);
}

.btn-nav--ghost:hover {
  background-color: var(--surface-sunken);
  color: var(--ink-900);
  box-shadow: none;
}

/* ── 4b. Theme toggle ─────────────────────────────────────
   Borrows the hamburger's square-control geometry so the two
   sit together in the bar. Icon-only: the accessible name is
   written by script, because before it runs the rendered theme
   may have come from the OS and the server cannot know which. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  color: var(--ink-600);
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}

.theme-toggle:hover {
  background-color: var(--surface-sunken);
  border-color: var(--ink-400);
  color: var(--ink-900);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

.theme-toggle-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Both icons ship in the markup and CSS picks one, so the icon is
   correct at first paint instead of being swapped in by script.
   Light theme shows the moon (what a click gets you); dark shows
   the sun. Mirrors the two-selector pattern in the token file:
   the OS rule needs the :not() guard so an explicit light choice
   still wins, and the attribute rule then wins in both directions. */
.theme-toggle-icon--sun {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle-icon--sun {
    display: block;
  }

  :root:not([data-theme="light"]) .theme-toggle-icon--moon {
    display: none;
  }
}

:root[data-theme="dark"] .theme-toggle-icon--sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle-icon--moon {
  display: none;
}

:root[data-theme="light"] .theme-toggle-icon--sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle-icon--moon {
  display: block;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
}

.nav-hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--ink-700);
  transition: transform var(--t-base), opacity var(--t-fast);
}

/* The bars swap with --ink-700 and read at 14:1 in dark, but the button
   they sit in does not: transparent over the nav plus a --hairline-strong
   edge traces at 1.8:1, so the control has no visible boundary. A faint
   raised chip gives it one. Matches what brivtex-app-theme.css section 11
   does for the signed-in nav, so the button does not change shape when a
   visitor signs in. Dark only - light already reads on the white nav. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-hamburger {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
  }
}

:root[data-theme="dark"] .nav-hamburger {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
}

.nav-hamburger--open .nav-hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger--open .nav-hamburger-bar:nth-child(2) {
  opacity: 0;
}

.nav-hamburger--open .nav-hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile-menu {
  display: none;
  position: fixed;
  inset: 64px 0 auto;
  z-index: 999;
  padding: var(--s-5) var(--gutter) var(--s-6);
  background-color: var(--surface);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
}

.nav-mobile-menu--open {
  display: block;
}

.nav-mobile-links {
  display: grid;
  gap: var(--s-1);
  margin-bottom: var(--s-5);
}

.nav-mobile-links .nav-link {
  display: block;
  padding: var(--s-3) var(--s-2);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-700);
  border-radius: var(--r-sm);
}

.nav-mobile-links .nav-link:hover {
  background-color: var(--surface-sunken);
}

.nav-mobile-actions {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

.nav-mobile-actions .nav-link,
.nav-mobile-actions .btn-nav,
.nav-mobile-signout,
.nav-mobile-signout .btn-nav {
  width: 100%;
  justify-content: center;
}

.nav-mobile-actions .nav-link {
  padding: var(--s-3);
  text-align: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  color: var(--ink-700);
}

/* In the menu the toggle becomes a full-width row like its
   neighbours rather than the 38px square it is in the bar. */
.nav-mobile-actions .theme-toggle {
  gap: var(--s-2);
  width: 100%;
  height: auto;
  padding: var(--s-3);
  border-radius: var(--r-pill);
  color: var(--ink-700);
  font-size: var(--t-sm);
  font-weight: 600;
}

.theme-toggle-text {
  display: none;
}

.nav-mobile-actions .theme-toggle-text {
  display: inline;
}

/* ── 5. Messages ──────────────────────────────────────────── */
.messages-container {
  padding-top: var(--s-5);
}

.alert {
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  background-color: var(--surface-sunken);
  color: var(--ink-700);
}

.alert-error,
.alert-danger {
  border-color: var(--alert-bad-border);
  background-color: var(--alert-bad-bg);
  color: var(--alert-bad-ink);
}

.alert-success {
  border-color: var(--alert-ok-border);
  background-color: var(--alert-ok-bg);
  color: var(--alert-ok-ink);
}

.alert-warning {
  border-color: var(--alert-warn-border);
  background-color: var(--alert-warn-bg);
  color: var(--alert-warn-ink);
}

/* ── 6. Landing: hero ─────────────────────────────────────
   Full-bleed dark hero: blue glow top-left, teal glow bottom-
   right, resolving into the light canvas at its own bottom edge
   rather than stopping at a rounded corner. The fade is what
   keeps the Page Theme Lock intact — the visitor scrolls out of
   the dark band into the light page instead of crossing a seam
   between two themes, and the sticky nav never has to invert. */
.lp-hero {
  position: relative;
  isolation: isolate;
  /* The teal glow below spreads past the visual on both sides by
     design. Unclipped it widened the document by 82px at 820px and
     29px at 390px, so the whole page scrolled sideways. Clipping on
     x only; the chips still overhang top and bottom. */
  overflow-x: clip;
  padding-block: var(--s-8) var(--s-9);
  color: var(--on-dark);
  background-color: var(--surface-dark);
  background-image:
    radial-gradient(ellipse 62% 80% at 8% 0%, rgba(24, 104, 219, 0.46) 0%, transparent 62%),
    radial-gradient(ellipse 66% 84% at 94% 84%, rgba(30, 199, 174, 0.26) 0%, transparent 66%),
    linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-dark-2) 58%, var(--surface) 100%);
}

.lp-hero-inner {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  align-items: center;
}

.lp-headline {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--on-dark);
  text-wrap: balance;
}

.lp-tagline {
  margin-top: var(--s-5);
  max-width: var(--measure-lede);
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--on-dark-muted);
}

.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.lp-hero-actions--center {
  justify-content: center;
}

/* On the dark hero the secondary CTA has to carry its own
   contrast rather than inherit the light-page treatment. */
.lp-hero .btn-secondary {
  background-color: var(--on-dark-fill);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--on-dark);
}

.lp-hero .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--on-dark);
}

.lp-hero .btn-secondary:focus-visible,
.lp-hero .btn-primary:focus-visible {
  outline-color: #fff;
}

/* Position parent for the floating chips, which cannot live inside
   .lp-hero-shot because that clips to its own radius. Also carries
   the teal glow that anchors the shot to the seam. */
.lp-hero-visual {
  position: relative;
  z-index: 0;
}

.lp-hero-visual::before {
  content: "";
  position: absolute;
  inset: -12% -14% -22%;
  z-index: -1;
  background: radial-gradient(ellipse at 60% 100%, rgba(30, 199, 174, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

/* Real product screenshot. Replaces the div-and-span mock of the
   app that used to sit here, which was a fake screenshot rendered
   directly above the real ones further down the page. */
.lp-hero-shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-xl);
}

.lp-hero-shot img {
  width: 100%;
  height: auto;
}

/* Floating chips. Horizontal offsets stay inside the smallest
   gutter (20px) so a chip never reaches the clip edge set on
   .lp-hero. Vertical overhang is free: the hero has padding above
   and below the visual, and the clip is x-only. */
.lp-hero-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: calc(100% - var(--s-5));
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background-color: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--ink-700);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  animation: lp-float 5.5s ease-in-out infinite;
}

.lp-hero-chip--1 { top: -14px; right: 6%; animation-delay: 0s; }
.lp-hero-chip--2 { bottom: -16px; left: -16px; animation-delay: 1.6s; }
.lp-hero-chip--3 { top: 46%; right: -16px; animation-delay: 3s; }

.lp-chip-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Section 19 zeroes every animation under prefers-reduced-motion,
   so this needs no companion rule there. */
@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ── 6b. Topic marquee ────────────────────────────────────
   The one automatic animation on the page. It sits between the
   hero and the first section and names the kinds of source the
   product accepts, which is the fastest way to answer "what do I
   put into this?" without spending a section on it.

   Edge-masked so chips fade rather than clip, paused on hover so
   a name can be read, and unrolled into a static wrapped row
   under prefers-reduced-motion (the previous build only stopped
   the animation, which left the row clipped mid-chip). */
.lp-marquee {
  overflow: hidden;
  padding-block: var(--s-4);
  border-block: 1px solid var(--hairline);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.lp-marquee-track {
  display: flex;
  gap: var(--s-3);
  width: max-content;
  animation: lp-marquee 46s linear infinite;
}

.lp-marquee-pass {
  display: flex;
  gap: var(--s-3);
}

.lp-marquee:hover .lp-marquee-track {
  animation-play-state: paused;
}

@keyframes lp-marquee {
  to {
    transform: translateX(-50%);
  }
}

.lp-marquee-chip {
  white-space: nowrap;
  padding: 7px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background-color: var(--surface);
  color: var(--ink-500);
  font-size: var(--t-sm);
}

/* ── 7. Landing: section headings ─────────────────────────── */
.lp-section-heading {
  max-width: var(--measure-body);
  margin-bottom: var(--s-7);
}

.lp-h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

.lp-sub {
  margin-top: var(--s-4);
  max-width: var(--measure-lede);
  font-size: var(--t-lede);
  color: var(--ink-500);
}

/* ── 8. Landing: how it works (numbered steps) ────────────── */
.lp-section--steps {
  background-color: var(--surface-sunken);
  border-block: 1px solid var(--hairline);
}

.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}

/* The brand gradient reads here at full strength because nothing
   sits on top of it. */
.lp-step {
  padding-top: var(--s-4);
  border-top: 2px solid transparent;
  border-image: var(--brand-gradient) 1;
}

.lp-step-num {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-ink);
}

.lp-step-title {
  margin-top: var(--s-2);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h3);
}

.lp-step-body {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-500);
}

/* ── 9. Landing: workspace story rows ─────────────────────
   Two rows only. Three consecutive image-plus-text splits broke
   the alternation cap, so the third (Catch-up) is now its own
   full-width section with a different layout. */
.lp-story {
  display: grid;
  gap: var(--section-y);
}

.lp-story-row {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  align-items: center;
}

.lp-story-copy h3 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

.lp-story-copy p {
  margin-top: var(--s-4);
  max-width: var(--measure-lede);
  color: var(--ink-500);
}

.lp-story-picture {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
}

.lp-story-picture img {
  width: 100%;
  height: auto;
}

/* ── 10. Landing: Catch-up feature section ────────────────
   The differentiator. Previously buried about 2.5 viewport
   heights down under an eyebrow reading "Connect". */
.lp-section--catchup {
  background-color: var(--surface-sunken);
  border-block: 1px solid var(--hairline);
}

/* Stacked, not split. The two story rows above are already a
   copy-beside-visual family; giving Catch-up the same shape
   would put three near-identical layouts back to back, and the
   demo needs the full container width to show its two-column
   comparison grid. */
.lp-catchup {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
}

.lp-catchup-copy {
  max-width: var(--measure-body);
}

.lp-catchup-copy h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

.lp-catchup-copy > p {
  margin-top: var(--s-4);
  max-width: var(--measure-lede);
  color: var(--ink-500);
}

.lp-catchup-list {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.lp-catchup-list li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-600);
}

.lp-catchup-list li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-image: var(--brand-gradient);
}

/* ── 11. Landing: capability grid ─────────────────────────
   Type-led rather than icon-led. The previous version used
   hand-drawn SVG icon paths, which Section 3.C rules out and no
   icon package is installed to replace. Six items, six cells. */
.lp-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.lp-diff-card {
  padding: var(--s-6) var(--s-5);
  background-color: var(--surface);
}

.lp-diff-card h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h3);
}

.lp-diff-card p {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-500);
}

/* ── 12. FAQ (landing + use-case pages) ───────────────────── */
.lp-faq {
  display: grid;
  max-width: var(--measure-body);
  border-top: 1px solid var(--hairline);
}

.lp-faq-item {
  border-bottom: 1px solid var(--hairline);
}

.lp-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
}

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

.lp-faq-question:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.lp-faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-base);
}

.lp-faq-item[open] .lp-faq-icon {
  transform: rotate(180deg);
}

.lp-faq-answer {
  padding-bottom: var(--s-5);
  max-width: var(--measure-body);
  color: var(--ink-500);
}

/* ── 13. Landing: closing CTA ─────────────────────────────── */
.lp-cta {
  margin-block: var(--section-y);
  padding: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem) var(--gutter);
  text-align: center;
  border: 1px solid var(--brand-tint-16);
  border-radius: var(--r-xl);
  background-color: var(--brand-tint-06);
}

.lp-cta .lp-h2 {
  margin-inline: auto;
  max-width: 22ch;
}

.lp-cta-sub {
  margin: var(--s-4) auto 0;
  max-width: var(--measure-lede);
  font-size: var(--t-lede);
  color: var(--ink-500);
}

/* ── 14. Marketing pages (about, use cases) ───────────────── */
.mk-page {
  padding-block: var(--s-7) 0;
}

.mk-page .container {
  max-width: var(--container-narrow);
}

.mk-breadcrumbs {
  margin-bottom: var(--s-5);
  font-size: var(--t-xs);
  color: var(--ink-400);
}

.mk-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.mk-breadcrumbs li + li::before {
  content: '/';
  margin-right: var(--s-2);
  color: var(--ink-300);
}

.mk-header {
  margin-bottom: var(--s-8);
}

.mk-h1 {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.mk-lede {
  margin-top: var(--s-5);
  max-width: var(--measure-lede);
  font-size: var(--t-lede);
  color: var(--ink-500);
}

.mk-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.mk-note {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--ink-400);
}

.mk-section {
  padding-block: 0;
  margin-bottom: var(--s-8);
}

.mk-h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h2);
  margin-bottom: var(--s-4);
  text-wrap: balance;
}

.mk-section p {
  max-width: var(--measure-body);
  margin-bottom: var(--s-4);
}

.mk-list {
  display: grid;
  gap: var(--s-3);
  max-width: var(--measure-body);
  margin-bottom: var(--s-4);
}

.mk-list li {
  position: relative;
  padding-left: var(--s-5);
}

.mk-list li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--brand-blue);
}

/* Related links: a card list, not a bare <ul> with divide-y. */
.mk-related-list {
  display: grid;
  gap: var(--s-3);
}

.mk-related-list a {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.mk-related-list a:hover {
  text-decoration: none;
  border-color: var(--brand-tint-28);
  box-shadow: var(--shadow-md);
}

.mk-related-list strong {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--ink-900);
}

.mk-related-list span {
  font-size: var(--t-sm);
  color: var(--ink-500);
}

.mk-cta {
  margin-block: var(--s-8) var(--s-9);
  padding: var(--s-8) var(--s-6);
  text-align: center;
  border: 1px solid var(--brand-tint-16);
  border-radius: var(--r-xl);
  background-color: var(--brand-tint-06);
}

.mk-cta .mk-h2 {
  margin-inline: auto;
  max-width: 24ch;
  margin-bottom: var(--s-5);
}

/* ── 15. Catch-up demo ────────────────────────────────────
   Signature interaction, preserved. The inner markup comes from
   baskets/_catch_up_results.html and is shared with the app, so
   these rules read the compatibility aliases in the token file
   rather than restyling that partial. */
.mk-catch-up-demo {
  margin: 0;
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-lg);
}

.mk-catch-up-demo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}

.mk-catch-up-demo-kicker {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink-400);
}

.mk-catch-up-demo-head h3 {
  margin-top: 2px;
  font-size: var(--t-h3);
  letter-spacing: var(--tracking-h3);
}

.mk-catch-up-demo-count {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background-color: var(--brand-tint-10);
  color: var(--brand-ink);
  font-size: var(--t-xs);
  font-weight: 600;
}

.mk-catch-up-demo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.mk-catch-up-demo-tags span {
  padding: 3px 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  color: var(--ink-500);
}

.mk-catch-up-demo-tabs {
  display: flex;
  gap: var(--s-1);
  margin-bottom: var(--s-4);
  padding: var(--s-1);
  border-radius: var(--r-sm);
  background-color: var(--surface-sunken);
}

.mk-catch-up-demo-tabs span,
.mk-catch-up-demo-tabs strong,
.mk-catch-up-demo-tabs button {
  flex: 1;
  padding: var(--s-2) var(--s-3);
  border: none;
  border-radius: var(--r-xs);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-500);
  text-align: center;
}

.mk-catch-up-demo-tabs strong,
.mk-catch-up-demo-tabs button[aria-selected="true"] {
  background-color: var(--surface);
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}

.mk-catch-up-demo-tabs button:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 1px;
}

.mk-catch-up-demo-tabpanel[hidden] {
  display: none;
}

.mk-catch-up-demo-notes label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink-500);
}

.mk-catch-up-demo-notes-field {
  width: 100%;
  min-height: 132px;
  padding: var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-700);
  /* Not resizable: the demo sits in a fixed-height figure and a
     dragged textarea would push the sample panel out of it. */
  resize: none;
}

.mk-catch-up-demo-notes-field:focus {
  outline: 2px solid var(--brand-ink);
  outline-offset: 1px;
  border-color: var(--brand-ink);
}

.mk-catch-up-demo .mk-catch-up-demo-notes > p,
.mk-catch-up-demo .mk-catch-up-demo-hint {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--ink-400);
}

.mk-catch-up-demo-scroll-frame {
  position: relative;
}

/* Fixed height rather than max-height: the panel is a scrollable
   sample, and a viewport that grows to fit its content would let
   the whole Catch-up example push the page length out. Sizing
   carried over from the previous build. */
.mk-catch-up-demo-viewport {
  height: min(68vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background-color: var(--surface-sunken);
  padding: var(--s-3);
}

.mk-catch-up-demo-viewport:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

.mk-catch-up-demo figcaption {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--ink-400);
}

/* Inner Catch-up result markup, shared with the app template. */
.mk-catch-up-demo .bd-catch-up-panel {
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background-color: var(--surface);
}

.mk-catch-up-demo .bd-catch-up-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}

.mk-catch-up-demo .bd-catch-up-kicker,
.mk-catch-up-demo .bd-catch-up-generated {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.mk-catch-up-demo .bd-catch-up-panel h3 {
  margin-top: 3px;
  font-size: 1.0625rem;
  letter-spacing: 0;
}

.mk-catch-up-demo .bd-catch-up-description {
  margin-top: 5px;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-500);
}

.mk-catch-up-demo :where(.bd-catch-up-overview, .bd-catch-up-takeaway,
  .bd-catch-up-tldr p, .bd-catch-up-followups p, .bd-catch-up-grid li,
  .bd-catch-up-timeline p) {
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-500);
}

.mk-catch-up-demo .bd-catch-up-tldr {
  margin-bottom: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--brand-tint-16);
  border-radius: var(--r-sm);
  background-color: var(--brand-tint-06);
}

.mk-catch-up-demo .bd-catch-up-tldr h4 {
  margin-bottom: 5px;
  font-size: var(--t-xs);
  font-weight: 800;
}

.mk-catch-up-demo .bd-catch-up-tldr p {
  font-weight: 600;
  color: var(--ink-700);
}

.mk-catch-up-demo .bd-catch-up-overview {
  margin-bottom: var(--s-4);
}

.mk-catch-up-demo .bd-catch-up-timeline {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.mk-catch-up-demo .bd-catch-up-timeline li {
  position: relative;
  padding-left: var(--s-5);
}

.mk-catch-up-demo .bd-catch-up-timeline li::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--brand-blue);
  box-shadow: 0 0 0 4px var(--brand-tint-10);
}

.mk-catch-up-demo .bd-catch-up-timeline li::after {
  content: '';
  position: absolute;
  top: 19px;
  bottom: -14px;
  left: 6.5px;
  width: 1px;
  background-color: var(--hairline);
}

.mk-catch-up-demo .bd-catch-up-timeline li:last-child::after {
  content: none;
}

.mk-catch-up-demo :where(.bd-catch-up-timeline time, .bd-catch-up-time-unavailable) {
  display: block;
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-400);
}

.mk-catch-up-demo .bd-catch-up-timeline strong {
  display: block;
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--ink-900);
}

.mk-catch-up-demo .bd-catch-up-timeline p {
  margin-top: 3px;
}

.mk-catch-up-demo .bd-catch-up-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.mk-catch-up-demo .bd-catch-up-grid section {
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background-color: var(--surface-sunken);
}

.mk-catch-up-demo .bd-catch-up-grid h4 {
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 700;
}

.mk-catch-up-demo .bd-catch-up-grid h5 {
  margin: var(--s-2) 0 6px;
  font-size: 12px;
  font-weight: 800;
}

.mk-catch-up-demo .bd-catch-up-grid h4 + h5 {
  margin-top: 0;
}

.mk-catch-up-demo .bd-catch-up-grid ul {
  display: grid;
  gap: 6px;
  padding-left: var(--s-4);
  list-style: disc;
}

.mk-catch-up-demo .bd-catch-up-followups strong {
  display: block;
  font-size: var(--t-xs);
  line-height: 1.42;
  color: var(--ink-900);
}

.mk-catch-up-demo .bd-catch-up-followups p {
  margin-top: 3px;
}

.mk-catch-up-demo .bd-catch-up-takeaway {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-weight: 600;
}

.mk-catch-up-demo .bd-catch-up-timeline-toggle {
  margin-top: var(--s-2);
  padding: 6px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-600);
}

/* ── 16. Pricing ──────────────────────────────────────────── */
/* The template used to open with .signal-page .signal-pricing-page, two
   classes from the retired stylesheet chain that this file never defined.
   .pr-page replaces both and is the element that actually carries the
   page tone. */
.pr-page {
  background-color: var(--surface);
}

.pr-wrap {
  padding-block: var(--s-8) var(--s-9);
}

.pr-header {
  max-width: var(--measure-body);
  margin-bottom: var(--s-7);
}

.pr-header h1 {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.pr-header p {
  margin-top: var(--s-4);
  font-size: var(--t-lede);
  color: var(--ink-500);
}

.plan-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-1);
  max-width: 380px;
  margin-bottom: var(--s-6);
  padding: var(--s-1);
  border-radius: var(--r-pill);
  background-color: var(--surface-sunken);
  border: 1px solid var(--hairline);
}

.plan-toggle-pill {
  position: absolute;
  top: var(--s-1);
  left: var(--s-1);
  width: calc((100% - var(--s-2)) / 3);
  height: calc(100% - var(--s-2));
  border-radius: var(--r-pill);
  /* Flat, not the gradient: the selected label sits on top in white. */
  background-color: var(--brand-blue);
  transition: transform var(--t-base);
}

.plan-toggle-btn {
  position: relative;
  z-index: 1;
  padding: var(--s-2) var(--s-3);
  min-height: 40px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-500);
  transition: color var(--t-fast);
}

.plan-toggle-btn[aria-pressed="true"] {
  color: #fff;
}

.plan-toggle-btn:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.plan-card:hover,
.plan-card--active {
  border-color: var(--brand-tint-28);
  box-shadow: var(--shadow-lg);
}

.plan-grid--focused .plan-card:not(.plan-card--active) {
  opacity: 0.78;
}

/* The recommended tier. Previously the only thing separating it from the
   other two was a small badge, which is the "three identical towers"
   pattern: the eye had nothing to land on. Colour and a tinted surface do
   the work the badge was being asked to do alone. The tint is the brand
   blue at 6%, so body text on it still clears AA. */
.plan-card--recommended {
  border-color: var(--brand-tint-28);
  background-color: var(--brand-tint-06);
  box-shadow: var(--shadow-md);
}

.plan-card--recommended:hover,
.plan-card--recommended.plan-card--active {
  border-color: var(--brand-ink);
  box-shadow: var(--shadow-xl);
}

.plan-card--recommended .plan-features li::before {
  background-color: var(--brand-blue);
}

/* Keeps the three bullet lists starting on one baseline. All three cards
   now carry a two-line price block; the floor covers the case where
   "Final local price shown at checkout" wraps and "No card required"
   does not. */
.plan-price-block {
  min-height: 4.5rem;
}

.plan-card-flag {
  position: absolute;
  top: calc(var(--s-4) * -1);
  left: var(--s-5);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background-color: var(--brand-blue);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
}

.plan-card-flag--current {
  background-color: var(--ink-700);
}

/* --ink-700 is the one token in this rule, and it INVERTS: in dark it is
   #dbe3ee, so the chip painted a near-white slab under the white label
   .plan-card-flag sets - 1.1:1, the label gone. Inverting the ink alone would
   have turned the quietest flag on the page into the loudest thing on it, so
   dark gets a raised neutral instead: the same "you are here, nothing to do"
   read the slate chip has in light, and still clearly behind the blue
   "Recommended" flag. The 1px edge is an inset ring rather than a border so
   the pill's box does not change size between themes.

   Declared twice for the reason given at the top of brivtex-brand.css's dark
   palette: a media query and a plain selector cannot share a block. KEEP THE
   TWO IN SYNC. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan-card-flag--current {
    background-color: var(--surface-tint);
    box-shadow: inset 0 0 0 1px var(--hairline-strong);
    color: var(--ink-900);
  }
}

/* Copy 2 of 2 - keep identical to the block above. */
:root[data-theme="dark"] .plan-card-flag--current {
  background-color: var(--surface-tint);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  color: var(--ink-900);
}

.plan-name {
  font-size: var(--t-h3);
  letter-spacing: var(--tracking-h3);
}

.plan-price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.plan-price small {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-400);
}

.plan-local {
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  color: var(--ink-400);
}

.plan-features {
  display: grid;
  gap: var(--s-2);
}

.plan-features li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-500);
}

.plan-features li::before {
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--brand-blue);
}

.plan-cta {
  margin-top: auto;
  padding-top: var(--s-2);
}

.plan-usage {
  font-size: var(--t-xs);
  color: var(--ink-500);
}

.plan-usage--ended {
  color: var(--status-warn);
}

/* Answers the three questions the plan cards raise, without adding a
   second row of cards under the first. Bare type on the page surface,
   separated by a rule rather than by borders. */
.pr-answers {
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--hairline);
}

.pr-answers-title {
  margin-bottom: var(--s-6);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h3);
  color: var(--ink-900);
}

.pr-answers-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-7);
}

.pr-answers-list dt {
  margin-bottom: var(--s-2);
  font-weight: 600;
  color: var(--ink-700);
}

.pr-answers-list dd {
  max-width: 46ch;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--ink-500);
}

.pr-fineprint {
  max-width: var(--measure-body);
  margin-top: var(--s-6);
  font-size: var(--t-xs);
  color: var(--ink-400);
}

/* ── 16b. Legal pages (privacy, terms) ───────────────────
   Presentation only. The legal copy itself is untouched: these
   pages are public and linked from every footer, so leaving them
   on the old stylesheet chain would have shown a visitor two
   different designs one click apart. */
/* Was .signal-page .signal-legal-page, neither of which this stylesheet
   defines, so the wrapper contributed nothing. */
.lg-page {
  background-color: var(--surface);
}

/* Wider than --container-narrow because the contents rail sits beside the
   prose from 900px up. The prose column itself stays at --measure-body,
   so the reading line length is unchanged. */
.legal-container {
  max-width: 960px;
  padding-block: var(--s-7) var(--s-9);
}

/* Scoped to .lg-page: .page-header is also an app class, and although the
   app loads a different stylesheet chain there is no reason to leave a
   loose selector here that could collide later. */
.lg-page .page-header {
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--hairline);
}

.page-header h1 {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.page-header-sub {
  margin-top: var(--s-3);
  font-size: var(--t-lede);
  color: var(--ink-500);
}

/* "Last updated" was a bare .text-caption paragraph. On a legal page the
   effective date is load-bearing information, so it reads as a labelled
   value rather than as a footnote. */
.lg-meta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--ink-500);
}

.lg-meta-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-400);
}

.lg-meta time {
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
}

/* Single column by default; the contents rail moves alongside the prose
   at 900px in section 19. */
.lg-body {
  display: grid;
  gap: var(--s-7);
}

.lg-toc {
  align-self: start;
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background-color: var(--surface-sunken);
}

.lg-toc-title {
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-400);
}

.lg-toc-list {
  display: grid;
  gap: var(--s-1);
  counter-reset: lg-toc;
  list-style: none;
}

.lg-toc-list li {
  counter-increment: lg-toc;
}

.lg-toc-list a {
  display: grid;
  grid-template-columns: 1.75em 1fr;
  padding: var(--s-1) 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-600);
  transition: color var(--t-fast);
}

.lg-toc-list a::before {
  content: counter(lg-toc) '.';
  font-variant-numeric: tabular-nums;
  color: var(--ink-300);
}

.lg-toc-list a:hover,
.lg-toc-list a:focus-visible {
  text-decoration: none;
  color: var(--brand-ink);
}

.lg-toc-list a:hover::before,
.lg-toc-list a:focus-visible::before {
  color: var(--brand-ink);
}

.back-link-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-link:hover {
  text-decoration: none;
  color: var(--brand-blue-hover);
}

/* Closes the page instead of ending on the last clause. */
.lg-contact {
  margin-top: var(--s-8);
  padding: var(--s-6);
  border: 1px solid var(--brand-tint-16);
  border-radius: var(--r-lg);
  background-color: var(--brand-tint-06);
}

/* Scoped through .legal-prose so it outranks the generic `.legal-prose h2`
   rule further down, which would otherwise apply its --s-7 clause spacing
   to this heading. */
.legal-prose .lg-contact h2 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--ink-900);
}

.lg-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-4);
  font-weight: 600;
}

.legal-prose {
  min-width: 0;
}

.legal-prose h2 {
  margin: var(--s-7) 0 var(--s-3);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h3);
}

.legal-prose p,
.legal-prose li {
  max-width: var(--measure-body);
  margin-bottom: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-600);
}

.legal-prose ul,
.legal-prose ol {
  margin-bottom: var(--s-4);
  padding-left: var(--s-5);
}

.legal-prose li {
  position: relative;
  padding-left: var(--s-4);
}

.legal-prose li::before {
  content: '';
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--ink-300);
}

.text-caption {
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-400);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-5);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--brand-ink);
}

/* ── 17. Footer ───────────────────────────────────────────
   Twelve links have to stay reachable here: this is the only
   crawl path to the use-case pages, which are deliberately kept
   out of the primary nav. So the work is compaction, not cutting.

   The four-column sitemap that used to do this job spent three
   uppercase headings and five rows of vertical space on twelve
   links. Wrapping rows carry the same twelve in two lines, and
   the whole footer now costs about a third of the height. */
.footer {
  padding-block: var(--s-6) var(--s-4);
  border-top: 1px solid var(--hairline);
  background-color: var(--surface-sunken);
}

/* Brand left, links right, and the links are free to wrap into the
   space the brand does not use rather than sitting in fixed columns. */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4) var(--s-7);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: inherit;
}

.footer-brand img {
  flex-shrink: 0;
}

.footer-tagline {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink-500);
  transition: color var(--t-fast);
}

.footer-brand:hover .footer-tagline {
  color: var(--ink-700);
}

.footer-nav {
  display: grid;
  gap: var(--s-2);
  justify-items: end;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2) var(--s-5);
}

.footer-link {
  font-size: var(--t-sm);
  color: var(--ink-600);
  transition: color var(--t-fast);
}

.footer-links--quiet .footer-link {
  font-size: var(--t-xs);
  color: var(--ink-400);
}

.footer-link:hover {
  color: var(--brand-ink);
}

/* One hairline for the whole footer instead of two. */
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}

.footer-legalline {
  max-width: var(--measure-body);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-400);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

.footer-meta .footer-link {
  font-size: var(--t-xs);
  color: var(--ink-500);
}

/* ── 18. Forms (auth + legal pages that share this stack) ─── */
.form-group {
  margin-bottom: var(--s-4);
}

.form-group label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-700);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  min-height: 44px;
  padding: var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink-900);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--ink-400);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: 2px solid var(--brand-ink);
  outline-offset: 1px;
  border-color: var(--brand-ink);
}

/* ── 19. Responsive ───────────────────────────────────────
   Two breakpoints, applied to every component together. */
@media (min-width: 900px) {
  /* DESIGN_VARIANCE 5: the hero split is deliberately uneven,
     copy narrower than the screenshot. */
  .lp-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  }

  /* Contents rail beside the clauses. It sticks below the 64px nav so the
     section list stays reachable through eleven screens of prose, which
     is the whole reason for adding it. */
  .lg-body {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }

  .lg-toc {
    position: sticky;
    top: 84px;
  }

  .lp-story-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .lp-story-row--reverse .lp-story-copy {
    order: 2;
  }

  .lp-story-row--reverse .lp-story-visual {
    order: 1;
  }

  .lp-catchup {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

@media (max-width: 899.98px) {
  .nav-links,
  .nav-actions--desktop {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .lp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-diff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .plan-grid--focused .plan-card:not(.plan-card--active) {
    opacity: 1;
  }

  /* Below the tablet breakpoint the brand and the links stop competing
     for one line: brand on top, links left-aligned underneath. */
  .footer-top {
    display: grid;
    gap: var(--s-4);
  }

  .footer-nav {
    justify-items: start;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 639.98px) {
  .lp-hero {
    padding-block: var(--s-6) var(--s-8);
  }

  /* Over a narrow portrait crop three overhanging chips are clutter,
     and a chip hanging past the shot has nowhere to go. Both survivors
     are pulled inside the bounds and held still. */
  .lp-hero-chip {
    animation: none;
    padding: var(--s-1) var(--s-3);
    font-size: 0.75rem;
  }

  .lp-hero-chip--1 { top: -12px; right: 0; }
  .lp-hero-chip--2 { bottom: -12px; left: 0; }
  .lp-hero-chip--3 { display: none; }

  .lp-steps,
  .lp-diff-grid,
  .pr-answers-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The two price lines can each wrap on a narrow card, so the desktop
     floor that keeps the bullet lists aligned would add dead space here
     where the cards are stacked and alignment is moot. */
  .plan-price-block {
    min-height: 0;
  }

  .lp-hero-actions .btn-primary,
  .lp-hero-actions .btn-secondary,
  .mk-header-actions .btn-primary,
  .mk-header-actions .btn-secondary {
    flex: 1 1 100%;
  }

  /* The mobile captures are 375x812 portrait. Rendered at their natural
     ratio each one fills the whole viewport and the page becomes a stack of
     phone screenshots, so they are cropped to top-anchored cards instead.
     Carried over from the previous build. */
  .lp-story-visual {
    width: min(100%, 280px);
    justify-self: center;
  }

  .lp-story-picture {
    display: block;
    aspect-ratio: 4 / 5;
  }

  .lp-hero-shot picture {
    display: block;
    aspect-ratio: 3 / 4;
  }

  .lp-story-picture img,
  .lp-hero-shot img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .mk-catch-up-demo {
    padding: var(--s-4);
  }

  .mk-catch-up-demo-viewport {
    height: 520px;
  }

  .mk-catch-up-demo .bd-catch-up-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Phones keep the wrapping rows rather than falling back to a stack:
     twelve links wrap into about four lines here, where the old column
     sitemap needed fifteen rows. Tap targets get their height from the
     row gap, which is why the vertical gap grows and the horizontal
     one does not. */
  .footer {
    padding-block: var(--s-5) var(--s-4);
  }

  .footer-links,
  .footer-meta {
    gap: var(--s-3) var(--s-4);
  }

  .footer-base {
    margin-top: var(--s-4);
  }

  .lp-cta,
  .mk-cta {
    padding-inline: var(--s-5);
  }
}

/* ── 20. Reduced motion ───────────────────────────────────
   There is no entrance or scroll-driven motion to suppress. The
   only automatic animation is the topic marquee, and it needs a
   real fallback rather than the blanket rule: zeroing its duration
   would snap it to its end keyframe and leave the row parked at
   translateX(-50%), showing the second pass mid-chip. Instead the
   duplicate pass is dropped and the first wraps into a static
   block. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .lp-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .lp-marquee-track {
    animation: none !important;
    width: auto;
    transform: none;
  }

  .lp-marquee-pass {
    flex-wrap: wrap;
  }

  .lp-marquee-pass + .lp-marquee-pass {
    display: none;
  }
}

/* ── 21. Print ────────────────────────────────────────────── */
@media print {
  .nav,
  .nav-mobile-menu,
  .lp-cta,
  .mk-cta {
    display: none;
  }
}