/* 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/benchmark.css
   /styles/sales.css
   /styles/completion.css
   /styles/platform-template.css
   /styles/platform-mockups.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 — benchmark reset (12 September 2026).
   Clinic workspace  (/platform/clinic-workspace/)  ← Wonderful /ai-gateway
   Care anatomy      (/solutions/functional-integrative-medicine/, formerly
                      Care coordination) ← Wonderful /industries/healthcare
   Numbers are the settled source CSS pixels at 1440×1000 and 390×844
   (docs/qa/benchmark-reset/template/*.json, TEMPLATE-MAP.md). Inter 300
   stands in for ABC Favorit Light.
     bw-*  Workspace sections
     bc-*  Care treatments layered on the measured sol-* sections (pages.css)
     nx-*  native product excerpts (src/pages/benchmark/native.mjs)
   Excerpts are sized in em from a per-variant base so one rule set recomposes
   per display size; responsive rules follow every component default. */

/* ======================================================================
   Workspace 1. Optical hero 1353.53: padding 230/60/0; label 33 → 24 →
   H1 64/67.2 (814 max, two lines) → 12 → support 20/25 (646) → 120 →
   product 1200×750 fading into the white intro.
   ====================================================================== */
.bw-hero {
  position: relative;
  min-height: 1353.53px;
  padding: 230px 60px 0;
  background: #0F1A18;
  color: #FAFAFA;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bw-hero__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.bw-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 16, 14, 0.42) 0%, rgba(13, 16, 14, 0.3) 35%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.86) 88%, #FFFFFF 100%);
}
.bw-hero__nav-light { position: absolute; bottom: 0; left: 0; width: 100%; height: 24%; pointer-events: none; }
.bw-hero__group { position: relative; z-index: 1; width: 950px; max-width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bw-hero__label { display: inline-flex; align-items: center; gap: 10px; height: 33px; margin-bottom: 24px; font-size: 24px; line-height: 1; letter-spacing: -0.6px; color: rgba(250, 250, 250, 0.95); }
.bw-hero__label img { width: 28px; height: 28px; }
.bw-hero__title { max-width: 814px; font-weight: var(--display-weight); font-size: 64px; line-height: 67.2px; letter-spacing: -3.84px; margin-bottom: 12px; }
.bw-hero__title .br-mobile { display: none; }
.bw-hero__support { max-width: 646px; font-size: 20px; line-height: 25px; letter-spacing: -0.75px; color: rgba(250, 250, 250, 0.92); }
.bw-hero__product { position: relative; z-index: 1; width: 1200px; max-width: 100%; height: 750px; margin-top: 120px; }

/* 2. Intro: title only, 790 wide; 97 below the hero and 80 to the grid. */
.bw-intro {
  padding: 97px var(--gutter) 80px;
  background: #FFFFFF;
  color: var(--ink);
}
.bw-intro__title { max-width: 790px; font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; }

/* 3. Feature grid: two 648 columns, 24 gaps; cards 453.906 min on #F5F5F5.
   The illustration stage takes the upper 300; the title 32/36.8 and the
   17/21.76 body (560 max, #393939 as the source) form one group anchored
   32 above the card foot, as the measured Gateway cards
   (docs/qa/menu-refinement/card-density-comparison.md). A two-line body
   therefore places the title about 330 from the top, leaving air after the
   art; a longer wrap grows the card and is never clipped. */
.bw-grid { padding: 0 var(--gutter) 120px; background: #FFFFFF; color: var(--ink); }
.bw-grid__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bw-card {
  position: relative;
  min-height: 453.906px;
  padding: 300px 32px 32px;
  border-radius: 12px;
  background: #F5F5F5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bw-card__stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}
.bw-card--calendar .bw-card__stage,
.bw-card--catalogue .bw-card__stage {
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.bw-card__title { max-width: 560px; font-weight: var(--display-weight); font-size: 32px; line-height: 36.8px; letter-spacing: -1.28px; }
.bw-card__text { max-width: 560px; margin-top: 12px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: #393939; }

/* Workspace feature grid only (`bw-grid--features`, owner review 14 September
   2026): more air between each excerpt and its title. The stage is 388 with
   a 52 clear band before the title (padding 440); the three-line bodies at
   1440 give 586-tall cards (576 minimum), equal per row, and longer wraps
   still grow the card. Excerpts sit 12 lower than the base inset, and the
   fade is longer and two-stage: solid to 64%, 55% at 86%, clear at the foot.
   The calendar and package table stay solid to 78% so Leo's block and the
   price summary read whole. Mobile sets its own stages below. */
@media (min-width: 901px) {
  .bw-grid--features .bw-card { min-height: 576px; padding-top: 440px; }
  .bw-grid--features .bw-card__stage {
    height: 388px;
    -webkit-mask-image: linear-gradient(180deg, #000 64%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 64%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
  }
  .bw-grid--features .bw-card--calendar .bw-card__stage,
  .bw-grid--features .bw-card--catalogue .bw-card__stage {
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
  .bw-grid--features .nx--card .nx__stage { padding-top: 36px; }
  .bw-grid--features .nx--home-focus .nx__stage { padding-top: 40px; }
  .bw-grid--features .nx--tasks .nx__stage { padding-top: 32px; }
  .bw-grid--features .nx--record .nx__stage { padding-top: 34px; }
  .bw-grid--features .nx--cal .nx__stage { padding-top: 32px; }
  .bw-grid--features .nx--pkg .nx__stage { padding-top: 30px; }
}

/* Visual hierarchy inside the Workspace cards only: the supporting context
   around each focal element steps back so the first thing to read is
   clear. The focal entry, row, event, note and price summary keep full
   contrast; the Care page excerpts are untouched. */
.bw-card--home .nx-panel:not(.nx-fade) .nx-entry:not(.nx-lift) { opacity: 0.6; }
.bw-card--tasks .nx-task-context { opacity: 0.6; }
.bw-card--directory .nx-tab:not(.nx-tab--on) { opacity: 0.7; }
.bw-card--directory .nx-drow:not(.nx-drow--on):not(.nx-fade-2) { opacity: 0.72; }
.bw-card--calendar .nx-ev:not(.nx-ev--focal) { opacity: 0.7; }

/* Home focus crop: the faded Today panel keeps one whole appointment, so
   no secondary entry is cut at the stage foot. */
.nx--home-focus .nx-panel.nx-fade .nx-entry:nth-child(n + 2) { display: none; }

/* 4. Benefits: #080808, 120/60; H2 → 60 → four 312 columns (24 gaps),
   left rules, 32 inset, 32 icon, 60 to the 20/23 title, 24 to the 14/21
   body; 266 tall. */
.bw-benefits { padding: 120px var(--gutter); background: #080808; color: #F5F5F5; }
.bw-benefits__title { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; margin-bottom: 60px; }
.bw-benefits__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.bw-benefit { min-height: 266px; padding: 32px 24px 32px 32px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.bw-benefit__icon { width: 32px; height: 32px; color: #F5F5F5; }
.bw-benefit__title { margin-top: 60px; font-weight: 300; font-size: 20px; line-height: 23px; letter-spacing: -1px; }
.bw-benefit__text { margin-top: 24px; font-size: 14px; line-height: 21px; letter-spacing: -0.7px; color: rgba(255, 255, 255, 0.62); }

/* 5. Related: the measured cap-related section from pages.css. */

/* ======================================================================
   Care: treatments over the measured Healthcare sections.
   ====================================================================== */
.bc-hero__photo { object-position: 62% 40%; }
.bc-hero__shade { background: linear-gradient(180deg, rgba(18, 22, 20, 0.3) 0%, rgba(18, 22, 20, 0) 35%, rgba(18, 22, 20, 0.12) 58%, rgba(18, 22, 20, 0.66) 100%); }
.bc-field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.bc-outcomes { background: #0B0F0E; }
.bc-cases__media { display: flex; justify-content: flex-end; }
.bc-reason__media { background: #F5F5F5; }
.bc-closing { background: #0B0F0E; }

/* ======================================================================
   Native excerpts — base
   ====================================================================== */
.nx {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
  color: #1B1F1D;
}
.nx__stage { position: absolute; inset: 0; }
.nx-i { display: inline-block; width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em; }
.nx-i--sm { width: 1em; height: 1em; }
.nx-i--xs { width: 0.85em; height: 0.85em; }
.nx-i--flag { width: 0.95em; height: 0.95em; }
.nx-surface { background: #FFFFFF; border: 1px solid rgba(18, 22, 20, 0.09); border-radius: 0.75em; }
.nx-lift { position: relative; z-index: 1; box-shadow: 0 1em 2.2em rgba(18, 22, 20, 0.14), 0 0 0 1px rgba(18, 22, 20, 0.05); }
.nx-fade { opacity: 0.55; }
.nx-fade-2 { opacity: 0.3; }
.nx-m { font-size: 0.86em; color: #6B716E; }
.nx-link { color: #1FA36E; font-size: 0.9em; }
.nx-chip { display: inline-flex; align-items: center; height: 1.65em; padding: 0 0.6em; border-radius: 0.45em; font-size: 0.8em; font-weight: 500; white-space: nowrap; background: #EEF0EE; color: #3B403D; }
.nx-chip--pri { background: #F4F4F2; color: #1B1F1D; border: 1px solid rgba(18, 22, 20, 0.14); }
.nx-chip--todo { background: #DCEBFA; color: #2757A5; }
.nx-chip--progress { background: #FBEFD5; color: #7A5100; }
.nx-chip--done { background: #E3F4EA; color: #1F6B47; }
.nx-chip--lead { background: #FBEFD5; color: #7A5100; }
.nx-chip--customer { background: #E3F4EA; color: #1F6B47; }
.nx-chip--tag { background: #E7EFFA; color: #2757A5; }
.nx-avatar { display: inline-block; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: #E8EAE7; flex: 0 0 20px; }
.nx-avatar--me { box-shadow: 0 0 0 1px #1FB27A; }
.nx-who { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
.nx-flag { display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; }
.nx-flag--medium .nx-i--flag { color: #4A7BD0; }
.nx-flag--high .nx-i--flag { color: #E06A2B; }
.nx-dot { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; border: 2px solid #4A7BD0; background: #4A7BD0; box-shadow: inset 0 0 0 0.14em #FFFFFF; flex: 0 0 auto; }
.nx-dot--progress { border-color: #E0A23A; background: #E0A23A; }
.nx-due { display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; font-size: 0.92em; }
.nx-due--plain { font-size: 0.86em; color: #6B716E; }
.nx-due--over { color: #C73A3A; }
.nx-crumb { display: flex; align-items: center; gap: 0.4em; margin: 0; font-size: 0.9em; color: #6B716E; white-space: nowrap; }
.nx-crumb b { font-weight: 500; color: #1B1F1D; }
.nx-btn { display: inline-flex; align-items: center; gap: 0.3em; height: 2.2em; padding: 0 0.9em; border-radius: 0.55em; border: 1px solid rgba(18, 22, 20, 0.12); background: #FFFFFF; font-size: 0.9em; white-space: nowrap; }
.nx-btn--xs { height: 1.9em; padding: 0 0.7em; font-size: 0.82em; }
.nx-seg { display: inline-flex; gap: 0.2em; padding: 0.2em; border-radius: 0.55em; background: #F1F1EF; font-size: 0.86em; }
.nx-seg > span { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2em 0.7em; border-radius: 0.4em; color: #6B716E; }
.nx-seg__on { background: #FFFFFF; color: #1B1F1D; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.nx-seg > .nx-seg__on { color: #1B1F1D; }
.nx-kbd { margin-left: auto; font-size: 0.72em; padding: 0.1em 0.4em; border: 1px solid rgba(18, 22, 20, 0.14); border-radius: 0.3em; color: #6B716E; }
.nx-clear { margin-left: auto; color: #9AA39E; }

/* App shell (Home) */
.nx-app { display: grid; grid-template-columns: 15em minmax(0, 1fr); height: 100%; }
.nx-side { display: flex; flex-direction: column; gap: 1em; padding: 1.4em 1em; border-right: 1px solid rgba(18, 22, 20, 0.08); background: #FDFCFA; min-height: 0; }
.nx-search { display: flex; align-items: center; gap: 0.5em; height: 2.4em; padding: 0 0.8em; border: 1px solid rgba(18, 22, 20, 0.12); border-radius: 0.6em; color: #6B716E; background: #FFFFFF; }
.nx-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2em; }
.nx-nav__item { display: flex; align-items: center; gap: 0.6em; height: 2.4em; padding: 0 0.8em; border-radius: 0.5em; color: #3B403D; }
.nx-nav__item--on { background: #EEF3F0; color: #121614; font-weight: 500; }
.nx-nav__rule { height: 1px; margin: 0.6em 0; background: rgba(18, 22, 20, 0.08); }
.nx-side__foot { margin-top: auto; display: flex; align-items: center; gap: 0.6em; padding-top: 1em; border-top: 1px solid rgba(18, 22, 20, 0.08); }
.nx-side__collapse { margin-left: auto; color: #6B716E; }
.nx-main { padding: 2.2em 2.4em; min-width: 0; }
.nx-greet { margin: 0; font-size: 1.55em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.nx-date { display: block; margin-top: 0.3em; }
.nx-twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6em; margin-top: 1.6em; align-items: start; }

/* Home panels (HomeListCardShell) */
.nx-panel { overflow: hidden; }
.nx-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.9em 1.1em; border-bottom: 1px solid rgba(18, 22, 20, 0.08); }
.nx-panel__title { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; }
.nx-panel__actions { display: inline-flex; align-items: center; gap: 0.7em; color: #1FA36E; }
.nx-panel__body { display: flex; flex-direction: column; gap: 0.6em; padding: 0.6em; }
.nx-entry { display: flex; flex-direction: column; gap: 0.2em; padding: 0.85em 1em; border: 1px solid rgba(18, 22, 20, 0.08); border-radius: 0.6em; background: #FFFFFF; }
.nx-entry__title { font-weight: 600; }
.nx-time-short { display: none; }
.nx-entry__row { display: flex; align-items: center; gap: 0.6em; margin-top: 0.35em; }

/* Grouped Tasks list */
.nx-list { display: flex; flex-direction: column; }
.nx-group { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0 0.4em; color: #6B716E; }
.nx-group .nx-chip { font-size: 0.72em; letter-spacing: 0.05em; }
.nx-cols, .nx-trow, .nx-srow { display: grid; grid-template-columns: 1.8em minmax(0, 1fr) 6.2em 8.6em 8.6em; align-items: center; column-gap: 0.6em; }
.nx-cols { padding: 0.35em 0.6em; font-size: 0.82em; color: #6B716E; border-bottom: 1px solid rgba(18, 22, 20, 0.08); }
.nx-trow { padding: 0.55em 0.6em; border-bottom: 1px solid rgba(18, 22, 20, 0.06); background: #FFFFFF; }
.nx-trow--focal { margin: 0.35em 0; padding: 0.75em 0.8em; border-radius: 0.6em; border-bottom-color: transparent; }
.nx-trow__lead { display: inline-flex; align-items: center; gap: 0.35em; }
.nx-trow__chev { color: #6B716E; margin-left: -1.2em; }
.nx-trow__name { font-weight: 500; }

/* Contacts directory with saved views */
.nx-dir { display: flex; flex-direction: column; gap: 0.7em; }
.nx-tabs { display: flex; gap: 1.2em; border-bottom: 1px solid rgba(18, 22, 20, 0.08); font-size: 0.9em; }
.nx-tab { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0 0.5em; margin-bottom: -1px; color: #6B716E; white-space: nowrap; border-bottom: 2px solid transparent; }
.nx-tab--on { color: #1B1F1D; font-weight: 500; border-color: #1B1F1D; }
.nx-cols--dir, .nx-drow { grid-template-columns: minmax(0, 1.1fr) 5.5em minmax(0, 1.6fr); }
.nx-drow { display: grid; align-items: center; column-gap: 0.6em; padding: 0.6em 0.6em; border-bottom: 1px solid rgba(18, 22, 20, 0.06); }
.nx-drow--on { background: #F3F6F4; border-radius: 0.5em; }
.nx-drow__name { font-weight: 500; }
.nx-drow__tags { display: flex; gap: 0.35em; align-items: center; flex-wrap: wrap; }

/* Contact record: identity, one rail panel at a time, Notes */
.nx-record { display: flex; flex-direction: column; gap: 0.8em; height: 100%; }
.nx-record__head { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.nx-record__name { font-size: 1.35em; font-weight: 600; margin-right: 0.3em; }
.nx-record__body { display: grid; grid-template-columns: minmax(0, 1fr) 2.6em; gap: 0.5em; align-items: start; }
.nx-ph { display: flex; align-items: center; justify-content: space-between; padding: 0.8em 1em; border-bottom: 1px solid rgba(18, 22, 20, 0.08); }
.nx-ph__title { font-weight: 600; }
.nx-ph__right { display: inline-flex; align-items: center; gap: 0.6em; color: #6B716E; }
.nx-notes__body { padding: 0.9em 1em; }
.nx-note { padding: 0.7em 0.9em; border-radius: 0.6em; background: #F7F7F4; border: 1px solid rgba(18, 22, 20, 0.06); }
.nx-note__head { display: flex; justify-content: space-between; gap: 0.6em; font-size: 0.92em; }
.nx-note__body { margin: 0.3em 0 0; line-height: 1.4; }
.nx-composer { margin: 0 1em 0.9em; padding: 0.6em 0.8em; border: 1px solid rgba(18, 22, 20, 0.12); border-radius: 0.55em; background: #FAFAF8; }
.nx-rail { display: flex; flex-direction: column; gap: 0.3em; padding: 0.6em 0.2em; }
.nx-rail__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; border-radius: 0.45em; color: #6B716E; }
.nx-rail__btn--on { background: #E3F4EA; color: #1F6B47; }

/* Clinic calendar (filter conditions above day columns on a time axis).
   The two conditions sit side by side, the longer resources value in the
   wider column; values wrap rather than truncate on narrow stages. */
.nx-cal { display: flex; flex-direction: column; gap: 0.6em; --hour: 64px; }
.nx-cal__range { font-weight: 500; }
.nx-cal__filters { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0.8em; margin-bottom: 0.6em; }
.nx-cal__cond { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }
.nx-cal__field { font-weight: 500; }
.nx-cal__value { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; min-height: 2.3em; padding: 0.35em 0.7em; border-radius: 0.55em; background: #FFFFFF; line-height: 1.25; }
.nx-cal__value > .nx-i { color: #6B716E; }
.nx-cal__grid { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); }
.nx-cal__axis { display: flex; flex-direction: column; }
.nx-cal__dh { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 2.6em; font-weight: 600; font-size: 0.95em; line-height: 1.1; border-bottom: 1px solid rgba(18, 22, 20, 0.08); }
.nx-cal__dh small { font-size: 0.7em; font-weight: 500; color: #6B716E; letter-spacing: 0.04em; }
.nx-cal__dh--on { background: #DCEBFA; border-radius: 0.5em 0.5em 0 0; color: #1B3F7A; }
.nx-cal__dh--on small { color: #2757A5; }
.nx-cal__h { height: var(--hour); color: #6B716E; display: flex; align-items: flex-start; justify-content: flex-end; padding-right: 0.6em; }
.nx-cal__h > span { font-size: 0.8em; transform: translateY(-0.6em); }
.nx-cal__day { border-left: 1px solid rgba(18, 22, 20, 0.08); }
.nx-cal__slots { position: relative; display: flex; flex-direction: column; }
.nx-cal__slot { height: var(--hour); border-bottom: 1px solid rgba(18, 22, 20, 0.06); }
.nx-ev {
  position: absolute;
  left: 0.3em;
  right: 0.4em;
  height: var(--hour);
  display: flex;
  flex-direction: column;
  padding: 0.3em 0.6em;
  border: 1px solid rgba(18, 22, 20, 0.1);
  border-radius: 0.4em;
  background: #FFFFFF;
  line-height: 1.25;
  overflow: hidden;
}
.nx-ev--mira { top: 0; }
.nx-ev--leo { top: calc(1.5 * var(--hour)); }
.nx-ev__title { font-weight: 500; white-space: nowrap; }
.nx-ev__sub { white-space: nowrap; }

/* Library package table and price summary */
.nx-pkg { display: flex; flex-direction: column; gap: 0.5em; }
.nx-pkg__title { margin: 0.1em 0 0; font-weight: 600; }
.nx-table { border-top: 1px solid rgba(18, 22, 20, 0.1); }
.nx-table__head, .nx-table__row { display: grid; grid-template-columns: minmax(0, 1.6fr) 5em 7em 5em 6em; align-items: center; column-gap: 0.6em; padding: 0.45em 0; border-bottom: 1px solid rgba(18, 22, 20, 0.08); }
.nx-table__head { font-size: 0.82em; color: #6B716E; padding: 0.4em 0; }
.nx-table__head > span:nth-child(3), .nx-table__row > span:nth-child(3),
.nx-table__head > span:nth-child(5), .nx-table__row > span:nth-child(5) { text-align: right; }
.nx-qty { display: inline-flex; align-items: center; width: 3.2em; height: 2em; padding: 0 0.6em; border: 1px solid rgba(18, 22, 20, 0.12); border-radius: 0.4em; background: #F7F7F5; }
.nx-table__total { font-weight: 500; }
.nx-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 0.5em 0 0; padding: 0.9em 1.1em; border-radius: 0.7em; background: #FFFFFF; }
.nx-sum dt { font-size: 0.82em; color: #6B716E; }
.nx-sum dd { margin: 0.2em 0 0; font-weight: 500; font-size: 1.05em; }
.nx-sum__price dd { font-size: 1.3em; font-weight: 600; }

/* Task detail with subtasks (Care use cases) */
.nx-task { width: 100%; padding: 1.6em 1.8em; display: flex; flex-direction: column; gap: 1em; border-radius: 1em; box-shadow: 0 2em 5em rgba(0, 0, 0, 0.45); }
.nx-task__title { margin: 0; font-size: 1.5em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.nx-meta { display: grid; grid-template-columns: 7em minmax(0, 1fr); row-gap: 0.35em; column-gap: 0.8em; align-items: center; }
.nx-meta__row { display: contents; }
.nx-meta__k { font-size: 0.9em; color: #6B716E; }
.nx-meta__v { display: flex; align-items: center; gap: 0.5em; min-height: 2.1em; padding: 0 0.6em; border-radius: 0.5em; }
.nx-meta__row--focal .nx-meta__v { background: #F3F6F4; box-shadow: inset 0 0 0 1px rgba(18, 22, 20, 0.08); }
.nx-sub { margin-top: 0.4em; padding-top: 1em; border-top: 1px solid rgba(18, 22, 20, 0.08); }
.nx-sub__head { display: flex; align-items: center; gap: 0.7em; margin-bottom: 0.6em; }
.nx-sub__track { width: 4.5em; height: 0.4em; border-radius: 999px; background: rgba(18, 22, 20, 0.08); overflow: hidden; }
.nx-sub__track span { display: block; width: 0; height: 100%; background: #1FB27A; }
.nx-cols--sub, .nx-srow { grid-template-columns: 1.6em minmax(0, 1fr) 9em 6.5em; }
.nx-cols--sub { padding-left: 1.4em; }
.nx-srow { padding: 0.55em 0.6em 0.55em 1.4em; border-bottom: 1px solid rgba(18, 22, 20, 0.06); }
.nx-sub__add { display: flex; align-items: center; gap: 0.4em; padding: 0.6em 0.6em 0 1.4em; }

/* Appointment detail, Notes thumb, related Tasks panel */
.nx-appt { width: 100%; padding: 1em 1.1em; display: flex; flex-direction: column; gap: 0.25em; }
.nx-appt p { margin: 0; }
.nx-appt__title { font-size: 1.25em; font-weight: 600; }
.nx-appt__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; margin-top: 0.6em; }
.nx-appt__actions { display: flex; gap: 0.5em; margin-top: 0.8em; flex-wrap: wrap; }
.nx-notes--thumb { width: 100%; }
.nx-rel { position: relative; width: 100%; }
.nx-rel .nx-ph { padding-right: 3.2em; }
.nx-rel .nx-ph__right > svg { display: none; }
.nx-rel__add { position: absolute; top: 0.45em; right: 0.7em; display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 0.5em; background: #E3F4EA; color: #1F6B47; }
.nx-rel__row { margin: 0.9em 1em 1em; padding: 0.7em 0.9em; border: 1px solid rgba(18, 22, 20, 0.08); border-radius: 0.6em; display: flex; flex-direction: column; gap: 0.35em; }
.nx-rel__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6em; }
.nx-rel__top > span:first-child { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.nx-rel__row > p { margin: 0; }
.nx-rel__actions { display: flex; justify-content: flex-end; gap: 0.35em; }

/* Native Assignee field and People picker, with a subdued prior assignment. */
.nx-handover { width: 100%; }
.nx-handover__label { margin: 0 0 0.4em; }
.nx-handover__sequence { display: flex; align-items: center; justify-content: space-between; gap: 0.35em; }
.nx-handover__previous { opacity: 0.45; }
.nx-handover__arrow { color: #9AA39E; }
.nx-handover__current { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.35em 0.5em; border: 1px solid rgba(18, 22, 20, 0.09); border-radius: 0.5em; background: #FFFFFF; }
.nx-handover__current > .nx-i { color: #9AA39E; }
.nx-handover__picker { width: calc(100% - 2.5em); margin: 0.4em 0 0 auto; padding: 0.3em; border-radius: 0.6em; }
.nx-handover__search { display: flex; align-items: center; gap: 0.6em; padding: 0.15em 0.6em 0.4em; border-bottom: 1px solid rgba(18, 22, 20, 0.08); color: #6B716E; }
.nx-handover__group { margin: 0; padding: 0.35em 0.8em 0.15em; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; color: #6B716E; }
.nx-handover__option { display: flex; align-items: center; justify-content: space-between; padding: 0.25em 0.6em; border-radius: 0.35em; }
.nx-handover__option--selected { background: #EEF3F0; }

/* ----- Variants (display sizes) ----------------------------------------- */
/* Hero application view 1200×750: 15px base, white surface with rounded
   top corners, fading into the white intro over its lower half. */
.nx--hero { font-size: 15px; border-radius: 16px 16px 0 0; background: #FBFAF8; box-shadow: 0 30px 80px rgba(13, 16, 14, 0.28); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 52%, transparent 100%); }

/* Feature card stage 648×300: 13px base, 24/32 inset. */
.nx--card { font-size: 13px; }
.nx--card .nx__stage { padding: 24px 32px 0; }
.nx--home-focus .nx__stage { padding-top: 28px; }
.nx--home-focus .nx-twocol { margin-top: 0; gap: 1.2em; }
.nx--tasks .nx__stage { padding-top: 20px; }
.nx--record .nx__stage { padding-top: 22px; }
.nx--cal .nx__stage { padding-top: 20px; }
.nx--pkg .nx__stage { padding-top: 18px; }

/* Care use-case composition 628×700 on #080808: 15px base, the task card
   centred on a dark pane with a soft teal glow. */
.nx--cases {
  width: 628px;
  max-width: 100%;
  height: 700px;
  font-size: 15px;
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(47, 111, 99, 0.45), transparent 70%),
    linear-gradient(180deg, #141A18 0%, #0E1211 100%);
}
.nx--cases .nx__stage { display: flex; align-items: center; justify-content: center; padding: 2.2em; }

/* Editorial thumbs 310×195.672: 11.5px base. */
.nx--thumb { font-size: 11.5px; }
.nx--thumb .nx__stage { display: flex; align-items: flex-start; justify-content: center; padding: 1em; overflow: hidden; }
.nx--note .nx__stage { padding: 1.2em 1em; }
.nx--handover .nx__stage { padding: 0.8em; }

/* ======================================================================
   Tablet and small desktop (901–1439): fixed columns go fluid.
   ====================================================================== */
@media (max-width: 1439px) {
  .nx--cases { width: 100%; height: auto; aspect-ratio: 628 / 700; }
}
@media (max-width: 1199px) {
  .bw-hero__product { height: auto; aspect-ratio: 1200 / 750; }
  .nx--hero { font-size: 14px; }
  /* Narrower panels wrap their entries: two whole entries per panel. */
  .bw-hero__product .nx--hero .nx-panel__body .nx-entry:nth-child(n + 3) { display: none; }
  .bw-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Calendar: the conditions stack and the day header steps back, so both
     bookings stay inside the solid part of the stage. */
  .nx--cal .nx-cal__filters { grid-template-columns: minmax(0, 1fr); gap: 0.5em; }
  .nx--cal .nx-cal__dh { display: none; }
  .nx--cal .nx-cal { --hour: 58px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  /* Task names need the compact layout before the five-column table
     pushes the focal assignment below its fixed illustration stage. */
  .nx--tasks .nx-task-context, .nx--tasks .nx-x { display: none; }
  .nx--tasks .nx-trow { grid-template-columns: 1.4em minmax(0, 1fr) auto; row-gap: 0.55em; }
  .nx--tasks .nx-trow__lead { grid-row: 1 / 3; align-self: start; padding-top: 0.2em; }
  .nx--tasks .nx-trow__name { grid-column: 2 / 4; }
  .nx--tasks .nx-trow__who { grid-column: 2; }
  .nx--tasks .nx-trow__due { grid-column: 3; }
  .nx--handover .nx-handover__search { display: none; }
  /* Care visit thumb: Reschedule Appointment stays whole in the 260-wide slot. */
  .sol-reason--appointment .sol-reason__media { height: 214px; }
}

/* Compact native excerpts when a two-column page makes the art surface
   narrower than its desktop table. The page architecture stays unchanged. */
@media (min-width: 901px) and (max-width: 1100px) {
  .nx--card .nx-x { display: none; }
  .nx--home-focus .nx-twocol { grid-template-columns: 1fr; }
  .nx--home-focus .nx-panel.nx-fade { display: none; }
  .nx--pkg .nx-table__head, .nx--pkg .nx-table__row { grid-template-columns: minmax(0, 1fr) 5.2em; }
  .nx--pkg .nx-table__head > span:nth-child(3), .nx--pkg .nx-table__row > span:nth-child(3), .nx--pkg .nx-table__head > span:nth-child(4), .nx--pkg .nx-table__row > span:nth-child(4) { display: none; }
  .nx--cases { height: auto; aspect-ratio: auto; font-size: 13px; }
  .nx--cases .nx__stage { position: relative; padding: 1.2em; }
  .nx--cases .nx-task { padding: 1.2em; }
  .nx--cases .nx-cols--sub, .nx--cases .nx-srow .nx-trow__who { display: none; }
  .nx--cases .nx-srow { grid-template-columns: 1.6em minmax(0, 1fr) 6.5em; }
}

/* ======================================================================
   Mobile (≤900), measured at 390×844.
   ====================================================================== */
@media (max-width: 900px) {
  .nx-x { display: none !important; }

  /* Workspace hero 594.09: padding 139/24/0; label 19.5 → 32 → H1 38/39.9
     → 16 → support 20/25 → 44 → product 342×213.75. Content-driven height;
     the authored three-line H1 adds one line to the source's two. */
  .bw-hero { min-height: 0; padding: 139px 24px 0; }
  .bw-hero__label { height: 19.5px; font-size: 16px; letter-spacing: -0.3px; margin-bottom: 32px; }
  .bw-hero__label img { width: 20px; height: 20px; }
  .bw-hero__title { max-width: 342px; font-size: 38px; line-height: 39.9px; letter-spacing: -1.9px; margin-bottom: 16px; }
  .bw-hero__title .br-desktop { display: none; }
  .bw-hero__title .br-mobile { display: inline; }
  .bw-hero__support { max-width: 342px; font-size: 20px; line-height: 25px; letter-spacing: -0.75px; }
  .bw-hero__product { width: 342px; max-width: 100%; height: 232px; aspect-ratio: auto; margin-top: 44px; }
  .bw-hero__fade { background: linear-gradient(180deg, rgba(13, 16, 14, 0.4) 0%, rgba(13, 16, 14, 0.56) 48%, rgba(13, 16, 14, 0.35) 66%, rgba(255, 255, 255, 0.45) 83%, #FFFFFF 100%); }
  .bw-hero__nav-light { height: 18%; }

  /* Intro: 24 above the title and 40 to the feature grid. */
  .bw-intro { padding: 24px 24px 0; }
  .bw-intro__title { max-width: 318px; font-size: 32px; line-height: 33.6px; letter-spacing: -1.28px; }

  /* Grid: one 342 column, 16 gaps; stage 195.3 + 24 → title 24/27.6 with a
     16 inset, 12 → body 17/21.76, 16 below. The Workspace feature grid keeps
     these stages but clears 40 before the title (195.3 + 40; per-card stages
     below add the same 40). */
  .bw-grid { padding: 40px 24px 84px; }
  .bw-grid__list { grid-template-columns: 1fr; gap: 16px; }
  .bw-card { min-height: 0; padding: 219px 16px 16px; justify-content: flex-start; }
  .bw-card__title, .bw-card__text { max-width: none; }
  .bw-card__stage { height: 195.3px; }
  .bw-grid--features .bw-card { padding-top: 235.3px; }
  .bw-card__title { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }

  /* Benefits 60/30: H2 34/39.1 → 60 → open ruled tiles in one column,
     30 vertical padding, 24 gaps. */
  .bw-benefits { padding: 60px 30px; }
  .bw-benefits__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; margin-bottom: 60px; }
  .bw-benefits__grid { grid-template-columns: 1fr; gap: 24px; }
  .bw-benefit { min-height: 0; padding: 30px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }

  /* Care: hero crop keeps both figures; media stack per pages.css. The
     task composition keeps title, Assignee and Dates and all three
     subtasks inside 342×268; Status, Priority and the assignee column of
     the subtask rows step back. */
  .bc-hero__photo { object-position: 84% 38%; }
  .bc-cases__media { justify-content: stretch; }
  .nx--cases { width: 100%; height: auto; min-height: 268px; aspect-ratio: auto; font-size: 12.5px; }
  .nx--cases .nx__stage { position: relative; padding: 0.8em; align-items: flex-start; }
  .nx-task { padding: 0.9em 1.1em; gap: 0.7em; }
  .nx-task .nx-crumb, .nx-task .nx-cols--sub, .nx-sub__add, .nx-meta__row--priority, .nx-meta__row:first-child { display: none; }
  .nx-task__title { font-size: 1.15em; }
  .nx-meta { grid-template-columns: 6em minmax(0, 1fr); }
  .nx-meta__v { min-height: 1.8em; }
  .nx-sub { padding-top: 0.8em; }
  .nx-srow { grid-template-columns: 1.6em minmax(0, 1fr) 6em; padding-top: 0.4em; padding-bottom: 0.4em; }
  .nx-srow .nx-trow__who { display: none; }

  /* Excerpts recompose at 342 (12.5px base) and keep the focal element whole. */
  .nx--hero { font-size: 12.5px; border-radius: 10px 10px 0 0; -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%); mask-image: linear-gradient(180deg, #000 92%, transparent 100%); }
  .nx--hero .nx-app { display: block; }
  .nx--hero .nx-side, .nx--hero .nx-greet, .nx--hero .nx-date { display: none; }
  .nx--hero .nx-main { padding: 0.65em 0.8em; }
  .nx--hero .nx-twocol { grid-template-columns: 1fr; gap: 0.5em; margin-top: 0; }
  .nx--hero .nx-panel__head { padding: 0.5em 0.7em; }
  .nx--hero .nx-panel__body { padding: 0.4em; }
  .nx--hero .nx-entry { padding: 0.4em 0.6em; gap: 0.05em; }
  .nx--hero .nx-time-full, .nx--hero .nx-entry__status, .nx--hero .nx-entry > .nx-m:not(.nx-entry__time):not(.nx-entry__patient) { display: none; }
  .nx--hero .nx-time-short { display: inline; }
  .nx--hero .nx-entry__patient { color: #1B1F1D; }
  .nx--hero .nx-panel__body .nx-entry:nth-child(n + 2) { display: none; }

  .nx--card { font-size: 12.5px; }
  .nx--card .nx__stage { padding: 16px 16px 0; }
  .bw-card__stage { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
  .bw-grid--features .bw-card--record, .bw-grid--features .bw-card--catalogue { padding-top: 280px; }
  .bw-card--record .bw-card__stage, .bw-card--catalogue .bw-card__stage { height: 240px; }
  .bw-grid--features .bw-card--calendar { padding-top: 255px; }
  /* Tasks: the focal and receding rows wrap at 320, so the stage holds both whole. */
  .bw-grid--features .bw-card--tasks { padding-top: 280px; }
  .bw-card--tasks .bw-card__stage { height: 240px; }
  .bw-card--calendar .bw-card__stage { height: 215px; }
  .bw-card--home .bw-card__stage, .bw-card--catalogue .bw-card__stage { -webkit-mask-image: none; mask-image: none; }
  .bw-card--record .bw-card__stage { -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%); mask-image: linear-gradient(180deg, #000 92%, transparent 100%); }
  .bw-card--tasks .bw-card__stage, .bw-card--calendar .bw-card__stage { -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent 100%); mask-image: linear-gradient(180deg, #000 85%, transparent 100%); }
  .nx--home-focus .nx__stage { padding-top: 16px; }
  .nx--home-focus .nx-twocol { grid-template-columns: 1fr; }
  .nx--home-focus .nx-panel.nx-fade { display: none; }
  .nx--home-focus .nx-entry { padding: 0.55em 0.8em; gap: 0.1em; }
  .nx--home-focus .nx-entry > .nx-m { display: none; }
  .nx--tasks .nx-task-context { display: none; }
  .nx-trow { grid-template-columns: 1.4em minmax(0, 1fr) auto; row-gap: 0.55em; padding: 0.7em; }
  .nx-trow__lead { grid-row: 1 / 3; align-self: start; padding-top: 0.2em; }
  .nx-trow__name { grid-column: 2 / 4; }
  .nx-trow__who { grid-column: 2; }
  .nx-trow__due { grid-column: 3; }
  .nx-srow .nx-trow__name, .nx-srow .nx-trow__due { grid-column: auto; }
  .nx-srow .nx-trow__lead { grid-row: auto; }
  .nx-tabs { gap: 1em; }
  .nx-cols--dir, .nx-drow { grid-template-columns: minmax(0, 1fr) 4.6em minmax(0, 1.3fr); }
  .nx-record__body { grid-template-columns: minmax(0, 1fr) 2.4em; }
  .nx--record .nx-notes__body { padding: 0.7em; }
  .nx--record .nx-note { padding: 0.6em; }
  .nx--record .nx-note__head > span > .nx-m, .nx--record .nx-composer, .nx--record .nx-rail__btn:nth-child(n + 6) { display: none; }
  .nx-cal { --hour: 52px; }
  /* Mobile calendar: both conditions and Mira's booking stay whole.
     Later booking text and time labels are omitted before the fade. */
  .nx--cal .nx-cal { --hour: 46px; }
  .nx--cal .nx-ev--leo, .nx--cal .nx-cal__axis .nx-cal__h:nth-child(n + 4) { display: none; }
  .nx--cal .nx-cal__filters { margin-bottom: 0; }
  .nx--cal .nx-cal__value { min-height: 2.1em; padding: 0.3em 0.6em; }
  .nx-ev__sub { display: none; }
  .nx-cal__grid { grid-template-columns: 3.4em minmax(0, 1fr); }
  .nx--pkg .nx-crumb, .nx--pkg .nx-pkg__title { display: none; }
  .nx-table__head, .nx-table__row { grid-template-columns: minmax(0, 1fr) 5.2em; padding: 0.45em 0; }
  .nx-table__head > span:nth-child(3), .nx-table__row > span:nth-child(3), .nx-table__head > span:nth-child(4), .nx-table__row > span:nth-child(4) { display: none; }
  .nx-sum { gap: 0.6em; padding: 0.8em 0.9em; }

  .nx--thumb { font-size: 12.5px; }
}

/* 320: the same recompositions inside 272; type steps down one size so
   every focal control stays complete. */
@media (max-width: 359px) {
  .nx--hero, .nx--card, .nx--cases, .nx--thumb { font-size: 12px; }
  .nx-trow { font-size: 12px; }
  .nx-sum { grid-template-columns: 1fr; gap: 0.35em; }
  .nx-sum > div { display: flex; justify-content: space-between; align-items: baseline; }
  .nx-sum dd { margin: 0; }
  .bw-grid--features .bw-card--record { padding-top: 300px; }
  .bw-card--record .bw-card__stage { height: 260px; }
  .nx-appt__actions > .nx-fade { display: none; }
}

/* Neogenic — rollout pages (12 September 2026).
   Systems sections   (Biohacking & performance clinics and the field-led
                       product heroes; the original Sales pipeline page is
                       now part of /platform/sales-marketing/) ← Wonderful /systems
   Enquiry anatomy    (/solutions/concierge-medicine/, formerly Enquiry
                       conversion) ← Wonderful /deployment
   Numbers are the settled source CSS pixels at 1440×1000 and 390×844
   (docs/qa/benchmark-reset/template/systems-desktop-measurements.json,
   deployment-desktop-measurements.json, deployment-mobile-measurements.json).
   Inter 300 stands in for ABC Favorit Light. Loads after benchmark.css and
   reuses its `nx-*` base atoms.
     bs-*  Sales pipeline sections
     be-*  Enquiry conversion sections
     nx-*  opportunity excerpts (src/pages/benchmark/native-sales.mjs) */

/* ======================================================================
   Sales 1. Optical hero on the shared canvas (--hero-min, base.css):
   padding 24/60/0; group centred: label 31 → 24 → H1 64/67.2 (950, two
   lines) → 12 → support 20/25 (491).
   ====================================================================== */
/* Symmetric header-clearance padding keeps the group centred at the
   measured position while letting enlarged content grow the canvas below
   the fixed header instead of above the section. */
.bs-hero {
  position: relative;
  min-height: var(--hero-min);
  padding: calc(var(--strip-h) + var(--nav-h) + 24px) 60px calc(var(--strip-h) + var(--nav-h) + 24px);
  background: #0F1A18;
  color: #FAFAFA;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-hero__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.bs-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%); }
.bs-hero__group { position: relative; z-index: 1; width: 950px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bs-hero__label { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; min-height: 31px; max-width: 100%; margin-bottom: 24px; font-size: 24px; line-height: 1; letter-spacing: -0.6px; color: rgba(250, 250, 250, 0.95); }
.bs-hero__label img { width: 28px; height: 28px; }
.bs-hero__title { max-width: 950px; font-weight: var(--display-weight); font-size: 64px; line-height: 67.2px; letter-spacing: -3.84px; margin-bottom: 12px; overflow-wrap: anywhere; }
.bs-hero__title .br-mobile { display: none; }
.bs-hero__support { max-width: 491px; font-size: 20px; line-height: 25px; letter-spacing: -0.75px; color: rgba(250, 250, 250, 0.92); }

/* 2. Product story: white, 120/60; text 478 (H2 48/50.4 → 32 → intro
   17/21.76 → 83 → ruled rows: title 20/23 → 15 → body 17/21.76, 24 above
   and below each rule); media 782×717 at x598, 8px corners. */
.bs-story {
  display: grid;
  grid-template-columns: 478px 782px;
  grid-template-areas: "text media" "rows media";
  justify-content: space-between;
  align-items: start;
  padding: 120px var(--gutter);
  background: #FFFFFF;
  color: var(--ink);
}
/* The text child may shrink below its min-content width (the story aligns
   items to start, so a long word at enlarged text would otherwise set its
   width); heading and intro words wrap only when a word cannot fit. */
.bs-story__text { grid-area: text; min-width: 0; max-width: 100%; }
.bs-story__media { grid-area: media; }
.bs-story__rows { grid-area: rows; }
.bs-story__title { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; margin-bottom: 32px; overflow-wrap: anywhere; }
.bs-story__intro { font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: var(--ink); overflow-wrap: anywhere; }
.bs-story__rows { list-style: none; margin: 83px 0 0; padding: 0; }
.bs-story__row { padding: 24px 0; border-top: 1px solid rgba(18, 22, 20, 0.12); }
.bs-story__row:last-child { border-bottom: 1px solid rgba(18, 22, 20, 0.12); }
.bs-story__row-title { font-weight: 300; font-size: 20px; line-height: 23px; letter-spacing: -1px; }
.bs-story__row-text { margin-top: 15px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: #393939; }
.bs-story__media { width: 782px; max-width: 100%; height: 717px; border-radius: 8px; overflow: hidden; background: #F3F3EF; }

/* 3. Benefits: #080808, 120/60; H2 → 24 → intro 17/21.76 (560) → 60 →
   three ruled columns (424 each, 24 gaps, 32 inset, 32 icon, 60 to the
   20/23 title, 24 to the 14/21 body, 266 tall). */
.bs-benefits { padding: 120px var(--gutter); background: #080808; color: #F5F5F5; }
.bs-benefits__title { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; margin-bottom: 24px; }
.bs-benefits__intro { max-width: 560px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: rgba(255, 255, 255, 0.72); margin-bottom: 60px; }
.bs-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.bs-benefit { min-height: 266px; padding: 32px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.bs-benefit__icon { width: 32px; height: 32px; color: #F5F5F5; }
.bs-benefit__title { margin-top: 60px; font-weight: 300; font-size: 20px; line-height: 23px; letter-spacing: -1px; }
.bs-benefit__text { margin-top: 24px; max-width: 360px; font-size: 14px; line-height: 21px; letter-spacing: -0.7px; color: rgba(255, 255, 255, 0.62); }

/* 4. Product grid: #080808, 120/60; H2 → 80 → four 648×453.9 dark cards,
   24 gaps. The excerpt stage takes the upper 300; the 26/32.5 title and
   17/21.76 body group anchors 32 above the card foot (the Systems cards
   carry the title at +377 with no body). */
.bs-grid { padding: 120px var(--gutter); background: #080808; color: #F5F5F5; }
.bs-grid__title { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; margin-bottom: 80px; }
.bs-grid__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bs-card {
  position: relative;
  min-height: 453.906px;
  padding: 300px 32px 32px;
  border-radius: 12px;
  background: #121212;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bs-card__stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
/* Two cards keep their focal control whole instead of fading: the open
   Stage menu is never masked, and the filters mask starts below the Owner
   cell (Owner ends ≈251 in the 300 stage). */
.bs-card--stage .bs-card__stage { -webkit-mask-image: none; mask-image: none; }
.bs-card--filters .bs-card__stage { -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
.bs-card__title { max-width: 560px; font-weight: 300; font-size: 26px; line-height: 32.5px; letter-spacing: -1.3px; color: #FAFAFA; }
.bs-card__text { max-width: 560px; margin-top: 12px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: rgba(255, 255, 255, 0.7); }

/* ======================================================================
   Enquiry 1. Photographic hero on the shared canvas (--hero-min). The
   centred H1 64/67.2 (950, two lines) → 32 → support 20/25 sits in the
   upper band, 120 below the fixed header, so the type never crosses the
   faces composed in the lower half of the photograph
   (docs/qa/enquiry-remake/image-job.json type safe zones). A linear shade
   darkens only that upper band; no spot over the people.
   ====================================================================== */
.be-hero {
  position: relative;
  min-height: var(--hero-min);
  padding: calc(var(--strip-h) + var(--nav-h) + 34px) 60px 60px;
  background: var(--deep);
  color: #FAFAFA;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* Wide candid frame (1536x1024) from 901px up. At 1440x1000 it scales to
   the canvas height (1500 wide, sides cropped); hair starts at 46% of the
   frame, ≈460, while the group runs 139 → ≈355 (two-line H1, two support
   lines) and ≈380 at 901 (three support lines). The pair sits at 38–70% of
   the frame width, so the centred crop keeps both whole down to 901. The
   media box is never shorter than 1000, so a shorter canvas crops the
   floor at the foot (hands at ≈80% stay visible at 844) rather than
   raising the faces into the type. */
.be-hero__photo { position: absolute; top: 0; left: 0; width: 100%; height: max(100%, 1000px); object-fit: cover; object-position: 50% 0%; }
.be-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 22, 20, 0.55) 0%, rgba(18, 22, 20, 0.38) 32%, rgba(18, 22, 20, 0) 60%);
}
.be-hero__group { position: relative; z-index: 1; width: 950px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* overflow-wrap lets a single enlarged word ("consultation") break inside
   the column instead of setting the title's min-content wider than it. */
.be-hero__title { max-width: 100%; font-weight: var(--display-weight); font-size: 64px; line-height: 67.2px; letter-spacing: -3.84px; margin-bottom: 32px; overflow-wrap: anywhere; }
.be-hero__title .br-mobile { display: none; }
.be-hero__support { max-width: 950px; font-size: 20px; line-height: 25px; letter-spacing: -0.75px; color: rgba(250, 250, 250, 0.92); }

/* 2. Outcomes: #FAFAFA, 120/60, inner 1200; H2 → 24 → intro 17/21.76
   (533) → 60 → three ruled tiles (32 inset, 32 icon, 60, 20/23 title,
   24, 14/21 body; 266 tall). */
.be-outcomes { padding: 120px var(--gutter); background: #FAFAFA; color: var(--ink); }
.be-outcomes__inner { width: 1200px; max-width: 100%; margin: 0 auto; }
.be-outcomes__title { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; margin-bottom: 24px; }
.be-outcomes__intro { max-width: 533px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: #5A605D; margin-bottom: 60px; }
.be-outcomes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.be-outcome { min-height: 266px; padding: 32px; border-left: 1px solid rgba(18, 22, 20, 0.12); }
.be-outcome__icon { width: 32px; height: 32px; color: var(--ink); }
.be-outcome__title { margin-top: 60px; font-weight: 300; font-size: 20px; line-height: 23px; letter-spacing: -1px; }
.be-outcome__text { margin-top: 24px; max-width: 300px; font-size: 14px; line-height: 21px; letter-spacing: -0.7px; color: #5A605D; }

/* 3. Phases: #080808, 120/60, inner 1200, one centred composition: H2
   48/50.4 → 32 → pill track (14/16.8 pills) → 120 → step title 32/36.8 →
   24 → body 17/21.76 → 32 → excerpt pane.
   Stability: the four panels share two grid tracks. Every panel occupies
   the same grid area of .be-phases__panels and lays its copy and pane into
   the parent's rows through subgrid, so row 1 is as tall as the longest
   title-plus-body and row 2 as tall as the tallest excerpt, whichever step
   is selected. Inactive panels stay in the layout but are invisible (and
   inert + aria-hidden from the markup and accordion.js stable mode). No
   measured or fixed heights; enlarged text grows the tracks for all
   states together. Without subgrid support the panels still stack; only
   the copy/pane boundary may vary. */
.be-phases { padding: 120px var(--gutter); background: #080808; color: #F5F5F5; }
.be-phases__inner { width: 1200px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.be-phases__title { max-width: 950px; font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; margin-bottom: 32px; overflow-wrap: anywhere; }
/* Pills grow and wrap with enlarged text: natural height above the 34px
   minimum (44 on phones), labels may wrap, nothing is nowrap. */
.be-phases__tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); margin-bottom: 120px; }
.be-phases__tab { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; min-width: 0; padding: 6px 16px; border-radius: 999px; font-size: 14px; line-height: 16.8px; letter-spacing: -0.84px; color: rgba(255, 255, 255, 0.62); text-align: center; overflow-wrap: anywhere; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.be-phases__tab:hover { color: #FFFFFF; }
.be-phases__tab[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); }
/* The single column is minmax(0, 1fr) and every item in the chain has
   min-width 0, so the tracks are sized by the available width, never by a
   panel's or excerpt's min-content (the 320 overflow of candidate 1). */
.be-phases__panels { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 32px; width: 100%; min-width: 0; }
.be-phases__panel { grid-area: 1 / 1 / 3 / 2; display: grid; grid-template-rows: subgrid; justify-items: center; min-width: 0; }
.be-phases__panel[data-active="false"] { visibility: hidden; }
.be-phases__copy { width: 100%; max-width: 760px; min-width: 0; }
.be-phases__step { font-weight: 300; font-size: 32px; line-height: 36.8px; letter-spacing: -1.28px; overflow-wrap: anywhere; }
.be-phases__text { max-width: 640px; margin: 24px auto 0; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: rgba(255, 255, 255, 0.72); overflow-wrap: anywhere; }
.be-phases__pane {
  width: 100%;
  min-width: 0;
  padding: 32px;
  border-radius: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(70% 60% at 30% 40%, rgba(47, 111, 99, 0.35), transparent 70%),
    #141917;
}

/* 4. Closing 640 on the optical field: 160/60, centred 660-wide 48/50.4
   H2, 60 gap, one pill, related links beneath. */
.be-closing { position: relative; min-height: 640px; padding: 160px var(--gutter); background: #0B0F0E; color: #FAFAFA; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.be-closing__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.be-closing__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 14, 0.42), rgba(13, 16, 14, 0.7)); }
.be-closing__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 60px; text-align: center; }
.be-closing__title { max-width: 660px; font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; }
.be-closing__cta { min-width: 140px; }
.be-closing__links { margin-top: -24px; font-size: 14px; color: rgba(250, 250, 250, 0.7); }
.be-closing__links a { text-decoration: underline; text-underline-offset: 3px; }

/* ======================================================================
   Opportunity excerpts (native-sales.mjs)
   ====================================================================== */
.nx-chip--status { background: #EEF0EE; color: #3B403D; text-transform: capitalize; }
.nx-chip--group { background: #E7EFFA; color: #2757A5; font-size: 0.72em; letter-spacing: 0.05em; text-transform: uppercase; }
.nx-chip--tag .nx-i { margin-right: 0.3em; }
.nx-odot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; background: #4A7BD0; flex: 0 0 auto; }
.nx-chev { margin-left: auto; color: #9AA39E; }
.nx-btn--primary { background: #1FB27A; color: #FFFFFF; border-color: transparent; }

/* S1 — the board: breadcrumb and Stage grouping chip, then stage columns.
   Three focal columns sit inside the frame; the New enquiry and Decision
   columns show only their edges and recede. */
.nx--board { font-size: 13px; background: #F7F7F4; }
.nx--board .nx__stage { display: flex; flex-direction: column; gap: 0.9em; padding: 24px 24px 0; }
.nx-board { display: flex; flex-direction: column; gap: 0.9em; height: 100%; }
.nx-board__bar { display: flex; align-items: center; justify-content: space-between; }
.nx-board__cols { display: flex; gap: 0.9em; margin-left: -12.5em; flex: 1; min-height: 0; }
.nx-col { flex: 0 0 15em; display: flex; flex-direction: column; gap: 0.35em; min-height: 0; }
.nx-col--edge { opacity: 0.35; }
.nx-col__head { background: #FFFFFF; border: 1px solid rgba(18, 22, 20, 0.09); border-radius: 0.7em; padding: 0.6em 0.8em; }
.nx-col__name { display: flex; align-items: baseline; gap: 0.5em; font-weight: 600; }
.nx-col__sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.3em; }
.nx-col__body { flex: 1; background: #EFEFEB; border-radius: 0.8em; padding: 0.5em; display: flex; flex-direction: column; gap: 0.5em; }
.nx-oc { background: #FFFFFF; border: 1px solid rgba(18, 22, 20, 0.09); border-radius: 0.6em; padding: 0.7em 0.8em; }
.nx-oc__name { display: block; font-weight: 500; }
.nx-oc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em; margin-top: 0.45em; }

/* S2 — the grouped list by Owner */
.nx-olist { display: flex; flex-direction: column; }
.nx-olist__bar { display: flex; gap: 0.6em; margin-bottom: 0.5em; }
.nx-ogroup { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0 0.35em; color: #6B716E; }
.nx-ogroup b { color: #1B1F1D; font-size: 0.9em; }
.nx-ocols, .nx-orow { display: grid; grid-template-columns: minmax(0, 1.7fr) 10em 8em 5.2em; align-items: center; column-gap: 0.6em; }
/* The header keeps the row's font size so its em tracks are the row's
   tracks; only the labels are small. */
.nx-ocols { padding: 0.35em 0.6em; color: #6B716E; border-bottom: 1px solid rgba(18, 22, 20, 0.08); }
.nx-ocols > span { font-size: 0.82em; }
.nx-orow { padding: 0.55em 0.6em; border-bottom: 1px solid rgba(18, 22, 20, 0.06); background: #FFFFFF; }
.nx-orow__name { font-weight: 500; }
.nx-orow__stage { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.nx-orow__value { text-align: right; font-weight: 500; }
.nx-ocols > span:last-child { text-align: right; }

/* Opportunity detail fields (S3, E1) */
.nx-opp { display: flex; flex-direction: column; gap: 0.7em; }
.nx-opp__title { margin: 0; font-size: 1.5em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.nx-opp__section { margin: 0.2em 0 0; font-weight: 600; font-size: 0.95em; }
.nx-opp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8em 1em; }
.nx-field { position: relative; display: flex; flex-direction: column; gap: 0.3em; }
.nx-field__label { font-size: 0.86em; color: #6B716E; }
.nx-field__cell { display: flex; align-items: center; gap: 0.5em; min-height: 2.4em; padding: 0 0.7em; border: 1px solid rgba(18, 22, 20, 0.12); border-radius: 0.5em; background: #FFFFFF; }
.nx-field--focal .nx-field__cell { box-shadow: 0 0 0 1px #1FB27A, 0 0.6em 1.4em rgba(18, 22, 20, 0.12); }
.nx-menu { display: flex; flex-direction: column; gap: 0.1em; padding: 0.3em; background: #FFFFFF; border: 1px solid rgba(18, 22, 20, 0.1); border-radius: 0.6em; }
.nx-menu__item { padding: 0.35em 0.6em; border-radius: 0.4em; white-space: nowrap; }
.nx-menu--stages { position: absolute; top: calc(100% + 0.3em); left: 0; width: 16em; z-index: 2; }
.nx-menu--stages .nx-menu__item { display: flex; align-items: center; gap: 0.5em; }
.nx-menu--stages .nx-menu__item--on { background: #F3F6F4; font-weight: 600; }
.nx-menu__check { margin-left: auto; color: #1FB27A; }
.nx-create { padding: 1.4em 1.6em; border-radius: 1em; box-shadow: 0 2em 5em rgba(0, 0, 0, 0.45); }
/* The action row wraps and its buttons grow above the 2.2em button height
   when text is enlarged, so Cancel never leaves the pane; both native
   actions stay visible. */
.nx-create__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6em; margin-top: 0.4em; padding-top: 0.9em; border-top: 1px solid rgba(18, 22, 20, 0.08); }
.nx-create__foot .nx-btn { height: auto; min-height: 2.2em; max-width: 100%; min-width: 0; padding-top: 0.35em; padding-bottom: 0.35em; white-space: normal; text-align: center; overflow-wrap: anywhere; }

/* Opportunity side panels: one selected rail panel at a time (S4, E2–E4) */
.nx-oppside { display: grid; grid-template-columns: minmax(0, 1fr) 2.6em; gap: 0.5em 0.5em; align-items: start; }
.nx-oppside__title { grid-column: 1 / -1; margin: 0; font-weight: 600; font-size: 1.1em; opacity: 0.55; }
.nx-oppside__panel { box-shadow: 0 2em 5em rgba(0, 0, 0, 0.35); }
.nx-act__list { list-style: none; margin: 0; padding: 0.9em 1em 0.6em; display: flex; flex-direction: column; }
.nx-act__row { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); gap: 0.7em; padding-bottom: 1.1em; }
.nx-act__row--last { padding-bottom: 0.4em; }
.nx-act__col { display: flex; flex-direction: column; align-items: center; }
.nx-act__line { flex: 1; width: 1px; min-height: 0.8em; margin-top: 0.3em; background: rgba(18, 22, 20, 0.14); }
.nx-act__head { display: flex; align-items: baseline; gap: 0.4em; flex-wrap: wrap; padding-top: 0.2em; }
.nx-act__time { margin-left: auto; font-size: 0.82em; color: #6B716E; white-space: nowrap; }
.nx-appts__tabs { padding: 0 1em 0.6em; }
.nx-appts__tabs .nx-seg { display: flex; }
.nx-appts__tabs .nx-seg > span { flex: 1; justify-content: center; }

/* Sales card 4 — filters beside the narrowed Contacted column */
.nx-filters { display: grid; grid-template-columns: 17em minmax(0, 1fr); gap: 1.2em; align-items: start; }
.nx-filters__panel { overflow: hidden; }
.nx-filters__top { display: flex; justify-content: space-between; padding: 0.7em 1em; border-bottom: 1px solid rgba(18, 22, 20, 0.08); }
.nx-filters__row { display: flex; flex-direction: column; gap: 0.3em; padding: 0.7em 1em; border-bottom: 1px solid rgba(18, 22, 20, 0.08); }
.nx-filters__row--on .nx-field__cell { box-shadow: inset 0 0 0 1px #1FB27A; }
.nx-col--result { flex: 1 1 auto; opacity: 0.6; }

/* ----- Variants (display sizes) ----------------------------------------- */
/* Dark card stages: the list and the detail fields sit on their own white
   surface; panel titles above a side panel read light on the dark card. */
.nx--dark { font-size: 13px; }
.nx--dark .nx__stage { padding: 24px 32px 0; }
.nx--dark .nx-olist { padding: 0.7em 0.9em 0; background: #FFFFFF; border: 1px solid rgba(18, 22, 20, 0.09); border-radius: 0.75em 0.75em 0 0; }
.nx--dark .nx-opp { padding: 1em 1.2em; background: #FFFFFF; border: 1px solid rgba(18, 22, 20, 0.09); border-radius: 0.75em; }
.nx--dark .nx-oppside__title, .nx--phase .nx-oppside__title { color: #F5F5F5; opacity: 0.7; }
.nx--stage .nx__stage { padding-top: 16px; }
.nx--activity .nx__stage, .nx--filters .nx__stage { padding-top: 22px; }
/* Phase panes (Enquiry): the excerpt sits centred in the 1200 pane at a
   17px base, 46em wide (782px), so the single function reads at the size
   of the surrounding copy instead of hugging the left edge. */
.nx--phase { font-size: 17px; height: auto; max-width: 100%; min-width: 0; }
.nx--phase .nx__stage { position: relative; inset: auto; min-width: 0; }
.nx--phase .nx-oppside, .nx--phase .nx-create { width: 46em; max-width: 100%; min-width: 0; margin: 0 auto; }

/* ======================================================================
   Tablet and small desktop (901–1439): fixed columns go fluid.
   ====================================================================== */
@media (max-width: 1439px) {
  .bs-story { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 40px; }
  .bs-story__media { width: 100%; height: auto; aspect-ratio: 782 / 717; }
  .be-hero__group { width: 100%; }
}
@media (max-width: 1199px) {
  /* 901–1199: the centred crop of the wide frame lost the examination-room
     cue at the right; a right-biased anchor moves the frame left while the
     patient's folder keeps its margin (candid-review). */
  .be-hero__photo { object-position: 66% 0%; }
  .bs-benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx--board .nx__stage { padding: 16px 16px 0; }
  .nx--board { font-size: 12.5px; }
  .nx--dark .nx-x { display: none; }
  .nx-ocols, .nx-orow { grid-template-columns: minmax(0, 1.7fr) 8em 5.2em; }
  /* Stage card: one field column so the open menu stays inside the card;
     Value and Assignee are dropped and the stage grows to hold five options. */
  .nx--stage .nx-opp__grid { grid-template-columns: 1fr; }
  .nx--stage .nx-opp__grid .nx-fade { display: none; }
  .bs-card--stage { padding-top: 384px; }
  .bs-card--stage .bs-card__stage { height: 360px; }
  .nx--phase { font-size: 16px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .bs-story { grid-template-columns: 1fr; grid-template-areas: "text" "media" "rows"; row-gap: 48px; }
  .bs-story__media { width: 100%; max-width: 782px; }
  .bs-story__rows { margin-top: 0; }
  .nx-filters { grid-template-columns: 1fr; }
  .nx-col--result { display: none; }
}

/* ======================================================================
   Mobile (≤900), measured at 390×844.
   ====================================================================== */
@media (max-width: 900px) {
  /* Sales hero (shared 90svh canvas), centred; H1 38/39.9 on three
     authored lines. */
  .bs-hero { padding: calc(var(--nav-h) + 24px) 24px calc(var(--nav-h) + 24px); }
  .bs-hero__label { min-height: 19.5px; font-size: 16px; letter-spacing: -0.3px; margin-bottom: 24px; }
  .bs-hero__label img { width: 20px; height: 20px; }
  .bs-hero__title { max-width: 342px; font-size: 38px; line-height: 39.9px; letter-spacing: -1.9px; margin-bottom: 16px; }
  .bs-hero__title .br-desktop { display: none; }
  .bs-hero__title .br-mobile { display: inline; }
  .bs-hero__support { max-width: 342px; }

  /* Story stacks: H2 34/39.1 → intro → board 342×300 → rows. */
  .bs-story { display: flex; flex-direction: column; padding: 84px 24px; }
  .bs-story__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; margin-bottom: 24px; }
  .bs-story__rows { margin-top: 0; }
  .bs-story__row-title { font-size: 20px; line-height: 23px; }
  .bs-story__media { width: 100%; height: 300px; aspect-ratio: auto; margin: 40px 0 48px; }

  /* Benefits and grid at 60/30 and 40/24. */
  .bs-benefits { padding: 60px 30px; }
  .bs-benefits__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .bs-benefits__grid { grid-template-columns: 1fr; gap: 24px; }
  .bs-benefit { min-height: 0; padding: 30px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .bs-grid { padding: 60px 24px 84px; }
  .bs-grid__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; margin-bottom: 40px; }
  .bs-grid__list { grid-template-columns: 1fr; gap: 16px; }
  .bs-card { min-height: 0; padding: 219px 16px 16px; justify-content: flex-start; }
  .bs-card__stage { height: 195.3px; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
  /* Per-card stage heights so each focal control is whole at 342 wide:
     owners = bar, group and three two-line rows (≈230); stage = title,
     Status, Stage and the five-option menu (≈330, ≈350 at 320); filters =
     Status and Owner rows whole, Name fading (≈175). */
  .bs-card--owners { padding-top: 284px; }
  .bs-card--owners .bs-card__stage { height: 260px; -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 90%, transparent 100%); }
  .bs-card--stage { padding-top: 384px; }
  .bs-card--stage .bs-card__stage { height: 360px; -webkit-mask-image: none; mask-image: none; }
  .bs-card--filters { padding-top: 244px; }
  .bs-card--filters .bs-card__stage { height: 220px; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
  /* Activity: both events and their times stay above the fade at 320. */
  .bs-card--activity { padding-top: 254px; }
  .bs-card--activity .bs-card__stage { height: 230px; -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 88%, transparent 100%); }
  .bs-card__title { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; max-width: none; }
  .bs-card__text { max-width: none; }

  /* Enquiry hero (shared 90svh canvas) with the tall candid frame
     (941x1672, hair from 43% of the frame). The media box is at least 800
     tall, so on a 760 canvas the frame renders 450x800 anchored to the
     top: hair at ≈344, hands (≈75%) at ≈600 still in view, only the floor
     cropped. The group starts 100 from the top (nav 48 + 52): three-line
     H1 and three support lines end ≈301 at 390; four support lines end
     ≈323 at 320. Both stay above the heads and below the header. */
  .be-hero { padding: 96px 24px 24px; }
  .be-hero__photo { height: max(100%, 800px); object-position: 50% 0%; }
  .be-hero__title { font-size: 38px; line-height: 39.9px; letter-spacing: -1.9px; margin-bottom: 16px; }
  .be-hero__title .br-desktop { display: none; }
  .be-hero__title .br-mobile { display: inline; }
  .be-hero__support { font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; }

  /* Outcomes 60/30, ruled open tiles 24 apart. */
  .be-outcomes { padding: 60px 30px; }
  .be-outcomes__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .be-outcomes__intro { max-width: none; }
  .be-outcomes__grid { grid-template-columns: 1fr; gap: 24px; }
  .be-outcome { min-height: 0; padding: 30px 0; border-left: 0; border-top: 1px solid rgba(18, 22, 20, 0.12); }
  .be-outcome__text { max-width: none; }

  /* Phases 84/20: H2 34/39.1, a 2 × 2 pill track the full width with
     44px targets, 64 to the step; the shared tracks keep 24 between copy
     and pane. */
  .be-phases { padding: 84px 20px; }
  .be-phases__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .be-phases__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 26px; margin-bottom: 64px; }
  .be-phases__tab { min-height: 44px; padding: 8px 12px; }
  .be-phases__panels { row-gap: 24px; }
  .be-phases__step { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }
  .be-phases__text { margin-top: 16px; }
  .be-phases__pane { padding: 16px; }

  /* Closing 403 at 120/24. */
  .be-closing { min-height: 403px; padding: 120px 24px; }
  .be-closing__content { gap: 32px; }
  .be-closing__title { max-width: 342px; font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }
  .be-closing__links { margin-top: -8px; }

  /* Excerpts recompose at 342: the board shows Consultation arranged and
     the edge of Package discussed; dark cards drop secondary columns. */
  .nx--board { font-size: 12.5px; }
  .nx--board .nx__stage { padding: 14px 14px 0; }
  .nx-board__cols { margin-left: -31.8em; }
  .nx--dark { font-size: 12.5px; }
  .nx--dark .nx__stage { padding: 16px 16px 0; }
  .nx--dark .nx-x { display: none; }
  /* Owner list rows stack: the name on its own line, then owner (with the
     portrait) and value; the column header is dropped. */
  .nx-ocols { display: none; }
  .nx-orow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.3em; }
  .nx-orow__name { grid-column: 1 / -1; }
  .nx-opp__grid { grid-template-columns: 1fr; }
  .nx--stage .nx-opp__grid .nx-fade { display: none; }
  .nx-menu--stages { width: 100%; }
  .nx-filters { grid-template-columns: 1fr; }
  .nx-col--result { display: none; }
  /* Filters: the inactive Stage: All row is cropped so the two selected
     criteria, Status and Owner, are whole; Name recedes into the fade. */
  .nx-filters__top + .nx-filters__row { display: none; }
  .nx--phase { font-size: 12.5px; }
  .nx--phase .nx-x { display: none; }
  .nx-create { padding: 1em 1.1em; }
  .nx-oppside { grid-template-columns: minmax(0, 1fr) 2.4em; }
}

/* Short desktop canvases (≤760 tall): a deliberate composition instead of
   the 1000 photo stage. The type footprint shrinks, the frame is scaled to
   the canvas and anchored at its middle, so the faces sit below the copy
   and the guiding gesture stays above the hero's foot. */
@media (min-width: 901px) and (max-height: 760px) {
  .be-hero { padding-top: calc(var(--strip-h) + var(--nav-h) + 8px); }
  .be-hero__title { font-size: 44px; line-height: 48px; letter-spacing: -2.2px; margin-bottom: 20px; }
  .be-hero__support { font-size: 17px; line-height: 21px; }
  .be-hero__photo { height: 100%; object-position: 50% 50%; }
}

@media (max-width: 359px) {
  /* 320: the tall frame is refitted slightly smaller and lower as one
     composition (750 stage, 24 down) with a right-biased anchor, so the
     gesturing hand stays inside the right edge and the folder inside the
     left (candid-review). */
  .be-hero__photo { top: 24px; height: max(100%, 750px); object-position: 64% 0%; }
  .be-phases__tab { padding: 0 8px; }
  .nx--board, .nx--dark, .nx--phase { font-size: 12px; }
  .nx-oppside .nx-rail { display: none; }
  .nx-oppside { grid-template-columns: 1fr; }
}

/* Neogenic — site completion.
   Scoped styles for the non-benchmark pages and the native excerpts in
   src/pages/native-site.mjs. Loads after pages.css, benchmark.css and
   sales.css and never redefines their rules for the approved pages:
   everything here is keyed to `cp-*` page hooks or to `nx-*` classes that
   exist only in the site excerpts.
     cp-*        page compositions on the approved section families
     nx-* (new)  directory with source, library, Neo
                 composer, flows browse, flow map, rule editor, selected
                 appointment, My tasks */

/* ======================================================================
   Page compositions
   ====================================================================== */

/* Systems story media: the native proof reads at 15px and sits centred in
   the 782×717 box. */
.cp-story__media { background: #F3F3EF; }
.cp-story__media .nx--dark { font-size: 15px; }
.cp-story__media .nx--dark .nx__stage { padding: 40px; display: flex; flex-direction: column; justify-content: center; }

/* Dark grid cards: per-excerpt stage heights so each focal element is
   whole. My tasks: all three entries whole; the entry after the overdue one
   recedes in the lower fade. */
.cp-card--myTasksOverdue { padding-top: 404px; }
.cp-card--myTasksOverdue .bs-card__stage { height: 380px; -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 90%, transparent 100%); }
.cp-card--finnAppointmentDetail { padding-top: 356px; }
.cp-card--finnAppointmentDetail .bs-card__stage { height: 332px; -webkit-mask-image: none; mask-image: none; }
.cp-grid--pair .bs-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Exposed native context labels on dark stages keep their contrast; text
   inside the white panels is unchanged. */
.cp-card .nx--dark .nx-record__head .nx-record__name { color: #F5F5F5; }
.nx--dark .nx-flows > .nx-crumb { color: rgba(245, 245, 245, 0.72); }
.nx--dark .nx-flows > .nx-tabs { border-bottom-color: rgba(255, 255, 255, 0.14); }
.nx--dark .nx-flows > .nx-tabs .nx-tab { color: rgba(245, 245, 245, 0.66); }
.nx--dark .nx-flows > .nx-tabs .nx-tab--on { color: #F5F5F5; border-color: #F5F5F5; }
.nx--dark .nx-apptctx__bar .nx-cal__range { color: #F5F5F5; }

/* Library tabs and the Group by chip share a row that wraps when narrow. */
.nx-lib__bar { flex-wrap: wrap; }

/* Healthcare heroes: candid crops per page, wide frames above 900px. */
.cp-sol-hero picture { display: contents; }
.cp-sol-hero--longevity-clinics .cp-sol-hero__photo { object-position: 50% 20%; }
.cp-sol-hero .sol-hero__shade { background: linear-gradient(180deg, rgba(18, 22, 20, 0.34) 0%, rgba(18, 22, 20, 0.06) 40%, rgba(18, 22, 20, 0.22) 65%, rgba(18, 22, 20, 0.72) 100%); }

/* Editorial reason thumbs on Longevity clinics and the overview: the
   measured slot height is a minimum and the slot grows with its excerpt, so
   a note, list or the longer unsent Neo request is never cut. */
.cp-reasons .sol-reason__media { height: 260px; min-height: 0; background: transparent; }
.cp-reasons .sol-reason__media .nx { height: 100%; margin: 0; background: transparent; font-size: 12px; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.cp-reasons .sol-reason__media .nx__stage { position: relative; padding: 16px 12px 0; }

/* Home: native story cards, native twins, the platform lead line. */
.story--native .story__link { background: #F3F3EF; color: var(--ink); }
.story--native .story__link::after { background: none; }
.story--native .story__tag { color: var(--ink-soft); }
.story__native { position: absolute; left: 24px; right: 24px; top: 128px; bottom: 24px; overflow: hidden; }
.story__native .nx--card { font-size: 13px; }
.story__native .nx--card .nx__stage { padding: 0; }
.twin__stage--native .nx { border-radius: 8px; overflow: hidden; background: transparent; -webkit-mask-image: linear-gradient(180deg, #000 48%, rgba(0, 0, 0, 0.8) 65%, transparent 100%); mask-image: linear-gradient(180deg, #000 48%, rgba(0, 0, 0, 0.8) 65%, transparent 100%); }
.twin__stage--native .nx--card { font-size: 13px; }
.twin__stage--native .nx--card .nx__stage { padding: 20px 24px 0; }
.twin__stage--native .nx--board { font-size: 12.5px; }
.twin__stage--native .nx--board .nx__stage { padding: 16px 16px 0; }
/* Board in the twin: whole stage columns sized to the stage, never a
   negative offset that cuts neighbouring columns. Consultation arranged
   and Package discussed from 1280px; Consultation arranged alone below. */
.twin__stage--native .nx-board__bar { flex-wrap: wrap; gap: 0.4em 0.8em; }
.twin__stage--native .nx-crumb { white-space: normal; }
.twin__stage--native .nx-board__cols { margin-left: 0; }
.twin__stage--native .nx-col { flex: 1 1 0; min-width: 0; }
.twin__stage--native .nx-col:nth-child(-n + 2), .twin__stage--native .nx-col:nth-child(5) { display: none; }
.platform__title { margin-bottom: 20px; }
.platform__lead { max-width: 560px; font-size: 18px; line-height: 24px; color: var(--on-dark-soft); margin-bottom: 32px; }

/* About: the product in the company story, on the approved field. */
.ab-story__stage { position: relative; height: 560.57px; margin-top: 64px; border-radius: 8px; overflow: hidden; background: #0F1A18; }
.ab-story__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ab-story__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 14, 0.3), rgba(13, 16, 14, 0.5)); }
.ab-story__native { position: absolute; left: 48px; right: 48px; top: 64px; bottom: 0; }
.ab-story__native .nx--card .nx__stage { padding: 0; }

/* ======================================================================
   Native excerpts
   ====================================================================== */

/* C1 with Source column */
.nx-cols--src, .nx-drow--src { display: grid; grid-template-columns: minmax(0, 1.3fr) 5.6em 5em minmax(0, 1.5fr); column-gap: 0.6em; align-items: center; }

/* V1 appointment opened from the calendar */
.nx-apptctx { display: flex; flex-direction: column; gap: 0.7em; width: 100%; }
.nx-apptctx__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; opacity: 0.72; }
.nx--apptdetail .nx-appt { padding: 1em 1.2em; }

/* L1 / L2 Library */
.nx-lib { display: flex; flex-direction: column; gap: 0.7em; width: 100%; }
.nx-lib__bar { display: flex; justify-content: space-between; align-items: center; gap: 0.6em; }
.nx-lib__table { padding: 0.3em 0.9em 0.6em; }
.nx-cols--lib, .nx-lrow { display: grid; grid-template-columns: minmax(0, 1.6fr) 7.5em 7.5em 7em; column-gap: 0.6em; align-items: center; }
.nx-cols--lib { padding: 0.4em 0.4em; font-size: 0.82em; color: #6B716E; border-bottom: 1px solid rgba(18, 22, 20, 0.08); }
.nx-lrow { padding: 0.6em 0.4em; border-bottom: 1px solid rgba(18, 22, 20, 0.06); }
.nx-lrow--on { background: #F3F6F4; border-radius: 0.4em; }
.nx-lrow__name { font-weight: 500; }
.nx-lib__price { text-align: right; white-space: nowrap; }
.nx-lib__add { display: flex; align-items: center; gap: 0.3em; padding: 0.7em 0.4em 0; color: #6B716E; }
.nx-lib__group { padding: 0.7em 0.4em 0.3em; font-weight: 600; }
.nx-lib__group.nx-lift { background: #F3F6F4; border-radius: 0.4em; }
.nx-chip--group-by { background: #EEE6FA; color: #5B3E9E; gap: 0.3em; }

/* H1 My tasks */
.nx-panel--mine { width: 100%; }

/* N1 Neo composer */
.nx-neo { display: flex; flex-direction: column; gap: 0.8em; width: 100%; }
.nx-neo__head { display: flex; justify-content: space-between; align-items: center; }
.nx-orb { display: inline-block; width: 1.6em; height: 1.6em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #BFE3D6, #2F6F63 60%, #121614); }
.nx-neo__thread { flex: 1; min-height: 4.5em; display: flex; align-items: center; justify-content: center; color: #6B716E; }
.nx-neo__composer { background: #FFFFFF; border: 1px solid rgba(18, 22, 20, 0.12); border-radius: 1em; padding: 0.9em 1em 0.7em; }
.nx-neo__text { margin: 0 0 0.8em; font-size: 1em; line-height: 1.45; color: #1B1F1D; }
.nx-neo__foot { display: flex; align-items: center; gap: 0.5em; }
.nx-neo__ctl { display: inline-flex; align-items: center; gap: 0.3em; height: 2em; padding: 0 0.6em; border-radius: 999px; border: 1px solid rgba(18, 22, 20, 0.12); color: #3B403D; font-size: 0.9em; white-space: nowrap; }
.nx-neo__ask { background: #F3F6F4; }
.nx-neo__spacer { flex: 1; }
.nx-neo__send { display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #1FB27A; color: #FFFFFF; }
.nx-neo--edge .nx-neo__composer { max-width: 30em; }
.nx--neo-full .nx-neo { max-width: 46em; margin: 0 auto; }

/* A1 Browse */
.nx-flows { display: flex; flex-direction: column; gap: 0.7em; width: 100%; }
.nx-browse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7em; }
.nx-tcard { display: flex; flex-direction: column; gap: 0.5em; padding: 0.9em 1em; }
.nx-tcard__head { display: flex; align-items: center; gap: 0.5em; }
.nx-tcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 0.45em; background: #EEF3F0; color: #2F6F63; flex: 0 0 auto; }

/* A2 Flow map and rule editor */
.nx-flow { display: flex; flex-direction: column; align-items: stretch; gap: 0.1em; padding: 0.9em; border: 1px solid rgba(18, 22, 20, 0.1); border-radius: 1em; background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(12px); width: 100%; }
.nx-flow__label { margin: 0 0 0.5em; font-size: 0.74em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6B716E; }
.nx-flow__card { display: flex; flex-direction: column; gap: 0.15em; padding: 0.7em 0.8em; border-radius: 0.6em; background: #FFFFFF; border: 1px solid rgba(18, 22, 20, 0.1); }
.nx-flow__card--on { background: rgba(191, 227, 214, 0.42); box-shadow: inset 0 0 0 1px var(--verdigris); }
.nx-flow__kind { display: flex; align-items: center; gap: 0.4em; font-size: 0.72em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6B716E; margin-bottom: 0.2em; }
.nx-flow__ring { display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(31, 178, 122, 0.16); color: #1F6B47; }
.nx-flow__ring--then { background: #EEF0EE; color: #3B403D; }
.nx-flow__arrow { align-self: center; color: #9AA39E; line-height: 1; padding: 0.15em 0; }
.nx-flow__add { align-self: center; display: inline-flex; align-items: center; gap: 0.3em; margin-top: 0.5em; padding: 0.3em 0.7em; border: 1px dashed rgba(18, 22, 20, 0.25); border-radius: 0.5em; font-size: 0.82em; color: #6B716E; }
.nx-editor { display: flex; flex-direction: column; gap: 0.8em; width: 100%; }
.nx-editor__head { display: flex; align-items: stretch; gap: 0.5em; flex-wrap: wrap; }
.nx-editor__head .nx-btn { height: auto; min-height: 2.6em; justify-content: center; font-size: 0.86em; padding: 0.45em 0.9em; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(12px); }
.nx-editor__head .nx-btn--primary { background: rgba(16, 185, 129, 0.12); color: #047857; border-color: rgba(16, 185, 129, 0.42); }
.nx-editor__name { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.nx-editor__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0.8em; align-items: start; }
.nx-editor__config { padding: 0.9em; display: flex; flex-direction: column; gap: 0.7em; }
.nx-editor__step { margin: 0.2em 0 0; font-weight: 600; }
.nx-editor__value { font: inherit; line-height: 1.4; padding-block: 0.45em; overflow-wrap: anywhere; }
.nx-editor__config { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(12px); }
.nx-editor .nx-field__cell { background: rgba(255, 255, 255, 0.78); }
.nx-editor .nx-field--focal .nx-field__cell { box-shadow: inset 0 0 0 1px var(--verdigris); }
.nx-flow--side { font-size: 0.9em; }

/* Thumbs (310×195.672): one focal block each */
.nx--thumb .nx-record__head { margin-bottom: 0.4em; }
.nx--thumb .nx-record__body { grid-template-columns: 1fr; }
.nx--thumb .nx-rail, .nx--thumb .nx-composer { display: none; }
.nx--thumb .nx-dir .nx-tabs, .nx--thumb .nx-dir .nx-crumb, .nx--thumb .nx-dir .nx-fade-2 { display: none; }
.nx--thumb .nx-lib .nx-tabs, .nx--thumb .nx-lib .nx-lib__add { display: none; }
.nx--thumb .nx-cols--lib, .nx--thumb .nx-lrow { grid-template-columns: minmax(0, 1fr) 6.8em; }
.nx--thumb .nx-cols--lib > span:nth-child(2), .nx--thumb .nx-cols--lib > span:nth-child(3), .nx--thumb .nx-lrow > span:nth-child(2), .nx--thumb .nx-lrow > span:nth-child(3) { display: none; }
.nx--thumb .nx-neo__head, .nx--thumb .nx-neo__thread { display: none; }
.nx--thumb .nx-neo { width: 100%; }
.nx--thumb .nx-neo--edge .nx-neo__composer { max-width: none; }
.nx--thumb .nx-rel .nx-appts__tabs { display: none; }

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 1199px) {
  .nx-editor__body { grid-template-columns: 1fr; }
  .nx-flow--side { display: none; }
  .cp-reasons .sol-reason__media { min-height: 164px; }
  /* Twin stages below 1280 hold one whole board column. */
  .twin__stage--native .nx-col:nth-child(4) { display: none; }
}
/* Narrow desktop thumbs (260 wide): a directory row keeps name and role on
   one line and its tags beneath, instead of squeezing four columns. */
@media (min-width: 901px) and (max-width: 1199px) {
  .nx--thumb .nx-cols--src { display: none; }
  .nx--thumb .nx-drow--src { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35em; }
  .nx--thumb .nx-drow--src > .nx-m { display: none; }
  .nx--thumb .nx-drow--src .nx-drow__tags { grid-column: 1 / -1; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .cp-story__media .nx--dark { font-size: 13px; }
  .cp-story__media .nx--dark .nx__stage { padding: 24px; }
}
@media (max-width: 900px) {
  .cp-story__media .nx--dark { font-size: 12.5px; }
  .cp-story__media .nx--dark .nx__stage { padding: 16px; justify-content: flex-start; }
  .cp-grid--pair .bs-grid__list { grid-template-columns: 1fr; }
  .cp-card { padding-top: 264px; }
  .cp-card .bs-card__stage { height: 240px; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
  .cp-card--myTasksOverdue { padding-top: 414px; }
  .cp-card--myTasksOverdue .bs-card__stage { height: 390px; -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%); mask-image: linear-gradient(180deg, #000 92%, transparent 100%); }
  /* Grouped services story (Biohacking & performance): every group and row
     whole, growing the media box beyond its 300 minimum. */
  .cp-story__media.cp-story__media--catalogueGrouped { height: auto; min-height: 300px; }
  .cp-story__media--catalogueGrouped .nx { height: auto; }
  .cp-story__media--catalogueGrouped .nx__stage { position: relative; }
  .cp-card--finnAppointmentDetail { padding-top: 344px; }
  .cp-card--finnAppointmentDetail .bs-card__stage { height: 320px; -webkit-mask-image: none; mask-image: none; }
  /* Portrait frames: copy sits low, clear of faces; the phone action and
     the room context stay in view. */
  .cp-sol-hero--longevity-clinics .cp-sol-hero__photo { object-position: 38% 50%; }
  .cp-sol-hero .sol-hero__shade { background: linear-gradient(180deg, rgba(18, 22, 20, 0.3) 0%, rgba(18, 22, 20, 0) 28%, rgba(18, 22, 20, 0.08) 50%, rgba(18, 22, 20, 0.7) 76%, rgba(18, 22, 20, 0.82) 100%); }
  .cp-reasons .sol-reason__media { min-height: 215.875px; }
  .story__native { left: 16px; right: 16px; top: 96px; bottom: 16px; }
  .story__native .nx--card { font-size: 12px; }
  .twin__stage--native .nx--card .nx__stage { padding: 12px 14px 0; }
  .twin__stage--native .nx--board .nx__stage { padding: 12px 12px 0; }
  .platform__lead { font-size: 16px; line-height: 22px; margin-bottom: 24px; }
  .ab-story__stage { height: 324.54px; }
  .ab-story__native { left: 16px; right: 16px; top: 32px; }
  .nx-cols--src, .nx-drow--src { grid-template-columns: minmax(0, 1.3fr) 5.6em minmax(0, 1.4fr); }
  .nx-cols--lib, .nx-lrow { grid-template-columns: minmax(0, 1.6fr) 7em 6em; }
  .nx-browse { grid-template-columns: 1fr; }
  .nx-editor__body { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
  .nx-cols--lib, .nx-lrow { grid-template-columns: minmax(0, 1.4fr) 6.4em; }
  .nx-cols--lib > span:nth-child(3), .nx-lrow > span:nth-child(3) { display: none; }
}

/* Homepage twins: fewer details, spacious native fragments and a true alpha fade. */
.twin__stage--native .nx-board__cols { gap: 20px; }
.twin__stage--native .nx-col { background: transparent; }
.twin__stage--native .nx-col__head { padding: 16px; margin-bottom: 16px; }
.twin__stage--native .nx-col__body { gap: 16px; }
.twin__stage--native .nx-oc { padding: 18px 16px; }
.twin__stage--native .nx-col__name > .nx-m,
.twin__stage--native .nx-col__sum,
.twin__stage--native .nx-oc__meta > .nx-m:last-child,
.twin__stage--native .nx-panel__actions,
.twin__stage--native .nx-panel__title > .nx-m,
.twin__stage--native .nx-entry__status,
.twin__stage--native .nx-entry > .nx-m:not(.nx-entry__time):not(.nx-entry__patient),
.twin__stage--native .nx-time-full { display: none; }
.twin__stage--native .nx-time-short { display: inline; }
.twin__stage--native .nx-panel__head { padding: 18px; }
.twin__stage--native .nx-panel__body { padding: 12px; gap: 16px; }
.twin__stage--native .nx-entry { padding: 18px 14px; gap: 8px; }
.twin__stage--native .nx-panel.nx-fade { opacity: 1; }
.twin__stage--native .nx-twocol { gap: 20px; }

/* Longevity: aligned hero action and equally sized, quiet journey excerpts. */
.cp-sol-hero .sol-hero__actions { display: flex; margin-top: 20px; }
.cp-reasons .nx-opp__grid { grid-template-columns: 1fr; gap: 14px; }
.cp-reasons .nx-opp__section, .cp-reasons .nx-opp__grid > .nx-field:not(.nx-field--focal), .cp-reasons .nx-menu--stages, .cp-reasons .nx-task-context, .cp-reasons .nx-cols, .cp-reasons .nx-trow__pri, .cp-reasons .nx-trow__due, .cp-reasons .nx-pkg > .nx-crumb, .cp-reasons .nx-cal__axis, .cp-reasons .nx-cal__dh { display: none; }
.cp-reasons .nx-opp { padding: 18px; }
.cp-reasons .nx-trow { grid-template-columns: 18px minmax(0, 1fr) auto; padding: 16px 8px; }
.cp-reasons .nx-cal__filters { gap: 14px; }
.cp-reasons .nx-cal__grid { grid-template-columns: 1fr; }
.cp-reasons .nx-table__head, .cp-reasons .nx-table__row { grid-template-columns: minmax(0, 1fr) 70px; gap: 12px; }
.cp-reasons .nx-table__head > span:nth-child(2), .cp-reasons .nx-table__head > span:nth-child(3), .cp-reasons .nx-table__head > span:nth-child(4), .cp-reasons .nx-table__row > span:nth-child(2), .cp-reasons .nx-table__row > span:nth-child(3), .cp-reasons .nx-table__row > span:nth-child(4) { display: none; }
.cp-reasons .nx-table__row { padding-block: 16px; }
.cp-reasons .nx-sum { margin-top: 18px; }
@media (max-width: 900px) { .cp-sol-hero .sol-hero__actions { margin-top: 26px; } .cp-reasons .sol-reason__media { height: 260px; min-height: 0; } }

/* Keep the enrolment decision visible in the first journey excerpt. */
.cp-reasons .sol-reason--enrolment .nx-menu--stages { display: block; position: relative; top: auto; width: 100%; margin-top: 8px; }
.cp-reasons .sol-reason--enrolment .nx-menu__item:not(.nx-menu__item--on) { display: none; }
.cp-reasons .sol-reason--enrolment .nx-menu__item--on { padding: 14px 12px; }
.cp-reasons .sol-reason--enrolment .nx-opp__title { margin-bottom: 20px; }

/* Keep the routine name readable above its controls on narrow phones. */
@media (max-width: 600px) { .nx-editor__name { flex-basis: 100%; padding-block: 0.45em; } }

/* White glass needs a light canvas behind the native editor. */
.pn-detail__slot:has(.nx--editor) { background: #F5F5F5; }
.pn-detail__slot > .nx--editor { background: transparent; }

/* Neogenic — Systems, Agents and Gateway platform templates (14 September 2026).
   Sales & Marketing  (/platform/sales-marketing/)  ← Wonderful /systems
   Billing & Payments (/platform/billing-payments/) ← Wonderful /systems
   Neo                (/platform/neo-assistant/)    ← Wonderful /agents
   Automations        (/platform/automations/)      ← Wonderful /agents
   Patient Portal     (/platform/patient-portal/)   ← Wonderful /ai-gateway
   Loaded only by those five pages, after pages.css (related cards, the
   cap-detail accordion) and, where the page uses them, sales.css (the
   optical field hero), benchmark.css (Gateway `bw-*`, the native `nx-*`
   base) and completion.css (flow excerpts). Numbers are CSS pixels at 1440
   from the owner's live captures (platform-template-corrections/
   systems-*.png, agents-*.png; card-menu-motion/wonderful-pair-*.png).
     pt-*  shared: reserved product frames (Sales & Marketing, Billing &
           Payments), hero support measure
     pm-*  Systems pages (Sales & Marketing, Billing & Payments)
     pn-*  Agents pages (Neo, Automations)
     pp-*  Patient Portal additions to the Gateway family
   Neo, Automations and Patient Portal product compositions: see
   platform-mockups.css. */

/* ======================================================================
   Reserved product frame (src/pages/product/reserved.mjs): a quiet
   outlined frame on a brand tint with the intended view's name. Parents
   position it and set the outline insets.
   ====================================================================== */
.pt-frame { --pt-top: 24px; --pt-side: 24px; --pt-bottom: 24px; position: absolute; inset: 0; overflow: hidden; }
.pt-frame::before { content: ""; position: absolute; inset: var(--pt-top) var(--pt-side) var(--pt-bottom); border: 1px solid; border-radius: 10px; }
.pt-frame__label { position: absolute; top: calc(var(--pt-top) + 18px); left: calc(var(--pt-side) + 20px); right: calc(var(--pt-side) + 20px); font-size: 13px; line-height: 16px; letter-spacing: 0.02em; }
.pt-frame--light {
  background:
    radial-gradient(80% 70% at 78% 18%, rgba(191, 227, 214, 0.5), transparent 70%),
    radial-gradient(60% 55% at 12% 92%, rgba(201, 134, 90, 0.1), transparent 70%),
    #F3F3EF;
  color: rgba(18, 22, 20, 0.58);
}
.pt-frame--light::before { border-color: rgba(18, 22, 20, 0.12); background: rgba(255, 255, 255, 0.4); }
.pt-frame--dark { background: radial-gradient(70% 60% at 30% 35%, rgba(47, 111, 99, 0.36), transparent 70%), #141917; color: rgba(245, 245, 245, 0.62); }
.pt-frame--dark::before { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); }

/* Hero: the shared field canvas (sales.css) with the 650 support measure. */
@media (min-width: 901px) {
  .pt-hero .bs-hero__support { max-width: 650px; }
}

/* Section headings 48/50.4. */
.pm-story__title, .pm-benefits__title, .pm-systems__title, .pm-journey__title,
.pn-audiences__title, .pn-scenarios__title, .pn-tiles__title {
  font-weight: var(--display-weight);
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -1.92px;
  padding-bottom: 3px;
  overflow-wrap: anywhere;
}
.pm-links { margin-top: 16px; font-size: 14px; line-height: 21px; }
.pm-links a { text-decoration: underline; text-underline-offset: 3px; }
/* Enlarged text: a long word wraps inside its column instead of widening
   the page. */
.pt-hero .bs-hero__support, .pm-story__intro, .pm-story__row-title, .pm-story__row-text, .pm-links,
.pm-benefits__intro, .pm-benefit__text, .pm-journey__text, .pn-card__text, .pn-scenario__label,
.pn-tiles__intro, .pn-detail .cap-row__label, .pn-detail .cap-row__body,
.pp-hero .bw-hero__title, .pp-hero .bw-hero__support, .pp-grid .bw-card__title, .pp-grid .bw-card__text { overflow-wrap: anywhere; }
/* The shared related title on the field-hero pages (siblings of the hero). */
.pt-hero ~ .cap-related .cap-related__title { overflow-wrap: anywhere; }

/* ======================================================================
   Systems 2. White split, 120/60: text 478 | 60 | frame 782×717.
   Heading → 32 → intro 16/22 → three static ruled rows (title 20/24 → 14
   → body 16/22), every body visible; the rows settle at the frame foot.
   ====================================================================== */
.pm-story { display: grid; grid-template-columns: 478px 782px; justify-content: space-between; align-items: stretch; padding: 120px var(--gutter); background: #FFFFFF; color: var(--ink); }
.pm-story__text { display: flex; flex-direction: column; min-width: 0; }
.pm-story__title { max-width: 478px; margin-bottom: 32px; }
.pm-story__intro { max-width: 400px; font-size: 16px; line-height: 22px; letter-spacing: -0.32px; }
.pm-story__rows { margin: auto 0 0; padding: 60px 0 0; list-style: none; }
.pm-story__row { padding: 24px 0; border-top: 1px solid rgba(18, 22, 20, 0.12); }
.pm-story__row:last-child { padding-bottom: 0; }
.pm-story__row-title { font-weight: 300; font-size: 20px; line-height: 24px; letter-spacing: -0.6px; }
.pm-story__row-text { max-width: 430px; margin-top: 14px; font-size: 16px; line-height: 22px; letter-spacing: -0.32px; color: #666B68; }
.pm-story .pm-links { color: var(--ink); }
.pm-story__media { position: relative; align-self: start; width: 100%; height: 717px; border-radius: 8px; overflow: hidden; }

/* 3. Black benefits, 120/60: heading → 24 → intro → 60 → three ruled
   columns (32 inset, 32 icon, 60 → title 20/23, 24 → body 14/21). */
.pm-benefits { padding: 120px var(--gutter); background: #080808; color: #F5F5F5; }
.pm-benefits__title { margin-bottom: 24px; }
.pm-benefits__intro { max-width: 600px; margin-bottom: 60px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; color: rgba(255, 255, 255, 0.66); }
.pm-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.pm-benefit { min-width: 0; min-height: 266px; padding: 32px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.pm-benefit__icon { display: block; width: 32px; height: 32px; color: #F5F5F5; }
.pm-benefit__title { margin-top: 60px; font-weight: 300; font-size: 20px; line-height: 23px; letter-spacing: -1px; overflow-wrap: anywhere; }
.pm-benefit__text { max-width: 360px; margin-top: 24px; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: rgba(255, 255, 255, 0.64); }

/* 4. Black product grid after a gutter rule: heading → 80 → four 648×452
   cards, 24 gaps. The frame fills the upper card and fades before the
   24px title at the lower left. */
.pm-systems { padding: 0 var(--gutter) 120px; background: #080808; color: #F5F5F5; }
.pm-systems::before { content: ""; display: block; height: 1px; margin-bottom: 120px; background: rgba(255, 255, 255, 0.14); }
.pm-systems__title { margin-bottom: 80px; }
.pm-systems__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
/* Stage and title are in normal flow: the 452 card is a minimum, so an
   enlarged title grows the card instead of covering the frame. */
.pm-card { display: flex; flex-direction: column; min-width: 0; min-height: 452px; border-radius: 12px; overflow: hidden; background: #121212; }
.pm-card__stage { position: relative; flex: 1 1 auto; min-height: 220px; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 52%, transparent 100%); }
.pm-card .pt-frame { --pt-top: 52px; --pt-side: 76px; --pt-bottom: 0px; background: none; }
.pm-card__title { padding: 12px 32px 40px; font-weight: 300; font-size: 24px; line-height: 28.8px; letter-spacing: -0.72px; color: #FAFAFA; overflow-wrap: anywhere; }

/* 5. White expanding pair, 120 inset: heading (701) → 64 → two cards,
   10 gap, 542 tall (sections.css `.expand-pair`, public/scripts/pair.js).
   The wide 720 card: its own frame above, the title 32/36.8 and body
   17/23.5 anchored 32 from the foot on the deep tint. The narrow 470 card:
   pale #F3F3F3 with its title alone 32 from the foot; frame and body fade
   and fold. Width, tone and fold move together. Stage and body are in
   normal flow: 542 is a minimum, so enlarged copy grows the row instead of
   covering the frame. Below 1101 both cards stack whole on the deep tint. */
.pm-journey { padding: 120px; background: #FFFFFF; color: var(--ink); }
.pm-journey__title { max-width: 701px; margin-bottom: 64px; }
.pm-journey__grid { --pair-wide: 720; --pair-narrow: 470; gap: 10px; }
.pm-journey__card { position: relative; min-width: 0; min-height: 542px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: #121614; color: #FAFAFA; }
.pm-journey__stage { position: relative; flex: 1 1 auto; min-height: 200px; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }
.pm-journey__stage .pt-frame { --pt-top: 32px; --pt-side: 32px; --pt-bottom: 0px; }
.pm-journey__body { position: relative; max-width: 500px; padding: 16px 32px 32px; }
.pm-journey__card-title { font-weight: 300; font-size: 32px; line-height: 36.8px; letter-spacing: -1.28px; overflow-wrap: anywhere; }
.pm-journey__text { margin-top: 16px; font-size: 17px; line-height: 23.5px; letter-spacing: -0.34px; color: rgba(250, 250, 250, 0.8); }
.pm-journey .pm-links { color: rgba(250, 250, 250, 0.88); }
@media (min-width: 1101px) {
  .pm-journey__card[data-active="false"] { background: #F3F3F3; color: var(--ink); }
}

/* ======================================================================
   Agents 2. White, 120/60: heading → 80 → three 429×529 cards, 16 gaps;
   the hero field becomes a soft wash behind the media, fading into one
   mist-white surface; title 24 and body 16 below.
   ====================================================================== */
.pn-audiences { padding: 120px var(--gutter); background: #FFFFFF; color: var(--ink); }
.pn-audiences__title { margin-bottom: 80px; }
.pn-audiences__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pn-card { display: flex; flex-direction: column; min-width: 0; min-height: 529px; border-radius: 8px; overflow: hidden; background: #F4F6F5; color: var(--ink); }
.pn-card__stage { position: relative; flex: 1 1 auto; min-height: 220px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.pn-card__field { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); max-width: none; object-fit: cover; opacity: 0.22; filter: blur(24px); pointer-events: none; }
.pn-card__body { padding: 0 20px 24px; }
.pn-card__title { font-weight: 300; font-size: 24px; line-height: 28.8px; letter-spacing: -0.72px; overflow-wrap: anywhere; }
.pn-card__text { margin-top: 12px; font-size: 16px; line-height: 22px; letter-spacing: -0.32px; color: rgba(18, 22, 20, 0.74); }

/* 3. Accordion on the shared cap-detail section (pages.css): the heading
   (506), five rows and one fixed 754×622.688 slot per row. The rows keep
   room for the longest open body, so the section does not change height
   between rows. */
.pn-detail .cap-detail__title { max-width: 506px; overflow-wrap: anywhere; }
.pn-detail__slot { position: relative; aspect-ratio: 754 / 622.688; border-radius: 8px; overflow: hidden; background: #141917; }
@media (min-width: 1440px) {
  .pn-detail .cap-rows { min-height: 520px; }
}
@media (min-width: 1101px) and (max-width: 1439px) {
  .pn-detail .cap-rows { min-height: 580px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .pn-detail .cap-rows { min-height: 700px; }
}

/* 4. Black rail, 120 top and bottom: heading and the previous/next controls
   → 80 → 583 squares, 16 gaps, scrolling inside the section from the 60
   gutter. Label and title at the top left; the media below the title. */
.pn-scenarios { padding: 120px 0; background: #000000; color: #FAFAFA; overflow: hidden; }
.pn-scenarios__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 var(--gutter) 80px; }
.pn-scenarios__title { min-width: 0; max-width: 924px; }
.pn-scenarios__controls { display: flex; flex: 0 0 auto; gap: 8px; }
.pn-scenarios__rail { display: flex; align-items: stretch; gap: 16px; margin: 0; padding: 0 0 0 var(--gutter); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; }
.pn-scenarios__rail::-webkit-scrollbar { display: none; }
/* End spacer: the last card stops at the right gutter. */
.pn-scenarios__rail::after { content: ""; flex: 0 0 calc(var(--gutter) - 16px); }
.pn-scenarios__rail:focus-visible { outline: 2px solid var(--emerald); outline-offset: -2px; }
/* Label, title and media stack in normal flow on the card's own tint: the
   583 square is a minimum and the rail stretches every card to the tallest,
   so enlarged titles never overlap or clip. */
.pn-scenario { display: flex; flex-direction: column; flex: 0 0 583px; min-height: 583px; padding: 32px; border-radius: 8px; overflow: hidden; background: radial-gradient(70% 60% at 30% 35%, rgba(47, 111, 99, 0.3), transparent 70%), #0F1513; scroll-snap-align: start; }
.pn-scenario__label { font-size: 13px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(250, 250, 250, 0.7); }
.pn-scenario__title { max-width: 486px; margin-top: 12px; font-weight: 300; font-size: 32px; line-height: 36.8px; letter-spacing: -1.28px; overflow-wrap: anywhere; }
.pn-scenario__stage { position: relative; flex: 1 1 auto; min-height: 240px; margin-top: 40px; border-radius: 10px; overflow: hidden; }

/* 5. Light ruled grid, 120/60: heading → 24 → intro → 72 → four columns
   (left rule, 32 inset, 32 icon, 60 → title 20/23, 22 → body 14/21). */
.pn-tiles { padding: 120px var(--gutter); background: #FAFAFA; color: var(--ink); }
.pn-tiles__title { margin-bottom: 24px; }
.pn-tiles__intro { max-width: 560px; margin-bottom: 72px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.34px; color: var(--ink-soft); }
.pn-tiles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.pn-tile { min-width: 0; min-height: 250px; padding: 32px 24px 32px 32px; border-left: 1px solid rgba(18, 22, 20, 0.12); }
.pn-tile__icon { display: block; width: 32px; height: 32px; color: var(--ink); }
.pn-tile__title { margin-top: 60px; font-weight: 300; font-size: 20px; line-height: 23px; letter-spacing: -1px; overflow-wrap: anywhere; }
.pn-tile__text { margin-top: 22px; font-size: 14px; line-height: 21px; color: var(--ink-soft); overflow-wrap: anywhere; }

/* Native product views in Agents positions (Automations): the actual
   clinic component (src/pages/native-site.mjs) fills the same box a
   reserved frame would, at a reading size. Flow maps keep their reading
   width, centred. */
.pn-card__stage > .nx, .pn-detail__slot > .nx, .pn-scenario__stage > .nx { position: absolute; inset: 0; }
.pn-card__stage > .nx .nx__stage { padding: 40px 32px 0; }
.pn-detail__slot > .nx { font-size: 15px; }
.pn-detail__slot > .nx .nx__stage { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.pn-scenario__stage > .nx { font-size: 14px; }
.pn-scenario__stage > .nx .nx__stage { display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.pn-card__stage .nx-flow, .pn-scenario__stage .nx-flow { max-width: 26em; margin: 0 auto; }

/* ======================================================================
   Patient Portal on the Gateway family. The Workspace hero, intro, card
   and benefits rules (benchmark.css `bw-*`) apply unchanged. The hero's
   application view rises from the field and fades into the white intro,
   as the Workspace view does; the portal compositions and their insets are
   in platform-mockups.css.
   ====================================================================== */
.pp-hero__product { border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 30px 80px rgba(13, 16, 14, 0.24); -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 52%, transparent 100%); }
.pp-grid .pm-links { color: var(--ink); }

/* ======================================================================
   Tablet and small desktop
   ====================================================================== */
@media (max-width: 1439px) {
  .pm-story { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 40px; }
  .pm-story__media { height: auto; aspect-ratio: 782 / 717; }
  .pm-journey { padding: 120px var(--gutter); }
}
@media (min-width: 1101px) and (max-width: 1439px) {
  .pn-detail__slot > .nx { font-size: 13px; }
  .pn-detail__slot > .nx .nx__stage { padding: 32px; }
}
@media (max-width: 1199px) {
  .pm-card .pt-frame { --pt-side: 40px; }
  .pn-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .pm-story { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .pm-story__rows { margin-top: 0; }
  .pm-story__media { max-width: 782px; }
  .pm-journey__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pm-journey__card { min-height: 480px; }
  .pn-audiences__grid { grid-template-columns: minmax(0, 1fr); }
  .pn-card { min-height: 0; }
  .pn-card__stage { flex: 0 0 auto; height: 260px; }
  /* Narrow accordion slot: the Browse catalogue shows two whole templates. */
  .pn-detail__slot > .nx { font-size: 12.5px; }
  .pn-detail__slot > .nx .nx__stage { padding: 20px; }
  .pn-detail__slot .nx-browse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-detail__slot .nx-browse > :nth-child(3) { display: none; }
}

/* ======================================================================
   Mobile (≤900)
   ====================================================================== */
@media (max-width: 900px) {
  .pm-story__title, .pm-benefits__title, .pm-systems__title, .pm-journey__title,
  .pn-audiences__title, .pn-scenarios__title, .pn-tiles__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }

  .pm-story { padding: 84px 24px; row-gap: 40px; }
  .pm-story__rows { padding-top: 40px; }
  .pm-story__media { height: 300px; aspect-ratio: auto; }

  .pm-benefits { padding: 60px 24px; }
  .pm-benefits__intro { margin-bottom: 40px; }
  .pm-benefits__grid { grid-template-columns: minmax(0, 1fr); }
  .pm-benefit { min-height: 0; padding: 30px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .pm-benefit__title { margin-top: 40px; }

  .pm-systems { padding: 0 24px 84px; }
  .pm-systems::before { margin-bottom: 60px; }
  .pm-systems__title { margin-bottom: 40px; }
  .pm-systems__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pm-card { min-height: 320px; }
  .pm-card__stage { min-height: 150px; }
  .pm-card .pt-frame { --pt-top: 24px; --pt-side: 24px; }
  .pm-card__title { padding: 8px 20px 24px; font-size: 22px; line-height: 26.4px; }

  .pm-journey { padding: 84px 24px; }
  .pm-journey__title { margin-bottom: 40px; }
  .pm-journey__card { min-height: 420px; }
  .pm-journey__stage { min-height: 160px; }
  .pm-journey__stage .pt-frame { --pt-top: 20px; --pt-side: 20px; }
  .pm-journey__body { padding: 12px 24px 24px; }
  .pm-journey__card-title { font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }
  .pm-journey__text { font-size: 16px; line-height: 22px; }

  .pn-audiences { padding: 84px 24px; }
  .pn-audiences__title { margin-bottom: 40px; }
  .pn-card__stage { height: 220px; }
  .pn-card__stage > .nx .nx__stage { padding: 24px 20px 0; }

  /* Stacked accordion rows (pages.css): a shrinkable single column (the
     shared 1fr track would widen to a long enlarged word), five rows, the
     last without the body gap, and the first slot at the phone ratio. */
  .pn-detail { grid-template-columns: minmax(0, 1fr); }
  .pn-detail .cap-detail__text, .pn-detail .cap-detail__media { min-width: 0; }
  .pn-detail .cap-row:nth-child(4) .cap-row__body { padding-bottom: 32px; }
  .pn-detail .cap-row:last-child .cap-row__body { padding-bottom: 0; }
  .pn-detail__slot { aspect-ratio: 342 / 279.172; }

  /* Rail: the controls step back; the rail keeps touch scroll and the
     arrow keys (carousel.js). */
  .pn-scenarios { padding: 64px 0 84px; }
  .pn-scenarios__head { padding: 0 24px 40px; }
  .pn-scenarios__controls { display: none; }
  .pn-scenarios__rail { padding-left: 24px; scroll-padding-left: 24px; }
  .pn-scenarios__rail::after { flex-basis: 8px; }
  .pn-scenario { flex-basis: min(300px, calc(100vw - 48px)); min-height: 440px; padding: 20px; }
  .pn-scenario__title { margin-top: 8px; font-size: 24px; line-height: 27.6px; letter-spacing: -0.96px; }
  .pn-scenario__stage { min-height: 160px; margin-top: 24px; }
  .pn-scenario__stage > .nx { font-size: 12px; }
  .pn-scenario__stage > .nx .nx__stage { padding: 12px; }

  .pn-tiles { padding: 60px 24px; }
  .pn-tiles__intro { margin-bottom: 48px; font-size: 17px; line-height: 21.76px; letter-spacing: -0.51px; }
  .pn-tile { min-height: 0; padding: 32px 0; border-left: 0; border-top: 1px solid rgba(18, 22, 20, 0.12); }
  .pn-tile__title { margin-top: 40px; }

  .pp-hero__product { border-radius: 10px 10px 0 0; }
}
@media (max-width: 560px) {
  .pn-tiles__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Neogenic — editorial product compositions (14 September 2026).
   Automations (/platform/automations/), Neo (/platform/neo-assistant/) and
   Patient Portal (/platform/patient-portal/) only, loaded last, after
   platform-template.css. Markup: src/pages/product/mockups/*.mjs. Sales &
   Marketing and Billing & Payments never load this file. Billing has
   its own native excerpts in billing-views.css.
     mk-*     composition atoms, sized in em from each position's base
     pp-soon  the Patient Portal Coming Soon status in the hero label
   Template: pale grounds with precise white interface surfaces, thin grey
   borders and soft shadows; a near-black variant with translucent glass
   beside the white surfaces; teal and blue semantic highlights; rows recede
   toward the foot. Each figure is a size container (`mk`), so a composition
   recomposes on its own stage size at every page width:
     .mk-hm  hidden on a stage 560 wide or narrower
     .mk-hn  hidden at 400 wide or narrower
     .mk-hx  hidden at 300 wide or narrower
     .mk-hs  hidden on a stage 460 tall or shorter
     .mk-ht  hidden at 270 tall or shorter */

/* ======================================================================
   Tokens: light on pale grounds and inside white surfaces, dark on
   near-black grounds.
   ====================================================================== */
.mk, .mk-s {
  --mk-ink: #1B1F1D;
  --mk-mut: #6B716E;
  --mk-line: rgba(18, 22, 20, 0.08);
  --mk-glass: rgba(255, 255, 255, 0.62);
  --mk-glass-line: rgba(18, 22, 20, 0.07);
  --mk-grey: #EEF0EE;
  --mk-grey-ink: #3B403D;
  --mk-teal: #E1F3EC;
  --mk-teal-ink: #1B6B50;
  --mk-blue: #E4EDFB;
  --mk-blue-ink: #2757A5;
  --mk-amber: #FBF0D9;
  --mk-amber-ink: #7A5100;
  --mk-off: #D9DCDA;
  --mk-soft: #F4F5F4;
  --mk-link: rgba(18, 22, 20, 0.2);
}
.mk--dark {
  --mk-ink: #F2F4F3;
  --mk-mut: rgba(242, 244, 243, 0.64);
  --mk-line: rgba(255, 255, 255, 0.1);
  --mk-glass: rgba(255, 255, 255, 0.055);
  --mk-glass-line: rgba(255, 255, 255, 0.11);
  --mk-grey: rgba(255, 255, 255, 0.1);
  --mk-grey-ink: #E3E8E6;
  --mk-teal: rgba(76, 201, 158, 0.18);
  --mk-teal-ink: #9BE3C8;
  --mk-blue: rgba(120, 165, 240, 0.2);
  --mk-blue-ink: #BCD1F7;
  --mk-amber: rgba(240, 190, 90, 0.18);
  --mk-amber-ink: #F1D398;
  --mk-off: rgba(255, 255, 255, 0.22);
  --mk-soft: rgba(255, 255, 255, 0.05);
  --mk-link: rgba(255, 255, 255, 0.26);
}

/* ======================================================================
   Figure, stage and body
   ====================================================================== */
.mk {
  --mk-max: none;
  --mk-brand: #2E5E5A;
  position: absolute;
  inset: 0;
  margin: 0;
  container: mk / size;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  color: var(--mk-ink);
}
.mk p, .mk ol, .mk ul { margin: 0; }
.mk b { font-weight: 600; }
.mk__stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; overflow-wrap: break-word; }
.mk__body { display: flex; flex-direction: column; gap: 0.75em; width: 100%; max-width: var(--mk-max); min-height: 0; }

/* ======================================================================
   Atoms
   ====================================================================== */
.mk-i { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.mk-i--sm { width: 1em; height: 1em; }
.mk-i--xs { width: 0.85em; height: 0.85em; }
.mk-m { font-size: 0.88em; color: var(--mk-mut); }
.mk-k { font-size: 0.78em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-mut); }
.mk-t { white-space: nowrap; }
.mk-end { margin-left: auto; }
.mk-grow { flex: 1 1 auto; min-width: 0; }
.mk-r1 { opacity: 0.72; }
.mk-r2 { opacity: 0.42; }

.mk-s { min-width: 0; background: #FFFFFF; border: 1px solid rgba(18, 22, 20, 0.09); border-radius: 0.8em; box-shadow: 0 1px 2px rgba(18, 22, 20, 0.04), 0 0.8em 2em rgba(18, 22, 20, 0.06); color: var(--mk-ink); }
.mk-lift { box-shadow: 0 1px 2px rgba(18, 22, 20, 0.05), 0 1.2em 3em rgba(18, 22, 20, 0.14); }
.mk--dark .mk-lift { box-shadow: 0 1.4em 3.2em rgba(0, 0, 0, 0.42); }
.mk-g { min-width: 0; background: var(--mk-glass); border: 1px solid var(--mk-glass-line); border-radius: 0.8em; color: var(--mk-ink); }
.mk-pad { padding: 0.85em 0.95em; }
.mk-stack { display: flex; flex-direction: column; gap: 0.55em; min-width: 0; }

.mk-head { display: flex; align-items: center; gap: 0.55em; min-width: 0; }
.mk-head__title { flex: 1 1 auto; min-width: 0; }
.mk-wrap { flex-wrap: wrap; row-gap: 0.4em; }
.mk-li__body { display: flex; flex-direction: column; gap: 0.1em; flex: 1 1 auto; min-width: 0; }
.mk-li { display: flex; align-items: center; gap: 0.7em; min-width: 0; }
.mk-li--on { background: #EFF6F3; }

/* Edge-to-edge lists inside a surface: a ruled head, then ruled rows. */
.mk-list { display: flex; flex: 0 0 auto; flex-direction: column; overflow: hidden; }
.mk-list > * { padding: 0.7em 0.95em; }
.mk-list > .mk-head { padding: 0.75em 0.95em; border-bottom: 1px solid var(--mk-line); }
.mk-list > :not(.mk-head) + :not(.mk-head) { border-top: 1px solid var(--mk-line); }
.mk-flat > * { padding: 0.55em 0; }

.mk-chip { display: inline-flex; flex: 0 0 auto; align-items: center; height: 1.8em; padding: 0 0.65em; border-radius: 999px; font-size: 0.82em; font-weight: 500; white-space: nowrap; background: var(--mk-grey); color: var(--mk-grey-ink); }
.mk-chip--teal { background: var(--mk-teal); color: var(--mk-teal-ink); }
.mk-chip--blue { background: var(--mk-blue); color: var(--mk-blue-ink); }
.mk-chip--amber { background: var(--mk-amber); color: var(--mk-amber-ink); }
.mk-chip--line { background: transparent; box-shadow: inset 0 0 0 1px var(--mk-off); color: var(--mk-ink); }

.mk-ring { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 0.6em; background: var(--mk-grey); color: var(--mk-grey-ink); }
.mk-ring--teal { background: var(--mk-teal); color: var(--mk-teal-ink); }
.mk-ring--blue { background: var(--mk-blue); color: var(--mk-blue-ink); }
.mk-ring--amber { background: var(--mk-amber); color: var(--mk-amber-ink); }
.mk-ring--brand { background: #E7EFEE; color: var(--mk-brand); }
.mk-ok { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--mk-teal); color: var(--mk-teal-ink); }
.mk-ok--no { background: var(--mk-grey); color: var(--mk-mut); }

.mk-sw { position: relative; display: inline-block; flex: 0 0 auto; width: 2.2em; height: 1.25em; border-radius: 999px; background: var(--mk-off); }
.mk-sw::after { content: ""; position: absolute; top: 0.15em; left: 0.15em; width: 0.95em; height: 0.95em; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.mk-sw--on { background: #1F9D74; }
.mk-sw--on::after { left: 1.1em; }

.mk-av { display: inline-block; flex: 0 0 auto; width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; background: #E8EAE7; }
.mk-av--ini { display: inline-flex; align-items: center; justify-content: center; width: 2.64em; height: 2.64em; font-size: 0.72em; font-weight: 600; letter-spacing: 0.02em; background: var(--mk-blue); color: var(--mk-blue-ink); }
.mk-orb { flex: 0 0 auto; width: 1.6em; height: 1.6em; }
.mk-who { display: inline-flex; align-items: center; gap: 0.4em; min-width: 0; font-size: 0.92em; white-space: nowrap; }
.mk-who .mk-av { width: 1.75em; height: 1.75em; }
.mk-mark { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 0.55em; background: var(--mk-brand); color: #FFFFFF; font-weight: 600; }

.mk-btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 0.35em; height: 2.3em; padding: 0 0.95em; border: 1px solid rgba(18, 22, 20, 0.14); border-radius: 0.6em; background: #FFFFFF; color: #1B1F1D; font-size: 0.9em; font-weight: 500; white-space: nowrap; }
.mk-btn--pri { background: #121614; border-color: #121614; color: #FFFFFF; }
.mk-btn--brand { background: var(--mk-brand); border-color: var(--mk-brand); color: #FFFFFF; }
.mk-box { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; border: 1px solid rgba(18, 22, 20, 0.28); border-radius: 0.3em; }
.mk-box--done { background: var(--mk-brand); border-color: var(--mk-brand); color: #FFFFFF; }

/* Connector between stacked steps: it spans the body gap exactly. */
.mk-link { flex: 0 0 auto; align-self: flex-start; width: 1px; height: 1.1em; margin: -0.75em 0 -0.75em 1.9em; background: var(--mk-link); }
.mk-line { display: flex; align-items: flex-start; gap: 0.5em; }
.mk-line > .mk-i { margin-top: 0.17em; color: var(--mk-teal-ink); }
.mk-note { display: flex; align-items: flex-start; gap: 0.5em; font-size: 0.88em; color: var(--mk-mut); }
.mk-note > .mk-i { margin-top: 0.1em; }
.mk-move { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.5em; }
.mk-move s { color: var(--mk-mut); text-decoration-thickness: 1px; }
.mk-move > .mk-i { color: var(--mk-mut); }
.mk-subject { font-size: 1.06em; }
.mk-sel { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.4em; height: 2.1em; padding: 0 0.65em; border: 1px solid rgba(18, 22, 20, 0.14); border-radius: 0.5em; background: #FAFAF9; color: #1B1F1D; font-size: 0.88em; white-space: nowrap; }
.mk-meter { display: block; height: 0.45em; border-radius: 999px; background: var(--mk-off); overflow: hidden; }
.mk-meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--mk-brand); }
.mk-meter__fill--25 { width: 25%; background: #E0A23A; }
.mk-meter__fill--70 { width: 70%; }
.mk-meter__fill--80 { width: 80%; }

/* ======================================================================
   Automations: steps, routes, sequences, timelines, runs
   ====================================================================== */
.mk-node { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0.85em; }
.mk-node--on { box-shadow: 0 0 0 1.5px #3FA886, 0 1.2em 3em rgba(18, 22, 20, 0.14); }
.mk-pill { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.3em 0.75em 0.3em 0.3em; border: 1px solid var(--mk-glass-line); border-radius: 999px; background: var(--mk-glass); color: var(--mk-ink); font-size: 0.9em; white-space: nowrap; }
.mk-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em; color: var(--mk-mut); }

.mk-route { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.6em; }
.mk-route > .mk-i { color: var(--mk-mut); }
.mk-route--on { background: #EFF6F3; }
.mk-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em 0.5em; min-width: 0; }

.mk-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0.9em; align-items: start; }
.mk-seqs { display: flex; flex-direction: column; gap: 0.1em; }
.mk-seqs > .mk-k { margin-bottom: 0.35em; }
.mk-seq { display: grid; grid-template-columns: 3.3em 2em minmax(0, 1fr); align-items: center; gap: 0.6em; padding: 0.4em 0; }
.mk-seq__day { font-size: 0.82em; font-weight: 600; color: var(--mk-mut); white-space: nowrap; }

.mk-tl { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; margin-top: 0.8em; }
.mk-tl::before { content: ""; position: absolute; top: 0.35em; left: 0.35em; right: 0.35em; height: 1px; background: var(--mk-off); }
.mk-tl__stop { position: relative; display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
.mk-tl__dot { width: 0.7em; height: 0.7em; margin-bottom: 0.45em; border-radius: 50%; background: #1F9D74; box-shadow: 0 0 0 0.25em rgba(31, 157, 116, 0.22); }
.mk-tl__stop--end .mk-tl__dot { background: var(--mk-ink); box-shadow: 0 0 0 0.25em var(--mk-off); }

.mk-rem { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto auto; align-items: center; gap: 0.5em 0.7em; }

/* A run: checks joined by a rule, the focal step on a teal wash. */
.mk-run { position: relative; display: grid; grid-template-columns: 1.75em minmax(0, 1fr) auto; align-items: center; gap: 0.7em; }
.mk-run > .mk-ok, .mk-run > .mk-av { justify-self: center; }
.mk-run > .mk-av { width: 1.75em; height: 1.75em; }
.mk-run:not(:last-child)::after { content: ""; position: absolute; left: calc(0.95em + 0.875em); top: calc(50% + 0.95em); bottom: calc(0.95em - 50%); width: 1px; background: var(--mk-line); }
.mk-run--on { background: #EFF6F3; }

/* ======================================================================
   Neo: requests, replies, data rows, charts, options, bookings
   ====================================================================== */
.mk-ask { display: flex; align-items: flex-start; gap: 0.65em; padding: 0.7em 0.85em; border: 1px solid var(--mk-glass-line); border-radius: 0.8em; background: var(--mk-glass); color: var(--mk-ink); }
.mk--light .mk-ask { background: rgba(255, 255, 255, 0.78); }
.mk-ask > .mk-av { width: 1.8em; height: 1.8em; }
.mk-ask > .mk-av--ini { width: 2.5em; height: 2.5em; }
.mk-ask__text { flex: 1 1 auto; min-width: 0; padding-top: 0.12em; }
.mk-av--pt { display: inline-flex; align-items: center; justify-content: center; background: var(--mk-teal); color: var(--mk-teal-ink); }
/* Scenario scene (neo.mjs `scene`): the prompt holds two lines, so the
   response starts on the same line in every card and fills to the fade. */
.mk__body:has(> .mk-scene) { flex: 1 1 auto; }
.mk-scene { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.75em; min-height: 0; }
.mk-scene > .mk-ask { flex: 0 0 auto; align-items: center; min-height: 4.25em; }
.mk-scene .mk-ask__text { padding-top: 0; }
/* Fade the response itself over a long falloff. A dark drop shadow beneath
   a short whole-stage mask made the bottom read as a grey shadow band. */
.mk-scene > .mk-ans { flex: 1 1 auto; min-height: 0; overflow: hidden; box-shadow: none; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.94) 55%, rgba(0, 0, 0, 0.7) 72%, rgba(0, 0, 0, 0.3) 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.94) 55%, rgba(0, 0, 0, 0.7) 72%, rgba(0, 0, 0, 0.3) 88%, transparent 100%); }
.mk-bubble { align-self: flex-end; max-width: 85%; padding: 0.6em 0.9em; border-radius: 1em 1em 0.3em 1em; background: #2F6F63; color: #FFFFFF; }
.mk-neo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25em 0.5em; }
.mk-neo > .mk-orb { width: 1.5em; height: 1.5em; }
.mk-ans { display: flex; flex-direction: column; gap: 0.55em; }

.mk-dt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.05em 0.8em; padding-top: 0.5em; border-top: 1px solid var(--mk-line); }
.mk-dt__val { font-weight: 600; white-space: nowrap; }
.mk-dt__src { grid-column: 1 / -1; }
.mk-ol { display: flex; flex-direction: column; gap: 0.3em; padding-left: 1.3em; }
.mk-ol li::marker { color: var(--mk-mut); }
.mk-todo { display: flex; align-items: center; gap: 0.6em; padding-top: 0.5em; border-top: 1px solid var(--mk-line); }
.mk-review { display: flex; align-items: flex-start; gap: 0.6em; padding: 0.65em 0.8em; border-radius: 0.6em; background: #FBF3E2; color: #5E420B; }
.mk-review .mk-m { color: #7A5A1A; }
.mk-review > .mk-i { margin-top: 0.15em; }
.mk-facts { display: flex; flex-direction: column; gap: 0.3em; padding-left: 1.1em; font-size: 0.94em; }
.mk-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6em; }
.mk-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em; min-width: 0; padding: 0.7em 0.8em; border: 1px solid var(--mk-line); border-radius: 0.6em; }
.mk-opt--on { border-color: #8DAEE6; background: #F4F7FD; }
.mk-slots { display: flex; flex-wrap: wrap; gap: 0.45em; }
.mk-slot { padding: 0.45em 0.7em; border: 1px solid var(--mk-off); border-radius: 0.55em; font-size: 0.9em; white-space: nowrap; }
.mk-slot--on { border-color: #5CC7A1; background: var(--mk-teal); color: var(--mk-teal-ink); }
.mk-when { font-size: 1.1em; }
.mk-chg { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.7em; padding-top: 0.5em; border-top: 1px solid var(--mk-line); }
.mk-chg__val { font-weight: 600; white-space: nowrap; }
.mk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5em; }
.mk-tile { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; padding: 0.6em 0.7em; border-radius: 0.6em; background: var(--mk-soft); }

/* Trends: the plot stretches, strokes and dots keep their screen size, and
   the HTML axis sits in one column per point. */
.mk-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1em; }
.mk-chart { display: flex; flex-direction: column; gap: 0.45em; min-width: 0; }
.mk-trend { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; color: #1F9D74; }
.mk-trend--blue { color: #4A7BD0; }
.mk-trend__plot { display: block; width: 100%; height: 6.5em; overflow: visible; }
.mk-trend__plot path { fill: none; vector-effect: non-scaling-stroke; }
.mk-trend__plot .mk-trend__grid { stroke: var(--mk-line); stroke-width: 1px; }
.mk-trend__plot .mk-trend__line { stroke: currentColor; stroke-width: 2px; stroke-linejoin: round; }
.mk-trend__plot .mk-trend__area { fill: currentColor; fill-opacity: 0.1; stroke: none; }
.mk-trend__plot .mk-trend__dot { stroke: currentColor; stroke-width: 0.7em; stroke-linecap: round; }
.mk-trend__plot .mk-trend__hole { stroke: #FFFFFF; stroke-width: 0.34em; stroke-linecap: round; }
.mk-trend__axis { display: grid; text-align: center; color: var(--mk-ink); }
.mk-trend__axis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-trend__axis > span { display: flex; flex-direction: column; gap: 0.05em; min-width: 0; }
.mk-trend__axis .mk-m { font-size: 0.8em; white-space: nowrap; }
.mk-spark { flex: 0 0 auto; }
.mk-spark .mk-trend__plot { width: 4.6em; height: 1.8em; }
.mk-ends { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; }
.mk-legend { display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; font-size: 0.85em; color: var(--mk-mut); }
.mk-legend__dot { display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.35em; border-radius: 50%; background: #1F9D74; }
.mk-legend__dot--hole { background: #FFFFFF; box-shadow: inset 0 0 0 0.17em #1F9D74; }
.mk-bars { display: block; width: 100%; height: 2.6em; fill: #4A7BD0; fill-opacity: 0.5; }

/* ======================================================================
   Patient Portal: app shell, sign-in, results, booking, messages, payments
   ====================================================================== */
.mk--hero { background: #FBFAF8; }
.mk--hero .mk__stage { align-items: stretch; }
.mk--hero .mk__body { height: 100%; gap: 0; }
.mk-pbar { display: flex; align-items: center; gap: 0.7em; padding: 1em 1.6em; border-bottom: 1px solid var(--mk-line); background: #FFFFFF; }
.mk-pbar__end { display: flex; align-items: center; gap: 1em; margin-left: auto; color: var(--mk-mut); }
.mk-pbody { display: grid; flex: 1 1 auto; grid-template-columns: 13em minmax(0, 1fr); min-height: 0; }
.mk-pnav { display: flex; flex-direction: column; gap: 0.2em; padding: 1.4em 1em; border-right: 1px solid var(--mk-line); }
.mk-pnav__item { display: flex; align-items: center; gap: 0.65em; height: 2.5em; padding: 0 0.8em; border-radius: 0.55em; color: #3B403D; white-space: nowrap; }
.mk-pnav__item--on { background: #E7EFEE; color: var(--mk-brand); font-weight: 600; }
.mk-pmain { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; padding: 1.8em 2.2em; }
.mk-greet { display: flex; flex-direction: column; gap: 0.15em; }
.mk-greet b { font-size: 1.6em; letter-spacing: -0.02em; }
.mk-pgrid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1em; }
.mk-pcard { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45em; padding: 1.1em 1.2em; }
.mk-pcard > .mk-head { width: 100%; }
.mk-pcard--brand { background: #EEF4F3; border-color: rgba(46, 94, 90, 0.18); }
.mk-pcard--wide { grid-column: span 2; }
.mk-pcard__title { font-size: 1.12em; }
.mk-goal { display: flex; flex-direction: column; gap: 0.3em; width: 100%; }
.mk-amount { font-size: 1.6em; letter-spacing: -0.02em; }
.mk-askbar { display: flex; align-items: center; gap: 0.7em; padding: 0.8em 1em; }
.mk-askbar > .mk-m { flex: 1 1 auto; }

.mk-signin { display: flex; flex-direction: column; align-items: center; gap: 0.9em; }
.mk-url { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.35em 0.8em; border: 1px solid var(--mk-line); border-radius: 999px; background: rgba(255, 255, 255, 0.8); color: var(--mk-mut); font-size: 0.88em; }
.mk-signin__row { display: flex; align-items: flex-end; justify-content: center; gap: 1.4em; width: 100%; }
.mk-signin__card { display: flex; flex-direction: column; align-items: center; gap: 0.5em; width: 100%; max-width: 21em; padding: 1.3em 1.4em 1.1em; text-align: center; }
.mk-signin__card > .mk-mark { width: 2.4em; height: 2.4em; border-radius: 0.7em; font-size: 1.1em; }
.mk-signin__title { font-size: 1.18em; letter-spacing: -0.01em; }
.mk-signin__card > .mk-btn { width: 100%; }
.mk-input { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1em; width: 100%; padding: 0.45em 0.75em; border: 1px solid rgba(18, 22, 20, 0.16); border-radius: 0.55em; text-align: left; }
.mk-input > .mk-m { font-size: 0.78em; }
.mk-device { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; width: 6.5em; height: 11em; margin-bottom: 1em; border: 1px solid rgba(18, 22, 20, 0.1); border-radius: 1.3em; background: rgba(255, 255, 255, 0.7); opacity: 0.6; }

.mk-split--results { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.mk-lab { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.6em; align-items: baseline; gap: 0.5em; padding-top: 0.45em; border-top: 1px solid var(--mk-line); }
.mk-comment { display: flex; align-items: flex-start; gap: 0.55em; padding: 0.6em 0.7em; border-radius: 0.6em; background: #EEF4F3; }
.mk-askchip { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.45em; padding: 0.3em 0.75em 0.3em 0.3em; border: 1px solid var(--mk-line); border-radius: 999px; background: #FFFFFF; font-size: 0.9em; }
.mk-askchip > .mk-orb { width: 1.4em; height: 1.4em; }

.mk-tabs { display: inline-flex; gap: 0.2em; padding: 0.2em; border-radius: 0.6em; background: #F1F2F1; font-size: 0.9em; }
.mk-tab { padding: 0.3em 0.75em; border-radius: 0.45em; color: var(--mk-mut); white-space: nowrap; }
.mk-tab--on { background: #FFFFFF; color: var(--mk-ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.mk-tabs.mk-ht { align-self: flex-start; }

.mk-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4em; }
.mk-day { display: flex; flex-direction: column; align-items: center; gap: 0.05em; padding: 0.4em 0; border: 1px solid var(--mk-line); border-radius: 0.55em; }
.mk-day--on { background: var(--mk-brand); border-color: var(--mk-brand); color: #FFFFFF; }
.mk-day--on .mk-m { color: rgba(255, 255, 255, 0.8); }
.mk-times { display: flex; flex-wrap: wrap; gap: 0.4em; }
.mk-time { padding: 0.4em 0.75em; border: 1px solid rgba(18, 22, 20, 0.14); border-radius: 0.5em; font-size: 0.9em; }
.mk-time--on { border-color: var(--mk-brand); box-shadow: inset 0 0 0 1px var(--mk-brand); color: var(--mk-brand); font-weight: 600; }
.mk-foot { padding-top: 0.6em; border-top: 1px solid var(--mk-line); }

.mk-thread { display: flex; flex-direction: column; gap: 0.55em; }
.mk-sys { display: flex; align-items: center; align-self: center; gap: 0.5em; max-width: 100%; padding: 0.3em 0.7em 0.3em 0.3em; border-radius: 999px; background: var(--mk-soft); }
.mk-sys > .mk-orb { width: 1.3em; height: 1.3em; }
.mk-msg { align-self: flex-start; max-width: 82%; padding: 0.55em 0.85em; border-radius: 1em 1em 1em 0.3em; background: #F1F2F1; }
.mk-msg--out { align-self: flex-end; border-radius: 1em 1em 0.3em 1em; background: var(--mk-brand); color: #FFFFFF; }
.mk-composer { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.5em 0.8em; border: 1px solid rgba(18, 22, 20, 0.14); border-radius: 0.6em; color: var(--mk-mut); }

.mk-payrow { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto auto; align-items: center; gap: 0.7em; }
.mk-payrow--due { background: #F3F7F6; }

/* ======================================================================
   Recomposition on the stage's own size
   ====================================================================== */
@container mk (max-width: 1000px) {
  .mk-pbody { grid-template-columns: 11em minmax(0, 1fr); }
  .mk-pmain { padding: 1.4em 1.6em; }
  .mk-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-pplan { display: none; }
  .mk-pcard--wide { grid-column: auto; }
}
@container mk (max-width: 560px) {
  .mk-hm { display: none !important; }
  .mk-pbody { grid-template-columns: minmax(0, 1fr); }
  .mk-pnav { display: none; }
  .mk-pbar { padding: 0.7em 0.9em; }
  .mk-pmain { gap: 0.7em; padding: 0.8em 0.9em; }
  .mk-pgrid { grid-template-columns: minmax(0, 1fr); }
  .mk-greet b { font-size: 1.2em; }
  .mk-split--results { grid-template-columns: minmax(0, 1fr); }
}
@container mk (max-width: 460px) {
  .mk-split { grid-template-columns: minmax(0, 1fr); }
  .mk-stop { order: -1; }
  .mk-opts { grid-template-columns: minmax(0, 1fr); }
  .mk-rem { grid-template-columns: 2em minmax(0, 1fr) auto; }
  .mk-rem > .mk-ring { grid-row: 1 / 3; align-self: start; }
  .mk-rem > .mk-sel { grid-column: 2; grid-row: 2; justify-self: start; }
  .mk-rem > .mk-sw { grid-column: 3; grid-row: 1 / 3; }
}
@container mk (max-width: 400px) {
  .mk-hn { display: none !important; }
  .mk-route .mk-who__name { display: none; }
  .mk-charts { grid-template-columns: minmax(0, 1fr); }
  .mk-chg { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-payrow { grid-template-columns: minmax(0, 1fr) auto auto; }
  .mk-payrow > .mk-ring { display: none; }
  .mk-lab { grid-template-columns: minmax(0, 1fr) auto 3.4em; }
  .mk--review .mk-dt.mk-r1 { display: none; }
  .mk--review .mk-neo > .mk-m, .mk--team .mk-neo > .mk-m, .mk--explain .mk-neo > .mk-m { display: none; }
  .mk--explain .mk-ans > p:not(.mk-note), .mk--team .mk-ans > .mk-k { display: none; }
  .mk--payments .mk-payrow.mk-r1 { display: none; }
  .mk-scene > .mk-ask { min-height: 5.45em; padding: 0.6em 0.7em; }
  .mk-scene > .mk-ans { gap: 0.45em; padding: 0.7em 0.8em; }
}
@container mk (max-width: 300px) {
  .mk-hx { display: none !important; }
  .mk--team .mk-ans > p { display: none; }
  .mk-chg { grid-template-columns: minmax(0, 1fr); gap: 0.2em; }
  .mk-chg__val { white-space: normal; }
  .mk-bubble { max-width: 92%; }
  .mk-tiles { gap: 0.4em; }
  .mk-tile { padding: 0.5em 0.6em; }
}
@container mk (max-height: 460px) {
  .mk-hs { display: none !important; }
}
@container mk (max-height: 270px) {
  .mk-ht { display: none !important; }
  .mk--notices .mk-list > .mk-li:last-child, .mk--notices .mk__body > .mk-g { display: none; }
  .mk--explain .mk-note { display: none; }
  .mk--review .mk-dt.mk-r1 .mk-dt__src { display: none; }
  .mk--team .mk-ask { padding-block: 0.45em; }
  .mk--team .mk-ans { gap: 0.35em; }
}

/* ======================================================================
   Positions. Bases at 1440; the stage recomposes itself, these set the
   reading size and insets per page width.
   ====================================================================== */
/* Agents cards: the composition sits under the card top and recedes into
   the stage fade (platform-template.css). */
.pn-card__stage > .mk { --mk-max: 30em; font-size: 13px; }
.pn-card__stage > .mk .mk__stage { padding: 32px 32px 0; }

/* Agents accordion slot (754×622.688 on #141917): a soft teal light, the
   body centred when it is shorter than the slot and top-aligned when not,
   receding at the foot. */
.pn-detail__slot > .mk { --mk-max: 40em; font-size: 15px; background: radial-gradient(80% 60% at 18% 0%, rgba(47, 111, 99, 0.34), transparent 70%); }
.pn-detail__slot > .mk .mk__stage { padding: 44px 48px; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.pn-detail__slot > .mk .mk__body { margin-block: auto; }

/* Agents scenario stage under the title. */
.pn-scenario__stage > .mk { font-size: 14px; }
.pn-scenario__stage > .mk .mk__stage { padding: 14px 14px 0; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
/* Neo scenes: one stage height at the card foot (the 583 card with a
   three-line title), so every stage starts on the same line whatever the
   title length; a shorter title leaves its free space under the title, and
   a longer one grows every card in the rail together. */
.pn-scenario:has(.mk-scene) .pn-scenario__title { margin-bottom: auto; }
.pn-scenario__stage:has(.mk-scene) { flex: 0 0 340px; min-height: 0; }
.pn-scenario__stage:has(.mk-scene) > .mk .mk__stage { -webkit-mask-image: none; mask-image: none; }

/* Portal hero application view and feature card stages. */
.pp-hero__product > .mk { font-size: 15px; }
.pp-grid .bw-card__stage > .mk { --mk-max: 34em; font-size: 13px; }
.pp-grid .bw-card__stage > .mk .mk__stage { padding: 36px 40px 0; }

/* Coming Soon beside the hero label: the portal is not launched yet. */
.pp-soon { display: inline-flex; align-items: center; height: 28px; margin-left: 6px; padding: 0 12px; border-radius: 999px; background: #FAFAFA; color: #121614; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -0.1px; white-space: nowrap; }

@media (min-width: 1101px) and (max-width: 1439px) {
  .pn-detail__slot > .mk { font-size: 13px; }
  .pn-detail__slot > .mk .mk__stage { padding: 32px 36px; }
}
@media (max-width: 1199px) {
  .pp-hero__product > .mk { font-size: 14px; }
}
@media (max-width: 1100px) {
  .pn-card__stage > .mk .mk__stage { padding-top: 26px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .pn-detail__slot > .mk { font-size: 12.5px; }
  .pn-detail__slot > .mk .mk__stage { padding: 24px 26px; }
}

@media (max-width: 900px) {
  .pn-card__stage > .mk { font-size: 12.5px; }
  .pn-card__stage > .mk .mk__stage { padding: 14px 16px 0; }
  .pn-card__stage > .mk .mk__body { gap: 0.5em; }
  /* Phone cards keep more of the composition solid before the fade. */
  .pn-card__stage:has(> .mk) { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  .pn-detail__slot > .mk { font-size: 12px; }
  .pn-detail__slot > .mk .mk__stage { padding: 20px; }
  .pn-scenario__stage > .mk { font-size: 12px; }
  .pn-scenario__stage > .mk .mk__stage { padding: 8px 8px 0; }
  /* Keep the complete focal response above the fade on narrow cards. */
  .pn-scenario__stage:has(.mk-scene) { flex-basis: 320px; }
  .pp-hero__product > .mk { font-size: 12px; }
  .pp-grid .bw-card__stage > .mk { font-size: 12.5px; }
  .pp-grid .bw-card__stage > .mk .mk__stage { padding: 20px 20px 0; }
  /* Portal cards: a 260 stage with the Workspace's 40 clear band. */
  .pp-grid.bw-grid--features .pp-card { padding-top: 300px; }
  .pp-grid .pp-card .bw-card__stage { height: 260px; }
  .pp-soon { height: 22px; margin-left: 4px; padding: 0 9px; font-size: 12px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .pn-detail__slot > .mk { font-size: 13px; }
}
@media (max-width: 359px) {
  .pn-card__stage > .mk, .pp-grid .bw-card__stage > .mk { font-size: 12px; }
  .pn-detail__slot > .mk .mk__stage { padding: 16px; }
}

/* 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; }
}