/* tellet-home: split stage. Two grounds held for the whole page, one seam, one accent that belongs to one side. */

@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  /* Tellet side (the page ground) */
  --sc-canvas:      #0A1220;
  --sc-surface:     #111C2E;
  --sc-ink:         #EAF1F8;
  --sc-ink-soft:    #8FA6BD;
  --sc-accent:      #1A8FE3;
  --sc-accent-ink:  #06101C;
  --sc-shadow-color: 215 45% 3%;
  /* Your-team side */
  --l-canvas:       #15120F;
  --l-surface:      #1E1A16;
  --l-ink:          #F3EDE4;
  --l-ink-soft:     #A69C90;

  --sc-font-display: "Satoshi", system-ui, sans-serif;
  --sc-font-text:    "Satoshi", system-ui, sans-serif;
  --sc-section: clamp(3.5rem, 6vw, 7rem);
  --sc-gutter:  clamp(1.25rem, 4vw, 4.5rem);
  --sc-t-xl:  clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  --seam-gap: clamp(1.5rem, 3.5vw, 4rem);
  --split: 0.5;            /* the seam, as a fraction of the viewport. Static until the close collapses it. */
  --page-p: 0;
}

.sc-display { font-weight: 700; letter-spacing: -0.04em; }
.sc-display--lg { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem); }
.sc-display--md { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.75rem); letter-spacing: -0.03em; }
.sc-body { font-size: var(--sc-t-base); }
.sc-small { font-size: var(--sc-t-sm); }
.sc-label { font-family: var(--sc-font-text); font-weight: 700; }
.accent { color: var(--sc-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
strong { color: var(--sc-ink); font-weight: 700; }

/* ------------------------------------------------------------ grounds -- */
body { background: var(--sc-canvas); }
.ground--l {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: calc(var(--split) * 100vw);
  background: var(--l-canvas);
  z-index: 0; pointer-events: none;
}
main { position: relative; z-index: 1; }

/* Both columns hug the seam. Left content aligns to the seam from the left, right content from the right. */
.row, .stage { display: grid; grid-template-columns: 1fr 1fr; }
/* .stage height comes from the engine's .sc-stage (100svh); never restate it here. */
.side { min-width: 0; padding: var(--sc-section) var(--sc-gutter); }
.side--l { padding-right: var(--seam-gap); --sc-ink: var(--l-ink); --sc-ink-soft: var(--l-ink-soft); --sc-canvas: var(--l-canvas); --sc-surface: var(--l-surface); color: var(--sc-ink); }
.side--r { padding-left: var(--seam-gap); color: var(--sc-ink); }
.side--l strong { color: var(--l-ink); }
.side--tight { padding-block: var(--sc-5); }
.col { max-width: 34rem; }
.side--l .col { margin-left: auto; }
.sc-stack > * + * { margin-top: var(--sc-4); }

/* ------------------------------------------------------------ chrome --- */
.seam {
  position: fixed; top: 0; bottom: 0;
  left: calc(var(--split) * 100vw);
  width: 0; z-index: var(--sc-z-chrome);
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; font-weight: 700;
}
.seam__line { position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: color-mix(in oklab, #fff 18%, transparent); }
.seam__fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--sc-accent); transform-origin: 50% 0; transform: scaleY(var(--page-p)); }
.seam__l, .seam__r, .seam__clock { padding: 0.3rem 0.55rem; border-radius: var(--sc-r-sm); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.seam__l { position: absolute; right: 0.6rem; top: var(--sc-4); white-space: nowrap; color: var(--l-ink); background: color-mix(in oklab, var(--l-canvas) 78%, transparent); }
.seam__r { position: absolute; left: 0.6rem; top: var(--sc-4); background: color-mix(in oklab, var(--sc-canvas) 78%, transparent); }
.seam__r img { height: 1.5rem; width: auto; max-width: none; display: block; }
.seam__clock { position: absolute; left: 0.6rem; bottom: var(--sc-4); white-space: nowrap; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; background: color-mix(in oklab, var(--sc-canvas) 78%, transparent); }
.seam__clock:empty { display: none; }
.seam__clock.is-clock { color: var(--sc-accent); font-size: var(--sc-t-sm); letter-spacing: 0.04em; }
.seam__bar { display: none; }

/* ------------------------------------------------------------ scroll cue */
.scrollcue {
  position: fixed; left: calc(var(--split) * 100vw); bottom: 3.75rem; z-index: calc(var(--sc-z-chrome) + 1);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.6rem 0.95rem 0.45rem; border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, var(--sc-canvas) 74%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sc-e2), 0 0 0 1px color-mix(in oklab, var(--sc-accent) 35%, transparent);
  color: var(--sc-accent); text-decoration: none;
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.scrollcue svg { animation: cue-bounce 1.7s var(--sc-ease-in-out) infinite; }
.scrollcue:hover { color: #3AA0EC; }
.scrollcue.is-gone { opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }
@keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scrollcue svg { animation: none; } }

/* ------------------------------------------------------------ hero ----- */
.hero__l { position: relative; overflow: clip; display: flex; flex-direction: column; justify-content: flex-start; }
.hero__l .sc-stage__poster, .hero__l video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__idle { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 520ms var(--sc-ease-out); }
.hero__idle.is-live { opacity: 1; }
.hero__scrim { --sc-scrim-a: 84%; }
.hero__copy { position: relative; z-index: 2; margin-top: var(--sc-8); }
.hero__copy h1 { max-width: 12ch; }
.hero__r { display: flex; flex-direction: column; justify-content: flex-start; }
.hero__r .col { margin-top: var(--sc-8); }
.hero__we { color: var(--sc-accent); }
.hero__sub { margin-top: var(--sc-6); font-size: var(--sc-t-lg); line-height: 1.4; color: var(--sc-ink); max-width: 28rem; }
.hero__sub p { margin: 0; }
.hero__sub p + p { margin-top: var(--sc-1); }
.hero__cta { margin-top: var(--sc-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.5rem; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out);
}
.btn__ico { width: 1.15rem; height: 1.15rem; }
.btn:hover { background: #3AA0EC; }
.btn:active { transform: translateY(1px) scale(0.98); }
.link { color: var(--sc-ink); font-weight: 500; text-decoration-color: var(--sc-accent); text-decoration-thickness: 1.5px; }
.link:hover { color: var(--sc-accent); }

/* ------------------------------------------------------------ wall ----- */
.wall__l { display: flex; flex-direction: column; min-height: 0; }
.wall__head { flex: none; margin-bottom: var(--sc-6); }
.wall__head p { margin-top: var(--sc-3); }
.wall__viewport { flex: 1 1 auto; min-height: 0; overflow: hidden; margin-left: auto; width: 100%; max-width: 40rem;
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); }
.wall__track { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start;
  transform: translate3d(0, calc(var(--sc-p, 0) * var(--wall-travel, 0px) * -1), 0); will-change: transform; }
.wall__col { display: flex; flex-direction: column; gap: 0.75rem; }
.wall__col--b { padding-top: 3rem; }
.fb { background: var(--l-surface); border-radius: var(--sc-r-md); padding: 0.9rem 1rem; box-shadow: var(--sc-e1), inset 0 1px 0 color-mix(in oklab, #fff 6%, transparent); font-size: 0.85rem; }
.fb header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; }
.fb header img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.fb header div { display: flex; flex-direction: column; line-height: 1.2; }
.fb header b { color: var(--l-ink); }
.fb header span { color: var(--l-ink-soft); font-size: 0.72rem; }
.fb p { margin: 0; color: color-mix(in oklab, var(--l-ink) 84%, var(--l-canvas)); line-height: 1.45; text-wrap: pretty; }
.fb footer { display: flex; justify-content: space-between; margin-top: 0.6rem; font-size: 0.72rem; color: var(--l-ink-soft); }
.fb__react { display: inline-flex; align-items: center; gap: 0.25rem; }
.fb__like, .fb__love { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 50%; }
.fb__like { background: #1877F2; }
.fb__love { background: #ED4956; margin-left: -0.35rem; }
.wall__r { display: flex; align-items: center; }
.facts { list-style: none; margin: 0; padding: 0; width: 100%; }
.facts li { display: flex; align-items: baseline; gap: 0.9rem; padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline); }
.facts li:first-child { border-top: 0; }
.facts b { font-size: var(--sc-t-2xl); font-weight: 700; letter-spacing: -0.03em; color: var(--sc-accent); min-width: 4.5ch; font-variant-numeric: tabular-nums; }
.facts span { font-size: var(--sc-t-lg); color: var(--sc-ink); }

/* ------------------------------------------------------------ funnel --- */
.funnel__claim { color: var(--l-ink); }
.sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.sources li { display: flex; flex-direction: column; font-size: 0.78rem; line-height: 1.25; padding: 0.4rem 0.6rem; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm); }
.sources b { color: var(--sc-ink); }
.sources span { color: var(--sc-ink-soft); }
.fig { padding-top: var(--sc-5); }
.fig__n { line-height: 0.95; }
.fig__t { margin: 0.25rem 0 0; font-size: var(--sc-t-lg); font-weight: 700; color: var(--sc-ink); }
.fig__t--lg { font-size: var(--sc-t-xl); letter-spacing: -0.02em; }
.fig__s { margin-top: 0.25rem; }
.fig--out { border-top: 1px solid var(--sc-hairline); }
.fig--in { border-top: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent); }
.breakdown { list-style: none; margin: var(--sc-5) 0 0; padding: 0; }
.breakdown li { display: flex; gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); }
.breakdown b { min-width: 3.2ch; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.breakdown + p { margin-top: var(--sc-4); }
.checks { list-style: none; margin: var(--sc-5) 0 0; padding: 0; }
.checks li { position: relative; padding: 0.45rem 0 0.45rem 1.6rem; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink); }
.checks li::before { content: ""; position: absolute; left: 0.1rem; top: 0.8rem; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--sc-accent); border-bottom: 2px solid var(--sc-accent); transform: rotate(-45deg); }
.handoff { margin-top: var(--sc-5); font-weight: 700; color: var(--sc-accent); }
.handoff::before { content: "\2190\00a0"; }

/* ------------------------------------------------------------ shift ---- */
.shift__l, .shift__r { display: flex; align-items: center; }
.shift__q, .shift__a { font-style: italic; font-weight: 500; }
.shift__s { margin-top: var(--sc-6); color: var(--sc-ink-soft); }

/* ------------------------------------------------------------ pairs ---- */
.pair .side { padding-block: var(--sc-7); }
.pair__l { color: var(--l-ink-soft); font-weight: 500; }
.pair__n { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); color: var(--sc-ink-soft); margin: 0; }
.pair__h { font-size: var(--sc-t-xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 0.35rem 0 0; }
.pair__k { font-weight: 700; color: var(--sc-accent); text-wrap: pretty; }
.pair__k--i { font-style: italic; }
.changes .row + .row { border-top: 1px solid var(--sc-hairline); }

/* ------------------------------------------------------------ the call - */
/* .call is the stage: the engine positions it (sticky), so nothing here may set position on it. */
.call__l { display: flex; flex-direction: column; }
.call__r { display: flex; flex-direction: column; position: relative; }
.call__head { margin-top: var(--sc-4); }
.call__head p { margin-top: var(--sc-4); }
.call__player { margin-top: var(--sc-3); max-width: 21rem; }
.call__player figcaption p { font-size: 0.8rem; line-height: 1.4; }
.call__player figcaption h3 { font-size: var(--sc-t-base); }
.vid { margin: 0; }
.vid video { width: 100%; height: auto; border-radius: var(--sc-r-md); background: #000; box-shadow: var(--sc-e2); }
.vid--featured video { box-shadow: var(--sc-e3), 0 0 0 1px color-mix(in oklab, var(--sc-accent) 40%, transparent); }
.vid figcaption { margin-top: var(--sc-3); }
.vid figcaption h3 { margin: 0.35rem 0 0; font-size: var(--sc-t-lg); }
.vid figcaption p { margin-top: 0.25rem; }
.tag { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--sc-r-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; background: color-mix(in oklab, var(--sc-accent) 18%, transparent); color: var(--sc-accent); margin-right: 0.35rem; }
.tag--soft { background: color-mix(in oklab, var(--sc-ink) 10%, transparent); color: var(--sc-ink-soft); }
.side--l .tag--soft { color: var(--l-ink-soft); }

.turns {
  position: absolute; left: 0; right: 0; bottom: 4.6rem; top: var(--turns-top, 52vh);
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; z-index: 2; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
}
.turns__list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 0; align-content: end; align-self: end; list-style: none; margin: 0; padding: 0 var(--sc-gutter); transition: transform 460ms var(--sc-ease-out); will-change: transform; }
.turn { opacity: 0; visibility: hidden; transform: translate3d(0, 12px, 0); transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out), visibility 0s linear 420ms; pointer-events: auto; }
.turn.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.turn--l { grid-column: 1; justify-self: end; margin-right: var(--seam-gap); max-width: min(26rem, 100%); }
.turn--a { grid-column: 2; justify-self: start; margin-left: var(--seam-gap); max-width: min(30rem, 100%); }
.turn--l + .turn--l { margin-top: -0.35rem; }
.turn--a + .turn--a { margin-top: -0.35rem; }
.turn button {
  display: block; width: 100%; text-align: left; cursor: pointer; border: 0; border-radius: var(--sc-r-md);
  padding: 0.75rem 1rem 0.85rem; font-size: 0.95rem; line-height: 1.45; text-wrap: pretty;
  box-shadow: var(--sc-e1), inset 0 1px 0 color-mix(in oklab, #fff 7%, transparent);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out);
}
.turn button:active { transform: scale(0.985); }
.turn--l button { background: var(--l-surface); color: var(--l-ink); }
.turn--a button { background: var(--sc-surface); color: var(--sc-ink); }
.turn--a button { box-shadow: var(--sc-e1), inset 0 1px 0 color-mix(in oklab, var(--sc-accent) 28%, transparent); }
.turn button:hover { background: color-mix(in oklab, var(--sc-surface) 80%, #fff 6%); }
.turn--l button:hover { background: color-mix(in oklab, var(--l-surface) 80%, #fff 6%); }
.turn__meta { display: flex; gap: 0.6rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.3rem; font-variant-numeric: tabular-nums; }
.turn--l .turn__meta { color: var(--l-ink-soft); }
.turn--a .turn__meta { color: var(--sc-accent); }
.turn.is-now button { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.turn--l.is-now button { outline-color: var(--l-ink-soft); }

.wave { position: absolute; left: 5.6rem; right: var(--sc-gutter); bottom: 1.1rem; height: 2rem; }
.wave svg { width: 100%; height: 100%; display: block; }
.wave .w-base rect { fill: color-mix(in oklab, var(--sc-ink) 22%, transparent); }
.wave .w-play rect { fill: var(--sc-accent); }
.wave__t { position: absolute; right: 0; bottom: 100%; margin-bottom: 0.3rem; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ more calls */
.callcard .side { padding-block: var(--sc-6); }
.callcard__h { font-size: var(--sc-t-xl); letter-spacing: -0.02em; margin: 0.5rem 0 0; }
.callcard .vid { max-width: 30rem; }
.calls .row + .row { border-top: 1px solid var(--sc-hairline); }

/* ------------------------------------------------------------ results -- */
.results__side { font-size: var(--sc-t-lg); font-weight: 700; margin: 0; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5) var(--sc-4); margin: var(--sc-6) 0 0; }
.metrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metrics div { border-top: 1px solid var(--sc-hairline); padding-top: 0.75rem; }
.metrics dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.metrics dd { margin: 0.25rem 0 0; font-size: var(--sc-t-xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.metrics + .results__side { margin-top: var(--sc-7); }

/* ------------------------------------------------------------ quote ---- */
.quote__fig { margin: 0; }
.quote__portrait { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: var(--sc-e2); }
.quote__q { margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -0.01em; font-weight: 500; text-wrap: pretty; }
.quote__q::before { content: "\201C"; }
.quote__q::after { content: "\201D"; }
.quote__fig figcaption { margin-top: var(--sc-5); display: flex; flex-direction: column; }
.quote__fig figcaption span { color: var(--l-ink-soft); font-size: var(--sc-t-sm); }
.metric-big { display: flex; flex-direction: column; margin: 0; }
.metric-big span { font-size: var(--sc-t-lg); color: var(--sc-ink); }
.quote__logo { height: 2.25rem; width: auto; opacity: 0.55; filter: grayscale(1) brightness(1.6); }

/* ------------------------------------------------------------ how ------ */
.how .side--l { position: relative; }
.how .side--l .col { position: sticky; top: var(--sc-8); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding: var(--sc-5) 0 var(--sc-5) 3.5rem; border-top: 1px solid var(--sc-hairline); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps__n { position: absolute; left: 0; top: var(--sc-5); font-size: var(--sc-t-sm); font-weight: 700; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.steps li:first-child .steps__n { top: 0; }
.steps h3 { margin: 0; font-size: var(--sc-t-xl); letter-spacing: -0.02em; }
.steps p { margin-top: var(--sc-3); }
.steps .tag { margin-top: var(--sc-4); white-space: normal; }

/* ------------------------------------------------------------ faq ------ */
.faq__item { border-top: 1px solid var(--sc-hairline); }
.faq__item .side { padding-block: 0; }
.faq__q { display: flex; align-items: baseline; gap: 0.9rem; width: 100%; background: none; border: 0; padding: var(--sc-5) 0; text-align: left; cursor: pointer; font-size: var(--sc-t-lg); font-weight: 700; letter-spacing: -0.01em; color: var(--l-ink); }
.faq__n { font-size: var(--sc-t-xs); color: var(--l-ink-soft); font-variant-numeric: tabular-nums; }
.faq__q::after { content: "+"; margin-left: auto; color: var(--l-ink-soft); font-weight: 400; transition: transform var(--sc-d-base) var(--sc-ease-out); }
.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sc-d-slow) var(--sc-ease-out); }
.faq__a > div { overflow: hidden; }
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__a p { padding: var(--sc-5) 0; }

/* ------------------------------------------------------------ founder -- */
.founder__fig { margin: var(--sc-6) 0 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sc-5); align-items: end; }
.founder__fig img { width: 100%; height: auto; border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); }
.founder__fig figcaption { display: flex; flex-direction: column; font-size: var(--sc-t-sm); color: var(--l-ink-soft); }
.founder__fig figcaption b { color: var(--l-ink); font-size: var(--sc-t-base); }
.founder__strong { font-weight: 700; color: var(--l-ink); font-size: var(--sc-t-lg); }
.founder__strong--r { color: var(--sc-ink); font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.3; }
.founder .side--r .col { position: sticky; top: var(--sc-8); }

/* ------------------------------------------------------------ close ---- */
.close { grid-template-columns: calc(50% * (1 - var(--sc-p, 0))) minmax(0, 1fr); }
.close__l { overflow: hidden; display: flex; align-items: center; }
.close__paid { white-space: normal; min-width: 14rem; }
.close__r { display: flex; flex-direction: column; justify-content: center; position: relative; }
.close__cta { margin-top: var(--sc-7); }
.close__cta p { margin-top: var(--sc-5); max-width: 32rem; }
.foot { position: absolute; left: var(--seam-gap); right: var(--sc-gutter); bottom: var(--sc-5); display: flex; align-items: center; gap: var(--sc-6); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot img { height: 1.1rem; width: auto; max-width: none; opacity: 0.8; }
.foot nav { display: flex; gap: var(--sc-4); margin-left: auto; }
.foot a { color: var(--sc-ink-soft); text-decoration: none; }
.foot a:hover { color: var(--sc-ink); }
.foot p { margin: 0; }

/* ------------------------------------------------------------ reduced -- */
@media (prefers-reduced-motion: reduce) {
  .wall__track { transform: none; }
  .wall__viewport { overflow-y: auto; }
  .turn { transform: none; transition: opacity 220ms; }
  .turns__list { transition: none; }
}

/* ------------------------------------------------------------ phone ---- */
@media (max-width: 860px) {
  :root { --seam-gap: 1.25rem; --sc-section: 3rem; }
  .sc-display--lg { font-size: clamp(1.9rem, 1.2rem + 4.5vw, 2.6rem); }
  .sc-display--md { font-size: clamp(1.45rem, 1rem + 3vw, 2rem); }
  .ground--l { display: none; }
  .row { display: block; }
  .side { padding-inline: var(--sc-gutter); }
  .side--l { background: var(--l-canvas); }
  .side--r { background: var(--sc-canvas); }
  .side--l .col { margin-left: 0; }
  .side--tight { padding-block: var(--sc-4); }

  /* The seam becomes a balance bar along the bottom edge. */
  .seam { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 2.75rem;
    background: color-mix(in oklab, var(--sc-canvas) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--sc-hairline); }
  .seam__line { display: none; }
  .seam__l, .seam__r, .seam__clock { padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .seam__l { right: auto; left: var(--sc-4); top: 0.85rem; }
  .seam__r { left: auto; right: var(--sc-4); top: 0.7rem; }
  .seam__r img { height: 1.1rem; }
  .seam__clock { left: 50%; bottom: auto; top: 0.85rem; transform: translateX(-50%); }
  .seam__bar { display: block; position: absolute; bottom: 0; height: 3px; }
  .seam__bar--l { left: 0; width: calc(var(--split) * 100%); background: var(--l-ink-soft); }
  .seam__bar--r { left: calc(var(--split) * 100%); right: 0; background: var(--sc-accent); }
  .scrollcue { left: 50%; bottom: 3.4rem; padding: 0.45rem 0.8rem 0.35rem; gap: 0.1rem; }
  .scrollcue svg { width: 15px; height: 15px; }
  .hero__r { padding-bottom: 6rem; }

  .stage { grid-template-columns: 1fr; }
  .hero { grid-template-rows: 1fr 1fr; }
  .hero__copy { margin-top: var(--sc-4); }
  .hero__scrim { --sc-scrim-a: 95%; }
  .hero__copy h1 { max-width: none; }
  .hero__r .col { margin-top: 0; }
  .hero__r { justify-content: center; }
  .hero__sub { margin-top: var(--sc-4); font-size: var(--sc-t-base); }
  .hero__cta { margin-top: var(--sc-5); gap: var(--sc-3) var(--sc-5); }

  .wall { grid-template-rows: 1fr auto; }
  .wall__l { padding-bottom: 0; }
  .wall__head { margin-bottom: var(--sc-4); }
  .wall__head p { display: none; }
  .wall__track { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .wall__col--b { padding-top: 1.5rem; }
  .fb { font-size: 0.72rem; padding: 0.6rem 0.7rem; }
  .fb footer { display: none; }
  .wall__r { padding-block: var(--sc-4) 3.5rem; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sc-4); }
  .facts li { padding: 0.35rem 0; gap: 0.5rem; }
  .facts li:nth-child(2) { border-top: 0; }
  .facts b { font-size: var(--sc-t-lg); min-width: 3.5ch; }
  .facts span { font-size: var(--sc-t-sm); }

  .shift { grid-template-rows: 1fr 1fr; }

  .call { grid-template-rows: auto 1fr; }
  .call__l { padding-bottom: var(--sc-3); }
  .call__head { margin-top: 0; }
  .call__head h2 { font-size: clamp(1.4rem, 1rem + 2.5vw, 1.8rem); }
  .call__head p { display: none; }
  .call__r { padding-top: var(--sc-3); }
  .call__player { max-width: 19rem; margin-top: 0; }
  .call__player figcaption h3 { font-size: var(--sc-t-sm); margin-top: 0.2rem; }
  .vid figcaption p { display: none; }
  .vid--featured video { border-radius: var(--sc-r-sm); }
  .turns { top: var(--turns-top, 55svh); bottom: 4.6rem; grid-template-columns: 1fr; }
  .turns__list { grid-template-columns: 1fr; padding: 0 var(--sc-4); }
  .turn--l { grid-column: 1; justify-self: start; margin: 0 15% 0 0; }
  .turn--a { grid-column: 1; justify-self: end; margin: 0 0 0 15%; }
  .turn button { font-size: 0.85rem; padding: 0.55rem 0.75rem 0.65rem; }
  .wave { left: var(--sc-4); right: var(--sc-4); bottom: 3.2rem; height: 1.2rem; }

  .metrics { grid-template-columns: 1fr 1fr; }
  .how .side--l .col, .founder .side--r .col { position: static; }
  .founder__fig { grid-template-columns: 6rem 1fr; }
  .faq__q { font-size: var(--sc-t-base); padding: var(--sc-4) 0; }
  .faq__a p { padding: var(--sc-3) 0 var(--sc-5); }

  .close { grid-template-columns: 1fr; grid-template-rows: calc(40% * (1 - var(--sc-p, 0))) minmax(0, 1fr); }
  .close__l { padding-block: 0; }
  .close__r { justify-content: center; padding-bottom: 7rem; }
  .foot { left: var(--sc-gutter); bottom: 3.75rem; flex-wrap: wrap; gap: var(--sc-3) var(--sc-4); }
  .foot nav { margin-left: 0; }
  main { padding-bottom: 0; }
}

/* ------------------------------------------------------------ site footer + floating WhatsApp (ported from the live layout) */
.foot { flex-wrap: wrap; align-items: flex-start; gap: var(--sc-5) var(--sc-8); }
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.foot__brand img { height: 1.1rem; width: auto; }
.foot__brand p { margin: 0; }
.foot__col { display: flex; flex-direction: column; gap: 0.3rem; }
.foot__h { margin: 0 0 0.15rem; color: var(--sc-ink); font-weight: 700; }
.foot__rights { flex-basis: 100%; margin: 0; padding-top: var(--sc-3); border-top: 1px solid var(--sc-hairline); }
.wa {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: calc(var(--sc-z-chrome) + 1);
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 700; font-size: var(--sc-t-sm); text-decoration: none;
  box-shadow: var(--sc-e3), var(--sc-edge); transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out);
}
.wa svg { width: 1.3rem; height: 1.3rem; }
.wa:hover { background: #3AA0EC; transform: translateY(-1px); }
.wa:active { transform: translateY(1px) scale(0.98); }
@media (max-width: 860px) {
  .wa { right: 0.9rem; bottom: 3.6rem; padding: 0.6rem; border-radius: 50%; }
  .wa span { display: none; }
  .foot { bottom: 3.5rem; gap: var(--sc-3) var(--sc-6); }
  .foot__rights { padding-top: 0.5rem; }
  .close__r { padding-bottom: 14rem; }
}