/* ============================================================
   FirstOrg — "SPECTRUM" concept
   The content engine as a color-coded module system.
   Confident color, disciplined whitespace.
   ============================================================ */

/* Libre Franklin, self-hosted (was Google Fonts; moved local so the
   headline — the page's LCP element — doesn't wait on a third-party
   CSS + font round-trip). Variable font: one file serves every weight
   we use (400–800). Same v20 files Google served, latin + latin-ext
   subsets; unicode-range keeps latin-ext from downloading unless a
   page actually uses those characters. head.php preloads the latin
   file. */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/libre-franklin-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/libre-franklin-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* surfaces */
  --canvas:   #FFFFFF;
  --tint:     #F5F6FA;
  --ink:      #0B0C14;
  --ink-soft: #565B73;
  --hairline: #E7E9F2;

  /* engine module colors — used ONLY for engine stages + direct echoes */
  --strategy: #4338CA; /* indigo */
  --calendar: #0891B2; /* cyan   */
  --write:    #F0502E; /* coral  */
  --publish:  #6BBF00; /* lime (ink text on lime) */

  /* brand */
  --brand:      #4338CA;
  --brand-deep: #2E2496;
  --brand-rgb:  67 56 202; /* brand as space-separated RGB, for rgb(var(--brand-rgb) / a) glows */

  /* type — actual rendering is overridden site-wide by london.css (Libre Franklin) */
  --font-display: "Libre Franklin", system-ui, sans-serif;
  --font-body:    "Libre Franklin", system-ui, sans-serif;

  /* layout */
  --shell: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 18px;
  --radius-lg: 26px;

  --shadow-sm: 0 1px 2px rgba(11,12,20,.05), 0 4px 14px rgba(11,12,20,.05);
  --shadow-md: 0 8px 30px rgba(11,12,20,.08);
  --shadow-lg: 0 24px 70px rgba(11,12,20,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; }

/* ---------- a11y helpers ---------- */
.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;
}
.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 10px; z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tint { background: var(--tint); }

.section-head { margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.section-head--center { text-align: center; }
.section-head--center .chips,
.section-head--center { margin-inline: auto; }
.section-head__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  letter-spacing: -.03em;
  line-height: 1.05;
  max-width: 16ch;
}
.section-head--center .section-head__h2 { max-width: 22ch; margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  padding: .82em 1.35em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn--lg { padding: 1em 1.7em; font-size: 1.02rem; }
.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 22px rgb(var(--brand-rgb) / .28);
}
.btn--primary:hover {
  background: var(--brand-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgb(var(--brand-rgb) / .36);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn--ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.link-arrow {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  transition: gap .2s var(--ease);
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: background .25s var(--ease), backdrop-filter .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -.02em;
}
.brand__logo { width: 30px; height: 30px; object-fit: contain; }
.brand__logo--light { display: none; }
.footer__brand .brand__logo { width: 36px; height: 36px; }
.footer__brand .brand { font-size: 1.3rem; }

/* ---- transparent-over-hero variant (homepage only) ----
   Set via $nav_over_hero in index.php. Defaults to the normal solid nav
   (same as every other page) — initHeroNav() in app.js adds .nav--transparent
   only while the hero is still under the nav, and removes it once the hero
   has scrolled out, so a no-JS visitor just keeps the ordinary solid nav
   throughout rather than an illegible transparent one. */
.nav--over-hero.nav--transparent {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.nav--over-hero.nav--transparent .brand__logo--dark { display: none; }
.nav--over-hero.nav--transparent .brand__logo--light { display: block; }
.nav--over-hero.nav--transparent .brand,
.nav--over-hero.nav--transparent .nav__link,
.nav--over-hero.nav--transparent .nav__caret {
  color: #fff;
}
.nav--over-hero.nav--transparent .nav__item--menu:hover > .nav__link,
.nav--over-hero.nav--transparent .nav__item--menu:focus-within > .nav__link {
  color: #fff;
  background: rgba(255,255,255,.16);
}

.nav__links { margin-left: auto; }
.nav__menu { display: flex; align-items: center; gap: .25rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-soft);
  padding: .55rem .8rem;
  border-radius: 10px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
/* Product/Features/Resources are dropdown-only groupers with no page of
   their own to link to — <button> instead of <a>, reset to look identical
   to the plain-link items either side of them. */
button.nav__link { border: 0; background: none; cursor: pointer; }
.nav__link:hover { color: var(--ink); }
.nav__item--menu:hover > .nav__link,
.nav__item--menu:focus-within > .nav__link { color: var(--ink); background: var(--tint); }
.nav__caret {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .55;
  transition: transform .2s var(--ease);
}
.nav__item--menu:hover .nav__caret,
.nav__item--menu:focus-within .nav__caret { transform: rotate(-135deg) translateY(2px); }

/* dropdown panel */
.nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  display: grid;
  gap: 2px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: .5rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 120;
}
.nav__panel::before { /* invisible hover bridge across the gap */
  content: "";
  position: absolute;
  inset: -10px 0 auto 0;
  height: 12px;
}
.nav__item--menu:hover > .nav__panel,
.nav__item--menu:focus-within > .nav__panel {
  opacity: 1; visibility: visible; transform: none;
}
.nav__sub {
  display: block;
  font-size: .92rem;
  color: var(--ink-soft);
  padding: .55rem .7rem;
  border-radius: 9px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav__sub:hover { color: var(--ink); background: var(--tint); }

.nav__burger { display: none; }
.nav__cta { margin-left: .4rem; }

/* ============================================================
   HERO — full-bleed, full-viewport duotone background with the copy
   overlaid. Same breakout trick as .video__frame--viewport (100vw +
   negative-margin centering) so it spans the true browser width
   regardless of nesting. margin-top: -72px pulls the hero up under the
   sticky nav's own reserved height (the nav's box doesn't move — this
   just lets the hero's box, and the .nav--over-hero it pairs with, both
   claim that same 72px band) so the background runs edge-to-edge to the
   very top of the screen with the nav floating transparently over it;
   min-height is a full 100vh/100svh to match. Background is the same
   indigo→amber duotone as .swatch--duotone-indigo-amber, carried
   directly on .hero itself — same recipe as .gbox — so the corner
   metro-line decoration (.gbox__deco, added by addBoxDeco() in app.js
   against this exact selector) paints above it correctly: negative
   z-index children paint above a stacking-context root's own background
   but below its positive-z-index children (.hero__scrim, .hero__inner).
   .hero__scrim is a bottom-weighted gradient that keeps the overlaid
   copy legible; .hero__inner sits above both and bottom-aligns the copy.
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  margin-top: -72px;
  min-height: 100vh;
  min-height: 100svh;
  background: linear-gradient(135deg, var(--brand) 0%, var(--calendar) 100%);
}
/* same gradient formula as .swatch--duotone-indigo-azure, for pages whose
   hero should read as the azure product family rather than the homepage's
   default indigo/amber */
.hero--indigo-azure { background: linear-gradient(135deg, var(--brand), var(--publish)); }
/* same formula again for the write/coral line (LinkedIn Specialist) —
   no swatch precedent uses --write as a duotone stop, so this one's
   hero-only rather than mirroring an existing .swatch--duotone-* name */
.hero--indigo-write { background: linear-gradient(135deg, var(--brand), var(--write)); }
.hero .gbox__deco { width: clamp(220px, 38%, 480px); }
.hero .gbox__deco-line { stroke: rgb(255 255 255 / .4); }
.hero .gbox__deco-station { fill: rgb(255 255 255 / .18); stroke: rgb(255 255 255 / .4); }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(6,7,14,.72) 0%, rgba(6,7,14,.2) 42%, rgba(6,7,14,0) 68%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
}
/* desktop: keep the copy in the left half — the right half is reserved
   for a graphic (not built yet). max-width is relative to .hero__inner's
   own content box, which sits centered the same as the viewport, so 50%
   here lines up with the screen's own left/right split. Dropped back to
   full width below 980px (see RESPONSIVE) where the graphic isn't planned
   to run alongside the copy anyway. */
.hero__copy { max-width: 50%; }
.hero__h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  letter-spacing: -.045em;
  line-height: 1.02;
  margin: .2rem 0 1.2rem;
}
.hero .hero__h1 { color: #fff; }
.hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 0 2rem;
}
.hero .hero__lead { color: rgba(255,255,255,.86); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

/* hero reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: revealUp .8s var(--ease) forwards;
}
.reveal--delay { animation-delay: .18s; }
@keyframes revealUp {
  to { opacity: 1; transform: none; }
}

/* ============================================================
   POSITIONING
   ============================================================ */
.positioning__inner {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  max-width: 880px;
}
.positioning__bar {
  width: 64px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--strategy), var(--calendar), var(--write), var(--publish));
  margin-bottom: 1.6rem;
}
.positioning__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  letter-spacing: -.035em;
  line-height: 1.08;
  margin-bottom: 1.2rem;
}
.positioning__body {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ============================================================
   THE ENGINE — stage cards
   ============================================================ */
.stages { padding-block: clamp(4rem, 9vw, 6.5rem); }
.stage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.4rem);
}
.stage-card {
  --accent: var(--brand);
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.7rem;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.stage-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--accent);
}
.stage-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline));
}
.stage-card--strategy { --accent: var(--strategy); }
.stage-card--calendar { --accent: var(--calendar); }
.stage-card--write    { --accent: var(--write); }
.stage-card--publish  { --accent: var(--publish); }

.stage-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: .4rem 0 1.1rem;
  color: var(--accent);
}
.stage-card__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.stage-card__glyph { width: 38px; height: 38px; }
.stage-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -.02em;
  margin-bottom: .35rem;
}
.stage-card__lead {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 .5rem;
}
.stage-card__body {
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0;
}

.stages__output {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding: 1.3rem 1.6rem;
  background: var(--canvas);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
}
.stages__arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--publish);
}
.stages__output-text {
  margin: 0;
  font-size: 1.08rem;
  color: var(--ink-soft);
}
.stages__output-text strong {
  font-family: var(--font-display);
  color: var(--ink);
}

/* ============================================================
   SOLUTIONS
   ============================================================ */
.solutions { padding-block: clamp(4rem, 9vw, 6.5rem); }
.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.solution-card {
  --accent: var(--brand);
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2rem 1.9rem;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease), background .3s var(--ease);
}
.solution-card--strategy { --accent: var(--strategy); }
.solution-card--calendar { --accent: var(--calendar); }
.solution-card--write    { --accent: var(--write); }
.solution-card--publish  { --accent: var(--publish); }

.solution-card__index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -.03em;
  color: var(--hairline);
  line-height: 1;
  transition: color .3s var(--ease);
}
.solution-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -.02em;
  line-height: 1.18;
  margin: 1rem 0 .6rem;
  max-width: 22ch;
}
.solution-card__body {
  font-size: .98rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 40ch;
}
.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--hairline));
  background: color-mix(in srgb, var(--accent) 5%, var(--canvas));
}
.solution-card:hover .solution-card__index {
  color: var(--accent);
}

/* ============================================================
   BUILT FOR — chips
   ============================================================ */
.builtfor__inner { padding-block: clamp(4rem, 9vw, 6rem); text-align: center; }
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  max-width: 760px;
  margin-inline: auto;
}
.chip {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink);
  background: var(--canvas);
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.chip a { display: block; padding: .65em 1.2em; color: inherit; }
.chip:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   PROOF
   ============================================================ */
.proof { padding-block: clamp(4rem, 9vw, 6.5rem); }
.proof__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.proof__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  letter-spacing: -.035em;
  line-height: 1.08;
  margin-bottom: 1rem;
}
.proof__body {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 1.4rem;
}
.proof__stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 100% 0, rgb(var(--brand-rgb) / .10), transparent 60%),
    var(--tint);
  border: 1px solid var(--hairline);
}
.proof__stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 10vw, 6rem);
  letter-spacing: -.05em;
  line-height: .9;
  color: var(--brand);
}
.proof__stat-pct { font-size: .55em; color: var(--ink); }
.proof__stat-label {
  font-size: .98rem;
  color: var(--ink-soft);
  max-width: 26ch;
}

/* ============================================================
   THE FUTURE — inverse moment
   ============================================================ */
.future {
  background:
    radial-gradient(900px 500px at 85% 0%, rgb(var(--brand-rgb) / .45), transparent 55%),
    radial-gradient(700px 500px at 0% 100%, rgba(8,145,178,.25), transparent 55%),
    var(--ink);
  color: #fff;
}
.future__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(4.5rem, 10vw, 7rem);
}
.future__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  letter-spacing: -.04em;
  line-height: 1.05;
  margin-bottom: 1.2rem;
}
.future__body {
  font-size: 1.12rem;
  color: rgba(255,255,255,.74);
  max-width: 48ch;
  margin: 0;
}

/* glowing future engine chain */
.future__viz { display: flex; justify-content: center; }
.future-engine {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  width: 100%;
  max-width: 320px;
}
.future-node {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: .85rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(4px);
}
.future-node::before {
  content: "";
  position: absolute;
  left: 1.2rem; top: -.7rem;
  width: 2px; height: .7rem;
  background: rgba(255,255,255,.25);
}
.future-node:first-child::before { display: none; }
.future-node--strategy { box-shadow: inset 3px 0 0 var(--strategy); }
.future-node--calendar { box-shadow: inset 3px 0 0 var(--calendar); }
.future-node--write    { box-shadow: inset 3px 0 0 var(--write); }
.future-node--publish  { box-shadow: inset 3px 0 0 var(--publish); }
.future-node--inbound {
  box-shadow: inset 3px 0 0 #A9AEFF, 0 0 30px rgb(var(--brand-rgb) / .5);
  background: rgb(var(--brand-rgb) / .28);
  border-color: rgba(169,174,255,.4);
}
.future-node--pipeline,
.future-node--revenue {
  border-style: dashed;
  color: rgba(255,255,255,.6);
}
.future-node--revenue {
  font-weight: 700;
  background: rgba(255,255,255,.08);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq__inner { padding-block: clamp(4rem, 9vw, 6.5rem); }
.faq__list {
  max-width: 820px;
  display: grid;
  gap: .8rem;
}
.faq-item {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item[open] {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--hairline));
  box-shadow: var(--shadow-sm);
}
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -.01em;
  padding: 1.2rem 1.4rem;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__icon {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--brand);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.faq-item__icon::before { width: 18px; height: 2.4px; }
.faq-item__icon::after  { width: 2.4px; height: 18px; }
.faq-item[open] .faq-item__icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item__a {
  margin: 0;
  padding: 0 1.4rem 1.3rem;
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 64ch;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta { padding-block: clamp(4rem, 9vw, 6.5rem); }
.cta__card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(2.8rem, 7vw, 4.8rem) var(--gutter);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 360px at 50% -20%, rgb(var(--brand-rgb) / .10), transparent 60%),
    var(--tint);
  border: 1px solid var(--hairline);
}
.cta__glow {
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--strategy), var(--calendar), var(--write), var(--publish));
}
.cta__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -.04em;
  margin-bottom: .7rem;
}
.cta__body {
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(3rem, 6vw, 4rem);
  background: var(--canvas);
}
.footer__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: 3rem;
}
.footer__tagline {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  max-width: 30ch;
  font-size: .98rem;
}
.footer__cols {
  grid-column: 2 / -1;          /* the brand is column 1; links fill columns 2–4 */
  display: grid;
  grid-template-columns: subgrid; /* inherit the parent's tracks → all columns equal width */
}
.footer__cols--narrow { display: none; }
/* a column can stack more than one group (e.g. Product + Features) —
   plain block flow so each column's height is independent of its siblings */
.footer__col ul + .footer__col-title { margin-top: 1.6rem; }
.footer__col-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1rem;
}
.footer__col ul { display: grid; gap: .6rem; }
.footer__col a {
  color: var(--ink-soft);
  font-size: .95rem;
  transition: color .18s var(--ease);
}
.footer__col a:hover { color: var(--brand); }
.footer__base {
  border-top: 1px solid var(--hairline);
  padding-block: 1.5rem;
}
.footer__base p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero__copy { max-width: none; }
  .stage-grid { grid-template-columns: repeat(2, 1fr); }
  .proof__inner,
  .future__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols--wide { grid-column: auto; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
}

@media (max-width: 760px) {
  .solution-grid { grid-template-columns: 1fr; }
  .footer__cols--wide { display: none; }
  .footer__cols--narrow {
    display: grid;
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem 2rem;
  }

  /* mobile-only auto-hide: .nav--hidden is toggled by initNavAutoHide()
     in app.js (scroll-direction based — down hides, up reveals). Mobile
     only since the nav is a much smaller share of a phone's screen
     height, where reclaiming those 72px on scroll actually matters. */
  .nav--hidden { transform: translateY(-100%); }

  /* mobile nav: burger toggles a panel (CSS-only, no JS) */
  .nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: -1;            /* hamburger to the far left */
    width: 44px; height: 44px;
    border-radius: 11px;
    border: 1px solid var(--hairline);
    background: var(--canvas);
    cursor: pointer;
  }
  .nav__burger-bar { position: relative; display: block; }
  .nav__burger-bar,
  .nav__burger-bar::before,
  .nav__burger-bar::after {
    width: 18px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .2s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
  }
  .nav__burger-bar::before,
  .nav__burger-bar::after { content: ""; position: absolute; left: 0; }
  .nav__burger-bar::before { top: -6px; }
  .nav__burger-bar::after { top: 6px; }
  .nav__cb:checked ~ .nav__burger .nav__burger-bar { background: transparent; }
  .nav__cb:checked ~ .nav__burger .nav__burger-bar::before { transform: translateY(6px) rotate(45deg); }
  .nav__cb:checked ~ .nav__burger .nav__burger-bar::after { transform: translateY(-6px) rotate(-45deg); }

  .nav__links {
    position: absolute;
    top: 72px; left: 0; right: 0;
    margin: 0;
    padding: .8rem var(--gutter) 1.4rem;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 72px);   /* fallback for browsers without dvh */
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: none;
  }
  .nav__cb:checked ~ .nav__links { display: block; }
  /* lock the page behind the open mobile menu so a scroll gesture on the
     menu can't get captured by the body instead */
  body:has(.nav__cb:checked) { overflow: hidden; }
  .nav__menu { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__item { position: static; }
  .nav__link { font-size: 1.05rem; padding: .7rem .3rem; }
  .nav__caret { display: none; }
  .nav__panel {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    min-width: 0;
    border: none; border-left: 2px solid var(--hairline);
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 .5rem .3rem;
    padding: .1rem 0 .5rem .8rem;
  }
  .nav__panel::before { display: none; }
  .nav__sub { font-size: .96rem; padding: .5rem .6rem; }

  /* mobile header layout: hamburger · logo (beside it) · CTA (far right) */
  .nav__cta { margin-left: auto; }   /* CTA to the far right */

  /* .nav--over-hero.nav--transparent's white text only makes sense
     against the hero showing through behind it — the expanded mobile
     menu panel (.nav__links, opened via the checkbox toggle) is always a
     solid var(--canvas) background regardless of scroll position, so
     that white text goes invisible against it. Force the normal dark
     styling back here, undoing the transparent-over-hero override —
     .nav__link only (not .brand/.brand__logo: the logo lives in the
     persistent header bar, not inside .nav__links, and keeps floating
     white-over-hero/dark-after-scroll exactly like desktop). */
  .nav--over-hero.nav--transparent .nav__link { color: var(--ink-soft); }
  .nav--over-hero.nav--transparent .nav__item--menu:hover > .nav__link,
  .nav--over-hero.nav--transparent .nav__item--menu:focus-within > .nav__link {
    color: var(--ink);
    background: var(--tint);
  }
}

@media (max-width: 480px) {
  .stage-grid { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1; }
}

/* ============================================================
   PROBLEM — the content team you'd otherwise hire (cost ledger)
   ============================================================ */
.problem { padding-block: clamp(4rem, 9vw, 6.5rem); }
.problem__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.problem__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  letter-spacing: -.035em;
  line-height: 1.08;
  margin-bottom: 1rem;
  max-width: 15ch;
}
.problem__body {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 1.3rem;
}
.problem__note {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--ink);
  margin: 0;
  max-width: 40ch;
}
.problem__note span { color: var(--brand); }

.ledger {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  box-shadow: var(--shadow-md);
}
.ledger__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 .3rem .8rem;
  border-bottom: 1px solid var(--hairline);
}
.ledger__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: .85rem .3rem;
  border-bottom: 1px solid var(--hairline);
}
.ledger__role {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}
.ledger__role span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .8rem;
  color: var(--ink-soft);
}
.ledger__cost {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  text-align: right;
}
.ledger__ramp {
  font-size: .82rem;
  color: var(--ink-soft);
  white-space: nowrap;
  text-align: right;
}
.ledger__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem .3rem .2rem;
}
.ledger__total-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink-soft);
}
.ledger__total .ledger__cost { font-size: 1.6rem; color: var(--write); }
.ledger__firstorg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
}
.ledger__firstorg p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.82); }
.ledger__firstorg strong { font-family: var(--font-display); display: block; font-size: 1.05rem; color: #fff; }
.ledger__firstorg .tag {
  font-family: var(--font-display);
  font-weight: 700;
  background: rgba(255,255,255,.18);
  padding: .35em .85em;
  border-radius: 999px;
  font-size: .82rem;
  white-space: nowrap;
}

/* ============================================================
   HOW IT WORKS — 4 steps
   ============================================================ */
.how { padding-block: clamp(2.7rem, 6vw, 4.3rem); }
.how__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.4rem);
  position: relative;
}
.step {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.7rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  margin-bottom: 1.1rem;
}
.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: .5rem;
}
.step__body { font-size: .94rem; color: var(--ink-soft); margin: 0; }
.step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -1rem; top: 2.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: color-mix(in srgb, var(--brand) 55%, var(--hairline));
  z-index: 2;
}

/* ============================================================
   THE FUTURE — revenue-engine org diagram
   ============================================================ */
.future__viz { display: flex; justify-content: center; }
.org {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.org__hub {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  text-align: center;
  padding: .95rem 1.6rem;
  border-radius: 14px;
  background: rgb(var(--brand-rgb) / .3);
  border: 1px solid rgba(169,174,255,.45);
  box-shadow: 0 0 34px rgb(var(--brand-rgb) / .5);
}
.org__hub span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .76rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72);
  margin-top: .15rem;
}
.org__hub::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -1.1rem;
  width: 2px; height: 1.1rem;
  background: rgba(169,174,255,.4);
  transform: translateX(-50%);
}
.org__leads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  width: 100%;
}
.org-lead {
  padding: .9rem 1rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.org-lead h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 .5rem;
}
.org-lead ul { display: flex; flex-wrap: wrap; gap: .35rem; }
.org-lead li {
  font-size: .72rem;
  color: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: .18em .6em;
}
.org-lead--live {
  border-color: rgba(169,174,255,.5);
  background: rgb(var(--brand-rgb) / .24);
  box-shadow: 0 0 26px rgb(var(--brand-rgb) / .4);
}
.org-lead--live li {
  color: rgba(255,255,255,.85);
  border-color: rgba(169,174,255,.4);
}
.org-lead__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #0B0C14;
  background: #A9AEFF;
  padding: .22em .6em;
  border-radius: 999px;
  margin-bottom: .55rem;
}

/* ============================================================
   RESPONSIVE — new sections
   ============================================================ */
@media (max-width: 980px) {
  .problem__inner { grid-template-columns: 1fr; }
  .how__grid { grid-template-columns: repeat(2, 1fr); }
  .step:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .how__grid { grid-template-columns: 1fr; }
  .ledger__row, .ledger__head { grid-template-columns: 1fr auto; }
  .ledger__ramp { display: none; }
  .org__leads { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
.page-hero { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.page-hero__inner { max-width: 720px; margin-inline: auto; }
.page-hero__h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 3.6rem);
  letter-spacing: -.04em;
  line-height: 1.04;
  margin: .4rem 0 1rem;
}
.page-hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 0 auto;
}
/* a .btn placed directly in .page-hero__inner (e.g. 404.php) — no wrapper
   needed, .page-hero's own text-align: center already centers an
   inline-flex .btn the same way it centers the h1/lead above it. */
.page-hero__lead + .btn { margin-top: clamp(1.4rem, 3vw, 2rem); }
.page-hero__bar {
  width: 64px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--strategy), var(--calendar), var(--write), var(--publish));
  margin: 0 auto 1.4rem;
}

/* ============================================================
   LEGAL — long-form prose (terms, privacy)
   ============================================================ */
.legal { padding-block: clamp(1rem, 3vw, 2rem) clamp(4rem, 9vw, 6.5rem); }
.legal__body { max-width: 720px; margin-inline: auto; }
.legal__meta { color: var(--ink-soft); font-size: .95rem; margin: 0 0 .4rem; }
.legal__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 .9rem;
}
.legal__body p,
.legal__body ul,
.legal__body ol { color: var(--ink-soft); line-height: 1.75; margin: 0 0 1.1rem; }
.legal__body ul { padding-left: 1.3rem; list-style: disc; }   /* re-enable markers over the sitewide ul,ol{list-style:none} reset */
.legal__body ol { padding-left: 1.3rem; list-style: decimal; }
.legal__body li { margin-bottom: .5rem; }
.legal__body a { color: var(--brand); text-decoration: underline; }
.legal__body strong { color: var(--ink); }
.legal__hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.25rem 0; }

.plans-section { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(4rem, 9vw, 6.5rem); }
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
  max-width: 1080px;
  margin-inline: auto;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem 2.1rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.plan--featured {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.plan--featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--strategy), var(--calendar), var(--write), var(--publish));
}
.plan__badge {
  position: absolute;
  top: -.85rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  padding: .35em .9em;
  border-radius: 999px;
  white-space: nowrap;
}
.plan__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -.02em;
}
.plan__tagline { font-size: .94rem; color: var(--ink-soft); margin: .35rem 0 0; min-height: 2.6em; }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin: 1.2rem 0 .2rem;
}
.plan__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.7rem;
  letter-spacing: -.04em;
  line-height: 1;
}
.plan__period { font-size: .92rem; color: var(--ink-soft); }
.plan__billing { font-size: .85rem; color: var(--ink-soft); margin: 0 0 1.4rem; }
.plan .btn { width: 100%; }
.plan__features {
  display: grid;
  gap: .7rem;
  margin: 1.5rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}
.plan__feature {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: .6rem;
  align-items: start;
  font-size: .94rem;
  color: var(--ink);
}
.plan__feature svg { width: 20px; height: 20px; color: var(--publish); margin-top: .1rem; }
.plan__feature--muted { color: var(--ink-soft); }
.plan__cta-wrap { margin-top: 1.6rem; }

.plans-note {
  text-align: center;
  max-width: 60ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  font-size: .95rem;
  color: var(--ink-soft);
}
.plans-note a { color: var(--brand); font-weight: 600; }

/* "every plan includes" strip */
.includes { padding-block: clamp(3.5rem, 7vw, 5rem); }
.includes__inner { text-align: center; }
.includes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 1.4rem;
  max-width: 920px;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
}
.includes__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: flex-start;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .96rem;
  text-align: left;
}
.includes__item svg { width: 18px; height: 18px; color: var(--brand); flex: none; }

@media (max-width: 880px) {
  .plans { grid-template-columns: 1fr; max-width: 460px; }
  .plan--featured { order: -1; }
  .includes__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .includes__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME — VIDEO
   ============================================================ */
.video { padding-block: clamp(1.5rem, 4vw, 3rem); }
.video__frame {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: radial-gradient(120% 130% at 50% 0%, #eef0ff 0%, var(--tint) 55%, var(--canvas) 100%);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
}
/* width variants — fraction of the containing column, not the viewport;
   .video__frame's own aspect-ratio keeps every size at a correct 16:9 */
.video__frame--full    { max-width: 940px; }   /* same as the unmodified default, named for clarity */
.video__frame--half    { max-width: 50%; }
.video__frame--third   { max-width: 33.333%; }
.video__frame--quarter { max-width: 25%; }
@media (max-width: 640px) {
  /* a quarter-width video is unusably small on a phone — collapse every
     variant back to full width below the point .gbox-grid columns do too */
  .video__frame--half,
  .video__frame--third,
  .video__frame--quarter { max-width: 100%; }
}
/* the 88px play button reads as oversized once the frame itself is this
   small — scale it and its icon down together for the two smallest variants */
.video__frame--third .video__play,
.video__frame--quarter .video__play { width: 56px; height: 56px; }
.video__frame--third .video__play svg,
.video__frame--quarter .video__play svg { width: 20px; height: 20px; margin-left: 3px; }

/* full-bleed, viewport-height variant — used on the homepage below the
   Big Features section, and in the Design Scheme's own width-variants
   accordion. Breaks .video__frame's own 16:9 aspect-ratio and 940px cap
   entirely — height is the viewport minus the 72px sticky nav (.nav__inner)
   so the frame settles flush against the space below it (falls back to
   100vh in browsers without dvh support). Unlike .hero, which is the very
   first element on the page and pulls itself up with margin-top: -72px to
   run edge-to-edge behind a transparent nav, this section sits further
   down the page — by the time it's in view the nav has long since gone
   solid, so subtracting its height here (rather than pulling the frame
   under it) keeps the whole frame, including the bottom-left CTA, clear
   of the opaque bar instead of having its top 72px painted over. Width
   uses the standard breakout trick (100vw + margin-inline: calc(50% -
   50vw)) so it spans the true browser width regardless of whether it
   sits directly in a section (homepage) or nested inside .shell (Design
   Scheme) — the calc resolves to a no-op margin when the parent is
   already full width, and to the exact negative-margin breakout when the
   parent is narrower. .video__cover already uses object-fit: cover (see
   below), which crops to completely fill any box shape with no empty
   space — that's what already guarantees no letterboxing here, this
   variant just changes the box's shape to 100vw × (100vh - 72px). On
   mobile it drops the full-bleed treatment entirely — full width but
   inset like every other card (shell's own gutter, replicated here via
   margin since this isn't inside a .shell), with the same rounded
   corners/border/shadow the other width variants keep. */
.video__frame--viewport {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  height: calc(100vh - 72px);
  height: calc(100dvh - 72px);
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
}
@media (max-width: 760px) {
  .video__frame--viewport {
    width: calc(100% - 2 * var(--gutter));
    margin-inline: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    border: 0;
  }
}
.video__cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.video__play {
  position: relative; z-index: 1;   /* sits above the cover image */
  display: grid; place-items: center;
  width: 88px; height: 88px;
  border: 0; border-radius: 999px;
  background: var(--brand); color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 34px rgb(var(--brand-rgb) / .34);
  transition: transform .2s var(--ease);
}
.video__play:hover { transform: scale(1.06); }
.video__play svg { width: 30px; height: 30px; margin-left: 5px; }
.video__caption { text-align: center; color: var(--ink-soft); margin-top: 1.1rem; font-size: .98rem; }

/* bottom-left headline + rectangular CTA overlay — used on the homepage's
   full-bleed .video__frame--viewport in place of the centered .video__play
   circle. .prod-demo is position:relative so .video__cta-h2 (a sibling of
   .video__frame, not a descendant — see below) can be pinned over the
   frame's bottom-left corner without being clipped by the frame's own
   overflow:hidden; .video__cta (the button's wrapper) stays a descendant
   of the frame since the button never needs to escape it. .video__scrim
   is the same bottom-weighted gradient technique as .hero__scrim, keeping
   the headline legible over the cover image. Neither .prod-demo nor
   .video__frame sets a z-index of its own, so none of this nesting
   creates a separate stacking context — .video__cta-h2's z-index: 2 still
   compares directly against .video__scrim/.video__cta's z-index: 1/2 as
   if they were flat siblings, which is what lets the headline sit above
   the scrim despite living outside the frame in markup. */
.prod-demo { position: relative; }
/* headline: a sibling of .video__frame (not nested inside it — see comment
   above) so it can also be pulled out of the overlay entirely on mobile
   (its own override further down) without fighting the frame's clipping.
   bottom or offsets .video__cta-h2 to sit just above .video__cta-btn: the
   button's own box is a fixed ~2.9rem tall (font-size and padding are set
   in rem/em, not vw, so this doesn't drift across viewport widths) plus
   the 1.1rem gap that used to sit between them back when both lived in
   the same flex column — recompute this offset if the button's font-size,
   padding, or icon size ever change. */
.video__cta-h2 {
  position: absolute; z-index: 2;
  left: clamp(1.5rem, 5vw, 4rem);
  bottom: calc(clamp(2rem, 6vw, 4rem) + 4rem);
  max-width: 480px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 12px rgb(0 0 0 / .3);
}
.video__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(6,7,14,.72) 0%, rgba(6,7,14,.15) 45%, rgba(6,7,14,0) 70%);
}
.video__cta {
  position: relative; z-index: 2;
  align-self: end; justify-self: start;
  padding: 0 0 clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
}
.video__cta-btn {
  display: inline-flex; align-items: center; gap: .6em;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  padding: .9em 1.5em;
  border: 0; border-radius: 10px;
  background: var(--brand); color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 34px rgb(var(--brand-rgb) / .34);
  transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.video__cta-btn:hover { background: var(--brand-deep); transform: translateY(-2px); }
.video__cta-btn svg { width: 18px; height: 18px; }

/* mobile: headline moves out of the overlay entirely, onto a full-width
   black band above the (now square) frame — see .video__frame--viewport's
   own mobile override above for the square swap. .prod-demo becomes the
   stacked layout: top padding (from the shared .prod-demo/.bigfeatures/etc.
   padding-block rule in london.css) → headline → gap → frame → gap →
   bottom padding, with the gap value below standing in for "padding above
   and below the video viewport". .video__cta-btn switches to the site's
   documented white-on-colour-background pattern (see Design Scheme →
   Buttons, .btn--swatch--indigo: white at rest, amber fill + ink text on
   hover) since the button now sits on a solid black surface rather than
   directly on the video image. .video__cta drops out of the grid-centred
   flow (.video__frame's place-items: center, which absolutely-positioned
   grid items ignore anyway) and pins to a fixed top:70%/left:50% point
   within the square frame instead, so the button reads as lower than
   dead-centre rather than perfectly centred. */
@media (max-width: 760px) {
  .prod-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 6vw, 2.5rem);
    background: var(--ink);
    /* the shared .prod-demo padding-block (london.css) sits INSIDE this
       black background, not between it and the previous section — so on
       its own it reads as a hard cut straight from the chart section into
       solid black, not a gap. margin-top adds an actual canvas-coloured
       break before the black band starts. */
    margin-top: clamp(2rem, 6vw, 3rem);
    /* same breakout as .video__frame--viewport, so the black band still
       spans the true browser width when .prod-demo is nested inside
       .shell (Design Scheme's own demo) rather than sitting directly in
       <main> (the homepage) — a no-op on the homepage, where it's
       already full width. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .video__cta-h2 {
    position: static;
    max-width: none;
    width: 100%;
    text-align: center;
    padding-inline: clamp(1.5rem, 8vw, 2.5rem);
  }
  .video__cta {
    position: absolute;
    top: 70%;
    left: 50%;
    width: max-content;
    transform: translate(-50%, -50%);
    padding: 0;
  }
  .video__cta-btn {
    background: #fff;
    color: var(--brand);
    box-shadow: var(--shadow-md);
  }
  .video__cta-btn:hover { background: var(--calendar); color: var(--ink); }
}

/* video lightbox — covers 80% of the viewport. Width is capped at 80vh's
   worth of 16:9 (via calc) so a wide/short viewport still keeps the frame
   under 80vh tall, not just under 80vw wide. */
.video-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgb(0 0 0 / .82);
}
.video-lightbox.is-open { display: flex; }
.video-lightbox__box {
  position: relative;
  width: min(80vw, calc(80vh * 16 / 9));
  aspect-ratio: 16 / 9;
}
.video-lightbox__frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 12px;
  background: #000;
}
.video-lightbox__close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / .12);
  border: 0.5px solid rgb(255 255 255 / .3);
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.video-lightbox__close:hover { background: rgb(255 255 255 / .22); }
.video-lightbox__close svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  /* full-bleed sideways only — drop the side padding and the 80vw cap so
     the box spans the true screen width; height still follows the 16:9
     aspect-ratio, which naturally keeps it well short of full height on a
     typical portrait phone, so vertical breathing room stays untouched */
  .video-lightbox { padding-inline: 0; }
  .video-lightbox__box { width: 100vw; max-width: 100vw; }
  .video-lightbox__frame { border-radius: 0; }
  .video-lightbox__close { right: .6rem; }
}

/* ============================================================
   HOME — WHAT IT DOES
   ============================================================ */
.what { padding-block: clamp(3.5rem, 8vw, 6rem); }
.what__inner { max-width: 820px; margin-inline: auto; }
.what__body {
  text-align: center;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--ink-soft); line-height: 1.6;
  margin: 0 0 2.4rem;
}
.what__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.what-point {
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--canvas);
}
.what-point__title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 0 0 .35rem; }
.what-point__body { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; margin: 0; }

/* ============================================================
   INTEGRATIONS — SERVICE CARDS (per-channel permissions)
   ============================================================ */
.svc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 760px;
}
.svc-card {
  padding: 2rem 1.8rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--canvas);
}
.svc-card__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.6rem; }
.svc-card__logo { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; flex: none; }
.svc-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.svc-card__group-label {
  font-family: var(--font-display); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
  margin: 1.3rem 0 .7rem;
}
.svc-card__group-label:first-of-type { margin-top: 0; }
.svc-card__list { display: grid; gap: .55rem; }
.svc-card__item {
  display: flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 500;
}
.svc-card__item svg { width: 18px; height: 18px; color: var(--publish); flex: none; }
.svc-card__item--soon { color: var(--ink-soft); font-weight: 400; }
.svc-card__item--soon svg { color: var(--hairline); }
.svc-card__soon-tag {
  margin-left: auto;
  font-family: var(--font-display); font-weight: 600; font-size: .68rem;
  padding: .25rem .6rem; border-radius: 999px;
  background: var(--tint); color: var(--ink-soft);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME — KEY BENEFITS (3 blocks)
   ============================================================ */
.benefits { padding-block: clamp(3.5rem, 8vw, 6rem); }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.benefit {
  padding: 2rem 1.8rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--canvas);
}
.benefit__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--tint); color: var(--brand);
  margin-bottom: 1.2rem;
}
.benefit__icon svg { width: 26px; height: 26px; }
.benefit__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 .5rem; }
.benefit__body { color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ============================================================
   HOME — TRUST CONTROLS
   ============================================================ */
.trust { padding-block: clamp(3.5rem, 8vw, 6rem); }
.trust__options {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 880px; margin-inline: auto;
}
.trust-card {
  padding: 2rem 1.8rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--canvas);
}
.trust-card--auto { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.trust-card__badge {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600; font-size: .76rem;
  padding: .32rem .75rem; border-radius: 999px;
  background: var(--tint); color: var(--brand);
  margin-bottom: 1rem;
}
.trust-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 .5rem; }
.trust-card__body { color: var(--ink-soft); line-height: 1.6; margin: 0; }

.fine-note { color: var(--ink-soft); font-size: .76rem; margin: 1.4rem 0 0; opacity: .8; }

/* ============================================================
   HOME — USE CASES
   ============================================================ */
.usecases { padding-block: clamp(2.3rem, 5.3vw, 4rem); }
.usecases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.usecase {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.8rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--canvas);
}
.usecase__tag { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--brand); }
.usecase__title { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; margin: 0; }
.usecase__body { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; margin: 0; }

/* responsive — home section grids */
@media (max-width: 920px) {
  .what__points,
  .benefits__grid,
  .usecases__grid { grid-template-columns: 1fr 1fr; }
  .trust__options { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .what__points,
  .benefits__grid,
  .usecases__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT US / WAITLIST — share the same form treatment
   ============================================================ */
.contact-sec,
.waitlist-sec { padding-block: clamp(1rem, 3vw, 2rem) clamp(4rem, 9vw, 6.5rem); }

.contact-box,
.waitlist-box {
  max-width: 640px;
  background: var(--tint);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.contact-form,
.waitlist-form { max-width: 640px; }
.contact-form__row,
.waitlist-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 600px) {
  .contact-form__row,
  .waitlist-form__row { grid-template-columns: 1fr; }
}

.form-field { margin-bottom: 1.2rem; }
.form-field__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .45rem;
}
.form-field__input {
  width: 100%;
  font: inherit;
  font-size: .96rem;
  color: var(--ink);
  background: var(--canvas);
  border: 1.5px solid var(--hairline);
  border-radius: 12px;
  padding: .82em 1em;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-field__input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .16);
}
.form-field__textarea { resize: vertical; min-height: 8.5em; }
.form-field__select { appearance: none; background: var(--canvas) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%23565B73" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8l5 5 5-5"/></svg>') no-repeat right 1em center / 16px; padding-right: 2.6em; }
.form-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form__submit,
.waitlist-form__submit { margin-top: .2rem; }
.contact-form__status,
.waitlist-form__status {
  font-size: .92rem;
  font-weight: 600;
  margin: .9rem 0 0;
  min-height: 1.3em;
}
.contact-form__status--ok,  .waitlist-form__status--ok  { color: var(--publish); }
.contact-form__status--err, .waitlist-form__status--err { color: var(--write); }
.waitlist-form__terms {
  font-size: .85rem;
  color: var(--ink-soft);
  margin: .9rem 0 0;
}
.waitlist-form__terms a { color: inherit; text-decoration: underline; }

/* ============================================================
   TRUST LEVELS — the task control panel (/features/trust-levels/).
   Three modes share one colour language everywhere on the page (the panel
   below, and the definition-card icons further down): --brand/indigo for
   Supervised (a decision waiting on you), --publish/azure for Autonomous
   (already running on its own — --publish resolves to azure, #00A1DE, not
   the "lime" its own :root comment claims a few lines up; london.css's own
   :root loads after this one and silently redefines it — same variable
   name, two different values, and london.css's wins everywhere on the
   site, not just here), and a dashed, colour-less outline for Do Not Handle (the
   one state that's deliberately NOT solid — nothing is happening, so it
   shouldn't read as "active" the way a filled pill does). Inactive pills
   in a row stay uniformly muted regardless of mode, so a row only ever
   draws the eye to its one true setting.
   ============================================================ */
/* extra breathing room above the panel when it follows the two definition
   cards rather than sitting directly under .section-head (its only other
   position) — .prod-lead's own margin-top is tuned for that first case.
   margin-bottom is needed too: unlike a normal .prod-lead (always followed
   by a .gbox-grid, which gets its gap from .section-head's own
   margin-bottom further up), this paragraph sits directly next to
   .tlvl-panel as a plain sibling with no .section-head wrapper to space
   it — without this it touches the panel's border with no gap at all.
   Selector is deliberately .prod-lead.tlvl-panel-intro (compound, not just
   .tlvl-panel-intro): .prod-lead itself sets its own margin in london.css,
   which loads AFTER this file — at equal specificity the later stylesheet
   wins, so a plain .tlvl-panel-intro rule here was being silently
   overridden by .prod-lead's margin every time, no matter what value was
   set. The compound selector's higher specificity (two classes, not one)
   is what actually makes it win, regardless of load order. */
.prod-lead.tlvl-panel-intro { margin: clamp(2rem, 4vw, 2.8rem) 0 clamp(1.6rem, 3vw, 2.2rem); }
.tlvl-panel {
  max-width: 720px;
  margin-inline: auto;
  background: var(--tint);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3.5vw, 2rem) clamp(1.4rem, 4vw, 2.4rem);
}
.tlvl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: clamp(.85rem, 2vw, 1.1rem);
  border-bottom: 1px solid var(--hairline);
}
.tlvl-row:last-child { border-bottom: 0; padding-bottom: 0; }
.tlvl-row:first-child { padding-top: 0; }
.tlvl-task { font-weight: 600; font-size: .96rem; color: var(--ink); }
.tlvl-seg { display: flex; gap: .4rem; flex: none; }
.tlvl-seg__opt {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .01em;
  color: var(--ink-soft);
  background: var(--canvas);
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  padding: .35em .85em;
  white-space: nowrap;
}
.tlvl-seg__opt.is-active.tlvl-seg__opt--supervised { background: var(--brand); border-color: var(--brand); color: #fff; }
.tlvl-seg__opt.is-active.tlvl-seg__opt--autonomous { background: var(--publish); border-color: var(--publish); color: #fff; }
.tlvl-seg__opt.is-active.tlvl-seg__opt--off {
  background: transparent;
  border-style: dashed;
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .tlvl-row { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .tlvl-seg { width: 100%; }
  .tlvl-seg__opt { flex: 1; text-align: center; }
}

/* definition cards — same three colours as the panel above, carried by a
   small icon chip only; card background stays neutral/plain (.gbox
   default) on purpose, so no single level reads as "the recommended one" —
   founders are meant to pick per task type, not be steered toward one. */
.tlvl-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.tlvl-icon svg { width: 22px; height: 22px; color: #fff; }
.tlvl-icon--supervised { background: var(--brand); }
.tlvl-icon--autonomous { background: var(--publish); }
.tlvl-icon--off { background: var(--ink-soft); }