/* Generated by scripts/render.mjs from:
   /styles/base.css
   /styles/header.css
   /styles/sections.css
   /styles/dialogs.css
   /styles/cookie-consent.css
   /styles/pages.css
   /styles/product.css
   /styles/company.css
   /styles/hero-motion.css
   /styles/hero-typography.css
*/
/* Neogenic homepage — base tokens, font, reset and shared components.
   Self-contained: no external CSS, tokens or utilities. */

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

:root {
  /* Approved Neo palette */
  --ivory: #F4F1EA;
  --deep: #121614;
  --deeper: #0D100E;
  --verdigris: #2F6F63;
  --emerald: #1FB27A;
  --sea-glass: #BFE3D6;
  --copper: #C9865A;

  /* Surfaces and text */
  --bg: #FBFAF7;
  --bg-tile: #EFECE4;
  --ink: var(--deep);
  --ink-soft: rgba(18, 22, 20, 0.62);
  --ink-faint: rgba(18, 22, 20, 0.42);
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, 0.72);
  --on-dark-faint: rgba(255, 255, 255, 0.5);

  /* Typography footprint (measured at 1440) */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 300;

  /* Layout */
  --gutter: 60px;
  --nav-h: 60px;
  --strip-h: 0px;
  --radius: 12px;
  --pill-h: 50px;

  /* One canvas rule for every comparable full-screen marketing hero
     (.hero, .sol-hero, .cap-hero, .ov-hero, .bs-hero, .be-hero): the
     viewport above 900px, 90% of it on phones, and never a fixed pixel
     height, so enlarged text grows the canvas instead of clipping. Three
     heroes are content-led by design and do not use it: the Workspace
     title-plus-product stage (.bw-hero), the About editorial title-plus-
     photo (.ab-hero) and the Contact split form (.inq). */
  --hero-min: 100vh;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}
@supports (height: 100svh) {
  :root { --hero-min: 100svh; }
}
@media (max-width: 900px) {
  :root { --hero-min: 90vh; }
  @supports (height: 100svh) {
    :root { --hero-min: 90svh; }
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

html.is-locked,
html.is-locked body { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  font-weight: 400;
  font-optical-sizing: auto;
}

img, svg, canvas { display: block; max-width: 100%; }

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--deep);
  color: var(--on-dark);
  border-radius: 999px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ----- Pills ------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pill-h);
  padding: 0 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.2px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pill:active { transform: scale(0.98); }

/* Fill: white on dark, black on light. Colour follows the nearest [data-nav]. */
.pill--fill { background: var(--on-dark); color: var(--ink); }
.pill--fill:hover { background: var(--ivory); }
[data-nav="light"] .pill--fill,
.dialog .pill--fill { background: var(--ink); color: var(--on-dark); }
[data-nav="light"] .pill--fill:hover,
.dialog .pill--fill:hover { background: #2A2F2C; }

.pill--outline { border-color: rgba(255, 255, 255, 0.75); color: var(--on-dark); }
.pill--outline:hover { background: rgba(255, 255, 255, 0.12); }
[data-nav="light"] .pill--outline,
.dialog .pill--outline { border-color: rgba(18, 22, 20, 0.35); color: var(--ink); }
[data-nav="light"] .pill--outline:hover,
.dialog .pill--outline:hover { background: rgba(18, 22, 20, 0.06); }

.pill--small { height: 36px; padding: 0 16px; font-size: 14px; }
.pill--tiny { height: 36px; padding: 0 16px; font-size: 13px; }

.round-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(18, 22, 20, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.round-btn:hover { background: rgba(18, 22, 20, 0.06); }
.round-btn:disabled { opacity: 0.35; cursor: default; }

.text-link {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Neogenic homepage — announcement strip, fixed nav, mega-menu, mobile menu. */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  --strip-offset: 0px;
  transform: translateY(calc(-1 * var(--strip-offset)));
  will-change: transform;
}

/* ----- Announcement strip (scrolls away by its own height) --------------- */
.announcement {
  height: var(--strip-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -0.1px;
}
.announcement p { display: flex; gap: 18px; align-items: center; }
.announcement__link { display: inline-flex; gap: 6px; align-items: center; }
.announcement__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----- Nav bar ---------------------------------------------------------- */
/* The bar is 60 tall by contract and grows only when enlarged text no
   longer fits on one row: items may wrap onto a second row, the actions
   keep at least 12px from the links, and the mega-menu hangs from the
   bar's real bottom edge (top: 100%), not from the fixed token. */
.nav {
  position: relative;
  min-height: var(--nav-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  row-gap: 4px;
  padding: 0 var(--gutter);
  color: var(--on-dark);
  background: transparent;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
}
.site-header[data-theme="light"] .nav,
.site-header[data-menu-open="true"] .nav {
  color: var(--ink);
  background: rgba(250, 250, 250, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Keep the same frosted separation over dark content after the hero starts
   scrolling. The initial photographic hero retains its transparent nav. */
.site-header[data-theme="dark"][data-scrolled="true"] .nav {
  background: rgba(18, 22, 20, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header[data-menu-open="true"] .nav { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; transition: color 0.3s var(--ease); }

.nav__logo { display: block; height: 25px; }
.nav__logo img { height: 25px; width: auto; }
.nav__logo-dark { display: none; }
.site-header[data-theme="light"] .nav__logo-light,
.site-header[data-menu-open="true"] .nav__logo-light { display: none; }
.site-header[data-theme="light"] .nav__logo-dark,
.site-header[data-menu-open="true"] .nav__logo-dark { display: block; }

/* Measured 40 gap and 68 inset at 1440; both ease down on narrower desktops
   so enlarged text still fits beside the pill. */
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.78vw, 40px);
  margin-left: clamp(24px, 4.73vw, 68px);
}
.nav__link {
  font-size: 16px;
  letter-spacing: -0.2px;
  line-height: 1;
  padding: 8px 0;
  opacity: 0.92;
  transition: opacity 0.2s var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { opacity: 1; }
/* Current page stays fully opaque without changing the link height. */
.nav__link--current { opacity: 1; }

.mega__link[aria-current="page"] { background: #FAFAFA; }
.accordion__panel a[aria-current="page"] { color: var(--ink-faint); }

.nav__actions {
  margin-left: auto;
  padding-left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The demo pill keeps its 36px height as a minimum and may wrap its label
   when text is enlarged instead of pushing the bar past the viewport. */
.nav__cta { flex: 0 1 auto; min-width: 0; height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; white-space: normal; text-align: center; line-height: 1.15; }

/* Pills inside nav follow header theme rather than the section underneath. */
.nav .pill--fill { background: var(--on-dark); color: var(--ink); }
.nav .pill--outline { border-color: rgba(255, 255, 255, 0.7); color: var(--on-dark); }
.site-header[data-theme="light"] .nav .pill--fill,
.site-header[data-menu-open="true"] .nav .pill--fill { background: var(--ink); color: var(--on-dark); }
.site-header[data-theme="light"] .nav .pill--outline,
.site-header[data-menu-open="true"] .nav .pill--outline { border-color: rgba(18, 22, 20, 0.35); color: var(--ink); }

.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  margin-right: -8px;
}
.nav__burger-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-bar:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* ----- Mega-menu (desktop) ---------------------------------------------- */
/* Content-driven panel (owner revision, 14 September 2026, after the
   Wonderful menu): no fixed row or panel heights, so a long description
   grows its own link row and hover surface instead of painting into the
   next one. The panel is capped at the space below the bar (menu.js sets
   the exact value from the bar's real edge; the calc is the pre-script
   fallback) and scrolls inside itself on short viewports and at high zoom. */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--strip-h) - var(--nav-h));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 8px 13px rgba(0, 0, 0, 0.08);
}
.mega[hidden] { display: none; }
/* While the shell height animates (menu.js), no scrollbar flashes. */
.mega--moving { overflow-y: hidden; }
/* Platform and Solutions at 1440: two 376 link columns from x182, a small
   spacer and the 320 teaser at the 60 gutter; 56 above and 60 below. The
   link tracks take free space first, so on narrower desktops they give way
   in proportion before the teaser reaches its 240 minimum. */
.mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 376px) minmax(0, 376px) minmax(0, 1fr) minmax(240px, 320px);
  column-gap: 32px;
  padding: 56px var(--gutter) 60px clamp(40px, 12.64vw, 182px);
}
.mega__links { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mega__link {
  display: block;
  width: 100%;
  padding: 16px 18px 18px;
  border-radius: 10px;
  text-align: left;
  transition: background-color 0.15s var(--ease);
}
.mega__link:hover { background: #F6F6F4; }
.mega__title { display: block; font-size: 17px; letter-spacing: -0.3px; line-height: 21px; overflow-wrap: anywhere; }
.mega__desc { display: block; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--ink-soft); overflow-wrap: anywhere; }

.mega__teaser { grid-column: 4; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 8px; }
.mega__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
/* The clinical hero photograph keeps its two figures (right of centre) in the teaser crop. */
.mega__media--care { object-position: 62% 40%; }
/* Real product capture in the teaser slot: the 16:9 footprint, whole frame
   contained (no crop of the interface), opens the preview. */
.mega__shot { display: block; width: 100%; border-radius: 8px; overflow: hidden; }
.mega__shot .mega__media { border: 1px solid rgba(18, 22, 20, 0.1); object-fit: contain; object-position: center; background: #F4F4F2; }
.mega__caption { font-size: 16px; line-height: 21px; letter-spacing: -0.2px; overflow-wrap: anywhere; }
.mega__teaser .text-link { align-self: flex-start; }

/* Resources and Company: one plain link column and two labelled teasers,
   at 1440 320 | spacer | 320 | 320 on the same insets; a longer Resources
   column grows the panel. */
.mega__inner--company {
  grid-template-columns: minmax(180px, 320px) minmax(0, 1fr) minmax(200px, 320px) minmax(200px, 320px);
}
.mega__links--plain { gap: 4px; }
.mega__links--plain .mega__link { padding: 12px 18px; }
.mega__teaser--labelled { padding-top: 0; }
.mega__teaser--labelled:nth-of-type(1) { grid-column: 3; }
.mega__teaser--labelled:nth-of-type(2) { grid-column: 4; }
.mega__label { font-size: 16px; line-height: 19.2px; letter-spacing: -0.2px; color: var(--ink-soft); margin-bottom: 2px; }

/* ----- Mobile accordion menu -------------------------------------------- */
/* Full white viewport below the 48px nav. Accordion rows for Platform and
   Solutions, a Pricing link row, then Resources and Company accordions,
   68.2px each at x16, width 358, with dividers; a single black CTA (358x48)
   sits 45px below the last row. Only one accordion is open at a time; its
   links are 16/19.2 on a 43.2px pitch. */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFFFFF;
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__inner { padding: 0 16px 32px; display: flex; flex-direction: column; }
.mobile-menu__cta { display: inline-flex; }
.mobile-menu__link,
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 68.2px;
  padding: 0;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.2px;
  text-align: left;
  border-bottom: 1px solid rgba(18, 22, 20, 0.1);
  transition: color 0.2s var(--ease);
}
.accordion__heading { font: inherit; }
.accordion__trigger[aria-expanded="true"] { color: var(--ink-faint); }
.accordion__chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
  margin-right: 6px;
}
.accordion__trigger[aria-expanded="true"] .accordion__chev { transform: rotate(-135deg); }
.accordion__panel { padding: 4px 0 12px; border-bottom: 1px solid rgba(18, 22, 20, 0.1); }
.accordion__panel--moving { overflow: hidden; }
.accordion__panel[hidden] { display: none; }
.accordion__panel a,
.accordion__panel button {
  display: block;
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: -0.2px;
  text-align: left;
}
.mobile-menu__cta {
  width: 100%;
  height: 48px;
  margin-top: 45px;
  font-size: 16px;
  background: var(--ink);
  color: var(--on-dark);
}
.mobile-menu__cta:hover { background: #2A2F2C; }

/* ----- Responsive ------------------------------------------------------- */
/* Below 1280 the spacer track goes: two fluid link columns and the teaser
   (220–300) on the page gutter, 48 above and 52 below. */
@media (max-width: 1279px) {
  .mega__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 300px);
    column-gap: 24px;
    padding: 48px var(--gutter) 52px;
  }
  .mega__teaser { grid-column: 3; }
  /* Company: the link column keeps a usable minimum (180, enough for
     "About Neogenic" on one line) up to 282; the two teaser cards share
     what remains. */
  .mega__inner--company {
    grid-template-columns: minmax(180px, 282px) minmax(200px, 1fr) minmax(200px, 1fr);
    column-gap: 16px;
  }
  .mega__teaser--labelled:nth-of-type(1) { grid-column: 2; }
  .mega__teaser--labelled:nth-of-type(2) { grid-column: 3; }
}
/* 901–1023: Platform and Solutions give the whole width to their six and
   four destinations, so each description keeps a comfortable measure; the
   teaser (a product preview and a solutions photograph, both also reached
   from the pages) steps back. Resources and Company keep their teasers. */
@media (min-width: 901px) and (max-width: 1023px) {
  .mega__inner:not(.mega__inner--company) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__inner:not(.mega__inner--company) .mega__teaser { display: none; }
}

@media (max-width: 900px) {
  :root { --nav-h: 48px; --strip-h: 0px; }
  /* No transform on the mobile header, so the fixed menu sizes to the viewport. */
  .site-header { transform: none; will-change: auto; }
  .announcement { display: none; }
  .nav__list, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .mega { display: none !important; }
  .mobile-menu { display: block; }
  .site-header[data-menu-open="true"] .nav { background: #FFFFFF; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__burger-bar, .accordion__chev, .accordion__trigger, .nav { transition: none; }
}

/* Neogenic homepage — page sections in template order.
   Desktop geometry follows docs/wonderful-template.md measurements at 1440x1000.
   Mobile geometry follows docs/template/mobile-sections.json and
   docs/template/mobile-measurements.json at 390x844. */

/* ----- Brand surface image base (fields and atmospheres) ----------------
   Full-bleed behind product surfaces with a controlled shade; data-crop
   selects the crop for a shared asset (src/brand.mjs). */
.cap-related__atmo,
.sol-closing__atmo,
.platform__atmo,
.closing__atmo,
.twin__atmo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
[data-crop="top"] { object-position: 50% 18%; }
[data-crop="bottom"] { object-position: 50% 84%; }
[data-crop="right"] { object-position: 82% 50%; }
[data-crop="left"] { object-position: 18% 50%; }
/* Combined concept fields (src/brand.mjs): the second field blended over
   the base in the same box. */
.field-layer { mix-blend-mode: screen; opacity: 0.42; }
.field-layer[data-layer="glaze"] { mix-blend-mode: soft-light; opacity: 0.7; }
.field-layer[data-layer="tint"] { mix-blend-mode: overlay; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .platform__atmo { animation: none; }
}

/* ======================================================================
   1. Hero — 100vh, photographic poster, title bottom-left,
      support and two pills bottom-right.
   ====================================================================== */
.hero {
  position: relative;
  min-height: var(--hero-min);
  background: var(--deep);
  color: var(--on-dark);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero__media { position: absolute; inset: 0; }
.hero__poster { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 22, 20, 0.28) 0%, rgba(18, 22, 20, 0) 30%),
    linear-gradient(180deg, rgba(18, 22, 20, 0) 45%, rgba(18, 22, 20, 0.55) 100%);
}
/* The top padding clears the fixed header. At normal size the content sits
   at the foot of the canvas and the padding changes nothing; when enlarged
   text makes the content taller than the canvas, the heading's glyph box
   starts below the header instead of rising above the section's top. */
.hero__content {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: calc(var(--strip-h) + var(--nav-h) + 24px) var(--gutter) 80px;
}
.hero__title {
  width: 800px;
  max-width: 100%;
  min-width: 0;
  font-weight: var(--display-weight);
  font-size: 82px;
  line-height: 86.1px;
  letter-spacing: -4.1px;
  overflow-wrap: anywhere;
}
.hero__aside { width: 370px; flex: 0 0 370px; }
.hero__support {
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.3px;
  margin-bottom: 20px;
}
/* The CTA row wraps and each label may wrap with enlarged text; the pills
   keep their height as a minimum. */
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__actions .pill { height: auto; min-height: var(--pill-h); max-width: 100%; padding-top: 10px; padding-bottom: 10px; white-space: normal; text-align: center; }
.hero__actions .pill--fill { min-width: 140px; }

/* ======================================================================
   2. Story carousel — 584px square cards, 16px gap, snap rail.
      Follows the hero directly (the category band was removed by owner
      instruction, with no replacement strip or spacer).
      Grid: title row (title + controls), rail row. On mobile the
      controls move into the 61px band below the rail.
   ====================================================================== */
.stories {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 100px 0 26px;
  background: var(--bg);
  color: var(--ink);
}
.stories__head {
  grid-column: 1;
  grid-row: 1;
  padding: 0 24px 80px var(--gutter);
}
.stories__title {
  max-width: 924px;
  font-weight: var(--display-weight);
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -1.92px;
}
.stories__controls {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: flex;
  gap: 8px;
  padding: 4px var(--gutter) 0 0;
}

.stories__rail {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 16px;
  padding: 0 var(--gutter) 0 62px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 62px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stories__rail::-webkit-scrollbar { display: none; }
.story {
  flex: 0 0 584px;
  width: 584px;
  height: 584px;
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--verdigris);
  color: var(--on-dark);
}
.story__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.story__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.story__media--sky { object-position: 40% 60%; filter: saturate(0.9); }
.story__media--warm { object-position: 70% 40%; filter: sepia(0.12) saturate(0.95); }
.story__link:hover .story__media { transform: scale(1.03); }
.story__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 22, 20, 0.45) 0%, rgba(18, 22, 20, 0) 45%);
}
.story__title {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 96px;
  z-index: 1;
  font-weight: var(--display-weight);
  font-size: 32px;
  line-height: 36.8px;
  letter-spacing: -1.28px;
}
.story__arrow {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 1;
  font-size: 32px;
  line-height: 36.8px;
  font-weight: 300;
}
.story__tag {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 1;
  font-size: 15px;
  letter-spacing: -0.1px;
  color: var(--on-dark-soft);
}

/* ======================================================================
   3. Statement — 800px band, 60/78 centred paragraph, word reveal.
      The inner wrapper is static on desktop and sticky on mobile,
      where the section is 150svh and the wrapper 100svh.
   ====================================================================== */
.statement {
  min-height: 800px;
  padding: 100px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--ink);
}
.statement__sticky {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.statement__text {
  max-width: 900px;
  text-align: center;
  font-weight: var(--display-weight);
  font-size: 60px;
  line-height: 78px;
  letter-spacing: -2.4px;
}
.statement__text .w { opacity: var(--w, 1); transition: opacity 0.2s linear; }

/* ======================================================================
   4. Dark platform area — 1000px immersive slot + twin cards.
      Brand line lands ~y3489, headline ~y3541.5 (section top 3124.9).
   ====================================================================== */
.platform {
  background: var(--deeper);
  color: var(--on-dark);
}
.platform__main {
  position: relative;
  min-height: 1000px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Brand atmosphere (tide) full-bleed behind the sphere, with the slow
   drift the previous gradient carried; the backdrop is now the shade that
   keeps the copy and the sphere readable over it. */
.platform__atmo {
  inset: -4%;
  width: 108%;
  max-width: none;
  height: 108%;
  object-position: 50% 42%;
  animation: drift 26s ease-in-out infinite alternate;
}
.platform__backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 16, 14, 0.34) 0%, rgba(13, 16, 14, 0.5) 55%, rgba(13, 16, 14, 0.9) 100%);
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 2%, 0) scale(1.06); }
}
.platform__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1.2px, transparent 1.6px);
  background-size: 107px 88px;
  background-position: 183px 47px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(60% 60% at 50% 45%, #000 20%, transparent 100%);
}
.platform__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  padding-top: 366px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.platform__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  letter-spacing: -0.8px;
  line-height: 1;
  margin-bottom: 26px;
}
.platform__brand-name { width: auto; height: 1.15em; }
.platform__brand-sub { font-weight: 300; color: var(--on-dark-soft); }
.platform__title {
  width: 782px;
  max-width: 100%;
  min-width: 0;
  font-weight: var(--display-weight);
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -1.92px;
  margin-bottom: 50px;
}
/* Explicit breaks: desktop "The staff workspace for / preventive-health clinics",
   mobile "The staff workspace / for preventive-health / clinics". */
.platform__title .br-mobile { display: none; }

/* Neo: a clean sphere with nothing around it. */
.orb {
  position: relative;
  z-index: 1;
  width: 300px;
  height: 300px;
  margin-top: 46px;
  border-radius: 50%;
  outline-offset: 12px;
}
.orb__canvas { width: 100%; height: 100%; border-radius: 50%; }
.orb__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--on-dark-soft);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #BFE3D6, #2F6F63 60%, #121614);
}
.orb__fallback[hidden] { display: none; }
.orb__motion {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--on-dark-soft);
}
.orb__motion:hover { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.6); }

.twins {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  justify-content: center;
  padding: 160px 60px 180px;
}
.twin {
  position: relative;
  min-height: 700px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #171C1A;
  display: flex;
  align-items: flex-end;
}
/* Each twin is a concept-field stage: the module's field fills the card
   under a shade, and a native excerpt sits in the upper media area, inset
   40px and 300 tall (ends at y340). The body reserves that stage with its
   top padding and grows the card when the copy is longer. One small
   control opens the real screen in the preview dialog; the excerpt itself
   is presentational. */
.twin__atmo { object-position: 50% 40%; }
.twin__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 14, 0.18) 0%, rgba(13, 16, 14, 0.5) 50%, rgba(13, 16, 14, 0.86) 100%); }
.twin__stage {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  height: 300px;
  border-radius: 8px;
}
.twin__body {
  position: relative;
  width: 100%;
  padding: 372px 60px 78px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.twin__title {
  font-weight: var(--display-weight);
  font-size: 32px;
  line-height: 36.8px;
  letter-spacing: -1.28px;
  margin-bottom: 16px;
}
.twin__text {
  max-width: 420px;
  font-size: 16px;
  line-height: 22px;
  color: var(--on-dark-soft);
  margin-bottom: 28px;
}

/* ======================================================================
   5. Tabbed workflows — six pills, 1200x600 panel.
      Internal gaps 45 + 52.797 keep the section at 1082.609.
   ====================================================================== */
.workflows {
  padding: 120px var(--gutter);
  background: #FFFFFF;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.workflows__title {
  text-align: center;
  font-weight: var(--display-weight);
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -1.92px;
  margin-bottom: 45px;
}
/* The desktop track wraps and its pills grow when text is enlarged; the
   mobile track below keeps its single scrolling row. */
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #F1F1F1;
  margin-bottom: 52.797px;
}
.tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 0;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.1px;
  color: var(--ink-soft);
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected="true"] { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }

.panel {
  position: relative;
  width: 1200px;
  max-width: 100%;
  height: 600px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--verdigris);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 44px;
}
.panel[hidden] { display: none; }
.panel__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel__media--wide { object-position: 50% 30%; }
.panel__media--warm { filter: sepia(0.12) saturate(0.95); }
.panel__media--cool { filter: saturate(0.85) brightness(0.95); }
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 22, 20, 0.05) 0%, rgba(18, 22, 20, 0.15) 60%, rgba(18, 22, 20, 0.5) 100%);
}
.panel__label {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  text-align: center;
  font-weight: var(--display-weight);
  font-size: 72px;
  line-height: 75.6px;
  letter-spacing: -4.32px;
}
.panel__support {
  position: relative;
  z-index: 1;
  font-size: 18px;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  text-align: center;
  padding: 0 24px;
}
.panel .pill { position: relative; z-index: 1; }
.workflows .panel .pill--fill { background: var(--on-dark); color: var(--ink); }
.workflows .panel .pill--fill:hover { background: var(--ivory); }

/* ======================================================================
   6. Closing — blurred photo to dark, headline left, paragraph right,
      two linked panels 768 + 502 with 10 gap inside 1280.
   ====================================================================== */
.closing {
  position: relative;
  min-height: 600px;
  padding: 120px 80px 0;
  background: var(--deeper);
  color: var(--on-dark);
  overflow: hidden;
}
/* Brand atmosphere (canopy) behind "Built around the patient's journey",
   shaded toward the dark footer below. */
.closing__backdrop { position: absolute; inset: 0; }
.closing__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 16, 14, 0.3) 0%, rgba(13, 16, 14, 0.62) 60%, var(--deeper) 100%);
}
.closing__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 54px;
}
.closing__title {
  width: 472px;
  flex: 0 1 472px;
  min-width: 0;
  font-weight: var(--display-weight);
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -1.92px;
}
.closing__text {
  width: 460px;
  flex: 0 1 460px;
  min-width: 0;
  font-size: 18px;
  line-height: 22px;
  color: var(--on-dark-soft);
  margin-top: 4px;
}
.closing__panels {
  position: relative;
  display: grid;
  grid-template-columns: 768px 502px;
  gap: 10px;
}
.panel-link {
  position: relative;
  height: 312px;
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background-color var(--pair-duration, 500ms) var(--pair-ease, var(--ease)), color var(--pair-duration, 500ms) var(--pair-ease, var(--ease));
}
/* Tones follow the pair state, as the Wonderful homepage pair
   (wonderful-home-closing-measure.json): the active panel #F5F5F5 with
   dark text, the other #F5F5F5 at 0.2 with light text. No hover lift, so
   both panels stay aligned. */
.panel-link[data-active="true"] { background: #F5F5F5; color: var(--ink); }
.panel-link[data-active="false"] { background: rgba(245, 245, 245, 0.2); color: var(--on-dark); }
.panel-link__label {
  font-weight: var(--display-weight);
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -1.92px;
}
.panel-link__arrow {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--pair-duration, 500ms) var(--pair-ease, var(--ease)), color var(--pair-duration, 500ms) var(--pair-ease, var(--ease));
}
/* Both panels carry the arrow: on desktop only the active panel paints it
   (`[data-pair-reveal]`); stacked panels show both, light on the
   translucent panel. */
.panel-link[data-active="false"] .panel-link__arrow { background: #F5F5F5; color: var(--ink); }

/* ======================================================================
   Expanding pair (public/scripts/pair.js), after the Wonderful /systems
   pair (card-menu-motion/wonderful-pair-*.png): two cards in one row, the
   active card wide and the other narrow, swapped by mouse hover, keyboard
   focus or tap; the last active card stays wide. From 1101px only; below
   that every consumer shows both cards whole, with no hover needed.
   Consumers set the gap and the two flex ratios (--pair-wide and
   --pair-narrow, CSS px at 1440, so the widths are exact there and keep
   their proportion elsewhere), plus any tone change on [data-active].
     [data-pair-reveal]   media or copy painted only in the active card
     .expand-pair__more   body that folds to no height in the narrow card
   Width, fold, tone and fade share one gentle 500ms ease-out; the reveal
   fades in after the width has started and out quickly. Reduced motion is
   instant (base.css). Content stays in the tab order: focus inside a
   narrow card makes it the wide one.
   ====================================================================== */
.expand-pair { --pair-wide: 720; --pair-narrow: 470; --pair-ease: cubic-bezier(0.32, 0.72, 0, 1); --pair-duration: 500ms; }
@media (min-width: 1101px) {
  .expand-pair { display: flex; align-items: stretch; }
  .expand-pair > [data-pair-card] {
    flex: var(--pair-narrow) 1 0px;
    min-width: 0;
    transition: flex-grow var(--pair-duration) var(--pair-ease), background-color var(--pair-duration) var(--pair-ease), color var(--pair-duration) var(--pair-ease), transform 0.3s var(--ease);
  }
  .expand-pair > [data-pair-card][data-active="true"] { flex-grow: var(--pair-wide); }
  .expand-pair [data-pair-reveal] { transition: opacity 320ms var(--pair-ease) 160ms; }
  .expand-pair > [data-active="false"] [data-pair-reveal] { opacity: 0; pointer-events: none; transition-duration: 200ms; transition-delay: 0ms; }
  .expand-pair__more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--pair-duration) var(--pair-ease); }
  .expand-pair > [data-active="false"] .expand-pair__more { grid-template-rows: 0fr; }
  /* 4px of room keeps focus rings on links inside the fold whole. */
  .expand-pair__more > * { min-height: 0; overflow: hidden; margin: -4px; padding: 4px; }
}
/* Home twins (592 | 16 | 592 before): 720 | 16 | 464 at 1440. The copy
   keeps the twin's centred column; in the narrow twin the title settles at
   the foot above the 78 inset. */
.twin .expand-pair__more { width: 100%; }
.twin__more { display: flex; flex-direction: column; align-items: center; }
/* Home closing panels: 768 | 10 | 502 at 1440, Patient Portal first. Both
   stay whole destination links; only their widths trade places. */
.closing__panels { --pair-wide: 768; --pair-narrow: 502; }

/* ======================================================================
   7. Footer — dark, 120px padding, brand + five columns, then an
      oversized wordmark band (Tide wordmark on dark) that brings the
      footer to roughly the template's 620px.
   ====================================================================== */
.footer {
  position: relative;
  background: var(--deeper);
  color: var(--on-dark);
  padding: 120px 120px 0;
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer__brand img { height: 25px; width: auto; }
.footer__tagline {
  margin: 14px 0 26px;
  font-size: 13px;
  line-height: 15px;
  color: var(--on-dark-soft);
}
.footer__copy { margin-top: 32px; font-size: 13px; color: var(--on-dark-faint); }
.footer__col { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.footer__col h3 {
  font-size: 13px;
  font-weight: 400;
  color: var(--on-dark-faint);
  margin-bottom: 8px;
}
.footer__col a,
.footer__col button {
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: var(--on-dark-soft);
  transition: color 0.2s var(--ease);
}
.footer__col a:hover,
.footer__col button:hover { color: var(--on-dark); }
.footer__wordmark {
  width: calc(100vw - 120px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 96px;
  height: 214px;
  overflow: hidden;
  opacity: 0.16;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.footer__wordmark img { width: 100%; max-width: none; height: auto; }

/* ======================================================================
   Responsive, wide tablets and small desktops (901–1439).
   Fixed template columns become fluid so nothing clips.
   ====================================================================== */
@media (max-width: 1439px) {
  .twins { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 60px; padding-right: 60px; }
  .closing { padding-left: 60px; padding-right: 60px; }
  .closing__title, .closing__text { width: auto; flex: 1 1 0; }
  .closing__panels { grid-template-columns: minmax(0, 768fr) minmax(0, 502fr); }
  .footer { padding-left: 60px; padding-right: 60px; }
  .footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); gap: 24px; }
}

/* ======================================================================
   Centred hero (tablet and mobile, ≤1199): the copy sits on the pale
   reception wall, so the shade deepens smoothly through the copy band
   (≈50–55% at its centre) and behind the nav, then eases off. Same
   photograph, palette and layout; no card behind the text. Desktop 1440
   keeps the original bottom-left shade above.
   ====================================================================== */
@media (max-width: 1199px) {
  .hero__shade {
    background:
      radial-gradient(70% 38% at 50% 50%, rgba(18, 22, 20, 0.22) 0%, rgba(18, 22, 20, 0) 100%),
      linear-gradient(
        180deg,
        rgba(18, 22, 20, 0.5) 0%,
        rgba(18, 22, 20, 0.22) 14%,
        rgba(18, 22, 20, 0.3) 28%,
        rgba(18, 22, 20, 0.44) 42%,
        rgba(18, 22, 20, 0.46) 58%,
        rgba(18, 22, 20, 0.36) 74%,
        rgba(18, 22, 20, 0.34) 88%,
        rgba(18, 22, 20, 0.5) 100%
      );
  }
}

/* ======================================================================
   Tablet 901–1199 (source measured at 1024x900, docs/template/tablet-hero.json):
   40px gutter, centred column on the shared hero canvas (--hero-min).
   Headline full width x40 w944 at 82/86.1 (two lines, 172.2 tall);
   support and buttons centred below; group 332 tall overall.
   ====================================================================== */
@media (min-width: 901px) and (max-width: 1199px) {
  :root { --gutter: 40px; }
  .hero { align-items: center; }
  /* Symmetric header clearance keeps the centred group where it was. */
  .hero__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: calc(var(--strip-h) + var(--nav-h) + 24px) 40px;
    gap: 32px;
  }
  .hero__title { width: 100%; max-width: 100%; }
  .hero__aside { width: 100%; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
  .hero__support { max-width: 370px; margin-bottom: 28px; }
  .hero__actions { justify-content: center; }
}

/* ======================================================================
   Mobile — measured at 390x844: 48px nav, 24px gutter, 90svh hero.
   ====================================================================== */
@media (max-width: 900px) {
  :root { --gutter: 24px; }

  /* Hero (shared 90svh canvas) on the portrait frame: the coordinator's
     head sits near 35% of the frame, so the centred group rests low over
     the counter with a deeper lower shade, clear of her face. */
  .hero { align-items: flex-end; }
  .hero__poster { object-position: 50% 50%; }
  .hero__shade { background: linear-gradient(180deg, rgba(18, 22, 20, 0.4) 0%, rgba(18, 22, 20, 0) 22%, rgba(18, 22, 20, 0.06) 46%, rgba(18, 22, 20, 0.62) 70%, rgba(18, 22, 20, 0.8) 100%); }
  .hero__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 24px 48px;
    gap: 16px;
  }
  .hero__title { width: 100%; max-width: 100%; font-size: 42px; line-height: 44.1px; letter-spacing: -2.1px; }
  .hero__aside { width: 100%; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
  .hero__support { font-size: 16px; line-height: 21px; margin-bottom: 26px; max-width: none; }
  .hero__actions { justify-content: center; }
  .hero__actions .pill { min-height: 44px; padding: 8px 20px; font-size: 15px; min-width: 0; }

  /* Stories: head 40/24/43 (the source heading's font box is 3px taller than
     Inter's 39.1 line), 330 cards, controls in the 61px band below. */
  .stories { grid-template-columns: 1fr; padding: 0; }
  .stories__head { grid-column: 1; grid-row: 1; padding: 40px 24px 43px; }
  .stories__title { max-width: none; font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .stories__rail { grid-column: 1; grid-row: 2; padding: 0 24px; scroll-padding-left: 24px; }
  .stories__controls { grid-column: 1; grid-row: 3; align-self: auto; padding: 8px 24px 9px; }
  .story { flex-basis: 330px; width: 330px; height: 330px; }
  .story__title { top: 24px; left: 24px; right: 64px; font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }
  .story__arrow { top: 24px; right: 24px; font-size: 24px; line-height: 27.6px; }
  .story__tag { right: 24px; bottom: 24px; }

  /* Statement: 150svh track, sticky 100svh inner, paragraph 28/32.2 lifted 100px. */
  .statement { min-height: 150svh; padding: 0 24px; display: block; }
  .statement__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    padding-bottom: 100px;
  }
  .statement__text { font-size: 28px; line-height: 32.2px; letter-spacing: -1.12px; max-width: none; }

  /* Platform main: 100svh, brand ~y298, title ~y346 (3 lines), sphere below the CTA. */
  .platform__main { min-height: 100svh; padding-bottom: 0; }
  .platform__copy { padding: 298px 24px 0; }
  .platform__brand { font-size: 20px; line-height: 20px; margin-bottom: 28px; }
  .platform__title {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 34px;
    line-height: 39.1px;
    letter-spacing: -1.7px;
    margin-bottom: 32px;
  }
  .platform__title .br-desktop { display: none; }
  .platform__title .br-mobile { display: inline; }
  .orb { width: 200px; height: 200px; margin-top: 32px; }
  .orb__motion { right: 16px; bottom: 16px; }

  /* Twins: 40/24/84 padding, cards at least 500 tall, copy group below the
     native stage; longer copy grows the card instead of clipping. */
  .twins { grid-template-columns: 1fr; gap: 16px; padding: 100px 24px 84px; }
  .twin { min-height: 500px; display: block; }
  /* Stage 294 wide × 350 tall, ending at y374, above the body block at 430:
     tall enough for one whole board column or the Home panel with its
     focal task at 320 and 390. */
  .twin__stage { top: 24px; left: 24px; right: 24px; height: 350px; }
  .twin__body {
    padding: 430px 24px 32px;
    text-align: left;
    align-items: flex-start;
  }
  .twin__more { align-items: flex-start; }
  .twin__title { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; margin-bottom: 12px; }
  .twin__text { max-width: none; font-size: 14px; line-height: 21px; letter-spacing: -0.1px; margin-bottom: 14px; }
  .twin .pill--tiny { height: 37px; }

  /* Workflows: 84/24 padding, heading 15 above tab track (12 + 3 for the
     source's taller font box), 32 above 460 panel. */
  .workflows { padding: 84px 24px; align-items: flex-start; }
  .workflows__title { width: 100%; text-align: left; font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; margin-bottom: 15px; }
  .tabs { flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 32px; }
  .tabs::-webkit-scrollbar { display: none; }
  /* Labels keep their natural width; the strip scrolls rather than the
     buttons shrinking under their text. */
  .tabs__tab { flex: 0 0 auto; min-height: 34.8px; white-space: nowrap; overflow-wrap: normal; }
  .panel { height: 460px; padding: 0 24px 44px; align-items: flex-start; }
  /* The label spans the panel's padded width (294 at 390) and never more:
     the longer care-model names wrap in balanced lines inside it, the size
     eases below 359px (38 at 390, about 34 at 320) with line height and
     tracking in proportion, and a word wider than the box still wraps at
     enlarged text instead of painting past the panel. */
  .panel__label {
    left: 24px;
    right: 24px;
    top: 160px;
    width: auto;
    max-width: 294px;
    transform: none;
    text-align: left;
    font-size: min(38px, 10.6vw);
    line-height: 1.2;
    letter-spacing: -0.05em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  .panel__support { padding: 0; text-align: left; font-size: 15px; }

  /* Closing: 84/24 padding, head ~206, gap 64, two 118 panels with 10 gap, 84 bottom. */
  .closing { min-height: 0; padding: 84px 24px 84px; }
  .closing__head { flex-direction: column; gap: 20px; min-height: 206px; margin-bottom: 64px; }
  .closing__title, .closing__text { width: 100%; flex: 0 0 auto; }
  .closing__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .closing__text { font-size: 16px; line-height: 22px; margin-top: 0; }
  .closing__panels { grid-template-columns: 1fr; gap: 10px; }
  .panel-link { height: 118px; padding: 32px; }
  .panel-link__label { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }

  .footer { padding: 72px 24px 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__wordmark { width: calc(100vw - 48px); margin-top: 48px; height: 90px; }
}

/* Narrower than the measured 390: scale the hero headline so it stays on two lines. */
@media (max-width: 389px) {
  .hero__title { font-size: 10.77vw; line-height: 1.05; letter-spacing: -0.05em; }
}

/* Small prompt nodes open in the space around Neo, never over its copy. */
.neo-prompts { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.neo-node { position: absolute; display: flex; align-items: center; height: 36px; max-width: calc(100% - 48px); font-size: 14px; line-height: 20px; }
.neo-node--1 { left: 20%; top: 220px; }
.neo-node--2 { right: 20%; top: 220px; flex-direction: row-reverse; }
.neo-node--3 { left: 20%; bottom: 160px; }
.neo-node--4 { right: 20%; bottom: 160px; flex-direction: row-reverse; }
.neo-node__marker { border-radius: 4px; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; height: 36px; background: transparent; transform: scale(0.18); transition: transform 450ms var(--ease), background 350ms var(--ease); }
.neo-node__marker::after { content: ''; border-radius: 2px; width: 12px; height: 12px; background: var(--sea-glass); transition: transform 450ms var(--ease); }
.neo-node:nth-child(even) .neo-node__marker::after { background: var(--emerald); }
.neo-node[data-open] .neo-node__marker { transform: scale(1); background: var(--deep); }
.neo-node[data-open] .neo-node__marker::after { transform: scale(0.55); }
.neo-node__card { width: 0; overflow: hidden; height: 36px; background: #FFFFFF; color: var(--ink); transition: width 550ms var(--ease); }
.neo-node[data-card-open] .neo-node__card { width: var(--prompt-width); }
.neo-node__text { display: block; min-width: 0; overflow: hidden; white-space: nowrap; padding-block: 8px; }
.neo-node__text { margin-inline: 12px; }
@media (max-width: 900px) {
  .neo-node { font-size: 12px; }
  .neo-node--1 { left: 8%; top: 140px; }
  .neo-node--2 { right: 8%; top: 140px; }
  .neo-node--3 { left: 8%; bottom: 56px; }
  .neo-node--4 { right: 8%; bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .neo-node__marker, .neo-node__card, .neo-node__marker::after { transition: none; }
}

/* Lower homepage content shares the 1200px inset used by the product pair. */
@media (min-width: 901px) {
  .closing { padding-inline: max(60px, calc((100% - 1200px) / 2)); }
  .footer { padding-inline: max(60px, calc((100% - 1200px) / 2)); }
  .footer__grid { grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 900px) { .panel__media--modern { object-position: 78% center; } }

/* Footer social icon links: the footer link colours at the tagline size. */
.footer__social { display: flex; gap: 8px; margin: 20px 0 0 -4px; padding: 0; list-style: none; }
.footer__social a { display: inline-flex; padding: 4px; color: var(--on-dark-soft); transition: color 0.2s var(--ease); }
.footer__social a:hover { color: var(--on-dark); }
.footer__social-icon { width: 20px; height: 20px; }

/* Neogenic — the shared product preview, an accessible native dialog. */

.dialog {
  border: 0;
  padding: 0;
  margin: auto;
  background: transparent;
  color: var(--ink);
  max-width: min(560px, calc(100vw - 32px));
  width: 100%;
}
.dialog::backdrop {
  background: rgba(18, 22, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dialog[open] { animation: dialog-in 0.28s var(--ease); }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.dialog__card {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 40px 40px 36px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
}

/* Product preview: one shared wide dialog with the accepted captures.
   A pill picker (same footprint as the section tabs) switches the visible
   figure; each figure keeps the screenshot's own 16:9 proportions and links
   to the full-size file. On mobile the card scrolls and the link still opens
   the original image. */
.dialog--wide { max-width: min(1040px, calc(100vw - 32px)); }
.preview__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #F1F1F1;
  margin: 4px 0 16px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.preview__tabs::-webkit-scrollbar { display: none; }
.preview__tab {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: -0.1px;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.preview__tab:hover { color: var(--ink); }
.preview__tab[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.preview__screen { margin: 0 0 20px; }
.preview__screen[hidden] { display: none; }
.preview__screen img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(18, 22, 20, 0.1);
  background: #F4F4F2;
}
.preview__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}
.preview__caption .text-link { white-space: nowrap; }

.dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.dialog__close:hover { background: rgba(18, 22, 20, 0.06); }

.dialog__eyebrow {
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.dialog__title {
  font-weight: 300;
  font-size: 32px;
  line-height: 36.8px;
  letter-spacing: -1.28px;
  margin-bottom: 16px;
  padding-right: 32px;
}
.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

@media (max-width: 600px) {
  .dialog__card { padding: 32px 24px 28px; border-radius: 14px; }
  .dialog__title { font-size: 28px; line-height: 32px; letter-spacing: -1px; }
  .dialog__actions .pill { height: 44px; }
  /* With up to eleven scenes, every picker entry stays visible on mobile
     instead of scrolling out of reach. */
  .preview__tabs { display: flex; flex-wrap: wrap; border-radius: 18px; }
}

/* Compact optional-cookie choice, matching the owner's white-card reference. */
.cookie-consent { position: fixed; left: 24px; bottom: 24px; z-index: 120; width: min(440px, calc(100% - 48px)); padding: 24px; border: 1px solid #eeeeec; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 8px 32px rgba(13,16,14,.08); }
.cookie-consent[hidden] { display: none; }
.cookie-consent__title { margin: 0 0 12px; font-size: 22px; line-height: 1.25; font-weight: 400; letter-spacing: -.3px; }
.cookie-consent__text { margin: 0; font-size: 16px; line-height: 1.5; color: #505350; }
.cookie-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.cookie-consent .pill { width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; font-size: 16px; letter-spacing: normal; }
.cookie-consent [data-cookie-consent-reject] { background: #efefef; color: #484b48; }
.cookie-consent [data-cookie-consent-reject]:hover { background: #e5e5e5; }
.cookie-consent [data-cookie-consent-accept] { background: #000; color: #fff; }
.cookie-consent [data-cookie-consent-accept]:hover { background: #252825; }
@media (max-width: 480px) { .cookie-consent { left: 16px; bottom: 16px; width: calc(100% - 32px); padding: 20px; } }

/* Neogenic — inner page families (phase 3, screenshot-corrected).
   Capability family (/platform/*)  ← Wonderful /agents
   Industry family   (/solutions/*) ← Wonderful /industries/healthcare
   Overview          (/longevity-clinic-software/) ← Wonderful /ai-os
   Inquiry family    (/contact/)    ← Wonderful /contact
   About             (/about/)      ← Wonderful /about-us
   Numbers are the packet's CSS pixels at 1440×1000 and 390×844, corrected
   against the frozen screenshots where the README summary was wrong. Inter
   300 stands in for ABC Favorit Light. Native excerpts are styled in
   benchmark.css, sales.css and completion.css; brand optical compositions
   in product.css. The native captures are shown only by the shared preview
   dialog and the menu teaser. */

.round-btn--on-dark { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.35); }
.round-btn--on-dark:hover { background: rgba(255, 255, 255, 0.1); }

.icon { display: block; width: 24px; height: 24px; }

/* ======================================================================
   Capability family — /platform/*
   ====================================================================== */
/* 1. Hero on the shared canvas (--hero-min, base.css): mark row → 24 →
   H1 64/67.2 (707-wide box, 3+2) → 12 → support 20/25, group centred. */
.cap-hero {
  position: relative;
  min-height: var(--hero-min);
  padding: 24px 60px 0;
  background: var(--deeper);
  color: #FAFAFA;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Platform pages: the concept's optical field under a light shade (the
   generic gradient backdrop and dots below remain for the Overview hero). */
.cap-hero__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cap-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 14, 0.44) 0%, rgba(13, 16, 14, 0.3) 45%, rgba(13, 16, 14, 0.42) 100%); }
.cap-hero__backdrop {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(60% 45% at 50% 45%, rgba(47, 111, 99, 0.5), transparent 70%),
    radial-gradient(40% 35% at 18% 85%, rgba(191, 227, 214, 0.16), transparent 70%),
    radial-gradient(45% 40% at 85% 20%, rgba(201, 134, 90, 0.14), transparent 70%),
    linear-gradient(160deg, #0F1513 0%, #121614 50%, #0B0E0D 100%);
  filter: blur(40px);
  animation: drift 26s ease-in-out infinite alternate;
}
.cap-hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1.2px, transparent 1.6px);
  background-size: 107px 88px;
  background-position: 183px 47px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(60% 60% at 50% 45%, #000 20%, transparent 100%);
}
/* min-width 0: the group is a flex item, so without it the fixed-width
   mobile title and support would set its minimum wider than a 320 screen. */
.cap-hero__group {
  position: relative;
  z-index: 1;
  width: 950px;
  max-width: 100%;
  min-width: 0;
  margin-top: -11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cap-hero__mark { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; font-size: 24px; letter-spacing: -0.6px; color: rgba(250, 250, 250, 0.95); }
.cap-hero__mark img { width: 28px; height: 28px; }
.cap-hero__title {
  max-width: 760px;
  font-weight: var(--display-weight);
  font-size: 64px;
  line-height: 67.2px;
  letter-spacing: -3.84px;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
.cap-hero__title .br-mobile { display: none; }
.cap-hero__support { max-width: 665px; font-size: 20px; line-height: 25px; letter-spacing: -0.3px; color: rgba(250, 250, 250, 0.86); overflow-wrap: anywhere; }

/* 2. Outcomes: white, 120/60, H2 → 80 → three 429.33×528 cards, 16 gaps. */
.cap-outcomes { padding: 120px var(--gutter); background: #FFFFFF; color: var(--ink); }
.cap-outcomes__title,
.cap-tiles__title,
.cap-detail__title,
.cap-related__title {
  font-weight: var(--display-weight);
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -1.92px;
  padding-bottom: 3px;
}
.cap-outcomes__title { margin-bottom: 80px; }
.cap-outcomes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cap-card { position: relative; height: 528px; border-radius: 8px; overflow: hidden; background: var(--deep); color: #FAFAFA; }
.cap-card__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cap-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 120px 20px 24px;
  background: linear-gradient(180deg, rgba(18, 22, 20, 0) 0%, rgba(18, 22, 20, 0.72) 55%, rgba(18, 22, 20, 0.86) 100%);
}
.cap-card__title { font-weight: 300; font-size: 26px; line-height: 32.5px; letter-spacing: -1.3px; }
.cap-card__text { margin-top: 8px; font-size: 15px; line-height: 21px; color: rgba(250, 250, 250, 0.78); }

/* 3. Detail: #080808, 120/60. Text 506 | 60 | media 754×622.688. Desktop:
   H2, five rows (26/32.5, first open with a 14/21 body, inactive at 45%),
   media dictates the 862.7 height. Mobile: H2, intro, four visible rows,
   media 342×279 below. */
.cap-detail {
  display: grid;
  grid-template-columns: 506px minmax(0, 754px);
  column-gap: 60px;
  justify-content: space-between;
  padding: 120px var(--gutter);
  background: #080808;
  color: #F5F5F5;
}
.cap-detail__title { margin-bottom: 50px; }
.cap-detail__intro { display: none; }
.cap-rows { display: flex; flex-direction: column; }
.cap-row { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.cap-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.cap-row__heading { font: inherit; }
.cap-row__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  text-align: left;
  font-weight: 300;
  font-size: 26px;
  line-height: 32.5px;
  letter-spacing: -1.3px;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s var(--ease);
}
.cap-row__toggle:hover, .cap-row[data-open="true"] .cap-row__toggle { color: #F5F5F5; }
.cap-row__toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform 0.2s var(--ease);
}
.cap-row[data-open="true"] .cap-row__toggle::after { transform: rotate(-135deg); }
/* Plain heading text for mobile; the button is the desktop control. */
.cap-row__label { display: none; }
.cap-row__body { display: none; margin-top: -4px; padding: 0 32px 24px 0; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, 0.72); }
.cap-row[data-open="true"] .cap-row__body { display: block; }
.cap-detail__media { align-self: start; }
.cap-detail__slot[hidden] { display: none; }

.cap-divider { height: 1px; border: 0; margin: 0; background: rgba(255, 255, 255, 0.12); }

/* 5. Walkthrough rail: black; H2 at 160 (the source's offset), 80 gap,
   583 squares, 120 bottom. Reuses the homepage story card classes. */
.cap-stories { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 160px 0 120px; background: #000000; color: #FAFAFA; }
.cap-stories .stories__head { grid-column: 1; grid-row: 1; padding: 0 24px 80px var(--gutter); }
.cap-stories__title { color: #FAFAFA; padding-bottom: 3px; }
.cap-stories .stories__controls { grid-column: 2; grid-row: 1; align-self: start; display: flex; gap: 8px; padding: 4px var(--gutter) 0 0; }
.cap-stories .stories__rail {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 16px;
  padding: 0 var(--gutter) 0 62px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 62px;
  scrollbar-width: none;
}
.cap-stories .stories__rail::-webkit-scrollbar { display: none; }
.cap-stories .story { flex-basis: 583px; width: 583px; height: 583px; }

/* 6. Ruled icon grid: #FAFAFA, 120/60. H2 → 24 → intro 17/21.25 → 72 →
   4×2 grid of 312 cells (24 gaps, left rule, 32 inner padding, icon at
   +32, title 20/23 at +125, body 14/21), cell 250, row gap 24. */
.cap-tiles { padding: 120px var(--gutter); background: #FAFAFA; color: var(--ink); }
.cap-tiles__title { margin-bottom: 24px; overflow-wrap: anywhere; }
.cap-tiles__title .br-mobile { display: none; }
.cap-tiles__intro { max-width: 560px; font-size: 17px; line-height: 21.25px; letter-spacing: -0.34px; color: var(--ink-soft); margin-bottom: 72px; }
.cap-tiles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cap-tile { min-height: 250px; min-width: 0; padding: 32px 24px 0 32px; border-left: 1px solid rgba(18, 22, 20, 0.12); }
.cap-tile__icon { color: var(--ink); }
/* Enlarged text: a long word may break inside the narrow tile. */
.cap-tile__title { margin-top: 69px; font-weight: 300; font-size: 20px; line-height: 23px; letter-spacing: -1px; overflow-wrap: anywhere; }
.cap-tile__text { margin-top: 22px; font-size: 14px; line-height: 21px; color: var(--ink-soft); overflow-wrap: anywhere; }

/* 7. Related cards: dark, 120/60, H2 560 wide → 84 → three 429.33×615.7.
   Full-bleed brand atmosphere; the module name centred with its top 276
   from the card top (source identity position, no repeated wordmark); a
   218-wide 14/21 benefit line and an Explore pill at the foot, 19 above the
   edge. */
.cap-related { padding: 120px var(--gutter); background: var(--deeper); color: #FAFAFA; }
.cap-related__title { max-width: 560px; margin-bottom: 84px; }
.cap-related__title .br-mobile { display: none; }
.cap-related__intro { max-width: 620px; margin: -60px 0 84px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: rgba(250, 250, 250, 0.72); }
.cap-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cap-related__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The invitation under the cards: an optional line and the one action. */
.cap-related__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 32px; margin-top: 84px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.cap-related__lead { margin-right: auto; font-weight: 300; font-size: 32px; line-height: 36.8px; letter-spacing: -1.28px; }
.cap-related__link { position: relative; display: block; height: 615.703px; border-radius: 8px; overflow: hidden; background: #171C1A; color: #FAFAFA; text-align: center; }
.cap-related__atmo { transition: transform 0.6s var(--ease); }
.cap-related__link:hover .cap-related__atmo { transform: scale(1.03); }
.cap-related__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 14, 0.3) 0%, rgba(13, 16, 14, 0.16) 45%, rgba(13, 16, 14, 0.5) 100%); }
.cap-related__brand {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 276px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.6px;
  text-shadow: 0 1px 12px rgba(13, 16, 14, 0.35);
}
.cap-related__label { font-weight: 300; }
.cap-related__body {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 19px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.cap-related__desc { max-width: 218px; font-size: 14px; line-height: 21px; color: rgba(250, 250, 250, 0.95); text-shadow: 0 1px 10px rgba(13, 16, 14, 0.35); }
.cap-related__explore { background: #FFFFFF; color: var(--ink); pointer-events: none; }
.cap-related__link:hover .cap-related__explore { background: var(--ivory); }
.cap-related__link:focus-visible { outline: 2px solid var(--emerald); outline-offset: 4px; }

/* ======================================================================
   Industry family — /solutions/*
   ====================================================================== */
/* 1. Hero on the shared canvas (--hero-min): H1 one word x60 w920 200/210
   −12; support x1020 w360 26/32.5 starting 80.5 below the H1 top behind a
   rule at x980. */
.sol-hero { position: relative; min-height: var(--hero-min); background: var(--deep); color: #FAFAFA; overflow: hidden; display: flex; align-items: flex-end; }
.sol-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sol-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 22, 20, 0.35) 0%, rgba(18, 22, 20, 0) 35%, rgba(18, 22, 20, 0.15) 60%, rgba(18, 22, 20, 0.7) 100%); }
/* Bottom-anchored content. The top padding is header clearance for
   intrinsic growth only: at normal size the content sits at the foot of the
   1000 canvas as measured, but when enlarged text makes the content taller
   than the canvas, the first line starts below the fixed header instead of
   flush with the hero's top edge, where the 1.05 line-height let the
   glyph box of the 200px word overflow above the clipped hero. */
.sol-hero__content { position: relative; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 0; padding: calc(var(--strip-h) + var(--nav-h) + 24px) var(--gutter) 80px; }
/* The word is one line at every measured size; with enlarged text it may
   break inside the column (overflow-wrap) rather than leave the canvas. */
.sol-hero__word {
  width: 920px;
  max-width: 100%;
  min-width: 0;
  font-weight: var(--display-weight);
  font-size: min(200px, 13.9vw);
  line-height: 1.05;
  letter-spacing: -0.06em;
  overflow-wrap: anywhere;
}
/* The word is the display label; the H1 and its support sit behind the
   rule at the measured position and grow downward with longer copy. */
.sol-hero__aside {
  flex: 0 1 400px;
  min-width: 0;
  width: 400px;
  margin-top: 80.5px;
  padding-left: 40px;
  border-left: 1px solid rgba(250, 250, 250, 0.5);
}
.sol-hero__title {
  font-weight: 300;
  font-size: 26px;
  line-height: 32.5px;
  letter-spacing: -1.3px;
  overflow-wrap: anywhere;
}
.sol-hero__support {
  margin-top: 16px;
  font-size: 17px;
  line-height: 21.76px;
  letter-spacing: -0.51px;
  color: rgba(250, 250, 250, 0.86);
  overflow-wrap: anywhere;
}
.sol-hero__name { position: absolute; left: var(--gutter); top: calc(var(--strip-h) + var(--nav-h) + 40px); font-size: 14px; letter-spacing: -0.1px; color: rgba(250, 250, 250, 0.75); }

/* 2. Strip 416.5: 120/60, 26/32.5 centred title → 64 → 80-tall items. */
.sol-strip { padding: 120px var(--gutter); background: #FFFFFF; color: var(--ink); text-align: center; }
.sol-strip__title { font-weight: 300; font-size: 26px; line-height: 32.5px; letter-spacing: -1.3px; margin-bottom: 64px; }
.sol-strip__list { display: flex; justify-content: center; gap: 16px; }
.sol-strip__item { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 300px; height: 80px; padding: 0 24px; border-radius: 8px; background: var(--bg-tile); text-align: left; transition: background-color 0.2s var(--ease); }
.sol-strip__item:hover { background: #E7E3DA; }
.sol-strip__label { font-size: 18px; letter-spacing: -0.3px; }
.sol-strip__desc { font-size: 14px; color: var(--ink-soft); }

/* 3. Outcomes 752 over a photo: H2 48/60 862 wide → 92 → three 412-wide
   ruled columns (left rule, 32 inset, icon at +48, title 24/27.6 at +162,
   body 17/21.25 at +202), 300 tall, 42 gaps. */
.sol-outcomes { position: relative; min-height: 752px; padding: 120px var(--gutter); background: var(--deeper); color: #FAFAFA; overflow: hidden; }
.sol-outcomes__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(0.8); transform: scale(1.1); opacity: 0.55; }
.sol-outcomes__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 14, 0.55), rgba(13, 16, 14, 0.85)); }
.sol-outcomes__title { position: relative; max-width: 862px; font-weight: var(--display-weight); font-size: 48px; line-height: 60px; letter-spacing: -1.92px; margin-bottom: 92px; }
.sol-outcomes__grid { position: relative; display: grid; grid-template-columns: repeat(3, 412px); gap: 42px; justify-content: space-between; }
.sol-outcome { min-height: 300px; padding: 48px 0 0 32px; border-left: 1px solid rgba(255, 255, 255, 0.22); }
.sol-outcome__icon { width: 28px; height: 28px; color: #FAFAFA; }
.sol-outcome__title { margin-top: 86px; font-weight: 400; font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }
.sol-outcome__text { margin-top: 12px; max-width: 348px; font-size: 17px; line-height: 21.25px; letter-spacing: -0.68px; color: rgba(255, 255, 255, 0.7); }

/* 4. Use cases: #080808, 60/60/120; 628 | 64 | 628; H2 505 wide; four
   divided rows; 628×700 product slot with a contain fit. */
.sol-cases { display: grid; grid-template-columns: 628px 628px; column-gap: 64px; justify-content: space-between; padding: 60px var(--gutter) 120px; background: #080808; color: #FFFFFF; }
.sol-cases__title { max-width: 505px; font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; margin-bottom: 64px; }
.sol-cases__rows { list-style: none; padding: 0; }
.sol-case { padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.sol-case:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.sol-case__title { font-size: 17px; line-height: 21.25px; font-weight: 500; letter-spacing: -0.85px; margin-bottom: 16px; }
.sol-case__text { max-width: 408px; font-size: 17px; line-height: 21.25px; letter-spacing: -0.68px; color: rgba(255, 255, 255, 0.7); }
.sol-cases__media { align-self: start; }

/* 5. Editorial rows: white, 120 top; title 48/50.4 + statement 48/50.4
   muted (≤3 lines) → 80 → rows title | 310×195.672 image at x688 | body
   318 at x1072 (17/21.76 #777), 60 vertical padding, pitch 316.7. */
.sol-reasons { padding: 120px 0 0; background: #FFFFFF; color: var(--ink); }
.sol-reasons__head { padding: 0 var(--gutter); margin-bottom: 80px; }
.sol-reasons__title { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; margin-bottom: 8px; overflow-wrap: anywhere; }
.sol-reasons__statement { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; color: rgba(49, 49, 49, 0.6); overflow-wrap: anywhere; }
.sol-reasons__rows { list-style: none; padding: 0 var(--gutter) 0; }
.sol-reason { display: grid; grid-template-columns: 554px 310px minmax(0, 1fr); column-gap: 74px; align-items: start; padding: 60px 0; border-top: 1px solid rgba(18, 22, 20, 0.1); }
.sol-reason__title { font-weight: 300; font-size: 32px; line-height: 36.8px; letter-spacing: -1.28px; }
.sol-reason__media { width: 310px; height: 195.672px; border-radius: 4px; overflow: hidden; background: var(--bg-tile); }
.sol-reason__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.sol-reason__text { font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: #777777; }

/* 6. Closing 700 over the brand atmosphere: 160/60, centred 660-wide
   48/50.4 H2, 60 gap, one 140 pill. Shared by Solutions, overview, About. */
.sol-closing { position: relative; min-height: 700px; padding: 160px var(--gutter); background: var(--deeper); color: #FAFAFA; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sol-closing__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 14, 0.38), rgba(13, 16, 14, 0.66)); }
.sol-closing__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 60px; text-align: center; }
.sol-closing__title { max-width: 660px; font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; }
.sol-closing__cta { min-width: 140px; }
.sol-closing__links { font-size: 14px; color: rgba(250, 250, 250, 0.7); }
.sol-closing__links a { text-decoration: underline; text-underline-offset: 3px; }

/* ======================================================================
   Overview family — /longevity-clinic-software/
   ====================================================================== */
/* 1. Hero on the shared canvas (--hero-min): the live Neo sphere as the
   mark, 800-wide 9-word H1 (5+4), group centred. */
.ov-hero { position: relative; min-height: var(--hero-min); padding: 24px 60px 0; background: var(--deeper); color: #FAFAFA; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ov-hero__group { position: relative; z-index: 1; min-width: 0; max-width: 100%; margin-top: -89px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ov-hero__orb { width: 120px; height: 120px; margin: 0 0 24px; }
.ov-hero__title { width: 800px; max-width: 100%; min-width: 0; font-weight: var(--display-weight); font-size: 64px; line-height: 67.2px; letter-spacing: -3.84px; overflow-wrap: anywhere; }
.ov-hero__title .br-mobile { display: none; }
.ov-hero__support { max-width: 665px; margin-top: 24px; font-size: 20px; line-height: 25px; letter-spacing: -0.3px; color: rgba(250, 250, 250, 0.8); overflow-wrap: anywhere; }
.ov-hero .orb__motion { position: absolute; right: 24px; bottom: 24px; z-index: 2; }

/* 2. Seven-part diagram, 842.7 tall: 140/60; left 506 (H2, then the active
   title 32/36.8 and 17/21.76 body); right 754×562.672 diagram card with
   seven selectors. Mobile: H2 then one 342×568 card holding the diagram
   and the active description. */
.ov-cats {
  display: grid;
  grid-template-columns: 506px minmax(0, 754px);
  grid-template-areas: "title diagram" "panels diagram";
  column-gap: 60px;
  justify-content: space-between;
  align-content: start;
  padding: 140px var(--gutter);
  background: #080808;
  color: #F5F5F5;
}
.ov-cats__title { grid-area: title; font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; }
.ov-cats__card { display: contents; }
.ov-diagram {
  grid-area: diagram;
  position: relative;
  width: 100%;
  aspect-ratio: 754 / 562.672;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(60% 45% at 50% 45%, rgba(47, 111, 99, 0.7), transparent 70%),
    radial-gradient(40% 35% at 18% 85%, rgba(191, 227, 214, 0.3), transparent 70%),
    radial-gradient(45% 40% at 85% 20%, rgba(201, 134, 90, 0.2), transparent 70%),
    linear-gradient(160deg, #1B2623 0%, #2F6F63 50%, #101413 100%);
}
.ov-diagram__panel { position: relative; width: 566px; max-width: calc(100% - 48px); padding: 44px 40px 32px; border-radius: 14px; background: rgba(10, 14, 13, 0.82); border: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; gap: 16px; }
.ov-diagram__group { display: flex; flex-direction: column; gap: 8px; }
.ov-diagram__group-title { font-size: 12px; line-height: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.ov-diagram__active {
  position: absolute;
  z-index: 1;
  top: calc(50% - 175px);
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(191, 227, 214, 0.9);
  color: var(--deep);
  font-size: 14px;
  white-space: nowrap;
}
.ov-diagram__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ov-diagram__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Full module names at every width: labels wrap inside intrinsic-height
   buttons rather than truncating. */
.ov-diagram__item {
  min-width: 0;
  min-height: 50px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ov-diagram__item:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); }
.ov-diagram__item[aria-pressed="true"] { background: rgba(191, 227, 214, 0.18); border-color: rgba(191, 227, 214, 0.7); color: #FFFFFF; }
/* Stable selector: every panel shares one grid cell, so the section keeps
   the height of the tallest description whichever area is selected. */
.ov-cats__panels { grid-area: panels; margin-top: 60px; display: grid; grid-template-columns: minmax(0, 1fr); }
.ov-cats__panel { grid-area: 1 / 1; min-width: 0; }
.ov-cats__panel[data-active="false"] { visibility: hidden; }
.ov-cats__name { font-weight: 300; font-size: 32px; line-height: 36.8px; letter-spacing: -1.28px; }
.ov-cats__body { margin-top: 16px; max-width: 420px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: rgba(255, 255, 255, 0.6); }
.ov-cats__link { text-decoration: underline; text-underline-offset: 3px; color: #F5F5F5; white-space: nowrap; }

/* 4. Five benefits on dark, 1040.7 (phase 4 root measurements): 120/60;
   H2 → 24 → intro 620 wide 17/21.76 −0.51 (3 lines) → 60 → three 424
   columns with 24 row and column gaps, tiles at natural height (266/287),
   32 padding, 32×32 icon, 60 to the 20/23 title, 24 to the 14/21 body
   in a 360 content width; the rule is drawn without consuming width. */
.ov-benefits { padding: 120px var(--gutter); background: #080808; color: #F5F5F5; }
.ov-benefits__title { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; margin-bottom: 24px; }
.ov-benefits__intro { max-width: 620px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: rgba(255, 255, 255, 0.6); margin-bottom: 60px; }
.ov-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ov-benefit { position: relative; padding: 32px; }
.ov-benefit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.18); }
.ov-benefit__icon { width: 32px; height: 32px; color: #F5F5F5; }
.ov-benefit__title { margin-top: 60px; font-weight: 300; font-size: 20px; line-height: 23px; letter-spacing: -1px; }
.ov-benefit__text { margin-top: 24px; font-size: 14px; line-height: 21px; letter-spacing: -0.7px; color: rgba(255, 255, 255, 0.6); }

/* 5. Overview editorial: one combined H2, the dark lead on its own line
   and the grey rest across three desktop lines (desktop-only breaks),
   1320 wide at 48/50.4, 80 to the first ruled row; four rows at 316.7
   pitch; the desktop section ends with the last row. */
.ov-rows__head { margin-bottom: 80px; }
.ov-rows__statement { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; overflow-wrap: anywhere; }
.ov-rows__lead { display: block; color: var(--ink); }
.ov-rows__rest { color: rgba(49, 49, 49, 0.6); }
.ov-rows__rows { padding-bottom: 0; }

.ov-closing { min-height: 640px; }

/* ======================================================================
   Inquiry family — /contact/
   ====================================================================== */
/* Two 720×1000 panes: dark photo pane with light text (as the source) and
   a white form pane. Intro x145 w430; form x840 w480. */
.inq { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; background: #FFFFFF; color: var(--ink); }
.inq__pane { position: relative; padding-top: calc(var(--strip-h) + var(--nav-h)); }
.inq__pane--photo { background: var(--deep); color: #FFFFFF; overflow: hidden; }
.inq__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inq__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 22, 20, 0.62) 0%, rgba(18, 22, 20, 0.5) 40%, rgba(18, 22, 20, 0.66) 100%); }
.inq__intro { position: relative; width: 430px; max-width: calc(100% - 48px); margin: 128px 0 0 145px; display: flex; flex-direction: column; gap: 26px; min-height: 594px; }
.inq__title { font-weight: var(--display-weight); font-size: 64px; line-height: 67.2px; letter-spacing: -3.84px; color: #FAFAFA; }
.inq__support { max-width: 424px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: #FFFFFF; }
.inq__covers-title { margin-bottom: 8px; font-size: 12px; line-height: 20.4px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.inq__covers-list { margin: 0; padding-left: 18px; list-style: disc; font-size: 15px; line-height: 22px; color: #FFFFFF; }
.inq__lines { margin-top: auto; font-size: 12px; line-height: 20.4px; color: rgba(255, 255, 255, 0.8); }
.inq__mail { text-decoration: underline; text-underline-offset: 2px; }
/* Header over the split: light text over the photo pane, dark controls
   over the white pane (desktop only; the mobile hero photo is full width). */
@media (min-width: 901px) {
  .page-contact .site-header[data-theme="dark"] .nav .pill--outline { border-color: rgba(18, 22, 20, 0.35); color: var(--ink); }
  .page-contact .site-header[data-theme="dark"] .nav .pill--fill { background: var(--ink); color: var(--on-dark); }
}
/* Narrower split widths: the links would cross from the photo onto the
   white form, so the whole bar takes one light surface with dark links. */
@media (min-width: 901px) and (max-width: 1279px) {
  .page-contact .site-header[data-theme] .nav { color: var(--ink); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .page-contact .site-header[data-theme] .nav__logo-light { display: none; }
  .page-contact .site-header[data-theme] .nav__logo-dark { display: block; }
  .page-contact .site-header[data-theme] .nav .pill--fill { background: var(--ink); color: var(--on-dark); }
}

.inq__pane--form { display: flex; justify-content: center; }
.inq__form { width: 480px; max-width: calc(100% - 48px); margin-top: 126px; padding-bottom: 80px; display: flex; flex-direction: column; }
.inq__form-title { font-weight: 300; font-size: 26px; line-height: 32.5px; letter-spacing: -1.3px; margin-bottom: 30px; }
.inq__note { margin-top: 16px; font-size: 12px; line-height: 18px; color: #5A605D; }
.inq__helper { font-size: 12px; line-height: 14.4px; color: #777777; margin-bottom: 30px; }
.inq__row { display: grid; grid-template-columns: 228px 228px; column-gap: 24px; }
.inq__field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.inq__label { font-size: 14px; line-height: 16.8px; }
.inq__optional { color: #777777; }
.inq__input { width: 100%; height: 40px; padding: 12px 16px; font: inherit; font-size: 14px; line-height: 16px; color: var(--ink); background: #F5F5F5; border: 1px solid rgba(18, 22, 20, 0.14); border-radius: 8px; }
.inq__input--area { height: auto; line-height: 20px; resize: vertical; }
.inq__choices { border: 0; padding: 0; min-width: 0; }
.inq__legend { margin-bottom: 10px; padding: 0; }
.inq__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inq__chip { position: relative; display: inline-flex; }
.inq__chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.inq__chip span { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; font-size: 14px; line-height: 16px; color: var(--ink); background: #F5F5F5; border: 1px solid rgba(18, 22, 20, 0.14); border-radius: 999px; }
.inq__chip input:hover + span { border-color: rgba(18, 22, 20, 0.32); }
.inq__chip input:checked + span { color: #FFFFFF; background: var(--ink); border-color: var(--ink); }
.inq__chip input:focus-visible + span { outline: 2px solid var(--emerald); outline-offset: 1px; }
.inq__reveal--moving { overflow: hidden; }
.inq__form-title--step { margin-bottom: 8px; }
.inq__scheduler { position: relative; margin: 16px 0; }
.inq__scheduler-loading { position: absolute; top: 24px; left: 0; right: 0; margin: 0; text-align: center; }
.inq__scheduler iframe { position: relative; display: block; width: 100%; height: 700px; border: 0; border-radius: 12px; }
.inq__input:focus-visible { outline: 2px solid var(--emerald); outline-offset: 1px; border-color: transparent; }
.inq__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 8px; }
.inq__submit { min-width: 143px; height: 40px; padding: 0 20px; border-radius: 10px; background: var(--ink); color: #FFFFFF; font-size: 14px; font-weight: 600; transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease); }
.inq__submit:hover { background: #2A2F2C; }
.inq__submit:disabled { opacity: 0.45; cursor: default; }
.inq__direct { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.inq__status { margin-top: 16px; font-size: 14px; line-height: 20px; }
.inq__status:empty { display: none; }
.inq__fallback { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.inq__fallback[hidden] { display: none; }
.inq__fallback .inq__helper { margin-bottom: 0; }

/* ======================================================================
   About — /about/ (docs/full-site-template/about/README.md)
   ====================================================================== */
/* 1. White hero 1254.6 tall: 160/60/120. H1 x60 w1010 at 62/71.3 −3.1
   (6 words, 2 lines, 142.6); support x1080 w300 at 16/24 (15 words, 3
   lines); 32 below the text row the 1320×800 photo with 8px corners. */
.ab-hero { padding: 160px var(--gutter) 120px; background: #FFFFFF; color: var(--ink); }
.ab-hero__head { display: grid; grid-template-columns: 1010px 300px; justify-content: space-between; align-items: start; }
.ab-hero__title { font-weight: var(--display-weight); font-size: 62px; line-height: 71.3px; letter-spacing: -3.1px; }
.ab-hero__title .br-mobile { display: none; }
.ab-hero__support { font-size: 16px; line-height: 24px; color: var(--ink); }
/* Anchored to the source's top edge: the upper walkway figure's head sits
   near the top of the frame, so any vertical crop is taken from the floor. */
.ab-hero__photo { display: block; width: 100%; height: 800px; margin-top: 32px; border-radius: 8px; object-fit: cover; object-position: 50% 0%; }

/* 2. White story: inner 1200 at x120, rows of 570 | 60 | 570. Row one: a
   two-line H2 left; two 17/21.76 paragraphs 30 apart and a 570×560.57
   photo 64 below the text on the right. A rule, then row two 120 later:
   one-line H2 left; narrative right with the founder block and a 171×50
   outlined pill 40 below (the source's careers CTA slot). */
.ab-story { padding: 0 120px 120px; background: #FFFFFF; color: var(--ink); }
.ab-story__row { display: grid; grid-template-columns: 570px 570px; column-gap: 60px; justify-content: space-between; align-items: start; }
.ab-story__row--second { margin-top: 60px; padding-top: 60px; border-top: 1px solid rgba(18, 22, 20, 0.1); }
.ab-story__title { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; }
.ab-story__body { display: flex; flex-direction: column; }
.ab-story__text { font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: var(--ink); }
.ab-story__text + .ab-story__text { margin-top: 30px; }
.ab-story__photo { display: block; width: 100%; height: 560.57px; margin-top: 64px; border-radius: 8px; object-fit: cover; object-position: center; }
.ab-founder { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(18, 22, 20, 0.1); }
.ab-founder__title { font-weight: 400; font-size: 17px; line-height: 21.25px; letter-spacing: -0.85px; margin-bottom: 8px; }
.ab-founder__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 24px; }
.ab-founder__cta { min-width: 171.4px; }

/* ======================================================================
   Tablet and small desktop (901–1439): fixed columns go fluid.
   ====================================================================== */
@media (max-width: 1439px) {
  .ab-hero__head { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; }
  .ab-hero__photo { height: auto; aspect-ratio: 1320 / 800; }
  .ab-story { padding: 0 60px 120px; }
  .ab-story__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .ab-story__photo { height: auto; aspect-ratio: 570 / 560.57; }
  .cap-detail, .ov-cats { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 40px; }
  .sol-cases { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .sol-outcomes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .sol-reason { grid-template-columns: minmax(0, 1fr) 310px minmax(0, 1fr); column-gap: 40px; }
  .sol-hero__aside { flex-basis: 360px; width: 360px; }
  .sol-strip__item { width: auto; min-width: 240px; }
  /* The intro's width follows its real insets: 60 left, 24 right. */
  .inq__intro { margin-left: 60px; max-width: calc(100% - 84px); }
  .inq__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  .ab-hero__title { font-size: 52px; line-height: 58px; letter-spacing: -2.6px; }
  .cap-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-reason { grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr); }
  .sol-reason__media { width: 260px; height: 164px; }
  .ov-diagram__panel { padding: 40px 24px 24px; }
}

/* ======================================================================
   Mobile (≤900), measured at 390×844.
   ====================================================================== */
@media (max-width: 900px) {
  /* Capability hero (shared 90svh canvas): H1 38/39.9 three lines (2+2+1),
     support 20/25 two lines, group centred. */
  .cap-hero { padding: 0 24px; }
  .cap-hero__group { margin-top: 0; }
  .cap-hero__mark { font-size: 20px; margin-bottom: 24px; }
  .cap-hero__title { font-size: 38px; line-height: 39.9px; letter-spacing: -1.9px; width: 342px; max-width: 100%; }
  .cap-hero__title .br-desktop { display: none; }
  .cap-hero__title .br-mobile { display: inline; }
  .cap-hero__support { font-size: 20px; line-height: 25px; width: 342px; max-width: 100%; }
  /* Outcomes 84/24, stacked 342×510 cards. */
  .cap-outcomes { padding: 84px 24px; }
  .cap-outcomes__title, .cap-tiles__title, .cap-detail__title, .cap-related__title, .cap-stories__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .cap-outcomes__title { margin-bottom: 40px; }
  .cap-outcomes__grid { grid-template-columns: 1fr; }
  .cap-card { height: 510px; }
  .cap-card__title { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }
  /* Detail 64/24 (template-review appendix): H2 → 32 → intro 17/21.76
     −0.51 → 32 → four always-visible rows (1px rule, 32 to the 24/27.6
     title, 12 to the 14/21 body, 32 below the body, giving the 65px
     inter-row interval); the fourth row's body has no bottom padding so
     the 32px row gap is the only space before the 342×279 media. The
     fifth row and the toggles are desktop-only. */
  .cap-detail { grid-template-columns: 1fr; padding: 64px 24px; row-gap: 32px; }
  .cap-detail__title { margin-bottom: 32px; }
  .cap-detail__intro { display: block; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: rgba(255, 255, 255, 0.8); margin-bottom: 32px; }
  .cap-row--fifth { display: none; }
  /* Ordinary headings on mobile: the desktop button is removed from the
     document (display: none), so it is neither focusable nor announced. */
  .cap-row__toggle { display: none; }
  .cap-row__label { display: block; padding: 32px 0 0; font-weight: 300; font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; color: #F5F5F5; }
  .cap-row__body { display: block; margin-top: 12px; padding: 0 0 32px; }
  .cap-row:nth-child(4) .cap-row__body { padding-bottom: 0; }
  .cap-detail__slot:not(:first-child) { display: none; }
  .cap-detail__slot:first-child { display: block; }
  /* Rail: 64 top, H2 (3px bottom padding), 40 gap, 330×391 media, 120
     bottom. The source has no separate arrow row on mobile: the controls
     are hidden and the rail keeps its horizontal scroll and arrow keys. */
  .cap-stories { grid-template-columns: 1fr; padding: 64px 0 120px; }
  .cap-stories .stories__head { padding: 0 24px 40px; }
  .cap-stories .stories__rail { padding: 0 24px; scroll-padding-left: 24px; }
  .cap-stories .story { flex-basis: 330px; width: 330px; height: 391px; }
  .cap-stories .stories__controls { display: none; }
  /* Ruled grid 60/30: two-line H2, four-line intro 17/21.76, 60 to the
     grid, two 153 columns (24 gap), top rules, icon, title, body. */
  .cap-tiles { padding: 60px 30px; }
  .cap-tiles__title { margin-bottom: 24px; }
  .cap-tiles__title .br-mobile { display: inline; }
  .cap-tiles__intro { font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; margin-bottom: 60px; }
  .cap-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .cap-tile { min-height: 270px; padding: 40px 0 0; border-left: 0; border-top: 1px solid rgba(18, 22, 20, 0.12); }
  .cap-tile__title { margin-top: 60px; }
  /* Related: three-line H2, stacked 350×430 cards at x20, 12 gap; identity
     top at 166.58, benefit line from 311, pill foot 19 above the edge. */
  .cap-related { padding: 72px 20px 76px; }
  .cap-related__title { margin-bottom: 60px; }
  .cap-related__title .br-desktop { display: none; }
  .cap-related__title .br-mobile { display: inline; }
  .cap-related__grid, .cap-related__grid--pair { grid-template-columns: 1fr; gap: 12px; }
  .cap-related__intro { margin: -36px 0 48px; }
  .cap-related__cta { margin-top: 48px; padding-top: 32px; justify-content: flex-start; }
  .cap-related__lead { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }
  .cap-related__link { height: 430px; }
  .cap-related__brand { top: 166.58px; font-size: 22px; line-height: 26px; }

  /* Industry hero (shared 90svh canvas): H1 70/73.5 one line; support
     below, rule at x24, text at x45, 15/21, 60 above the bottom. Below 390
     the word scales rather than overflowing. */
  .sol-hero__content { flex-direction: column; align-items: flex-start; gap: 24px; padding: calc(var(--nav-h) + 24px) 24px 60px; }
  .sol-hero__word { width: 100%; font-size: clamp(56px, 18vw, 70px); line-height: 1.05; letter-spacing: -0.06em; }
  .sol-hero__aside { flex: 0 0 auto; width: min(320px, 100%); max-width: 100%; margin: 0; padding-left: 21px; }
  .sol-hero__title { font-size: 22px; line-height: 26px; letter-spacing: -0.88px; }
  .sol-hero__support { margin-top: 10px; font-size: 15px; line-height: 21px; letter-spacing: -0.05px; font-weight: 400; }
  .sol-hero__name { left: 24px; top: calc(var(--nav-h) + 24px); }
  /* Strip 527: 80/24, two-line title, three 72-tall items with 16 gaps. */
  .sol-strip { padding: 80px 24px; }
  .sol-strip__title { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }
  .sol-strip__list { flex-direction: column; gap: 16px; }
  .sol-strip__item { width: 100%; height: 72px; min-width: 0; }
  /* Outcomes 979.5: 60/24; H2 32/40 → 60 → rows with a top rule, icon
     40 below, title 48 below the icon, body 16 below, 40 bottom. */
  .sol-outcomes { padding: 60px 24px; min-height: 0; }
  .sol-outcomes__title { font-size: 32px; line-height: 40px; letter-spacing: -1.28px; margin-bottom: 60px; }
  .sol-outcomes__grid { grid-template-columns: 1fr; gap: 0; }
  .sol-outcome { height: auto; padding: 40px 0 40px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
  .sol-outcome__title { margin-top: 48px; }
  .sol-outcome__text { margin-top: 16px; max-width: none; }
  /* Use cases media-first: 342×268, then H2 and rows. */
  .sol-cases { grid-template-columns: 1fr; padding: 0 24px 80px; row-gap: 48px; }
  .sol-cases__media { order: -1; }
  .sol-cases__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; margin-bottom: 40px; }
  .sol-case__title { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.4px; }
  /* Editorial rows 84 top (template review): statement 3px padding, 80 to
     the first row; each row 1px rule + 24 to the title, 24 title→body,
     42 body→image (342×215.875), 64 below the image; 84 after the list. */
  .sol-reasons { padding-top: 84px; }
  .sol-reasons__head { padding: 0 24px; margin-bottom: 80px; }
  .sol-reasons__title, .sol-reasons__statement { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .sol-reasons__rows { padding: 0 24px 84px; }
  .sol-reason { grid-template-columns: 1fr; row-gap: 0; padding: 24px 0 64px; }
  .sol-reason__title { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }
  .sol-reason__text { order: 2; margin-top: 24px; }
  .sol-reason__media { order: 3; width: 100%; height: 215.875px; margin-top: 42px; }
  .sol-closing { min-height: 700px; padding: 160px 30px; }
  .sol-closing__title { max-width: 330px; font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }

  /* Overview hero (shared 90svh canvas): H1 38/39.9 four lines. */
  .ov-hero { padding: 0 24px; }
  .ov-hero__group { margin-top: -64px; }
  .ov-hero__title { font-size: 38px; line-height: 39.9px; letter-spacing: -1.9px; width: 342px; }
  .ov-hero__title .br-desktop { display: none; }
  .ov-hero__title .br-mobile { display: inline; }
  .ov-hero__orb { width: 96px; height: 96px; }
  .ov-hero__support { width: 342px; max-width: 100%; margin-top: 16px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; }
  /* Diagram 809.2: 64/24; H2 → 32 → one 342×568 card with the selectors
     and the active description. */
  .ov-cats { display: block; padding: 64px 24px; }
  .ov-cats__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; margin-bottom: 32px; }
  .ov-cats__card {
    display: flex;
    flex-direction: column;
    min-height: 568px;
    border-radius: 12px;
    overflow: hidden;
    background:
      radial-gradient(60% 45% at 50% 30%, rgba(47, 111, 99, 0.7), transparent 70%),
      linear-gradient(160deg, #1B2623 0%, #2F6F63 45%, #101413 100%);
  }
  .ov-diagram { aspect-ratio: auto; border-radius: 0; background: none; padding: 44px 16px 0; align-items: flex-start; }
  .ov-diagram__panel { width: 100%; max-width: none; padding: 36px 16px 16px; gap: 8px; }
  .ov-diagram__active { top: 44px; }
  /* Two columns per group; every name is complete at 320 and 390. */
  .ov-diagram__item { min-height: 44px; padding: 6px 10px; font-size: 15px; }
  .ov-diagram__row, .ov-diagram__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ov-cats__panels { margin: 24px 16px 24px; }
  .ov-cats__name { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; color: #FFFFFF; }
  .ov-cats__body { max-width: none; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.85); }
  /* Benefits 1842 (frozen ai-os mobile JSON): 60/30; H2 34/39.1 → 24 →
     intro 330 wide 17/21.76 −0.51 → 60 → five open ruled tiles in one
     column with 24px gaps, 30px vertical padding, 32px icons, 60 to the
     20/23 title, 24 to the 14/21 body; natural heights, rules drawn
     without taking content height. */
  .ov-benefits { padding: 60px 30px; }
  .ov-benefits__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; margin-bottom: 24px; }
  .ov-benefits__intro { max-width: 330px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; margin-bottom: 60px; }
  .ov-benefits__grid { grid-template-columns: 1fr; gap: 24px; }
  .ov-benefit { padding: 30px 0; }
  .ov-benefit::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .ov-benefit__title { margin-top: 60px; font-size: 20px; line-height: 23px; letter-spacing: -1px; }
  .ov-benefit__text { margin-top: 24px; }
  /* Editorial: mobile keeps its natural statement wrap (desktop-only
     breaks hidden) and the source 84px space after the last row. */
  .ov-rows__head { margin-bottom: 80px; }
  .ov-rows__statement .br-desktop { display: none; }
  .ov-rows__statement { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .ov-rows__rows { padding-bottom: 84px; }
  .ov-closing { min-height: 640px; }

  /* Inquiry (390×844): 360-tall photo hero with the H1 at x35 y141
     32/33.6 and the support below; form at 350 width with 40/20 padding. */
  /* A shrinkable single track: a plain 1fr track keeps its content's
     min-content width, so the 320-wide intro and 350-wide form expanded the
     panes to 390 at a 320 viewport before their max-width could apply. */
  .inq { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .inq__pane { padding-top: 0; }
  .inq__pane--photo { min-height: 360px; padding: 141px 35px 32px; display: flex; }
  .inq__intro { width: 320px; max-width: 100%; margin: 0; min-height: 0; gap: 16px; justify-content: flex-start; }
  .inq__title { font-size: 32px; line-height: 33.6px; letter-spacing: -1.6px; }
  .inq__support { font-size: 17px; line-height: 21.76px; }
  .inq__lines { display: none; }
  .inq__form { width: 350px; max-width: calc(100% - 40px); margin: 40px 20px 64px; }
  .inq__row { grid-template-columns: 1fr; column-gap: 0; }
  .inq__form-title { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }
  .inq__submit { width: 100%; }

  /* About (390×844): hero 120/24/60 with the H1 at 38/45.6 −3.42 (three
     lines), support w300 10 below, 342×400 photo 32 below. Story at 30
     side padding: H2 → 32 → text, 330×324.54 photo 64 below the text,
     second block 120 later. */
  .ab-hero { padding: 120px 24px 60px; }
  /* Shrinkable track for the same reason: the 300-wide support otherwise
     sets the track minimum and the hero runs to 324 at 320. */
  .ab-hero__head { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .ab-hero__title { font-size: 38px; line-height: 45.6px; letter-spacing: -3.42px; }
  .ab-hero__title .br-desktop { display: none; }
  .ab-hero__title .br-mobile { display: inline; }
  .ab-hero__support { width: 300px; max-width: 100%; }
  .ab-hero__photo { height: 400px; aspect-ratio: auto; margin-top: 32px; }
  .ab-story { padding: 0 30px 60px; }
  .ab-story__row { grid-template-columns: 1fr; row-gap: 32px; }
  .ab-story__row--second { margin-top: 60px; padding-top: 60px; }
  .ab-story__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .ab-story__photo { height: 324.54px; aspect-ratio: auto; margin-top: 64px; }
}

/* Neogenic — complete-product families (13 September 2026).
   Loads after the family stylesheets a page already uses.
     oc-*          brand optical compositions (src/pages/optical.mjs)
     pl-*          ruled rows on the About measure (Trust Center) and the
                   Pricing closing
     ov-journey, ab-principles, Home story/twin additions, link lines and
     the redirect page */

/* ======================================================================
   Optical compositions: a concept field, a soft shade, an optional static
   orb glow and a few words. Parents set the size.
   ====================================================================== */
.oc { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: flex-end; padding: 40px; background: #101614; color: #FAFAFA; }
.oc__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oc__shade { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(13, 16, 14, 0) 30%, rgba(13, 16, 14, 0.5) 100%); }
.oc__orb { position: absolute; top: 14%; right: 12%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 32%, rgba(191, 227, 214, 0.85) 0%, rgba(47, 111, 99, 0.5) 48%, rgba(18, 22, 20, 0) 72%); opacity: 0.8; pointer-events: none; }
.oc--mark { align-items: center; justify-content: center; }
.oc--mark .oc__orb { top: 50%; left: 50%; right: auto; width: min(46%, 280px); transform: translate(-50%, -50%); }
.oc__words { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; min-width: 0; max-width: 100%; margin: 0; padding: 0; list-style: none; }
.oc__word { min-width: 0; font-weight: 300; font-size: 30px; line-height: 1.15; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.oc--stack .oc__words, .oc--sequence .oc__words { flex-direction: column; align-items: flex-start; gap: 4px; }
.oc--ribbon .oc__word:not(:last-child)::after { content: "·"; margin-left: 18px; color: rgba(250, 250, 250, 0.5); }
.oc__arrow { display: inline-block; margin-right: 12px; color: rgba(250, 250, 250, 0.55); }

.bw-card__stage .oc__word { font-size: 26px; }
.sol-reason__media .oc { padding: 20px; }

/* ======================================================================
   Shared link lines
   ====================================================================== */
.be-outcome__links, .bs-benefit__links, .sol-outcome__links, .twin__links { margin-top: 16px; font-size: 14px; line-height: 21px; }
.be-outcome__links a, .bs-benefit__links a, .sol-outcome__links a, .twin__links a { text-decoration: underline; text-underline-offset: 3px; }
.be-outcome__links { color: var(--ink); }
.bs-benefit__links, .sol-outcome__links, .twin__links { color: rgba(250, 250, 250, 0.86); }
.twin__links { margin-top: 12px; font-size: 13px; }

/* ======================================================================
   Home: story rail compositions and the platform actions
   ====================================================================== */
.story__optical { position: absolute; inset: 0; }
.story__media--care { object-position: 62% 40%; }
.story__native--flows .nx-browse { grid-template-columns: 1fr; }
.platform__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.platform__link { font-size: 16px; color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ======================================================================
   Overview: the five-step journey
   ====================================================================== */
.ov-journey .ov-benefits__title { margin-bottom: 60px; }
.ov-journey__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ov-journey__index { margin-right: 6px; font-size: 14px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }
.ov-rows__art { position: relative; }

/* ======================================================================
   About: the principles list
   ====================================================================== */
.ab-principles { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ab-principles__item { padding: 16px 0; border-top: 1px solid rgba(18, 22, 20, 0.1); font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; }
.ab-principles__item:first-child { padding-top: 0; border-top: 0; }
.ab-principles__lead { font-weight: 500; }

/* ======================================================================
   Ruled rows on the About measure (Trust Center) and the Pricing closing.
   ====================================================================== */
.pl-ledger { padding: 120px; background: #FFFFFF; color: var(--ink); }
.pl-ledger__rows { margin: 0; padding: 0; list-style: none; }
.pl-row { display: grid; grid-template-columns: 570px 570px; column-gap: 60px; justify-content: space-between; align-items: start; padding: 60px 0; border-top: 1px solid rgba(18, 22, 20, 0.1); }
.pl-row:first-child { padding-top: 0; border-top: 0; }
.pl-row:last-child { padding-bottom: 0; }
.pl-row__head, .pl-row__body { min-width: 0; }
.pl-row__index { margin-bottom: 16px; font-size: 14px; letter-spacing: 0.08em; color: var(--ink-soft); }
.pl-row__title { padding-bottom: 3px; font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; overflow-wrap: anywhere; }
.pl-row__body { padding-top: 37px; }
.pl-row__text { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; color: #393939; }
.pl-closing { min-height: 640px; }

/* ======================================================================
   Home solution tabs: candid crops and the optical Performance panel
   ====================================================================== */
.panel__media--followup { object-position: 50% 30%; }
.panel__media--enquiry { object-position: 50% 45%; }
.panel__optical { position: absolute; inset: 0; }

/* ======================================================================
   Contact: the Book a call invitation on the dark photographic pane,
   above the secondary email enquiry form
   ====================================================================== */
.inq__book { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.inq__book .inq__book-cta { background: var(--on-dark); color: var(--ink); }
.inq__book-note { min-width: 0; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, 0.82); }

/* ======================================================================
   Redirect page
   ====================================================================== */
.redirect { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 60px 24px; text-align: center; background: #FFFFFF; color: var(--ink); }
.redirect__logo { height: 25px; width: auto; }
.redirect__title { max-width: 720px; font-weight: 300; font-size: 40px; line-height: 44px; letter-spacing: -1.6px; }
.redirect .pill--fill { background: var(--ink); color: var(--on-dark); }

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 1439px) {
  .pl-ledger { padding: 120px 60px; }
  .pl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
}
@media (max-width: 1199px) {
  .ov-journey__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .oc { padding: 24px; }
  .oc__word, .bw-card__stage .oc__word { font-size: 22px; }

  .ov-journey__grid { grid-template-columns: 1fr; }

  .pl-ledger { padding: 84px 24px; }
  .pl-row { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding: 40px 0; }
  .pl-row__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .pl-row__body { padding-top: 0; }
  .pl-row__text { font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; }
  .pl-closing { min-height: 640px; }

  .redirect__title { font-size: 30px; line-height: 34px; letter-spacing: -1.2px; }
}

/* Neogenic — Pricing, Trust Center and Resources landing (13 September 2026).
   Independent marketing styles on the site's own tokens (base.css), loaded
   after pages.css, product.css and editorial.css where a page uses them.
     pr-*   Pricing: editorial head, two location prices, combined price on
            the billing field, growth ledger and the indicative note
     tr-*   Trust Center: section titles, questions band, page link cards,
            security and procurement contact (principles use product.css
            pl-row on the About measure)
     hub-*  Resources landing: Trust Center and Explore link groups (lists
            use editorial.css ed-list / ed-entry)
   Measures follow the About and Billing ledger rhythm: 1200 content width,
   120 section padding, 48/50.4 section titles, 17/21.76 body. Every text
   container can wrap, so 200% text grows sections instead of clipping. */

/* ======================================================================
   Pricing
   ====================================================================== */
.pr-hero { padding: calc(var(--strip-h, 0px) + var(--nav-h) + 96px) var(--gutter) 64px; background: #FFFFFF; color: var(--ink); }
.pr-hero__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); column-gap: 60px; align-items: end; max-width: 1200px; margin: 0 auto; }
.pr-hero__head > * { min-width: 0; }
.pr-hero__label { margin-bottom: 20px; font-size: 16px; line-height: 19.2px; letter-spacing: -0.2px; color: var(--ink-soft); }
.pr-hero__title { padding-bottom: 3px; font-weight: var(--display-weight); font-size: 62px; line-height: 71.3px; letter-spacing: -3.1px; overflow-wrap: anywhere; }
.pr-hero__support { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; color: #393939; }

.pr-plans { padding: 0 var(--gutter) 96px; background: #FFFFFF; color: var(--ink); }
.pr-plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; padding: 0; list-style: none; }
.pr-plan { display: flex; flex-direction: column; min-width: 0; padding: 40px; border-radius: 12px; background: #F4F4F2; }
.pr-plan__name { padding-bottom: 3px; font-weight: var(--display-weight); font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; overflow-wrap: anywhere; }
.pr-plan__lead { margin-top: 12px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: #393939; }
.pr-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 48px; }
.pr-plan__from, .pr-plan__unit { font-size: 16px; line-height: 19.2px; letter-spacing: -0.2px; color: var(--ink-soft); }
.pr-plan__amount { font-weight: var(--display-weight); font-size: 62px; line-height: 68px; letter-spacing: -3px; }
.pr-plan__includes { margin: 24px 0 0; padding: 20px 0 0 20px; list-style: disc; border-top: 1px solid rgba(18, 22, 20, 0.1); font-size: 17px; line-height: 24px; letter-spacing: -0.3px; }
.pr-plan__links { margin-top: auto; padding-top: 32px; font-size: 15px; line-height: 21px; }
.pr-plan__links a { text-decoration: underline; text-underline-offset: 3px; }

.pr-combined { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; max-width: 1200px; margin: 16px auto 0; padding: 48px 40px; border-radius: 12px; overflow: hidden; background: #101614; color: #FAFAFA; }
.pr-combined__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-combined__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 16, 14, 0.62) 0%, rgba(13, 16, 14, 0.36) 100%); }
.pr-combined__label, .pr-combined__price { position: relative; z-index: 1; min-width: 0; }
.pr-combined__label { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; }
.pr-combined__amount { font-weight: var(--display-weight); font-size: 48px; line-height: 52px; letter-spacing: -2px; }
.pr-combined__unit { margin-left: 8px; font-size: 16px; line-height: 19.2px; color: rgba(250, 250, 250, 0.82); }

.pr-growth { padding: 0 var(--gutter) 120px; background: #FFFFFF; color: var(--ink); }
.pr-growth__title, .pr-growth__rows, .pr-note { max-width: 1200px; margin-left: auto; margin-right: auto; }
.pr-growth__title { margin-bottom: 48px; padding-bottom: 3px; font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; overflow-wrap: anywhere; }
.pr-growth__rows { padding: 0; list-style: none; border-top: 1px solid rgba(18, 22, 20, 0.1); }
.pr-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.4fr); column-gap: 40px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid rgba(18, 22, 20, 0.1); }
.pr-row__title { font-weight: 400; font-size: 20px; line-height: 28px; letter-spacing: -0.4px; overflow-wrap: anywhere; }
.pr-row__price { font-weight: var(--display-weight); font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; overflow-wrap: anywhere; }
.pr-row__detail { font-size: 17px; line-height: 24px; letter-spacing: -0.3px; color: #393939; }
.pr-note { margin-top: 32px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }

/* ======================================================================
   Trust Center and Resources landing
   ====================================================================== */
.tr-section__title { margin-bottom: 48px; padding-bottom: 3px; font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; overflow-wrap: anywhere; }
.tr-rows .tr-section__title { max-width: 1200px; }

.tr-questions { display: grid; grid-template-columns: minmax(0, 506px) minmax(0, 754px); column-gap: 60px; justify-content: space-between; align-items: start; padding: 120px var(--gutter); background: #080808; color: #F5F5F5; }
.tr-questions__head { min-width: 0; }
.tr-questions__head .tr-section__title { margin-bottom: 24px; }
.tr-questions__intro { font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: rgba(255, 255, 255, 0.72); }
.tr-questions__list { min-width: 0; margin: 0; padding: 0; list-style: none; counter-reset: question; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.tr-questions__list li { counter-increment: question; display: grid; grid-template-columns: 3em minmax(0, 1fr); padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 20px; line-height: 28px; letter-spacing: -0.4px; overflow-wrap: anywhere; }
.tr-questions__list li::before { content: counter(question, decimal-leading-zero); padding-top: 5px; font-size: 14px; line-height: 20px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); }

.tr-pages { padding: 120px; background: #FFFFFF; color: var(--ink); }
.tr-pages__intro { max-width: 640px; margin: -24px 0 40px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: #393939; }
.tr-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tr-link { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 32px 64px 32px 32px; border-radius: 12px; background: #F4F4F2; transition: background-color 0.15s var(--ease); }
.tr-link:hover { background: #ECECE9; }
.tr-link__label { font-size: 24px; line-height: 28px; letter-spacing: -0.8px; overflow-wrap: anywhere; }
.tr-link__desc { font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.tr-link__arrow { position: absolute; top: 32px; right: 28px; font-size: 20px; line-height: 28px; }

/* The Trust links and Explore groups sit as one block on the landing. */
.hub-trust + .hub-explore { padding-top: 0; }

.tr-contact { padding: 0 120px 120px; background: #FFFFFF; color: var(--ink); }
.tr-contact__inner { padding: 56px; border-radius: 12px; background: var(--bg-tile); }
.tr-contact__title { padding-bottom: 3px; font-weight: var(--display-weight); font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; overflow-wrap: anywhere; }
.tr-contact__body { max-width: 640px; margin-top: 16px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: #393939; }
.tr-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.tr-contact .pill--fill { background: var(--ink); color: var(--on-dark); }
.tr-contact .text-link { overflow-wrap: anywhere; }

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 1439px) {
  .tr-questions { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 40px; }
  .tr-pages { padding: 120px 60px; }
  .tr-contact { padding: 0 60px 120px; }
}
@media (max-width: 1199px) {
  .pr-hero__head { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .pr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; }
  .pr-row__detail { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pr-hero { padding: calc(var(--nav-h) + 64px) 24px 40px; }
  .pr-hero__title { font-size: 40px; line-height: 46px; letter-spacing: -2px; }
  .pr-hero__support { font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; }
  .pr-plans { padding: 0 24px 64px; }
  .pr-plans__grid { grid-template-columns: minmax(0, 1fr); }
  .pr-plan { padding: 28px 24px; }
  .pr-plan__name { font-size: 28px; line-height: 32.2px; letter-spacing: -1.2px; }
  .pr-plan__price { margin-top: 32px; }
  .pr-plan__amount { font-size: 48px; line-height: 52px; letter-spacing: -2px; }
  .pr-combined { padding: 32px 24px; }
  .pr-combined__amount { font-size: 40px; line-height: 44px; }
  .pr-growth { padding: 0 24px 84px; }
  .pr-growth__title { margin-bottom: 32px; font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .pr-row { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .pr-row__price { font-size: 28px; line-height: 32.2px; letter-spacing: -1.2px; }

  .tr-section__title { margin-bottom: 32px; font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .tr-questions { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding: 84px 24px; }
  .tr-questions__list li { padding: 20px 0; font-size: 17px; line-height: 24px; letter-spacing: -0.3px; }
  .tr-pages { padding: 84px 24px; }
  .tr-pages__intro { margin: -16px 0 32px; }
  .tr-link { padding: 24px 52px 24px 24px; }
  .tr-link__label { font-size: 20px; line-height: 24px; letter-spacing: -0.6px; }
  .tr-link__arrow { top: 24px; right: 20px; }
  .tr-contact { padding: 0 24px 84px; }
  .tr-contact__inner { padding: 32px 24px; }
  .tr-contact__title { font-size: 28px; line-height: 32.2px; letter-spacing: -1.2px; }
}

/* Compact Trust Center: a single reference page rather than marketing sections. */
.trust-basic { max-width: 1200px; margin: auto; padding: calc(var(--nav-h) + 72px) 60px 96px; color: var(--ink); }
.page-trust main { background: #fff; }
.trust-basic__head h1 { font-size: 44px; font-weight: var(--display-weight); letter-spacing: -1.6px; margin-bottom: 16px; }
.trust-basic p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 760px; }
.trust-basic a { text-decoration: underline; text-underline-offset: 3px; }
.trust-basic__nav { display: flex; flex-wrap: wrap; gap: 28px; padding: 28px 0; margin-top: 24px; border-bottom: 1px solid #e5e8e6; font-size: 14px; }
.trust-basic__section { padding-top: 48px; scroll-margin-top: 100px; }
.trust-basic__section h2 { font-size: 24px; font-weight: 500; margin-bottom: 20px; }
.trust-basic__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.trust-basic__grid article { padding: 24px; background: #f5f7f6; border-radius: 10px; }
.trust-basic__grid h3 { font-size: 17px; font-weight: 500; margin-bottom: 12px; }
.trust-basic__grid p { font-size: 14px; }
@media (max-width: 900px) { .trust-basic { padding: calc(var(--nav-h) + 48px) 24px 64px; } .trust-basic__grid { grid-template-columns: 1fr; } }

.pr-plan__includes li { padding: 5px 0 5px 4px; }
.pr-plan__links a { text-decoration: none; }
.pr-faq { padding: 0 var(--gutter) 100px; background: #fff; color: var(--ink); }
.pr-faq h2, .pr-faq details { max-width: 1200px; margin: 0 auto; }
.pr-faq h2 { font-size: 40px; font-weight: 400; letter-spacing: -1.5px; padding-bottom: 32px; }
.pr-faq details { border-bottom: 1px solid #e3e5e3; overflow: hidden; scroll-margin-top: calc(var(--nav-h) + 32px); }
.pr-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 24px 0; cursor: pointer; list-style: none; font-size: 20px; line-height: 1.4; letter-spacing: -0.4px; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::marker { content: ''; }
.pr-faq summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 4px; }
.pr-faq__icon { position: relative; flex: 0 0 20px; width: 20px; height: 20px; }
.pr-faq__icon::before, .pr-faq__icon::after { content: ''; position: absolute; top: 9px; left: 2px; width: 16px; height: 1.5px; background: currentColor; transition: transform 320ms var(--ease); }
.pr-faq__icon::after { transform: rotate(90deg); }
.pr-faq details[open]:not([data-closing]) .pr-faq__icon::after { transform: rotate(0); }
.pr-faq__answer { padding: 0 52px 24px 0; }
.pr-faq details p { max-width: 760px; margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.pr-credit-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pr-credit-link:hover { color: var(--ink-soft); }
@media (max-width: 900px) { .pr-faq { padding: 0 24px 64px; } .pr-faq h2 { font-size: 34px; } .pr-faq summary { font-size: 18px; gap: 20px; } .pr-faq__answer { padding-right: 20px; } }
@media (prefers-reduced-motion: reduce) { .pr-faq__icon::before, .pr-faq__icon::after { transition: none; } }

.pr-pricing-toolbar { max-width: 1200px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.pr-currency { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-tile); }
.pr-currency button { border: 0; border-radius: 999px; padding: 8px 16px; color: var(--ink-soft); background: transparent; font: inherit; cursor: pointer; }
.pr-currency button[aria-pressed="true"] { color: var(--ink); background: white; }
.pr-currency button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Temporary word spans preserve natural wrapping and disappear after reveal. */
.hero-reveal-word { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .hero-reveal-word { animation: none; filter: none; transform: none; opacity: 1; } }

/* Measured from Wonderful's public Framer presets on 2026-09-15.
   See docs/hero-typography-reference.md. Load after the page-family sheets.
   Keep Inter: ABC Favorit is not licensed in this site. */
.hero__title { font-size: 82px; line-height: 1.05; letter-spacing: -0.06em; }
.bs-hero__title, .bw-hero__title, .cap-hero__title, .ov-hero__title, .inq__title { font-size: 64px; line-height: 1.05; letter-spacing: -0.06em; font-weight: var(--display-weight); }
.bs-hero__title, .bw-hero__title, .cap-hero__title, .ov-hero__title { width: 100%; max-width: 992px; }
.bs-hero__group, .bw-hero__group, .cap-hero__group { width: 950px; max-width: 100%; min-width: 0; }
.bs-hero__support { width: 100%; max-width: 491px; font-size: 20px; line-height: 1.25; letter-spacing: -0.75px; }
.pt-hero .bs-hero__support { max-width: 646px; }
.bw-hero__support, .cap-hero__support { width: 100%; max-width: 646px; font-size: 20px; line-height: 1.25; letter-spacing: -0.75px; }
.org-hero h1, .pr-hero__title, .ed-index-hero__title { font-size: 62px; line-height: 1.15; letter-spacing: -0.05em; font-weight: var(--display-weight); }
.ed-head__title { font-size: 48px; line-height: 1.05; letter-spacing: -0.04em; }
@media (min-width: 810px) and (max-width: 1199px) {
  .hero__title { font-size: 82px; letter-spacing: -0.05em; }
  .bs-hero__title, .bw-hero__title, .cap-hero__title, .ov-hero__title, .inq__title { font-size: 48px; line-height: 1.05; letter-spacing: -0.05em; }
  .org-hero h1, .pr-hero__title, .ed-index-hero__title { font-size: 54px; line-height: 1.05; letter-spacing: -0.07em; }
}
@media (max-width: 809px) {
  .hero__title { font-size: 42px; line-height: 1.05; letter-spacing: -0.05em; }
  .bs-hero__title, .bw-hero__title, .cap-hero__title, .ov-hero__title, .inq__title { font-size: 38px; line-height: 1.05; letter-spacing: -0.05em; }
  .org-hero h1, .pr-hero__title, .ed-index-hero__title { font-size: 32px; line-height: 1.05; letter-spacing: -0.07em; }
}
@media (max-width: 879.98px) {
  .pt-hero .bs-hero__support, .bs-hero__support, .bw-hero__support, .cap-hero__support { max-width: 100%; }
}

.blog-card--featured h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.04em; }
@media (min-width: 800px) and (max-width: 1199px) { .ed-head__title { font-size: 42px; line-height: 1.15; letter-spacing: -0.04em; } }
@media (max-width: 799px) { .ed-head__title { font-size: 34px; line-height: 1.15; letter-spacing: -0.05em; } }
@media (max-width: 879px) { .sol-hero__word { font-size: min(82px, 18vw); line-height: 1.05; letter-spacing: -0.06em; } }

/* Supporting copy uses the reference's Inter presets, not the display face. */
.hero__support, .ov-hero__support, .pr-hero__support { font-size: 20px; line-height: 1.25; letter-spacing: -0.75px; }
.org-hero__intro { font-size: 16px; line-height: 1.5; letter-spacing: normal; }
.inq__support { font-size: 17px; line-height: 1.28; letter-spacing: -0.03em; }
.bs-hero__title, .bw-hero__title, .cap-hero__title, .ov-hero__title, .bs-hero__support, .bw-hero__support, .cap-hero__support, .ov-hero__support { text-wrap: balance; }
@media (min-width: 810px) and (max-width: 1199px) {
  .bs-hero__title br.br-mobile, .bs-hero__title br.br-desktop, .bw-hero__title br.br-mobile, .bw-hero__title br.br-desktop, .cap-hero__title br.br-mobile, .cap-hero__title br.br-desktop, .ov-hero__title br.br-mobile, .ov-hero__title br.br-desktop { display: none; }
}
@media (max-width: 809px) {
  .hero__support, .ov-hero__support, .pr-hero__support { font-size: 17px; line-height: 1.28; letter-spacing: -0.03em; }
}