/* Generated by scripts/render.mjs from:
   /styles/base.css
   /styles/header.css
   /styles/sections.css
   /styles/dialogs.css
   /styles/cookie-consent.css
   /styles/editorial.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 — editorial family: the Resources and News indexes
   (src/pages/resources.mjs) and the article template (src/pages/article.mjs).
   Built on the measured About body (docs/full-site-template/about/): 60
   gutters, a 1200 inner at x120, 570 | 60 | 570 rows, 48/50.4 section
   titles, 62/71.3 H1. The article's reading column widens the About
   paragraph measure to 720 at 18/28 for long-form text. Prefix `ed-`.
   Self-contained with base.css; no other stylesheet is required. */

/* ======================================================================
   Index — /resources/, /news/
   ====================================================================== */
/* 1. Dark opening on the approved Workspace optical field. Content-led
   like the About and Workspace heroes (not the full-screen canvas): header
   clearance + 96, text bottom-anchored in a 560 minimum. */
.ed-index-hero {
  position: relative;
  min-height: 560px;
  padding: calc(var(--strip-h) + var(--nav-h) + 96px) var(--gutter) 96px;
  background: var(--deeper);
  color: #FAFAFA;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.ed-index-hero__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ed-index-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 14, 0.5) 0%, rgba(13, 16, 14, 0.3) 50%, rgba(13, 16, 14, 0.56) 100%); }
.ed-index-hero__content { position: relative; z-index: 1; width: 100%; }
.ed-index-hero__label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; font-size: 20px; line-height: 1; letter-spacing: -0.4px; color: rgba(250, 250, 250, 0.95); }
.ed-index-hero__label img { width: 24px; height: 24px; }
.ed-index-hero__title { max-width: 900px; font-weight: var(--display-weight); font-size: 62px; line-height: 71.3px; letter-spacing: -3.1px; overflow-wrap: anywhere; }
.ed-index-hero__support { max-width: 640px; margin-top: 20px; font-size: 20px; line-height: 28px; letter-spacing: -0.3px; color: rgba(250, 250, 250, 0.88); }

/* 2. White list on the About inner: ruled rows, 570 | 60 | 570. */
.ed-list { padding: 96px 120px 120px; background: #FFFFFF; color: var(--ink); }
.ed-list__title { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; margin-bottom: 48px; }
.ed-list__items { border-top: 1px solid rgba(18, 22, 20, 0.1); }
.ed-entry {
  display: grid;
  grid-template-columns: minmax(0, 570px) minmax(0, 570px);
  column-gap: 60px;
  justify-content: space-between;
  align-items: start;
  padding: 48px 0;
  border-bottom: 1px solid rgba(18, 22, 20, 0.1);
}
.ed-entry__meta { display: flex; flex-wrap: wrap; gap: 0 8px; margin-bottom: 16px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.ed-entry__meta span + span::before { content: "·"; margin-right: 8px; }
.ed-entry__title { font-weight: 300; font-size: 32px; line-height: 36.8px; letter-spacing: -1.28px; overflow-wrap: anywhere; }
.ed-entry__title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ed-entry__excerpt { margin-bottom: 20px; font-size: 17px; line-height: 24px; letter-spacing: -0.3px; }
.ed-entry__read { font-size: 15px; }
.ed-list__also { margin-top: 48px; font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.ed-list__also a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 3. Pale closing: centred 660 measure, title, lead and one pill. */
.ed-index-close { padding: 120px var(--gutter); background: var(--bg-tile); color: var(--ink); text-align: center; }
.ed-index-close__content { max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ed-index-close__title { font-weight: var(--display-weight); font-size: 48px; line-height: 50.4px; letter-spacing: -1.92px; padding-bottom: 3px; overflow-wrap: anywhere; }
.ed-index-close__lead { max-width: 560px; font-size: 17px; line-height: 25px; letter-spacing: -0.3px; color: var(--ink-soft); }
.ed-index-close__cta { min-width: 160px; margin-top: 8px; }

/* ======================================================================
   Article — /resources/<slug>/, /news/<slug>/
   ====================================================================== */
/* 1. White head on the About hero grid: kicker and H1 in the 1010 column,
   standfirst and publisher in the 300 column. */
.ed-head { padding: 160px var(--gutter) 72px; background: #FFFFFF; color: var(--ink); }




.ed-head__title { max-width: 900px; font-weight: var(--display-weight); font-size: 62px; line-height: 71.3px; letter-spacing: -3.1px; overflow-wrap: anywhere; }

.ed-head__meta { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.ed-head__meta > span + span::before { content: "|"; margin-right: 8px; color: var(--ink-faint); }
.ed-versions { margin-top: 48px; font-size: 14px; line-height: 22px; color: var(--ink-soft); }

/* 2. Reading layout on the About inner: 300 contents rail | 60 | 720
   reading column. The rail is sticky under the fixed header on desktop. */
.ed-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 720px);
  column-gap: 60px;
  justify-content: space-between;
  align-items: start;
  padding: 0 120px 96px;
  background: #FFFFFF;
  color: var(--ink);
}
.ed-rail { position: sticky; top: calc(var(--strip-h) + var(--nav-h) + 32px); padding-top: 6px; }
.ed-rail__title { margin-bottom: 24px; font-size: 22px; line-height: 28px; font-weight: 400; color: var(--ink); }
.ed-toc { list-style: decimal; padding-left: 24px; }
.ed-toc li { padding-left: 8px; font-size: 15px; line-height: 22px; }
.ed-toc li::marker { color: var(--ink-soft); }
.ed-toc li + li { margin-top: 12px; }
.ed-toc a {
  display: block;
  margin-left: 0;
  padding: 6px 0;
  border: 0;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.2px;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}
.ed-toc a:hover { color: var(--ink); }
/* Legal documents number their own headings; the outline shows them as written. */
.ed-toc--plain { list-style: none; padding-left: 0; }
.ed-toc--plain li { padding-left: 0; }

/* Reading column: 18/28 prose, a 22/32 lede, 32/38 subheads with 56 above
   and 20 below; 24 between ordinary blocks. */
.ed-body { min-width: 0; }
.ed-body > * + * { margin-top: 30px; }
.ed-body > .ed-body__h2 { margin-top: 56px; }
.ed-body > .ed-body__h2 + * { margin-top: 20px; }
.ed-body__p { font-size: 18px; line-height: 28px; letter-spacing: -0.2px; overflow-wrap: anywhere; }

.ed-body__h2 { font-weight: 300; font-size: 32px; line-height: 38px; letter-spacing: -1.28px; overflow-wrap: anywhere; }
.ed-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(18, 22, 20, 0.45); transition: text-decoration-color 0.2s var(--ease); }
.ed-body a:hover { text-decoration-color: currentColor; }
.ed-body strong { font-weight: 500; }

/* Lists: ordinary bullets, numbers, and the checklist with drawn boxes. */
.ed-body__list { padding-left: 24px; list-style: disc; font-size: 18px; line-height: 28px; letter-spacing: -0.2px; }
.ed-body__list li + li { margin-top: 10px; }
.ed-body__list--numbered { list-style: decimal; }
.ed-body__list--check { padding-left: 0; list-style: none; }
.ed-body__list--check li { position: relative; padding-left: 40px; }
.ed-body__list--check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border: 1.5px solid rgba(18, 22, 20, 0.45); border-radius: 4px; }

/* Handover pattern: four numbered cards in order. */
.ed-steps { display: grid; gap: 10px; }
.ed-steps li { display: flex; align-items: baseline; gap: 16px; padding: 14px 18px; border: 1px solid rgba(18, 22, 20, 0.12); border-radius: 12px; font-size: 18px; line-height: 28px; letter-spacing: -0.2px; }
.ed-steps__n { flex: 0 0 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-tile); font-size: 13px; line-height: 1; color: var(--ink-soft); transform: translateY(-2px); }

/* Note: a pale panel for the boundary the reader must keep. */
.ed-note { padding: 24px 28px; border-radius: 12px; background: var(--bg-tile); font-size: 17px; line-height: 26px; letter-spacing: -0.2px; }

/* Write-in fields above the worksheet. */
.ed-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.ed-fields li { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.ed-fields__rule { display: block; height: 32px; border-bottom: 1px solid rgba(18, 22, 20, 0.35); }

/* Tables. `scroll` keeps its four columns and scrolls sideways inside a
   labelled, focusable region when the column is narrower than 720;
   `stack` turns each row into a labelled block below 640. Text never
   drops under 15px. */
.ed-table { margin: 0; }
.ed-table__caption { margin-bottom: 12px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.ed-table__scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ed-table__scroll:focus-visible { outline-offset: 6px; }
.ed-table__grid { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; letter-spacing: -0.1px; }
.ed-table__grid th,
.ed-table__grid td { padding: 14px 20px 14px 0; border-top: 1px solid rgba(18, 22, 20, 0.12); text-align: left; vertical-align: top; }
.ed-table__grid th:last-child,
.ed-table__grid td:last-child { padding-right: 0; }
.ed-table__grid thead th { padding-top: 0; padding-bottom: 12px; border-top: 0; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.ed-table__grid tbody th { font-weight: 500; }
.ed-table__grid tbody tr:last-child th,
.ed-table__grid tbody tr:last-child td { border-bottom: 1px solid rgba(18, 22, 20, 0.12); }
.ed-table__blank::after { content: ""; display: block; height: 22px; border-bottom: 1px dashed rgba(18, 22, 20, 0.3); }
.ed-table[data-layout="scroll"] .ed-table__grid { min-width: 720px; }
.ed-table[data-layout="scroll"] th:nth-child(1) { width: 21%; }
.ed-table[data-layout="scroll"] th:nth-child(2) { width: 33%; }
.ed-table[data-layout="scroll"] th:nth-child(3) { width: 23%; }
.ed-table[data-layout="scroll"] th:nth-child(4) { width: 23%; }
.ed-table[data-layout="stack"] th:first-child { width: 34%; }

/* ======================================================================
   Tablet and small desktop (901–1439): fixed columns go fluid.
   ====================================================================== */
@media (max-width: 1439px) {
  .ed-list, .ed-layout { padding-left: var(--gutter); padding-right: var(--gutter); }
  .ed-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }

  .ed-layout { grid-template-columns: minmax(0, 260px) minmax(0, 720px); column-gap: 40px; }
}
@media (max-width: 1199px) {
  .ed-index-hero__title, .ed-head__title { font-size: 52px; line-height: 58px; letter-spacing: -2.6px; }
  .ed-layout { grid-template-columns: minmax(0, 220px) minmax(0, 720px); }
}

/* ======================================================================
   Mobile (≤900), measured at 390×844; readable to 320.
   ====================================================================== */
@media (max-width: 900px) {
  .ed-index-hero { min-height: 440px; padding: calc(var(--nav-h) + 72px) 24px 64px; }
  .ed-index-hero__label { font-size: 16px; margin-bottom: 20px; }
  .ed-index-hero__label img { width: 20px; height: 20px; }
  .ed-index-hero__title { font-size: 38px; line-height: 45.6px; letter-spacing: -1.9px; }
  .ed-index-hero__support { margin-top: 16px; font-size: 17px; line-height: 26px; letter-spacing: -0.2px; }
  .ed-list { padding: 64px 24px 84px; }
  .ed-list__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; margin-bottom: 32px; }
  .ed-entry { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 32px 0; }
  .ed-entry__meta { margin-bottom: 12px; }
  .ed-entry__title { font-size: 26px; line-height: 31px; letter-spacing: -0.9px; }
  .ed-entry__excerpt { margin-bottom: 14px; font-size: 16px; line-height: 24px; }
  .ed-index-close { padding: 84px 30px; }
  .ed-index-close__title, .ed-close__title { font-size: 34px; line-height: 39.1px; letter-spacing: -1.7px; }

  .ed-head { padding: 120px 24px 40px; }


  .ed-head__title { font-size: 38px; line-height: 45.6px; letter-spacing: -1.9px; }

  .ed-head__meta { margin-top: 12px; }

  .ed-layout { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding: 0 24px 72px; }
  .ed-rail { position: static; padding: 24px 0 0; border-top: 1px solid rgba(18, 22, 20, 0.1); }
  .ed-toc { border-left: 0; }
  .ed-toc li + li { margin-top: 0; }
  .ed-toc a { margin-left: 0; padding: 6px 0; border-left: 0; }
  .ed-body__p, .ed-body__list, .ed-steps li { font-size: 17px; line-height: 27px; }

  .ed-body > .ed-body__h2 { margin-top: 44px; }
  .ed-body__h2 { font-size: 27px; line-height: 32px; letter-spacing: -1px; }
  .ed-note { padding: 20px 22px; font-size: 16px; line-height: 25px; }
  .ed-steps li { padding: 12px 14px; gap: 12px; }
  .ed-table__grid { font-size: 15px; line-height: 22px; }
  .ed-table__grid th, .ed-table__grid td { padding: 12px 16px 12px 0; }


  .ed-close { min-height: 560px; padding: 100px 30px; }
  .ed-close__lead { font-size: 17px; line-height: 26px; }
}

/* Narrow phones (≤640): the six-field record stacks; write-in fields go
   to one column. The four-column worksheet keeps scrolling by design. */
@media (max-width: 640px) {
  .ed-fields { grid-template-columns: minmax(0, 1fr); }
  .ed-table[data-layout="stack"] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ed-table[data-layout="stack"] .ed-table__grid,
  .ed-table[data-layout="stack"] tbody,
  .ed-table[data-layout="stack"] tr,
  .ed-table[data-layout="stack"] th,
  .ed-table[data-layout="stack"] td { display: block; width: auto; }
  .ed-table[data-layout="stack"] tr { padding: 16px 0; border-top: 1px solid rgba(18, 22, 20, 0.12); }
  .ed-table[data-layout="stack"] tr:last-child { border-bottom: 1px solid rgba(18, 22, 20, 0.12); }
  .ed-table[data-layout="stack"] th,
  .ed-table[data-layout="stack"] td { padding: 0; border: 0; }
  .ed-table[data-layout="stack"] tbody th { margin-bottom: 4px; }
  .ed-table[data-layout="stack"] tbody tr:last-child th,
  .ed-table[data-layout="stack"] tbody tr:last-child td { border-bottom: 0; }
}

/* Print: the worksheet and checklist are meant to be taken to a demo. */
@media print {
  .page-article .site-header, .page-article .footer, .page-article .dialog,
  .page-article .ed-close, .page-article .ed-next, .page-article .ed-rail { display: none; }
  .page-article .ed-head { padding-top: 0; }
  .page-article .ed-layout { display: block; padding: 0; }
  .ed-table[data-layout="scroll"] .ed-table__grid { min-width: 0; }
  .ed-body a { text-decoration: none; }
}

/* Article geometry and typography measured on the reference article. */
.ed-head { max-width: 1320px; margin: 0 auto; padding: 140px 60px 60px; text-align: center; }
.ed-head__meta { justify-content: center; margin: 0 0 24px; gap: 8px; }
.ed-head__title { max-width: 1000px; margin: 0 auto; font-size: 48px; line-height: 1.15; letter-spacing: -1.92px; }
.ed-head__picture { display: block; margin-top: 72px; }
.ed-head__picture img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.ed-layout { max-width: 1320px; margin: 0 auto; padding: 0 60px 96px; grid-template-columns: 240px minmax(0, 720px); column-gap: 80px; }
.ed-body__p, .ed-body__list, .ed-steps li { font-size: 17px; line-height: 21.76px; letter-spacing: normal; }
.ed-more { max-width: 1320px; margin: 0 auto; padding: 40px 60px 120px; color: var(--ink); }
.ed-more > h2 { font-size: 32px; font-weight: 300; margin-bottom: 36px; }
.ed-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ed-more__card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ed-more__card img { width: 100%; height: auto; aspect-ratio: 1.65; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.ed-more__card h3 { font-size: 22px; line-height: 1.25; font-weight: 300; letter-spacing: -.6px; }
.ed-more__category { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; line-height: 18px; color: var(--ink-soft); }
@media (max-width: 1199px) { .ed-head__title { font-size: 42px; } .ed-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; } }
@media (max-width: 900px) { .ed-head { padding: 120px 24px 48px; } .ed-head__title { font-size: 34px; } .ed-head__picture { margin-top: 40px; } .ed-layout { padding: 0 24px 72px; grid-template-columns: minmax(0, 1fr); gap: 48px; } .ed-rail { border: 0; padding: 0; } .ed-toc li + li { margin-top: 12px; } .ed-more { padding: 32px 24px 80px; } .ed-more__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media print { .ed-more { display: none; } }

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