/* ==========================================================================
   SPRK Integrations - landing page layout
   Rail (hero + leak + systems with one sticky phone), phone, lower sections.
   ========================================================================== */

/* ---- Rail ---------------------------------------------------------------- */
.rail {
  --dock-w: clamp(320px, 30vw, 400px);
  --phone-h: min(760px, max(460px, calc(56svh + 140px))); /* grows with tall screens */
  --phone-w: calc(var(--phone-h) * 0.49);
  --dock-h: calc(var(--phone-h) + 50px); /* phone + 18px gap + 32px controls */
  --area-h: calc(100svh - var(--header-h)); /* the viewport below the fixed header */
  position: relative; isolation: isolate;
  overflow: clip; /* keeps the phone glow inside the rail; clip (not hidden) keeps the phone sticky */
}
.rail-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--dock-w); column-gap: clamp(40px, 6vw, 104px); }
.rail-main { min-width: 0; }
.rail-side { position: relative; }
.phone-dock { position: sticky; top: max(calc(var(--header-h) + 8px), calc(var(--header-h) + (var(--area-h) - var(--dock-h)) / 2)); display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* Hero backdrop: faint grid, masked to fade out below the hero, plus the one ambient glow */
.rail-backdrop { position: absolute; inset: 0 0 auto; height: 118svh; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient { position: absolute; width: 1100px; height: 1100px; left: 48%; top: -44%; border-radius: 50%; background: radial-gradient(closest-side, rgb(249 115 22 / 0.13), rgb(249 115 22 / 0.04) 55%, transparent 72%); will-change: transform; }
.motion-ok .ambient { animation: ambient 18s var(--ease-inout) infinite alternate; }
.ambient.is-paused, .tab-hidden .ambient { animation-play-state: paused; }
@keyframes ambient { from { transform: translate3d(-6%, 0, 0) scale(1); opacity: 0.85; } to { transform: translate3d(4%, 6%, 0) scale(1.12); opacity: 1; } }

/* ---- Hero ---------------------------------------------------------------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 40px) 0 72px; }
.hero-eyebrow { width: fit-content; }
.hero-title { margin-top: 28px; font: 700 var(--fs-h1)/1.02 var(--font-display); letter-spacing: -0.035em; }
.hero-title .ln, .hero-title .ln > span { display: block; }
.sheen { position: relative; display: inline-block; color: var(--accent-ink); }
.sheen::after { content: attr(data-sheen) / ""; position: absolute; inset: 0; color: #fff7ed; pointer-events: none; opacity: 0; -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%); mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.hero-sub { margin-top: 28px; max-width: 35em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--muted-2); text-wrap: pretty; }
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); }
.hero-note svg { width: 16px; height: 16px; color: var(--accent-ink); }

/* Hero entrance: CSS-driven so the headline (LCP) never waits on JavaScript */
.motion-ok .hero-eyebrow { animation: fade-in 700ms var(--ease-expo) 40ms both; }
.motion-ok .hero-sub { animation: rise 800ms var(--ease-expo) 300ms both; }
.motion-ok .hero-actions { animation: rise 800ms var(--ease-expo) 380ms both; }
.motion-ok .hero-note { animation: rise 800ms var(--ease-expo) 450ms both; }
.motion-ok .sheen::after { animation: sheen 800ms var(--ease-inout) 700ms both; }
@media (min-width: 960px) {
  .motion-ok .hero-title .ln > span { animation: line-rise 900ms var(--ease-expo) both; animation-delay: calc(60ms + var(--i, 0) * 90ms); }
  .motion-ok .hero-stage { animation: phone-in 1000ms var(--ease-expo) 340ms both; }
  .motion-ok .phone-controls { animation: fade-in 600ms var(--ease-expo) 800ms both; }
}
/* An unmasked rise: every line is readable (and counts as the LCP) from the first paint. */
@keyframes line-rise { from { transform: translate3d(0, 0.3em, 0); } to { transform: none; } }
@keyframes phone-in { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes sheen { 0% { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; -webkit-mask-position: 0% 0; mask-position: 0% 0; } }

/* ---- Leak statement ------------------------------------------------------ */
.leak { padding: clamp(72px, 12vh, 150px) 0 clamp(96px, 16vh, 190px); }
.leak-title { display: flex; align-items: center; gap: 10px; font: 600 var(--fs-eyebrow)/1.3 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.leak-title::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.7; }
.leak-body { margin-top: 28px; max-width: 24em; font: 500 clamp(26px, 2.6vw, 38px)/1.28 var(--font-display); letter-spacing: -0.022em; color: var(--text); text-wrap: pretty; }
.leak-body strong { font-weight: 600; }

/* ---- Systems ------------------------------------------------------------- */
/* Without JavaScript (and on phones) the five systems are stacked blocks. On
   desktop with JavaScript they become one pinned stage beside the pinned phone:
   the heading plus a list whose open item follows the scroll. */
.systems { --sys-step: clamp(340px, 48svh, 600px); padding-bottom: clamp(24px, 6vh, 64px); }
.sys-head { max-width: 640px; }
.sys-head .h2 { margin-top: 20px; }
.sys-head .lead { margin-top: 20px; }
.sys { position: relative; padding-top: clamp(48px, 8vh, 80px); }
.sys-inner { max-width: 560px; }
.sys-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sys-num { font: 500 13px/1 var(--font-display); letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 22px; transition: color var(--t-small) var(--ease-quart); }
.sys.is-open .sys-num { color: var(--accent-ink); }
.sys-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--border-strong); background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0)); color: var(--accent-ink); }
.sys-ic svg { width: 21px; height: 21px; }
.sys h3 { font: 600 clamp(28px, 2.8vw, 40px)/1.08 var(--font-display); letter-spacing: -0.028em; text-wrap: balance; }
.sys-link { border-radius: 6px; }
@media (hover: hover) { .sys-link:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--border-hover); } }
.flag { display: inline-flex; align-items: center; margin-left: 12px; padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); font: 600 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 0.5em; }
.sys-out { margin-top: 16px; font: 500 clamp(19px, 1.55vw, 22px)/1.4 var(--font-display); letter-spacing: -0.012em; color: var(--text); }
.sys-desc { margin-top: 12px; max-width: 48ch; color: var(--muted-2); line-height: 1.65; }
.sys-chips, .sys-spacer, .sys-bar { display: none; }

@media (min-width: 960px) {
  /* The stage pins while the spacer scrolls past: centered below the header when
     it fits, otherwise with the list centered and the heading faded out. The
     phone's column ends so both release together. Both values are set by
     landing.js (initStage) from measured heights. */
  .js .rail-side { margin-bottom: var(--side-mb, 0px); }
  .js .systems { padding-bottom: clamp(56px, 9vh, 104px); }
  .js .sys-stage { position: sticky; top: var(--stage-top, var(--header-h)); min-height: var(--dock-h); display: flex; flex-direction: column; justify-content: center; padding-block: 8px; }
  .js .sys-stage.is-compact .sys-head { filter: opacity(var(--head-o, 1)); }
  .js .sys-spacer { display: block; height: calc(5 * var(--sys-step)); }
  /* Rows never move in layout: the list reserves one description's height, the
     open description sits under its row, and later rows slide down (transforms
     only, so switching systems causes no layout shift). */
  .js .sys-list { position: relative; max-width: 640px; margin-top: clamp(24px, 4svh, 44px); display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--sys-body-h, 0px); }
  .js .sys { padding: 0; transition: transform var(--t-reveal) var(--ease-expo); }
  .js .sys.is-open ~ .sys { transform: translate3d(0, var(--sys-body-h, 0px), 0); }
  .js .sys-inner { --tx: calc(14px + 44px + 18px); position: relative; isolation: isolate; max-width: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 18px; align-items: center; padding: 14px 22px 14px 14px; }
  .js .sys-inner::before { content: ""; position: absolute; z-index: -1; inset: 0 0 calc(-1 * var(--sys-body-h, 0px)); border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(180deg, #181818, #121212); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 30px 70px -44px rgb(0 0 0 / 0.95); opacity: 0; pointer-events: none; transition: opacity var(--t-ui) var(--ease-quart); }
  .js .sys.is-open .sys-inner::before { opacity: 1; }
  /* Closed rows are dimmed by color, keeping text contrast readable (4.5:1 or more). */
  .js .sys h3, .js .sys-ic, .js .flag { transition: color var(--t-ui) var(--ease-quart), border-color var(--t-ui) var(--ease-quart), background-color var(--t-ui) var(--ease-quart); }
  .js .sys:not(.is-open) h3 { color: var(--muted); }
  .js .sys:not(.is-open) .sys-ic { color: var(--muted); border-color: var(--border); }
  .js .sys:not(.is-open) .flag { color: var(--muted-2); border-color: var(--border-strong); background: transparent; }
  .js .sys:not(.is-open) .sys-inner:hover h3, .js .sys:not(.is-open) .sys-inner:focus-within h3 { color: var(--muted-2); }
  .js .sys-meta { display: contents; }
  .js .sys-ic { grid-column: 1; grid-row: 1; width: 44px; height: 44px; border-radius: 12px; }
  .js .sys-ic svg { width: 20px; height: 20px; }
  .js .sys-num { grid-column: 3; grid-row: 1; min-width: 0; }
  .js .sys h3 { grid-column: 2; grid-row: 1; font-size: clamp(21px, 1.7vw, 27px); line-height: 1.15; letter-spacing: -0.022em; }
  .js .flag { margin-left: 10px; vertical-align: 0.22em; }
  /* The whole row is the link (it scrolls to that system). */
  .js .sys-link::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 18px; }
  .js .sys-link:focus-visible { outline: none; }
  .js .sys-link:focus-visible::after { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
  @media (hover: hover) { .js .sys-link:hover { color: inherit; text-decoration: none; } }
  /* Closed descriptions stay readable to assistive tech; they are only faded out. */
  .js .sys-body { position: absolute; top: calc(100% - 6px); left: var(--tx); right: 22px; opacity: 0; pointer-events: none; transform: translate3d(0, -6px, 0); transition: opacity 160ms var(--ease-quart), transform var(--t-reveal) var(--ease-expo); }
  .js .sys.is-open .sys-body { opacity: 1; pointer-events: auto; transform: none; transition: opacity 320ms var(--ease-quart) 110ms, transform var(--t-reveal) var(--ease-expo) 60ms; }
  .js .sys-body-in { display: flex; flex-direction: column; height: var(--sys-body-h, auto); padding-bottom: 16px; }
  .js .sys-list.is-measuring .sys-body-in { height: auto; }
  .js .sys-out { margin-top: 2px; font-size: clamp(17px, 1.3vw, 19px); }
  .js .sys-desc { margin: 8px 0 18px; max-width: 52ch; font-size: 15.5px; line-height: 1.6; }
  .js .sys-bar { display: block; position: relative; flex: 0 0 auto; height: 2px; margin-top: auto; border-radius: 2px; background: #2a2a2a; overflow: hidden; }
  .js .sys-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); transform: scaleX(var(--p, 0)); transform-origin: left; }
}
/* Laptop-height screens: a tighter list so it pins comfortably beside the phone. */
@media (min-width: 960px) and (max-height: 900px) {
  .js .sys-list { gap: 2px; }
  .js .sys-inner { --tx: calc(14px + 40px + 16px); padding-block: 10px; column-gap: 16px; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .js .sys-ic { width: 40px; height: 40px; border-radius: 11px; }
  .js .sys h3 { font-size: clamp(20px, 1.6vw, 24px); }
  .js .sys-out { font-size: 17px; }
  .js .sys-desc { margin-bottom: 14px; font-size: 15px; line-height: 1.55; }
}

/* ---- Phone ------------------------------------------------------------------ */
.hero-stage { position: relative; }
.phone-glow { position: absolute; inset: -18% -34%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(249 115 22 / 0.12), rgb(249 115 22 / 0.035) 55%, transparent 74%); pointer-events: none; }
.phone { position: relative; width: var(--phone-w); height: var(--phone-h); perspective: 1400px; }
.phone-tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.phone-frame { position: absolute; inset: 0; padding: calc(var(--phone-w) * 0.034); border-radius: calc(var(--phone-w) * 0.165); background: linear-gradient(155deg, #242424 0%, #0d0d0d 38%, #060606 100%); border: 1px solid #333; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 1px rgb(0 0 0 / 0.7), 0 48px 96px -36px rgb(0 0 0 / 0.95), 0 28px 70px -44px rgb(249 115 22 / 0.45); }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--phone-w) * 0.135); background: radial-gradient(130% 70% at 50% -12%, #1d140c 0%, #0f0f0f 52%, #0b0b0b 100%); border: 1px solid #1e1e1e; }
.phone-island { position: absolute; z-index: 3; top: calc(var(--phone-w) * 0.035); left: 50%; width: 31%; height: calc(var(--phone-w) * 0.075); translate: -50% 0; border-radius: var(--r-pill); background: #000; }
.ph-bar { position: absolute; inset: 0 0 auto; z-index: 2; height: calc(var(--phone-w) * 0.14); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--phone-w) * 0.085); font: 600 calc(var(--phone-w) * 0.04)/1 var(--font-body); color: #e5e5e5; }
.ph-bar .ph-sys { display: flex; gap: 5px; align-items: center; }
.ph-bar svg { width: calc(var(--phone-w) * 0.052); height: auto; }
.ph-body { --u: calc(var(--phone-w) / 24 * var(--ph-scale, 1)); position: absolute; inset: calc(var(--phone-w) * 0.165) calc(var(--phone-w) * 0.045) calc(var(--phone-w) * 0.05); display: flex; flex-direction: column; gap: calc(var(--phone-w) * 0.04); font-size: var(--u); line-height: 1.38; }
.ph-head { display: flex; align-items: center; gap: 0.7em; padding-bottom: 0.85em; border-bottom: 1px solid #242424; }
.ph-ic { width: 2.55em; height: 2.55em; flex: 0 0 auto; display: grid; place-items: center; border-radius: 0.8em; background: var(--accent-soft); color: var(--accent-ink); }
.ph-ic svg { width: 1.3em; height: 1.3em; }
.ph-t { font: 600 1.08em/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--text); }
.ph-s { margin-top: 0.15em; font-size: 0.82em; color: var(--muted); }
.ph-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 0.65em; border-radius: var(--r-pill); border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); font: 700 0.66em/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.ph-badge.is-live { border-color: rgb(52 211 153 / 0.35); background: rgb(52 211 153 / 0.1); color: var(--success); }
.ph-badge.is-live i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0.25em rgb(52 211 153 / 0.18); }
.ph-thread { --ph-space: 1; position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Chat spacing: wider when the speaker changes, tight within one speaker. */
.ph-thread > .it + .it { margin-top: calc(0.95em * var(--ph-space)); }
.ph-thread > .it-out + .it-out, .ph-thread > .it-in + .it-in, .ph-thread > .it-out + .it-btn, .ph-thread > .it-step + .it-step { margin-top: calc(0.42em * var(--ph-space)); }
.ph-foot { flex: 0 0 auto; }

/* Items (the engine reserves every item's space, so reveals never reflow) */
.it { position: relative; }
/* The phone is the business's own: its messages sit on the right, the customer's on the left. */
.it-out, .it-in { max-width: 84%; padding: 0.72em 0.92em; border-radius: 1.15em; font-size: 0.97em; text-wrap: pretty; }
.it-out { align-self: flex-end; background: #2a1a0e; border: 1px solid rgb(249 115 22 / 0.3); border-bottom-right-radius: 0.35em; color: #f7f7f7; }
.it-in { align-self: flex-start; background: #1f1f1f; border: 1px solid #2f2f2f; border-bottom-left-radius: 0.35em; color: #d9d9d9; }
.it-tag { display: block; margin-bottom: 0.45em; font: 700 0.68em/1 var(--font-body); letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-ink); }
.it-card { padding: 0.8em 0.95em; border-radius: 0.95em; background: #151515; border: 1px solid #2b2b2b; }
.it-card .k { display: flex; justify-content: space-between; align-items: center; font-size: 0.8em; color: var(--muted); }
.it-card .v { margin-top: 0.2em; font-weight: 600; color: var(--text); }
.it-card .new { padding: 0.3em 0.6em; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font: 700 0.85em/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.it-step { display: flex; align-items: center; gap: 0.7em; padding: 0.72em 0.85em; border-radius: 0.95em; background: #141414; border: 1px solid #292929; font-weight: 500; color: #ececec; text-wrap: pretty; }
.it-step .tick { width: 1.7em; height: 1.7em; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgb(52 211 153 / 0.12); color: var(--success); }
.it-step .tick.is-cal { border-radius: 0.5em; background: var(--accent-soft); color: var(--accent-ink); }
.it-step .tick svg { width: 1em; height: 1em; }
.it-step .tick path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.it-line { padding: 0.35em 0 0.35em 0.85em; border-left: 2px solid #2c2c2c; color: #d4d4d4; text-wrap: pretty; }
.it-line .spk { display: block; margin-bottom: 0.2em; font: 700 0.68em/1 var(--font-body); letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.it-line.is-ai { border-left-color: var(--accent); color: var(--text); }
.it-line.is-ai .spk { color: var(--accent-ink); }
.it-btn { align-self: flex-end; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6em 1em; border-radius: var(--r-pill); background: var(--accent); color: var(--ink); font: 700 0.86em/1 var(--font-body); }
.it-btn svg { width: 1.05em; height: 1.05em; }
.it-stars { padding: 0.8em 0.95em; border-radius: 0.95em; background: #151515; border: 1px solid #2b2b2b; }
.it-stars .row { display: flex; gap: 0.3em; }
.it-stars .st { position: relative; width: 1.45em; height: 1.45em; }
.it-stars .st > span { position: absolute; inset: 0; display: block; }
.it-stars .st svg { width: 100%; height: 100%; }
.it-stars .st .base { color: #333; }
.it-stars .st .fill { color: var(--accent); }
.it-stars .lbl { margin-top: 0.5em; font-size: 0.84em; font-weight: 600; color: var(--text); }
.it-typing { position: absolute; left: 0; display: inline-flex; gap: 0.3em; padding: 0.85em 0.95em; border-radius: 1.15em; border-bottom-left-radius: 0.35em; background: #1f1f1f; border: 1px solid #2f2f2f; }
.it-typing.is-out { left: auto; right: 0; border-bottom-left-radius: 1.15em; border-bottom-right-radius: 0.35em; }
.it-typing i { width: 0.45em; height: 0.45em; border-radius: 50%; background: #8a8a8a; animation: typing 1s ease-in-out infinite; }
.it-typing i:nth-child(2) { animation-delay: 0.15s; }
.it-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-0.25em); opacity: 1; } }
.is-frozen .it-typing i { animation-play-state: paused; }
.ph-status { display: flex; align-items: center; gap: 0.6em; padding: 0.78em 0.9em; border-radius: 0.95em; background: #131313; border: 1px solid rgb(52 211 153 / 0.26); font-weight: 600; font-size: 0.93em; color: var(--text); }
.ph-status svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; color: var(--success); }

/* Controls under the phone: 01 / 05 counter, progress dots, pause */
/* The counter hangs left of the dots so the dots and pause stay centered under the phone. */
.phone-controls { position: relative; min-height: 32px; display: flex; align-items: center; gap: 14px; }
.sys-count { position: absolute; right: calc(100% + 6px); white-space: nowrap; font: 500 13px/1 var(--font-display); letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; transition: opacity var(--t-small) var(--ease-quart); }
.sys-count b { color: var(--text); font-weight: 600; }
.sys-count.is-idle { opacity: 0; }
.sys-progress { display: flex; align-items: center; }
.pdot { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); }
.pdot span { position: relative; width: 24px; height: 6px; border-radius: 3px; overflow: hidden; background: #666; clip-path: inset(0 9px round 3px); transition: clip-path var(--t-ui) var(--ease-expo), background-color var(--t-small) var(--ease-quart); }
.pdot.is-active span { clip-path: inset(0 0 round 3px); background: var(--accent); }
.pdot.is-teaser span { background: var(--accent-dim); }
@media (hover: hover) { .pdot:hover span { background: #5a5a5a; } }
.ph-pause { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--border-strong); color: var(--muted-2); transition: border-color var(--t-press) var(--ease-quart), color var(--t-press) var(--ease-quart); }
.ph-pause svg { width: 13px; height: 13px; }
.ph-pause .i-play, .ph-pause[aria-pressed="true"] .i-pause { display: none; }
.ph-pause[aria-pressed="true"] .i-play { display: block; }
@media (hover: hover) { .ph-pause:hover { border-color: var(--border-hover); color: var(--text); } }
html:not(.js) .ph-pause, html:not(.js) .sys-count { display: none; }

/* ---- Mobile: phone moves into #systems, chips + swipe track ------------- */
@media (max-width: 559px) { .hero-actions .btn { flex: 1 1 100%; } }
@media (max-width: 959px) {
  .rail { --phone-w: min(262px, 66vw); --phone-h: calc(var(--phone-w) / 0.515); }
  .rail-grid { display: block; }
  .rail-side { display: none; }
  .hero { padding: calc(var(--header-h) + 48px) 0 24px; }
  /* One text block, so the whole headline is the page's largest paint (LCP). */
  .hero-title .ln, .hero-title .ln > span, .hero-title .sheen { display: inline; }
  .hero-title .ln:not(:last-child)::after { content: "\A"; white-space: pre; }
  .hero-title { margin-top: 24px; }
  .rail-backdrop { height: 100svh; }
  .ambient { width: 720px; height: 720px; left: 10%; top: -30%; }
  .leak { padding: 72px 0 88px; }
  .phone-dock { position: relative; top: auto; margin: 40px auto 0; }
  .phone-controls .sys-progress, .phone-controls .sys-count { display: none; }
  /* Only the pause button remains: it sits beside the phone, not below it. */
  .phone-controls { position: absolute; left: calc(50% + var(--phone-w) / 2 + 12px); bottom: 0; min-height: 0; }
  .phone-dock { gap: 0; }
  .sys-mobile-slot:empty { display: none; }
  .js .sys-chips { display: flex; gap: 8px; margin: 24px calc(var(--gutter) * -1) 0; padding: 6px var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .js .sys-chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); font: 500 14.5px/1 var(--font-body); color: var(--muted-2); transition: background-color var(--t-small) var(--ease-quart), color var(--t-small) var(--ease-quart), border-color var(--t-small) var(--ease-quart); }
  .chip b { font: 500 12px/1 var(--font-display); letter-spacing: 0.06em; color: var(--muted); }
  .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--ink); }
  .chip[aria-pressed="true"] b { color: #555; }
  .js .sys-list { display: flex; margin: 8px calc(var(--gutter) * -1) 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .js .sys-list::-webkit-scrollbar { display: none; }
  .js .sys { flex: 0 0 100%; padding: 24px var(--gutter) 8px; scroll-snap-align: center; scroll-snap-stop: always; }
  html:not(.js) .sys { padding: 48px 0 0; }
  .sys-meta { margin-bottom: 16px; }
  .sys h3 { font-size: clamp(26px, 7vw, 32px); }
  .flag { vertical-align: 0.3em; }
}

/* ---- Beyond local ------------------------------------------------------ */
.beyond { padding: var(--section-y) 0; background: var(--band); border-block: 1px solid var(--border); }
.beyond-lead { max-width: 22ch; font: 600 var(--fs-h2)/1.06 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.beyond-grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--card); padding: clamp(28px, 3vw, 40px); transition: border-color var(--t-small) var(--ease-quart); }
.card-ic { position: absolute; top: clamp(24px, 2.6vw, 36px); right: clamp(24px, 2.6vw, 36px); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border-strong); color: var(--accent-ink); background: linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent); }
.card-ic svg { width: 19px; height: 19px; }
.card h3 { padding-right: 56px; font: 600 clamp(22px, 2vw, 28px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.card p { margin-top: 12px; color: var(--muted-2); line-height: 1.65; max-width: 48ch; }
.spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgb(249 115 22 / 0.11), transparent 62%); opacity: 0; transition: opacity var(--t-ui) var(--ease-quart); }
@media (hover: hover) { .spot:hover { border-color: rgb(249 115 22 / 0.42); } .spot:hover::before { opacity: 1; } }
@media (max-width: 759px) { .beyond-grid { grid-template-columns: 1fr; } }

/* ---- How it works ------------------------------------------------------- */
.how { padding: var(--section-y) 0; }
.how-track { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.how-line { position: absolute; z-index: 0; pointer-events: none; overflow: visible; left: var(--line-x, 24px); top: var(--line-y, 24px); width: var(--line-w, 0px); height: var(--line-h, 1px); }
.how-line line { stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.how-line .base { stroke: var(--border-strong); }
.how-steps { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.how-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg); color: var(--accent-ink); box-shadow: 0 0 0 8px var(--bg); }
.how-mark svg { width: 20px; height: 20px; }
.how-num { margin-top: 28px; font: 500 13px/1 var(--font-display); letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.how-step h3 { margin-top: 12px; font: 600 var(--fs-h3)/1.2 var(--font-display); letter-spacing: -0.015em; }
.how-step p { margin-top: 10px; color: var(--muted-2); line-height: 1.65; max-width: 34ch; }
.how-note { margin-top: clamp(48px, 6vw, 72px); display: flex; align-items: flex-start; gap: 12px; padding-top: 28px; border-top: 1px solid var(--border); color: var(--muted-2); }
.how-note svg { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; color: var(--success); }
@media (max-width: 759px) {
  .how-steps { grid-template-columns: 1fr; gap: 40px; }
  .how-step { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; }
  .how-step .how-mark { grid-row: 1 / span 3; }
  .how-num { margin-top: 4px; }
}

/* ---- Who it is for ----------------------------------------------------- */
.who { padding: clamp(80px, 10vw, 136px) 0; background: var(--band); border-block: 1px solid var(--border); }
.who-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: rgb(255 255 255 / 0.02); font: 500 15px/1 var(--font-body); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.who-more { margin-top: 24px; color: var(--muted-2); }
@media (max-width: 859px) { .who-grid { grid-template-columns: 1fr; } }

/* ---- Why SPRK -------------------------------------------------------------- */
.why { padding: var(--section-y) 0; }
.why-grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.why-card { grid-column: span 2; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: clamp(24px, 2.6vw, 36px); }
.why-card:nth-child(n + 4) { grid-column: span 3; }
.why-card h3 { margin-top: 24px; font: 600 19px/1.25 var(--font-display); letter-spacing: -0.012em; }
.why-card p { margin-top: 8px; color: var(--muted-2); line-height: 1.6; }
.why-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border-strong); color: var(--accent-ink); }
.why-ic svg { width: 21px; height: 21px; }
.why-ic svg * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal-on .why-card[data-reveal] .why-ic svg * { stroke-dashoffset: 1; }
.reveal-on .why-card[data-reveal].is-in .why-ic svg * { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-inout) calc(var(--d, 0ms) + 200ms); }
@media (max-width: 959px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .why-card, .why-card:nth-child(n + 4) { grid-column: span 1; } .why-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 559px) { .why-grid { grid-template-columns: 1fr; } .why-card:last-child { grid-column: auto; } }

/* ---- FAQ (landing layout) ---------------------------------------------- */
.faq { padding: var(--section-y) 0; background: var(--band); border-block: 1px solid var(--border); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 859px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---- Book ---------------------------------------------------------------- */
/* Cal's booker is 571px tall in its desktop layout and switches to a tall stacked
   layout below roughly 800px of width, so the reserved height follows it. */
.book { --cal-h: 590px; padding: var(--section-y) 0 calc(var(--section-y) * 0.7); }
.book-head { max-width: 680px; margin-inline: auto; text-align: center; }
.book-head .h2 { margin-top: 0; }
.book-head .lead { margin-inline: auto; }
.book-card { max-width: 940px; margin: clamp(32px, 4vw, 48px) auto 0; padding: clamp(10px, 2.2vw, 24px); border-radius: 22px; border: 1px solid var(--border); background: var(--panel); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 40px 90px -50px rgb(0 0 0 / 0.9); }
/* Wide screens: Cal draws its own bordered booker, so the card frame steps back. */
@media (min-width: 880px) { .book-card { max-width: 820px; padding: 0; border-color: transparent; background: none; box-shadow: none; } .book-card .cal-skel { border-radius: 14px; border: 1px solid var(--border); background: var(--panel); } }
.cal-frame { position: relative; min-height: var(--cal-h); }
.cal-slot { position: relative; z-index: 1; width: 100%; min-height: var(--cal-h); }
.cal-slot iframe { border-radius: 14px; }
html:not(.js) .cal-skel, html:not(.js) .cal-slot { display: none; }
html:not(.js) .cal-frame { min-height: 0; }
.book .cal-fallback { position: relative; z-index: 1; min-height: var(--cal-h); display: grid; place-items: center; }
@media (max-width: 879px) { .book { --cal-h: 2140px; } }
@media (max-width: 759px) { .book { --cal-h: 1850px; } }

/* ---- Closing CTA ---------------------------------------------------------- */
.cta { position: relative; isolation: isolate; padding: calc(var(--section-y) * 0.8) 0 var(--section-y); text-align: center; overflow: hidden; }
.cta::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: min(1100px, 140vw); height: 600px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(249 115 22 / 0.14), transparent 72%); }
.cta-title { max-width: 15ch; margin-inline: auto; font: 700 clamp(40px, 5.8vw, 80px)/1.02 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.cta-title .line { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.cta p { margin: 22px auto 0; max-width: 40ch; color: var(--muted-2); font-size: clamp(17px, 1.3vw, 19px); }
.cta .btn { margin-top: 36px; }
.cta-fine { margin-top: 16px !important; font-size: 14px !important; color: var(--muted) !important; }

/* ---- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ambient { animation: none !important; }
  .ph-pause { display: none; } /* nothing loops, so there is nothing to pause */
  .it-typing i { animation: none; opacity: 0.7; }
}