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

/* ------------------------------------------------------------- scenes --
   A scene box covers its stage and is anchored to the bottom edge, so every
   plane inside it can be placed in the original photograph's own percentages
   and stays registered at any viewport shape. */
.scene {
  position: absolute; left: 50%; bottom: 0;
  width: max(100%, calc(100svh * 2752 / 1536));
  aspect-ratio: 2752 / 1536;
  translate: -50% 0;
}
.scene__poster, .pl--plate { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.scene__layers { position: absolute; inset: 0; opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.scene.is-live .scene__layers { opacity: 1; }
.scene.is-live .scene__poster { opacity: 0; transition: opacity 300ms var(--sc-ease-out) 120ms; }
.pl { position: absolute; max-width: none; will-change: transform; }
.pl--trio { left: 45.276%; top: 38.607%; width: 48.038%; height: 61.393%; transform-origin: 55% 100%; }
.pl--near { left: 74.637%; top: 17.643%; width: 25.363%; height: 82.357%; transform-origin: 100% 100%; }
.pl--l    { left: 3.416%;  top: 7.096%;  width: 49.927%; height: 92.904%; transform-origin: 0 100%; }
.pl--r    { left: 64.426%; top: 27.604%; width: 35.574%; height: 72.396%; transform-origin: 100% 100%; }
.pl--plate { transform-origin: 58% 62%; }
/* atmosphere: warm light hanging in the air between the room and the guests */
.pl--haze {
  inset: 0;
  background:
    radial-gradient(38% 30% at 72% 22%, rgb(255 196 120 / .10), transparent 70%),
    radial-gradient(30% 26% at 40% 48%, rgb(255 180 110 / .06), transparent 70%);
  mix-blend-mode: screen;
}

/* ------------------------------------------------------------- 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 48vw 44vh at 26vw calc(var(--ribbon-h) + var(--bar-h) + 24vh), rgb(14 12 20 / .9) 0%, rgb(14 12 20 / .78) 48%, 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); }
.scene--peak { opacity: 0; bottom: -9svh; }
.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 / .74) 30%, rgb(14 12 20 / .3) 42%, rgb(14 12 20 / 0) 54%);
}
.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); }

/* ------------------------------------------------------------- 4 · platform -- */
.does { padding: clamp(4rem, 9vw, 9rem) 0 clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.does__head { max-width: 50rem; }
.does__grid {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid; gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px);
  grid-template-columns: 1.55fr 1fr;
  grid-template-areas: "lead a" "lead b";
}
.screen--lead { grid-area: lead; }
#f-followthrough { grid-area: a; }
#f-people { grid-area: b; }
.screen { margin: 0; scroll-margin-top: calc(var(--bar-h) + 24px); }
.screen__frame {
  margin: 0; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line-strong); background: #0a0910;
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.screen__frame img { width: 100%; height: auto; }
.screen--lead .screen__frame img { aspect-ratio: 1131 / 648; }
.screen__body { margin-top: 18px; }
.screen__body h3 { margin: 0; font-size: clamp(1.18rem, 1.05rem + .45vw, 1.5rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; }
.screen--lead .screen__body h3 { font-size: clamp(1.4rem, 1.15rem + .9vw, 2.05rem); }
.screen__body p { margin: 8px 0 0; color: var(--sc-ink-soft); line-height: 1.6; max-width: 46ch; }

/* ------------------------------------------------------------- 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; } }
.flip { position: relative; perspective: 1400px; scroll-margin-top: calc(var(--bar-h) + 24px); }
.flip__inner {
  position: relative; display: grid; height: 100%;
  transform-style: preserve-3d;
  transition: transform 580ms cubic-bezier(.45, .05, .2, 1);
}
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 2vw, 28px);
  background: #16131e; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sc-e1), var(--sc-edge);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: border-color 180ms var(--sc-ease-out), box-shadow 180ms var(--sc-ease-out);
}
.flip__back { transform: rotateY(180deg); background: #1a1626; justify-content: flex-start; }
.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: var(--sc-ink); text-wrap: balance;
}
.uc__how { margin: 0; color: #d9d3e6; 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: var(--violet-text); 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;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--sc-ink-soft);
}
.flip__icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* 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: var(--r-lg); -webkit-tap-highlight-color: transparent;
}
.flip__btn:focus-visible { outline: 2px solid var(--violet-text); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip__face { border-color: rgb(185 150 255 / .42); box-shadow: var(--sc-e2), var(--sc-edge); }
  .flip:hover .flip__hint { color: var(--violet-text); }
}
.flip:has(.flip__btn:focus-visible) .flip__face { border-color: rgb(185 150 255 / .55); }
.flip:target .flip__face { border-color: rgb(185 150 255 / .55); }
/* reduced motion: the faces cross-fade in place instead of turning */
@media (prefers-reduced-motion: reduce) {
  .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; }
}

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

/* ------------------------------------------------------------- 8 · close -- */
.close__stage { background: var(--sc-canvas); }
.close__photo { position: absolute; inset: 0; overflow: hidden; }
.close__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 40%; transform-origin: 62% 55%; will-change: transform; }
.close__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(95deg, rgb(14 12 20 / .93) 0%, rgb(14 12 20 / .86) 34%, rgb(14 12 20 / .5) 46%, rgb(14 12 20 / .1) 56%, transparent 62%),
    linear-gradient(to top, rgb(14 12 20 / .96) 0, rgb(14 12 20 / .5) 90px, transparent 160px);
}
.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); }
.foot {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 18px var(--sc-gutter) max(18px, 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; }
  .does__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "lead lead" "a b"; }
  .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) {
  /* hero, phone composition: copy on the dark ceiling, the room below it.
     The scene box is narrower than a cover crop so the whole trio stays in
     frame, and it hangs from the bottom edge. */
  /* Phone hero: natural flow, not pinned, so a short screen can never clip
     the copy. Copy first on the dark ground, the room hanging under it; the
     planes still move as it scrolls away (site.js maps that interval). */
  .hero { height: auto !important; }
  .hero .sc-stage { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .hero__copy { position: relative; left: auto; right: auto; top: auto; width: auto; max-width: none; padding: calc(var(--ribbon-h) + var(--bar-h) + 18px) var(--sc-gutter) 0; }
  .hero__copy { order: 1; }
  .scene--hero { order: 2; position: relative; left: auto; bottom: auto; flex: none; width: 205vw; translate: -38% 0; margin-top: -18vw; }
  .hero__scrim { display: none; }
  .scene--hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
    background: linear-gradient(to bottom, var(--sc-canvas) 0, rgb(14 12 20 / .82) 14%, rgb(14 12 20 / .2) 34%, transparent 46%); }
  .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; }

  .scene--peak { width: 262vw; bottom: -3svh; }
  .peak__scrim { background: linear-gradient(to bottom, var(--sc-canvas) 0, var(--sc-canvas) 30%, rgb(14 12 20 / .6) 42%, rgb(14 12 20 / 0) 56%); }
  .peak__copy { top: calc(var(--bar-h) + 22px); }
  .peak__human { white-space: normal; font-size: clamp(2.3rem, 11vw, 3.1rem); }

  .does__grid { grid-template-columns: 1fr; grid-template-areas: "lead" "a" "b"; }
  .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: 50svh; }
  .close__photo img { object-position: 66% 30%; }
  .close__scrim { background: linear-gradient(to bottom, rgb(14 12 20 / .55) 0, transparent 22%, transparent 34%, rgb(14 12 20 / .8) 44%, var(--sc-canvas) 50%); }
  .close__copy { top: auto; bottom: calc(96px + 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) 46vh; z-index: 5; }
  .hero__beats { display: block; }
  .hero__beats > * + * { margin-top: 16px; }
  .scene--peak { 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) 140px; 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-bottom: 0; }
}

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