/* ============================================================
   THE ENGINE v7 — Ember Ledger · type-led dark hero
   Warm charcoal ground (#1D1A19), bone type, burnt-orange action.
   One story per screen: the hero is pure typography; the outcome
   bento lives one scroll below as its own proof section.
   Rules: data never goes orange (slate/pale charts, green growth);
   no shadows on persistent surfaces.
   Type: FH Total Display (primary display voice — commercial;
         Instrument Serif stands in until the licensed files land)
         · Hanken Grotesk (product voice) · Fragment Mono (machine)
   NOTE: team.css temporarily re-pins the old Midnight Ledger
   tokens (incl. Cormorant serif) for team.html until its own pass.
   ============================================================ */
/* the licensed display face, if installed on this machine — no network
   fetch, no 404: local() only. Falls through to Instrument Serif. */
@font-face {
  font-family: "FH Total Display";
  src: local("FH Total Display Regular"), local("FHTotalDisplay-Regular"), local("FH Total Display");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --bg: #1D1A19;          /* warm charcoal — never pure black */
  --bg-2: #252120;        /* raised band */
  --raised: #2A2523;      /* cards, popovers */
  --ink: #F3EFE7;         /* warm bone — never pure white */
  --ink-soft: #D6D0C4;    /* secondary labels */
  --mut: #A39B8B;         /* muted warm grey */
  --neg: #F08573;         /* negative / down metric (distinct from the error red) */
  --line: rgba(243, 239, 231, 0.09);
  --accent: #F2731A;      /* orange action (CTAs, accents) */
  --link: #F0894C;        /* lighter orange for small accent text on charcoal */
  --chart: #C4CBDB;       /* pale slate for data lines/bars — data never goes orange */
  --c-content: #6EA8FF;   /* azure (dark-ground grade) */
  --c-marketing: #A89BFF; /* iris (dark-ground grade) */
  --c-sales: #46C79A;     /* green (dark-ground grade) */
  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: "FH Total Display", "Instrument Serif", Georgia, serif;
  --mono: "Fragment Mono", ui-monospace, monospace;
}

/* ---------- design tokens · spacing / radius / motion / z ----------
   Three-layer system (ui-ux-pro-max + design-system skills):
   primitives here, semantic aliases below them, component rules
   reference tokens only. 4px base; art-directed hero geometry
   (sphere, building clamps) intentionally stays literal. */
:root {
  /* primitives — spacing (4px base, used steps only) */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-18: 72px; --sp-20: 80px;
  --sp-24: 96px; --sp-32: 128px;
  /* primitives — radius */
  --r-chip: 6px; --r-panel: 10px; --r-field: 12px;
  --r-inset: 14px; --r-card: 20px; --r-pill: 999px;
  /* primitives — motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* entrances, reveals */
  --ease-press: cubic-bezier(0.23, 1, 0.32, 1); /* hover / press micro */
  --ease-sweep: cubic-bezier(0.3, 0, 0.2, 1);   /* sheen sweeps */
  --dur-press: 110ms; --dur-micro: 150ms; --dur-reveal: 900ms;
  /* primitives — layers */
  --z-nav: 50; --z-drawer: 90; --z-modal: 200;
  /* semantic */
  /* ONE page column shared by nav + every section. 1340px centered on a
     1920px screen leaves ~290px (~15%) each side — the 15/70/15 ratio. */
  --container: 1340px;
  /* hero + nav spread wider than the page container: on big screens the copy
     moves left and the building right (breathing room instead of a dead-center
     cluster), capped so ultra-wide monitors don't throw them to the horizons.
     1660 (not 1720) leaves ~15% more air at the screen edges at 1920.
     90vw (not 100%) keeps a ~5% margin on EVERY side down the desktop band, so
     below 1660 the frame no longer collapses to the gutter and dumps all the
     slack into the centre — the 1920 proportion holds as the viewport shrinks. */
  --container-hero: min(1660px, 90vw);
  --section-y: var(--sp-32);         /* vertical band rhythm */
  --section-head-gap: var(--sp-16);  /* section heading → content */
  --gutter: var(--sp-8);             /* page side padding */
  --grid-gap: var(--sp-6);           /* card grids */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-synthesis-weight: none;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(222, 89, 32, 0.35); }
em, .hl { font-style: normal; }
.hl { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--link); }

/* ---------- nav (full-width bar) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
}
/* The intro slide lives on .nav-bar, NOT .nav. A transform on .nav (even the
   identity translateY(0) the animation settles on) makes it a "backdrop root",
   which silently defeats .nav-bar's backdrop blur — the tint shows but the
   content behind stays sharp. Keeping the transform on the same element that
   owns the backdrop-filter is safe (the standard glass-card pattern). */
@keyframes nav-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
/* Monaco-style floating pill: the whole bar is a rounded glass container
   inset from the screen edges — always visible, deepens on scroll */
.nav { padding: 14px clamp(16px, 2vw, 28px) 0; }
.nav-bar {
  /* compact Monaco pill — hugs its content, NOT the page container. Capped so
     it stays a tidy centered bar on wide screens instead of spanning the hero.
     Surfaces are token-driven (color-mix on --bg/--line) so the bar stays
     coherent on team.html's pinned dark tokens too. */
  max-width: min(1040px, 100%); margin: 0 auto;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  opacity: 0;
  animation: nav-in var(--dur-reveal) var(--ease-out) 0.15s forwards;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* links left · logo dead-center · CTA right. Equal 1fr side columns keep the
   logo perfectly centered regardless of how wide either cluster is. */
.nav-inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  /* taller pill; the heavier TOP padding drops the whole row a touch lower
     inside the bar (asymmetric 20/14) so the content isn't hugging the top */
  padding: 20px clamp(20px, 1.8vw, 30px) 14px;
  transition: padding 0.35s ease;
}
.nav-left {
  display: flex; align-items: center; gap: clamp(18px, 2vw, 30px);
  justify-self: start;
}
.nav.scrolled .nav-inner {
  padding-top: 13px; padding-bottom: 11px;
}
.nav.scrolled .nav-bar {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
}
.logo {
  position: relative;
  display: flex; align-items: center;
  color: var(--ink); text-decoration: none;
  transition: transform 0.3s var(--ease-out), filter 0.3s ease;
}
.logo img { height: 34px; width: auto; display: block; position: relative; z-index: 1; }
/* logo hover: a subtle lift only — the old blue radial glow was removed */
@media (hover: hover) and (pointer: fine) {
  .logo:hover { transform: scale(1.04); filter: brightness(1.08); }
}
.nav-right { display: flex; align-items: center; gap: 24px; justify-self: end; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  position: relative;
  display: inline-flex; align-items: center;
  color: var(--ink-soft); text-decoration: none;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: 3px;
  transition: color 0.25s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--link), transparent);
  transition: right 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--link); }
  .nav-links a:hover::after { right: 0; }
}
/* no shimmer sweep — the pulsing dot carries the "live" signal on its own;
   sized up from 11px so it actually reads at a glance */
.hiring {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;   /* match the nav links */
  color: var(--ink-soft);
  white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  a.hiring:hover { color: var(--ink); }
}
.hiring-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-sales);
  animation: hiring-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hiring-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,158,128,.45); } 50% { box-shadow: 0 0 0 6px rgba(31,158,128,0); } }

.nav-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: clamp(13px, 0.75vw, 14.5px); font-weight: 650;
  color: #fff; text-decoration: none; cursor: pointer;
  padding: clamp(8px, 0.6vw, 10px) clamp(9px, 0.7vw, 10px) clamp(8px, 0.6vw, 10px) clamp(17px, 1.2vw, 20px);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #4a6bff 0%, #3D5BE0 50%, #2f49c4 100%);
  border: 1px solid rgba(160, 180, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 4px 16px -4px rgba(61, 91, 224, 0.5);
  transition: transform var(--dur-micro) var(--ease-press), box-shadow 0.3s ease;
}
.nav-cta-sheen {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-16deg);
  pointer-events: none;
}
.nav-cta-label { position: relative; z-index: 1; }
.nav-cta-arrow {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(20px, 1.5vw, 23px); height: clamp(20px, 1.5vw, 23px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.3s ease, transform 0.35s var(--ease-press);
}
.nav-cta-arrow svg { width: 11px; color: #fff; }
.nav-cta:active { transform: scale(0.97); transition-duration: var(--dur-press); }
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      0 8px 22px -4px rgba(61, 91, 224, 0.65);
  }
  .nav-cta:hover .nav-cta-arrow { background: rgba(255, 255, 255, 0.26); transform: translateX(2px); }
  .nav-cta:hover .nav-cta-sheen { animation: cta-sheen 0.85s var(--ease-sweep); }
}

/* ---------- hamburger + mobile drawer ---------- */
.nav-hamburger {
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0; margin-left: 2px;
  cursor: pointer;
  /* visible pill so the control reads clearly against the bar */
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 11px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-hamburger:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
.nav-hamburger span {
  display: block; width: 19px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: rgba(20, 18, 14, 0.42);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  width: 78vw; max-width: 320px;
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(28, 26, 21, 0.22);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px;
  padding: 100px 28px 40px;
  transform: translateX(100%);
  /* closed = out of the tab order too (visibility flips after the slide) */
  visibility: hidden;
  transition: transform 0.38s var(--ease-out), visibility 0s 0.38s;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; transition: transform 0.38s var(--ease-out); }
.mobile-menu a {
  font-weight: 500; font-size: 15px; color: var(--ink);
  text-decoration: none; width: 100%;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateX(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.open a { opacity: 1; transform: translateX(0); }
.mobile-menu.open a { transition-delay: 0.08s; }
.mobile-hiring {
  margin-top: 2px;
  opacity: 0; transform: translateX(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.open .mobile-hiring { opacity: 1; transform: translateX(0); transition-delay: 0.14s; }
.mobile-waitlist {
  width: 100%; justify-content: center; margin-top: 6px;
  border: none; cursor: pointer;
  opacity: 0; transform: translateX(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.open .mobile-waitlist { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }

/* ---------- waitlist modal · request early access ----------
   Two-panel overlay: form (shadcn-style fields on the Midnight Ledger
   tokens) + contact/trust aside. The overlay scrolls when the dialog is
   taller than the viewport (margin:auto centering avoids the flexbox
   top-clip that align-items:center causes on overflow). */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex;
  overflow-y: auto;
  padding: clamp(16px, 3vh, 36px) 20px;
  background: rgba(20, 18, 14, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  position: relative;
  margin: auto;
  width: 100%; max-width: 940px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 32px 80px -32px rgba(28, 26, 21, 0.4);
  padding: clamp(var(--sp-6), 3.2vw, var(--sp-10));
  text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(var(--sp-6), 3vw, var(--sp-12));
  align-items: start;
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  color: var(--mut); cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.modal-close svg { width: 12px; }
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 24%, transparent); }
}
/* header block is centered within the form column (eyebrow centers via its
   own flex defaults; the sub's auto margins keep it centered at any width) */
/* serif display voice, same family as .h-xl/.h-lg so the dialog heading
   speaks the site's heading language (one font, no sans/serif mix) */
.modal h3 {
  font-family: var(--serif);
  font-size: clamp(25px, 2.3vw, 31px); font-weight: 400;
  letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 8px;
  text-align: center;
}
.modal-sub {
  color: var(--mut); font-size: 14.5px; max-width: 44ch;
  margin: 0 auto var(--sp-6); text-align: center;
}

.ea-form { display: flex; flex-direction: column; }
.ea-form[hidden] { display: none; }
.ea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.ea-span2 { grid-column: 1 / -1; }

/* --- shadcn-style field primitives (Label / Input / Textarea / Select) --- */
.sh-field { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sh-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; font-weight: 600; line-height: 1; color: var(--ink-soft);
}
.sh-optional {
  font-family: var(--mono); font-weight: 400;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mut);
}
.sh-input, .sh-textarea, .sh-select {
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-field);
  background: var(--raised);
  color: var(--ink); font-family: var(--font); font-size: 14.5px; line-height: 1.4;
  transition: border-color var(--dur-micro) var(--ease-press),
              box-shadow var(--dur-micro) var(--ease-press);
}
.sh-textarea { height: auto; min-height: 104px; padding: 11px 14px; resize: vertical; }
.sh-input::placeholder, .sh-textarea::placeholder { color: color-mix(in srgb, var(--ink) 42%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .sh-input:hover, .sh-textarea:hover, .sh-select:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
}
/* shadcn focus ring (border + 3px soft ring) replaces the global outline */
.sh-input:focus-visible, .sh-textarea:focus-visible, .sh-select:focus-visible,
.sh-select[aria-expanded="true"] {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* invalid state (set via aria-invalid, shadcn-style) */
.sh-input[aria-invalid="true"], .sh-select[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--neg) 62%, transparent);
}
.sh-input[aria-invalid="true"]:focus-visible,
.sh-select[aria-invalid="true"]:focus-visible {
  border-color: color-mix(in srgb, var(--neg) 75%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 18%, transparent);
}

/* select trigger */
.sh-select {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; cursor: pointer;
}
.sh-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-select.is-placeholder .sh-select-value { color: color-mix(in srgb, var(--ink) 42%, transparent); }
.sh-select-chevron { width: 14px; flex: none; color: var(--mut); transition: transform 0.2s var(--ease-press); }
.sh-select[aria-expanded="true"] .sh-select-chevron { transform: rotate(180deg); }

/* select popover + listbox */
.sh-popover {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  padding: 5px;
  box-shadow: 0 18px 44px -18px rgba(28, 26, 21, 0.28), 0 4px 14px rgba(28, 26, 21, 0.1);
  transform-origin: top center;
  animation: sh-pop-in 0.16s var(--ease-out);
}
.sh-popover.up {
  top: auto; bottom: calc(100% + 6px);
  transform-origin: bottom center;
  animation-name: sh-pop-in-up;
}
.sh-popover[hidden] { display: none; }
@keyframes sh-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes sh-pop-in-up { from { opacity: 0; transform: translateY(4px) scale(0.97); } to { opacity: 1; transform: none; } }
.sh-listbox {
  max-height: 256px; overflow-y: auto; outline: none;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent;
}
.sh-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-chip);
  font-size: 14px; color: var(--ink-soft); cursor: pointer;
  transition: background var(--dur-press) var(--ease-press), color var(--dur-press) var(--ease-press);
}
.sh-option.is-active { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.sh-check { width: 14px; flex: none; color: var(--link); opacity: 0; }
.sh-option[aria-selected="true"] .sh-check { opacity: 1; }

.ea-form-error { margin-top: var(--sp-4); }
/* doubled class beats .cta-premium's later-in-file rules of equal specificity */
.cta-premium.ea-submit {
  width: 100%; margin-top: var(--sp-5);
  padding-top: 13px; padding-bottom: 13px;
  /* stretched to form width, the 165deg sheen floods the left half —
     re-aim it straight down so the glow stays a top edge */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.09) 0% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, var(--accent) 0% 100%);
}

/* --- aside: contact + trust (mirrors the form's card language) --- */
.ea-aside { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: 46px; }
.ea-card {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-inset);
  padding: var(--sp-5);
}
.ea-card-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--link);
  margin-bottom: 12px;
}
.ea-card-icon svg { width: 18px; }
.ea-card h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.ea-card p { font-size: 13.5px; color: var(--mut); line-height: 1.5; }
/* click-to-copy address — simple secondary pill (retired the liquid-metal
   chip here; the footer keeps its .lqm). Toast feedback comes from waitlist.js */
.ea-mail-copy {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 9px 14px; line-height: 1;
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.ea-mail-copy .ea-mail-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-mail-copy svg { width: 13px; height: 13px; flex: none; color: var(--mut); }
.ea-mail-copy:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .ea-mail-copy:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: color-mix(in srgb, var(--ink) 24%, transparent); }
  .ea-mail-copy:hover svg { color: var(--ink); }
}
.ea-points { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.ea-points li { display: flex; gap: 12px; }
/* explicit height: an auto-height svg stretches to the flex row and its
   drawing paints centered — pin it so the icon hugs the title line */
.ea-points svg { width: 17px; height: 17px; flex: none; color: var(--c-sales); margin-top: 1px; }
.ea-points strong { display: block; font-size: 14px; margin-bottom: 2px; }
.ea-points span { font-size: 12.5px; color: var(--mut); line-height: 1.45; }
.ea-proof {
  display: flex; align-items: center; gap: 9px; padding: 0 4px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}

/* --- success state: confirmation + what-happens-next timeline ---
   Replaces the form in its column after a 2xx submit; .is-success on
   .ea-main hides the "Join the waitlist" header so this owns the column
   (pattern ref: Mercury application timeline / Hims "what's next"). */
.ea-main.is-success > h3, .ea-main.is-success > .modal-sub { display: none; }
/* framed panel: a blurred Higgsfield ember image sits behind the timeline,
   same image + scrim language as .proof-stage. isolation keeps the abs
   layers stacking against this box, not the modal. */
.waitlist-success {
  position: relative; isolation: isolate; overflow: hidden;
  outline: none;
  border-radius: var(--r-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: clamp(24px, 2.4vw, 36px);
  /* designed fallback ground if the image is missing / still loading */
  background:
    radial-gradient(52% 34% at 50% 8%, rgba(222, 89, 32, 0.16), transparent 72%),
    linear-gradient(180deg, #272220, #1C1815 60%, #1A1613);
}
.waitlist-success[hidden] { display: none; }
.ws-bg { position: absolute; inset: 0; z-index: 0; }
.ws-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* warm-dark wash + a soft top-center light so the badge/title read and the
   step copy keeps contrast against the photo */
.ws-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(56% 40% at 50% 12%, rgba(222, 89, 32, 0.1), transparent 68%),
    linear-gradient(180deg, rgba(23, 19, 16, 0.58), rgba(23, 19, 16, 0.5) 40%, rgba(23, 19, 16, 0.74) 100%);
}
.ws-head, .ws-steps { position: relative; z-index: 2; }

.ws-head { text-align: center; margin-bottom: var(--sp-6); }
.ws-badge {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: var(--c-sales);
  background: color-mix(in srgb, var(--c-sales) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-sales) 36%, transparent);
  animation: wsPop 0.5s var(--ease-out) both;
}
.ws-badge svg { width: 22px; }
/* same serif voice + scale as the modal h3 it replaces */
.ws-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(25px, 2.3vw, 31px); letter-spacing: -0.01em; line-height: 1.1;
  margin-bottom: 8px;
}
.ws-sub { color: var(--mut); font-size: 14.5px; max-width: 44ch; margin: 0 auto; }

.ws-steps { list-style: none; display: flex; flex-direction: column; }
.ws-step {
  position: relative; display: grid; grid-template-columns: 30px 1fr;
  gap: 14px; padding-bottom: var(--sp-5);
  animation: wsIn 0.55s var(--ease-out) both;
}
.ws-step:last-child { padding-bottom: 0; }
.ws-step:nth-child(1) { animation-delay: 0.1s; }
.ws-step:nth-child(2) { animation-delay: 0.22s; }
.ws-step:nth-child(3) { animation-delay: 0.34s; }
.ws-step:nth-child(4) { animation-delay: 0.46s; }
/* connecting rail between a dot's bottom edge and the next dot */
.ws-step:not(:last-child)::before {
  content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 4px;
  width: 1px; background: var(--line);
}
.ws-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line);
}
.ws-dot svg { width: 14px; }
.ws-step.is-done .ws-dot { color: var(--bg); background: var(--c-sales); border-color: var(--c-sales); }
.ws-step.is-next .ws-dot {
  color: var(--link);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
}
.ws-body strong {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; margin: 5px 0 3px;
}
.ws-body span { display: block; font-size: 13px; color: var(--mut); line-height: 1.5; }
/* future stages sit back until they're reached */
.ws-step:not(.is-done):not(.is-next) .ws-body strong { color: var(--ink-soft); }
.ws-tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--link); padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.ws-tag-done {
  color: var(--c-sales);
  border-color: color-mix(in srgb, var(--c-sales) 34%, transparent);
  background: color-mix(in srgb, var(--c-sales) 9%, transparent);
}
@keyframes wsPop { from { transform: scale(0.6); opacity: 0; } }
@keyframes wsIn { from { transform: translateY(10px); opacity: 0; } }

/* modal responsive: aside stacks under the form, fields go single-column */
@media (max-width: 880px) {
  .modal { grid-template-columns: 1fr; max-width: 560px; gap: var(--sp-6); }
  .ea-aside { padding-top: var(--sp-6); border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .ea-grid { grid-template-columns: 1fr; }
  .ea-span2 { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-popover, .sh-popover.up { animation: none; }
  .ws-badge, .ws-step { animation: none; }
}

/* ---------- shared bits ---------- */
.button {
  display: inline-flex; align-items: center; gap: clamp(8px, 0.6vw, 11px);
  background: var(--accent); color: #fff;
  font-size: clamp(15px, 1vw, 19px); font-weight: 600; text-decoration: none;
  padding: clamp(13px, 1vw, 18px) clamp(24px, 1.8vw, 34px); border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform var(--dur-micro) var(--ease-press), background 0.25s ease, box-shadow 0.25s ease;
}
.button svg { width: clamp(15px, 1vw, 18px); }
.button:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.button.ghost {
  background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink);
  border: 1px solid var(--line);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 86%, #1C1A15); }
  .button.ghost:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: none; }
}

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: clamp(11px, 0.65vw, 13px); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--link);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding: clamp(7px, 0.5vw, 9px) clamp(16px, 1.1vw, 20px); border-radius: var(--r-pill);
}

.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--link); margin-bottom: 18px;
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }

.d { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.d.c { background: var(--c-content); }
.d.m { background: var(--c-marketing); }
.d.s { background: var(--c-sales); }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
/* display headings speak in the primary serif voice (Cormorant Garamond);
   serifs want gentler tracking than the old grotesk cuts */
.h-xl { font-family: var(--serif); font-size: clamp(46px, 6.4vw, 84px); font-weight: 400; letter-spacing: -0.012em; line-height: 1.04; }
.h-lg { font-family: var(--serif); font-size: clamp(38px, 5vw, 62px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; }
.body { color: var(--mut); font-size: clamp(16px, 1.5vw, 18.5px); max-width: 620px; margin: 22px auto 0; }

/* ============================================================
   HERO — Ember Ledger: one story, told in type. Centered display
   serif on warm charcoal (#1D1A19); the second line dims to half
   volume (Rox/Grok treatment). Faint orbit rings + an ember bloom
   sit behind; a quiet hairline stats strip closes the section.
   ============================================================ */
.hero {
  position: relative;
  /* intentionally NOT full-viewport: the framed proof stage below peeks
     ~40% into the first screen as the scroll cue */
  display: flex; flex-direction: column;
  overflow: hidden;
  background-color: var(--bg);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* construction-guide hairlines — exact Artisan hero geometry (measured
   off their 3456×1020 graphic: 2px strokes @ ~6% alpha), re-inked in
   bone for the charcoal ground. Anchored like theirs: full-width band
   a beat below the nav, scaling with the viewport. */
.hero-guides {
  position: absolute; left: 0; right: 0; top: clamp(90px, 13vh, 150px);
  width: 100%; height: auto;
  color: var(--ink); opacity: 0.06;
}
.hero-guides circle, .hero-guides path { stroke: currentColor; stroke-width: 2; }

/* ----- section construction-guide plates (V9.9c) -----
   Same guide-line vocabulary as the hero (circles, squares, crosshairs,
   node joints, plus marks — the Artisan blueprint language), but each
   section's plate is our own composition. z:-1 + isolation on the host
   section keeps a plate above the section's ground and below its copy. */
.features, .loop, .mcp, .cmp, .faq { isolation: isolate; }
.sec-guides {
  position: absolute; pointer-events: none; z-index: -1;
  color: var(--ink); opacity: 0.055;
}
.sec-guides circle, .sec-guides path, .sec-guides rect {
  stroke: currentColor; stroke-width: 1; fill: none;
  vector-effect: non-scaling-stroke;
}
.sg-features { top: 24px;  right: 0;   width: min(44vw, 620px); height: auto; }
.sg-loop     { top: 48px;  left: 0;    width: min(42vw, 600px); height: auto; }
.sg-mcp      { top: 64px;  right: 24px; width: min(40vw, 540px); height: auto; }
.sg-cmp      { top: 28px;  left: 0;    width: min(44vw, 600px); height: auto; }
.sg-faq      { bottom: 48px; right: 0; width: min(40vw, 540px); height: auto; }
/* dark-card variants (Artisan's interview-card move): white ink INSIDE a
   framed stage, above its photo/scrim layers, below the content */
.sg-proof { z-index: 1; top: -1px; left: -1px; width: min(34vw, 420px); height: auto;
            color: #F3EFE7; opacity: 0.07; }
.sg-tsm   { z-index: 0; top: 0; left: 0; height: 100%; width: auto;
            color: #F3EFE7; opacity: 0.08; }
@media (max-width: 960px) { .sec-guides { display: none; } }

/* ember bloom rising behind the CTA + a warm breath top-left */
.hero-bloom {
  position: absolute;
  left: 50%; bottom: -34%; transform: translateX(-50%);
  width: 84vw; height: 64vh;
  background: radial-gradient(ellipse at center,
    rgba(242, 115, 26, 0.11), rgba(242, 115, 26, 0.04) 46%, transparent 72%);
  filter: blur(12px);
}
.hero-bloom-warm {
  left: -14%; top: -18%; bottom: auto; transform: none;
  width: 54vw; height: 52vh;
  background: radial-gradient(ellipse at center,
    rgba(214, 143, 66, 0.05), rgba(214, 143, 66, 0.02) 48%, transparent 74%);
}
/* melt into the page floor */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 80%, var(--bg) 100%);
}

/* ----- layout: one centered column; the foot strip sits at the fold -----
   copy starts at the 25th percentile of the viewport — generous air above,
   tighter below (client call) */
.hero-inner {
  position: relative; z-index: 3;
  display: flex; align-items: flex-start; justify-content: center;
  text-align: center;
  padding: max(25vh, 130px) var(--gutter) clamp(56px, 8vh, 96px);
  max-width: var(--container-hero); width: 100%; margin: 0 auto;
}
.hero-copy {
  display: flex; flex-direction: column; align-items: center;
  max-width: 1080px;
}
.hero-inner h1 {
  font-family: var(--serif);
  /* client ask: the whole statement reads BOLD. Instrument Serif ships
     400-only, so weight is synthesized until FH Total Display lands */
  font-weight: 700;
  font-synthesis-weight: auto;
  font-size: clamp(31px, 3.9vw, 62px);
  letter-spacing: -0.012em; line-height: 1.1;
  text-wrap: balance;
}
/* medium, not bold: Instrument Serif ships 400-only and synthesized 700
   reads heavy — a hairline stroke fattens the 400 cut to a rox.com-style
   middle weight instead */
.hl-main {
  font-weight: 400; color: var(--ink);
  -webkit-text-stroke: 0.55px currentColor;
}
/* the promise line: same voice, half volume */
.hl-dim { font-weight: 400; color: color-mix(in srgb, var(--ink) 42%, transparent); }
/* (legacy accent kept for older markup) */
.hl-accent { font-style: italic; font-weight: 400; color: var(--link); }
/* word-by-word entrance: each word rides up out of an overflow-clipped box */
.hero-h1 .w { display: inline-block; overflow: hidden; vertical-align: top; }
.hero-h1 .w > span {
  display: inline-block; will-change: transform;
  transform: translateY(112%);
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) var(--wd, 0s);
}
.hero-h1.words-in .w > span { transform: translateY(0); }
.hero-ctas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, 0.9vw, 16px);
  margin-top: clamp(38px, 3.4vw, 54px);
}

/* category label above the headline — a bordered pill framing the tag,
   led by a glowing orange dot instead of the old hairline.
   10px fixed (client call: quieter). */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: clamp(18px, 2.4vh, 28px);
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 70%, transparent);
}


/* ============================================================
   PROOF STAGE — "While you were away."
   A white-stroked film frame holding a blurred freedom image;
   the gradient ORB (the system) sits center, the outcome cards
   orbit it on glass frames. A radial vignette keeps the center
   bright and lets the edges fall into the dark — everything
   radiates from the thing doing the work. Top ~40% of the frame
   peeks into the first viewport as the scroll cue.
   ============================================================ */
.proof.solid { padding: clamp(28px, 4vh, 52px) 0 var(--section-y); background: var(--bg); }
.proof-stage {
  position: relative;
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* designed ground: calm warm gradient, one ember bloom behind the orb */
  background:
    radial-gradient(46% 32% at 50% 15%, rgba(222, 89, 32, 0.13), transparent 72%),
    radial-gradient(64% 42% at 50% 108%, rgba(222, 89, 32, 0.05), transparent 70%),
    linear-gradient(180deg, #272220, #1C1815 56%, #1A1613);
  text-align: left;
  display: flex; flex-direction: column;
  /* content-hugging: tall enough to breathe, no dead bands top/bottom */
  min-height: clamp(500px, 70vh, 740px);
}
/* the Higgsfield freedom image sits over the designed ground */
.ps-bg { position: absolute; inset: 0; z-index: 0; }
.ps-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* scrim: warm-dark wash + a soft center light so the orb reads and the
   glass cards keep contrast against the photo */
.ps-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(52% 40% at 50% 30%, rgba(222, 89, 32, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(23, 19, 16, 0.62), rgba(23, 19, 16, 0.44) 42%, rgba(23, 19, 16, 0.7) 100%);
}
.ps-grid {
  --pch: clamp(178px, 24vh, 212px);
  position: relative; z-index: 2;
  flex: 1; width: 100%;
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* rows pack around the orb (tracks would otherwise stretch to fill
     the stage) — card gaps carry the rhythm, not the stage's edges */
  gap: clamp(16px, 2.4vh, 26px) clamp(14px, 1.6vw, 24px);
  align-items: center;
  align-content: center;
  padding: clamp(16px, 2.6vh, 30px) clamp(20px, 2.8vw, 44px) clamp(22px, 3.4vh, 40px);
}
/* client rule: ONE height for every frame — only widths may vary */
.pcard {
  position: relative;
  height: var(--pch);
  display: flex; flex-direction: column;
  --pc-pad: clamp(13px, 1.1vw, 16px);
  padding: var(--pc-pad);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 60%),
    rgba(26, 22, 19, 0.46);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-inset);
  overflow: hidden;
}
.pc-revenue  { grid-column: 1 / 5;  grid-row: 1; }
.pc-call     { grid-column: 9 / 13; grid-row: 1; }
.pc-spend    { grid-column: 1 / 5;  grid-row: 2; }
.pc-summary  { grid-column: 5 / 9;  grid-row: 2; }
.pc-quote    { grid-column: 9 / 13; grid-row: 2; }
.pc-strip    { grid-column: 1 / 13; grid-row: 3; }
.ps-center {
  grid-column: 5 / 9; grid-row: 1;
  height: var(--pch);
  display: flex; align-items: center; justify-content: center;
}

/* ----- the orb: the system itself. Translucent sheets of colored
   light drifting behind frosted glass (WebGL, orb.js); the CSS
   .orb-fallback layer below is what non-WebGL visitors see.
   The silhouette never moves — only the interior lives. ----- */
.ps-orb { position: relative; z-index: 3; width: clamp(140px, 15vw, 200px); aspect-ratio: 1; }
/* faint halo the object casts on the stage — barely breathing, half-minute period */
.ps-orb .orb-aura {
  position: absolute; inset: -32%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(238, 122, 48, 0.36), rgba(222, 89, 32, 0.16) 48%, transparent 74%);
  filter: blur(28px) saturate(1.15);
  opacity: 0.42;
  animation: orb-halo 13s ease-in-out infinite;
  transition: filter 0.5s ease;
}
/* the booked-meeting signal reaching the halo */
.ps-orb.flare .orb-aura { filter: blur(28px) saturate(1.35) brightness(1.8); }
@keyframes orb-halo {
  0%, 100% { opacity: 0.34; }
  50% { opacity: 0.52; }
}
.ps-orb .orb-gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; border-radius: 50%;
}
/* no-WebGL fallback: the same layered-light composition, still */
.ps-orb .orb-fallback {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(120% 120% at 32% 26%, rgba(255, 240, 218, 0.85), rgba(255, 240, 218, 0) 42%),
    radial-gradient(95% 95% at 72% 32%, rgba(249, 164, 54, 0.55), rgba(249, 164, 54, 0) 58%),
    radial-gradient(115% 115% at 66% 76%, #DE5920, rgba(222, 89, 32, 0) 64%),
    radial-gradient(135% 135% at 26% 78%, #C24312, rgba(194, 67, 18, 0) 68%),
    #611D06;
  box-shadow:
    inset 0 0 clamp(18px, 2vw, 30px) rgba(66, 18, 4, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.ps-orb.is-live .orb-fallback { display: none; }

/* ============================================================
   ENGINE CARDS — each plays its full work cycle on loop.
   content:   research -> create -> measure (12K views, up 12%)
   marketing: understand -> personalize -> convert (4.8%, up 1.2pt)
   proof.js drives [data-state]; CSS renders it.
   ============================================================ */
.pc-head { display: flex; align-items: center; justify-content: space-between; }
.pc-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--mut);
}
.pc-label svg { width: 13px; height: 13px; opacity: 0.85; flex: none; }
/* ----- outcome stat cards: label · big number · delta · chart.
   The stage now leads with RESULTS (client call) — no process theatre. */
.pc-stat { justify-content: flex-start; }
.pc-up {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: var(--c-sales);
  background: color-mix(in srgb, var(--c-sales) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-sales) 26%, transparent);
  padding: 3px 8px; border-radius: 999px;
}
.pc-up svg { width: 11px; height: 11px; }

/* ----- the content card: Instagram and YouTube as two SEPARATE blocks
   with real air between them (client call). Marks only — no names. */
.soc-split {
  flex: 1; min-height: 0;
  display: flex; gap: 12px;
}
.soc-block {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: 10px 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-inset);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  overflow: hidden;
}
.soc-brow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.soc-logo { flex: none; width: 26px; height: 26px; display: block; }
.soc-val {
  margin-top: 8px;
  font-size: clamp(19px, 1.5vw, 24px); font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
  white-space: nowrap;
}
.soc-sub { margin-top: 3px; font-size: 10.5px; color: var(--mut); }
/* each wave runs under its block's side + bottom edges */
.soc-chart {
  flex: 1; min-height: 0; margin: 6px -12px 0;
  width: calc(100% + 24px); display: block;
}

/* ----- the spend card: where the money went, and that there's less of it ----- */
.spend-body {
  flex: 1; min-height: 0; margin-top: 10px;
  display: flex; align-items: center; gap: 18px;
}
/* donut, not a flat pie: gapped round-capped arcs, spend in the middle.
   Arcs are DATA — slate family, never orange */
.spend-donut {
  position: relative; flex: none;
  width: clamp(86px, 11vh, 106px); aspect-ratio: 1;
}
.spend-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.sd-track { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 9; }
.sd-seg {
  fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: var(--v) calc(100 - var(--v));
  stroke-dashoffset: calc(0px - var(--o));
}
.sd-mid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; text-align: center;
}
.sd-mid b { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sd-mid small { font-size: 8.5px; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.spend-legend {
  list-style: none; margin: 0; padding: 0;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.spend-legend li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-soft);
}
.spend-legend li i { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.spend-legend li b { margin-left: auto; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* the spend readout under the pie: down is the good direction here */
.spend-note {
  margin: 10px 0 0; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--mut);
}

/* ----- the sales-call card: the day's tally, then the live call ----- */
.pc-call { justify-content: flex-start; }
.call-list {
  list-style: none; margin: 8px 0 0; padding: 0;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
.call-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-soft);
}
.call-list b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-check {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-sales);
  background: color-mix(in srgb, var(--c-sales) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-sales) 30%, transparent);
}
.cl-check svg { width: 9px; height: 9px; }
/* compact cousin of the features .sales-call pill (same orb + voice bars) */
.pcall-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(14, 11, 10, 0.55);
}
/* the SAME ember orb as center stage (the render, not a CSS stand-in);
   waveform + timer hold still — the stage's only motion is the orb itself */
.pcall-orb { flex: none; width: 30px; height: 30px; border-radius: 50%; display: block; }
.pcall-bar .call-bars i { animation: none; }
.pcall-time {
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pcall-bar .scb-meta b { font-size: 12.5px; }
.pcall-bar .scb-meta small { font-size: 10.5px; }
/* ----- the summary: a white paper readout — an image, not a widget ----- */
.pc-summary {
  background: #F5EBD8;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 15px 16px 13px;
  overflow: visible;
  /* the glimpse rises out of its row so the tail points at the orb —
     close, but never overlapping it (client call) */
  margin-top: -8px;
  z-index: 4;
}
/* the tail: the glimpse is the orb speaking — a bubble arrowhead
   pointing straight up at it */
.pc-summary::after {
  content: "";
  position: absolute; left: 50%; top: -8px;
  width: 17px; height: 17px;
  transform: translateX(-50%) rotate(45deg);
  background: #F5EBD8;
  border-left: 1.5px solid rgba(255, 255, 255, 0.9);
  border-top: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 7px 2px 1px 2px;
}
.sum-head {
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 9px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(58, 46, 34, 0.13);
}
.sum-hey {
  font-family: var(--serif); font-size: 17px; line-height: 1.15;
  font-weight: 700; font-synthesis-weight: auto;
  color: #B7521D; text-align: center;
}
.sum-rows {
  list-style: none; margin: 0; padding: 0;
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px;
}
.sum-rows li { display: flex; align-items: center; gap: 9px; }
.sum-rows span { font-size: 12.5px; font-weight: 500; color: #3A2E22; white-space: nowrap; }
.sum-txt { flex: 1; min-width: 0; text-align: left; }
.sum-ic {
  flex: none; width: 23px; height: 23px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sum-ic svg { width: 12.5px; height: 12.5px; }
.ic-c { color: #2460BE; background: rgba(36, 96, 190, 0.12); }
.ic-m { color: #6748C9; background: rgba(103, 72, 201, 0.12); }
.ic-s { color: #12855B; background: rgba(18, 133, 91, 0.12); }
.sum-rows em { font-style: normal; font-weight: 700; }
/* engine colors, deepened for the cream paper */
.hi-c { color: #2460BE; }
.hi-m { color: #6748C9; }
.hi-s { color: #12855B; }
.sum-rows b {
  flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  border-radius: 7px; padding: 3.5px 7px;
  white-space: nowrap;
}
.sum-rows b svg { width: 11px; height: 11px; }
.tag-c { color: #2460BE; background: rgba(36, 96, 190, 0.13); }
.tag-m { color: #6748C9; background: rgba(103, 72, 201, 0.13); }
.tag-s { color: #12855B; background: rgba(18, 133, 91, 0.13); }
/* dummy CTA by design: it renders, it never reacts */
.sum-review {
  align-self: stretch; text-align: center;
  padding: 8px 15px;
  font-size: 12px; font-weight: 600; color: #3A2E22;
  border: 1.5px solid rgba(58, 46, 34, 0.38);
  border-radius: 999px;
  pointer-events: none; user-select: none;
}

/* ----- testimonial, small ----- */
.pc-quote { justify-content: space-between; }
.pc-quote .bn-stars svg { width: 18px; height: 18px; }
.pcq-text {
  margin: 0; flex: 1;
  display: flex; align-items: center;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4;
  color: var(--ink);
}
.pc-quote .bn-attr { margin-top: 0; gap: 9px; }
.pc-quote .bn-attr img { width: 28px; height: 28px; }
.pc-quote .bn-attr-meta b { font-size: 12.5px; }
.pc-quote .bn-attr-meta span { font-size: 11px; }

/* ----- the ledger line: one quiet strip of results under the machine.
   The tracer dot still rides the revenue line; the Meetings number is
   the cascade's landing point (proof.js ticks it 12 -> 13). ----- */
.pc-strip {
  height: auto;
  flex-direction: row; align-items: center;
  gap: clamp(16px, 2.2vw, 38px);
  padding: 15px clamp(16px, 2vw, 26px);
}
.ms-stat { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.ms-stat + .ms-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  padding-left: clamp(16px, 2.2vw, 38px);
}
.ms-core { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ms-label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mut); white-space: nowrap;
}
.ms-row { display: flex; align-items: baseline; gap: 8px; }
.ms-val {
  font-size: clamp(17px, 1.4vw, 21px); font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ms-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: var(--c-sales);
  white-space: nowrap;
}
.ms-delta svg { width: 11px; height: 11px; }
.ms-icons { display: inline-flex; align-items: center; gap: 5px; }
.ms-icons img { width: 13px; height: 13px; display: block; }
/* the cascade landing: number pops green for a beat */
.ms-meet .bn-num { display: inline-block; }
.ms-meet .bn-num.tick { animation: meet-pop 0.6s var(--ease-out); color: var(--c-sales); }
.ms-meet.flash .ms-label { color: var(--c-sales); transition: color 0.4s ease; }
@keyframes meet-pop {
  0% { transform: translateY(7px) scale(0.9); opacity: 0.3; }
  60% { transform: translateY(-2px) scale(1.12); }
  100% { transform: none; }
}
  .gs-review:hover svg { transform: translateX(3px); }
}

/* ----- shared readout bits (revenue card + testimonial) ----- */
.bn-label { font-size: 12.5px; font-weight: 500; color: var(--mut); }
.bn-value {
  font-size: clamp(24px, 1.9vw, 31px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 2px;
}
.bn-delta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mut); }
.bn-delta b { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--c-sales); }
.bn-delta b svg { width: 11px; height: 11px; }

/* line chart — slate ink, never orange. pathLength="1" makes dasharray unit */
.bn-chart { width: 100%; height: 70px; display: block; margin-top: 2px; }
.bn-chart .bn-line, .soc-chart .bn-line {
  fill: none; stroke: var(--chart); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.reveal.in .bn-chart .bn-line, .reveal.in .soc-chart .bn-line { animation: bn-draw 1.4s var(--ease-out) 0.45s forwards; }
.bn-chart .bn-area, .soc-chart .bn-area { opacity: 0; }
.reveal.in .bn-chart .bn-area, .reveal.in .soc-chart .bn-area { animation: intro-fade 0.9s var(--ease-out) 1.3s forwards; }
@keyframes bn-draw { to { stroke-dashoffset: 0; } }

/* ----- 5 stars + attribution (testimonial card) ----- */
.bn-stars { display: flex; gap: 4px; }
.bn-stars svg {
  width: 17px; height: 17px; color: #E8A33D;
  opacity: 0; transform: scale(0.5);
}
.reveal.in .bn-stars svg { animation: bn-star 0.5s var(--ease-out) calc(0.25s + var(--i, 0) * 0.11s) forwards; }
@keyframes bn-star { to { opacity: 1; transform: scale(1); } }
.bn-attr { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.bn-attr img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
.bn-attr-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bn-attr-meta b { font-size: 14px; font-weight: 700; color: var(--ink); }
.bn-attr-meta span { font-size: 12px; color: var(--mut); }

/* one shimmer for every skeleton/loading state (used by the feature cards) */
@keyframes fc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ----- modern CTA: gradient fill, glow, sheen sweep, sliding arrow chip ----- */
.cta-modern {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: clamp(10px, 0.7vw, 14px);
  padding: clamp(12px, 0.9vw, 16px) clamp(14px, 1vw, 18px) clamp(12px, 0.9vw, 16px) clamp(22px, 1.7vw, 30px);
  border-radius: var(--r-pill);
  font-family: var(--font); font-size: clamp(14px, 0.95vw, 17px); font-weight: 650;
  color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #4a6bff 0%, #3D5BE0 50%, #2f49c4 100%);
  border: 1px solid rgba(160, 180, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 24px -6px rgba(61, 91, 224, 0.55),
    0 2px 6px rgba(9, 12, 17, 0.4);
  transition: transform var(--dur-micro) var(--ease-press), box-shadow 0.3s ease;
}
.cta-label { position: relative; z-index: 2; letter-spacing: -0.005em; }
.cta-arrow {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(26px, 1.9vw, 32px); height: clamp(26px, 1.9vw, 32px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.3s ease, transform 0.35s var(--ease-press);
}
.cta-arrow svg { width: clamp(13px, 0.9vw, 16px); color: #fff; }
/* diagonal sheen that sweeps across on hover */
.cta-sheen {
  position: absolute; z-index: 1; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-16deg);
  pointer-events: none;
}
.cta-modern:active { transform: scale(0.975); }
@media (hover: hover) and (pointer: fine) {
  .cta-modern:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 14px 34px -8px rgba(61, 91, 224, 0.7),
      0 3px 10px rgba(9, 12, 17, 0.45);
  }
  .cta-modern:hover .cta-arrow { background: rgba(255, 255, 255, 0.26); transform: translateX(3px); }
  .cta-modern:hover .cta-sheen { animation: cta-sheen 0.85s var(--ease-sweep); }
}
@keyframes cta-sheen { from { left: -60%; } to { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .cta-modern, .cta-arrow { transition: none; }
  .cta-modern:hover .cta-sheen { animation: none; }
}

/* ----- PRIMARY CTA: flat burnt-orange pill — no gloss, no shadow (the
   flat-surface pass); feedback comes from color shift + press scale ----- */
.cta-premium {
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(6px, 0.5vw, 9px);
  padding: clamp(9px, 0.7vw, 12px) clamp(18px, 1.35vw, 26px);
  /* rounded rectangle, matching the hero .ch-cta (client: no full pills) */
  border: none; border-radius: 14px; outline: none; cursor: pointer;
  text-decoration: none;
  font-family: var(--font);
  /* the original glossy-pill formula on the burnt-orange base: black wash
     over a white top-glow over solid accent */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.09) 0% 100%),
    linear-gradient(165deg, #fff 7.42%, rgba(255, 255, 255, 0) 57.67%),
    linear-gradient(90deg, var(--accent) 0% 100%);
  transition: transform var(--dur-micro) var(--ease-press),
              filter 0.25s ease, opacity 0.15s ease;
}
.cta-premium-label {
  display: inline-flex; align-items: center; gap: clamp(6px, 0.45vw, 8px);
  color: #fff; font-weight: 600; font-size: clamp(14px, 0.95vw, 16px);
  letter-spacing: -0.005em; white-space: nowrap;
}
.cta-premium-label svg {
  width: clamp(13px, 0.9vw, 15px); color: #fff;
  transition: transform 0.32s var(--ease-press);
}
.cta-premium:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .cta-premium:hover {
    transform: translateY(-1px);
    filter: brightness(1.07);
  }
  .cta-premium:hover .cta-premium-label svg { transform: translate(1.5px, -1.5px); }
}
/* larger presence in the hero */
.cta-premium.is-hero { padding: clamp(11px, 0.85vw, 15px) clamp(22px, 1.7vw, 32px); }
.cta-premium.is-hero .cta-premium-label { font-size: clamp(15px, 1.05vw, 18px); }

/* (the old liquid-glass nav CTA variant was tuned for the dark hero and is
   retired — the glossy blue primary reads correctly on paper at every state) */
@media (prefers-reduced-motion: reduce) {
  .cta-premium, .cta-premium-label svg { transition: none; }
}

/* ----- LIQUID-METAL SECONDARY (ported from team.css — same system, so both
   navs share one look). A dark pill with a thin animated liquid-chrome rim +
   a brushed-silver label. The metal is a WebGL shader painted into .lqm-canvas;
   .lqm-face masks all but a 2px rim. .lqm background is a static metal
   gradient — the fallback if WebGL is absent. team.css re-declares these
   (team.html loads both sheets); values are identical so the cascade is a no-op. */
.lqm {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 26px;
  border-radius: 100px;
  border: none; outline: none;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(100deg,
    #6b7180 0%, #cfd6e6 20%, #8f97a8 40%, #eef2fb 55%, #9aa2b4 70%, #c7cddc 88%, #737a8a 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 36px 14px rgba(0, 0, 0, 0.02), 0 20px 12px rgba(0, 0, 0, 0.08),
    0 9px 9px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lqm-shell {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 100px; overflow: hidden;
}
/* ShaderMount injects its own <canvas> and sizes it in px — force it to fill */
.lqm-shell canvas {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  display: block !important; border-radius: 100px !important;
}
/* once the real shader is mounted, drop the static CSS-gradient fallback */
.lqm.lqm-live { background: #000; }
.lqm-face {
  position: absolute; inset: 2px; z-index: 1;
  border-radius: 100px;
  background: linear-gradient(180deg, #202020 0%, #000000 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.lqm-label {
  position: relative; z-index: 2;
  font-family: var(--font);
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  /* literal bone, NOT var(--ink): the .lqm-face beneath is always black
     chrome regardless of theme, so the label must stay light */
  color: #D7DBE4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.lqm:active { transform: translateY(1px) scale(0.985); }
.lqm.is-pressed .lqm-face {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
@media (hover: hover) and (pointer: fine) {
  .lqm:hover {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.4),
      0 12px 6px rgba(0, 0, 0, 0.05), 0 8px 5px rgba(0, 0, 0, 0.1),
      0 4px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);
  }
}
.lqm-ripple {
  position: absolute; z-index: 3;
  width: 20px; height: 20px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  animation: lqm-ripple 0.6s ease-out forwards;
}
@keyframes lqm-ripple { to { transform: translate(-50%, -50%) scale(4); opacity: 0; } }
/* nav-sized: smaller than the hero variant, fitted to the bar */
.nav-lqm { height: 40px; padding: 0 22px; }
.nav-lqm .lqm-label { font-size: 13px; }

/* ----- NAV CTA HAND-OFF -------------------------------------------------------
   Exactly ONE primary per viewport. While the hero's own orange primary is on
   screen the nav offers the quiet GHOST secondary; once the hero CTA scrolls
   under the bar (.past-hero, hero.js) the ghost slides up and out and the
   PRIMARY rises in from below. Both live stacked in one grid cell so the swap
   animates in place — no reflow. team.html's slot has no ghost, so its primary
   (plain .nav-waitlist, no sibling) shows at every scroll state unchanged. */
.nav-cta-slot {
  display: grid; place-items: center;
  /* clip radius must match the buttons inside (14px rounded rect) — a pill
     clip here re-rounds their corners into a mask artifact */
  overflow: hidden; border-radius: 14px;
}
.nav-cta-slot > .nav-ghost,
.nav-cta-slot > .nav-waitlist {
  grid-area: 1 / 1;
  transition: transform 0.5s var(--ease-out), opacity 0.42s ease,
              visibility 0s linear 0.5s, border-color 0.25s ease, background 0.25s ease;
}
/* ghost secondary — hairline pill in the bar's own voice */
.nav-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(6px, 0.5vw, 9px);
  height: 40px; padding: 0 22px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  /* rounded rectangle, matching the hero .ch-cta (client: no full pills) */
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink); cursor: pointer;
  font-family: var(--font); font-weight: 600;
  font-size: clamp(14px, 0.95vw, 16px); letter-spacing: -0.005em;
  white-space: nowrap;
}
.nav-ghost svg { width: clamp(13px, 0.9vw, 15px); }
@media (hover: hover) and (pointer: fine) {
  .nav-ghost:hover {
    border-color: color-mix(in srgb, var(--ink) 38%, transparent);
    background: color-mix(in srgb, var(--ink) 9%, transparent);
  }
}
/* in the hero: the primary parks below the bar, out of sight and tab order */
.nav-cta-slot > .nav-ghost + .nav-waitlist {
  transform: translateY(140%); opacity: 0;
  visibility: hidden; pointer-events: none;
}
/* past the hero: ghost up and out, primary in from the bottom */
.nav.past-hero .nav-cta-slot > .nav-ghost {
  transform: translateY(-140%); opacity: 0;
  visibility: hidden; pointer-events: none;
}
.nav.past-hero .nav-cta-slot > .nav-ghost + .nav-waitlist {
  transform: none; opacity: 1;
  visibility: visible; pointer-events: auto;
  transition-delay: 0s;
}
/* primary sized to sit in the bar */
.nav-waitlist { padding: 0 22px; height: 40px; }
@media (prefers-reduced-motion: reduce) {
  .nav-cta-slot > .nav-ghost, .nav-cta-slot > .nav-waitlist { transition: none; }
}

/* ----- intro cascade (copy) — no building to wait for anymore ----- */
.intro {
  opacity: 0;
  transform: translateY(26px);
  animation: intro-up var(--dur-reveal) var(--ease-out) var(--d, 0s) forwards;
}
h1 .line.intro { transform: none; animation: none; opacity: 1; }
/* fade-only reveal — a transform here would break the h1's background-clip:text */
h1 .line.intro > span {
  opacity: 0;
  animation: intro-fade 0.9s var(--ease-out) var(--d, 0s) forwards;
}
@keyframes intro-up { to { opacity: 1; transform: translateY(0); } }
@keyframes intro-fade { to { opacity: 1; } }


/* ============================================================
   SOLID SECTIONS
   ============================================================ */
.solid { position: relative; padding: var(--section-y) 0; background: var(--bg); }
.solid:nth-of-type(even) { background: var(--bg-2); }

.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * 0.12s),
              transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * 0.12s);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   FEATURES — horizontal engine rail v4 (client pass 2026-07-16)
   Hero-voice heading, then ONE white-stroked film frame holding a
   warm-dark blurred "freedom" photo; the three engine slides glide
   sideways inside it (~1.25 per viewport). Arrows + count moved
   BELOW the frame. No tag clouds, no vignettes, no glow, no
   backing shadows — the render and the copy sit close.
   ============================================================ */
.features {
  --fe-accent: var(--link);
  --fe-pill: var(--accent);
  padding: clamp(40px, 5vh, 64px) var(--gutter);
}
.features.solid { background: var(--bg); }

/* section head — the hero's voice: white statement, dimmed tail */
.feat-h2 {
  max-width: var(--container);
  margin: 0 auto clamp(22px, 3vh, 36px);
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 54px);
  letter-spacing: -0.012em; line-height: 1.1;
  text-wrap: balance;
}
.fh-main { color: var(--ink); }
.fh-dim  { color: color-mix(in srgb, var(--ink) 42%, transparent); }

/* ---------- the framed stage (proof-stage film-frame parity) ---------- */
.feat-frame {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  /* no outer stroke (client call) — each engine slide keeps its own */
  background: linear-gradient(180deg, #272220, #1C1815 56%, #1A1613);
}
.ff-bg { position: absolute; inset: 0; z-index: 0; }
.ff-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* warm-dark wash so the glass slides always read over the photo */
.ff-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.55), rgba(23, 19, 16, 0.38) 45%, rgba(23, 19, 16, 0.62) 100%);
}

/* the scroller: native snap; slides center, the neighbour peeks */
.eng-rail {
  --rail-gap: clamp(14px, 1.6vw, 22px);
  position: relative; z-index: 2;
  display: flex;
  gap: var(--rail-gap);
  padding: clamp(18px, 2.6vh, 30px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.eng-rail::-webkit-scrollbar { display: none; }
.eng-rail:focus-visible { outline: 2px solid var(--link); outline-offset: -3px; border-radius: var(--r-card); }

/* a compact glass slide on the photo — flat, quiet */
.rail-slide {
  position: relative;
  flex: 0 0 auto;
  width: min(78%, 960px);
  scroll-snap-align: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 60%),
    rgba(26, 22, 19, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 32px);
  display: flex; flex-direction: column;
  gap: clamp(14px, 1.8vh, 22px);
}

/* copy left, building right — the PAIR hugs with a fixed gap and centers
   as one unit, so wide displays grow the outside air, never the middle.
   Top-aligned + one min-height = the building and the cards row sit at
   the same spot on every slide (client call). */
.eng-head {
  --art-w: clamp(260px, 24vw, 340px);
  display: grid;
  grid-template-columns: minmax(0, 560px) var(--art-w);
  justify-content: center;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  min-height: max(calc(var(--art-w) * 1009 / 1266), 330px);
}
.eng-art { width: 100%; }

.feature-title {
  font-size: clamp(25px, 2.4vw, 34px);
  font-weight: 400; line-height: 1.1;
}
.feature-no {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 0.78em; color: var(--ink);
  margin-right: 10px;
}
.feature-title em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--fe-accent);
}
.feature-sub {
  margin-top: clamp(10px, 1vw, 16px);
  color: var(--ink);
  font-size: clamp(14.5px, 1.05vw, 17px); font-weight: 600; line-height: 1.55;
  max-width: 440px;
}

/* naked reels — they stand directly on the glass */
.reel-strip {
  display: flex; gap: 14px;
  width: fit-content;
  margin-top: clamp(14px, 1.6vh, 20px);
}
.reel {
  position: relative;
  width: 86px; aspect-ratio: 9 / 16;
  border-radius: var(--r-panel); overflow: hidden;
  background: #0B0D14;
}
.reel video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.reel::after {
  content: ""; position: absolute; inset: 55% 0 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.95));
}
.reel figcaption {
  position: absolute; left: 9px; bottom: 8px; z-index: 1;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.rail-slide .ig-badge { margin-top: 12px; }
.rail-slide .mkt-dash { margin-top: 16px; }

/* ----- floor hotspots (every slide's building): hover CROSSFADES that
   floor's relit render in, click glides the rail to that engine.
   Bands calibrated via #fzones @1920 — aspect-locked stage, % hold. ----- */
.fa-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1266 / 1009;   /* front-facing set (Section 1 Images crop) */
  margin: 0 auto;
}
/* the render stands clean on the glass — no backing shadow (client call) */
.fa-stage img {
  width: 100%; height: 100%; display: block;
  object-fit: contain;
}
.fa-hotspot {
  position: absolute; z-index: 3;
  left: 16%; right: 12.5%;
  border: 0; padding: 0; background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fa-hotspot[data-floor="content"]   { top: 21.5%; height: 22.5%; }
.fa-hotspot[data-floor="marketing"] { top: 44%;   height: 22.5%; }
.fa-hotspot[data-floor="sales"]     { top: 66.5%; height: 21%; }
.fa-hotspot:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; border-radius: 10px; }
.fa-stage .fa-hl {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
.fa-hotspot[data-floor="content"]:hover ~ .fa-hl[data-floor="content"],
.fa-hotspot[data-floor="content"]:focus-visible ~ .fa-hl[data-floor="content"],
.fa-hotspot[data-floor="marketing"]:hover ~ .fa-hl[data-floor="marketing"],
.fa-hotspot[data-floor="marketing"]:focus-visible ~ .fa-hl[data-floor="marketing"],
.fa-hotspot[data-floor="sales"]:hover ~ .fa-hl[data-floor="sales"],
.fa-hotspot[data-floor="sales"]:focus-visible ~ .fa-hl[data-floor="sales"] { opacity: 1; }

/* ----- the three stages: vignette cards — the graphics are back
   (client call), re-shelled for the dark glass slides ----- */
.feature-cards {
  /* minmax(0,1fr): the fixed-width .flow stages must not steal column
     width from their siblings — visuals scale down instead (below) */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.fcard {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-inset);
  padding: 9px 9px 16px;
  background: rgba(20, 16, 14, 0.35);
  text-align: center;
}
.fcard-visual {
  position: relative;
  height: 176px;
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--r-inset) - 4px); overflow: hidden;
  background: #16120F;
  border: 1px solid rgba(240, 239, 232, 0.05);
  container-type: inline-size;
}
/* the 340px stages shrink to their window, never the other way round */
@container (max-width: 356px) { .flow, .fstage { transform: scale(0.84); transform-origin: center; } }
@container (max-width: 300px) { .flow, .fstage { transform: scale(0.74); } }
@container (max-width: 260px) { .flow, .fstage { transform: scale(0.64); } }
@container (max-width: 220px) { .flow, .fstage { transform: scale(0.52); } }
/* client-supplied card imagery — never recreated in HTML */
.fcard-visual .card-img {
  position: relative; z-index: 1;
  max-width: 84%; max-height: 78%;
  width: auto; height: auto; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.fcard-visual::before {
  content: ""; position: absolute; left: 50%; top: 130px;
  width: 300px; height: 300px; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--fe-pill) 40%, transparent),
    color-mix(in srgb, var(--fe-pill) 13%, transparent) 45%,
    transparent 72%);
  filter: blur(26px);
  pointer-events: none;
}
.fcard-title { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.fcard-body { margin: 5px auto 0; max-width: 300px; padding: 0 8px; font-size: 12px; line-height: 1.5; color: var(--mut); }

/* ===== FLOW VIGNETTES — the animated blue connector system.
   A fixed 340×176 stage: nodes in px, SVG shares the viewBox, so curves,
   dots and blocks share ONE coordinate space at every card width. ===== */
.flow {
  position: relative; z-index: 1;
  width: 340px; height: 176px;
  flex-shrink: 0;
}
.flow > .chip, .flow > .engine-pill, .flow > .metric,
.flow > .flow-videos, .flow > .flow-persona, .flow > .flow-socials {
  position: absolute;
  transform: translate(-50%, -50%);
}
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-svg .fl {
  fill: none;
  stroke: rgba(110, 168, 255, 0.32);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px rgba(110, 168, 255, 0.5));
}
.flow-svg .fd {
  fill: #9CC5FF;
  filter: drop-shadow(0 0 6px rgba(110, 168, 255, 0.95));
}
.metric {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 7px 12px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(240, 239, 232, 0.14);
  background: #101318;
  font-size: 13px; font-weight: 750; letter-spacing: 0.01em;
  white-space: nowrap;
}
.metric small {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--mut);
}
.metric.up   { color: var(--c-sales); border-color: color-mix(in srgb, var(--c-sales) 32%, transparent); }
.metric.down { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 32%, transparent); }
.engine-pill {
  display: inline-flex; align-items: center;
  padding: 9px 14px;
  border-radius: var(--r-panel);
  background: var(--fe-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 15px; color: #fff;
  white-space: nowrap;
}
/* engine pill label crossfade: "… Engine" ↔ "Optimizing…" (hero.js is-alt) */
.fp-swap { display: inline-grid; }
.fp-swap > span {
  grid-area: 1 / 1; text-align: center; white-space: nowrap;
  transition: opacity 0.5s var(--ease-out);
}
.fp-swap .fp-b { opacity: 0; }
.fp-swap.is-alt .fp-a { opacity: 0; }
.fp-swap.is-alt .fp-b { opacity: 1; }
/* created-videos node: shimmer slots resolve into playing reels (hero.js) */
.flow-videos { display: flex; gap: 6px; }
.fv-slot {
  position: relative; width: 40px; aspect-ratio: 9 / 16;
  border-radius: 6px; overflow: hidden;
  background: #0B0D14;
  border: 1px solid rgba(240, 239, 232, 0.1);
}
.fv-slot video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.5s var(--ease-out);
}
.fv-slot i {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(240, 239, 232, 0.05) 30%,
    rgba(150, 190, 255, 0.16) 50%,
    rgba(240, 239, 232, 0.05) 70%);
  background-size: 200% 100%;
  animation: fc-shimmer 1.6s linear infinite;
  transition: opacity 0.4s var(--ease-out);
}
.fv-slot:nth-child(2) i { animation-delay: 0.4s; }
.flow-videos.is-on video { opacity: 1; }
.flow-videos.is-on i { opacity: 0; }
/* persona node (launch card) */
.flow-persona {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(240, 239, 232, 0.14);
  background: #101318;
  font-size: 10px; font-weight: 600; line-height: 1.45;
  color: var(--ink-soft); text-align: left; white-space: nowrap;
}
.flow-persona img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
/* grouped channels node (launch card) — icons batched into ONE block */
.flow-socials {
  display: grid; grid-template-columns: repeat(3, 26px);
  gap: 9px 12px;
  padding: 12px 14px;
  border-radius: var(--r-panel);
  border: 1px solid rgba(240, 239, 232, 0.14);
  background: #101318;
}
.flow-socials img { width: 26px; height: 26px; display: block; }
/* discover grid — skeleton circles resolve into people, random order (hero.js) */
.disc-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 46px);
  gap: 11px;
}
.dg-cell {
  position: relative; width: 46px; height: 46px;
  border-radius: 50%; overflow: hidden;
  background: #101318;
  border: 1px solid rgba(240, 239, 232, 0.1);
}
.dg-cell img {
  width: 100%; height: 100%; display: block;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.dg-cell i {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(100deg,
    rgba(240, 239, 232, 0.05) 30%,
    rgba(150, 190, 255, 0.15) 50%,
    rgba(240, 239, 232, 0.05) 70%);
  background-size: 200% 100%;
  animation: fc-shimmer 1.5s linear infinite;
  transition: opacity 0.45s var(--ease-out);
}
.dg-cell:nth-child(2n) i { animation-delay: 0.35s; }
.dg-cell:nth-child(3n) i { animation-delay: 0.7s; }
.dg-cell.on img { opacity: 1; transform: scale(1); }
.dg-cell.on i { opacity: 0; }
/* chat/status stage (sales Qualify + Engage) — % positioned nodes */
.fstage {
  position: relative; z-index: 1;
  width: 100%; height: 100%; max-width: 480px; margin: 0 auto;
  opacity: 0.92;
}
.fstage .chip, .fstage .engine-pill, .fstage .call-pill {
  position: absolute;
  transform: translate(-50%, -50%);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(240, 239, 232, 0.17);
  border-radius: var(--r-chip);
  background: #0A0C13;
  font-size: 11px; font-weight: 650; letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.chip img { width: 15px; height: 15px; }
.chip-solid { background: #1D202A; border-color: transparent; }
.chip-green { background: #0B3529; border-color: transparent; }
.chip-dashed { border-style: dashed; border-color: rgba(240, 239, 232, 0.35); }
.chip-multi { white-space: normal; text-align: left; line-height: 1.4; }
.fstage .avatar, .fstage .blob-img {
  width: 17px; height: 17px;
  border-radius: 50%; object-fit: cover;
  flex-shrink: 0; display: block;
}
.fstage .avatar.md { width: 23px; height: 23px; }
.fstage .blob-img.md { width: 22px; height: 22px; }
.call-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px;
  background: #fff; color: #252525;
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}
/* Qualify — steady numerals so the ticking timer doesn't jitter */
.qfy-live .call-pill b { font-variant-numeric: tabular-nums; }
/* Engage — bubbles land one after another on a shared 8s cycle */
.eng-seq .chip { opacity: 0; }
.eng-seq .chip:nth-child(1) { animation: eng-c1 8s var(--ease-out) infinite; }
.eng-seq .chip:nth-child(2) { animation: eng-c2 8s var(--ease-out) infinite; }
.eng-seq .chip:nth-child(3) { animation: eng-c3 8s var(--ease-out) infinite; }
@keyframes eng-c1 {
  0% { opacity: 0; transform: translate(-50%, -34%) scale(0.92); }
  5%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  95%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes eng-c2 {
  0%, 18% { opacity: 0; transform: translate(-50%, -34%) scale(0.92); }
  23%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  95%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes eng-c3 {
  0%, 36% { opacity: 0; transform: translate(-50%, -34%) scale(0.92); }
  41%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  95%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-svg .fd { display: none; }
  .fv-slot i, .dg-cell i { animation: none; opacity: 0; }
  .flow-videos video { opacity: 1; }
  .eng-seq .chip { animation: none; opacity: 1; }
}

/* ----- sales: the live calling bar — mini ember orb, breathing ----- */
.sales-call {
  display: flex; align-items: center; gap: 13px;
  width: min(100%, 430px);
  margin-top: clamp(16px, 2vh, 24px);
  padding: 11px 16px 11px 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(14, 11, 10, 0.55);
}
/* the SAME ember orb as center stage — the render, not a CSS stand-in */
.scb-orb-img { flex: none; width: 38px; height: 38px; border-radius: 50%; display: block; }
.scb-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.scb-meta b { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scb-meta small { font-size: 11px; color: var(--mut); }
.scb-live { display: inline-flex; align-items: center; gap: 10px; }
.scb-live .qfy-time {
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.call-bars { display: inline-flex; align-items: center; gap: 4px; }
.call-bars i {
  width: 4.5px; height: 12px;
  border-radius: var(--r-pill);
  background: rgba(243, 239, 231, 0.9);
  animation: call-bar 1.15s ease-in-out infinite;
}
.call-bars i:nth-child(2) { height: 17px; animation-delay: 0.18s; }
.call-bars i:nth-child(3) { height: 10px; animation-delay: 0.36s; }
@keyframes call-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }

/* ----- rail arrows — INSIDE the frame, one per side; hero.js hides each
   while nothing overflows that side (client call) ----- */
.rail-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 16, 14, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-micro) ease, background var(--dur-micro) ease,
              color var(--dur-micro) ease, opacity var(--dur-micro) ease;
}
.rail-btn svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .rail-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--link);
    background: var(--raised);
  }
}
.rail-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.rail-arrow {
  position: absolute; z-index: 6;
  top: 50%; transform: translateY(-50%);
}
.rail-arrow.prev { left: clamp(10px, 1.4vw, 20px); }
.rail-arrow.next { right: clamp(10px, 1.4vw, 20px); }
.rail-arrow[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .call-bars i { animation: none; }
}

/* stacked band: single column inside each slide; sideways stays native */
@media (max-width: 940px) {
  .rail-slide { width: min(88%, 560px); }
  .eng-head { grid-template-columns: 1fr; gap: 18px; }
  .eng-copy { text-align: center; }
  .eng-copy .feature-sub, .eng-copy .reel-strip, .eng-copy .mkt-dash,
  .eng-copy .sales-call { margin-left: auto; margin-right: auto; }
  .eng-art { max-width: 380px; margin: 0 auto; }
  .eng-head { min-height: 0; }
  .feature-cards { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .flow { transform: scale(0.86); transform-origin: center; }
}

/* ============================================================
   SELF-LEARNING LOOP — the building itself. Signal particles
   ride the render's glass tube between the floors (SVG dots on
   the pipe's real geometry); the compounded growth reads below.
   ============================================================ */
.loop.solid { background: var(--bg); }
.loop-break { display: none; }
@media (min-width: 760px) { .loop-break { display: block; } }
.loop-stage {
  max-width: 920px;
  margin: clamp(36px, 5vw, 64px) auto 0;
}
.loop-art { position: relative; width: min(100%, 620px); margin: 0 auto; }
.loop-art img { width: 100%; height: auto; display: block; }
.loop-flux { position: absolute; inset: 0; width: 100%; height: 100%; }
/* particles keyed to the tube's own neon (cool white-blue) — this is the
   render's light, not the retired connector blue */
.fx-halo { fill: rgba(140, 190, 255, 0.32); }
.fx-core { fill: #EAF6FF; }
.flux-dot.rev .fx-halo { fill: rgba(140, 190, 255, 0.18); }
.flux-dot.rev .fx-core { fill: rgba(234, 246, 255, 0.75); }

/* the quiet caption above the row — what these numbers ARE */
.lm-kicker {
  margin: clamp(30px, 4.4vh, 48px) auto 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mut); text-align: center;
}
.loop-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  max-width: 980px;
  margin: clamp(14px, 2vh, 22px) auto 0;
}
.lm {
  display: flex; flex-direction: column; gap: 5px;
  padding: clamp(16px, 1.6vw, 24px) clamp(14px, 1.4vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r-inset);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
}
.lm b {
  font-size: clamp(24px, 2.2vw, 34px); font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.lm span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mut);
}
@media (max-width: 720px) {
  .loop-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .flux-dot { display: none; }
}

/* ----- metrics / stats ----- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5); margin-top: var(--section-head-gap);
}
.stat {
  --sa: var(--c-content);   /* unified blue accent on every card */
  position: relative;
  border: 1px solid color-mix(in srgb, var(--sa) 22%, transparent);
  border-radius: var(--r-card);
  padding: var(--sp-8) var(--sp-5);
  /* subtle blue lift — a soft glow at the top so the card reads as gently
     blue-highlighted rather than flat dark, without a heavy wash */
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--sa) 12%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--sa) 5%, transparent), transparent 55%);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s;
}
/* accent hairline across the top */
.stat::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sa), transparent);
  opacity: 0.6;
}
@media (hover: hover) and (pointer: fine) {
  .stat:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--sa) 45%, transparent);
    box-shadow: 0 20px 50px -18px rgba(28, 26, 21, 0.24);
  }
}
.stat-num {
  display: flex; justify-content: center;
  font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);   /* bone, not pure white — avoids halation on the big figures */
  text-shadow: 0 1px 14px color-mix(in srgb, var(--sa) 18%, transparent);
}
/* glow pulse when the number lands on its final value */
@keyframes num-land {
  0% { text-shadow: 0 1px 14px color-mix(in srgb, var(--sa) 18%, transparent); }
  35% { text-shadow: 0 0 30px color-mix(in srgb, var(--sa) 60%, transparent); }
  100% { text-shadow: 0 1px 14px color-mix(in srgb, var(--sa) 22%, transparent); }
}
.stat-num.landed { animation: num-land 1.1s var(--ease-out); }
/* odometer reels — each digit is a masked 1em column; the reel inside
   rolls to fractional positions for the mechanical-counter feel */
.odo-digit {
  display: block; width: 0.62em; height: 1em;
  overflow: hidden; text-align: center;
}
.odo-reel { display: block; will-change: transform; }
.odo-reel span { display: block; height: 1em; line-height: 1; }
.odo-sep, .odo-suffix { display: block; height: 1em; line-height: 1; }
.odo-digit.ghost, .odo-sep.ghost { opacity: 0.14; }
.odo-digit, .odo-sep { transition: opacity 0.35s ease; }
/* progress hairline that fills as the number climbs */
.stat-bar {
  display: block; width: 58%; max-width: 150px; height: 2px;
  margin: 16px auto 12px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.stat-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sa) 55%, transparent), var(--sa));
  border-radius: var(--r-pill);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sa) 55%, transparent);
}
.stat-label {
  display: block; margin-top: 16px;   /* the removed progress bar used to hold this gap */
  color: var(--mut);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
}

/* ----- conclusion — type only, hero voice (bg video retired) ----- */
.conclusion {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(64px, 9vw, 128px) 0 clamp(96px, 14vw, 180px);
}
/* the loop section shifted the even/odd striping — pin the conclusion to
   the same iron ground as everything else */
.conclusion.solid { background: var(--bg); }
.conclusion .wrap { width: 100%; }
.conclusion .eyebrow { color: var(--mut); }
.conclusion .cta-premium { margin-top: clamp(24px, 3vw, 36px); }

/* ----- footer — AURORA floor: layered blue radial glows rising from below the
   fold line (no image; the client picked this over glass renders). Deepest navy
   at the top so the section above melts in; light pools under the logo. ----- */
.footer {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(40px, 6vw, 80px);
  padding: clamp(96px, 14vw, 176px) clamp(40px, 6vw, 90px) clamp(48px, 6vw, 76px);
  overflow: hidden;
  position: relative;
  background: var(--bg);   /* unified ground (dead rule on both pages now, kept safe) */
}
/* full-bleed motion backdrop (same fluted-glass clip as the hero), dimmed to 0.5.
   selector is intentionally specific so it wins the z-index over `.footer > *` */
.footer > .foot-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.5);
  pointer-events: none;
}
/* hairline top separator that fades at the edges */
.footer::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(155, 175, 246, 0.22) 30%, rgba(155, 175, 246, 0.22) 70%, transparent);
  pointer-events: none;
}
/* a faint cool lift right behind the logo so the chrome catches light */
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 40% at 50% 92%, rgba(140, 190, 255, 0.10), transparent 70%);
}
.footer > * { position: relative; z-index: 1; }
/* the footer keeps its dark fluted-glass video — a deliberate dark bookend
   on the light page, so its type is pinned light (literals, not tokens) */
.foot-line {
  margin: 0;
  color: #F0EFE8;
  /* display-scale line — speaks the primary serif voice like the hero,
     so the italic .hl accent sits inside one family instead of two */
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 400; letter-spacing: 0; line-height: 1.15;
  max-width: 760px;
  text-align: center;
}
.foot-logo {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin-top: auto;
}
.foot-logo::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 120%; height: 150%;
  background: radial-gradient(ellipse at center, rgba(110, 168, 255, 0.16), transparent 66%);
  filter: blur(20px); pointer-events: none;
}
.foot-logo img {
  height: clamp(140px, 17vw, 300px); width: auto; display: block;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
}
@media (hover: hover) and (pointer: fine) {
  .foot-logo:hover { filter: brightness(1.2); }
}

/* contact line under the logo — the address lives in a liquid-metal pill
   (shared .lqm secondary CTA); click copies it */
.foot-contact {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 14px;
  margin-bottom: clamp(20px, 3vw, 40px);
  color: #A6ABB8; font-size: clamp(14px, 1vw, 16px);
}
.footer .hl { color: #9BAFF6; }
.foot-lqm { height: 44px; padding: 0 24px; }
.foot-lqm .lqm-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px;
}
.foot-lqm .lqm-label svg { width: 14px; height: 14px; opacity: 0.75; flex-shrink: 0; }

/* toast — "Mail copied" */
.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: calc(var(--z-modal) + 10);
  transform: translate(-50%, 16px);
  padding: 11px 22px; border-radius: var(--r-pill);
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(28, 26, 21, 0.25);
  color: var(--ink); font-size: 13.5px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* huge gradient wordmark — the footer's "interactive background".
   Fades into the floor via mask, subtle idle shimmer, and tilts
   toward the cursor using the same perspective-tilt mechanic as
   the hero building (see hero.js) at a gentler magnitude. */
.foot-wordmark {
  width: 100%;
  text-align: center;
  line-height: 0.8;
  perspective: 1400px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  pointer-events: none;
  user-select: none;
}
.fw-text {
  display: inline-block;
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(52px, 12.5vw, 210px);
  background: linear-gradient(100deg, #2f49c4 0%, var(--accent) 32%, var(--link) 62%, rgba(155, 175, 246, 0.2) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  will-change: transform;
  animation: fw-shimmer 9s ease-in-out infinite;
}
@keyframes fw-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-text { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ----- below the desktop split (≤1119px): same centered story, tighter ----- */
@media (max-width: 1119px) {
  .hero-inner { padding: max(22vh, 118px) 24px 36px; }
  .hero-inner h1 { font-size: clamp(26px, 5.7vw, 46px); }
}
/* the stage stacks: orb first, cards feed beneath, gentler falloff */
@media (max-width: 980px) {
  .ps-grid { grid-template-columns: 1fr; justify-items: center; }
  .ps-grid > * { grid-column: 1; grid-row: auto; width: 100%; max-width: 480px; }
  .ps-center { order: 0; }
  .pc-summary { order: 1; margin-top: 0; } /* stacked flow: no pull-up into the orb */
  .pc-revenue { order: 2; }
  .pc-spend { order: 3; }
  .pc-call { order: 4; }
  .pc-quote { order: 5; }
  .pc-strip { order: 6; flex-wrap: wrap; gap: 14px 0; }
  .ms-stat { flex: 1 1 46%; }
  .ms-stat + .ms-stat { border-left: none; padding-left: 0; }
  .ps-orb { width: clamp(120px, 26vw, 160px); }
  .ps-vignette {
    background: linear-gradient(180deg, transparent 55%, rgba(23, 19, 16, 0.5) 100%);
  }
  .ps-bottom .bn-card { max-width: 480px; }
}
@media (max-width: 560px) {
  .bn-chart, .bn-bars { height: 54px; }
  .proof-stage { min-height: auto; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hiring:not(.mobile-hiring) { display: none; }
  .nav-cta:not(.mobile-waitlist) { display: none; }
  .nav-cta-slot { display: none; } /* nav CTA lives in the drawer on mobile */
  .nav-hamburger { display: flex; }
  .nav-right { gap: 12px; }
  /* mobile nav = logo left, hamburger right (the desktop 1fr·auto·1fr grid left
     the logo dead-center with a big empty left column — read as "not fitting").
     nav-left only holds the (now-hidden) links + hiring badge, so drop it. */
  .nav-left { display: none; }
  .nav-inner { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
  .stats { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .intro, h1 .line.intro > span { animation: none; opacity: 1; transform: none; }
  .hero-h1 .w > span { transform: none; }
  /* bento charts land fully drawn, no draw-in theatre */
  .bn-chart .bn-line, .soc-chart .bn-line { animation: none; stroke-dashoffset: 0; }
  .bn-chart .bn-area, .soc-chart .bn-area { animation: none; opacity: 1; }
  .st-create .sw { animation: none; }
  .st-create .sw[style*="--i: 0"] { opacity: 1; }
  .bn-stars svg { animation: none; opacity: 1; transform: none; }
  .ps-orb .orb-aura { animation: none; }
  .stat-num.landed { animation: none; }
  .pulse { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* self-learning loop: fully drawn, no circulating dots */
  .loop-svg .lp { stroke-dashoffset: 0; transition: none; }
  .loop-svg .ld { display: none; }
  .loop-svg .lb { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   AUDIT PASS — keyboard access, touch targets, form feedback,
   mid-page waitlist band. (ui-ux-pro-max checklist §1–§2, §8)
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* touch targets ≥ 44px (was 34 / 30) */
.nav-hamburger { width: 44px; height: 44px; }
.modal-close { width: 38px; height: 38px; }
.modal-close::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }

/* inline form validation */
.field-error {
  display: flex; align-items: center; gap: 7px;
  color: var(--neg); font-size: 12.5px;
  margin: -2px 4px 0;
}
.field-error[hidden] { display: none; }

/* ============================================================
   FEATURE PROOF COMPONENTS
   content IG badge · marketing dashboard · sales sonar orb
   ============================================================ */
@keyframes proof-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50% { box-shadow: 0 0 0 5px transparent; }
}

/* ---- Content: Instagram social-proof badge ---- */
.ig-badge {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px;
  width: fit-content; max-width: 100%; margin-top: clamp(20px, 2vw, 26px);
  padding: 9px 10px 9px 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-inset);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  a.ig-badge:hover { border-color: color-mix(in srgb, var(--accent) 32%, transparent); background: var(--raised); }
}
.ig-badge-io { display: inline-flex; }
.ig-badge-io img { width: 24px; height: 24px; display: block; }
.ig-badge-meta { font-size: 14px; color: var(--mut); white-space: nowrap; }
.ig-badge-meta b { color: var(--ink); font-weight: 700; margin-right: 10px; }
.ig-badge-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--c-sales);
  padding: 5px 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-sales) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-sales) 30%, transparent);
  white-space: nowrap;
}
.ig-badge-tag i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-sales);
  color: color-mix(in srgb, var(--c-sales) 50%, transparent);
  animation: proof-pulse-dot 2s ease-in-out infinite;
}

/* ---- Marketing: live "dashboard" of KPI tiles ---- */
.mkt-dash {
  width: 100%; max-width: 440px; margin-top: clamp(26px, 2.6vw, 34px);
  padding: 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-inset);
}
.mkt-dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mkt-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.mkt-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fe-accent, #90BFF2); color: var(--fe-accent, #90BFF2);
  animation: proof-pulse-dot 2s ease-in-out infinite;
}
.mkt-window { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.mkt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mkt-tile {
  padding: 12px 13px;
  background: color-mix(in srgb, var(--ink) 2.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: var(--r-field);
}
.mkt-k { display: block; font-size: 11.5px; color: var(--mut); margin-bottom: 7px; }
.mkt-v { display: flex; align-items: baseline; gap: 7px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.mkt-up, .mkt-down { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--c-sales); }
.mkt-spark { display: flex; align-items: flex-end; gap: 3px; height: 24px; margin-top: 10px; }
.mkt-spark i {
  flex: 1; height: var(--h); border-radius: 2px;
  /* sparkline is DATA — pale slate always, never the section accent
     (the accent went orange in the v3 warm re-key and data never goes orange) */
  background: linear-gradient(180deg, var(--chart), rgba(196, 203, 219, 0.22));
  transform: scaleY(0.12); transform-origin: bottom;
  transition: transform 0.7s var(--ease-out);
}
.mkt-dash.in .mkt-spark i { transform: scaleY(1); }
.mkt-tile:nth-child(2) .mkt-spark i { transition-delay: 0.08s; }
.mkt-tile:nth-child(3) .mkt-spark i { transition-delay: 0.16s; }
.mkt-tile:nth-child(4) .mkt-spark i { transition-delay: 0.24s; }

@media (max-width: 960px) {
  .mkt-dash { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-badge-tag i, .mkt-live i { animation: none; }
  .mkt-spark i { transform: scaleY(1); }
}


/* ============================================================
   TESTIMONIAL · full-bleed customer story (#testimonial)
   One framed photograph, quote overlaid on a left scrim.
   Photo currently a placeholder (founder-nick.jpg) — its studio
   ground is near-black, so it melts into the frame's charcoal.
   ============================================================ */
.tsm { padding: 0 0 var(--section-y); } /* .wrap already carries the side gutters */
.tsm-frame {
  position: relative; overflow: hidden;
  min-height: 560px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-2);
  display: flex; align-items: center;
}
/* photo hugs the right half; a left-edge mask melts its studio
   ground into the frame so there is no visible seam */
.tsm-photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 54%; height: 100%;
  object-fit: cover; object-position: 50% 12%;
  filter: saturate(0.92);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%);
          mask-image: linear-gradient(90deg, transparent, #000 42%);
}
/* warm grade over the placeholder's cool rim light + gentle
   bottom weight so the attribution always sits on quiet ground */
.tsm-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(29, 26, 25, 0.55) 40%, rgba(29, 26, 25, 0) 68%),
    linear-gradient(0deg, rgba(29, 26, 25, 0.5), rgba(29, 26, 25, 0) 38%);
}
.tsm-copy {
  position: relative; z-index: 1;
  max-width: 620px; text-align: left;
  padding: var(--sp-16) var(--sp-12) var(--sp-16) var(--sp-16);
  margin-right: auto;
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.tsm-stars svg { width: 20px; height: 20px; }
.tsm-quote {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(27px, 2.7vw, 40px); line-height: 1.22;
  letter-spacing: -0.01em; color: var(--ink);
  text-wrap: balance;
}
.tsm-attr { display: flex; flex-direction: column; gap: 3px; margin-top: var(--sp-2); }
.tsm-attr b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.tsm-attr span { font-size: 13px; color: var(--mut); }

@media (max-width: 960px) {
  /* stacked: copy on top, photo fades in as the frame's lower half */
  .tsm-frame { min-height: 0; flex-direction: column; align-items: stretch; }
  .tsm-photo { order: 2; }
  .tsm-copy { max-width: none; padding: var(--sp-10) var(--sp-8) var(--sp-4); }
  .tsm-quote { font-size: clamp(24px, 5.4vw, 32px); }
  .tsm-photo {
    position: relative; display: block;
    width: 100%; height: auto; aspect-ratio: 4 / 3.4;
    object-position: 50% 10%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%);
            mask-image: linear-gradient(180deg, transparent, #000 34%);
  }
  .tsm-scrim { display: none; }
}

/* LIGHT MODE removed (client 2026-07-20): dark is the only theme. */