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

:root {
  color-scheme: light;

  /* WEB-02 color roles (website design packet DESIGN.md sha256 ccbdf3f8, "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 (DESIGN.md 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, 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="/#waitlist"]) {
    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="/#waitlist"],
.approved-landing-shell > header:not(.site-header) nav a[href="/#waitlist/"] {
  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 (astra ui-review v3, row 50716): 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 (order 47487; astra review 52101): 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;
}

/* Directive 72814: 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 (order 47487): 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 journal/_review-inferock-c8-w-g4-headline-2026-09-27.md): 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;
}

/* 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 (c8 g5, ruling 118911/118917): 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;
}

.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 (c8 113656, 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 (verdict 113641): 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.
   c8 w g7 delta review P2-1: c8 g7 section 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; } }

/* 47487 F1 companion (delta review journal/_review-inferock-c8-w-g4-headline-delta-2026-09-28.md
   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; }

/* 47487 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
   journal/_review-inferock-c8-w-g4-headline-2026-09-27.md): 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;
  }
}

/* c8 g5 (review journal/_review-inferock-c8-w-g4-headline-2026-09-27.md 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;
}

/* c8 g7 MVGZ8 fix3 (delta review journal/_review-inferock-c8-w-g7-delta-review-2026-09-28.md
   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;
}

/* c8 g7 MVGZ8 fix4 (delta review journal/_review-inferock-c8-w-g7-mvgz8-fix3-review-2026-09-29
   .md 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 (DESIGN.md "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 =====
   DESIGN.md sha256 ccbdf3f8, "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);
}

.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);
}

@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 #waitlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.approved-landing-shell #get-started #waitlist > .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 #waitlist {
    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 #waitlist > .entry-card {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

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

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

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

.approved-landing-shell #get-started #waitlist > .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 #waitlist > .entry-card > .btn {
  align-self: start;
  width: 100%;
  margin-top: 1rem;
}

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

.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 (platform ruling 135315; 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 (DESIGN.md sha256 ccbdf3f8, "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.
 */
.approved-landing-shell .reading-page {
  --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 journal/_review-inferock-c8-g10-linerev3-2026-09-29.md, design 142636
   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. */
.approved-landing-shell .reading-toc {
  position: sticky;
  top: var(--space-5);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

.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 (primary read 140433): 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 (primary read 140433): 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 journal/_review-inferock-c8-g10-linerev3-2026-09-29.md): 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 journal/_review-inferock-c8-g10-linerev3-2026-09-29.md, design
     142636 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 c8-g9 LR review / primary read
   140172): 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 (145700): 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;
  }
}

/* E2EE text of record (145950 + 146022), astra placement 145894: one grouped block under the unchanged H1 and one
   line in the pricing hero above the tier cards. Layout only; the words come from the text of record. */
.approved-landing-shell .hero-narrative .hero-e2ee { margin: 1rem 0 1.25rem; }
.approved-landing-shell .hero-narrative .hero-e2ee-lead { margin: 0; color: var(--ink); font-size: 1.125rem; font-weight: 650; line-height: 1.45; }
.approved-landing-shell .hero-narrative .hero-e2ee-scope { margin: 0.25rem 0 0; color: #53647c; font-size: 0.9375rem; line-height: 1.5; }
.approved-landing-shell :is(.hero-e2ee-scope, .pricing-e2ee) a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.approved-landing-shell .pricing-hero .pricing-e2ee { max-width: 42rem; margin: 1rem auto 0; color: var(--ink); font-size: 1rem; line-height: 1.6; }