/* ============================================================
   SiteSparq — site stylesheet (vanilla, self-contained).
   Tokens are inlined at :root so this file drops into any branch
   with no build step. Mirrors the SiteSparq Design System.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  /* brand */
  --ss-ink: #1a0b44;
  --ss-purple: #6f2b8c;
  --ss-pink: #ec1459;
  --ss-pink-deep: #c1104a;
  --ss-orange: #f7981d;
  --ss-navy: #112856;
  /* neutrals */
  --ss-white: #ffffff;
  --ss-text-muted: #5f547c;
  --ss-surface: #f5f5f7;
  --ss-border: rgba(0, 0, 0, 0.08);
  /* tints */
  --ss-tint-purple: #f8f3fe;
  --ss-tint-pink: #fff0f5;
  --ss-code-bg: #f3ebff;
  --ss-code-fg: #553c9a;
  --ss-pill-purple-bg: #e9d8fd;
  --ss-pill-purple-fg: #6f2b8c;
  --ss-pill-pink-bg: #ffd1e0;
  --ss-pill-pink-fg: #c1104a;
  /* gradient */
  --ss-gradient-spark: linear-gradient(120deg, #6f2b8c 0%, #ec1459 55%, #f7981d 100%);
  --ss-gradient-spark-soft: linear-gradient(120deg, #f8f3fe 0%, #fff0f5 60%, #fff6ec 100%);
  /* radii */
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  /* shadow */
  --shadow-card: 0 8px 35px rgba(0, 0, 0, 0.1);
  --shadow-subtle: 0 8px 35px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 12px 45px rgba(26, 11, 68, 0.16);
  /* layout */
  --container: 1143px;
  --container-wide: 1280px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ss-ink);
  background: var(--ss-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--ss-pill-pink-bg); }
.container { max-width: var(--container); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ---------- typography helpers ---------- */
.eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ss-pink);
}
.lead { font-size: 18px; line-height: 1.65; color: var(--ss-text-muted); }
.muted { color: var(--ss-text-muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 68px; padding: 0 29px; border: none; border-radius: var(--radius-lg);
  font-family: inherit; font-weight: 800; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-4px); }
.btn--sm { height: 48px; padding: 0 22px; font-size: 11px; }
.btn--lg { height: 74px; padding: 0 38px; font-size: 13px; }
.btn--primary { background: var(--ss-pink); color: #fff; }
.btn--primary:hover { background: var(--ss-pink-deep); }
.btn--secondary { background: var(--ss-surface); color: var(--ss-ink); }
.btn--secondary:hover { background: #ececf0; }
.btn--ghost { background: transparent; color: var(--ss-ink); }
.btn--dark { background: var(--ss-ink); color: #fff; }
.btn--ondark { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn--block { width: 100%; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); line-height: 1.2;
  max-width: 100%;
}
.badge--purple { background: var(--ss-pill-purple-bg); color: var(--ss-pill-purple-fg); }
.badge--pink { background: var(--ss-pill-pink-bg); color: var(--ss-pill-pink-fg); }
.badge--orange { background: rgba(247, 152, 29, 0.18); color: #b66a00; }
.badge--neutral { background: var(--ss-surface); color: var(--ss-ink); }

/* ---------- cards ---------- */
.card {
  background: #fff; border-radius: var(--radius-xl); padding: 40px;
  box-shadow: var(--shadow-card);
}
.card--purple { background: var(--ss-tint-purple); }
.card--pink { background: var(--ss-tint-pink); }
.card--muted { background: var(--ss-surface); box-shadow: none; }
.card--dark { background: var(--ss-ink); color: #fff; }
.card--flat { box-shadow: none; background: var(--ss-surface); }
.card--lift { transition: transform 0.15s ease, box-shadow 0.2s ease; }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--ss-border);
}
.nav__inner {
  max-width: var(--container-wide); margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; gap: 28px;
}
/* Logo lives in the top-left corner on the grey blob (out of the menu flow,
   so the remaining nav items shift over to fill the space). Sized to match the
   Terms/Privacy pages (the logo SVG's natural height). */
.nav__logo { position: absolute; left: 44px; top: 18px; z-index: 2; transition: top 0.2s ease, left 0.2s ease; }
.nav__logo img { height: 119px; transition: height 0.2s ease; }
/* Shrink-on-scroll: at the very top of the page the oversized wordmark overhangs
   the thin bar as a brand moment (sitting on the grey blob). Once the page is
   scrolled the nav goes solid and collapses to a compact logo that fits *inside*
   the white bar — so the sticky logo never floats over the content scrolling
   beneath it (it was overlapping text on narrower laptops, where the centered
   content sits close to the left edge instead of in a wide margin). */
.nav.is-scrolled .nav__logo { top: 12px; }
.nav.is-scrolled .nav__logo img { height: 56px; }
.nav__links { display: flex; gap: 26px; margin-left: 8px; }
.nav__links a { font-size: 14px; font-weight: 600; }
.nav__links a:hover, .nav__links a.is-active { color: var(--ss-pink); }
.nav__spacer { flex: 1; }
.nav__connect { font-size: 13px; font-weight: 600; color: var(--ss-text-muted); white-space: nowrap; }
.nav__connect:hover { color: var(--ss-ink); }
.nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ss-ink); margin: 4px 0; border-radius: 2px; }

/* ============================================================
   HERO
   ============================================================ */
.hero__inner {
  max-width: var(--container-wide); margin: 0 auto; padding: 70px 32px 90px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.hero h1 {
  font-size: clamp(40px, 5vw, 66px); line-height: 1.08; font-weight: 900;
  letter-spacing: 0; margin-top: 20px; text-wrap: balance;
}
/* rotating client ask — fixed stem + crossfading tail, so shared words never rewrap */
.hero__ask {
  margin-top: 20px; max-width: 660px;
  font-size: clamp(38px, 3.15vw, 42px); line-height: 1.14; font-weight: 800;
  color: var(--ss-ink); min-width: 0;
}
.ask__stem,
.ask__tail { margin: 0; }
.ask__stem { position: relative; white-space: nowrap; }
.ask__tail-wrap {
  display: grid; height: 1.15em; min-width: 0; margin-bottom: 0.28em;
}
.ask__tail {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; transition: opacity 0.55s ease;
}
.ask__tail.is-on { opacity: 1; }
/* Inline quote marks keep the question tight while giving it a strong editorial shape. */
.ask__stem::before { content: "\201C"; }
.ask__tail::after { content: "\201D"; }
.ask__stem::before,
.ask__tail::after {
  display: inline-block; color: var(--ss-ink); font-weight: 900; font-size: 1.18em;
  line-height: 0.8; opacity: 0.95;
}
.ask__stem::before {
  position: absolute; right: 100%; margin-right: 0.04em;
  transform: translateY(0.05em);
}
.ask__tail::after { margin-left: 0.02em; transform: translateY(0.08em); }
.hero h1.hero__yes {
  color: var(--ss-pink);
  font-size: clamp(34px, 3.3vw, 44px);
  line-height: 1.04;
  margin-top: 2px;
}
.hero p.lead { margin-top: 18px; max-width: 540px; }
.hero__cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.hero__trust { font-size: 13px; font-weight: 500; color: var(--ss-text-muted); margin-top: 18px; }
.hero__visual { position: relative; display: flex; justify-content: center; }
.hero__replay {
  position: absolute; z-index: 8; left: 50%; bottom: -18px; transform: translateX(-50%);
  border: 1px solid rgba(26, 11, 68, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-subtle); color: var(--ss-ink); cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; line-height: 1;
  padding: 10px 14px; text-transform: uppercase; white-space: nowrap;
  transition: transform 0.15s ease, background 0.2s ease, opacity 0.2s ease;
}
.hero__replay:hover { background: #fff; transform: translateX(-50%) translateY(-2px); }
.hero__replay:focus-visible { outline: 3px solid rgba(236, 20, 89, 0.25); outline-offset: 3px; }
.hero__replay[hidden] { display: none; }

/* handoff browser card */
.handoff { position: relative; width: 100%; max-width: 460px; }
.browser { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); overflow: hidden; }
.browser__bar { height: 30px; background: var(--ss-surface); display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.browser__dot { width: 9px; height: 9px; border-radius: 99px; }
.browser__url { margin-left: 10px; font-size: 11px; color: var(--ss-text-muted); font-weight: 600; }
.browser__body { padding: 22px; }
.skel { border-radius: 5px; }
.handoff__person {
  position: absolute; display: flex; align-items: center; gap: 10px; background: #fff;
  border-radius: 999px; box-shadow: var(--shadow-card); padding: 8px 16px 8px 8px; z-index: 3;
}
.handoff__person--you { top: -22px; left: -28px; }
.handoff__person--them { bottom: -22px; right: -24px; }
.handoff__avatar { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; }
.handoff__name { font-weight: 800; font-size: 13px; line-height: 1.15; }
.handoff__sub { font-size: 11px; color: var(--ss-text-muted); }

/* ---- hero animated story: chat → website → handoff ---- */
.hstage { position: relative; width: 100%; max-width: 440px; }

/* the built website — the anchor; defines the stage height, revealed after chat */
.hstage__site {
  position: relative; z-index: 1;
  opacity: 0; transform: scale(0.92) translateY(12px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.hsite__shot { aspect-ratio: 1280 / 860; overflow: hidden; background: var(--ss-surface); }
.hsite__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* the SiteSparq chat card, centered over the stage */
.hstage__chat {
  position: absolute; z-index: 4; left: 50%; top: 50%; width: 90%;
  transform: translate(-50%, -50%);
  background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
  padding: 16px 16px 18px;
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.hchat__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.hchat__spark { width: 16px; height: 16px; border-radius: 5px; background: var(--ss-gradient-spark); }
.hchat__title { font-weight: 800; font-size: 13px; color: var(--ss-ink); }
.hchat__msg { width: fit-content; max-width: 90%; font-size: 13px; line-height: 1.4; font-weight: 500; padding: 9px 12px; border-radius: 12px; }
.hchat__msg--user { margin-left: auto; background: var(--ss-pill-pink-bg); color: var(--ss-pill-pink-fg); border-bottom-right-radius: 4px; }
.hchat__msg--agent { margin-top: 10px; background: var(--ss-surface); color: var(--ss-ink); border-bottom-left-radius: 4px; font-weight: 700; }
.hchat__steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hchat__pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.hchat__pill--done { background: rgba(46, 155, 115, 0.14); color: #2e9b73; }
.hchat__pill--go { background: var(--ss-pill-purple-bg); color: var(--ss-pill-purple-fg); }

/* the two owners */
.hstage__you, .hstage__them {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 999px; box-shadow: var(--shadow-card); padding: 7px 15px 7px 7px;
  opacity: 0; transform: scale(0.82);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.hstage__you { top: -16px; left: -16px; }
.hstage__them { bottom: 64px; right: -16px; }

/* ownership transfer bar — a labeled progress bar; the gradient fill (purple→pink)
   is the direction cue, and the You/Maria identities live in the chips above */
.hstage__transfer {
  position: absolute; z-index: 6; left: 14px; right: 14px; bottom: 8px;
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-pop); padding: 11px 18px 13px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.hstage__transfer-label { position: relative; height: 15px; }
.ttl { position: absolute; inset: 0; text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; }
.ttl--doing { color: var(--ss-purple); }
.ttl--done { color: #2e9b73; opacity: 0; }
.hstage__transfer .transfer-bar__track { flex: 0 0 auto; width: 100%; }
.hstage__transfer .transfer-bar__fill { transition: transform 1s var(--ease-out); }
.hstage__transfer .transfer-bar__dot { transition: left 1s var(--ease-out); }

/* pre-start: keep the visual ready without letting the build animation run offscreen */
.hstage.is-ready .hchat__msg,
.hstage.is-ready .hchat__pill {
  opacity: 0; transform: translateY(8px);
}

/* phase: build — chat visible; user ask, then the two build steps appear */
.hstage.is-build .hstage__chat { opacity: 1; }
.hstage.is-build .hchat__msg--user { animation: hchatIn 0.45s var(--ease-out) 0.15s both; }
.hstage.is-build .hchat__pill { animation: hchatIn 0.4s var(--ease-out) both; }
.hstage.is-build .hchat__pill:nth-child(1) { animation-delay: 0.7s; }
.hstage.is-build .hchat__pill:nth-child(2) { animation-delay: 1.05s; }
.hstage.is-build .hchat__msg--agent { animation: hchatIn 0.45s var(--ease-out) 1.55s both; }

/* phase: live — chat lifts away, website reveals, "You built it" pops */
.hstage.is-live .hstage__chat,
.hstage.is-handoff .hstage__chat { opacity: 0; transform: translate(-50%, -74%) scale(0.95); pointer-events: none; }
.hstage.is-live .hstage__site,
.hstage.is-handoff .hstage__site { opacity: 1; transform: scale(1) translateY(0); }
.hstage.is-live .hstage__you,
.hstage.is-handoff .hstage__you { opacity: 1; transform: scale(1); transition-delay: 0.45s; }

/* phase: handoff — Maria joins as owner; "You built it" stays solid (you did build it) */
.hstage.is-handoff .hstage__them { opacity: 1; transform: scale(1); transition-delay: 1s; }
.hstage.is-handoff .hstage__transfer { opacity: 1; transform: translateY(0); }
.hstage.is-handoff .transfer-bar__fill { transform: scaleX(1); transition-delay: 0.25s; }
.hstage.is-handoff .transfer-bar__dot { left: 100%; transition-delay: 0.25s; }
.hstage.is-handoff .ttl--doing { animation: ttlOut 0.4s var(--ease-out) 1.15s both; }
.hstage.is-handoff .ttl--done { animation: ttlIn 0.4s var(--ease-out) 1.35s both; }

@keyframes hchatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ttlOut { to { opacity: 0; } }
@keyframes ttlIn { to { opacity: 1; } }

/* no-JS / reduced motion: show the settled handed-off end state */
.hstage.is-static .hstage__chat { opacity: 0; pointer-events: none; }
.hstage.is-static .hstage__site { opacity: 1; transform: none; }
.hstage.is-static .hstage__you { opacity: 1; transform: none; }
.hstage.is-static .hstage__them { opacity: 1; transform: none; }
.hstage.is-static .hstage__transfer { opacity: 1; transform: none; }
.hstage.is-static .transfer-bar__fill { transform: scaleX(1); }
.hstage.is-static .transfer-bar__dot { left: 100%; }
.hstage.is-static .ttl--doing { opacity: 0; }
.hstage.is-static .ttl--done { opacity: 1; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 88px 0; }
/* Offset in-page anchor jumps (e.g. hero "See how handoff works" → #loop) so the
   section eyebrow clears the sticky nav instead of tucking under it. */
#loop { scroll-margin-top: 84px; }
.section--grey { background: var(--ss-surface); }
.section--pink { background: var(--ss-tint-pink); }
.section__head { text-align: center; max-width: 680px; margin: 0 auto; }
.section__head h2 { font-size: 40px; line-height: 1.18; font-weight: 900; letter-spacing: -0.01em; margin-top: 14px; }
.section__head p { margin-top: 16px; }

/* loop */
.loop { display: grid; grid-template-columns: 1fr auto 1.25fr auto 1fr; gap: 18px; align-items: stretch; margin-top: 56px; text-align: left; }
.loop__step { display: flex; flex-direction: column; gap: 14px; }
.loop__num { font-weight: 900; font-size: 30px; line-height: 1; color: var(--ss-pink); }
.loop__icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%); }
.loop__icon img { width: 52%; }
.loop__icon--purple { background: var(--ss-tint-purple); }
.loop__icon--orange { background: rgba(247,152,29,0.12); }
.loop__step h3 { font-size: 22px; font-weight: 900; }
/* Fixed height (matches the 64px icon) so every card's title starts at the same
   line, whether the top row holds an icon or the "The hinge" badge. */
.loop__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.loop__title { display: flex; align-items: center; gap: 10px; }
.loop__actor--you { color: var(--ss-purple); }
.loop__actor--they { color: var(--ss-pink); }
.loop__arrow { display: flex; align-items: center; justify-content: center; color: var(--ss-purple); }
.loop__arrow svg path { stroke-width: 3; }
.loop__transfer { border-radius: var(--radius-xl); padding: 2px; background: var(--ss-gradient-spark); box-shadow: var(--shadow-pop); }
.loop__transfer-inner { background: #fff; border-radius: 18px; padding: 28px; height: 100%; display: flex; flex-direction: column; gap: 14px; }
.loop__transfer h3 { font-size: 26px; font-weight: 900; }
.transfer-bar { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.transfer-bar__track { flex: 1; position: relative; height: 3px; background: var(--ss-surface); border-radius: 99px; }
.transfer-bar__fill { position: absolute; inset: 0; border-radius: 99px; background: var(--ss-gradient-spark); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease-out); }
.transfer-bar__dot { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 99px; background: var(--ss-orange); box-shadow: 0 2px 8px rgba(247,152,29,0.5); transition: left 0.9s var(--ease-out); }
.is-revealed .transfer-bar__fill { transform: scaleX(1); transition-delay: 0.15s; }
.is-revealed .transfer-bar__dot { left: 100%; transition-delay: 0.15s; }
.chip { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.chip--purple { background: var(--ss-pill-purple-bg); color: var(--ss-pill-purple-fg); }
.chip--pink { background: var(--ss-pill-pink-bg); color: var(--ss-pill-pink-fg); }

/* math */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.figure__value { font-size: 38px; line-height: 1; font-weight: 900; letter-spacing: -0.02em; }
.figure__value--purple { color: var(--ss-purple); }
.figure__value--pink { color: var(--ss-pink); }
.figure__value--orange { color: #d97e00; }
.figure__label { font-weight: 700; font-size: 16px; margin-top: 12px; }
.figure__sub { margin-top: 8px; }
.footnote { font-size: 13px; font-weight: 500; color: var(--ss-text-muted); margin-top: 22px; }

/* merged economics */
.econ { display: grid; grid-template-columns: 1fr 0.82fr; gap: 18px; margin-top: 44px; align-items: stretch; }
.econ__market { display: flex; flex-direction: column; gap: 18px; }
.econ__you { display: flex; flex-direction: column; gap: 18px; }
.econ__stat .figure__label { margin-top: 8px; }
.econ__bridge { font-size: 14px; line-height: 1.6; font-weight: 600; color: var(--ss-ink); padding: 14px 18px; background: var(--ss-tint-purple); border-radius: var(--radius-md); }
.econ__anchor { background: var(--ss-ink); color: #fff; position: relative; overflow: hidden; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.econ__anchor::before { content: ''; position: absolute; inset: 0; background: var(--ss-gradient-spark); opacity: 0.16; }
.econ__anchor > * { position: relative; }
.econ__anchor .figure__label { color: rgba(255,255,255,0.82); }
.econ__anchor-num { font-size: 58px; color: #fff; }
.econ__kicker { font-size: 20px; font-weight: 900; letter-spacing: -0.01em; color: var(--ss-ink); margin-top: 2px; }
.figure__value .unit { font-size: 20px; font-weight: 800; opacity: 0.6; }

/* why this is different — money-loop diagram cards */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.why__card { background: #fff; border: 1px solid var(--ss-border); border-radius: var(--radius-xl); padding: 32px 28px 34px; box-shadow: var(--shadow-subtle); display: flex; flex-direction: column; align-items: center; text-align: center; }
.why__card--win { background: #eef8f2; border-color: #a7dcc4; box-shadow: var(--shadow-pop); }
.why__title { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; color: var(--ss-ink); }
.why__diagram { width: 100%; max-width: 300px; margin: 20px 0 22px; }
.why__diagram svg { width: 100%; height: auto; display: block; }
.why__caption { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; color: var(--ss-ink); margin-top: auto; }
.why__body { font-size: 15px; line-height: 1.62; color: var(--ss-text-muted); margin-top: 12px; }

/* opportunity callout */
.opportunity {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
  margin-top: 22px; padding: 44px; overflow: hidden; position: relative;
}
.opportunity h3 { font-size: 30px; line-height: 1.15; font-weight: 900; letter-spacing: -0.01em; }
.opportunity p { margin-top: 14px; }
.opportunity__stack { display: flex; flex-direction: column; gap: 12px; }
.opportunity__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 20px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); }
.opportunity__row b { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.opportunity__row span { font-size: 13px; font-weight: 500; color: var(--ss-text-muted); text-align: right; }
.opportunity__row--keep { background: var(--ss-ink); }
.opportunity__row--keep b, .opportunity__row--keep .keep-label { color: #fff; }
.opportunity__row--keep span { color: rgba(255,255,255,0.7); }

/* ============================================================
   SHOWCASE (client sites)
   ============================================================ */
.showcase-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 22px; margin-top: 48px;
}
.showcard { display: flex; flex-direction: column; gap: 12px; cursor: pointer; text-decoration: none; }
.showcard__frame {
  background: #fff; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.showcard:hover .showcard__frame { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.showcard__bar { height: 24px; background: var(--ss-surface); display: flex; align-items: center; gap: 5px; padding: 0 11px; }
.showcard__url { margin-left: 8px; font-size: 10px; color: var(--ss-text-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcard__shot { aspect-ratio: 1280 / 860; background: var(--ss-surface); overflow: hidden; }
.showcard__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.showcard__biz { font-size: 15px; font-weight: 700; color: var(--ss-ink); }
.showcard__cat { font-size: 12px; font-weight: 500; color: var(--ss-text-muted); margin-top: 2px; }

/* recipient */
.recipient { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.recipient__points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.recipient__points h3 { font-size: 18px; font-weight: 900; }
.recipient__points p { margin-top: 8px; }
.chatpeek { margin-top: 28px; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 18px; max-width: 380px; }
.bubble { display: flex; margin-bottom: 10px; }
.bubble__msg { max-width: 82%; font-weight: 500; font-size: 14px; line-height: 1.45; padding: 10px 14px; border-radius: 14px; }
.bubble--them { justify-content: flex-end; }
.bubble--them .bubble__msg { background: var(--ss-pill-pink-bg); color: var(--ss-pill-pink-fg); border-bottom-right-radius: 4px; }
.bubble--agent { justify-content: flex-start; }
.bubble--agent .bubble__msg { background: var(--ss-surface); color: var(--ss-ink); border-bottom-left-radius: 4px; }

/* proof / contrast */
.contrast { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.contrast h3 { font-size: 18px; font-weight: 900; }
.contrast .card h3 { color: var(--ss-pink); }
.contrast .card--flat h3 { color: var(--ss-text-muted); }
.contrast p { margin-top: 8px; }
.proof { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: 44px; margin-top: 64px; }
.proof h3 { font-size: 28px; line-height: 1.25; font-weight: 900; margin-top: 16px; }
.proof__sites { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sitecard { background: #fff; border-radius: 14px; box-shadow: var(--shadow-subtle); overflow: hidden; }
.sitecard__bar { height: 18px; background: var(--ss-surface); }
.sitecard__body { padding: 14px; }

/* pricing */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; align-items: stretch; }
.tier { display: flex; flex-direction: column; position: relative; }
.tier--featured { box-shadow: var(--shadow-pop); outline: 2px solid var(--ss-pink); }
.tier__flag { position: absolute; top: -12px; left: 24px; }
.tier__top { display: flex; align-items: center; justify-content: space-between; }
.tier h3 { font-size: 20px; font-weight: 900; }
.tier__price { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.tier__price b { font-size: 34px; font-weight: 900; letter-spacing: -0.02em; color: var(--ss-pink); }
.tier--dark .tier__price b { color: #fff; }
.tier__cadence { font-size: 14px; font-weight: 500; color: var(--ss-text-muted); }
.tier--dark .tier__cadence, .tier--dark .tier__tagline, .tier--dark .tier__features li { color: rgba(255,255,255,0.8); }
.tier__tagline { font-size: 14px; line-height: 1.5; color: var(--ss-text-muted); margin: 6px 0 14px; }
.tier__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tier__features li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; font-weight: 500; }
.tier__check { flex-shrink: 0; margin-top: 1px; }
.tier__cta { margin-top: 18px; }
/* Quota specs are woven into the feature checklist (pricing page); the visit estimate stays quieter than the rest of the line. */
.tier__spec-note { font-size: 12px; color: var(--ss-text-muted); }
.tier--dark .tier__spec-note { color: rgba(255,255,255,0.6); }

/* final cta */
.finalcta { padding: 20px 0 90px; }
.finalcta__box { max-width: var(--container); margin: 0 auto; border-radius: 28px; background: var(--ss-ink); padding: 64px 48px; text-align: center; position: relative; overflow: hidden; }
.finalcta__wash { position: absolute; inset: 0; background: var(--ss-gradient-spark); opacity: 0.14; }
.finalcta__inner { position: relative; }
.finalcta h2 { font-size: 42px; line-height: 1.15; font-weight: 900; letter-spacing: -0.01em; color: #fff; }
.finalcta p { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.78); margin: 16px auto 0; max-width: 520px; }
.finalcta__cta { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.finalcta__trust { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6); margin-top: 18px; }
/* Only widen the trust line (beyond the .finalcta p 520px cap) so it fits on one
   line — deliberately NOT touching font-size, so its rendered size is unchanged. */
.finalcta p.finalcta__trust { max-width: 820px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ss-navy); color: #fff; }
.footer__strip { border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer__strip-inner { max-width: var(--container-wide); margin: 0 auto; padding: 20px 32px; display: flex; gap: 28px; flex-wrap: wrap; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7); }
.footer__cols { max-width: var(--container-wide); margin: 0 auto; padding: 48px 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
/* Footer logo: white wordmark + colorful spark (logo-footer.svg), no filter. */
.footer__logo img { height: 44px; }
.footer__tag { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.6); margin-top: 16px; max-width: 260px; }
.footer__h { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.footer__list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.footer__list a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.8); }
.footer__list a:hover { color: #fff; }
.footer__legal { max-width: var(--container-wide); margin: 0 auto; padding: 0 32px 36px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.45); }

/* ============================================================
   MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(26,11,68,0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.is-open { display: flex; }
.modal__card { width: 100%; max-width: 420px; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); padding: 36px; position: relative; }
.modal__close { position: absolute; top: 16px; right: 16px; border: none; background: var(--ss-surface); width: 32px; height: 32px; border-radius: 99px; cursor: pointer; font-size: 16px; color: var(--ss-ink); }
.modal__card h3 { font-size: 26px; line-height: 1.2; font-weight: 900; margin-top: 18px; }
.modal__card p { margin: 10px 0 22px; line-height: 1.6; color: var(--ss-text-muted); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.field label { font-size: 14px; font-weight: 700; }
.field input { height: 54px; padding: 0 18px; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--ss-ink); background: var(--ss-surface); border: 2px solid transparent; border-radius: var(--radius-md); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.field input:focus { border-color: var(--ss-pink); box-shadow: 0 0 0 4px rgba(236,20,89,0.12); }
.modal__note { font-size: 12px; font-weight: 500; color: var(--ss-text-muted); text-align: center; margin-top: 14px; }
.modal__success { text-align: center; padding: 12px 0; }
.modal__check { width: 56px; height: 56px; border-radius: 99px; background: var(--ss-gradient-spark-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto; }

/* ============================================================
   SUBPAGE bits
   ============================================================ */
.pagehead { text-align: center; max-width: 760px; margin: 0 auto; padding: 64px 32px 12px; }
.pagehead h1 { font-size: 48px; line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; margin-top: 14px; text-wrap: balance; }
.pagehead p { margin: 16px auto 0; max-width: 620px; }
.steps2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.steps2 .loop__num, .steps2 b { color: var(--ss-pink); font-size: 22px; font-weight: 900; }
.steps2 h3 { font-size: 22px; font-weight: 900; margin-top: 8px; }
.steps2 p { margin-top: 8px; }
/* tabs */
.tabs { display: flex; gap: 8px; background: var(--ss-surface); padding: 6px; border-radius: 999px; width: fit-content; margin: 0 auto 28px; }
.tab { border: none; cursor: pointer; padding: 10px 24px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 14px; background: transparent; color: var(--ss-text-muted); }
.tab.is-active { background: #fff; color: var(--ss-pink); box-shadow: var(--shadow-subtle); }
.steplist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.steplist li { display: flex; gap: 16px; align-items: flex-start; }
.steplist__n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 99px; background: var(--ss-tint-purple); color: var(--ss-purple); font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.steplist__t { font-size: 16px; line-height: 1.6; font-weight: 500; }
.codebox { margin-top: 22px; padding: 16px; background: var(--ss-code-bg); border-radius: 12px; font-family: Menlo, Monaco, Consolas, monospace; font-size: 13px; font-weight: 500; color: var(--ss-code-fg); }
/* faq */
.faq { max-width: 760px; margin: 32px auto 90px; padding: 0 32px; }
.faq__item { border-bottom: 1px solid var(--ss-border); padding: 22px 0; cursor: pointer; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq__q h3 { font-size: 18px; font-weight: 700; }
.faq__plus { font-size: 22px; font-weight: 900; color: var(--ss-pink); transition: transform 0.2s ease; }
.faq__item.is-open .faq__plus { transform: rotate(45deg); }
.faq__a { font-size: 16px; line-height: 1.7; color: var(--ss-text-muted); margin-top: 12px; max-width: 640px; display: none; }
.faq__item.is-open .faq__a { display: block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav__links, .nav__connect { display: none; }
  .nav__toggle { display: block; }
  .nav.is-menu-open .nav__links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: #fff; padding: 20px 32px; gap: 18px; box-shadow: var(--shadow-card); margin: 0; }
  .hero__inner, .recipient, .proof { grid-template-columns: 1fr; gap: 30px; }
  .hero__ask { max-width: 720px; font-size: clamp(27px, 6.5vw, 42px); }
  .hero h1.hero__yes { font-size: clamp(27px, 4.5vw, 44px); }
  .opportunity { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .loop { grid-template-columns: 1fr; }
  .loop__arrow { transform: rotate(90deg); }
  .figures, .contrast { grid-template-columns: 1fr; }
  .econ { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .steps2, .recipient__points { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .ask__tail-wrap { height: 1.28em; margin-bottom: 0.08em; }
  .hero p.lead { margin-top: 12px; }
}
@media (max-width: 560px) {
  .container, .container-wide, .nav__inner, .hero__inner { padding-left: 20px; padding-right: 20px; }
  .hero__inner > div:first-child { width: 100%; max-width: 100%; min-width: 0; }
  .hero .badge { display: block; width: 100%; }
  .hero__ask { width: 100%; max-width: 100%; margin-top: 18px; font-size: clamp(20px, 6.7vw, 34px); line-height: 1.15; }
  .hero h1.hero__yes { font-size: clamp(23px, 6vw, 34px); }
  .ask__stem::before {
    position: static; right: auto; margin-right: 0.04em;
  }
  .hero h1 { font-size: 27px; }
  .section__head h2, .finalcta h2 { font-size: 30px; }
  .pagehead h1 { font-size: 34px; }
  .tiers { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .proof { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .btn:hover, .card--lift:hover { transform: none; }
  .transfer-bar__fill { transform: scaleX(1); }
  .transfer-bar__dot { left: 100%; transition: none; }
}

/* ============================================================
   ADDITIONS FOR PRODUCTION INTEGRATION
   (nav Sign in link; Connect-page setup steps & prompt boxes)
   ============================================================ */

/* Decorative grey blob behind the logo in the top-left corner (matches the
   legacy site + legal pages). Sits behind content; the nav is transparent at
   the top of the page so it shows through. */
.header-bg {
  position: absolute; z-index: -5; left: 0; top: 0;
  width: 549px; height: 591px;
  background: url('/images/hero-grey-bg-element.svg') no-repeat;
  pointer-events: none;
}
@media (max-width: 900px) {
  .header-bg { width: 369px; height: 311px; background-size: contain; }
}

/* Desktop nav: keep the centered container (so the right-side items line up
   with the page content), and nudge the left menu just far enough to clear the
   corner logo. The nudge collapses to 0 on very wide screens, where the
   centered container already starts to the right of the logo — so the menu ends
   up aligned with the page content there. (~410px clearance for the logo.) */
@media (min-width: 1261px) {
  .nav__links { margin-left: max(0px, calc(378px - (100vw - 1280px) / 2)); }
}
/* Below that the full nav + big logo can't coexist — collapse to the hamburger,
   and shrink the corner logo (matches the Terms/Privacy mobile logo size). */
@media (max-width: 1260px) {
  .nav__links, .nav__connect { display: none; }
  .nav__toggle { display: block; }
  .nav.is-menu-open .nav__links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: #fff; padding: 20px 32px; gap: 18px; box-shadow: var(--shadow-card); margin: 0; }
  .nav__logo { left: 20px; top: 14px; }
  .nav__logo img { height: 80px; }
}
/* Narrow phones: the full-size logo + long CTA can't share the bar, so drop the
   sticky CTA (the hero CTA carries it) — matches the legacy mobile header. */
@media (max-width: 600px) {
  .nav .btn--primary { display: none; }
}

/* Guard against horizontal overflow on small screens (keeps the sticky nav's
   right edge — and its hamburger — on screen). `clip` doesn't create a scroll
   container, so position:sticky is unaffected. */
body { overflow-x: clip; }

/* Stacked hero on mobile: force the single grid track to be allowed to shrink
   (grid tracks default to an `auto`/min-content floor, which the 460px hero
   mockup was using to push the whole row — and the nav — past the viewport).
   `minmax(0, 1fr)` removes that floor; the mockup is then capped so its
   floating badges still fit on screen. */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__inner > * { min-width: 0; }
  .hero__visual { max-width: 100%; }
  .handoff { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* Low-emphasis "Sign in" link in the header — account/management entry. */
.nav__signin { font-size: 14px; font-weight: 600; color: var(--ss-text-muted); white-space: nowrap; }
.nav__signin:hover { color: var(--ss-ink); }

/* Connect page: note under a step, and the copy-able starter prompts. */
.steplist__t code {
  background: var(--ss-code-bg); color: var(--ss-code-fg);
  padding: 2px 7px; border-radius: 6px;
  font-family: Menlo, Monaco, Consolas, monospace; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.steplist__note { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ss-text-muted); font-style: italic; }
.codebox__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ss-text-muted); }

.prompt { position: relative; margin-top: 16px; padding: 18px 20px; background: var(--ss-tint-purple); border: 1px solid var(--ss-border); border-radius: 12px; }
.prompt__label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ss-purple); }
.prompt__row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.prompt__text { flex: 1; font-family: Menlo, Monaco, Consolas, monospace; font-size: 14px; line-height: 1.5; color: var(--ss-ink); }
.prompt__copy { flex-shrink: 0; border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 999px; background: var(--ss-purple); color: #fff; }
.prompt__copy:hover { background: var(--ss-ink); }
.prompt__copy.is-copied { background: #2e9b73; }
@media (max-width: 560px) {
  .prompt__row { flex-direction: column; align-items: stretch; }
  .prompt__copy { width: 100%; }
}

@media (max-width: 900px) {
  .nav__signin { display: none; }
  .nav.is-menu-open .nav__signin { display: block; }
}