/* ==========================================================================
   MaxiaPulse home, premium reimagining. Page styles over the scrollcraft floor.
   Six colour roles from the Pulse brand, one family (Avenir Next, the face the
   live site already uses). No gradient text: emphasis is weight, size and a
   solid violet. The engine's own selectors are not restyled.
   ========================================================================== */

:root {
  --sc-canvas:     #0e0c14;   /* Pulse void */
  --sc-surface:    #17141f;
  --sc-ink:        #f3f0fa;   /* lavender white */
  --sc-ink-soft:   #b6afc7;   /* tinted, not grey */
  --sc-accent:     #8f3cfa;   /* Pulse violet: the action colour */
  --sc-accent-ink: #ffffff;

  --violet-text:   #b996ff;   /* violet used as text on the dark */
  --warm-ink:      #f7efe6;   /* the human line, warm like the room */
  --line:          #2b2539;
  --line-strong:   #3d354f;
  --raised:        #1d1927;

  --sc-font-display: "Avenir Next", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sc-font-text:    "Avenir Next", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --sc-shadow-color: 262 40% 3%;
  --r-sm: 10px;              /* buttons, menu items */
  --r-lg: 20px;              /* panels, screens */
  --bar-h: 84px;
  --ribbon-h: 36px;
  --sc-maxw: 78rem;
}

html { scroll-padding-top: calc(var(--bar-h) + 24px); }
body { background: var(--sc-canvas); font-weight: 400; letter-spacing: 0; }
::selection { background: var(--sc-accent); color: #fff; }
b, strong { font-weight: 600; color: var(--sc-ink); }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--sc-accent); color: #fff; padding: 10px 14px; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
}
.skip:focus-visible { top: 12px; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--r-sm);
  font-weight: 600; font-size: 1rem; letter-spacing: .005em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary {
  background: var(--sc-accent); color: #fff;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .18);
}
.btn--ghost { background: rgb(14 12 20 / .38); color: var(--sc-ink); border-color: rgb(243 240 250 / .32); }
.btn--quiet { background: transparent; color: var(--sc-ink); border-color: var(--line-strong); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .94rem; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 1.06rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #7427c8; }
  .btn--ghost:hover { border-color: var(--sc-ink); background: rgb(14 12 20 / .55); }
  .btn--quiet:hover { border-color: var(--violet-text); color: #fff; }
}
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ------------------------------------------------------------- masthead --
   The live site's layout, kept: ribbon, logo left, Features / Use cases /
   Pricing / Learn in the middle, Log in + Sign up right, burger on phones.
   Transparent over the first photograph, solid once the page moves. */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  transition: transform 320ms var(--sc-ease-out);
}
.masthead::before { /* the bar's own ground, faded in once scrolled */
  content: ""; position: absolute; inset: var(--ribbon-h) 0 0 0; pointer-events: none;
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity 240ms var(--sc-ease-out);
}
.masthead.is-scrolled { transform: translateY(calc(-1 * var(--ribbon-h))); }
.masthead.is-scrolled::before, .masthead.is-open::before { opacity: 1; }

.ribbon {
  position: relative; height: var(--ribbon-h); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 0 16px;
  background: #15111f; border-bottom: 1px solid var(--line);
  font-size: .84rem; color: var(--sc-ink-soft); white-space: nowrap; overflow: hidden;
}
.ribbon__lead { color: var(--violet-text); font-weight: 600; letter-spacing: .02em; }
.ribbon__text { overflow: hidden; text-overflow: ellipsis; }
.ribbon__link { color: var(--sc-ink); font-weight: 600; text-decoration: none; }
.ribbon__link:hover { text-decoration: underline; }

.bar {
  position: relative; height: var(--bar-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--sc-gutter);
}
.bar__brand { flex: none; display: block; }
.bar__brand { margin-right: 8px; }
/* The whole lockup at a size where BY MAXIA reads: its cap height is 13% of
   the artwork, so 56px of artwork gives ~7.4px caps (about an 11px face). */
.bar__brand img { height: 56px; width: auto; }
.bar__sheet { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bar__links { list-style: none; margin: 0 auto; padding: 0; display: flex; align-items: center; gap: 4px; }
.bar__links > li { position: relative; }
.bar__link, .drop__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer;
  color: var(--sc-ink); font-size: 1.02rem; font-weight: 500; text-decoration: none;
  text-shadow: 0 1px 12px rgb(14 12 20 / .55);
  transition: background-color 160ms var(--sc-ease-out);
}
.chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 180ms var(--sc-ease-out); opacity: .8; }
.drop.open .chev { transform: translateY(1px) rotate(225deg); }
@media (hover: hover) and (pointer: fine) {
  .bar__link:hover, .drop__btn:hover, .drop.open .drop__btn { background: rgb(243 240 250 / .08); }
}
.bar__right { display: flex; align-items: center; gap: 10px; flex: none; }
.bar__login { color: var(--sc-ink); text-decoration: none; font-weight: 500; padding: 0 12px; height: 40px; display: inline-flex; align-items: center; border-radius: var(--r-sm); text-shadow: 0 1px 12px rgb(14 12 20 / .55); }
.bar__login:hover { background: rgb(243 240 250 / .08); }
.bar__burger { display: none; }

/* dropdown panels */
.drop__panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  translate: -50% 0;
  background: #17131f; border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sc-e3), var(--sc-edge);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: 50% 0;
  transition: opacity 180ms var(--sc-ease-out), transform 220ms var(--sc-ease-out), visibility 0s linear 220ms;
}
.drop.open .drop__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.drop__panel::before { content: ""; position: absolute; inset: -12px 0 auto 0; height: 12px; } /* hover bridge */

.simple { padding: 10px; width: max-content; }
.simple ul { list-style: none; margin: 0; padding: 0; }
.simple a, .cat__subs a {
  display: block; padding: 10px 14px; border-radius: var(--r-sm);
  color: var(--sc-ink); text-decoration: none; font-size: .95rem; line-height: 1.35;
}
.simple a:hover, .cat__subs a:hover, .simple a:focus-visible, .cat__subs a:focus-visible { background: rgb(143 60 250 / .16); }

.mega { width: 40rem; padding: 12px; }
.mega__cats { list-style: none; margin: 0; padding: 0; width: 14.5rem; }
.cat__btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  color: var(--sc-ink-soft); font-size: .98rem; font-weight: 500; text-align: left;
}
.cat__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cat.on .cat__btn { background: rgb(243 240 250 / .07); color: var(--sc-ink); }
.cat.on .cat__btn svg { color: var(--violet-text); }
.cat__subs {
  list-style: none; margin: 0; padding: 0 0 0 16px;
  position: absolute; left: 15.25rem; top: 12px; right: 12px; bottom: 12px;
  border-left: 1px solid var(--line);
  display: none;
}
.cat.on .cat__subs { display: block; }
.cat__subs .more { color: var(--violet-text); }

/* ------------------------------------------------------------- photos --
   Scott's real photographs (no generated imagery). Each scene is one
   whole photo, colour-graded at export (scratch: grade.cjs: tone curve,
   split-tone, a luminance gradient map in the Pulse palette), with CSS
   layers over it: a brand tint, moving light, a slow sweep, a vignette and
   film grain. site.js drives the photo and the light at different rates.
   All motion is transform/opacity. */
.photo { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: var(--sc-canvas); }
.photo__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--op, 50% 50%);
  transform-origin: var(--fo, 50% 50%); will-change: transform;
}
.photo > div { position: absolute; inset: 0; pointer-events: none; }
/* the hero's live gradient, laid over the photo's colour (soft light keeps
   skin and faces believable) */
.photo__tint {
  background: linear-gradient(115deg, #7427c8 0%, #8f3cfa 30%, #e43ffb 66%, #ff8a4c 100%);
  mix-blend-mode: soft-light; opacity: .22;
}
/* a plain dim, for footage brighter than the page */
.photo__dim { background: rgb(14 12 20 / .3); }
/* a slow band of light that crosses the photo, then rests */
.photo__sweep {
  inset: -10% -60% !important;
  background: linear-gradient(104deg, transparent 38%, rgb(255 222 196 / .07) 46%, rgb(228 63 251 / .08) 50%, rgb(255 222 196 / .05) 54%, transparent 62%);
  mix-blend-mode: screen; transform: translate3d(-42%, 0, 0);
}
@media (prefers-reduced-motion: no-preference) {
  .photo__sweep { animation: sweep 14s cubic-bezier(.45, .05, .35, 1) 1.2s infinite; will-change: transform; }
}
@keyframes sweep {
  0%   { transform: translate3d(-42%, 0, 0); }
  42%  { transform: translate3d(42%, 0, 0); }
  100% { transform: translate3d(42%, 0, 0); }
}
.photo__vignette {
  background:
    radial-gradient(120% 95% at var(--vx, 62%) var(--vy, 46%), transparent 38%, rgb(14 12 20 / .5) 72%, rgb(14 12 20 / .9) 100%);
}
/* grain: the page's own noise tile, stronger and overlay-blended on photos */
.photo__grain {
  inset: -40px !important; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: no-preference) {
  .photo__grain { animation: grain 1.2s steps(6) infinite; }
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 17% { transform: translate3d(-18px, 12px, 0); }
  33% { transform: translate3d(14px, -20px, 0); } 50% { transform: translate3d(-8px, 26px, 0); }
  67% { transform: translate3d(22px, 6px, 0); } 83% { transform: translate3d(-24px, -10px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* the film (hero): the old homepage's video on the right, dissolving into
   the dark toward the copy. Two mask layers, intersected: left-to-right (an
   eased ramp, so there is no visible edge) and top/bottom (under the bar,
   and a soft landing into the next section). The drift wrapper is what
   site.js moves; it is oversized so the drift never shows an edge. */
.photo--film {
  left: 28%; --op: 56% 50%; --fo: 60% 50%; --vx: 60%; --vy: 48%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgb(0 0 0 / .08) 10%, rgb(0 0 0 / .3) 20%, rgb(0 0 0 / .62) 31%, rgb(0 0 0 / .88) 42%, #000 54%),
    linear-gradient(to bottom, rgb(0 0 0 / .35) 0, #000 22%, #000 72%, rgb(0 0 0 / .5) 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, rgb(0 0 0 / .08) 10%, rgb(0 0 0 / .3) 20%, rgb(0 0 0 / .62) 31%, rgb(0 0 0 / .88) 42%, #000 54%),
    linear-gradient(to bottom, rgb(0 0 0 / .35) 0, #000 22%, #000 72%, rgb(0 0 0 / .5) 86%, transparent 100%);
  mask-composite: intersect;
}
.film__drift { position: absolute; inset: -4% -2% -10% -2%; will-change: transform; }
.film__video { transform-origin: var(--fo); }
.photo--film .photo__tint { opacity: .3; }
/* pause / play: small, quiet, always reachable (WCAG 2.2.2) */
.film__toggle {
  position: absolute; z-index: 6; right: var(--sc-gutter); bottom: clamp(18px, 4vh, 36px);
  width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid rgb(243 240 250 / .28); background: rgb(14 12 20 / .5);
  color: var(--sc-ink); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.film__toggle[hidden] { display: none; }
.film__toggle:hover { background: rgb(14 12 20 / .72); border-color: rgb(243 240 250 / .5); }
.film__toggle:focus-visible { outline: 2px solid var(--violet-text); outline-offset: 3px; }
.film__ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.film__ico--play { fill: currentColor; stroke-width: 1.4; }
.film__toggle .film__ico--play, .film__toggle[aria-pressed="true"] .film__ico--pause { display: none; }
.film__toggle[aria-pressed="true"] .film__ico--play { display: block; }

/* ------------------------------------------------------------- 1 · hero -- */
.hero__stage { background: var(--sc-canvas); }
.hero__scrim { /* sibling of the copy: density only where the copy sits */
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse 50vw 46vh at 26vw calc(var(--ribbon-h) + var(--bar-h) + 24vh), rgb(14 12 20 / .95) 0%, rgb(14 12 20 / .86) 50%, rgb(14 12 20 / 0) 100%),
    linear-gradient(to bottom, rgb(14 12 20 / .78) 0, rgb(14 12 20 / 0) 200px),
    linear-gradient(100deg, rgb(14 12 20 / .9) 0%, rgb(14 12 20 / .74) 30%, rgb(14 12 20 / .2) 50%, transparent 62%),
    linear-gradient(to top, rgb(14 12 20 / .55) 0, transparent 24%);
}
.hero__copy {
  position: absolute; z-index: 5;
  left: var(--sc-gutter); right: auto; width: max-content; max-width: calc(100% - 2 * var(--sc-gutter));
  top: calc(var(--ribbon-h) + var(--bar-h) + clamp(20px, 6.5vh, 96px));
}
/* The live site's headline, by client request (Scott): Avenir Next 800,
   uppercase, -0.045em, 0.88 leading, the second phrase in the live Pulse
   gradient. This knowingly overrides scroll-craft's no-gradient-text rule.
   Size is tied to the copy column with container units, the live site's own
   fix for the one-word-per-line bug: the column has a definite width, the
   headline is 10.4cqi of it. Each phrase is set as two lines, so there are
   always four and no word is ever left alone on one; the widest line
   ("STOP COMPETING", 8.69em) is ~90% of the column. */
.hero__copy { width: clamp(27rem, 44vw, 42rem); container-type: inline-size; }
.hero__h {
  margin: 0;
  font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 10.4cqi, 5rem);
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--sc-ink);
}
.hero__h > span { display: block; }
.hero__h > span > span { display: block; white-space: nowrap; }
/* The gradient is painted per piece, not on the line box: each line, and each
   letter of the waving word, carries the same gradient sized to the whole
   two-line block (--hl-w x --hl-h) and shifted by its own offset (site.js),
   so the colour runs continuously even while letters move. Without JS the
   line box paints it as on the live site. */
.hero__l2 {
  --hl-grad: linear-gradient(135deg, #7427c8 0%, #8f3cfa 45%, #e43ffb 100%);
  position: relative;
  color: #e43ffb;   /* fallback */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__l2 {
    background-image: var(--hl-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero__l2.is-pieced { background-image: none; }
  .hero__l2.is-pieced > span:not(.wave), .wave__ch {
    background-image: var(--hl-grad);
    background-size: var(--hl-w) var(--hl-h);
    background-position: var(--bx) var(--by);
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
/* "Connection." waves: translateY only, never opacity, so it is always fully
   readable. One pass across the word takes ~1.2s (50ms stagger, 0.7s per
   letter), then it rests ~3.5s. ?wave=once runs a single pass after 400ms. */
.wave__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wave__chars { display: inline-block; user-select: none; -webkit-user-select: none; }
.wave__ch { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .wave__ch {
    animation: wave 4.7s calc(400ms + var(--i) * 50ms) infinite both;
    will-change: transform;
  }
  html.wave-once .wave__ch { animation-iteration-count: 1; }
}
@keyframes wave {
  0%    { transform: translateY(0); animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
  7.45% { transform: translateY(-0.075em); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  14.9% { transform: translateY(0); }
  100%  { transform: translateY(0); }
}
.hero__beats { margin-top: clamp(16px, 2.6vh, 28px); max-width: min(35rem, 44vw); }
.hero__beats > * { margin: 0; }
.hero__beats > * + * { margin-top: clamp(10px, 1.6vh, 16px); }
.hero__lede { font-size: clamp(1.14rem, .98rem + .5vw, 1.45rem); line-height: 1.42; color: var(--sc-ink); font-weight: 500; text-wrap: pretty; }
.hero__sub { font-size: clamp(1.02rem, .95rem + .25vw, 1.16rem); line-height: 1.6; color: var(--sc-ink); text-wrap: pretty; }
.hero__sub strong { color: #fff; }
.hero__act { margin-top: clamp(20px, 3.4vh, 36px); width: fit-content; }
.hero__ctalead { margin: 0 0 14px; font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-text); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* first paint: the headline settles in once, on load (not on scroll) */
@media (prefers-reduced-motion: no-preference) {
  .hero__h > span, .hero__beats, .hero__act { animation: settle 900ms var(--sc-ease-out) both; }
  .hero__l2 { animation-delay: 90ms !important; }
  .hero__beats { animation-delay: 180ms !important; }
  .hero__act { animation-delay: 260ms !important; }
}
@keyframes settle { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- 2 · peak -- */
.peak__stage { background: var(--sc-canvas); }
/* The group stands in the top half of the frame, so the frame starts below
   the copy (top: 27%) and fades in from its top edge: every face stays in
   view under the headline instead of behind it. */
.photo--peak {
  opacity: 0; top: 27%; --op: 50% 6%; --fo: 52% 30%; --vx: 50%; --vy: 40%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .55) 8%, #000 20%);
  mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .55) 8%, #000 20%);
}
.photo--peak .photo__img { transform: scale(1.04); }
/* the cold state: the same photo, colourless and dim, under a blue-violet
   chill; the graded photo fades in over it on the human line */
.photo__img--cold { filter: grayscale(1) contrast(1.12) brightness(.62); }
.photo__chill { background: linear-gradient(160deg, #2a2f6e, #1a1240 60%, #0e0c14); mix-blend-mode: color; opacity: .85; }
.photo--peak [data-pl="warm"] { opacity: 0; }
.peak__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, var(--sc-canvas) 0, rgb(14 12 20 / .92) calc(var(--ribbon-h) + var(--bar-h)), rgb(14 12 20 / .7) 30%, rgb(14 12 20 / .2) 40%, rgb(14 12 20 / 0) 48%);
}
.peak__copy {
  position: absolute; z-index: 5;
  left: var(--sc-gutter); right: var(--sc-gutter);
  top: calc(var(--bar-h) + clamp(22px, 6vh, 72px));
}
.kicker {
  margin: 0 0 18px; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--violet-text); line-height: 1.5;
}
.peak__h { margin: 0; font-weight: 600; }
.peak__h > span { display: block; }
.peak__machine {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--sc-ink-soft); font-weight: 500;
}
.peak__human {
  margin-top: .18em;
  font-size: clamp(2.5rem, 1.2rem + 4.6vw, 6rem); line-height: 1.0; letter-spacing: -0.032em;
  color: var(--warm-ink); font-weight: 700; white-space: nowrap;
}

/* ------------------------------------------------------------- 3 · manifesto --
   One grid, one left edge. The left column carries the voice (lead-in, the
   three "is not" lines), the right column carries the reading. The closer sits
   on the grid's left edge, as two set lines that never wrap. */
.manifesto { padding: clamp(4.5rem, 10vw, 9rem) 0 clamp(4.5rem, 9vw, 8.5rem); }
.manifesto__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 112px); }
.manifesto__p1, .manifesto__p2 { display: contents; margin: 0; }
.manifesto__lead, .manifesto__nots {
  grid-column: 1; display: block;
  font-size: min(2.1rem, 2.2vw); line-height: 1.24; letter-spacing: -0.018em;
  font-weight: 600; color: var(--sc-ink); text-wrap: balance;
}
.manifesto__body, .manifesto__answer {
  grid-column: 2; display: block; max-width: 60ch;
  font-size: clamp(1.12rem, .86rem + .72vw, 1.5rem); line-height: 1.62;
  color: #d9d3e6; text-wrap: pretty;
}
.manifesto__body { padding-top: .35em; }
.manifesto__nots { margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-strong); }
.manifesto__nots > span { display: block; white-space: nowrap; }
.manifesto__nots > span + span { margin-top: .12em; }
.manifesto__answer { align-self: stretch; display: flex; align-items: flex-end; margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-strong); color: var(--sc-ink); }
.manifesto__closer {
  grid-column: 1 / -1; display: block; margin-top: clamp(48px, 6vw, 88px);
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5.6rem); line-height: 1.0; letter-spacing: -0.032em; font-weight: 700;
  color: var(--warm-ink);
}
.manifesto__closer > span { display: block; white-space: nowrap; }
.manifesto__closer > span + span { color: var(--violet-text); }

/* ------------------------------------------------------------- shared sections -- */
.sec-h {
  margin: 0; font-weight: 600;
  font-size: clamp(2.05rem, 1.35rem + 2.5vw, 3.9rem); line-height: 1.04; letter-spacing: -0.026em;
  color: var(--sc-ink); text-wrap: balance;
}
.sec-p { margin: 18px 0 0; max-width: 60ch; color: var(--sc-ink-soft); font-size: clamp(1.02rem, .96rem + .25vw, 1.18rem); line-height: 1.62; text-wrap: pretty; }
.eyebrow { margin: 0 0 16px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------- 5 · clients --
   Six marks at one optical size. Every mark gets the same box; inside it the
   mark is sized by its shape (height falls as the mark gets wider, roughly
   h = H x aspect^-0.45), then nudged by eye. The current colour treatment of
   each mark is kept. */
.clients { background: #110e18; border-block: 1px solid var(--line); padding: clamp(2.6rem, 5vw, 4rem) 0; }
.clients__wrap { display: grid; gap: 22px; max-width: 96rem; }
.logo--motospa, .logo--coleman { flex-shrink: 0; }
.clients__label { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); line-height: 1.5; }
/* Even visual gaps: each box is the mark's own width at the shared height,
   and the row distributes the space between them. */
.clients__row { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: clamp(16px, 2.4vw, 40px); }
.logo { height: clamp(52px, 4.6vw, 70px); flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
.logo img { width: auto; height: calc(var(--h) * 1%); max-width: 100%; object-fit: contain; opacity: .9; transition: opacity 160ms var(--sc-ease-out); }
.logo img:hover { opacity: 1; }
.logo--motospa  { --h: 84; }   /* white disc: heavy, so a touch under the ring */
.logo--coleman  { --h: 90; }
.logo--lion     { --h: 70; }   /* stacked mark + two lines */
.logo--cradle   { --h: 68; }   /* mark + script + tagline */
.logo--schlafer { --h: 46; }   /* wide wordmark */
.logo--compass  { --h: 34; }   /* widest wordmark: capped lowest */
@media (min-width: 1280px) {
  .clients__wrap { grid-template-columns: 11rem 1fr; align-items: center; gap: clamp(32px, 3.5vw, 56px); }
}

/* ------------------------------------------------------------- 6 · use cases -- */
.uc { padding: clamp(4.5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem); }
.uc__head { max-width: 46rem; }
/* Eight flip cards: four across from 1200px, two from 680px, one on phones.
   Both faces share one grid cell, so a card is as tall as its taller face,
   and grid rows stretch every card in a row to the tallest card: nothing
   jumps when a card turns, and nothing is clipped. */
.flips { list-style: none; margin: clamp(32px, 4.5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 680px)  { .flips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1200px) { .flips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
/* Each card is a dark glass tile with its own coloured glow bleeding from
   one corner (Scott's reference), a deep layered shadow and a 1px inner
   highlight. Eight glows, one family: equal lightness and chroma in OKLCH,
   alternating warm and cool so neighbours never match in either grid. */
.flip {
  --glow: oklch(74% .14 185);
  --gx: 100%; --gy: 0%;               /* the corner the glow bleeds from */
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  position: relative; perspective: 1200px; scroll-margin-top: calc(var(--bar-h) + 24px);
}
.flip:nth-child(1) { --glow: oklch(74% .14 185); }                        /* teal   */
.flip:nth-child(2) { --glow: oklch(78% .15 72);  --gx: 0%; }              /* amber  */
.flip:nth-child(3) { --glow: oklch(68% .17 38); }                         /* rust   */
.flip:nth-child(4) { --glow: oklch(68% .16 262); --gx: 0%; }              /* blue   */
.flip:nth-child(5) { --glow: oklch(66% .2 300);  --gx: 0%; }              /* violet */
.flip:nth-child(6) { --glow: oklch(72% .16 18); }                         /* coral  */
.flip:nth-child(7) { --glow: oklch(72% .13 225); --gx: 0%; }              /* sky    */
.flip:nth-child(8) { --glow: oklch(68% .2 335); }                         /* magenta */
/* hover lift and tilt live on their own layer so they never fight the
   reveal (on .flip) or the spin (on .flip__inner) */
.flip__lift {
  position: relative; height: 100%; transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
}
.flip__inner {
  position: relative; display: grid; height: 100%;
  transform-style: preserve-3d;
  transition: transform 580ms cubic-bezier(.45, .05, .2, 1);
}
/* with JS the turn is a Web Animation over the resting state */
.js-flip .flip__inner { transition: none; }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip.is-spinning .flip__inner { will-change: transform; }
.flip__face {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 2vw, 28px);
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgb(255 255 255 / .07);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    radial-gradient(115% 85% at var(--gx) var(--gy), color-mix(in oklab, var(--glow) 34%, transparent) 0%, color-mix(in oklab, var(--glow) 10%, transparent) 38%, transparent 66%),
    linear-gradient(165deg, #1e1a29 0%, #14111c 55%, #100e16 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .1),
    inset 0 0 0 1px rgb(255 255 255 / .025),
    0 1px 1px rgb(4 2 10 / .4),
    0 8px 18px -6px rgb(4 2 10 / .55),
    0 28px 56px -18px rgb(4 2 10 / .75);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: border-color 220ms var(--sc-ease-out), box-shadow 320ms var(--sc-ease-out);
}
/* the glow, a second time, stronger: faded up on hover (opacity only) */
.flip__face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 95% at var(--gx) var(--gy), color-mix(in oklab, var(--glow) 30%, transparent), transparent 62%);
  opacity: 0; transition: opacity 320ms var(--sc-ease-out);
}
/* the light spot that follows the cursor (pointer devices) */
.flip__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgb(255 255 255 / .09), transparent 60%);
  opacity: 0; transition: opacity 260ms var(--sc-ease-out);
}
.flip__face > * { position: relative; z-index: 1; }
.flip__back {
  transform: rotateY(180deg); justify-content: flex-start;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    radial-gradient(120% 90% at calc(100% - var(--gx)) 100%, color-mix(in oklab, var(--glow) 40%, transparent) 0%, color-mix(in oklab, var(--glow) 12%, transparent) 40%, transparent 70%),
    linear-gradient(165deg, #1c1826 0%, #15121d 60%, #110f18 100%);
}
/* the back face is mirrored in its own space, so its light spot is too */
.flip__back::after { background: radial-gradient(240px circle at calc(100% - var(--mx)) var(--my), rgb(255 255 255 / .09), transparent 60%); }
.flip__back::before { background: radial-gradient(120% 95% at calc(100% - var(--gx)) 100%, color-mix(in oklab, var(--glow) 32%, transparent), transparent 66%); }
.flip h3 {
  margin: 0; font-weight: 600;
  font-size: clamp(1.3rem, 1.12rem + .5vw, 1.6rem); line-height: 1.15; letter-spacing: -0.018em;
  color: #fff; text-wrap: balance;
}
.uc__how { margin: 0; color: #c9c2d8; line-height: 1.55; font-size: clamp(1rem, .97rem + .12vw, 1.08rem); text-wrap: pretty; }
.uc__event { margin: 0; color: #d9d3e6; line-height: 1.55; font-size: clamp(1rem, .97rem + .12vw, 1.08rem); text-wrap: pretty; }
.uc__event b { display: block; margin-bottom: 8px; color: color-mix(in oklab, var(--glow) 45%, #fff); font-weight: 600; font-size: clamp(1.12rem, 1.02rem + .3vw, 1.3rem); line-height: 1.25; letter-spacing: -0.01em; }
.flip__hint {
  margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: #d9d3e6;
}
.flip__front .flip__hint::before { /* a small glow chip ahead of the hint */
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; order: -1;
  background: var(--glow); box-shadow: 0 0 10px 1px color-mix(in oklab, var(--glow) 70%, transparent);
}
.flip__icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform 320ms var(--sc-ease-out); }
/* the bloom as a card lands on its back (site.js plays it) */
.flip__pulse {
  position: absolute; inset: 0; z-index: -1; border-radius: 22px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--glow) 60%, transparent), 0 0 46px 6px color-mix(in oklab, var(--glow) 45%, transparent);
}
/* the whole card is the control */
.flip__btn {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 22px; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.flip__btn:focus-visible { outline: 2px solid var(--violet-text); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip__lift {
    transform: translate3d(0, -6px, 0) scale(1.02) rotateX(var(--rx)) rotateY(var(--ry));
    transition-duration: 220ms;
  }
  .flip:hover .flip__face {
    border-color: color-mix(in oklab, var(--glow) 34%, rgb(255 255 255 / .08));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .14),
      inset 0 0 0 1px rgb(255 255 255 / .03),
      0 2px 2px rgb(4 2 10 / .4),
      0 16px 30px -8px rgb(4 2 10 / .6),
      0 40px 80px -24px color-mix(in oklab, var(--glow) 30%, rgb(4 2 10 / .8));
  }
  .flip:hover .flip__face::before, .flip:hover .flip__face::after { opacity: 1; }
  .flip:hover .flip__hint { color: #fff; }
  .flip:hover .flip__front .flip__icon { transform: rotate(-40deg); }
}
.flip:has(.flip__btn:focus-visible) .flip__face { border-color: color-mix(in oklab, var(--glow) 55%, transparent); }
.flip:has(.flip__btn:focus-visible) .flip__face::before { opacity: 1; }
.flip:target .flip__face { border-color: color-mix(in oklab, var(--glow) 55%, transparent); }
/* reduced motion: the faces cross-fade in place instead of turning */
@media (prefers-reduced-motion: reduce) {
  .flip__lift, .flip:hover .flip__lift { transform: none !important; transition: none; }
  .flip__inner, .flip.is-flipped .flip__inner { transform: none; transition: none; }
  .flip__back { transform: none; }
  .flip__face { transition: opacity 260ms ease; }
  .flip__back { opacity: 0; }
  .flip.is-flipped .flip__back { opacity: 1; }
  .flip.is-flipped .flip__front { opacity: 0; }
  .flip__face::after { display: none; }
  .flip__icon, .flip:hover .flip__front .flip__icon { transition: none; transform: none; }
}

/* the pricing ledger wipes up once, on entry (page-local reveal) */
@media (prefers-reduced-motion: no-preference) {
  .js-wipe [data-wipe] { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms cubic-bezier(.22, .8, .24, 1); }
  .js-wipe [data-wipe].is-in { clip-path: inset(0 0 -2% 0); }
}

/* ------------------------------------------------------------- 7 · pricing -- */
.pricing { padding: clamp(4.5rem, 10vw, 9rem) 0 clamp(4.5rem, 9vw, 8rem); background: #110e18; border-top: 1px solid var(--line); }
.pricing__head { max-width: 52rem; }
.pricing__free { margin: 22px 0 0; font-weight: 600; color: var(--violet-text); font-size: 1.08rem; }

.plans {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.plan { position: relative; padding: 36px clamp(20px, 2.4vw, 36px) 40px; display: flex; flex-direction: column; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan--popular { background: linear-gradient(to bottom, rgb(143 60 250 / .10), rgb(143 60 250 / 0) 60%); }
.plan--popular::before { content: ""; position: absolute; inset: -1px 0 auto 0; height: 2px; background: var(--sc-accent); }
.plan__flag { position: absolute; top: 12px; right: clamp(20px, 2.4vw, 36px); margin: 0; font-size: .8rem; font-weight: 600; color: var(--violet-text); }
.plan__tier { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.plan__name { margin: 14px 0 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.plan__price { margin: 10px 0 0; font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan__price small { display: block; margin-top: 6px; font-size: .9rem; font-weight: 400; letter-spacing: 0; color: var(--sc-ink-soft); line-height: 1.45; }
.plan__blurb { margin: 16px 0 0; color: var(--sc-ink-soft); line-height: 1.6; }
.plan__groups { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.plan__groups > div + div { margin-top: 14px; }
.plan__groups dt { font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-text); }
.plan__groups dd { margin: 6px 0 0; }
.plan__groups ul { list-style: none; margin: 0; padding: 0; }
.plan__groups li { position: relative; padding-left: 20px; line-height: 1.5; font-size: .97rem; }
.plan__groups li + li { margin-top: 4px; }
.plan__groups li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 9px; height: 5px; border-left: 1.5px solid var(--violet-text); border-bottom: 1.5px solid var(--violet-text); transform: rotate(-45deg); }
.plan__perfect { margin: 22px 0 26px; color: var(--sc-ink-soft); line-height: 1.55; font-size: .95rem; }
.plan .btn { margin-top: auto; align-self: flex-start; }

.join { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.join__bracket { width: 66.66%; height: 26px; border: 1px solid var(--sc-accent); border-top: 0; border-radius: 0 0 12px 12px; opacity: .75; position: relative; }
.join__bracket::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 1px; height: 100%; background: var(--sc-accent); }
.join__stem { width: 1px; height: 26px; background: var(--sc-accent); opacity: .75; }
.join__stem--arrow { height: 30px; opacity: 1; position: relative; }
.join__stem--arrow::after { content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0; border: 6px solid transparent; border-top: 8px solid var(--sc-accent); border-bottom: 0; }
.join__pill { margin: 0; padding: 7px 16px; border: 1px solid var(--sc-accent); border-radius: 999px; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-text); }

.glove {
  position: relative; margin-top: 0;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 64px);
  padding: clamp(28px, 4vw, 52px);
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.glove__flag { position: absolute; top: -13px; left: clamp(28px, 4vw, 52px); margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--sc-accent); color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.glove__h { margin: 12px 0 0; font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.4rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; }
.glove__p { margin: 14px 0 0; color: var(--sc-ink-soft); line-height: 1.62; max-width: 56ch; }
.glove__price { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.9rem); margin-bottom: 22px; }
.glove__list ul { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.glove__list li { break-inside: avoid; position: relative; padding: 7px 0 7px 20px; border-bottom: 1px solid var(--line); font-size: .97rem; }
.glove__list li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 9px; height: 5px; border-left: 1.5px solid var(--violet-text); border-bottom: 1.5px solid var(--violet-text); transform: rotate(-45deg); }

.notsure { margin: clamp(36px, 5vw, 56px) 0 0; max-width: 46rem; color: var(--sc-ink-soft); line-height: 1.62; font-size: 1.06rem; }

.pillars { margin: clamp(48px, 7vw, 88px) 0 0; border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); }
.pillars > div { display: grid; grid-template-columns: 9rem 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.pillars > div:last-child { grid-column: 1 / -1; }
.pillars dt { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-text); }
.pillars dd { margin: 0; color: var(--sc-ink-soft); line-height: 1.55; }

.story { margin: clamp(64px, 9vw, 120px) auto 0; max-width: 46rem; text-align: center; }
.story__h { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.9rem); font-weight: 600; letter-spacing: -0.024em; line-height: 1.12; text-wrap: balance; }
.story__p { margin: 16px auto 0; color: var(--sc-ink-soft); line-height: 1.62; max-width: 52ch; }
.story__line { margin: 26px 0 0; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.5; }
.story__line b { color: var(--violet-text); }
.story .btn { margin-top: 18px; }

/* ------------------------------------------------------------- 4 · close (the screen) --
   Moved up into the old platform slot. The bottom of the scrim lands the
   scene on the canvas so the clients band follows without a seam. */
.close__stage { background: var(--sc-canvas); }
.close__photo { left: 24%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%); mask-image: linear-gradient(to right, transparent 0, #000 26%); }
.photo--online { --op: 75% 44%; --fo: 52% 46%; --vx: 54%; --vy: 46%; }
/* the call itself is the light source in this room */
.photo__screen {
  background: radial-gradient(28% 34% at 34% 40%, rgb(196 170 255 / .22), transparent 70%);
  mix-blend-mode: screen;
}
.close__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(95deg, rgb(14 12 20 / .7) 0%, rgb(14 12 20 / .55) 34%, rgb(14 12 20 / .2) 46%, transparent 56%),
    linear-gradient(to top, var(--sc-canvas) 0, rgb(14 12 20 / .5) 90px, transparent 180px);
}
.close__copy {
  position: absolute; z-index: 5;
  left: var(--sc-gutter); top: 50%; translate: 0 -56%;
  width: min(36rem, 44vw);
}
.close__h { margin: 0; font-weight: 600; font-size: clamp(1.7rem, 1.05rem + 2.1vw, 3.1rem); line-height: 1.1; letter-spacing: -0.024em; color: var(--warm-ink); text-wrap: balance; }
.close__p { margin: 22px 0 26px; color: var(--sc-ink); line-height: 1.62; max-width: 46ch; font-size: clamp(1rem, .96rem + .2vw, 1.12rem); }
/* ------------------------------------------------------------- footer -- */
.foot {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 22px var(--sc-gutter) max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(243 240 250 / .1);
  font-size: .9rem; color: var(--sc-ink-soft);
}
.foot__brand img { height: 40px; width: auto; }
.foot__nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.foot__nav a { color: var(--sc-ink-soft); text-decoration: none; }
.foot__nav a:hover { color: var(--sc-ink); text-decoration: underline; }

/* ======================================================= tablet and down -- */
@media (max-width: 1080px) {
  .bar { gap: 16px; }
  .bar__link, .drop__btn { padding: 0 10px; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  .join__bracket { display: none; }
  .glove { grid-template-columns: 1fr; }
}

/* ============================================================== phones -- */
@media (max-width: 860px) {
  :root { --bar-h: 72px; }
  /* The whole announcement stays: it wraps instead of truncating. site.js
     measures its height into --ribbon-h. */
  .ribbon { height: auto; display: block; padding: 8px var(--sc-gutter); white-space: normal; text-align: left; font-size: .76rem; line-height: 1.4; }
  .ribbon__lead { margin-right: 6px; }
  .ribbon__text { margin-right: 6px; }

  .bar { gap: 12px; }
  .bar__brand img { height: 48px; }
  .bar__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px; padding: 0 11px;
    background: rgb(14 12 20 / .4); border: 1px solid rgb(243 240 250 / .22); border-radius: var(--r-sm); cursor: pointer;
  }
  .bar__burger i { display: block; height: 1.5px; background: var(--sc-ink); border-radius: 2px; transition: transform 200ms var(--sc-ease-out), opacity 160ms; }
  .masthead.is-open .bar__burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .masthead.is-open .bar__burger i:nth-child(2) { opacity: 0; }
  .masthead.is-open .bar__burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .bar__sheet {
    position: fixed; left: 0; right: 0; top: calc(var(--ribbon-h) + var(--bar-h)); bottom: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 12px var(--sc-gutter) 28px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--sc-canvas); border-top: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 200ms var(--sc-ease-out), transform 240ms var(--sc-ease-out), visibility 0s linear 240ms;
  }
  .masthead.is-scrolled .bar__sheet { top: var(--bar-h); }
  .masthead.is-scrolled.is-open .bar__sheet { top: calc(var(--ribbon-h) + var(--bar-h)); }
  .masthead.is-open .bar__sheet { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .bar__links { flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
  .bar__links > li { border-bottom: 1px solid var(--line); }
  .bar__link, .drop__btn { width: 100%; height: 56px; justify-content: space-between; padding: 0 4px; font-size: 1.08rem; text-shadow: none; }
  .drop__panel { position: static; translate: none; transform: none; width: auto; box-shadow: none; border: 0; background: none; padding: 0 0 12px; display: none; opacity: 1; visibility: visible; }
  .drop.open .drop__panel { display: block; }
  .drop__panel::before { display: none; }
  .mega { width: auto; }
  .mega__cats { width: auto; }
  .cat__subs { position: static; border-left: 1px solid var(--line); margin: 2px 0 8px 22px; padding-left: 10px; }
  .cat.on .cat__subs { display: block; }
  .cat__btn { min-height: 48px; }
  .simple { width: auto; padding: 0 0 8px; }
  .simple a, .cat__subs a { padding: 12px 10px; }
  .bar__right { margin-top: 20px; flex-direction: column; align-items: stretch; gap: 10px; }
  .bar__login { justify-content: center; height: 50px; border: 1px solid var(--line-strong); }
  .bar__right .btn { min-height: 50px; }
}

@media (max-width: 760px) {
  /* Phone hero: natural flow, not pinned, so a short screen can never clip
     the copy. The film is a full-width band under the bar, above the copy,
     fading top to bottom; the headline starts on its faded lower edge. The
     480p encode is picked by <source media>. site.js still drifts it as the
     page scrolls away (mapped to the first screen-height of scroll). */
  .hero { height: auto !important; }
  .hero .sc-stage { position: relative; height: auto; min-height: 0; display: flex; flex-direction: column; }
  .photo--film {
    order: 0; position: relative; inset: auto; flex: none; width: 100%;
    height: 60vw; margin-top: calc(var(--ribbon-h) + var(--bar-h));
    --op: 56% 50%; --fo: 50% 50%; --vx: 50%; --vy: 50%;
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / .12) 0, rgb(0 0 0 / .7) 9%, #000 20%, #000 48%, rgb(0 0 0 / .45) 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / .12) 0, rgb(0 0 0 / .7) 9%, #000 20%, #000 48%, rgb(0 0 0 / .45) 74%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .film__drift { inset: -6% -3% -12% -3%; }
  .hero__copy { order: 1; position: relative; left: auto; right: auto; top: auto; width: auto; max-width: none; margin-top: -17vw; padding: 0 var(--sc-gutter) 40px; }
  .hero__scrim { display: none; }
  .film__toggle { top: calc(var(--ribbon-h) + var(--bar-h) + 10px); bottom: auto; right: 12px; }
  .hero__beats { margin-top: 14px; max-width: none; }
  .hero__lede { font-size: 1.08rem; }
  .hero__sub { font-size: .98rem; line-height: 1.55; }
  .hero__act { margin-top: 24px; }
  .hero__ctalead { margin-bottom: 10px; font-size: .78rem; }
  .hero__btns .btn { flex: 1 1 auto; }

  /* Phone: a landscape band under the copy, wide enough for the group. */
  .photo--peak { top: 33%; bottom: 8%; --op: 50% 8%; --fo: 50% 30%; --vy: 36%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .6) 7%, #000 16%, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .6) 7%, #000 16%, #000 76%, transparent 100%); }
  .photo--peak .photo__img { transform: scale(1.02); }
  .peak__scrim { background: linear-gradient(to bottom, var(--sc-canvas) 0, var(--sc-canvas) 28%, rgb(14 12 20 / .4) 36%, rgb(14 12 20 / 0) 44%); }
  .peak__copy { top: calc(var(--bar-h) + 22px); }
  .peak__human { white-space: normal; font-size: clamp(2.3rem, 11vw, 3.1rem); }

  .clients__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .logo { height: 64px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 14px; }
  .manifesto__grid { grid-template-columns: 1fr; }
  .manifesto__lead, .manifesto__nots, .manifesto__body, .manifesto__answer, .manifesto__closer { grid-column: 1; }
  .manifesto__lead, .manifesto__nots { font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
  .manifesto__nots > span { white-space: normal; }
  .manifesto__body { padding-top: 18px; }
  .manifesto__answer { display: block; margin-top: 18px; padding-top: 0; border-top: 0; }
  .manifesto__closer { font-size: clamp(2rem, 9.2vw, 2.6rem); }
  .pillars { grid-template-columns: 1fr; }
  .pillars > div { grid-template-columns: 1fr; gap: 4px; }
  .glove__list ul { columns: 1; }

  .close__photo { inset: 0 0 auto 0; height: 58svh; -webkit-mask-image: none; mask-image: none; }
  .photo--online { --op: 58% 40%; --fo: 60% 40%; }
  .close__scrim { background: linear-gradient(to bottom, rgb(14 12 20 / .55) 0, transparent 22%, transparent 38%, rgb(14 12 20 / .8) 50%, var(--sc-canvas) 57%); }
  .close__copy { top: auto; bottom: calc(40px + env(safe-area-inset-bottom)); translate: none; width: auto; right: var(--sc-gutter); }
  .close__h { font-size: clamp(1.4rem, 6.2vw, 1.75rem); }
  .close__p { margin: 14px 0 18px; font-size: .98rem; line-height: 1.55; }
  .close__act .btn { width: 100%; }
  .foot { gap: 10px 18px; padding-top: 14px; font-size: .82rem; }
  .foot__line { order: 3; width: 100%; }
  .foot__nav { gap: 14px; }
}

/* ===================================================== reduced motion --
   A complete static composition: no pinned travel, every line present, the
   circle already open. */
@media (prefers-reduced-motion: reduce) {
  .hero, .peak, .close { height: auto !important; }
  .hero .sc-stage, .peak .sc-stage, .close .sc-stage { position: relative; height: auto; min-height: 100svh; }
  .hero [data-sc-cue], .peak [data-sc-cue], .close [data-sc-cue] { opacity: 1 !important; transform: none !important; }
  .hero__copy { position: relative; left: auto; right: auto; top: auto; padding: calc(var(--ribbon-h) + var(--bar-h) + 40px) var(--sc-gutter) 12vh; z-index: 5; }
  .hero__beats { display: block; }
  .hero__beats > * + * { margin-top: 16px; }
  .photo--peak { opacity: 1; }
  .photo--peak [data-pl="warm"] { opacity: 1; }
  .peak__copy { position: relative; left: auto; right: auto; top: auto; padding: calc(var(--bar-h) + 40px) var(--sc-gutter) 56vh; }
  .close__copy { position: relative; left: auto; top: auto; translate: none; padding: 30vh var(--sc-gutter) 96px; width: auto; max-width: 40rem; }
  .masthead, .drop__panel, .bar__sheet { transition-duration: 1ms; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .close__copy { padding-top: 48svh; }
  .hero__copy { padding-top: 0; padding-bottom: 40px; }
}

/* Comparison only, opt-in with ?hl=a11y: the same gradient started at its own
   middle stop (#8f3cfa) so the darkest glyphs clear 3:1 (large text). The
   default above is the live gradient exactly, as Scott asked. */
html.hl-a11y .hero__l2 { --hl-grad: linear-gradient(135deg, #8f3cfa 0%, #b45cfb 45%, #e43ffb 100%); }