@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/Inter-latin.woff2") format("woff2");
}

/* (g5-dev RED: '/' p75 CLS 0.1024 > 0.1) a metrics-matched fallback, named
   separately from the system stack and placed right after Inter in --font-sans below, so the
   swap window (before Inter's woff2 finishes downloading) renders text at ~Inter's own
   box metrics instead of the generic sans-serif stack's much taller/wider ones. This is inert
   once Inter itself is active (Inter always renders as Inter, byte-identical) - it only changes
   which box the *fallback* occupies while Inter is still loading, which is what let the added
   .hero-e2ee block's extra height amplify the pre-existing swap-driven reflow past the CLS
   budget on '/' (untouched on /pricing's shorter hero). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica"), local("Helvetica Neue");
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
  /* Required unicode-range (PASS 9070bef3 + REQUIRED CARRY),
     derived from Inter-latin.woff2's own cmap (230 codepoints; see
     apps/product-infra/lib/landing-fallback-unicode-range.test.ts, which re-derives it from the
     font bytes and asserts this range against it) - NOT a hand-typed Google-fonts range. This
     keeps this metric-adjusted fallback scoped to glyphs Inter itself covers, so any glyph Inter
     lacks (e.g. U+2190/U+2192/U+2197/U+2264/U+2265) falls through to the system stack instead of
     rendering in this fallback at all times. */
  unicode-range: U+0, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A,
    U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+FEFF;
}

:root {
  color-scheme: light;

  /* WEB-02 color roles (the website design packet, "Shared visual
     system and navigation"). All landing routes consume these shared tokens. */
  --ink: #102239; /* deep navy ink: headings and primary text */
  --blue: #0759d4; /* cobalt: primary action, links, focus and active state */
  --paper: #f7f9fc; /* nearly white page background */
  --wash: #edf3fd; /* restrained pale-blue section fill and selected state */
  --line: #d8e1ec; /* fine border */
  --muted: #52647a; /* muted blue-gray text */
  --white: #ffffff; /* white content surfaces */
  --surface: #ffffff;
  --blue-soft: var(--wash);
  /* Legacy value kept for old rules only; never a highlight, success or navigation-state
     color (see WEB-02). Since FD-3 the calculator figures use the white text role. */
  --acid: #c9ff36;

  /* RGB channels let Tailwind opacity modifiers preserve the same source. */
  --ink-rgb: 16 34 57;
  --blue-rgb: 7 89 212;
  --acid-rgb: 201 255 54;
  --paper-rgb: 247 249 252;

  /* Status colors are reserved for actual states. */
  --amber: #8a4b00;
  --amber-bg: #fff4d6;

  /* Containers, reading measure and side gutters (32px desktop, 20px phone, 16px at 320). */
  --container: 75rem; /* 1200px content container */
  --container-wide: 80rem; /* 1280px wide reference container */
  --measure: 70ch; /* 68-74 character reading measure */
  --gutter: 2rem;

  /* Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-gap: clamp(3rem, 1.5rem + 5vw, 6rem); /* 48-56px phone, 80-96px desktop */

  /* Type scale: homepage H1 40-72px, page H1 34-56px, section H2 28-40px, body 16-18px. */
  --type-display: clamp(2.5rem, 1.2rem + 4.2vw, 4.5rem);
  --type-h1: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem);
  --type-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --type-h3: 1.375rem;
  --type-body: 1rem;
  --type-lead: 1.125rem;
  --type-small: 0.875rem;
  --leading-body: 1.6;
  --leading-heading: 1.1;
  --tracking-heading: -0.03em;

  /* Surfaces and controls: 12-16px modules, 10-12px controls at 44px, one light shadow. */
  --radius: 1rem;
  --radius-module: 1rem;
  --radius-control: 0.625rem;
  --shadow-1: 0 1px 2px rgb(var(--ink-rgb) / 0.05), 0 8px 24px rgb(var(--ink-rgb) / 0.06);
  --control-height: 2.75rem;
  --font-sans: Inter, "Inter Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 47.5rem) {
  :root {
    --gutter: 1.25rem;
  }
}

@media (max-width: 22.5rem) {
  :root {
    --gutter: 1rem;
  }
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

h1,
h2,
h3,
.font-display {
  font-family: var(--font-sans);
}

/*
 * The approved loss-calculator skin, shared by every public landing route.
 * Specificity and !important declarations are intentional: most historical
 * routes still carry route-local utility CSS after this shared stylesheet.
 */
.approved-landing-shell {
  /* WEB-02: one calm nearly white background role; no decorative glow. */
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-weight: 450;
  letter-spacing: -0.012em;
}

.approved-landing-shell > header:not(.site-header) {
  position: relative !important;
  top: auto !important;
  border-color: rgb(var(--ink-rgb) / 0.16) !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.approved-landing-shell > header:not(.site-header) > nav {
  max-width: 86.25rem !important;
  min-height: 5rem;
  padding: 1.25rem 1.5rem !important;
}

.approved-landing-shell > header:not(.site-header) > nav > a:first-child {
  gap: 0.7rem !important;
  color: var(--ink) !important;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.approved-landing-shell > header:not(.site-header) > nav > a:first-child::before {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--acid);
  content: "I";
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}

.approved-landing-shell > header:not(.site-header) > nav > a:first-child img {
  display: none !important;
}

/* The shared masthead renders the official Opius mark already present in its
   HTML. Keep this at the shared-shell seam so no route can fall back to a
   CSS-drawn initial. */
.approved-landing-shell .site-header .brand::before {
  display: none !important;
  content: none !important;
}

.approved-landing-shell .site-header .brand > img {
  display: block !important;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.approved-landing-shell > header:not(.site-header) > nav > div:nth-child(2) {
  gap: 2.1rem !important;
  color: var(--ink) !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
}

.approved-landing-shell .nav-menu > div {
  border-color: rgb(var(--ink-rgb) / 0.16) !important;
  border-radius: 1.15rem !important;
  background: var(--paper) !important;
  box-shadow: 0 24px 60px rgb(var(--ink-rgb) / 0.15) !important;
}

.approved-landing-shell .nav-menu a {
  border-radius: 0.8rem !important;
}

.approved-landing-shell .nav-menu a:hover {
  background: var(--white) !important;
}

@media (min-width: 64rem) {
  /* The approved desktop masthead is one flat three-link menu. */
  .approved-landing-shell > header:not(.site-header) > nav > div:nth-child(2) > .nav-group:first-child > button,
  .approved-landing-shell > header:not(.site-header) > nav > div:nth-child(2) > .nav-group:nth-child(2),
  .approved-landing-shell > header:not(.site-header) > nav > div:nth-child(2) > a[href="/docs/"],
  .approved-landing-shell > header:not(.site-header) > nav > div:nth-child(2) > a[href="/careers/"],
  .approved-landing-shell > header:not(.site-header) > nav > div:last-child > a:not([href="/#product-choices"]) {
    display: none !important;
  }

  .approved-landing-shell > header:not(.site-header) > nav > div:nth-child(2) > .nav-group:first-child .nav-menu {
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .approved-landing-shell > header:not(.site-header) > nav > div:nth-child(2) > .nav-group:first-child .nav-menu > div {
    display: flex !important;
    gap: 2.1rem;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .approved-landing-shell > header:not(.site-header) > nav > div:nth-child(2) > .nav-group:first-child .nav-menu a {
    padding: 0.5rem 0 !important;
    border-radius: 0 !important;
    color: var(--ink) !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    white-space: nowrap;
  }

  .approved-landing-shell > header:not(.site-header) > nav > div:nth-child(2) > .nav-group:first-child .nav-menu a span {
    display: none !important;
  }
}

.approved-landing-shell > header:not(.site-header) nav a[href="/#product-choices"],
.approved-landing-shell > header:not(.site-header) nav a[href="/#product-choices/"] {
  border-radius: 999px !important;
  background: var(--blue) !important;
  color: var(--white) !important;
  box-shadow: 0 10px 28px rgb(var(--blue-rgb) / 0.2) !important;
}

.approved-landing-shell h1,
.approved-landing-shell h2,
.approved-landing-shell h3 {
  color: var(--ink) !important;
  font-weight: 750 !important;
  letter-spacing: var(--tracking-heading) !important;
}

/*
 * 250P P2: the .approved-landing-shell h1/h2/h3 rule
 * above forces `color: var(--ink) !important` on every heading, so the three supporting
 * headings on the navy (bg-ink) trust-commitments band render ink-on-ink and vanish.
 * Restore the authored light heading (they already carry `text-white`), scoped to the
 * navy band so no light-background heading is affected.
 */
.approved-landing-shell .bg-ink .trust-item h2 {
  color: #fff !important;
}

/*
 * Same root cause on the dark bg-slate-950 contact band of /privacy and /terms (RUN10
 * re-walk): its H2 inherits `text-white` from the section, but the h1/h2/h3 rule above
 * repaints it ink on near-black, 1.16:1. Restore the band's own light text for every
 * heading in it, scoped to that band so no light-background heading is affected.
 */
.approved-landing-shell .bg-slate-950 h1,
.approved-landing-shell .bg-slate-950 h2,
.approved-landing-shell .bg-slate-950 h3 {
  color: #fff !important;
}

/*
 * RUN10 outside contrast scan: Tailwind's slate-400 (2.56:1 on white) and slate-500 (4.39:1 on
 * the paper background) are under AA for the small labels, table headers and notes that use
 * them. Resolve both to the shared --muted token (about 6:1 on white, 5.6:1 on paper). Light
 * surfaces only: text on a dark band sets its own light text class.
 */
.approved-landing-shell .text-slate-400,
.approved-landing-shell .text-slate-500 {
  color: var(--muted);
}

.approved-landing-shell main > section:first-child:not(.recognition-bridge) {
  padding-top: clamp(4.75rem, 9vw, 8.25rem) !important;
  padding-bottom: clamp(4.75rem, 8vw, 7.5rem) !important;
}

/* WEB-02 type scale: a page H1 is 34-56px; the homepage hero uses the display step below. */
.approved-landing-shell main > section:first-child h1 {
  max-width: 66rem !important;
  font-size: var(--type-h1) !important;
  font-weight: 750 !important;
  line-height: var(--leading-heading) !important;
  letter-spacing: var(--tracking-heading) !important;
}

.approved-landing-shell .hero-dark,
.approved-landing-shell .hero-radial,
.approved-landing-shell .pricing-hero {
  /* Item 3 R1: the secondary-hero acid/lime
     radial glow is removed; the hero now inherits the approved paper + blue body
     shell through the transparent background. Lime is front-page-H1-accent only. */
  background: transparent !important;
  color: var(--ink) !important;
}

.approved-landing-shell .hero-dark p,
.approved-landing-shell .hero-radial p,
.approved-landing-shell .pricing-hero p {
  color: var(--muted) !important;
}

/* UX-19: customer-facing scope, status, navigation, and the complete legal body
   lead each legal page. The pinned consent package remains verbatim and follows
   the final legal section as secondary revision detail in DOM and visual order. */
.approved-landing-shell [data-legal-package] {
  margin-block: 0;
  border-block: 1px solid rgb(var(--ink-rgb) / 0.1);
  background: var(--white);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.65;
}

/* The ghost secondary CTA (border-white/[0.18] bg-white/[0.08]
   text-white) was drawn for the old dark hero; on the transparent light hero it
   rendered white on paper (1.08:1), invisible. Restyle exactly that pattern as the
   light-theme secondary action: ink text on white with the theme's ink hairline.
   Markup, copy and link targets are unchanged (the legal hero sits inside the
   pinned consent body). */
.approved-landing-shell :is(.hero-radial, .hero-dark, .pricing-hero) a.text-white.bg-white\/\[0\.08\] {
  color: var(--ink) !important;
  background-color: var(--white) !important;
  border-color: rgb(var(--ink-rgb) / 0.16) !important;
}

.approved-landing-shell :is(.hero-radial, .hero-dark, .pricing-hero) a.text-white.bg-white\/\[0\.08\]:hover {
  background-color: var(--paper) !important;
}

/* Item 4: the front-page hero H1 gets a touch more leading so the
   opaque acid box on the accent line never covers the previous line's descenders
   (e.g. the "y" of "your"). Scoped to the loss-calculator hero so other pages'
   first-section headings keep their tighter leading. */
.approved-landing-shell .loss-calculator .hero h1 {
  font-size: var(--type-display) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
}

/* F1 (review finding): the .accent
   span is an atomic inline (display: inline-block + rotate transform), so Chromium
   treats it as a break opportunity and the trailing period can wrap onto its own
   line, orphaned below the lime highlighter. Keeping the accent word and the period
   in one no-wrap run stops that; visible text is unchanged. */
.approved-landing-shell .loss-calculator .hero h1 .accent-run {
  white-space: nowrap;
}

/*
 * Mobile hero accent padding. The lime highlighter span behind the hero's accent word is the
 * nearest framed box around that text (an inline-block with its own background and a slight
 * rotation), so its own horizontal padding is the clearance between the word and that box's
 * inner edge. The shared accent padding, trimmed further by the rotation's effect on the span's
 * axis-aligned bounding box, under-shoots a 4px minimum inner-edge clearance at every width
 * below ~530px, where the display type size has reached its clamp minimum. The outer containers
 * (the heading, the hero column and grid, the viewport) never move that measure, so widening
 * their padding would do nothing; only the span's own padding can. Scoped to the hero accent
 * alone (the shared accent rule other pages reuse is untouched) and to the existing 47.5rem
 * mobile breakpoint, so the desktop layout is unchanged. At a 390px-wide viewport the clearance
 * goes from about 3.8px to 5.4px. No copy change; the visible wording is untouched.
 */
@media (max-width: 47.5rem) {
  .approved-landing-shell .loss-calculator .hero h1 .accent {
    padding-left: 0.14em;
    padding-right: 0.14em;
  }
}

/* WEB-02 button hierarchy: primary (cobalt fill), secondary (white with a fine border) and
   link, every button at least 44px tall with the one 10px control radius and no glow. */
.approved-landing-shell button:not(#menuButton):not(.reset-button):not(.demo-slot),
.approved-landing-shell a[class*="bg-gold"],
.approved-landing-shell a[class*="bg-ink"],
.approved-landing-shell a[class*="bg-blue"],
.approved-landing-shell .btn,
.approved-landing-shell .entry-product-primary,
.approved-landing-shell [data-submit] {
  border-radius: var(--radius-control) !important;
}

.approved-landing-shell a[class*="bg-gold"],
.approved-landing-shell a[class*="bg-ink"],
.approved-landing-shell .btn,
.approved-landing-shell .entry-product-primary {
  min-height: var(--control-height);
  align-items: center;
}

.approved-landing-shell a[class*="bg-gold"],
.approved-landing-shell button[class*="bg-gold"],
.approved-landing-shell [data-submit],
.approved-landing-shell .btn-primary {
  background: var(--blue) !important;
  color: var(--white) !important;
  box-shadow: none !important;
}

.approved-landing-shell .btn-secondary {
  border: 1px solid var(--line);
  background: var(--white) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.approved-landing-shell .btn-secondary:hover {
  border-color: rgb(var(--ink-rgb) / 0.32);
}

.approved-landing-shell :is(article, .rounded-2xl, .rounded-3xl, .doc-card, .entry-card, .evidence-surface, .cost-panel, .access-request) {
  border-radius: var(--radius-module) !important;
}

/* WEB-02: subtle border before shadow; one light shadow level on the modules that carry one. */
.approved-landing-shell :is(.entry-card, .evidence-surface, .cost-panel, .access-request, .doc-card, .recognition-badge) {
  box-shadow: var(--shadow-1) !important;
}

/* UX-29: start product-path cards with the customer's job; the product name
   follows as a compact identifier instead of competing with the decision. */
.approved-landing-shell .entry-card > h3 {
  margin: 0 0 0.75rem;
}

.approved-landing-shell .entry-card > h3 + .eyebrow {
  margin-bottom: 1.25rem;
}

/* UX-29/UX-31: a third job-led card (Dedicated)
   joins Watch and Serve. scripts/landing/styles.css sets .entry-grid to 2
   equal columns above 760px and 1 column (stacked) at/below it; this scopes
   the 3-column override to #get-started only, and only above that same
   760px breakpoint, so the existing phone stack is untouched. */
@media (min-width: 761px) {
  .approved-landing-shell #get-started .entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.approved-landing-shell section[class*="bg-white"],
.approved-landing-shell section[class*="bg-paper"],
.approved-landing-shell section[class*="bg-warm"] {
  background: transparent !important;
}

.approved-landing-shell article,
.approved-landing-shell .doc-card,
.approved-landing-shell .mobile-docs {
  border-color: rgb(var(--ink-rgb) / 0.14) !important;
}

.approved-landing-shell input,
.approved-landing-shell textarea,
.approved-landing-shell select {
  border-color: rgb(var(--ink-rgb) / 0.2) !important;
  border-radius: 0.8rem !important;
  background: var(--white) !important;
}

.approved-landing-shell .faq-item {
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.18);
  border-radius: 0 !important;
}

.approved-landing-shell .faq-item > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 1rem;
  padding: 1.55rem 0;
  cursor: pointer;
  list-style: none;
}

.approved-landing-shell .faq-item > summary::-webkit-details-marker {
  display: none;
}

.approved-landing-shell .faq-item > summary::after {
  content: "+";
  color: var(--blue);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.approved-landing-shell .faq-item[open] > summary::after {
  content: "−";
}

.approved-landing-shell .faq-item > summary h2 {
  margin: 0 !important;
  font-size: 1.08rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.025em !important;
}

.approved-landing-shell .faq-answer {
  max-width: 58rem;
  padding: 0 3.5rem 1.6rem 0;
}

.approved-landing-shell .faq-answer p {
  margin: 0 !important;
}

/* Documentation keeps its information architecture and adopts the same shell. */
.approved-landing-shell .docs-context,
.approved-landing-shell .shell {
  max-width: 86.25rem !important;
}

.approved-landing-shell .site-header .brand {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-self: start;
  gap: 0.7rem !important;
  color: var(--ink);
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  text-decoration: none;
}

/* Independent landing review R1/R2: the legal pages use source order directly,
   a compact document header, and the approved 24/40px rhythm. These selectors
   intentionally stop at the first three sections; later legal sections retain
   their pinned presentation and are not used to certify header compactness. */
.approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type {
  padding-block: 0 !important;
}

.approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type > div {
  max-width: 80rem !important;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, .7fr) !important;
  align-items: start !important;
  gap: 2.5rem !important;
  padding-block: 2.5rem !important;
}

.approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type h1 {
  font-size: 2.5rem !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}

.approved-landing-shell main:has(> [data-legal-package]) > section:nth-of-type(2) {
  padding-block: 1.5rem !important;
}

.approved-landing-shell main:has(> [data-legal-package]) > section#review-status {
  padding-block: 2.5rem !important;
}

@media (max-width: 63.99rem) {
  .approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type > div {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 47.5rem) {
  .approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type h1 {
    font-size: 2rem !important;
    letter-spacing: -0.025em !important;
  }
}

.approved-landing-shell .brand-badge,
.approved-landing-shell .status,
.approved-landing-shell .page-number {
  border-radius: 999px !important;
}

/* UX-20: keep focus treatment unambiguous across the shared landing shell,
   including controls whose utility classes suppress the browser default. */
.approved-landing-shell :is(a, button, input, summary, pre[tabindex]):focus-visible {
  outline: 3px solid var(--blue) !important;
  outline-offset: 3px !important;
}

/* The 404 page's skip-to-main link. Fixed, off-screen until a
   keyboard user reaches it (:focus-visible only, never on mouse/programmatic focus, so it is
   never painted over the page for pointer users) - the dashboard's own .skip-link pattern
   (apps/dashboard/src/styles.css) ported to the landing theme's tokens. Its own focus ring comes
   from the :is(a, ...):focus-visible union above (it is an <a>); no separate outline rule here. */
.approved-landing-shell .skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 50;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform 120ms ease;
}

.approved-landing-shell .skip-link:focus-visible {
  transform: translateY(0);
}

.approved-landing-shell .sidebar {
  border-color: rgb(var(--ink-rgb) / 0.14) !important;
  background: transparent !important;
}

.approved-landing-shell .side-link {
  border-radius: 0.8rem !important;
}

/* WEB-02: cobalt marks active navigation state; lime is not a navigation state. */
.approved-landing-shell .side-link[aria-current="page"] {
  background: var(--wash) !important;
  color: var(--blue) !important;
}

/* UX-30 L30-V1: the docs article starts level with the guide column below the
   selected-product context, keeping the document heading compact. */
.approved-landing-shell .content {
  padding-top: 2.25rem !important;
  padding-bottom: clamp(4rem, 7vw, 7rem) !important;
}

/* UX-30 L30-V1: a docs guide title uses the accepted compact page-title scale,
   32px on desktop and 28px on phones (below), not the landing hero display size. */
.approved-landing-shell .article-heading h1,
.approved-landing-shell .docs-hero h1 {
  font-size: 2rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
}

.approved-landing-shell .doc-card {
  background: var(--white) !important;
}

@media (max-width: 47.5rem) {
  .approved-landing-shell > header:not(.site-header) > nav {
    min-height: 4.5rem;
    padding-inline: 1.25rem !important;
  }

  .approved-landing-shell main > section:first-child:not(.recognition-bridge) {
    padding-top: 4rem !important;
    padding-bottom: 4.5rem !important;
  }

  .approved-landing-shell .article-heading h1,
  .approved-landing-shell .docs-hero h1 {
    font-size: 1.75rem !important;
    letter-spacing: -0.02em !important;
  }

  /* Keep the compact legal-document contract after the shared phone hero rule. */
  .approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type {
    padding-block: 0 !important;
  }

  .approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type h1 {
    font-size: 2rem !important;
    letter-spacing: -0.025em !important;
  }

  /* F2 repair (independent review 806de119): compact the review-status card on phone so
     the contents row lands strictly higher than it did at 806de119, per L19-V1. */
  .approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type > div > div:nth-child(2) {
    padding: 0.875rem !important;
  }

  .approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type > div > div:nth-child(2) > div:nth-child(2) {
    margin-top: 0.75rem !important;
    gap: 0.5rem !important;
  }

  .approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type > div > div:nth-child(2) > div:nth-child(2) > div {
    padding: 0.625rem !important;
  }

  .approved-landing-shell main:has(> [data-legal-package]) > section:first-of-type > div > div:nth-child(2) > div:nth-child(2) p {
    margin-top: 0.125rem !important;
    line-height: 1.35 !important;
  }
}

/* UX-04 behavior seam: preserve the landing layout; make next steps reachable. */
#product-choices .entry-product-primary { min-height: 48px; height: auto; padding-top: 12px; padding-bottom: 12px; text-align: center; transition: none; }
#product-choices .entry-product-detail, [data-product-back-link] { display: flex; min-height: 44px; align-items: center; justify-content: center; margin-top: 12px; color: #0a63da; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
#product-choices :is(.entry-product-primary,.entry-product-detail):focus-visible, [data-product-back-link]:focus-visible { outline: 3px solid #0a63da; outline-offset: 3px; }
/* Item 2 (verdict item 3): the selected discussion heading is the keyboard arrival point on hash navigation.
   R3QH6S addendum (UX-20 decision A): it shows the one landing focus token. */
#design-partner > h3:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Approved Entry UX-22: in-form outcome hierarchy, active-field recovery and focus. */
form[data-waitlist] { --request-blue: #0a63da; gap: 20px; }
[data-waitlist-door] > h4 { margin: 0 0 16px; font-size: 32px; line-height: 1.18; letter-spacing: -.035em; font-weight: 600; }
form[data-waitlist] label { font-size: 14px; line-height: 1.5; }
form[data-waitlist] [data-status] { margin: 0; text-align: left; font-size: 14px; line-height: 1.6; border-radius: 0 6px 6px 0; }
form[data-waitlist] [data-status]:empty { display: none; }
form[data-waitlist] [data-status]:not(:empty) { padding: 16px; border-left: 3px solid var(--request-blue); background: #e9f1ff; color: #011636; }
form[data-waitlist] [data-status] strong, form[data-waitlist] [data-status] span { display: block; }
form[data-waitlist] [data-status] strong { font-size: 15px; margin-bottom: 4px; }
form[data-waitlist] [data-status][data-state="error"], form[data-waitlist] [data-status][data-state="invalid"] { color: #b42318; border-color: #b42318; background: #fff1f0; }
form[data-waitlist] [data-status][data-state="unknown"] { color: #8a4a00; border-color: #8a4a00; background: #fff7ed; }
form[data-waitlist] [data-status][data-state="success"] { color: #176c5c; border-color: #176c5c; background: #ecfdf3; }
/* Beat the legacy shell's important border only inside access-request forms. */
form[data-waitlist] input:not([name="website"]) { min-height: 48px; font-size: 16px; border-color: #7b8ba0 !important; border-radius: 8px !important; }
form[data-waitlist] input[aria-invalid="true"] { border-color: #b42318 !important; }
form[data-waitlist] [data-submit], form[data-waitlist] .waitlist-next-action { min-height: 48px; height: auto; padding: 12px 18px; background: var(--request-blue); color: white; border-radius: 8px !important; font-size: 15px; font-weight: 600; text-align: center; }
/* The legacy pill selector includes :not(#menuButton), giving it ID specificity. */
.approved-landing-shell form[data-waitlist] button[data-submit]:not(#menuButton) { border-radius: 8px !important; }
form[data-waitlist] .waitlist-next-action:not([hidden]) { display: flex; align-items: center; justify-content: center; }
form[data-waitlist] [hidden] { display: none !important; }
form[data-waitlist] :is(input,button,a):focus-visible, form[data-waitlist] [data-status]:focus { outline: 3px solid var(--request-blue); outline-offset: 3px; }
form[data-waitlist] .waitlist-field-error { display: block; color: #b42318; font-size: 13px; font-weight: 400; }
form[data-waitlist] .waitlist-confirmation-note { margin: 0; color: #475569; font-size: 16px; }
form[data-waitlist] [data-waitlist-disclosure] { font-size: 14px; line-height: 1.6; text-align: left; }
@media (prefers-reduced-motion: reduce) { form[data-waitlist] :is(input,button,a) { transition: none; } }
/* R3QH6S M58-V1: each DEV funnel card is sized by its own content, so the design-partner
   form follows its introduction at the approved 1.5rem instead of dropping to the taller Watch card's
   baseline. The phone stack is already one content-sized card per row and is unchanged.
   A later delta review (P2-1) moved the waitlist door and #design-partner into their
   own two-item row, [data-m58-subordinate] (dashboard-stack.ts:117), out of [data-m58-funnel]. Extend
   both rules to that selector too, so the door keeps the same no-dead-band invariant there. */
[data-m58-funnel], [data-m58-subordinate] { align-items: start; }
[data-m58-funnel] .entry-card form, [data-m58-subordinate] .entry-card form { margin-top: 0; }
@media (max-width: 700px) { [data-waitlist-door] > h4 { font-size: 28px; } }
@media (max-width: 359px) { [data-waitlist-door] > h4 { font-size: 26px; } }

/* F1 companion (delta review finding
   G1, fix 4): at <=1000px the hero-grid is one 1fr track, whose automatic minimum is its
   items' min-content. With the F1 no-wrap accent run that minimum is the width of "accountability."
   at the phone type size, so without this rule the track - eyebrow, H1, hero-copy and side card -
   widens into the side gutter at 300-302 and 360-500px. min-width: 0 keeps the track at the grid
   width; only the no-wrap run itself hangs (max 12.7px at 362px, never past the viewport). */
.approved-landing-shell .loss-calculator .hero-grid > * { min-width: 0; }

/* Item 3 headline fix 2: at the current 47.5rem hero H1 step
   (font-size: clamp(3rem, 14vw, 4.7rem) !important), the clamp floors at
   3rem (48px) below ~343px viewport width, which is wider than the
   .accent span can render "accountability" in before the hero-grid
   column (280px at 320 CSS px, 260px at 300 CSS px). A narrower type
   step keeps the word inside the column with no change at 390px+ (that
   breakpoint, and every wider one, is untouched by this rule). F3 (review
   finding): scoped to the
   front-page loss-calculator hero H1 only (specificity 0,3,1 beats the
   shared masthead's 0,2,3), so the other 7 public pages' first-section H1
   no longer shrinks below 360px. */
@media (max-width: 359px) {
  .approved-landing-shell .loss-calculator .hero h1 {
    font-size: 2.125rem !important;
  }
}

/* Review finding F5: below the
   lg breakpoint, #computation's "grid gap-5 lg:grid-cols-2" has one implicit column, so
   every <article> in it shares one track. Two of the three articles hold a font-mono
   span with an underscore-joined identifier (longest: provider_recognized_recoverable,
   32 chars) that word-break:normal/overflow-wrap:normal never breaks; that identifier's
   min-content width is each grid item's automatic minimum, which is shared by the whole
   track, so the track (and every article in it) widens past the 280px (300px) content
   width available at 320px (340px) and below - independent of copy elsewhere on the page,
   which is why the sweep found no other page affected. overflow-wrap: anywhere (not
   break-word, which does not shrink intrinsic/min-content size) lets these identifiers
   wrap, so the track's automatic minimum drops back under the content width and the
   article stays inside the grid at every width; at >=400px the identifiers already fit
   their line without wrapping, so nothing here changes there. */
#computation .font-mono {
  overflow-wrap: anywhere;
}

/* MVGZ8 fix3 (delta review finding
   P1-2): the 38 Inferock Baseline criteria lists carried list-disc/space-y-1/pl-5, none of
   which landing.css ships (unused elsewhere on the site, so the Tailwind build purges them).
   With preflight's menu,ol,ul{list-style:none;margin:0;padding:0} that left the lists with no
   bullet, no indent and no item spacing. These rules restore the same intended spacing
   (list-disc / 20px indent = pl-5 / 8px lead-in = mt-2 / 4px between items = space-y-1)
   through the existing [data-criteria-list] marker instead of undefined utility classes. */
.approved-landing-shell #inferock-baseline [data-criteria-list] {
  list-style: disc;
  margin: 8px 0 0;
  padding-left: 20px;
}
.approved-landing-shell #inferock-baseline [data-criteria-list] li {
  margin-top: 4px;
}
.approved-landing-shell #inferock-baseline [data-criteria-list] li:first-child {
  margin-top: 0;
}

/* MVGZ8 fix4 (delta review finding
   R2): the 11 group subheadings are <p class="mt-3 …">, but .approved-landing-shell
   .faq-answer p { margin: 0 !important; } (:435) zeroes mt-3, so each subheading sits flush
   under the previous list's last item and groups upward instead of with its own list. p.text-ink
   inside .faq-answer matches only these subheadings (answer paragraphs are text-slate-600), so
   this rule does not touch the R1 sentence or any Assessment scope/Required evidence text. */
.approved-landing-shell #inferock-baseline .faq-answer > p.text-ink {
  margin-top: 12px !important;
}

/* ===== WEB-02 shared shell ("Shared visual system and navigation") =====
   Rendered by scripts/landing/shared-shell.ts; behaviour in /assets/site-shell.js. Header and
   footer share the one 1200px content container with the token gutters. The header is not
   sticky, so anchors never land beneath it and the phone menu opens in flow (it never covers
   content). */
.approved-landing-shell [data-shared-site-header] [hidden] {
  display: none !important;
}

.approved-landing-shell [data-shell-container] {
  box-sizing: border-box !important;
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter)) !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
}

.approved-landing-shell .site-header {
  position: relative !important;
  top: auto !important;
  z-index: 20;
  border-bottom: 1px solid var(--line) !important;
  background: var(--paper) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.approved-landing-shell .header-inner {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: var(--space-6);
  min-height: 4.5rem !important;
  padding-block: var(--space-3) !important;
}

.approved-landing-shell .site-header .brand {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 1.0625rem;
}

.approved-landing-shell .shared-primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.approved-landing-shell .shared-primary-nav > a,
.approved-landing-shell .shell-product-toggle {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.approved-landing-shell .shell-product {
  position: relative;
}

.approved-landing-shell .shell-product-toggle {
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.approved-landing-shell .shell-product-toggle::after {
  width: 0.4rem;
  height: 0.4rem;
  margin-top: -0.2rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.approved-landing-shell .shell-product-toggle[aria-expanded="true"]::after {
  margin-top: 0.2rem;
  transform: rotate(225deg);
}

.approved-landing-shell .shell-product-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--space-2));
  left: calc(-1 * var(--space-3));
  display: none;
  min-width: 15rem;
  gap: 2px;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--white);
  box-shadow: var(--shadow-1);
  list-style: none;
}

.approved-landing-shell .shell-product-toggle[aria-expanded="true"] + .shell-product-menu,
.approved-landing-shell .site-header:not([data-shell-ready]) .shell-product:is(:hover, :focus-within) .shell-product-menu {
  display: grid;
}

.approved-landing-shell .shell-product-menu a {
  display: flex;
  min-height: var(--control-height);
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.approved-landing-shell :is(.shared-primary-nav > a, .shell-product-toggle):hover,
.approved-landing-shell .shell-product[data-current-group] > .shell-product-toggle,
.approved-landing-shell .shared-primary-nav > a[aria-current] {
  color: var(--blue);
}

.approved-landing-shell .shared-primary-nav > a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.approved-landing-shell :is(.shell-product-menu, .shell-mobile-menu) a:hover {
  background: var(--wash);
}

.approved-landing-shell :is(.shell-product-menu, .shell-mobile-menu) a[aria-current] {
  background: var(--wash);
  color: var(--blue);
}

.approved-landing-shell .site-header .header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-5);
  margin-inline-start: auto;
}

.approved-landing-shell .shared-login-link {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.approved-landing-shell .shared-login-link:hover {
  color: var(--blue);
}

.approved-landing-shell .shared-signup-cta {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  padding: 0 1.125rem;
  border-radius: var(--radius-control) !important;
  background: var(--blue) !important;
  color: var(--white) !important;
  box-shadow: none !important;
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.approved-landing-shell .shared-signup-cta:hover {
  background: #0648ad !important;
}

.approved-landing-shell .shell-menu-toggle,
.approved-landing-shell .shell-menu-close {
  display: none;
  min-width: var(--control-height);
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  padding: 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control) !important;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
}

.approved-landing-shell .shell-menu-toggle[aria-expanded="true"] {
  border-color: var(--blue);
  color: var(--blue);
}

.approved-landing-shell .shell-mobile-menu {
  display: none;
  box-sizing: border-box;
  max-width: calc(var(--container) + 2 * var(--gutter));
  gap: var(--space-2);
  margin-inline: auto;
  padding: var(--space-2) var(--gutter) var(--space-5);
  border-top: 1px solid var(--line);
}

.approved-landing-shell .shell-mobile-menu ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.approved-landing-shell .shell-mobile-menu ul + ul {
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.approved-landing-shell .shell-mobile-group {
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-3);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.approved-landing-shell .shell-mobile-menu a {
  display: flex;
  min-height: var(--control-height);
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: 0.5rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.approved-landing-shell .shell-mobile-menu > .shared-login-link {
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.approved-landing-shell .shell-mobile-menu .shell-menu-close {
  display: inline-flex;
  justify-self: start;
  margin-top: var(--space-2);
}

@media (max-width: 64rem) {
  .approved-landing-shell .header-inner {
    gap: var(--space-5);
  }

  .approved-landing-shell .shared-primary-nav {
    gap: var(--space-4);
  }
}

/* Phones: one clearly named Menu control and a visible Sign up; the desktop link row is not
   squeezed into the phone bar. */
@media (max-width: 47.5rem) {
  .approved-landing-shell .header-inner {
    gap: var(--space-3);
    min-height: 4rem !important;
    padding-block: var(--space-2) !important;
  }

  .approved-landing-shell .shared-primary-nav,
  .approved-landing-shell .site-header .header-actions > .shared-login-link {
    display: none !important;
  }

  .approved-landing-shell .site-header .header-actions {
    display: flex !important;
  }

  .approved-landing-shell .shell-menu-toggle {
    display: inline-flex;
  }

  .approved-landing-shell .shell-mobile-menu:not([hidden]) {
    display: grid;
  }
}

.approved-landing-shell .approved-site-footer {
  border-top: 1px solid var(--line) !important;
  background: var(--paper);
  color: var(--muted);
}

.approved-landing-shell .approved-footer-inner {
  padding-block: var(--space-7) var(--space-6) !important;
}

.approved-landing-shell .approved-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.9375rem;
}

.approved-landing-shell .approved-footer-brand strong {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 800;
}

.approved-landing-shell .approved-footer-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
  font-size: 0.9375rem;
}

.approved-landing-shell .footer-group-title {
  margin: 0 0 var(--space-1);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.approved-landing-shell .footer-group ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Prod staging withholds the GitHub anchor (data-publish-github-link); drop its empty item. */
.approved-landing-shell .footer-group li:empty {
  display: none;
}

.approved-landing-shell .approved-footer-links a {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
}

.approved-landing-shell .approved-footer-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.approved-landing-shell .approved-footer-copy {
  margin: var(--space-6) 0 0;
  font-size: 0.8125rem;
}

@media (max-width: 64rem) {
  .approved-landing-shell .approved-footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 47.5rem) {
  .approved-landing-shell .approved-footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .approved-landing-shell .approved-footer-links a {
    min-height: var(--control-height);
  }
}

/* WEB-02 type scale for the homepage section headings (the display step is above). */
.approved-landing-shell :is(.narrative-head, .evidence-story) h2 {
  font-size: var(--type-h2) !important;
  line-height: var(--leading-heading) !important;
}

/* WEB-02 container: the homepage sections share the header's 1200px content container and the
   token gutters, so content edges line up with the shell. */
.approved-landing-shell .loss-calculator .wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  padding-inline: var(--gutter);
}

/* ===== WEB-03 homepage composition, product pages and how it works =====
   The website design packet, "Homepage composition and product cards (WEB-03)": open editorial
   sections separated by dividing rules (not a card around every paragraph), the WEB-02 tokens,
   one strong action per section. Shared by / (main.home-page), /how-it-works/ (main.hiw-page)
   and the one product-page template /watch/ /serve/ /dedicated/ (main.product-page). */
.approved-landing-shell :is(.hiw-page, .product-page) .wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.approved-landing-shell :is(.hiw-page, .product-page) .eyebrow {
  margin: 0;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Section rhythm: one token gap between sections, a fine rule inset to the content edge. */
.approved-landing-shell .home-section {
  position: relative;
  padding-block: calc(var(--section-gap) / 2);
}

/* WEB-01 cl.9: the shared compatibility-anchor class for the 8 old
   homepage entry fragments (problem/why/how/surface/modes/capabilities/category) carries ONLY
   positioning + the scroll offset that clears the header - no visual marker. position:absolute
   with no offsets keeps each anchor at its static (in-flow) start-of-section location while
   removing it from any grid/flex layout entirely, so it can never become a grid/flex item or open
   a gap; zero width/height keeps it a rendered (not display:none), zero-area target that browsers
   can still scroll to. The 8th fragment, faq, gets no class - its alias is the existing visible
   footer FAQ link (scripts/landing/shared-shell.ts). */
.approved-landing-shell .web01-legacy-anchor {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  scroll-margin-block-start: 6rem;
}

.approved-landing-shell .home-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);
  border-top: 1px solid var(--line);
}

.approved-landing-shell .section-head {
  max-width: var(--measure);
}

.approved-landing-shell .section-head h2,
.approved-landing-shell .privacy-copy h2,
.approved-landing-shell .final-panel h2 {
  margin: 0 0 0.75rem;
  font-size: var(--type-h2) !important;
  line-height: var(--leading-heading) !important;
}

.approved-landing-shell .section-head > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-lead);
  line-height: var(--leading-body);
}

.approved-landing-shell :is(.text-link, .card-link, .pp-link) {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  color: var(--blue);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.approved-landing-shell .section-more {
  margin: 1.5rem 0 0;
}

/* Text-lane slots (scripts/landing/web03-text.ts) wrap inside their column whatever they hold. */
.approved-landing-shell [data-text-id] {
  overflow-wrap: anywhere;
}

/* 1. Hero: narrative and diagram split about 55/45 on desktop; narrative first when stacked. */
.approved-landing-shell main.home-page > section.home-hero:first-child {
  padding-top: clamp(2.5rem, 1rem + 4vw, 5rem) !important;
  padding-bottom: calc(var(--section-gap) / 2) !important;
}

.approved-landing-shell .loss-calculator .hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.approved-landing-shell .loss-calculator .hero-layout > * {
  min-width: 0;
}

.approved-landing-shell .loss-calculator .hero-narrative h1 {
  margin: 1rem 0 1.25rem;
}

.approved-landing-shell .hero-narrative .hero-copy {
  max-width: 36rem;
  margin: 0;
  font-size: var(--type-lead);
}

/* The E2EE lead + scope line
   sits as one grouped block between the H1 and the existing W3-H1 tier-choice sentence — shared
   tokens only (ink / muted / the lead and small type steps, the body leading), no new colour,
   no badge, no second highlighter. */
.approved-landing-shell .hero-narrative .hero-e2ee {
  max-width: 36rem;
  margin: 0 0 1.25rem;
}

.approved-landing-shell .hero-e2ee-lead {
  margin: 0;
  color: var(--ink);
  font-size: var(--type-lead);
  font-weight: 650;
  line-height: var(--leading-body);
}

.approved-landing-shell .hero-e2ee-scope {
  margin: 0.375rem 0 0;
  color: var(--muted);
  font-size: var(--type-small);
  line-height: var(--leading-body);
}

.approved-landing-shell .hero-e2ee-scope .text-link {
  font-size: inherit;
}

@media (max-width: 63.99rem) {
  .approved-landing-shell .loss-calculator .hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The request -> selected route -> response/receipt diagram (homepage hero and /how-it-works/). */
.approved-landing-shell .route-figure,
.approved-landing-shell .path-figure {
  margin: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-module);
}

.approved-landing-shell .route-figure {
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.approved-landing-shell .route-figure > figcaption {
  margin-bottom: 1rem;
}

.approved-landing-shell .figure-tag {
  display: inline-flex;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.approved-landing-shell :is(.route-path, .path-diagram) {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.approved-landing-shell :is(.route-stage, .path-diagram > li) {
  position: relative;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}

.approved-landing-shell .route-stage {
  background: var(--paper);
}

/* Connector + arrowhead from each stage to the next (vertical by default). */
.approved-landing-shell :is(.route-stage, .path-diagram > li) + :is(.route-stage, li)::before {
  content: "";
  position: absolute;
  top: calc(-1.75rem - 1px);
  left: 1.75rem;
  height: calc(1.75rem - 6px);
  border-left: 2px solid var(--blue);
}

.approved-landing-shell :is(.route-stage, .path-diagram > li) + :is(.route-stage, li)::after {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(1.75rem - 5px);
  border: 6px solid transparent;
  border-top-color: var(--blue);
  border-bottom: 0;
}

.approved-landing-shell .route-label {
  display: block;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.approved-landing-shell .route-options {
  display: grid;
  gap: 0.375rem;
  margin: 0.625rem 0 0;
  padding: 0;
  list-style: none;
}

.approved-landing-shell .route-options > li {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.approved-landing-shell .route-options > li.is-selected {
  border-color: var(--blue);
  box-shadow: inset 3px 0 0 var(--blue);
  color: var(--ink);
  font-weight: 600;
}

.approved-landing-shell .route-receipt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px dashed rgb(var(--blue-rgb) / 0.45);
  border-radius: 0.5rem;
  background: var(--wash);
}

.approved-landing-shell .route-receipt-label {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.approved-landing-shell .receipt-lines {
  display: grid;
  flex: 0 0 4rem;
  gap: 0.25rem;
}

.approved-landing-shell .receipt-lines > i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgb(var(--blue-rgb) / 0.35);
}

.approved-landing-shell .receipt-lines > i:nth-child(2) { width: 75%; }
.approved-landing-shell .receipt-lines > i:nth-child(3) { width: 50%; }

/* 2. Choose your setup: three equal cards; Setup / Billing / Included rows and the Sign up
   actions align across cards through one subgrid (also the DEV M58 projection's cards, whose
   rows are plain paragraphs in the same order). Natural height on phones. */
.approved-landing-shell #get-started #product-choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.approved-landing-shell #get-started #product-choices > .entry-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 1.5rem;
  border: 1px solid var(--line) !important;
  background: var(--white);
}

@media (min-width: 60rem) {
  .approved-landing-shell #get-started #product-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(7, auto);
    column-gap: 1.5rem;
    row-gap: 0;
  }

  .approved-landing-shell #get-started #product-choices > .entry-card {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .approved-landing-shell #get-started #product-choices > .entry-card > .card-rows {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.approved-landing-shell #get-started #product-choices > .entry-card > h3 {
  margin: 0 !important;
  font-size: var(--type-h3) !important;
  line-height: 1.2;
}

.approved-landing-shell #get-started #product-choices > .entry-card > [data-m58-row="purpose"] {
  margin: 0.25rem 0 1rem;
  color: var(--muted);
}

.approved-landing-shell #get-started #product-choices > .entry-card > p[data-m58-row]:not([data-m58-row="purpose"]) {
  padding-block: 0.75rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.approved-landing-shell .card-rows {
  margin: 0;
}

.approved-landing-shell .card-rows > div {
  padding-block: 0.75rem;
  border-top: 1px solid var(--line);
}

.approved-landing-shell .card-rows dt {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.approved-landing-shell .card-rows dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.approved-landing-shell #get-started #product-choices > .entry-card > .btn {
  align-self: start;
  width: 100%;
  margin-top: 1rem;
}

.approved-landing-shell #get-started #product-choices > .entry-card > :is(.card-link, .support-link) {
  align-self: start;
  justify-self: start;
  margin-top: 0.25rem;
}

/* DEV M58 output
   only ([data-m58-funnel] is stamped by spliceM58Funnel; PROD and the checked-in
   landing/index.html never carry it). The Dedicated card's row-7 secondary-action wrapper takes
   the exact position the rule above gives Watch/Serve's bare .card-link (no eighth track): a
   vertical, start-aligned stack of the kept Explore link above the restored discussion link,
   with the same 0.25rem top offset and a small internal gap. */
.approved-landing-shell #get-started [data-m58-funnel] #dedicated > .card-secondary-actions {
  align-self: start;
  justify-self: start;
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

/* .terms-link's own margin-top: 1rem (landing.css) is for a support-link standing alone after
   the cards (the kept "How service credits work" link below); inside this wrapper the flex
   `gap` above is the whole "small internal gap", so neutralize it here - .support-link's own
   44px min-height and inline-flex centering (landing.css) already apply unscoped. */
.approved-landing-shell #get-started [data-m58-funnel] #dedicated > .card-secondary-actions > .terms-link {
  margin-top: 0;
}

.approved-landing-shell #get-started > .support-link {
  margin-top: 1rem;
}

/* DEV M58 projection only: its subordinate row holds as many columns as it has cards (the
   optional Dedicated discussion alone, or the retired waitlist door beside it), never an empty
   column. */
@media (min-width: 761px) {
  .approved-landing-shell #get-started [data-m58-subordinate]:has(> .entry-card:only-child) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 40rem;
  }

  .approved-landing-shell #get-started [data-m58-subordinate]:has(> .entry-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 3. How it works: three short connected steps (run, measure, inspect). */
.approved-landing-shell :is(.step-flow, .hiw-steps) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.approved-landing-shell :is(.step-flow, .hiw-steps) > li {
  position: relative;
}

.approved-landing-shell :is(.step-flow, .hiw-steps) .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--wash);
  color: var(--blue);
  font-size: 0.8125rem;
  font-weight: 700;
}

.approved-landing-shell :is(.step-flow, .hiw-steps) h3 {
  margin: 1rem 0 0.5rem;
  font-size: var(--type-h3) !important;
  line-height: 1.25;
}

.approved-landing-shell :is(.step-flow, .hiw-steps) p {
  margin: 0;
  color: var(--muted);
  line-height: var(--leading-body);
}

.approved-landing-shell .step-connector {
  position: absolute;
  top: calc(1.125rem - 1px);
  right: -2.5rem;
  left: 3rem;
  border-top: 2px solid rgb(var(--blue-rgb) / 0.4);
}

.approved-landing-shell .step-connector::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -1px;
  border: 6px solid transparent;
  border-left-color: rgb(var(--blue-rgb) / 0.6);
  border-right: 0;
}

@media (max-width: 47.5rem) {
  .approved-landing-shell :is(.step-flow, .hiw-steps) {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .approved-landing-shell .step-flow > li {
    padding-left: 3.25rem;
  }

  .approved-landing-shell .step-flow .step-number {
    position: absolute;
    top: 0;
    left: 0;
  }

  .approved-landing-shell .step-flow h3 {
    margin-top: 0.375rem;
  }

  .approved-landing-shell .step-connector {
    top: 2.75rem;
    right: auto;
    bottom: -1.75rem;
    left: calc(1.125rem - 1px);
    border-top: 0;
    border-left: 2px solid rgb(var(--blue-rgb) / 0.4);
  }

  .approved-landing-shell .step-connector::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: -7px;
    border: 6px solid transparent;
    border-top-color: rgb(var(--blue-rgb) / 0.6);
    border-bottom: 0;
  }
}

/* 4. Privacy and qualification: the explanation beside client -> protected path -> verified
   workload, with its qualification caveat as the always-visible caption. */
.approved-landing-shell .privacy-layout {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}

.approved-landing-shell .privacy-copy > p {
  max-width: var(--measure);
  margin: 0 0 0.75rem;
  color: var(--muted);
  line-height: var(--leading-body);
}

.approved-landing-shell .privacy-copy > .section-lede {
  color: var(--ink);
  font-size: var(--type-lead);
}

.approved-landing-shell .path-figure {
  background: var(--wash);
}

.approved-landing-shell .path-diagram > li {
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
}

.approved-landing-shell .path-diagram > li:nth-child(2) {
  border: 1px dashed var(--blue);
}

.approved-landing-shell .path-figure > figcaption {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (max-width: 63.99rem) {
  .approved-landing-shell .privacy-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 5. Proof and accountability: one illustrated failure, then the usable-cost calculator. */
.approved-landing-shell .home-proof .evidence-surface {
  margin-top: 2rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--line);
  background: var(--wash) !important;
  box-shadow: none !important;
}

.approved-landing-shell .evidence-story h3 {
  margin: 0.75rem 0 1rem;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem) !important;
  line-height: 1.15;
}

/* FD-3 (WEB-02 "No lime highlight"): the calculator's outcome figure and takeaway emphasis on
   the navy panel use the white text role instead of the generated --acid lime (landing.css). */
.approved-landing-shell .cost-panel .cost-number.outcome-cost,
.approved-landing-shell .cost-panel .cost-takeaway strong {
  color: var(--white);
}

.approved-landing-shell .home-proof .proof-cost {
  margin-top: 3rem;
  padding-bottom: 0;
}

.approved-landing-shell .proof-cost-head {
  max-width: var(--measure);
  margin-bottom: 1.5rem;
}

.approved-landing-shell .proof-cost-head h3 {
  margin: 0 0 0.5rem;
  font-size: var(--type-h3) !important;
}

.approved-landing-shell .proof-quote {
  margin: 0;
  color: var(--muted);
  line-height: var(--leading-body);
}

.approved-landing-shell .proof-quote strong {
  color: var(--ink);
  font-weight: 600;
}

.approved-landing-shell .proof-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.approved-landing-shell .proof-source p {
  margin: 0;
}

.approved-landing-shell .proof-source .text-link {
  font-size: inherit;
}

.approved-landing-shell .proof-source .recognition-badge {
  display: inline-flex;
  box-shadow: none !important;
}

.approved-landing-shell .proof-source .recognition-badge img {
  width: 180px;
  height: auto;
}

/* 6. Final conversion (also the closing band of /how-it-works/). */
.approved-landing-shell .home-final::before {
  display: none;
}

.approved-landing-shell .final-panel {
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.25rem, 1rem + 2vw, 3rem);
  border-radius: var(--radius-module);
  background: var(--wash);
  text-align: center;
}

.approved-landing-shell .final-panel h2 {
  max-width: 40rem;
  margin-inline: auto;
  text-wrap: balance;
}

.approved-landing-shell .final-panel > p {
  max-width: var(--measure);
  margin: 0 auto;
  color: var(--muted);
  font-size: var(--type-lead);
  line-height: var(--leading-body);
}

.approved-landing-shell .final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}

/* /how-it-works/ and the product pages: compact page intro, reading measure. */
.approved-landing-shell main.hiw-page > section.hiw-intro:first-child,
.approved-landing-shell main.product-page > section.pp-intro:first-child {
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem) !important;
  padding-bottom: calc(var(--section-gap) / 2) !important;
}

.approved-landing-shell :is(.hiw-intro, .pp-intro) h1 {
  margin: 0.75rem 0 1rem;
}

.approved-landing-shell :is(.hiw-lede, .pp-lede) {
  max-width: var(--measure);
  margin: 0;
  color: var(--muted);
  font-size: var(--type-lead);
  line-height: var(--leading-body);
}

/* /how-it-works/ route diagram: Your app -> Inferock -> Provider and model -> Response, with the
   approved edge annotations (selected route, intended alternate route, checks on the return). */
.approved-landing-shell .call-figure {
  margin: 2rem 0 0;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-module);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.approved-landing-shell .figure-caption {
  display: block;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.approved-landing-shell .call-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 2.5rem;
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.approved-landing-shell .call-node {
  display: grid;
  gap: 0.75rem;
}

.approved-landing-shell .call-label {
  position: relative;
  display: block;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.approved-landing-shell .call-node + .call-node .call-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-2.5rem - 1px);
  width: calc(2.5rem - 6px);
  border-top: 2px solid var(--blue);
}

.approved-landing-shell .call-node + .call-node .call-label::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: -8px;
  border: 6px solid transparent;
  border-right: 0;
  border-left-color: var(--blue);
}

.approved-landing-shell .call-edge {
  display: grid;
  gap: 0.5rem;
}

.approved-landing-shell .call-edge-label {
  padding-top: 0.375rem;
  border-top: 2px solid var(--blue);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.approved-landing-shell .call-edge-label--alt {
  border-top: 2px dashed rgb(var(--blue-rgb) / 0.5);
}

/* Desktop: each annotation sits on its own edge. Tracks: app | arrow | Inferock | selected and
   alternate routes | provider | return edge | response. */
@media (min-width: 64rem) {
  .approved-landing-shell .call-path {
    grid-template-columns:
      minmax(0, 1fr) 2.5rem minmax(0, 1fr) minmax(0, 1.3fr)
      minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  .approved-landing-shell .call-node {
    align-items: center;
  }

  .approved-landing-shell .call-node + .call-node {
    grid-column: span 2;
    grid-template-columns: subgrid;
    gap: 0;
  }

  .approved-landing-shell .call-node + .call-node > .call-label {
    grid-column: 2;
  }

  .approved-landing-shell .call-edge + .call-label::before,
  .approved-landing-shell .call-edge + .call-label::after {
    display: none;
  }

  .approved-landing-shell .call-edge {
    grid-column: 1;
    grid-template-rows: 1fr 1fr;
    align-self: stretch;
    gap: 0;
  }

  .approved-landing-shell .call-edge-label {
    position: relative;
    align-self: end;
    padding: 0 0.75rem 0.375rem;
    border-top: 0;
    border-bottom: 2px solid var(--blue);
    text-align: center;
    text-wrap: balance;
  }

  .approved-landing-shell [data-call-edge="selected"] {
    margin-bottom: 0.375rem;
  }

  .approved-landing-shell .call-edge-label::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    border: 6px solid transparent;
    border-right: 0;
    border-left-color: var(--blue);
  }

  .approved-landing-shell .call-edge-label--alt {
    align-self: start;
    margin-top: 0.375rem;
    padding: 0.375rem 0.75rem 0;
    border-top: 2px dashed rgb(var(--blue-rgb) / 0.5);
    border-bottom: 0;
  }

  .approved-landing-shell .call-edge-label--alt::after {
    top: -7px;
    bottom: auto;
    border-left-color: rgb(var(--blue-rgb) / 0.5);
  }
}

@media (max-width: 63.99rem) {
  .approved-landing-shell .call-path {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .approved-landing-shell .call-node + .call-node {
    position: relative;
    padding-top: 1.75rem;
  }

  .approved-landing-shell .call-node + .call-node::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 3rem;
    left: 1.75rem;
    border-left: 2px solid var(--blue);
  }

  .approved-landing-shell .call-node + .call-node .call-label::before,
  .approved-landing-shell .call-node + .call-node .call-label::after {
    display: none;
  }

  .approved-landing-shell .call-edge {
    padding: 0 0 0.75rem 2.75rem;
  }

  .approved-landing-shell .call-edge-label {
    padding: 0.25rem 0 0.25rem 0.75rem;
    border-top: 0;
    border-left: 2px solid var(--blue);
  }

  .approved-landing-shell .call-edge-label--alt {
    border-left: 2px dashed rgb(var(--blue-rgb) / 0.5);
  }
}

/* The anatomy of one call record beside its annotations. */
.approved-landing-shell .call-record {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-module);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.approved-landing-shell .call-record > .figure-tag {
  margin: 0;
}

.approved-landing-shell .call-record > h3 {
  margin: 0.75rem 0 1rem;
  font-size: var(--type-h3) !important;
}

.approved-landing-shell .record-fields {
  margin: 0;
}

.approved-landing-shell .record-fields > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 2fr);
  gap: 0.25rem 1rem;
  padding-block: 0.625rem;
  border-top: 1px solid var(--line);
}

.approved-landing-shell .record-fields dt {
  color: var(--muted);
  font-size: 0.875rem;
}

.approved-landing-shell .record-fields dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.approved-landing-shell .record-sample {
  display: block;
  padding-top: 0.5rem;
}

.approved-landing-shell .record-sample > i {
  display: block;
  width: 60%;
  height: 6px;
  border-radius: 3px;
  background: rgb(var(--ink-rgb) / 0.12);
}

.approved-landing-shell .record-note {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 450;
  line-height: 1.5;
}

.approved-landing-shell .hiw-notes,
.approved-landing-shell .receipt-notes {
  margin: 0;
}

.approved-landing-shell .hiw-notes {
  max-width: var(--measure);
  margin-top: 2.5rem;
}

.approved-landing-shell :is(.hiw-notes, .receipt-notes) > div {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.approved-landing-shell :is(.hiw-notes, .receipt-notes) dt {
  margin: 0 0 0.375rem;
  color: var(--ink);
  font-weight: 700;
}

.approved-landing-shell :is(.hiw-notes, .receipt-notes) dd {
  margin: 0;
  color: var(--muted);
  line-height: var(--leading-body);
}

.approved-landing-shell .hiw-notes dd p + p {
  margin-top: 0.5rem;
}

.approved-landing-shell .receipt-figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: start;
  margin: 2rem 0 0;
}

.approved-landing-shell .receipt-notes {
  display: grid;
  gap: 1.5rem;
}

.approved-landing-shell .contrast-table {
  width: 100%;
  margin-top: 2rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.approved-landing-shell .contrast-table th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.approved-landing-shell .contrast-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.5;
  vertical-align: top;
}

.approved-landing-shell .contrast-table td:first-child {
  width: 30%;
  color: var(--ink);
  font-weight: 600;
}

.approved-landing-shell .contrast-table tr.is-inferock td {
  background: var(--wash);
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 47.5rem) {
  .approved-landing-shell .receipt-figure {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The category table becomes labelled stacked rows on phones (never compressed text). */
  .approved-landing-shell .contrast-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .approved-landing-shell .contrast-table :is(tbody, tr, td) {
    display: block;
  }

  .approved-landing-shell .contrast-table tr {
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--line);
  }

  .approved-landing-shell .contrast-table td {
    width: auto !important;
    padding: 0.25rem 0.75rem;
    border: 0;
  }

  .approved-landing-shell .contrast-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* The product-page template: labelled blocks on dividing rules, then the product-aware Sign up. */
.approved-landing-shell .pp-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.75rem 3rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
}

.approved-landing-shell .pp-block > h2 {
  margin: 0;
  font-size: var(--type-h3) !important;
  line-height: 1.25 !important;
}

.approved-landing-shell .pp-content {
  max-width: var(--measure);
  color: var(--muted);
  line-height: var(--leading-body);
}

.approved-landing-shell .pp-content > * {
  margin: 0;
}

.approved-landing-shell .pp-content > * + * {
  margin-top: 0.75rem;
}

.approved-landing-shell .pp-content ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.approved-landing-shell .pp-content li + li {
  margin-top: 0.375rem;
}

.approved-landing-shell .pp-content .pp-note {
  font-size: 0.875rem;
}

.approved-landing-shell .pp-content .pp-basis {
  color: var(--ink);
  font-weight: 700;
}

.approved-landing-shell .pp-next {
  position: relative;
  padding-block: 2rem calc(var(--section-gap) / 2);
}

.approved-landing-shell .pp-next::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);
  border-top: 1px solid var(--line);
}

.approved-landing-shell .pp-next-text {
  max-width: var(--measure);
  margin: 0;
  color: var(--ink);
  font-size: var(--type-lead);
  line-height: var(--leading-body);
}

.approved-landing-shell .pp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
}

@media (max-width: 47.5rem) {
  .approved-landing-shell .pp-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding-block: 1.5rem;
  }
}

/* Legacy shell: /privacy and /terms keep their accepted pre-WEB-02 header and footer bytes until
   the legal re-issue (the consent manifest pins those whole pages). These
   rules keep that legacy markup's own layout, scoped to it alone: the header that still carries the
   <details> .shared-mobile-menu, and the footer container without data-shell-container. */
.approved-landing-shell .site-header:has(.shared-mobile-menu) .header-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  max-width: 86.25rem !important;
  min-height: 5rem !important;
  margin: 0 auto;
  padding: 1.25rem 1.5rem !important;
}

.approved-landing-shell .site-header:has(.shared-mobile-menu) .shared-primary-nav {
  gap: 2.1rem;
  font-size: 0.82rem;
  font-weight: 650;
}

.approved-landing-shell .site-header:has(.shared-mobile-menu) .shared-primary-nav > a {
  min-height: 0;
  padding: 0.5rem 0;
}

.approved-landing-shell .site-header:has(.shared-mobile-menu) .header-actions {
  gap: 0.9rem;
  justify-self: end;
  margin-inline-start: 0;
}

.approved-landing-shell .site-header:has(.shared-mobile-menu) .shared-login-link {
  min-height: 0;
  font-size: 0.82rem;
  font-weight: 650;
}

.approved-landing-shell .site-header:has(.shared-mobile-menu) .shared-access-cta {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-control) !important;
  background: var(--blue);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
}

.approved-landing-shell .shared-mobile-menu {
  position: relative;
  display: none;
}

.approved-landing-shell .shared-mobile-menu > summary {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.15rem;
  list-style: none;
}

.approved-landing-shell .shared-mobile-menu > summary::-webkit-details-marker {
  display: none;
}

.approved-landing-shell .shared-mobile-menu > nav {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.75rem);
  right: 0;
  display: grid;
  min-width: 13rem;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.approved-landing-shell .shared-mobile-menu > nav > a:not(.shared-access-cta) {
  display: flex;
  min-height: var(--control-height);
  align-items: center;
  padding: 0.7rem 0.8rem;
  border-radius: 0.5rem;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
}

.approved-landing-shell .shared-mobile-menu > nav > a:not(.shared-access-cta):hover {
  background: var(--wash);
}

.approved-landing-shell .approved-footer-inner:not([data-shell-container]) {
  width: 100%;
  max-width: 86.25rem;
  margin: 0 auto;
  padding: 1.625rem 1.5rem 2.125rem !important;
}

.approved-landing-shell .approved-footer-inner:not([data-shell-container]) .approved-footer-brand {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.875rem;
  font-size: 0.875rem;
}

.approved-landing-shell .approved-footer-inner:not([data-shell-container]) .approved-footer-brand strong {
  font-size: 1rem;
}

.approved-landing-shell .approved-footer-inner:not([data-shell-container]) .approved-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.375rem;
  margin-top: 0.875rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.approved-landing-shell .approved-footer-inner:not([data-shell-container]) .approved-footer-links a {
  min-height: var(--control-height);
}

.approved-landing-shell .approved-footer-inner:not([data-shell-container]) .approved-footer-copy {
  margin: 0;
  font-size: 0.8125rem;
}

@media (max-width: 47.5rem) {
  .approved-landing-shell .site-header:has(.shared-mobile-menu) .header-inner {
    display: flex !important;
  }

  .approved-landing-shell .site-header:has(.shared-mobile-menu) :is(.shared-primary-nav, .header-actions) {
    display: none !important;
  }

  .approved-landing-shell .shared-mobile-menu {
    display: block;
    margin-left: auto;
  }

  .approved-landing-shell .approved-footer-inner:not([data-shell-container]) .approved-footer-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .approved-landing-shell .approved-footer-inner:not([data-shell-container]) .approved-footer-copy {
    width: 100%;
    margin-top: 0.75rem;
  }
}

/*
 * WEB-06B reading template (the website design packet, "Docs, trust and reading pages (WEB-06)").
 * One precise reading layout for reference pages, sharing the WEB-02 shell, tokens and controls:
 *   .reading-page        <main> of a reading page
 *   .reading-hero        compact title block: .reading-eyebrow, H1, .reading-summary, .reading-meta
 *   .reading-crosslinks  labelled cross-links: requirements / measurement / remedies
 *   .reading-layout      contents rail + body (one column below 64rem)
 *   .reading-toc         "Contents": sticky rail on desktop; .reading-toc-toggle compacts it on
 *                        phones (/assets/reading-page.js); without JavaScript the list stays open
 *   .reading-body        the document; its sections are .reading-section with anchored H2s
 *   .reading-lead, .reading-kicker, .reading-grid/.reading-item, .reading-facts (dl),
 *   .reading-table (+ -wrap; stacked labelled rows on phones), .reading-note, .reading-example
 *   (a labelled example set apart from commercial content), .reading-next (closing action band).
 * /methodology/, /standard/ and the role page use it now; /accountability/ and the legal pages
 * adopt the same classes when their owners re-issue them.
 */
/* "Reading-text token": /accountability/
 * reuses the .reading-body role (WEB-02) on a narrow content-root scope without the whole
 * .reading-page role (it has no .reading-hero/.reading-layout/.reading-toc). Bind the SAME
 * --reading-text (and the other two custom properties this rule already carries - unused by
 * /accountability/'s markup, so inert there) on that scope, in the SAME declaration block, so it
 * is literally the same token and value, never a second one. */
.approved-landing-shell .reading-page,
.approved-landing-shell .reading-text-root {
  --reading-rail: 13.5rem;
  --reading-gap: var(--space-8);
  --reading-text: rgb(var(--ink-rgb) / 0.84);
}

.approved-landing-shell .reading-hero,
.approved-landing-shell .reading-layout,
.approved-landing-shell .reading-next > div {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.approved-landing-shell main.reading-page > section.reading-hero:first-child {
  padding-top: var(--space-7) !important;
  padding-bottom: var(--space-6) !important;
}

.approved-landing-shell .reading-eyebrow,
.approved-landing-shell .reading-kicker {
  margin: 0;
  color: var(--blue);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.approved-landing-shell .reading-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.approved-landing-shell .reading-eyebrow a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.approved-landing-shell .reading-hero h1 {
  max-width: 24ch !important;
  margin: var(--space-3) 0 0;
  text-wrap: balance;
}

.approved-landing-shell .reading-page .accent {
  background: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.approved-landing-shell .reading-summary {
  max-width: var(--measure);
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--type-lead);
  line-height: var(--leading-body);
}

.approved-landing-shell .reading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-5) 0 0;
  color: var(--muted);
  font-size: var(--type-small);
  line-height: 1.5;
}

.approved-landing-shell .reading-meta > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.approved-landing-shell .reading-meta dt {
  color: var(--ink);
  font-weight: 650;
}

.approved-landing-shell .reading-meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

/* LR3-9 (independent review finding,
   item 3): the "Standard version" value ("Provisional defaults") and its native details/summary
   disclosure ("Version details") already form a vertical group inside the dd (a block-level
   <details> after the leading text); this just gives that group enough clearance that the
   summary's 3px/3px focus-visible ring (UX-20, line ~589) never touches the value line above it,
   on every width - a stable, explicit gap, not incidental line spacing. */
.approved-landing-shell .reading-meta dd details {
  margin-top: var(--space-3);
}

.approved-landing-shell .reading-crosslinks {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.approved-landing-shell .reading-crosslinks dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-7);
  margin: 0;
}

.approved-landing-shell .reading-crosslinks dl > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.approved-landing-shell .reading-crosslinks dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.approved-landing-shell .reading-crosslinks dd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
}

.approved-landing-shell .reading-crosslinks a,
.approved-landing-shell .reading-body a:not(.btn) {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(var(--blue-rgb) / 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.approved-landing-shell .reading-crosslinks a {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
}

.approved-landing-shell .reading-crosslinks a[aria-current] {
  color: var(--ink);
  text-decoration: none;
}

.approved-landing-shell :is(.reading-crosslinks, .reading-body) a:not(.btn):hover {
  text-decoration-color: currentColor;
}

.approved-landing-shell .reading-layout {
  display: grid;
  grid-template-columns: var(--reading-rail) minmax(0, 1fr);
  gap: var(--reading-gap);
  align-items: start;
  padding-top: var(--space-7);
  padding-bottom: var(--section-gap);
}

/* Contents: a persistent rail on desktop, but ONLY inside the bounded .reading-layout grid
 * (/methodology/, /standard/, /careers/founder-visibility/, /faq/ - the rail column is
 * var(--reading-rail) wide, so sticky positioning never spans more than that column).
 * A built read of /terms/, with a combined verdict confirming the SAME
 * defect on /privacy/: the standalone legal TOC (its markup keeps it inside <main> but NOT
 * inside .reading-layout) inherited this same rule, so at desktop widths it was sticky at FULL
 * PAGE WIDTH with no .reading-layout rail to constrain it - a direct #hash jump or a Tab+Enter to
 * a Contents link then landed the destination heading/body underneath the positioned (so
 * stacked-above-flow-content), full-width nav. Fix direction of record
 * (verbatim): "Keep standalone legal TOC non-sticky on desktop, or constrain it in the approved
 * bounded reading-layout sidebar." Scoping this rule to `.reading-layout .reading-toc` takes the
 * FIRST option for the standalone legal TOC (terms + privacy): it is no longer matched by any
 * desktop rule, so `position` falls back to its initial `static` value there, leaving it in normal
 * document flow (no overlay) while methodology/standard/careers/faq - the only pages whose TOC
 * lives inside .reading-layout - keep the exact persistent-rail behavior unchanged. Phone/tablet
 * behavior (<= 63.99rem) is untouched: the compact-toggle media query below already sets
 * `position: static` on every `.reading-toc` regardless of .reading-layout.
 * A later check at 720/390/320 found that scoped selector's specificity (0,3,0) is
 * HIGHER than the phone rule's `.approved-landing-shell .reading-toc { position: static }`
 * (0,2,0, inside the <= 63.99rem media query below), and with no media query of its own this rule
 * applied everywhere, so it outranked the phone rule and re-stickied the Contents rail on phones
 * for every .reading-layout page. Bounding it to `@media (min-width: 64rem)` (the exact complement
 * of the phone query's <= 63.99rem) removes it from the phone cascade entirely, so there is no
 * specificity contest there and the phone rule applies unopposed; desktop behavior is unchanged. */
@media (min-width: 64rem) {
  .approved-landing-shell .reading-layout .reading-toc {
    position: sticky;
    top: var(--space-5);
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}

/* F1 (a served read of DEV next42 /terms/ + /privacy/):
 * after a real Tab lands focus on a standalone legal
 * Contents link, the browser's native focus-scroll brings the LINK'S OWN border box to rest at the
 * viewport edge - but the painted :focus-visible ring (line ~604: 3px outline + 3px offset = 6px
 * beyond the border box) still hangs off screen, clipped at the bottom by 3.75-6.48px across both
 * pages at 1440/390/320 (e.g. terms 1440 #data-processing border bottom 899.75, ring bottom 905.75
 * vs innerHeight 900). Design direction of record (verbatim): "add sufficient focus scroll
 * clearance, preserve outline/layout, repeat real Tab with outer-ring bounds and captures."
 * scroll-margin-block adds no visible box (no shift, no spacing change - unlike margin/padding it
 * never affects layout or paint); it only tells the browser's native focus-scroll to treat the
 * link as if its block box extended by this much further on both the top and bottom edges, so the
 * scroll that brings a Tab-focused link into view settles with the WHOLE ring inside the viewport,
 * not just the link's own border box. Value = the ring's own outer extent (3px outline + 3px
 * offset = 6px) plus a 0.5rem (--space-2) cushion, so 6px of clearance is never razor-thin.
 * Scoped to `main.reading-page > .reading-toc` (the standalone legal TOC - a direct child of
 * <main>, exactly the selector the tocfix sticky-rail rule above disambiguates on, two rules up)
 * so methodology/standard/careers/faq - whose nav.reading-toc sits inside .reading-layout, never a
 * direct child of <main> - are untouched; their scroll clearance, layout and outline are unchanged. */
.approved-landing-shell main.reading-page > .reading-toc .reading-toc-list a {
  scroll-margin-block: calc(6px + var(--space-2));
}

.approved-landing-shell .reading-toc-label {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.approved-landing-shell .reading-toc-toggle {
  display: none;
}

.approved-landing-shell .reading-toc-list {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
  list-style: none;
}

.approved-landing-shell .reading-toc-list a {
  display: block;
  margin-left: -1px;
  padding: 0.4375rem 0 0.4375rem var(--space-4);
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1.4;
  text-decoration: none;
}

.approved-landing-shell .reading-toc-list a:hover {
  color: var(--ink);
}

.approved-landing-shell .reading-toc-list a[aria-current] {
  border-left-color: var(--blue);
  color: var(--blue);
  font-weight: 650;
}

/* The document column. */
.approved-landing-shell .reading-body {
  min-width: 0;
  color: var(--reading-text);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.approved-landing-shell .reading-body [id] {
  scroll-margin-top: var(--space-5);
}

.approved-landing-shell .reading-section + .reading-section,
.approved-landing-shell .reading-example + .reading-section {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}

.approved-landing-shell .reading-note + .reading-section {
  margin-top: var(--space-6);
}

/* FAQ groups are separated by space; each list already ends on its own rule. */
.approved-landing-shell .faq-group + .faq-group {
  padding-top: 0;
  border-top: 0;
}

.approved-landing-shell .reading-body h2 {
  max-width: var(--measure);
  margin: var(--space-2) 0 0;
  font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2rem) !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

.approved-landing-shell .reading-kicker + h2,
.approved-landing-shell .reading-body h2:first-child {
  margin-top: var(--space-2);
}

.approved-landing-shell .reading-body h3 {
  margin: 0;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.approved-landing-shell .reading-body :is(p, ul, ol) {
  max-width: var(--measure);
  margin: var(--space-4) 0 0;
}

.approved-landing-shell .reading-body li + li {
  margin-top: var(--space-2);
}

.approved-landing-shell .reading-lead {
  color: var(--ink);
  font-size: var(--type-lead);
}

.approved-landing-shell .reading-body code,
.approved-landing-shell .reading-body .font-mono {
  font-size: 0.875em;
  overflow-wrap: anywhere;
}

/* Parallel ideas separated by fine rules, not a rounded card around each paragraph. */
.approved-landing-shell .reading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 var(--space-6);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.approved-landing-shell .reading-grid.reading-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* Three and four items fill whole rows at every width, never 2 + 1 or 3 + 1: one column below
   48rem, then three items 3-up and four items 2 x 2; a four-step sequence (.reading-path) runs
   4-up beside the contents rail. Two items keep the auto-fit tracks (one or two per row). */
.approved-landing-shell .reading-grid:has(> .reading-item:first-child:nth-last-child(3)),
.approved-landing-shell .reading-grid:has(> .reading-item:first-child:nth-last-child(4)) {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .approved-landing-shell .reading-grid:has(> .reading-item:first-child:nth-last-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .approved-landing-shell .reading-grid:has(> .reading-item:first-child:nth-last-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .approved-landing-shell .reading-grid.reading-path:has(> .reading-item:first-child:nth-last-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.approved-landing-shell .reading-body .reading-grid {
  max-width: none;
}

.approved-landing-shell .reading-item {
  margin: 0 !important;
  padding: var(--space-4) 0 var(--space-5);
  border-top: 1px solid var(--line);
}

.approved-landing-shell .reading-item > :first-child {
  margin-top: 0;
}

.approved-landing-shell .reading-item :is(h3, .reading-item-title) {
  margin: 0;
  color: var(--ink);
  font-size: 1.0625rem !important;
  font-weight: 700;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
}

.approved-landing-shell .reading-item .reading-kicker {
  margin-bottom: var(--space-2);
}

.approved-landing-shell .reading-item p {
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* One schema for definition-style facts: label column + value on desktop, stacked on phones. */
.approved-landing-shell .reading-facts {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  margin: var(--space-5) 0 0;
  border-top: 1px solid var(--line);
}

.approved-landing-shell .reading-facts dt {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.5;
}

.approved-landing-shell .reading-facts dd {
  max-width: var(--measure);
  margin: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.approved-landing-shell .reading-facts dd p {
  margin: 0;
}

.approved-landing-shell .reading-facts dd p + p {
  margin-top: var(--space-2);
}

.approved-landing-shell .reading-entry + .reading-entry {
  margin-top: var(--space-7);
}

/* The first entry sits one step below its section heading, closer than entries sit to each other. */
.approved-landing-shell .reading-section > :not(.reading-entry) + .reading-entry {
  margin-top: var(--space-6);
}

.approved-landing-shell .reading-entry > h3 + p {
  margin-top: var(--space-2);
}

/* Tables: a quiet ruled table on desktop; labelled stacked rows on phones. */
.approved-landing-shell .reading-table-wrap {
  max-width: 100%;
  margin-top: var(--space-5);
  overflow-x: auto;
}

.approved-landing-shell .reading-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
  text-align: left;
}

.approved-landing-shell .reading-table th {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.24);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: bottom;
}

.approved-landing-shell .reading-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--reading-text);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.approved-landing-shell .reading-table td:first-child {
  color: var(--ink);
  font-weight: 650;
  overflow-wrap: normal;
}

/* A labelled note that sits between sections (for example the Baseline pointer). */
.approved-landing-shell .reading-note {
  max-width: var(--measure);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--blue);
  background: var(--wash);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* An illustrative figure, set apart from commercial content: a dashed frame, a label before the
   number, a modest figure size, and never an action inside it. */
.approved-landing-shell .reading-example {
  box-sizing: border-box;
  max-width: calc(var(--measure) + 3rem);
  margin: var(--space-7) 0 0;
  padding: var(--space-5);
  border: 1px dashed rgb(var(--ink-rgb) / 0.32);
  border-radius: var(--radius-module);
  background: var(--white);
}

.approved-landing-shell .reading-example-label {
  margin: 0 !important;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.45;
}

.approved-landing-shell .reading-example-figure {
  margin: var(--space-2) 0 0;
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.approved-landing-shell .reading-example-note {
  margin: var(--space-2) 0 0 !important;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.approved-landing-shell .reading-example .reading-example-detail {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.65;
}

.approved-landing-shell .reading-example .reading-example-detail p {
  margin: 0;
}

.approved-landing-shell .reading-example .reading-example-detail p + p,
.approved-landing-shell .reading-example .reading-example-detail > a {
  margin-top: var(--space-3);
}

/* WEB-06B verdict section 4: the compact labelled list (Rate assumption,
   Derivation, Source IDs) replacing the old run-on intro sentence. */
.approved-landing-shell .reading-example .reading-example-detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-2);
  margin: 0;
}

.approved-landing-shell .reading-example .reading-example-detail dt {
  color: var(--ink);
  font-weight: 650;
}

.approved-landing-shell .reading-example .reading-example-detail dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.approved-landing-shell .reading-example .reading-example-detail dl + p {
  margin-top: var(--space-3);
}

.approved-landing-shell .reading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.approved-landing-shell .reading-page .btn {
  min-height: var(--control-height);
  padding: 0.625rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 650;
}

/* Closing action band: one action that follows the page's purpose. */
.approved-landing-shell .reading-next {
  border-top: 1px solid var(--line);
  background: var(--wash);
}

.approved-landing-shell .reading-next > div {
  padding-block: var(--space-8);
  text-align: center;
}

.approved-landing-shell .reading-next h2 {
  max-width: 34ch;
  margin: 0 auto;
  font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2rem) !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

.approved-landing-shell .reading-next .btn {
  margin-top: var(--space-5);
}

/* FAQ groups inside the reading body. */
.approved-landing-shell .faq-group .faq-list {
  margin-top: var(--space-4);
  border-top: 1px solid rgb(var(--ink-rgb) / 0.18);
}

/* WEB-06B verdict section 3: subheads splitting a group's flat list into
   labelled clusters (e.g. Evidence's Bills and charges / Local measurement and cost controls /
   Reliability and performance / Quality and reports). The group's own H2 and each item's H3 stay
   untouched; a subhead is a real heading, never an extra nested disclosure. */
/* LR3-6 (independent review finding): the subhead
   is an h3 inside .reading-body, so two !important rules above (.approved-landing-shell h1/h2/h3's
   color/font-weight/letter-spacing, and .reading-body h3's font-size/line-height/letter-spacing)
   otherwise win regardless of this rule's higher selector specificity — !important always beats a
   non-!important declaration no matter the specificity, so overriding one requires matching
   !important here too. Scoped to .faq-subhead only; the two shared h3 rules are unchanged. */
.approved-landing-shell .faq-group .faq-subhead {
  margin: var(--space-5) 0 0;
  color: var(--muted) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.approved-landing-shell .faq-group .faq-subhead + .faq-list {
  margin-top: var(--space-3);
}

.approved-landing-shell .faq-item > summary h3 {
  margin: 0 !important;
  color: var(--ink);
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.4 !important;
}

.approved-landing-shell .faq-group .faq-answer {
  padding-right: 0;
}

.approved-landing-shell .faq-group .faq-answer p {
  max-width: var(--measure);
  color: var(--reading-text);
  font-size: 1rem;
  line-height: 1.65;
}

/* Careers: the role with its metadata and one Apply action. */
.approved-landing-shell .role-card {
  margin-top: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-module);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.approved-landing-shell .role-card h3 {
  margin: 0;
  font-size: 1.375rem !important;
  line-height: 1.3 !important;
}

.approved-landing-shell .role-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.approved-landing-shell .role-card h3 a:hover {
  color: var(--blue);
}

.approved-landing-shell .role-card > p {
  max-width: var(--measure);
  margin: var(--space-3) 0 0;
  color: var(--muted);
  line-height: var(--leading-body);
}

.approved-landing-shell .role-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: var(--space-3) var(--space-7);
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
}

.approved-landing-shell .role-meta dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.approved-landing-shell .role-meta dd {
  margin: var(--space-1) 0 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.approved-landing-shell .role-meta > div {
  min-width: 0;
}

.approved-landing-shell .role-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

.approved-landing-shell .role-actions .role-link {
  display: inline-flex;
  gap: 0.375rem;
  min-height: var(--control-height);
  align-items: center;
  color: var(--blue);
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
}

.approved-landing-shell .role-actions .role-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.approved-landing-shell .careers-roles {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-7) var(--gutter) var(--section-gap);
}

.approved-landing-shell .careers-roles > h2 {
  margin: 0;
  font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2rem) !important;
  line-height: 1.2 !important;
}

.approved-landing-shell .careers-roles > .role-card,
.approved-landing-shell .careers-roles > p {
  max-width: 52rem;
}

.approved-landing-shell .careers-roles > p {
  margin: var(--space-6) 0 0;
  color: var(--muted);
  font-size: var(--type-small);
  line-height: 1.7;
}

.approved-landing-shell .careers-roles > p a {
  color: var(--blue);
  font-weight: 600;
}

.approved-landing-shell .reading-hero .role-meta {
  max-width: 52rem;
}

@media (max-width: 63.99rem) {
  .approved-landing-shell .reading-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-top: var(--space-5);
  }

  /* Phones and tablets: Contents becomes one compact labelled control above the document. */
  .approved-landing-shell .reading-toc {
    position: static;
    max-height: none;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--white);
  }

  .approved-landing-shell .reading-toc:not([data-reading-toc-ready]) {
    padding: var(--space-4);
  }

  .approved-landing-shell .reading-toc[data-reading-toc-ready] .reading-toc-label {
    display: none;
  }

  .approved-landing-shell .reading-toc[data-reading-toc-ready] .reading-toc-toggle {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--control-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-control) !important;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 650;
    cursor: pointer;
  }

  .approved-landing-shell .reading-toc-toggle::after {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: translateY(-25%) rotate(45deg);
  }

  .approved-landing-shell .reading-toc-toggle[aria-expanded="true"]::after {
    transform: translateY(25%) rotate(-135deg);
  }

  .approved-landing-shell .reading-toc[data-reading-toc-ready]:not([data-open]) .reading-toc-list {
    display: none;
  }

  .approved-landing-shell .reading-toc[data-reading-toc-ready] .reading-toc-list {
    margin: 0 var(--space-4) var(--space-3);
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-top: var(--space-2);
  }

  .approved-landing-shell .reading-toc-list a {
    display: flex;
    min-height: var(--control-height);
    align-items: center;
    margin-left: 0;
    padding: 0 var(--space-2);
    border-left: 0;
    border-radius: var(--radius-control);
  }

  .approved-landing-shell .reading-toc-list a[aria-current] {
    background: var(--wash);
  }
}

@media (max-width: 47.99rem) {
  .approved-landing-shell main.reading-page > section.reading-hero:first-child {
    padding-top: var(--space-6) !important;
    padding-bottom: var(--space-5) !important;
  }

  .approved-landing-shell .careers-roles {
    padding-top: var(--space-5);
  }

  .approved-landing-shell .reading-summary {
    font-size: 1.0625rem;
  }

  .approved-landing-shell .reading-crosslinks dl {
    flex-direction: column;
    gap: var(--space-2);
  }

  .approved-landing-shell .reading-section + .reading-section,
  .approved-landing-shell .reading-example + .reading-section {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
  }

  .approved-landing-shell .faq-group + .faq-group {
    padding-top: 0;
  }

  .approved-landing-shell .reading-body {
    font-size: 1rem;
  }

  .approved-landing-shell .reading-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .approved-landing-shell .reading-facts dt {
    padding: var(--space-3) 0 var(--space-1);
    border-bottom: 0;
  }

  .approved-landing-shell .reading-facts dd {
    padding-top: 0;
  }

  .approved-landing-shell .reading-table,
  .approved-landing-shell .reading-table tbody,
  .approved-landing-shell .reading-table tr,
  .approved-landing-shell .reading-table td {
    display: block;
    width: auto;
  }

  .approved-landing-shell .reading-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .approved-landing-shell .reading-table tr {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
  }

  .approved-landing-shell .reading-table tr:first-child {
    border-top: 1px solid rgb(var(--ink-rgb) / 0.24);
  }

  .approved-landing-shell .reading-table td {
    padding: 0;
    border-bottom: 0;
  }

  .approved-landing-shell .reading-table td + td {
    margin-top: var(--space-3);
  }

  .approved-landing-shell .reading-table td + td::before {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    content: attr(data-label);
  }

  .approved-landing-shell .reading-example {
    padding: var(--space-4);
  }

  /* LR3-10 (independent review finding, design
     item 4): the /standard/ time-value labelled list (Rate assumption, Derivation, Source
     IDs) leaves too narrow a mono value column at this breakpoint (134px), wrapping badly. Stack
     each dt above a full-width dd instead; a small gap ties a dt to its own dd, and extra space
     before every dt but the first keeps the three pairs comfortably separated from each other.
     Desktop (the auto/1fr grid above) is untouched. */
  .approved-landing-shell .reading-example .reading-example-detail dl {
    grid-template-columns: 1fr;
    gap: var(--space-1) 0;
  }

  .approved-landing-shell .reading-example .reading-example-detail dt:not(:first-child) {
    margin-top: var(--space-3);
  }

  .approved-landing-shell .role-card {
    padding: var(--space-5);
  }

  .approved-landing-shell .role-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .approved-landing-shell .reading-next > div {
    padding-block: var(--space-7);
  }
}

/* Kickers keep their small label scale inside items and never pick up paragraph spacing. */
.approved-landing-shell .reading-body p.reading-kicker {
  margin-top: 0;
}

.approved-landing-shell .reading-item p.reading-kicker {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Reduced motion (WEB-06B N5, widened LR-4, widened again LR2-2,
   LR review): anchor jumps land without animation on every shell page - the homepage's
   #get-started/#how-it-works/#proof links, /pricing/'s compare anchors, each product page's
   in-page links, and (LR2-2) /accountability/, /how-it-works/, /privacy/ and /terms/, whose
   <main> carries no class a per-page main.<class> selector could key on. One shell-wide
   selector on body.approved-landing-shell (present on every shell page, legal pages included,
   with no legal HTML edit) replaces the four per-page main.<class> selectors; html.scroll-smooth
   otherwise outranks landing.css's reduced-motion html rule. */
@media (prefers-reduced-motion: reduce) {
  html.scroll-smooth:has(> body.approved-landing-shell) {
    scroll-behavior: auto;
  }
}

/* F1: the production waitlist label 'Request Your Invite' is longer than 'Sign up'; on the narrowest
   phones it wraps onto two lines inside the header action instead of pushing the Menu control off-screen. */
@media (max-width: 24rem) {
  .approved-landing-shell .shared-signup-cta {
    max-width: 7rem;
    padding: 0.25rem 0.75rem;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }
}

/* dane-ux S5 (lane 2; the Dane launch web proposal, 3.1 S5-S6): the launch classes the shared shell and the
   generators emit. The WEB-02 tokens above only (no new color, no font file) and no motion. Every text pair is AA on
   --paper and --wash (scripts/landing/models-prototype.test.ts computes the ratios from the :root values). They live in
   this file, not styles.css, because the docs pages load only this stylesheet and still carry the shared header. */

/* dane-ux S5: the numbered section label ("01 Results"): Inter 600, tracked capitals, muted. The number is text in the
   markup, never a CSS counter. */
.eyebrow-num {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* dane-ux S5: the pills (nav "Preview", hero "New: Dane ...", stage "Preview"): wash fill, ink text, a fine line, fully
   round, at least 24px tall. A pill that links is an <a>, never a button (S6). */
.nav-pill,
.hero-pill,
.stage-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 24px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--wash);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

/* dane-ux S5: the nav pill sits inside the Dane link, after its text. */
.nav-pill {
  margin-inline-start: var(--space-2);
}

/* dane-ux S5: the hero pill is a sentence-long link; on a phone it wraps inside its pill rather than overflow. */
.hero-pill {
  max-width: 100%;
  padding-block: var(--space-1);
  font-size: var(--type-small);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* dane-ux S5: hover is an underline, not motion. */
.hero-pill:hover,
a.stage-pill:hover,
a.nav-pill:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* dane-ux S5 (S6): a focusable pill's ring is 2px --blue, 2px off. Specificity (0,3,2) clears the shell's
   :is(a, button, input, summary, pre[tabindex]):focus-visible ring (0,3,1, also !important), wherever this file sits. */
body.approved-landing-shell :is(a.nav-pill, a.hero-pill, a.stage-pill):focus-visible,
:is(a.nav-pill, a.hero-pill, a.stage-pill):focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 2px !important;
}

/* dane-ux S5: the top launch bar. Wash fill, ink text, a fine rule under it, the link underlined. One line wherever it
   fits (every width from 48rem at the default text size) and 44px tall at most there; on a narrow phone it takes two
   12px lines inside the same 44px. It never clips or truncates (S6 reflow): no nowrap, no hidden overflow, no fixed
   height, so a zoomed or long line wraps and stays readable. */
.launch-bar {
  box-sizing: border-box;
  padding: 0.375rem var(--gutter) calc(0.375rem - 1px);
  border-bottom: 1px solid var(--line);
  background: var(--wash);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1rem;
  overflow-wrap: anywhere;
}

/* dane-ux S5: the bar's lines align with the page container. */
.launch-bar > * {
  max-width: var(--container);
  margin: 0 auto;
}

/* dane-ux S5: the bar's one link. */
.launch-bar a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 48rem) {
  /* dane-ux S5: one 20px line between 12px pads (and the 1px rule): 44px. */
  .launch-bar {
    padding-block: 0.75rem calc(0.75rem - 1px);
    font-size: var(--type-small);
    line-height: 1.25rem;
  }
}

/* dane-ux S5: model ids and prices in the monospace stack, with tabular figures. */
.model-id,
.price-cell {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* dane-ux S5: the model id chip (code.model-id): a quiet wash fill and a fine line. */
.model-id {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background: var(--wash);
  color: var(--ink);
  font-size: 0.875em;
  overflow-wrap: anywhere;
}

/* dane-ux S5: the badge ("hybrid model", "by Inferock"): small caps, ink text, a muted line. */
.badge {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 24px;
  padding: 0 var(--space-2);
  border: 1px solid var(--muted);
  border-radius: 0.375rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-variant-caps: all-small-caps;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}