/* ─────────────────────────────────────────────
   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-logos {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.seg-proof-logo img {
  height: 32px;
  width: auto;
  display: block;
  opacity: 0.75;
}
.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;
}

/* ── Panel head: what this panel is, and its state ── */
.seg-viz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -16px -16px 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.seg-viz-title {
  font-family: var(--viz-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--viz-cyan);
}
.seg-viz-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 3px 10px;
  font-family: var(--viz-mono);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--viz-cyan);
  background: rgba(23, 170, 216, 0.09);
  border: 1px solid rgba(23, 170, 216, 0.3);
  border-radius: 999px;
}
.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);
}

/* The matrix sits on its own inset field, the way the homepage widget nests
   its result block on gray-50. */
.seg-viz-matrix-wrap {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
}

/* ── 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;
}
.seg-viz-matrix-wrap::-webkit-scrollbar {
  height: 6px;
}
.seg-viz-matrix-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.seg-viz-matrix-wrap::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 3px;
}
.seg-viz-matrix {
  /* separate + 0 spacing: the diagonal separators are absolutely positioned
     inside the header cells and collapse borders clip them. */
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 380px;
}

/* ── Diagonal column headers ── */
.seg-viz-matrix th {
  position: relative;
  background: var(--gray-50);
  padding: 0;
  vertical-align: bottom;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-400);
  border-bottom: 2px solid var(--gray-200);
}
.seg-viz-matrix th .sizer {
  display: block;
  width: 56px;
  height: 118px;
}
/* The labels lean the other way from the product's, up and to the LEFT. The
   product scrolls horizontally, so its last column's label runs out into the
   scroll gutter; a fixed hero panel has no gutter and the label would clip on
   the card edge. Mirrored, the labels lean out over the empty corner cell
   instead, and the treatment reads the same. The separators follow them. */
.seg-viz-matrix th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 164px;
  border-right: 1px solid var(--gray-200);
  transform-origin: bottom left;
  transform: rotate(-45deg);
  pointer-events: none;
  z-index: 3;
}
/* 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;
}
/* Corner cell: what the two axes are. */
.seg-viz-matrix th.corner {
  width: 100%;
  min-width: 142px;
  padding: 0 14px 10px 0;
  text-align: left;
  vertical-align: bottom;
  letter-spacing: 0.03em;
  /* No vertical divider in the header band. The product draws one because its
     left column is sticky against a scrolling grid; here it just runs a hard
     2px line up through the diagonals, which already divide that boundary.
     The body rows below keep theirs, where it does separate something. */
  border-right: 0;
}
.seg-viz-matrix th.corner::after {
  display: none;
}

/* ── Rows ── */
.seg-viz-matrix td {
  padding: 7px 0;
  text-align: center;
  border-bottom: 1px solid var(--gray-100);
  border-right: 1px solid var(--gray-100);
}
.seg-viz-matrix td:last-child,
.seg-viz-matrix th:last-child {
  border-right: 0;
}
.seg-viz-matrix tbody tr:last-child td {
  border-bottom: 0;
}
.seg-viz-matrix td:first-child {
  padding-right: 14px;
  text-align: left;
  border-right: 2px solid var(--gray-200);
}
.seg-viz-matrix td:first-child strong {
  display: block;
  font-family: var(--viz-mono);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--gray-900);
}
.seg-viz-matrix td:first-child span {
  display: block;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--gray-400);
}

/* ── 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-stat-v { background: #22c55e; } /* verified -- success */
.seg-viz-stat-m { background: #3b82f6; } /* manager approved -- info */
.seg-viz-stat-p { background: #f59e0b; } /* pending -- warning */
.seg-viz-stat-e { background: #ef4444; } /* expired -- error */
.seg-viz-stat-u { background: #78716c; } /* not yet required -- neutral */
/* No requirement for this pairing: the product's v-else dash. */
.seg-viz-stat-none {
  color: var(--gray-300);
  font-size: 0.8rem;
}

.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-steps-context {
  margin: 0 0 14px;
  font-size: 0.8rem;
  color: var(--gray-500);
}
.seg-viz-steps-row {
  display: flex;
}
.seg-viz-step {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.seg-viz-step-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
}
/* The two half-width rails that join a step to its neighbours. */
.seg-viz-step-mark i {
  position: absolute;
  top: 50%;
  width: 50%;
  height: 2px;
  margin-top: -1px;
  background: #16a34a;
}
.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; }
.seg-viz-step-dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
}
.seg-viz-step-dot svg {
  width: 13px;
  height: 13px;
}
.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;
}
.seg-viz-step-label {
  margin: 7px 2px 0;
  font-size: 0.6rem;
  line-height: 1.25;
  color: var(--gray-500);
}
.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);
}
.seg-viz-itp table {
  width: 100%;
  min-width: 380px;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.seg-viz-itp th {
  padding: 9px 8px;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gray-400);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.seg-viz-itp th:first-child {
  text-align: left;
  padding-left: 12px;
}
.seg-viz-itp td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid var(--gray-100);
}
.seg-viz-itp tbody tr:last-child td {
  border-bottom: 0;
}
.seg-viz-itp td:first-child {
  padding-left: 12px;
  text-align: left;
  color: var(--gray-800);
  border-right: 1px solid var(--gray-100);
}
.seg-viz-itp td:first-child b {
  display: inline-block;
  width: 20px;
  font-family: var(--viz-mono);
  font-weight: 500;
  color: var(--gray-400);
}
/* UBadge subtle: tinted ground, coloured text, matching hairline. */
.seg-viz-hp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid;
  font-family: var(--viz-mono);
  font-size: 0.68rem;
  font-weight: 700;
}
.seg-viz-hp-h { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
.seg-viz-hp-w { color: #d97706; background: #fffbeb; border-color: #fde68a; }
.seg-viz-hp-d { color: #4536f5; background: #ecf1ff; border-color: #c2ceff; }
.seg-viz-hp-v { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
.seg-viz-hp-none {
  display: inline-block;
  width: 10px;
  height: 1px;
  background: var(--gray-300);
  vertical-align: middle;
}

/* ── Panel foot: what the panel read, and the point of it ── */
.seg-viz-foot {
  padding-top: 13px;
  margin-top: 14px;
  border-top: 1px solid var(--gray-100);
}
.seg-viz-foot-label {
  margin: 0 0 8px;
  font-family: var(--viz-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--viz-cyan);
}
.seg-viz-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
/* 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;
}
.seg-viz-point {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
}
.seg-viz-point svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── 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-head { animation-delay: 0.05s; }
  .seg-viz-matrix-wrap,
  .seg-viz-steps,
  .seg-viz-itp { animation-delay: 0.28s; }
  .seg-viz-legend { animation-delay: 0.62s; }
  .seg-viz-foot { animation-delay: 0.72s; }

  /* Inside the block, each line lands after the one above it. */
  .seg-viz-matrix tbody tr,
  .seg-viz-itp tbody tr,
  .seg-viz-step {
    animation: seg-viz-rise 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .seg-viz-matrix tbody tr:nth-child(1),
  .seg-viz-itp tbody tr:nth-child(1),
  .seg-viz-step:nth-child(1) { animation-delay: 0.36s; }
  .seg-viz-matrix tbody tr:nth-child(2),
  .seg-viz-itp tbody tr:nth-child(2),
  .seg-viz-step:nth-child(2) { animation-delay: 0.43s; }
  .seg-viz-matrix tbody tr:nth-child(3),
  .seg-viz-itp tbody tr:nth-child(3),
  .seg-viz-step:nth-child(3) { animation-delay: 0.5s; }
  .seg-viz-matrix tbody tr:nth-child(4),
  .seg-viz-itp tbody tr:nth-child(4),
  .seg-viz-step:nth-child(4) { animation-delay: 0.57s; }
  .seg-viz-matrix tbody tr:nth-child(5),
  .seg-viz-itp tbody tr:nth-child(5),
  .seg-viz-step:nth-child(5) { animation-delay: 0.64s; }

  .seg-viz-stat,
  .seg-viz-stat-none,
  .seg-viz-hp,
  .seg-viz-hp-none,
  .seg-viz-step-dot {
    animation: seg-viz-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    animation-delay: inherit;
  }
}
@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: 620px) {
  .seg-viz-step-label {
    display: none;
  }
  .seg-viz-steps {
    padding-bottom: 18px;
  }
}
@media (max-width: 560px) {
  .seg-viz {
    padding: 14px;
  }
  .seg-viz-head {
    margin: -14px -14px 12px;
    padding: 11px 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);
}