/* ==========================================================================
   So Shall We — 10-Day Paid Activation Trial landing page
   Implementation of "Chosen - Jul 26" (Claude Design handoff)
   ========================================================================== */

:root {
  /* ---------- Ground ----------
     Sections alternate between these two so each band reads as its own
     plane. No accent colour is ever used as a section background. */
  --black: #000000;
  --black-alt: #0d0d0d;

  --surface: #0b0b0b;
  --surface-2: #0d0d0d;
  --surface-3: #131313;
  --surface-4: #111;

  /* ---------- Accent ---------- */
  --green: #C3D946;         /* primary accent: CTAs, figures, positive */
  --green-bright: #D8FF3D;  /* hover only */
  --blue: #00D3FF;          /* constraint / negative */

  /* ---------- Text ----------
     One hue only: white. Hierarchy comes from weight, size and opacity,
     never from a second text colour. #000 is used only where text sits on
     a light fill (accent buttons, testimonial cards). */
  --white: #ffffff;
  --bone: #ffffff;
  --cream: rgba(255, 255, 255, .82);
  --dim-1: rgba(255, 255, 255, .68);
  --dim-2: rgba(255, 255, 255, .55);
  --dim-3: rgba(255, 255, 255, .42);
  --dim-4: rgba(255, 255, 255, .28);

  /* ---------- Type ----------
     Single family: SF Pro. Display for anything 20px and up, Text below
     that, SF Mono for labels and figures. See TYPE-GUIDELINES.md. */
  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  --body: "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  --eyebrow-font: "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Was the SF Mono stack. SF Mono is not installed on a stock machine, so
     every small label was falling through to Menlo — a font from outside
     the page's family, which is what made the eyebrows and micro-labels
     read as a different typeface. Pointed at SF Pro Text instead: the
     closest SF face to what those labels were reaching for, and the one
     the rest of the page already sets. The name is kept so the 56 rules
     that use it do not all have to change. */
  --mono: "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;

  --gutter: 24px;
  --hairline: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  /* `clip` rather than `hidden`: it contains the bleed without turning an
     ancestor into a scroll container, which would kill the sticky nav. */
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-bright); }

img { max-width: 100%; }

p { margin: 0; }

h1, h2, h3 { margin: 0; }

strong { color: var(--white); font-weight: 700; }

/* ---------- Animations ---------- */

@keyframes ssw-pulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@keyframes ssw-spin  { to { transform: rotate(360deg) } }

[data-rv] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s cubic-bezier(.2, .6, .2, 1), transform .55s cubic-bezier(.2, .6, .2, 1);
}
[data-rv="1"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rv] { opacity: 1; transform: none; }
}

/* ---------- Shared primitives ---------- */

.shell {
  background: var(--black);
  min-height: 100vh;
  width: 100%;
  overflow-x: clip;
}

.container { margin: 0 auto; width: 100%; }
.container--880  { max-width: 880px; }
.container--900  { max-width: 900px; }
.container--960  { max-width: 960px; }
.container--1080 { max-width: 1080px; }
.container--1160 { max-width: 1160px; }
.container--1240 { max-width: 1240px; }

.section {
  background: var(--black);
  padding: 88px var(--gutter);
  scroll-margin-top: 80px;
}
.section--hairline { border-top: 1px solid var(--hairline); }

/* Alternating section ground -----------------------------------------------
   Sections read as separate bands by tone, not by accent colour: #000 and
   #0c0c0c alternate down the page. The lighter band also carries a fine
   grain — a tiling 140px fractal-noise tile at ~4% — so the step reads as a
   different stock rather than only a different value. It is one tile the
   GPU repeats, so it costs nothing to scroll.

   Card surfaces are re-scoped inside an alt band so a panel never lands
   within 1% of the ground behind it. */
.section--alt,
.apply {
  background-color: var(--black-alt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.042'/%3E%3C/svg%3E");
  background-repeat: repeat;
  --surface: #151515;
  --surface-2: #171717;
  --surface-3: #1c1c1c;
  --surface-4: #191919;
}

@media (prefers-reduced-motion: reduce) {
  /* no motion here, but the same users often want less visual noise */
  .section--alt,
  .apply { background-image: none; }
}

/* Anchor scroll offsets ---------------------------------------------------
   Same-document links land clear of the 66px sticky nav. Three groups:
   nav sections sit 16px tighter than the 80px default, CTA targets 16px
   looser, and "back to top" goes to the very top of the document.
   script.js reads the computed scroll-margin-top, so JS-driven clicks and
   direct #hash loads resolve to the same place. */
[data-anchor="section"] { scroll-margin-top: 64px; }
[data-anchor="cta"]     { scroll-margin-top: 96px; }
/* Larger than the hero's offset from the document top, so the browser clamps
   the scroll to 0 rather than stopping just below the topbar. */
[data-anchor="top"]     { scroll-margin-top: 240px; }

.eyebrow {
  font-family: var(--eyebrow-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
}

.h2 {
  font-family: var(--display); font-weight: 800;
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--white);
}
.h2--wide { font-size: clamp(32px, 4.6vw, 58px); letter-spacing: -.02em; }

.lead {
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -.012em;
  color: var(--cream);
}

.mono-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim-2);
}

.fine-print {
  font-family: var(--body);
  font-size: 13px;
  color: var(--dim-2);
  text-align: center;
}

.stack { display: flex; flex-direction: column; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: var(--display); font-weight: 800;
}

.btn--primary {
  background: var(--green);
  color: #000;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .5);
  transition: background 140ms linear;
}
.btn--primary:hover { background: var(--green-bright); color: #000; }
.btn--primary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .5);
}

.btn--lg { height: 58px; padding: 0 32px; --cta-size: 25px; font-size: var(--cta-size); }
.btn--md { height: 54px; padding: 0 30px; --cta-size: 23px; font-size: var(--cta-size); }
.btn--sm { height: 40px; padding: 0 20px; --cta-size: 17px; font-size: var(--cta-size); box-shadow: 0 3px 0 0 rgba(0, 0, 0, .5); }
.btn--sm:active { box-shadow: 0 0 0 0 rgba(0, 0, 0, .5); }

.btn--ghost {
  height: 58px;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--white);
  font-family: var(--body);
  --cta-size: 15px;
  font-size: var(--cta-size);
  text-transform: none;
  transition: border-color 140ms linear, color 140ms linear;
}
.btn--ghost:hover { border-color: var(--green); color: var(--green); }

/* Booking widget --------------------------------------------------------- */

.iclosed-widget { width: 100%; height: 620px; }

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.topbar {
  position: relative;
  z-index: 97;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 20px;
  background: var(--green);
  color: #000;
}

.topbar__text,
.topbar__link {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #000;
}
.topbar__link { border-bottom: 1px solid rgba(0, 0, 0, .4); }
.topbar__link:hover { color: #000; }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 96;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.nav__inner {
  padding: 0 var(--gutter);
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav__logo {
  font-family: var(--display); font-weight: 800;
  font-size: 23px;
  letter-spacing: -.02em;
  color: var(--white);
  text-transform: lowercase;
  line-height: 1;
  flex: none;
}
.nav__logo:hover { color: var(--white); }

.nav__links { display: none; align-items: center; gap: 26px; }
.nav__link {
  font-family: var(--body);
  font-size: 14px;
  color: rgba(255, 255, 255, .86);
  transition: color 140ms linear;
}
.nav__link:hover { color: var(--green); }

.nav__cta { display: none; flex: none; }

.burger {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  cursor: pointer;
}
.burger__bars { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.burger__bars span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--white);
  border-radius: 2px;
}
.burger__bars span:nth-child(1),
.burger__bars span:nth-child(3) { transition: transform 200ms linear; }
.burger__bars span:nth-child(2) { transition: opacity 160ms linear; }

.burger.is-open .burger__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.is-open .burger__bars span:nth-child(2) { opacity: 0; }
.burger.is-open .burger__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--black);
  padding: 70px var(--gutter) 0;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* One rhythm for the whole hero: the gap the certified badges sit at from
     the eyebrow, applied to every item in the stack. */
  gap: 14px;
  text-align: center;
}

.partners {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.partner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.partner__brand { display: inline-flex; align-items: center; gap: 8px; }
.partner__brand img { width: auto; display: block; }
.partner__brand--google img { height: 19px; }
.partner__brand--meta img { height: 18px; }
.partner__name {
  font-family: var(--body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--white);
}
.partner__cert { display: inline-flex; align-items: center; gap: 6px; }
.partner__cert span:last-child {
  font-family: var(--body);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--bone);
}
.partners__divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .2); }

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #1877f2;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 18px;
  border: 1px solid #9a9a8c;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--white);
}
.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--green);
  animation: ssw-pulse 2.2s ease-in-out infinite;
  flex: none;
}

.hero__h1 {
  font-family: var(--display); font-weight: 800;
  font-weight: 800;
  font-size: clamp(42px, 7vw, 88px);
  line-height: .94;
  letter-spacing: -.025em;
  color: var(--white);
  text-wrap: balance;
}

.hero__sub {
  font-family: var(--body);
  font-size: clamp(15px, 1.4vw, 18px);
  /* 4px of leading, whatever the clamp resolves the size to. 1em is the
     element's own font-size, so this tracks it without repeating the clamp. */
  line-height: calc(1em + 4px);
  letter-spacing: -.012em;
  color: var(--bone);
  max-width: 720px;
  text-wrap: pretty;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.hero__micro {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim-1);
}

/* Video poster ----------------------------------------------------------- */

.video-block { margin: 46px auto 0; padding-bottom: 72px; }

.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.3;
  border-radius: 26px;
  overflow: hidden;
  border: .83px solid rgba(195, 217, 70, .5);
  cursor: pointer;
  background: var(--surface-2);
  display: block;
  padding: 0;
  text-align: left;
}
.video__poster {
  position: absolute;
  inset: 0;
  background-image: url("../assets/video-poster.png");
  background-size: cover;
  background-position: center;
}
.video__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .04) 42%, rgba(0, 0, 0, .7) 100%);
}
.video__banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: var(--green);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.video__play {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: rgba(195, 217, 70, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 44px rgba(195, 217, 70, .4);
}
.video__play::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 24px solid #000;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  margin-left: 6px;
}
.video__caption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--bone);
}

/* ==========================================================================
   Trust strip
   ========================================================================== */

.trust { padding: 56px var(--gutter) 88px; }

.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  overflow: hidden;
}

.trust__cell {
  background: var(--surface);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trust__cell--placeholder {
  border: 1px dashed rgba(195, 217, 70, .4);
  margin: -1px;
}
.trust__num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 3.6vw, 44px);
  line-height: .88;
  letter-spacing: -.03em;
  color: var(--green);
  /* Fixed-width digits, so a figure counting up from zero does not jitter
     as the glyphs change underneath it. */
  font-variant-numeric: tabular-nums;
}
.trust__label {
  font-family: var(--body);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -.012em;
  color: var(--white);
}
.trust__note {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim-1);
}
.trust__note--mono {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim-2);
}

/* ==========================================================================
   Problem
   ========================================================================== */

.problem__inner { display: flex; flex-direction: column; gap: 40px; }

.problem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.problem__copy { display: flex; flex-direction: column; gap: 18px; }
.problem__copy p:last-child { color: var(--bone); }

.instead {
  background: radial-gradient(ellipse at 50% 0%, rgb(26, 32, 14) 0%, rgb(19, 19, 19) 100%);
  border: .83px solid rgba(195, 217, 70, .46);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.instead__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 5px 12px;
  border-radius: 2px;
  background: var(--green);
  color: #000;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.instead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.instead__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(195, 217, 70, .16);
}
.instead__tick { flex: none; margin-top: 3px; color: var(--green); font-size: 12px; }
.instead__text { font-family: var(--body); font-size: 15px; line-height: 1.55; color: var(--white); }

.start { display: flex; flex-direction: column; gap: 20px; padding-top: 16px; }
.start__head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.start__h3 {
  font-family: var(--display); font-weight: 800;
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--white);
}
.start__lead { max-width: 660px; font-size: 16px; }

/* ==========================================================================
   Journey / spine
   ========================================================================== */

.journey { padding: 88px var(--gutter) 0; }
.journey__head { display: flex; flex-direction: column; gap: 30px; }
.journey__intro { display: flex; flex-direction: column; gap: 14px; max-width: 840px; }
.journey__intro p { max-width: 720px; }

.quote-bar {
  background: var(--surface);
  border: .83px solid rgba(195, 217, 70, .3);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.quote-bar__text {
  flex: 1 1 420px;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.012em;
  color: var(--white);
}
.quote-bar__status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(195, 217, 70, .1);
  border: 1px solid rgba(195, 217, 70, .3);
}
.quote-bar__spinner {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1.5px solid rgba(195, 217, 70, .35);
  border-top-color: var(--green);
  animation: ssw-spin 900ms linear infinite;
  display: block;
}
.quote-bar__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--green);
}

.spine { position: relative; max-width: 1160px; margin: 0 auto; padding: 44px 0 20px; }
.spine__rail {
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 120px;
  width: 2px;
  background: rgba(255, 255, 255, .1);
  border-radius: 2px;
}
.spine__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, rgba(195, 217, 70, .5), var(--green));
  border-radius: 2px;
}
.spine__steps { display: flex; flex-direction: column; gap: 8px; }

.step {
  position: relative;
  padding: 0 0 48px 58px;
  opacity: .4;
  transition: opacity .5s linear;
}
.step--last { padding-bottom: 8px; }

.step__node {
  position: absolute;
  left: 8px;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #000;
  border: 2px solid rgba(255, 255, 255, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .4s linear;
}
.step__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  transition: background .4s linear, transform .4s linear;
}
.step.is-reached { opacity: 1; }
.step.is-reached .step__node { border-color: var(--green); }
.step.is-reached .step__dot { background: var(--green); transform: scale(1.15); }
.step.is-reached .status__dot { animation: ssw-pulse 1.6s ease-in-out infinite; }

.status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 9px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(195, 217, 70, .08);
  border: 1px solid rgba(195, 217, 70, .24);
}
.status__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green); display: block; }
.status__text {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}

.step__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.step__meta span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim-2);
}

.step__title {
  font-family: var(--display); font-weight: 800;
  font-weight: 800;
  font-size: clamp(27px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--white);
}
.step__title--hero { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.028em; }

.step__body {
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.62;
  letter-spacing: -.012em;
  color: var(--cream);
  max-width: 520px;
}
.step__body--wide { max-width: 720px; }

.receive { display: flex; flex-direction: column; gap: 6px; }
.receive__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.receive__value {
  font-family: var(--body);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--green);
}
.receive--inline {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  max-width: 520px;
}
.receive--side { padding-bottom: 6px; }

/* Compact step layout ---------------------------------------------------- */

.step__row { display: grid; grid-template-columns: 1fr .92fr; gap: 32px; align-items: start; }
.step__col { display: flex; flex-direction: column; gap: 13px; padding-top: 2px; }

.panel {
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  background: var(--surface-2);
  overflow: hidden;
}
.panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: var(--surface-4);
}
.panel__head span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
  display: block;
  flex: none;
}
.panel__head span:last-child {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim-1);
}
.panel__body { padding: 18px 16px; display: flex; flex-direction: column; gap: 9px; }

.prow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
}
.prow__tick { flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.prow__label { flex: 1; min-width: 0; font-family: var(--body); font-size: 13.5px; letter-spacing: -.012em; }
.prow__meta { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }

.prow--done { background: rgba(195, 217, 70, .07); border: 1px solid rgba(195, 217, 70, .22); }
.prow--done .prow__tick { color: var(--green); }
.prow--done .prow__label { color: var(--bone); }
.prow--done .prow__meta { color: var(--green); }

.prow--live { background: rgba(195, 217, 70, .12); border: 1px solid rgba(195, 217, 70, .4); }
.prow--live .prow__tick { color: var(--green); }
.prow--live .prow__label { color: var(--white); }
.prow--live .prow__meta { color: var(--green); }

.prow--bad { background: rgba(0, 211, 255, .07); border: 1px solid rgba(0, 211, 255, .28); }
.prow--bad .prow__tick { color: var(--blue); }
.prow--bad .prow__label { color: var(--bone); }
.prow--bad .prow__meta { color: var(--blue); }

.prow--idle { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.prow--idle .prow__tick { color: var(--dim-3); }
.prow--idle .prow__label { color: var(--dim-1); }
.prow--idle .prow__meta { color: var(--dim-2); }

/* Hero step (audit / plan) ----------------------------------------------- */

.step__hero { display: flex; flex-direction: column; gap: 24px; }
.step__herohead { display: grid; grid-template-columns: 1fr .72fr; gap: 32px; align-items: end; }
.step__herohead > div:first-child { display: flex; flex-direction: column; gap: 12px; }

/* Audit deliverable ------------------------------------------------------ */

.audit {
  border: 1px solid rgba(195, 217, 70, .24);
  border-radius: 16px;
  background: #080808;
  padding: 30px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  align-items: start;
}
.audit__radar { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.audit__radar svg { width: 100%; max-width: 320px; display: block; overflow: visible; }
.audit__legend { display: flex; align-items: center; gap: 14px; }
.audit__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.audit__legend i { width: 9px; height: 9px; border-radius: 999px; display: block; }
.audit__legend i.is-score { background: var(--green); }
.audit__legend i.is-constraint { background: var(--blue); }

.audit__table { display: flex; flex-direction: column; }
.audit__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 84px 56px 88px;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.audit__row--head {
  align-items: end;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.audit__row--head span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim-3);
}
.audit__row--head .audit__score { overflow: hidden; }
.audit__row--head .audit__num100,
.audit__row--head .audit__cost { text-align: right; }
.audit__row--binding { background: rgba(0, 211, 255, .07); }

.audit__n { font-family: var(--mono); font-weight: 700; font-size: 10px; color: var(--dim-3); }
.audit__name {
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.012em;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audit__score {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  display: block;
}
.audit__score i { display: block; height: 100%; border-radius: 4px; background: rgba(195, 217, 70, .45); }
.audit__num100 {
  font-family: var(--display); font-weight: 800;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--dim-2);
  text-align: right;
}
.audit__cost { font-family: var(--mono); font-size: 11px; color: var(--cream); text-align: right; }
.audit__cost--none { color: var(--dim-4); }

.audit__row--low .audit__num100 { color: var(--green); }
.audit__row--low .audit__score i { background: var(--green); }

.audit__row--binding .audit__n,
.audit__row--binding .audit__num100,
.audit__row--binding .audit__cost { color: var(--blue); }
.audit__row--binding .audit__name { color: var(--white); }
.audit__row--binding .audit__score i { background: var(--blue); }

.audit__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid rgba(195, 217, 70, .3);
}
.audit__total-label { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--white); }
.audit__total-value { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.025em; color: var(--green); }

.constraint {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 0% 0%, rgb(26, 32, 14) 0%, rgb(17, 17, 17) 100%);
  border: .83px solid rgba(195, 217, 70, .4);
}
.constraint__head { flex: none; max-width: 100%; display: flex; flex-direction: column; gap: 1px; }
.constraint__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--green);
}
.constraint__name {
  font-family: var(--display); font-weight: 800;
  /* Scales like the other display type. The card sits inside the audit panel
     and the spine's indent, so at phone widths a fixed 29px overruns it. */
  font-size: clamp(22px, 6vw, 29px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--green);
}
.constraint__body {
  flex: 1 1 260px;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bone);
}

.disclaimer {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim-3);
}
.disclaimer--audit { margin-top: 14px; }

/* 12-week plan ----------------------------------------------------------- */

.plan {
  border: 1px solid rgba(195, 217, 70, .24);
  border-radius: 16px;
  overflow: hidden;
  background: #060606;
}
.plan__chart { position: relative; height: 88px; border-bottom: 1px solid rgba(255, 255, 255, .11); }
.plan__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plan__chart-label {
  position: absolute;
  left: 20px;
  top: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim-2);
}

.plan__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.act { padding: 30px 28px; display: flex; flex-direction: column; gap: 18px; }
.act:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .11); }

.act__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
/* The week range is the heading now — sized to hold "Weeks 9-12" on one line
   inside a third of the plan grid, and it keeps the three-step green ramp the
   act numbers used to carry. */
.act__no {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.act--1 .act__no { color: rgba(195, 217, 70, .45); }
.act--2 .act__no { color: rgba(195, 217, 70, .70); }
.act--3 .act__no { color: var(--green); }

.act__title { display: flex; flex-direction: column; gap: 8px; }
.act__name { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.02; letter-spacing: -.025em; color: var(--white); }
.act__body { font-family: var(--body); font-size: 14.5px; line-height: 1.58; letter-spacing: -.012em; color: var(--cream); }

.act__items { display: flex; flex-direction: column; gap: 7px; }
.act__items-label { font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim-3); }
.act__item { display: flex; gap: 9px; align-items: flex-start; }
.act__item i { flex: none; margin-top: 6px; width: 5px; height: 5px; border-radius: 999px; background: var(--green); display: block; }
.act__item span { font-family: var(--body); font-size: 13.5px; line-height: 1.5; color: var(--bone); }

.act__gate {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(195, 217, 70, .24);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.act__gate-label { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-3); }
.act__gate-text { font-family: var(--body); font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--green); }

/* Decision card ---------------------------------------------------------- */

.decision {
  background: radial-gradient(ellipse at 0% 0%, rgb(26, 32, 14) 0%, rgb(19, 19, 19) 100%);
  border: .83px solid rgba(195, 217, 70, .46);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}
.decision__copy { flex: 1 1 380px; display: flex; flex-direction: column; gap: 9px; }
.decision__eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.decision__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--white);
}
.decision__body { font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--cream); }

/* ==========================================================================
   Book
   ========================================================================== */

.book__inner { display: flex; flex-direction: column; gap: 26px; }
.book__head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.book__head p { max-width: 680px; }

/* ==========================================================================
   Proof / testimonials
   ========================================================================== */

.proof__inner { display: flex; flex-direction: column; gap: 30px; }
.proof__head { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }

/* stretch, not start: the three cards match the tallest in the row. On mobile
   the grid is a single column, so each card still sizes to its own content. */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.testi {
  background: #fff;
  border: .83px solid var(--green);
  box-shadow: 3.3px 3.3px 0 0 var(--green);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  gap: 12px;
}
.testi__avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f2f1dd;
  border: 1px solid #dedca4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  color: #5f5e3a;
}
.testi__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.testi__name { font-family: var(--body); font-weight: 700; font-size: 13px; color: #000; }
.testi__text { font-family: var(--body); font-size: 13px; line-height: 1.55; color: #000; }

/* ==========================================================================
   Results ledger
   ========================================================================== */

.results__inner { display: flex; flex-direction: column; gap: 34px; }
.results__head { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.results__head p { max-width: 700px; }

.ledger { display: flex; flex-direction: column; gap: 10px; }

.ledger__head {
  display: grid;
  grid-template-columns: 150px 1fr 230px 130px;
  gap: 24px;
  align-items: end;
  padding: 0 26px 4px;
}
.ledger__head > span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim-3);
}
.ledger__key { display: inline-flex; align-items: center; gap: 10px; }
.ledger__key > span { display: inline-flex; align-items: center; gap: 5px; }
.ledger__key i { width: 14px; height: 6px; border-radius: 3px; display: block; }
.ledger__key i.is-before { background: rgba(255, 255, 255, .22); }
.ledger__key i.is-after { background: var(--green); }

.ledger__row {
  display: grid;
  grid-template-columns: 150px 1fr 230px 130px;
  gap: 24px;
  align-items: center;
  padding: 22px 26px;
  border-radius: 14px;
  background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, .13);
  transition: border-color 160ms linear;
}
.ledger__row:hover { border-color: rgba(195, 217, 70, .4); }

.ledger__account { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ledger__name { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.04; letter-spacing: -.02em; color: var(--white); }
.ledger__spend { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); }
.ledger__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--dim-3);
  border: 1px solid rgba(255, 255, 255, .16);
}
.ledger__badge--verified { background: var(--green); color: #000; border-color: var(--green); font-weight: 700; }

.ledger__constraint { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ledger__constraint-text { font-family: var(--body); font-size: 15px; line-height: 1.5; letter-spacing: -.012em; color: var(--bone); }
.ledger__locus { font-family: var(--mono); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; color: var(--dim-2); }
.ledger__locus--outside { color: var(--blue); }

.ledger__metric { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ledger__metric-label { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-2); }
.ledger__bar-row { display: flex; align-items: center; gap: 10px; }
.ledger__track {
  flex: 1;
  min-width: 0;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  display: block;
}
.ledger__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  transition: width 1000ms cubic-bezier(.2, .7, .2, 1);
}
.ledger__bar--before { background: rgba(255, 255, 255, .24); }
.ledger__bar--after { background: var(--green); transition-delay: 140ms; }
.ledger__val {
  flex: none;
  width: 56px;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim-2);
}
.ledger__val--after { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--green); }

.ledger__delta { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.ledger__delta-num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--green);
}
.ledger__delta-label { font-family: var(--mono); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; color: var(--dim-2); }

/* ==========================================================================
   Team
   ========================================================================== */

.team__inner { display: flex; flex-direction: column; gap: 32px; }
.team__head { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.team__head p { max-width: 720px; }

.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.member { display: flex; flex-direction: column; gap: 14px; }
.member__frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 4.4;
}
.member__frame--cyan { background: #00d3ff; }
.member__frame--citrus { background: #e8d944; }
.member__frame--blue { background: #00D3FF; }
.member__photo { width: 100%; height: 100%; background-size: cover; background-position: center 12%; }
.member__info { display: flex; flex-direction: column; gap: 5px; }
.member__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.member__name { font-family: var(--display); font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: -.02em; color: var(--white); }
.member__years { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.member__role { font-family: var(--body); font-weight: 500; font-size: 14.5px; color: var(--white); }
.member__bio { font-family: var(--body); font-size: 14px; line-height: 1.55; color: var(--cream); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { padding: 0 var(--gutter) 88px; }
/* Same eyebrow + h2 pairing every other section head uses. .faq__inner has a
   28px gap, which is the wrong distance between a label and the heading it
   labels, so the pair gets its own 14px wrapper. */
.faq__head { display: flex; flex-direction: column; gap: 14px; }
.faq__inner { display: flex; flex-direction: column; gap: 28px; }
.faq__h2 {
  font-family: var(--display); font-weight: 800;
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--white);
}
.faq__list { display: flex; flex-direction: column; gap: 2px; }
.faq__item { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  color: inherit;
}
.faq__q-text { flex: 1; font-family: var(--body); font-weight: 500; font-size: 16.5px; letter-spacing: -.012em; color: var(--white); }
.faq__sign { flex: none; color: var(--green); font-size: 19px; line-height: 1; }
.faq__sign::before { content: "+"; }
.faq__item.is-open .faq__sign::before { content: "\2212"; }
.faq__a {
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--cream);
  padding: 0 56px 22px 4px;
}
.faq__item:not(.is-open) .faq__a { display: none; }

/* ==========================================================================
   Apply / closing
   ========================================================================== */

.apply {
  padding: 88px var(--gutter) 100px;
  border-top: 1px solid rgba(195, 217, 70, .22);
}
.apply__inner { display: flex; flex-direction: column; gap: 28px; }
.apply__head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.apply__h2 {
  font-family: var(--display); font-weight: 800;
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--white);
  max-width: 820px;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(195, 217, 70, .08);
  border: 1px solid rgba(195, 217, 70, .28);
}
.chip i { color: var(--green); font-size: 11px; font-style: normal; }
.chip span { font-family: var(--body); font-size: 13.5px; letter-spacing: -.012em; color: var(--bone); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--black);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 38px var(--gutter) 120px;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.footer__brand { display: flex; flex-direction: column; gap: 6px; }
.footer__logo { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--white); text-transform: lowercase; }

.footer__partners { display: flex; align-items: center; gap: 24px; }

.footer__meta { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--body); font-size: 12.5px; color: var(--dim-1); }
.footer__meta a { color: var(--dim-1); }
.footer__meta a:hover { color: var(--green); }

/* ==========================================================================
   Overlays — mobile menu, video modal, sticky CTA
   ========================================================================== */

.menu {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: #000;
  display: flex;
  flex-direction: column;
  padding: 96px 20px 28px;
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__links { display: flex; flex-direction: column; }
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--display); font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--white);
}
.menu__link:hover { color: var(--white); }
.menu__link i { font-family: var(--mono); font-size: 13px; color: var(--green); font-style: normal; }
.menu__foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.menu__cta { height: 58px; --cta-size: 25px; font-size: var(--cta-size); }
.menu__note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim-1);
  text-align: center;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: pointer;
  border: 0;
  width: 100%;
}
.modal[hidden] { display: none; }
.modal__frame {
  width: min(940px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  border: .83px solid rgba(195, 217, 70, .5);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.modal__title { font-family: var(--display); font-weight: 800; font-size: 32px; letter-spacing: -.02em; color: var(--green); }
.modal__hint { font-family: var(--body); font-size: 15px; color: var(--cream); }

.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  padding: 13px var(--gutter);
  background: rgba(10, 10, 10, .88);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-top: 1px solid rgba(195, 217, 70, .32);
  transform: translateY(120%);
  transition: transform 260ms cubic-bezier(.2, .6, .2, 1);
}
.stickybar.is-visible { transform: translateY(0); }
.stickybar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.stickybar__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stickybar__title { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.05; letter-spacing: -.02em; color: var(--white); }
.stickybar__note { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-1); }
.stickybar__cta { flex: none; height: 48px; padding: 0 26px; --cta-size: 21px; font-size: var(--cta-size); }

/* ==========================================================================
   Responsive — breakpoints mirror the prototype: 1000px / 760px / 640px
   ========================================================================== */

@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
}

@media (max-width: 999.98px) {
  .ledger__head { display: none; }
  .ledger__row { grid-template-columns: 1fr 1fr; }
  .ledger__delta { align-items: flex-start; }
  .step__row { grid-template-columns: 1fr; }
  .step__herohead { grid-template-columns: 1fr; }
  .audit { grid-template-columns: 1fr; }
  .plan__grid { grid-template-columns: 1fr; }
  .act:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .11); }
  .trust__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 759.98px) {
  .problem__grid { grid-template-columns: 1fr; }
  .testi-grid,
  .team__grid { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: 1fr; }
  .instead__grid { grid-template-columns: 1fr; }

  /* The score bar collapses to a 0px track rather than being removed — a
     display:none grid item would shift every later cell one column left. */
  .audit__row { grid-template-columns: 16px minmax(0, 1fr) 0px 30px 58px; gap: 8px; }
  .audit__num100 { font-size: 17px; }
  .audit__cost { font-size: 10px; }

  .step { padding-left: 44px; }
  .spine__rail { left: 12px; }
  .step__node { left: 1px; }

  .stickybar { padding: 12px 18px; }
  .stickybar__cta { flex: 1 1 100%; }
  /* The CTA wraps onto its own row here, so the copy above it is a full-width
     block — centre it rather than leaving it ranged left under a centred button. */
  .stickybar__copy { flex: 1 1 100%; align-items: center; text-align: center; }
  /* The CTA wraps onto its own row here, so the bar is ~124px tall instead of
     ~74px. The footer has to clear the taller bar or it sits under it. */
  .footer { padding-bottom: 172px; }
}

@media (max-width: 639.98px) {
  :root { --gutter: 18px; }
  .audit { padding: 22px 18px; }
  .instead { padding: 22px 20px; }
  .decision { padding: 24px 20px; }
  .act { padding: 26px 22px; }
  .ledger__row { padding: 20px; }
  .hero { padding-top: 46px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .journey { padding-top: 64px; padding-bottom: 0; }
  .faq { padding-top: 0; padding-bottom: 64px; }
  .trust { padding-top: 44px; padding-bottom: 64px; }
}