/* ─────────────────────────────────────────────
   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 brand neutrals used as panel washes, alternating down the page. */
  --wash-blue: #edf0fe;
  --wash-cream: #fff3ea;
}

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: all 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: all 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: all 0.2s;
}
.btn-white:hover {
  background: var(--gray-100);
  transform: translateY(-1px);
}
.btn-white:focus-visible {
  outline: 2px solid var(--accent);
  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-cream {
  background: var(--wash-cream);
}
.seg-panel-plain {
  background: var(--white);
  padding: 44px 0;
}
/* 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-cream .eyebrow,
.seg-panel-plain .eyebrow {
  color: var(--gray-500);
}
.seg-panel .eyebrow .dot {
  background: var(--accent) !important;
}

.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
  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;
  color: var(--gray-300) !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. */
.seg-close {
  position: relative;
  width: calc(100% - 32px);
  max-width: 1600px;
  margin: calc(var(--panel-gap) * 3) auto 0;
  padding: 88px 0;
  border-radius: var(--panel-radius);
  overflow: hidden;
  text-align: center;
  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 .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;
}
.seg-close p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 auto 28px;
  max-width: 560px;
}
.seg-close-email {
  margin-top: 24px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45) !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. */
.seg-faq {
  display: grid;
  gap: 14px;
  max-width: 880px;
}
.seg-faq-item {
  background: var(--white);
  border: 1px solid rgba(16, 18, 40, 0.06);
  border-radius: var(--radius);
  padding: 26px 30px;
}
.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; }
}