/* Generated by scripts/render.mjs from:
   /styles/base.css
   /styles/header.css
   /styles/sections.css
   /styles/dialogs.css
   /styles/cookie-consent.css
   /styles/blog.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; } }

.blog { max-width: 1440px; margin: 0 auto; padding: 144px 60px 120px; color: var(--ink); }
body:has(.blog) { background: #fff; }
.blog-card { display: block; color: inherit; text-decoration: none; }
.blog-card picture { display: block; min-width: 0; }
.blog-card img { width: 100%; height: auto; aspect-ratio: 1.65; object-fit: cover; border-radius: 12px; }
.blog-card--featured { display: grid; grid-template-columns: minmax(0, 1.72535fr) minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 100px; }
.blog-card--featured img { aspect-ratio: 823 / 500; border-radius: 8px; }
.blog-card h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -1.8px; font-weight: var(--display-weight); }
.blog-card h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.6px; font-weight: var(--display-weight); }
.blog-card__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; }
.blog-card--featured .blog-card__copy { margin-top: 0; }
.blog-card__copy > * { margin: 0; }
.blog-category { font-size: 12px; line-height: 18px; color: var(--ink-soft); }
.blog-excerpt { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.blog-heading h2 { font-size: 32px; font-weight: var(--display-weight); letter-spacing: -1px; }
.blog-heading p { margin-top: 12px; font-size: 16px; color: var(--ink-soft); }
.blog-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 60px; }
.blog-tabs button { border: 0; border-radius: 1000px; padding: 4px 12px; background: transparent; color: var(--ink-soft); font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; line-height: 21px; letter-spacing: normal; cursor: pointer; }
.blog-tabs button[aria-selected="true"] { background: #f5f5f5; color: var(--ink); box-shadow: none; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
@media(max-width: 760px) { .blog { padding-top: 120px; } .blog-card--featured { grid-template-columns: 1fr; gap: 16px; margin-bottom: 64px; } .blog-grid { grid-template-columns: 1fr; } }

.blog-date { color: var(--ink-soft); font-size: 12px; line-height: 18px; }
.blog-card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.blog-card--featured h1 { max-width: 850px; letter-spacing: -1.2px; }
.blog-card--featured .blog-category { margin-top: 0; }

@media (max-width: 1199px) { .blog { padding: 140px 40px 100px; } .blog-card--featured { grid-template-columns: 1fr; } .blog-card--featured img { aspect-ratio: 1.5; } }
@media (max-width: 760px) { .blog { padding: 120px 24px 80px; } }

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