/* ─────────────────────────────────────────────
   segment.css — shared shell for the audience
   landing pages (/smr/, /supply-chain/) and the
   readiness assessment.

   These are marketing peers of the homepage, so
   they use the homepage's design language, not
   the glossary's flatter reference style:

     · grey page ground (--page-bg)
     · a dark, full-bleed hero with the nav
       floating over it, rounded at the bottom
     · content in floating white panels inset
       from the page edge, carrying alternating
       brand washes (pale Forge blue / Tekhne
       cream) with white cards lifting off them
     · a dark closing block, rounded at the top

   The tokens and the button specs below are
   copied from index.html deliberately, value for
   value, so the two cannot drift apart visually.
   If the homepage's system moves, move it here
   too — better still, promote the shared parts
   out of index.html into base.css.
   ───────────────────────────────────────────── */

:root {
  --page-bg: #ebedf2;
  --panel-radius: 36px;
  --panel-gap: 16px;
  --panel-shadow: 0 1px 3px rgba(16, 18, 40, 0.04),
    0 14px 36px rgba(16, 18, 40, 0.05);
  /* The two panel washes, alternating down the page. */
  --wash-blue: #edf0fe;
  --wash-deep: #4a4aff; /* saturated Forge blue; was orange #ff7714 */
}

body {
  background: var(--page-bg);
}

/* ── Hero ──
   Full-bleed dark band spanning the whole row, with the pinned nav floating
   over it and the bottom corners rounded into the panel stack below. Same
   construction as .hero on the homepage and .demo-hero on /demo/. */
.seg-hero {
  position: relative;
  width: 100%;
  padding: 132px 0 88px;
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
  overflow: hidden;
  background: #06051a;
}
.seg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 90% at 95% 35%, rgba(88, 68, 235, 0.38) 0%, transparent 58%),
    radial-gradient(ellipse 45% 65% at 5% 95%, rgba(22, 28, 130, 0.45) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(74, 74, 255, 0.14) 0%, transparent 60%);
}
.seg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 5, 26, 0.2) 0%, rgba(6, 5, 26, 0.5) 100%);
}
.seg-hero .container {
  position: relative;
  z-index: 1;
}
.seg-hero .eyebrow {
  color: rgba(255, 255, 255, 0.55);
}
.seg-hero .eyebrow .dot {
  background: var(--accent);
}
.seg-hero h1 {
  color: var(--white);
  margin-bottom: 22px;
  max-width: 780px;
}
.seg-hero-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 620px;
  line-height: 1.7;
  margin-bottom: 14px;
}
.seg-hero-note {
  display: block;
  margin-top: 20px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  max-width: 520px;
  line-height: 1.6;
}

/* ── Buttons ──
   Specs copied from index.html so a button looks the same on every page. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  background: var(--accent);
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}
.btn-primary:hover {
  background: #3d3dd9;
  transform: translateY(-1px);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--black);
  background: transparent;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--gray-200);
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn-ghost:hover {
  border-color: var(--gray-300);
  color: var(--gray-600);
}
.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--black);
  background: var(--white);
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}
.btn-white:hover {
  background: var(--gray-100);
  transform: translateY(-1px);
}
.btn-white:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.btn-primary svg,
.btn-ghost svg,
.btn-white svg {
  width: 14px;
  height: 14px;
  flex: none;
}
/* Ghost button on the dark hero and the dark closing block, matching the
   homepage's `.cta .btn-ghost` treatment. */
.seg-hero .btn-ghost,
.seg-close .btn-ghost {
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.22);
}
.seg-hero .btn-ghost:hover,
.seg-close .btn-ghost:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

.seg-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.seg-actions-center {
  justify-content: center;
}

/* ── Panels ──
   Floating, inset from the page edge, rounded and shadowed. Washes alternate
   down the page; .seg-panel-plain stays neutral white for slim bands, the way
   the homepage's .standards row does. */
.seg-panel {
  width: calc(100% - 32px);
  max-width: 1600px;
  margin: var(--panel-gap) auto 0;
  padding: 72px 0;
  border-radius: var(--panel-radius);
  background: var(--wash-blue);
  box-shadow: var(--panel-shadow);
}
.seg-panel-orange {
  background: var(--wash-deep);
}
.seg-panel-plain {
  background: var(--white);
  padding: 44px 0;
}

/* ── Scroll-stack ──
   Mirrors the homepage: every panel pins one after another just below the nav
   and the next rises over it, like a deck of cards. Each panel is opaque, so
   the one rising covers the one behind; the 12px step in `top` leaves a thin
   strip of the panel underneath showing, which is what reads as the stack.

   KNOWN TRADEOFF, same as the homepage: panels 1, 2 and 6 are taller than the
   space below the nav (935-1212px against ~760px available at a 900px-tall
   viewport), so they pin and the next panel covers their lower portion, which
   is then not reachable. Excluding them was tried and rejected — they scrolled
   independently while the others folded, which reads as broken. The real fix
   is to split those sections so every panel fits.

   Index classes rather than :nth-of-type — that counts sections among siblings
   (these are the 2nd-7th <section> on the page), not matches of a class, so a
   positional selector silently matches nothing. */
@media (min-width: 901px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .seg-stack {
    position: sticky;
    /* lift over the panel behind: ambient depth + a soft drop shadow */
    box-shadow:
      0 -1px 0 rgba(16, 18, 40, 0.04),
      0 28px 60px -28px rgba(16, 18, 40, 0.3),
      0 2px 10px rgba(16, 18, 40, 0.05);
  }
  .seg-stack-1 { top: 78px; }
  .seg-stack-2 { top: 90px; }
  .seg-stack-3 { top: 102px; }
  .seg-stack-4 { top: 114px; }
  .seg-stack-5 { top: 126px; }
  /* The Questions panel pins like the rest. It only fits because the FAQ went
     two-column — see the note on .seg-faq. `bottom: 0` was tried earlier to
     pin it by its last line instead; that fails, because sticky-bottom drags
     the panel down to hug the fold from very early in the page and the FAQ
     ends up floating over the sections above it. */
  .seg-stack-6 { top: 138px; }

  /* The page-close block has to sit ABOVE the pinned panels: a sticky panel is
     a positioned element, so it paints over in-flow content that comes later
     in the DOM, and the footer was being covered completely. One lift on the
     wrapper now covers both the CTA and the footer inside it. */
  .seg-page-close {
    z-index: 1;
  }
}
/* On the blue wash the eyebrow picks up the deeper Forge blue, as on the
   homepage's washed panels. */
.seg-panel .eyebrow {
  color: #3a37cc;
}
.seg-panel-plain .eyebrow {
  color: var(--gray-500);
}
.seg-panel .eyebrow .dot {
  background: var(--accent) !important;
}

/* ── On the deep wash ──
   The wash is Forge #4a4aff, matching the homepage panels. White gets
   5.65:1 on it, clearing WCAG AA for normal text, with enough headroom
   that body copy can sit at 0.88 alpha (4.74:1) for hierarchy — 0.86 is
   the floor, 0.82 drops to 4.3:1 and fails. This replaced an orange wash
   (#ff7714) that gave white only 2.7:1 and forced navy text throughout.
   The white cards, tables and FAQ items on top of the wash keep their own
   colours.
   NOTE: the class is still named .seg-panel-orange. Renaming it means
   touching the markup on all three segment pages; it is the "deep wash"
   panel now regardless of the name. */
.seg-panel-orange .eyebrow {
  color: var(--white);
}
.seg-panel-orange .eyebrow .dot {
  background: var(--white) !important;
}
.seg-panel-orange .section-label {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.28);
}
.seg-panel-orange .seg-lede h2 {
  color: var(--white);
}
.seg-panel-orange .seg-lede p,
.seg-panel-orange .seg-footnote {
  color: rgba(255, 255, 255, 0.88);
}

.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --gray-500, not --gray-400: this label sits on the pale Forge-blue wash
     (#edf0fe), where --gray-400 is only 4.26:1 and fails AA. --gray-500 is
     6.81:1. Same fix as .about-main p on the homepage. */
  color: var(--gray-500);
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(16, 18, 40, 0.08);
}
.seg-lede {
  max-width: 660px;
  margin-bottom: 36px;
}
.seg-lede h2 {
  color: var(--black);
  margin-bottom: 14px;
}
.seg-lede p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.seg-lede p:last-child {
  margin-bottom: 0;
}

/* ── Problem cards ──
   White, so they lift off the panel wash. */
.seg-grid {
  display: grid;
  /* Fixed 2-up rather than auto-fit: auto-fit gave three columns at 1440px
     and stranded the fourth card alone on a second row. */
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.seg-card {
  background: var(--white);
  border: 1px solid rgba(16, 18, 40, 0.06);
  border-radius: var(--radius);
  padding: 30px 32px 26px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.seg-card:hover {
  box-shadow: 0 10px 34px rgba(16, 18, 40, 0.08);
  transform: translateY(-2px);
}
.seg-card-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent-muted);
  padding: 3px 9px;
  border-radius: 4px;
  width: fit-content;
  margin-bottom: 16px;
}
.seg-card h3 {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-bottom: 12px;
}
.seg-card p {
  font-size: 0.92rem;
  line-height: 1.68;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.seg-card p:last-child {
  margin-bottom: 0;
}
.seg-card-links {
  font-size: 0.8rem !important;
  /* --gray-300 was 2.56:1 on the white card and failed AA; --gray-400 is
     4.83:1. Same fix as the footer greys. */
  color: var(--gray-400) !important;
  padding-top: 14px;
  border-top: 1px solid var(--gray-50);
  margin-top: 18px !important;
}
.seg-card-links a {
  color: var(--gray-500);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
  transition: color 0.15s, border-color 0.15s;
}
.seg-card-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Comparison table ── */
.seg-table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid rgba(16, 18, 40, 0.06);
  border-radius: var(--radius);
}
.seg-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.seg-table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  padding: 16px 22px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
.seg-table td {
  padding: 18px 22px;
  vertical-align: top;
  line-height: 1.6;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-50);
}
.seg-table tbody tr:last-child td {
  border-bottom: none;
}
.seg-table td:first-child {
  color: var(--gray-900);
  font-weight: 500;
  width: 30%;
}
.seg-table td:last-child {
  color: var(--gray-600);
}
.seg-footnote {
  margin-top: 20px;
  font-size: 0.88rem;
  color: var(--gray-400);
  max-width: 660px;
  line-height: 1.7;
}

/* ── Proof band ──
   Slim neutral panel, the same role the homepage gives its .standards row. */
.seg-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 44px;
  text-align: center;
}
.seg-proof-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  white-space: nowrap;
}
.seg-proof-note {
  flex-basis: 100%;
  font-size: 0.86rem;
  color: var(--gray-400);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Glossary deep links ── */
.seg-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.seg-link-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--white);
  border: 1px solid rgba(16, 18, 40, 0.06);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
}
.seg-link-card:hover {
  box-shadow: 0 8px 26px rgba(16, 18, 40, 0.08);
  transform: translateY(-2px);
}
.seg-link-abbr {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-muted);
  padding: 3px 9px;
  border-radius: 4px;
  width: fit-content;
}
.seg-link-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-600);
  line-height: 1.5;
}
.seg-link-card:hover .seg-link-name {
  color: var(--accent);
}
/* The "all terms" card closes the set, so it reads as a summary rather than
   another sibling. */
.seg-link-card-all {
  background: rgba(255, 255, 255, 0.55);
  border-style: dashed;
}
.seg-link-card-all .seg-link-abbr {
  color: var(--gray-500);
  background: rgba(16, 18, 40, 0.05);
}

/* ── Closing dark block ──
   Rounded at the top and flush to the footer, matching .page-close on the
   homepage. The footer sits directly beneath it on the grey ground. */
/* ── Page close ──
   The CTA and the footer share one continuous full-bleed dark block, so the
   dark flows straight from the CTA down behind the footer, matching the
   homepage's .page-close. Previously .seg-close was an inset card with all
   four corners rounded and the page background showing around it, which read
   as a floating panel rather than the end of the page.
   Only the top corners are rounded, to meet the rounded panels above. */
.seg-page-close {
  position: relative;
  margin-top: calc(var(--panel-gap) * 3);
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 95% 22%, rgba(88, 68, 235, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 5% 50%, rgba(22, 28, 130, 0.34) 0%, transparent 55%),
    radial-gradient(ellipse 80% 36% at 50% -6%, rgba(74, 74, 255, 0.12) 0%, transparent 60%),
    #06051a;
}
.seg-close {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 96px 0;
  overflow: hidden;
  text-align: center;
  background: transparent;
}
/* The interactive metaballs shader behind the CTA, same as the homepage. The
   canvas sits under .seg-close .container (which is z-index 1), and the mask
   fades it out toward the bottom so it dissolves into the shared dark wrapper
   instead of being cut off at the footer card's edge. Driven by
   /cta-shader.js; if WebGL is unavailable the runner bails and the gradient
   on .seg-page-close shows on its own. */
#cta-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 78%);
}

.seg-close .container {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.seg-close h2 {
  color: var(--white);
  margin-bottom: 16px;
  font-size: 2.4rem;
  line-height: 1.15;
  /* Same measure as the homepage's .cta h2, so the headline breaks in a
     comparable place instead of running the full container width. */
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.seg-close p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 auto 28px;
  /* Narrower than the container. The homepage uses 360px, but this copy is
     roughly twice as long, so 480px keeps a similar feel without going ragged. */
  max-width: 480px;
}
/* Selector has to out-specify `.seg-close p` above, which is class+element and
   was winning: the note rendered at 1rem with the paragraph's `margin: 0 auto
   28px`, so it came out the same size as body copy and sat flush against the
   buttons with no gap. Matches .cta-note on the homepage: small, 24px clear of
   the actions, and 0.72 alpha rather than 0.45 — which also lifts it off the
   4.46:1 it was failing AA at. */
/* The shared .seg-actions carries margin-top: 30px, which the hero wants; the
   homepage's CTA uses 28px, so only the closing block is nudged. */
.seg-close .seg-actions {
  margin-top: 28px;
}
.seg-close p.seg-close-email {
  max-width: none;
  margin: 24px auto 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72) !important;
}
.seg-close-email a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.seg-close-email a:hover {
  color: var(--white);
}

/* ── Responsive ──
   Panel geometry tightens exactly as it does on the homepage. */
@media (max-width: 900px) {
  .seg-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  :root {
    --panel-radius: 24px;
    --panel-gap: 12px;
  }
  .seg-panel,
  .seg-close {
    width: calc(100% - 20px);
  }
}
@media (max-width: 720px) {
  .seg-hero {
    padding: 112px 0 60px;
  }
  .seg-panel {
    padding: 52px 0;
  }
  .seg-panel-plain {
    padding: 32px 0;
  }
  .seg-card {
    padding: 24px 22px 22px;
  }
  .seg-close {
    padding: 60px 0;
  }
  .seg-close h2 {
    font-size: 1.8rem;
  }
  .seg-actions .btn-primary,
  .seg-actions .btn-ghost,
  .seg-actions .btn-white {
    width: 100%;
    justify-content: center;
  }
}

/* ── FAQ ──
   The Q&A rendered here is the same text as the FAQPage JSON-LD in the page
   head, verbatim. Schema that describes content the reader cannot see is a
   structured-data violation, so the two must be changed together: edit the
   markup, edit the JSON-LD. Google retired FAQ rich results in May 2026, so
   this block earns its place as content — dense, answer-first passages are
   what AI answer engines quote — not as a SERP feature. */
/* Two columns, not one. Single-column made the Questions panel 760-1049px
   tall, well past the ~762px of space below the nav, so it could not join the
   scroll-stack without burying its own last answers. Two columns bring it to
   671-781px: operators and new builds now fit completely, suppliers is ~19px
   over at a 900px-tall viewport. Falls back to one column on narrow screens,
   where the stack is off anyway. */
.seg-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1100px;
}
@media (max-width: 900px) {
  .seg-faq {
    grid-template-columns: 1fr;
  }
}
.seg-faq-item {
  background: var(--white);
  border: 1px solid rgba(16, 18, 40, 0.06);
  border-radius: var(--radius);
  padding: 22px 26px;
}
.seg-faq-item h3 {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-bottom: 10px;
}
.seg-faq-item p {
  font-size: 0.92rem;
  line-height: 1.72;
  color: var(--gray-500);
  margin: 0;
}

/* ── Breadcrumb ──
   The hero eyebrow is the visible breadcrumb, matching the BreadcrumbList in
   the head. Same reasoning as the FAQ above: markup describes what is on the
   page. Underline rather than colour, so the crumb reads as a trail label
   first and a link second. */
.seg-hero .eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  transition: border-color 0.15s;
}
.seg-hero .eyebrow a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

/* Table captions carry the table's subject for assistive tech and parsers.
   Hidden visually because the section lede already says it on screen. */
.seg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .seg-faq-item {
    padding: 22px 22px;
  }
}

/* ── Proof marquee ──
   Four logos read as thin in a static row, so the track scrolls and repeats.
   Logos are greyed by default and come up to full colour on hover, which keeps
   the band quiet until someone looks at it.

   Heights are set per logo rather than uniformly: Deep Fission is a 9:1
   wordmark and OPG is 1.6:1, so matching their heights would make one six
   times wider than the other. These values match optical weight instead. */
.seg-proof-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.seg-proof-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: seg-marquee 34s linear infinite;
}
.seg-proof-marquee:hover .seg-proof-track {
  animation-play-state: paused;
}
.seg-proof-track img {
  display: block;
  width: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.2s, opacity 0.2s;
}
.seg-proof-track img:hover {
  filter: grayscale(0);
  opacity: 1;
}
.seg-proof-track .m-lep img { height: 26px; }
.seg-proof-track .m-opg img { height: 32px; }
.seg-proof-track .m-brotech img { height: 30px; }
.seg-proof-track .m-deepfission img { height: 18px; }

@keyframes seg-marquee {
  to { transform: translateX(calc(-50% - 32px)); }
}

/* No motion: drop the duplicate set and centre what is left. */
@media (prefers-reduced-motion: reduce) {
  .seg-proof-marquee { -webkit-mask-image: none; mask-image: none; }
  .seg-proof-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
  }
  .seg-proof-track [data-dup] { display: none; }
}
@media (max-width: 720px) {
  .seg-proof-track { gap: 44px; }
}

/* ── Lewis ──
   The compact version of the home page's Lewis section, sized for a segment
   page: the mark, the principle that lets a safety-driven buyer say yes, and
   the three things Lewis does that matter most to this audience. Dark, because
   Lewis' cyan and orange are its own identity and the panel washes above are
   deliberately kept to the parent brand's primaries. Geometry and hexes match
   lib/brand-assets.ts in the Sales Hub. */
:root {
  --lewis-cyan: #17aad8;
  --lewis-orange: #ff7715;
}
.seg-lewis {
  background: #0b0a1f;
  color: var(--white);
}
.seg-lewis .section-label { color: rgba(255, 255, 255, 0.42); }
.seg-lewis h2 { color: var(--white); }
.lewis-mark { display: block; overflow: visible; }
.lewis-mark .lewis-node,
.lewis-mark .lewis-core { fill: var(--lewis-cyan); }
.lewis-mark.is-working .lewis-core { fill: var(--lewis-orange); }
.lewis-mark.is-working .lewis-node {
  animation: lewis-node-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.lewis-mark.is-working .lewis-node:nth-of-type(2) { animation-delay: 0.35s; }
.lewis-mark.is-working .lewis-node:nth-of-type(3) { animation-delay: 0.7s; }
.lewis-mark.is-working .lewis-node:nth-of-type(4) { animation-delay: 1.05s; }
.lewis-mark.is-working .lewis-node:nth-of-type(5) { animation-delay: 1.4s; }
.lewis-mark.is-working .lewis-node:nth-of-type(6) { animation-delay: 1.75s; }
@keyframes lewis-node-pulse {
  50% { opacity: 0.5; }
}
.seg-lewis-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  max-width: 760px;
}
.seg-lewis-head .lewis-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin-top: 2px;
}
.seg-lewis-head p {
  margin: 10px 0 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}
.seg-lewis-principle {
  margin-top: 32px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 119, 21, 0.42);
  border-radius: var(--radius);
  background: rgba(255, 119, 21, 0.07);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.seg-lewis-principle svg {
  width: 20px;
  height: 20px;
  color: var(--lewis-orange);
  flex: 0 0 auto;
}
.seg-lewis-caps {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.seg-lewis-cap {
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}
.seg-lewis-cap h3 {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 6px;
}
.seg-lewis-cap p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 820px) {
  .seg-lewis-head { gap: 16px; }
  .seg-lewis-head .lewis-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .seg-lewis-caps { grid-template-columns: 1fr; }
  .seg-lewis-principle { font-size: 0.98rem; padding: 18px 20px; }
}

/* ─────────────────────────────────────────────
   Hero visual (.seg-viz)
   ─────────────────────────────────────────────
   The three segment heroes were text-only: a
   headline, a paragraph and two buttons on a
   dark band. This adds a second column holding
   one glass panel that shows the page's claim
   instead of restating it.

   The shell is shared by all three pages so
   /operators/, /new-builds/ and /suppliers/ read
   as a set; only the rows inside change. The
   glass construction (translucent white fill,
   hairline border, blue corner glow, lifted
   shadow) is the .cal-card spec from /demo/,
   so the fourth dark hero on the site matches
   the other three.

   The panel is a mockup, so it carries
   aria-hidden and each page states the same
   thing in a .seg-sr-only line beside it.
   ───────────────────────────────────────────── */

.seg-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 60px;
  align-items: center;
}
/* The headline sets its own 780px cap for the full-width hero; inside a
   column it has to follow the column instead. */
.seg-hero-grid h1,
.seg-hero-grid .seg-hero-sub,
.seg-hero-grid .seg-hero-note {
  max-width: none;
}
/* Even out the lines instead of hard-coding a <br />, which drops a single word
   onto its own line at this column width. */
.seg-hero-grid h1 {
  font-size: clamp(2.2rem, 3.6vw, 3.05rem);
  text-wrap: balance;
}

/* ── The panel ──
   A white card on the dark band, built to the .ai-widget spec from the
   homepage hero: white ground, gray-200 hairline, 16px radius, the same two
   shadows, and inner blocks on a gray-50 inset. The two widgets are the same
   object in two places, so the values are copied rather than re-invented.

   Lewis cyan carries the technical layer (panel title, column heads, record
   ids) and Gero orange marks the one state that wants a person. Both are the
   Lewis identity hexes from index.html, and on white the text cyan is #0f6f8d
   rather than #17aad8, which does not carry enough contrast at this size. */
.seg-viz {
  --viz-cyan: #0f6f8d;
  --viz-cyan-lit: #17aad8;
  --viz-orange: #ff7715;
  --viz-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  position: relative;
  overflow: hidden;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.04);
}
/* One sweep across the card on load. Same gradient the homepage widget runs
   over its result panel while Lewis is working. */
.seg-viz::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(74, 74, 255, 0.05) 40%,
    rgba(74, 74, 255, 0.13) 50%,
    rgba(74, 74, 255, 0.05) 60%,
    transparent 100%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: -140% 0;
}
.seg-viz > * {
  position: relative;
}
.seg-viz-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--viz-cyan-lit);
  box-shadow: 0 0 6px rgba(23, 170, 216, 0.8);
}

/* ── Training matrix ──
      Reproduced from the product: packages/apps/training/web/app/components/
      Training/matrix/{EmployeeMatrix,DiagonalMatrixHeader,StatusIcon}.vue in
      the Anvil repo. Marketing should show the thing itself, so the parts that
      make it recognisable are carried over rather than restyled:

        · diagonal column headers, so long certification names fit narrow
          columns (the product runs 80px columns under a 220px header; this is
          the same construction at 56 / 118, which is what a hero can hold)
        · one-character status codes in solid squares -- V verified, M manager
          approved, P pending, E expired, U not yet required -- which is how
          StatusIcon.vue renders every cell
        · the corner label, the row header's name-over-job-title stack, and a
          legend, all as the product has them

      The status colours are Nuxt UI semantics (success / info / warning /
      error / neutral), so this is the one place on the marketing site with
      green and red in it. They are product UI, not brand palette, and the
      point of the panel is that it is the real screen. ── */
.seg-viz-matrix-wrap {
  overflow-x: auto;
  /* Setting overflow-x alone makes overflow-y auto, and the header's rotated
     separators leave a few pixels the browser will offer to scroll. The matrix
     never scrolls vertically, so say so. */
  overflow-y: hidden;
  /* Body rows are white and the header band is gray-50, as in the product. */
  background: var(--white);
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
/* The last column needs a right-hand one too, to close the run. Same lean as
   the others: swinging this one the other way put its far end 121px past the
   table and gave the wrap a horizontal scrollbar the panel does not need. */
.seg-viz-matrix th.is-last .rule {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 164px;
  border-right: 1px solid var(--gray-200);
  transform-origin: bottom right;
  transform: rotate(-45deg);
  pointer-events: none;
  z-index: 3;
}
.seg-viz-matrix th .label {
  position: absolute;
  bottom: 7px;
  right: calc(50% + 8px);
  z-index: 2;
  transform-origin: bottom right;
  transform: rotate(45deg);
  white-space: nowrap;
  line-height: 1;
}

/* ── Status cells ──
      StatusIcon.vue renders every status as a solid UBadge with a fixed square
      and a one-character code, so the codes carry the distinction and the grid
      stays uniform. ── */
.seg-viz-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

.seg-viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 0 0;
  font-size: 0.7rem;
  color: var(--gray-400);
}
.seg-viz-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Lifecycle stepper (/operators/) ──
      Reproduced from packages/apps/cap/web/app/components/cap/
      CapLifecycleStepper.vue in the Anvil repo: a horizontal numbered
      lifecycle where done steps carry a check, the current one is filled with
      a ring halo, and upcoming ones are outlined. Connectors turn green behind
      the current step. Step names are the NCR sequence from RECORD_TYPE_STEPS
      in packages/apps/cap/api/seeds/cap-workflows.ts.

      That lifecycle is eleven steps and the component scrolls a long one
      horizontally, so this shows the run through Management Review and the
      count in the panel head states the full eleven. ── */
.seg-viz-steps {
  padding: 16px 14px 14px;
}
.seg-viz-step-mark i.l { left: 0; }
.seg-viz-step-mark i.r { right: 0; }
.seg-viz-step-mark i.is-todo { background: #e2e8f0; }
.is-done .seg-viz-step-dot {
  background: #16a34a;
  color: var(--white);
}
.is-current .seg-viz-step-dot {
  background: #2563eb;
  color: var(--white);
  /* ring-4 ring-blue-100 */
  box-shadow: 0 0 0 4px #dbeafe;
}
.is-todo-step .seg-viz-step-dot {
  background: var(--white);
  border: 1px solid #cbd5e1;
  color: #94a3b8;
}
.is-current .seg-viz-step-label {
  font-weight: 600;
  color: var(--gray-900);
}

/* ── ITP hold point matrix (/new-builds/) ──
      Reproduced from packages/apps/mitp/web/app/components/Mitp/
      MitpHoldPointMatrix.vue and MitpFormView.vue in the Anvil repo. The leaf
      component is one step's parties x H/W/D/V, which is twelve cells and too
      thin for a hero, so this is the same data transposed the way an ITP
      document reads: steps down the side, the parties across the top, and the
      hold-point type in the cell.

      Parties are DEFAULT_MITP_PARTIES from packages/apps/mitp/types/index.ts
      (QC Inspector, Customer, ANI). The four types and their colours are that
      component's own lookups: H Hold error, W Witness warning, D Document
      primary, V Verify success, rendered as UBadge subtle. ── */
.seg-viz-itp {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
}
/* Chips built like .ai-tool-call on the homepage: white on the inset, hairline
   border, mono label. */
.seg-viz-sources span {
  padding: 4px 9px;
  font-family: var(--viz-mono);
  font-size: 0.68rem;
  color: var(--gray-500);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}

/* ── Motion ──
      The panel assembles once on load: the head settles, the rows rise in
      sequence, the marks pop in behind them, and a single sweep crosses the
      card. Same gesture as the homepage hero widget, whose result panel scans
      while Lewis works, so the two read as the same object. It plays once and
      stops -- a hero that keeps moving competes with the headline beside it.

      Guarded on no-preference, so anyone asking for reduced motion gets the
      finished panel with no animation and nothing hidden. ── */
@media (prefers-reduced-motion: no-preference) {
  .seg-viz::after {
    animation: seg-viz-sweep 1.5s cubic-bezier(0.33, 0, 0.2, 1) 0.25s 1 both;
  }
  .seg-viz-head,
  .seg-viz-matrix-wrap,
  .seg-viz-steps,
  .seg-viz-itp,
  .seg-viz-legend,
  .seg-viz-foot {
    animation: seg-viz-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .seg-viz-legend { animation-delay: 0.62s; }
}
@keyframes seg-viz-sweep {
  from { background-position: -140% 0; }
  to { background-position: 240% 0; }
}
@keyframes seg-viz-rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes seg-viz-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Stack the panel under the copy before the columns get too narrow to
      hold a headline and a two-column row grid. ── */
@media (max-width: 980px) {
  .seg-hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .seg-hero-grid h1,
  .seg-hero-grid .seg-hero-sub {
    max-width: 640px;
  }
}
/* Eight steps across a phone leaves about 44px a column, which the names
   collide in and overflow out of. The dots still show the run and the head
   still says which step of how many, so below this the names come off. */

@media (max-width: 560px) {
  .seg-viz {
    padding: 14px;
  }
}

/* Press feedback, after the :hover rules above so it wins while the pointer
   is still down. */
.btn-primary:active,
.btn-ghost:active,
.btn-white:active {
  transform: scale(0.96);
}

/* "What is included" lists. A tick per line, hanging outside the text
   block so wrapped lines stay aligned under the first word. */
.seg-check {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seg-check li {
  position: relative;
  padding-left: 30px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray-600);
}
.seg-check li::before {
  content: "";
  position: absolute;
  top: 0.44em;
  left: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4aff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.seg-check li b {
  font-weight: 600;
  color: var(--gray-900);
}

/* The tier cards on /programs/. A .seg-card with a kicker pair on top:
   the tier name, then the one-line version of who does the work. */
.seg-tier-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.seg-card h3 .seg-tier-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--gray-400);
}

/* A checklist needs a ground of its own on the blue panels, the same way
   .seg-faq-item and .seg-table-wrap do — --wash-deep is saturated Forge
   blue, so body-grey text on it would be unreadable. */
.seg-check-card {
  background: var(--white);
  border: 1px solid rgba(16, 18, 40, 0.06);
  border-radius: var(--radius);
  padding: 30px 34px;
}
/* Long inclusion lists read better in two columns once there is room for
   them; one column below that, so no line drops under 30 characters. */


/* A tier card's link is the card's action, not a list of related reading,
   so it takes the accent rather than the quiet grey of .seg-card-links. */
.seg-card-cta {
  margin-top: 18px !important;
  padding-top: 14px;
  border-top: 1px solid var(--gray-50);
}
.seg-card-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.seg-card-cta a svg {
  width: 14px;
  height: 14px;
}
.seg-card-cta a svg {
  transition: transform 0.15s ease-out;
}
.seg-card-cta a:hover svg {
  transform: translateX(3px);
}

/* Three-up variant of .seg-grid, for the lifecycle chapters and the tier
   cards. .seg-grid is deliberately fixed 2-up (see the note there); these
   sets are three, so they get their own column count and collapse one
   step earlier, at the width where three cards start clipping their copy. */
.seg-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1040px) {
  .seg-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Light theme  ·  body.theme-light
   ══════════════════════════════════════════════════════════════════════
   The programs pages and /how-it-works/ run light: white ground, dark
   type, panels alternating white and off-white with a hairline, the way
   the design mockups these pages came from do. The closing CTA and the
   footer stay dark, so a light page still ends the way every other page
   on the site ends.

   Most of the work is done by redefining the three ground variables —
   they already drive the page, the default panel and the deep panel.
   What follows them is the text that was written white to sit on those
   grounds and has to come back to ink.
   ══════════════════════════════════════════════════════════════════════ */

body.theme-light {
  --page-bg: #ffffff;
  --wash-blue: #fafafa; /* default panel */
  --wash-deep: #ffffff; /* the alternating panel, was saturated Forge blue */
  --line: #e4e4e7;
}

/* ── Hero ──
   The two gradient overlays exist to lift white type off the navy. On a
   white ground they only muddy it, so they come off entirely. */
.theme-light .seg-hero {
  background: var(--white);
}
.theme-light .seg-hero::before,
.theme-light .seg-hero::after {
  display: none;
}
.theme-light .seg-hero h1 {
  color: var(--black);
}
.theme-light .seg-hero-sub {
  color: var(--gray-600);
}
.theme-light .seg-hero-note {
  color: var(--gray-400);
}
.theme-light .seg-hero .eyebrow {
  color: var(--gray-500);
}
.theme-light .seg-hero .eyebrow a {
  border-bottom-color: var(--gray-200);
}
.theme-light .seg-hero .eyebrow a:hover {
  border-bottom-color: var(--accent);
}
/* The ghost button reverts to the light-ground spec it has everywhere
   that is not a dark hero. */
.theme-light .seg-hero .btn-ghost {
  color: var(--black);
  border-color: var(--gray-200);
}
.theme-light .seg-hero .btn-ghost:hover {
  color: var(--gray-600);
  border-color: var(--gray-300);
  background: transparent;
}

/* ── Panels ──
   White on white needs an edge. The panel shadow stays, because it is
   what makes one panel read as rising over the last in the scroll-stack,
   and the hairline carries the edge where the shadow is too soft to. */
.theme-light .seg-panel {
  border: 1px solid var(--line);
}

/* ── The alternating panel ──
   Everything below was written white to sit on the saturated Forge-blue
   wash. The wash is white now, so it all comes back to the colours the
   same elements carry on the pale panel. */
.theme-light .seg-panel-orange .eyebrow {
  color: #3a37cc;
}
.theme-light .seg-panel-orange .eyebrow .dot {
  background: var(--accent) !important;
}
.theme-light .seg-panel-orange .section-label {
  color: var(--gray-500);
  border-bottom-color: var(--gray-200);
}
.theme-light .seg-panel-orange .seg-lede h2 {
  color: var(--black);
}
.theme-light .seg-panel-orange .seg-lede p {
  color: var(--gray-500);
}
.theme-light .seg-panel-orange .seg-footnote {
  color: var(--gray-400);
}

/* Cards read as cards against a coloured wash on their own. On white they
   need the hairline to do that work instead. */
.theme-light .seg-card,
.theme-light .seg-faq-item,
.theme-light .seg-check-card,
.theme-light .seg-table-wrap,
.theme-light .seg-link-card {
  border-color: var(--line);
}

/* ── lewis ──
   The panel was near-black with the mark glowing out of it. Light, the
   mark keeps its cyan and orange and the panel becomes another white
   surface; the orange principle strip already reads on white. */
.theme-light .seg-lewis {
  background: var(--white);
  color: var(--gray-600);
}
.theme-light .seg-lewis .section-label {
  color: var(--gray-500);
  border-bottom-color: var(--gray-200);
}
.theme-light .seg-lewis h2 {
  color: var(--black);
}
.theme-light .seg-lewis-head p {
  color: var(--gray-500);
}
.theme-light .seg-lewis-principle {
  color: var(--black);
  background: rgba(255, 119, 21, 0.06);
  border-color: rgba(255, 119, 21, 0.34);
}
.theme-light .seg-lewis-cap {
  background: #fafafa;
  border-color: var(--line);
}
.theme-light .seg-lewis-cap h3 {
  color: var(--black);
}
.theme-light .seg-lewis-cap p {
  color: var(--gray-500);
}

/* The proof band is already a white panel; on a white ground its logos
   need the same hairline the other panels get. */
.theme-light .seg-panel-plain {
  background: var(--white);
}

/* ══════════════════════════════════════════════════════════════════════
   Programs pages, part two
   Three components the mockups carry that the first pass dropped: the
   standards strip under the hero, the plan card, and the per-tier CTA
   row at the foot of the comparison table.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Standards strip ──
   Sits under the hero and answers "which standards, and where do the
   records live" before the reader has to go looking. Base colours are
   for the dark hero; .theme-light restages it below. */
.seg-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 38px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.seg-trust li {
  position: relative;
  padding-left: 23px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.seg-trust li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4aff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
.theme-light .seg-trust {
  border-top-color: var(--gray-100);
}
.theme-light .seg-trust li {
  color: var(--gray-500);
}

/* ── Plan card ──
   The tier pages end on a card rather than a loose list: what the tier
   is called, how it is priced, what is in it, and the one action. No
   figure — the shape of the price is public, the number comes out of the
   scoping call. */
.seg-plan {
  background: var(--white);
  border: 1px solid rgba(16, 18, 40, 0.06);
  border-radius: var(--radius);
  padding: 34px 36px 32px;
}
.theme-light .seg-plan {
  border-color: var(--line);
}
.seg-plan-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.seg-plan-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.seg-plan-badge {
  padding: 3px 10px;
  border: 1px solid rgba(255, 119, 21, 0.34);
  border-radius: 999px;
  background: rgba(255, 119, 21, 0.08);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #b8540c;
}
.seg-plan-shape {
  margin: 0 0 4px;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--black);
}
.seg-plan-unit {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: var(--gray-500);
}
.seg-plan .seg-check {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-100);
}
.seg-plan-actions {
  margin-top: 26px;
}
.seg-plan-terms {
  margin: 16px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--gray-400);
}

/* ── Comparison table, CTA row ──
   Each column gets its own way in, so a reader who has picked a column
   does not have to scroll back up to act on it. */
.seg-table .seg-table-cta td {
  padding-top: 20px;
  padding-bottom: 22px;
}

/* ══════════════════════════════════════════════════════════════════════
   Card icons and the hero wash
   The cards carried a number and nothing else, which made four of them in
   a row read as one undifferentiated block. An icon per card gives the
   eye something to land on and tells you which step you are looking at
   before you read the heading.
   ══════════════════════════════════════════════════════════════════════ */

.seg-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
/* The number keeps its chip, but the head row owns the spacing now. */
.seg-card-head .seg-card-num {
  margin-bottom: 0;
}
.seg-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--accent-muted);
  color: var(--accent);
}
.seg-card-icon svg {
  width: 20px;
  height: 20px;
}

/* The lewis caps take the cyan half of the mark rather than Forge blue,
   since they describe what lewis does. */
.seg-lewis-cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: rgba(23, 170, 216, 0.16);
  color: var(--lewis-cyan);
}
.seg-lewis-cap-icon svg {
  width: 18px;
  height: 18px;
}
.theme-light .seg-lewis-cap-icon {
  background: rgba(15, 111, 141, 0.1);
  color: #0f6f8d;
}

/* ── Hero wash ──
   Flat white under a hero this wide reads as unfinished. Two very low
   radial washes — Forge blue from the top left, the lewis orange from
   the top right — give it a ground without putting colour behind the
   type. Only on the light pages; the dark hero has its own overlays. */
.theme-light .seg-hero::before {
  display: block;
  background:
    radial-gradient(1100px 520px at 12% 0%, rgba(74, 74, 255, 0.085) 0%, transparent 62%),
    radial-gradient(760px 440px at 92% 10%, rgba(255, 119, 21, 0.05) 0%, transparent 62%);
}

/* ══════════════════════════════════════════════════════════════════════
   Programs pages, part three — the mockup's layout
   The export in the design reference is two-column through most of its
   length and runs its steps four across. The first build stacked
   everything full-width, which is why it read as thinner than the
   mockup at the same word count.
   ══════════════════════════════════════════════════════════════════════ */

/* Four steps across, as the mockup has them. Two up at tablet, one on a
   phone — four 24px cards at 900px would leave about 200px a column. */
.seg-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1180px) {
  .seg-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .seg-grid-4 {
    grid-template-columns: 1fr;
  }
}
/* The four-up cards are tighter than the two-up ones they share a class
   with, so the type steps down to match the narrower column. */
.seg-grid-4 .seg-card {
  padding: 24px;
}
.seg-grid-4 .seg-card h3 {
  font-size: 1.02rem;
}
.seg-grid-4 .seg-card p {
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ── Split ──
   Copy on one side, the thing it describes on the other. The weights
   are the mockup's: 5/7 where the right side is a panel, 6/6 where it
   is a card of comparable weight. */
.seg-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}
.seg-split-even {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: start;
}
.seg-split .seg-lede,
.seg-split-even .seg-lede {
  max-width: none;
  margin-bottom: 0;
}
@media (max-width: 1040px) {
  .seg-split,
  .seg-split-even {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* A tick list that sits under a lede rather than inside a card. */
.seg-ticks {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.seg-ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gray-800);
}
.seg-ticks li::before {
  content: "";
  position: absolute;
  top: 0.32em;
  left: 0;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* Plain dotted bullets, for "who this is for". */
.seg-bullets {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.seg-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gray-500);
}
.seg-bullets li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray-300);
}

/* ── Expert review rows ──
   Icon, then a title and one line. Stacked beside the copy rather than
   spread under it. */
.seg-review-list {
  display: grid;
  gap: 12px;
}
.seg-review-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.theme-light .seg-review-row {
  border-color: var(--line);
}
.seg-review-row h3 {
  margin: 0 0 2px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
}
.seg-review-row p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--gray-500);
}

/* ── Coverage panel ──
   Rebuilt against the design reference: a header carrying the scope and
   the three counts, a stacked bar that shows the split at a glance, then
   the clause rows. The bar is the part that makes the panel readable
   before you read any of it. */
.seg-cov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: -16px -16px 0;
  padding: 16px 20px;
  background: var(--gray-50);
}
.seg-cov-label {
  margin: 0 0 4px;
  font-family: var(--viz-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.seg-cov-scope {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}
.seg-cov-counts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.8rem;
  color: var(--gray-500);
}
.seg-cov-counts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.seg-cov-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}
.seg-cov-c { background: #22c55e; }
.seg-cov-p { background: #eab308; }
.seg-cov-m { background: #ef4444; }

/* The split, as one 6px bar. Widths are set inline because they are
   data, not styling. */
.seg-cov-bar {
  display: flex;
  height: 6px;
  margin: 0 -16px;
  background: var(--gray-200);
}
.seg-cov-bar i {
  display: block;
  height: 100%;
}

.seg-cov-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 112px 150px;
  gap: 16px;
  align-items: center;
  margin: 0 -16px;
  padding: 13px 20px;
  border-top: 1px solid var(--gray-100);
  font-size: 0.86rem;
}
.seg-cov-row .cl {
  font-family: var(--viz-mono);
  font-weight: 500;
  color: var(--gray-400);
}
.seg-cov-row .nm {
  color: var(--gray-900);
}
.seg-cov-row .st {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-500);
}
.seg-cov-row .nx {
  font-weight: 500;
  color: var(--accent);
}
/* Four columns need about 560px. Below that the row folds to two, with
   the clause number and its state on one line and the rest under. */
@media (max-width: 620px) {
  .seg-cov-row {
    grid-template-columns: 56px minmax(0, 1fr);
    row-gap: 6px;
  }
  .seg-cov-row .nx {
    grid-column: 2;
  }
}

/* In the four-up step cards the number sits opposite the icon, plain and
   grey, rather than in the accent chip the two-up cards use. */
.seg-grid-4 .seg-card-head {
  justify-content: space-between;
}
.seg-card-step {
  font-family: var(--viz-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gray-300);
}
/* The icon tile carries a hairline in the reference, which keeps it
   readable where the tint alone is nearly invisible. */
.seg-card-icon {
  border: 1px solid rgba(74, 74, 255, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════
   Comparison table  ·  .seg-compare
   The design reference builds this as a grid with a fixed 220px label
   column, a two-line header per tier, and a shaded footer row carrying a
   real button per column. It stays a <table> here — a comparison is
   tabular data and the header association matters to a screen reader —
   with the reference's proportions applied on top.
   ══════════════════════════════════════════════════════════════════════ */

.seg-compare td:first-child,
.seg-compare th:first-child {
  width: 220px;
}
/* Each tier's header is its name over what it means, not one run-on line. */
.seg-compare thead th {
  vertical-align: bottom;
  text-transform: none;
  letter-spacing: 0;
}
.seg-compare .ct-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.seg-compare .ct-desc {
  display: block;
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}
/* The dot marks the tier most people land on. The word beside it is
   .seg-sr-only, because a coloured dot on its own says nothing to a
   screen reader. */
.seg-compare .ct-pick {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--lewis-orange);
}

/* ── Footer row ──
   One way in per column, on its own ground, with the middle tier filled
   because it is the one most readers are choosing between the other two
   to avoid. */
.seg-compare tfoot td {
  padding: 24px 22px;
  background: var(--gray-50);
  border-bottom: 0;
  border-top: 1px solid var(--gray-100);
}
.seg-compare tfoot .btn-primary,
.seg-compare tfoot .btn-ghost {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  font-size: 0.85rem;
}
.theme-light .seg-compare tfoot .btn-ghost {
  border-color: var(--line);
  background: var(--white);
}

/* ══════════════════════════════════════════════════════════════════════
   Light pages, flat framing
   The rest of the site frames every section as a rounded card on a grey
   ground, pinned in a scroll-stack. The design reference these pages come
   from is flat: full-width bands separated by a hairline, alternating
   white and off-white. On these five pages the flat framing wins, because
   the panel shadows and 36px radii were the loudest thing on a page whose
   content is a clause table. The nav and the closing block stay as they
   are everywhere else, so the site still reads as one site.
   ══════════════════════════════════════════════════════════════════════ */

.theme-light .seg-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 88px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: var(--white);
}
.theme-light .seg-panel-orange {
  background: #fafafa;
}
.theme-light .seg-panel-plain {
  padding: 52px 0;
  background: var(--white);
}
/* No pinning: the stack only reads as a stack when the panels are cards. */
.theme-light .seg-stack {
  position: static;
  top: auto;
  box-shadow: none;
}
.theme-light .seg-hero {
  border-radius: 0;
  padding-bottom: 76px;
}
/* The reference lays out on 1440 with 96px gutters. The site container is
   capped at 1600, which at this content width reads as too wide. */
.theme-light .seg-hero .container,
.theme-light .seg-panel .container {
  max-width: 1248px;
}

/* ── Type ──
   The reference sets headings at 600, not the site's 800/700. At 60px a
   weight-800 line is the loudest thing on the page; 600 lets the clause
   tables and the coverage panel carry their share. */
.theme-light .seg-hero h1,
.theme-light .seg-hero-grid h1 {
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.theme-light .seg-lede h2 {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.theme-light .seg-hero-sub {
  font-size: 1.1875rem;
  line-height: 1.6;
}
/* The label is accent-coloured and unruled in the reference, where the
   site draws a rule under it. The rule reads as a divider on a flat page
   that already has hairlines between its bands. */
.theme-light .section-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 16px;
}

/* ── Controls and corners ──
   6px on buttons, 8px on cards, against the site's 8px and 12px. */
.theme-light .btn-primary,
.theme-light .btn-ghost {
  padding: 13px 22px;
  border-radius: 6px;
  font-size: 0.94rem;
  font-weight: 500;
}
.theme-light .seg-card,
.theme-light .seg-faq-item,
.theme-light .seg-review-row {
  border-radius: 8px;
}

/* The label colour was set to grey back when .seg-panel-orange was a
   saturated blue wash carrying white text. Those panels are off-white
   now, so the label takes the accent like every other one on the page. */
.theme-light .seg-panel-orange .section-label,
.theme-light .seg-lewis .section-label {
  color: var(--accent);
  border-bottom: 0;
  padding-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Use-case hero panels
   The three heroes are one component now, the same header-plus-rows
   skeleton the coverage panel on the programs pages uses. Only the
   column template and the badge set change, so the four panels across
   the funnel read as four views of one system rather than four drawings.
   ══════════════════════════════════════════════════════════════════════ */

.seg-cov-row.r-ev { grid-template-columns: 112px minmax(0, 1fr) 96px; }
.seg-cov-row.r-in { grid-template-columns: 92px minmax(0, 1fr) 112px; }
.seg-cov-row.r-ar { grid-template-columns: 22px minmax(0, 1fr) 104px; }
@media (max-width: 620px) {
  .seg-cov-row.r-ev,
  .seg-cov-row.r-in,
  .seg-cov-row.r-ar {
    grid-template-columns: 88px minmax(0, 1fr);
    row-gap: 6px;
  }
}

/* CAP grades, in the product's own names and semantics: A critical,
   B significant, C moderate, D minor, D riding the neutral tier. */
.seg-grade {
  display: inline-flex;
  font-style: normal;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 4px;
  font-family: var(--viz-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.seg-grade-a { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
.seg-grade-b { color: #d97706; background: #fffbeb; border-color: #fde68a; }
.seg-grade-c { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
.seg-grade-d { color: var(--gray-500); background: var(--gray-50); border-color: var(--gray-200); }

/* The area rail on the new-build panel: each app's own icon colour, as
   the workspace blueprint sets it. */
.seg-app-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
}
/* State of an area as the program stands it up. */
.seg-state {
  font-size: 0.78rem;
  color: var(--gray-400);
}
.seg-state-live { color: #16a34a; font-weight: 500; }
.seg-state-next { color: var(--accent); font-weight: 500; }

/* The screening reason, under the record it belongs to. */
.seg-cov-row .sub {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--accent);
}

/* A relation group heading inside the evidence panel. */
.seg-cov-group {
  margin: 0 -16px;
  padding: 11px 20px 7px;
  border-top: 1px solid var(--gray-100);
  font-family: var(--viz-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-300);
}
.seg-cov-group + .seg-cov-row {
  border-top: 0;
}
/* Neutral dot, for counts that are neither good nor bad. */
.seg-cov-n { background: var(--gray-300); }

/* ══════════════════════════════════════════════════════════════════════
   Polish pass
   ══════════════════════════════════════════════════════════════════════ */

/* Every panel is full of figures — clause numbers, counts, record ids.
   Tabular figures keep the columns true and stop anything jiggling if a
   value ever changes. */
.seg-viz {
  font-variant-numeric: tabular-nums;
  /* The panels are drawings of the product, not the product. Selecting
     text out of one is never what someone meant to do. */
  -webkit-user-select: none;
  user-select: none;
}

/* Trailing arrows sit 2px tight to the edge. An arrow carries its own
   whitespace on the right, so matching the text-side padding exactly reads
   as over-padded on that side. */
.btn-primary svg,
.btn-ghost svg,
.btn-white svg {
  margin-right: -2px;
}

/* Headings break better balanced than ragged, and these run two or three
   lines at every width. */
.theme-light .seg-hero h1,
.theme-light .seg-lede h2 {
  text-wrap: balance;
}

/* The mark pulses to show lewis working. It is decorative, it never stops,
   and it was the one animation on the page outside a motion query. */
@media (prefers-reduced-motion: reduce) {
  .lewis-mark.is-working .lewis-node,
  .lewis-mark.is-working .lewis-core {
    animation: none;
  }
}

/* The card previews are drawings of the product. Selecting text out of one,
   inside a link, is never what someone meant to do. */
.aud-mini {
  -webkit-user-select: none;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════════════════
   Stack panel
   The platform / apps / lewis layers, as the homepage walkthrough and the
   OCNI booth video both show them: three bands, read bottom-up, each one
   inheriting what is under it. Same .seg-viz shell as the other panels.
   ══════════════════════════════════════════════════════════════════════ */

.seg-band {
  margin: 0 -16px;
  padding: 14px 20px;
  border-top: 1px solid var(--gray-100);
}