/* templates/assets/pages/sprints.css
 * The Sprints funnel's dark theme and the shared components of its three public pages (docs/SPRINTS-PAGES-BRIEF.md
 * section 4, D610): the sales page /sprints/ (recipe "sprints", sections sprint-*), /sprints/start/ and
 * /sprints/explore/. head.liquid links this sheet after the page's own one when the view carries
 * assets.pageSprintsCss; the page template sets data-et-theme="dark" on <html>. Every theme rule is scoped under
 * html[data-et-theme="dark"], every component under its own .sp- class, so the sheet changes nothing on any other
 * page that might ever load it.
 *
 * Look: near-black from Deep Pine's dark end (#0E2418 -> #0A0F0C), Snow Canvas text, Fraunces display, DM Sans
 * body, pill buttons, the Summit gradient on the primary button only, "liquid glass" cards (blur 18px, saturate
 * 140%, a 1px inner highlight, a soft Jasna Water glow on hover), mono eyebrows, at most one Alpenglow per section.
 * Motion is CSS only (scroll-driven reveal where the browser supports it, otherwise everything is simply shown) and
 * is switched off under prefers-reduced-motion. No red, no countdown, no ALL CAPS in copy (the eyebrow's uppercase
 * is the brand's own label style, Brand DNA section 5).
 *
 * Round two (brief section 9): the section tile, the hero's phone (the example run's real results page, .sp-rp, the
 * results page's own markup in the brand's light skin), the floating answer chips, the counters, the trail (an SVG
 * ridgeline on a named view timeline, --sp-trail, with sticky stacking lesson cards), the inside bento (audio player,
 * checklist ticks on scroll) and the offer's 2 x 2 order grid. Every animation starts at .72 opacity or more.
 *
 * Contrast (WCAG AA, measured on the darkest and the lightest surface the text sits on, #0A0F0C and a glass card
 * over #0E2418, about #1A2E23): --sp-text 17:1, --sp-muted 11:1, --sp-dim 5.6:1, --sp-accent (Shallows) 11:1.
 */

html[data-et-theme="dark"] {
  --sp-bg-top: #0E2418;
  --sp-bg: #0A0F0C;
  --sp-text: var(--mf-canvas);
  --sp-muted: #C6D5CB;
  --sp-dim: #97AB9E;
  --sp-accent: var(--mf-shallows);
  --sp-water: var(--mf-lake);
  --sp-line: rgba(249, 248, 243, .12);
  --sp-line-strong: rgba(249, 248, 243, .22);
  --sp-glass: linear-gradient(180deg, rgba(249, 248, 243, .075) 0%, rgba(249, 248, 243, .03) 100%);
  --sp-glass-solid: rgba(20, 38, 29, .72);
  --sp-highlight: inset 0 1px 0 rgba(255, 255, 255, .14);
  --sp-shadow: 0 30px 60px -36px rgba(0, 0, 0, .75);
  --sp-glow: 0 0 0 1px rgba(63, 158, 150, .28), 0 22px 60px -24px rgba(63, 158, 150, .5);
  --sp-radius: 22px;
  --sp-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
  background: var(--sp-bg);
}

/* --- canvas, type, links ------------------------------------------------------------------------------------- */
html[data-et-theme="dark"] body {
  background-color: var(--sp-bg);
  background-image: linear-gradient(180deg, var(--sp-bg-top) 0, var(--sp-bg) 900px);
  background-repeat: no-repeat;
  color: var(--sp-muted);
  overflow-x: hidden;
}
html[data-et-theme="dark"] :is(h1, h2, h3, h4) { color: var(--sp-text); }
html[data-et-theme="dark"] a { color: var(--sp-accent); }
html[data-et-theme="dark"] a.btn-primary, html[data-et-theme="dark"] .btn-primary { color: var(--mf-canvas); }
html[data-et-theme="dark"] ::selection { background: rgba(63, 158, 150, .45); color: var(--sp-text); }
html[data-et-theme="dark"] :focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 3px; }

/* --- header and footer on dark ------------------------------------------------------------------------------- */
html[data-et-theme="dark"] .fp-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 15, 12, .66);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--sp-line);
}
html[data-et-theme="dark"] .fp-head .site-head { padding: 14px 0; }

/* The Sprints main navigation (Klemen, 2026-10-31; partials/header.liquid, Sprints branch), after the mountfounder.ai
   homepage: the on-dark wordmark left, a liquid-glass pill of links right -- blur and saturation, a 1px light rim,
   an inner top highlight, Shallows on hover. The bar keeps the 64px the catalog's and Inside's sticky stacks assume
   (--sp-headh). On the sales page (data-sp-hero) it overlays the hero (no space of its own) and stays hidden while
   the hero shows its own logo; sprint-sales.js adds .is-shown once that logo scrolls away. Transitions only. */
html[data-et-theme="dark"] .fp-head.sp-head-bar {
  height: 64px; padding: 0;
  background: linear-gradient(180deg, rgba(10, 15, 12, .78) 0%, rgba(10, 15, 12, .52) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(249, 248, 243, .08);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .03), 0 18px 40px -30px rgba(0, 0, 0, .9);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0s;
}
html[data-et-theme="dark"] .sp-head-bar[data-sp-hero] { margin-bottom: -64px; }
html[data-et-theme="dark"] .sp-head-bar[data-sp-hero]:not(.is-shown) {
  opacity: 0; transform: translateY(-100%); visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s;
}
.sp-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .sp-head-inner { padding: 0 24px; gap: 20px; } }
.sp-head-brand { flex: 0 1 auto; min-width: 0; display: block; line-height: 0; border-radius: 8px; }
.sp-head-brand .sp-head-logo { display: block; width: 156px; max-width: 100%; height: auto; }
/* D642 (Klemen, 2026-10-31): on desktop the navigation shows from the first paint. At the top of the sales page the bar
   is clear (no glass, no border) and carries only the nav pill, since the hero shows the big logo; once that logo
   scrolls away (.is-shown, sprint-sales.js) the glass returns and the bar's logo fades in, larger than before. */
@media (min-width: 960px) {
  .sp-head-brand .sp-head-logo { width: 204px; }
  html[data-et-theme="dark"] .sp-head-bar[data-sp-hero]:not(.is-shown) {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    background: transparent; border-bottom-color: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-et-theme="dark"] .sp-head-bar[data-sp-hero] .sp-head-brand { transition: opacity .35s ease, visibility 0s linear 0s; }
  html[data-et-theme="dark"] .sp-head-bar[data-sp-hero]:not(.is-shown) .sp-head-brand { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
  html[data-et-theme="dark"] .sp-head-bar[data-sp-hero] { transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
  /* D656 (Klemen, 2026-10-31): the hero's top padding moved to the .sp-hero rule below, so the phone clears the bar */
}
@media (max-width: 959px) { .sp-head-brand .sp-head-logo { width: 132px; } }
.sp-nav {
  position: relative; flex: none; display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 999px; background: rgba(8, 19, 13, .42);
  border: 1px solid rgba(249, 248, 243, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .03), 0 14px 34px -18px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
html[data-et-theme="dark"] a.sp-nav-link {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
  font: 500 14.5px/1.2 var(--mf-font-body); letter-spacing: .005em; white-space: nowrap; text-decoration: none;
  color: var(--sp-muted);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
html[data-et-theme="dark"] a.sp-nav-link:hover, html[data-et-theme="dark"] a.sp-nav-link:focus-visible {
  color: #a7ddd6; background: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
html[data-et-theme="dark"] a.sp-nav-link[aria-current="page"] { color: var(--sp-text); background: rgba(255, 255, 255, .07); }
.sp-nav .sp-nav-cta { margin-left: 4px; padding: 10px 18px; font-size: 14.5px; }
@media (max-width: 719px) { .sp-nav-create { display: none !important; } }
@media (max-width: 479px) {
  .sp-head-brand .sp-head-logo { width: 116px; }
  .sp-nav { padding: 3px; }
  html[data-et-theme="dark"] a.sp-nav-link { padding: 8px 11px; font-size: 13px; letter-spacing: 0; }
  .sp-nav .sp-nav-cta { margin-left: 2px; padding: 9px 14px; font-size: 13px; }
}
@media (max-width: 359px) {
  .sp-head-brand .sp-head-logo { width: 96px; }
  html[data-et-theme="dark"] a.sp-nav-link { padding: 8px 8px; font-size: 12.5px; }
  .sp-nav .sp-nav-cta { padding: 9px 11px; font-size: 12.5px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-et-theme="dark"] .fp-head.sp-head-bar { background: rgba(10, 15, 12, .94); }
  .sp-nav { background: rgba(20, 38, 29, .92); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-et-theme="dark"] .fp-head.sp-head-bar, html[data-et-theme="dark"] .sp-head-bar[data-sp-hero]:not(.is-shown), html[data-et-theme="dark"] a.sp-nav-link { transition: none; }
  html[data-et-theme="dark"] .sp-head-bar[data-sp-hero]:not(.is-shown) { transform: none; }
}

/* The hero's own logo, in the copy column above the tile: the brand while the header bar is away. */
/* Klemen 2026-10-31 (D630): the hero's brand is big and sits high, twice the first cut, and the eyebrow under it hugs the left */
.sp-hero-logo { display: inline-block; line-height: 0; margin: 0 0 36px; border-radius: 8px; }
.sp-hero-logo img { display: block; width: 340px; max-width: 100%; height: auto; }
@media (max-width: 639px) { .sp-hero-logo { margin-bottom: 26px; } .sp-hero-logo img { width: 200px; } }
.sp-hero-copy .sp-eyebrow { justify-content: flex-start; text-align: left; white-space: nowrap; font-size: 11.5px; letter-spacing: .12em; }
@media (max-width: 639px) { .sp-hero-copy .sp-eyebrow { font-size: 10.5px; letter-spacing: .1em; } }
html[data-et-theme="dark"] .site-head-brand .site-head-avatar { border-color: var(--sp-line-strong); background: var(--sp-bg-top); }
html[data-et-theme="dark"] .site-head-byline { color: var(--sp-dim); }
html[data-et-theme="dark"] .site-foot { background: transparent; border-top: 1px solid var(--sp-line); color: var(--sp-dim); }
html[data-et-theme="dark"] .site-foot a { color: var(--sp-muted); }

/* --- layout -------------------------------------------------------------------------------------------------- */
.sp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.sp-wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .sp-wrap, .sp-wrap-narrow { padding: 0 24px; } }
.sp-sec { position: relative; padding: 72px 0; isolation: isolate; }
@media (min-width: 960px) { .sp-sec { padding: 112px 0; } }
.sp-sec + .sp-sec { padding-top: 24px; }
@media (min-width: 960px) { .sp-sec + .sp-sec { padding-top: 40px; } }
/* One Alpenglow per section at most: a soft warm light at the section's top right, layered over the dark canvas. */
.sp-glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 82% 0%, rgba(212, 168, 87, .16) 0%, transparent 70%), radial-gradient(70% 60% at 12% 10%, rgba(63, 158, 150, .14) 0%, transparent 70%);
}

/* section heads: Astra's rhythm, a huge headline, one paragraph */
.sp-head { max-width: 760px; margin: 0 0 40px; }
.sp-head.sp-center { margin-inline: auto; text-align: center; }
.sp-head h2 { font-size: clamp(32px, 5.2vw, 56px); line-height: 1.04; font-weight: 700; letter-spacing: -.02em; }
.sp-head p:not(.sp-eyebrow) { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--sp-muted); text-wrap: pretty; }
@media (min-width: 960px) { .sp-head p:not(.sp-eyebrow) { font-size: 20px; } }

/* mono eyebrow, 12px, .14em */
.sp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--sp-mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sp-accent);
}
.sp-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sp-water); box-shadow: 0 0 12px 2px rgba(63, 158, 150, .7); flex: none; }

/* --- buttons ------------------------------------------------------------------------------------------------- */
html[data-et-theme="dark"] .btn-primary { box-shadow: 0 14px 34px -14px rgba(63, 158, 150, .75), var(--sp-highlight); }
html[data-et-theme="dark"] .btn-primary:hover { box-shadow: 0 18px 44px -14px rgba(63, 158, 150, .9), var(--sp-highlight); }
.sp-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 16px/1 var(--mf-font-body); padding: 15px 24px; border-radius: var(--mf-radius-pill);
  color: var(--sp-text); text-decoration: none; cursor: pointer;
  background: var(--sp-glass); border: 1px solid var(--sp-line-strong); box-shadow: var(--sp-highlight);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
html[data-et-theme="dark"] a.sp-btn-ghost { color: var(--sp-text); }
.sp-btn-ghost:hover { border-color: rgba(63, 158, 150, .6); box-shadow: var(--sp-highlight), var(--sp-glow); transform: translateY(-1px); }
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 32px; }
.sp-actions.sp-center { justify-content: center; }
@media (max-width: 479px) { .sp-actions > .btn, .sp-actions > .sp-btn-ghost { width: 100%; } }
.sp-arrow { width: 18px; height: 18px; flex: none; }
.sp-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
html[data-et-theme="dark"] .sp-link { color: var(--sp-accent); }
.sp-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- liquid glass -------------------------------------------------------------------------------------------- */
.sp-glass {
  position: relative;
  background: var(--sp-glass);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-highlight), var(--sp-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sp-glass { background: var(--sp-glass-solid); } }
.sp-glass.sp-hover:hover, .sp-glass.sp-hover:focus-within { border-color: rgba(63, 158, 150, .55); box-shadow: var(--sp-highlight), var(--sp-glow); }

/* --- scroll reveal: CSS only, never hides content where it is not supported ---------------------------------- */
@keyframes sp-rise { from { opacity: .72; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sp-fade { from { opacity: .72; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes sp-fade-in { from { opacity: .72; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .sp-hero-copy > * { animation: sp-fade-in .7s cubic-bezier(.2, .7, .2, 1) both; }
  .sp-hero-copy > :nth-child(2) { animation-delay: .06s; }
  .sp-hero-copy > :nth-child(3) { animation-delay: .12s; }
  .sp-hero-copy > :nth-child(4) { animation-delay: .18s; }
  /* The scroll reveal never fades to invisible: full-page captures (check shots, the Canva device shots, QA
     agents reading them) capture beyond the viewport, where a view() timeline has not started yet. Elements
     below the fold therefore stay readable in every capture and only lift into place live. */
  @keyframes sp-lift { from { opacity: .72; transform: translateY(22px) scale(.99); } to { opacity: 1; transform: none; } }
  @supports (animation-timeline: view()) {
    .sp-reveal { animation: sp-lift linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sp-glass, .sp-btn-ghost { transition: none; }
  .sp-btn-ghost:hover { transform: none; }
}

/* =============================================================================================== section tile */
/* The square glass tile that opens every section (brief section 9, visual 3): a line icon over a mono label. */
.sp-tile { width: 88px; height: 88px; padding: 10px; margin: 0 0 24px; border-radius: 22px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--sp-accent); }
.sp-tile svg { width: 28px; height: 28px; flex: none; }
.sp-tile span { max-width: 76px; font-family: var(--sp-mono); font-size: 9.5px; font-weight: 500; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--sp-muted); }
.sp-center > .sp-tile, .sp-close-card > .sp-tile { margin-inline: auto; }
.sp-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sp-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--sp-line); color: var(--sp-dim); white-space: nowrap; }
.sp-tag.is-on { color: var(--sp-accent); border-color: rgba(167, 221, 214, .35); background: rgba(63, 158, 150, .12); }

/* =============================================================================================== sprint-hero */
.sp-hero { padding: 28px 0 72px; }
@media (min-width: 960px) { .sp-hero { padding: 104px 0 104px; } } /* D656: below the fixed 64px bar */
.sp-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .sp-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; } }
.sp-hero h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.04; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.sp-hero-body { margin-top: 20px; max-width: 30em; font-size: 21px; line-height: 1.5; color: var(--sp-muted); text-wrap: pretty; }
@media (min-width: 960px) { .sp-hero-body { font-size: 25px; } }
/* D640: the third hero line, lighter and smaller, the brand marks inline on the dark surface */
.sp-hero-body2 { margin-top: 14px; max-width: 36em; font-size: 15.5px; line-height: 1.6; color: var(--sp-dim); text-wrap: pretty; }
@media (min-width: 960px) { .sp-hero-body2 { font-size: 17px; } }
.sp-hero-body2 .sp-word { font-size: 1em; }
.sp-hero-brands { white-space: nowrap; }
.sp-hero-body2 .sp-lockup { font-size: 1em; font-weight: 600; color: var(--sp-text); gap: 4px; vertical-align: -1px; }
.sp-hero-body2 .sp-logo { width: 1.1em; height: 1.1em; }
/* the ChatGPT mark is a filled rounded square (currentColor) with a white knot: it stays black so the knot shows on dark */
.sp-hero-body2 .sp-lockup-chatgpt .sp-logo { color: #000; }
/* "Sprints" in the Jasna gradient. The brand's Jasna (#2F6FB5 -> #3F9E96 -> #2E6F40) is lightened along the same hues so
   the word keeps AA contrast on the dark canvas (its darkest stop is about 7:1 on #0E2418). */
.sp-hero-body em, .sp-word { font-style: normal; font-weight: 700; color: #8FD3C5; background: linear-gradient(120deg, #84B9EE 0%, #5FC2B8 52%, #93D3A2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* the phone: the real, unlocked results page of the example run, as HTML */
.sp-hero-phone { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.sp-phone-stage { --sp-phone-w: 288px; --sp-phone-h: 590px; position: relative; width: 100%; max-width: 470px; padding: 12px 0; display: grid; justify-items: center; }
@media (min-width: 400px) { .sp-phone-stage { --sp-phone-w: 300px; --sp-phone-h: 614px; } }
.sp-phone { position: relative; width: var(--sp-phone-w); height: var(--sp-phone-h); padding: 11px; border-radius: 48px; background: linear-gradient(160deg, #2B3B32 0%, #111A15 55%, #0B110D 100%); border: 1px solid var(--sp-line-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 44px 90px -34px rgba(0, 0, 0, .85), 0 30px 100px -40px rgba(63, 158, 150, .6); }
.sp-phone-notch { position: absolute; z-index: 3; top: 21px; left: 50%; width: 90px; height: 25px; margin-left: -45px; border-radius: 14px; background: #050806; }
.sp-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 37px; background: var(--mf-canvas); }
.sp-phone-screen::after { content: ""; position: absolute; inset: auto 0 0; height: 48px; background: linear-gradient(180deg, transparent, rgba(249, 248, 243, .9)); pointer-events: none; }
.sp-phone .sp-rp { width: 375px; zoom: .74; padding: 52px 14px 40px; background: var(--mf-g-morning); }
@media (min-width: 400px) { .sp-phone .sp-rp { zoom: .7413; } }
@media (max-width: 399px) { .sp-phone .sp-rp { zoom: .7093; } }
.sp-phone-label { max-width: 34em; padding: 0 8px; font-family: var(--sp-mono); font-size: 12.5px; line-height: 1.5; letter-spacing: .04em; text-align: center; color: var(--sp-muted); }

/* the buyer's quiz answers, floating in as glass chips around the phone */
.sp-chips-float { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.sp-chip-float { position: absolute; z-index: 4; display: grid; gap: 3px; max-width: 48%; padding: 10px 14px 11px; border-radius: 16px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--sp-text); background: rgba(16, 32, 24, .78); border: 1px solid rgba(167, 221, 214, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 40px -18px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.sp-chip-float span { font-family: var(--sp-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-accent); }
.sp-chip-float:nth-child(1) { top: 1%; left: 0; }
.sp-chip-float:nth-child(2) { top: 33%; right: 0; }
.sp-chip-float:nth-child(3) { top: 62%; left: 0; }
.sp-chip-float:nth-child(4) { top: 84%; right: 0; }
@media (max-width: 479px) { .sp-chip-float { font-size: 13px; padding: 8px 11px 9px; max-width: 44%; } }

/* the counters row: three numbers render computes, never typed */
.sp-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 56px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .sp-counters { gap: 16px; margin-top: 72px; } }
.sp-counters li { display: grid; gap: 6px; align-content: start; padding: 18px 14px; text-align: center; border-radius: 18px; }
@media (min-width: 640px) { .sp-counters li { padding: 26px 22px; text-align: left; } }
.sp-counters b { font-family: var(--mf-font-display); font-size: clamp(30px, 5vw, 48px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--sp-text); }
.sp-counters span { font-size: 13.5px; line-height: 1.4; color: var(--sp-muted); }
@media (min-width: 640px) { .sp-counters span { font-size: 16px; } }

/* =============================================================================================== sprint-how: the trail */
.sp-how-steps { display: grid; gap: 12px; margin: 0 0 56px; padding: 0; list-style: none; }
@media (min-width: 880px) { .sp-how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 72px; } }
.sp-how-step { display: flex; gap: 14px; align-items: flex-start; padding: 20px 20px 22px; }
.sp-step-n { font-family: var(--sp-mono); font-size: 12px; letter-spacing: .14em; color: var(--sp-accent); padding-top: 4px; }
.sp-how-step h3 { font-size: 20px; line-height: 1.2; }
.sp-how-step p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--sp-muted); }

/* the first run's timeline sits on its lesson cards and summit card (.sp-trail-run); each next-sprint card has its
   own (named inline); all three are scoped here so the sticky drawing beside them can read them */
.sp-trail { position: relative; display: grid; gap: 28px; timeline-scope: --sp-trail, --sp-next-1, --sp-next-2, --sp-next-3, --sp-end; }
.sp-trail-end { height: 1px; }
.sp-trail-art { min-width: 0; }
.sp-trail-box { position: relative; width: 100%; max-width: 260px; margin: 0 auto; }
.sp-trail-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sp-trail-dot { display: none; }
.sp-trail-next path { fill: none; stroke: rgba(167, 221, 214, .28); stroke-width: 1.2; stroke-dasharray: 3 6; stroke-linejoin: round; }
.sp-trail-next path.sp-peak { fill: url(#sp-trail-fade); fill-opacity: .7; stroke: none; }
.sp-trail-mass { fill: url(#sp-trail-fade); stroke: none; }
.sp-trail-next text { font-family: var(--sp-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; fill: var(--sp-dim); }
.sp-trail-base { fill: none; stroke: rgba(249, 248, 243, .18); stroke-width: 1.5; stroke-linejoin: round; }
.sp-trail-line { fill: none; stroke: url(#sp-jasna-line); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sp-trail-camps circle { fill: #A7DDD6; stroke: #A7DDD6; stroke-width: 2; }
.sp-trail-summit circle:first-child { fill: #F9F8F3; }
.sp-trail-summit circle:last-child { fill: none; stroke: rgba(167, 221, 214, .45); stroke-width: 1.2; }
/* D667 (Klemen, 2026-11-01): the summit celebration. At rest the effects are hidden; .is-reached (sprint-sales.js, when
   the summit card locks into the stack) plays one burst -- the summit swells and glows, three rings ripple out, 14
   sparks fly up and fade, a light runs up the ridge -- then the "Result reached" tag stays and the summit breathes
   slowly until Sprint 2's card locks in (.is-onward). Reduced motion: the lit summit and the tag, no burst. */
.sp-trail-summit circle { transform-box: fill-box; transform-origin: center; transition: filter .5s ease; }
.sp-trail-sweep { fill: none; stroke: #F9F8F3; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .16 1.2; stroke-dashoffset: .16; opacity: 0; pointer-events: none; }
.sp-summit-fx { pointer-events: none; }
.sp-fx-ring { fill: none; stroke: #A7DDD6; stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sp-fw { pointer-events: none; }
.sp-fw-rocket { fill: none; stroke-width: 2.6; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 4px rgba(249, 248, 243, .8)); }
.sp-fw-spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sp-fw-ring { fill: none; stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sp-fx-label { font-family: var(--sp-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; fill: #F2C38B; opacity: 0; transition: opacity .4s ease .5s; }
.sp-trail.is-reached .sp-fx-label { opacity: 1; }
.sp-trail.is-reached .sp-trail-summit circle:first-child { filter: drop-shadow(0 0 6px rgba(249, 248, 243, .9)) drop-shadow(0 0 16px rgba(95, 194, 184, .8)); }
@keyframes sp-fx-swell { 0% { transform: none; } 35% { transform: scale(1.45); } 100% { transform: scale(1.18); } }
@keyframes sp-fx-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
/* D669 (Klemen, 2026-11-01): fireworks, not a spray -- three rockets shoot up from the summit and each bursts into 14
   sparks that fall a little as they fade, about a third of the screen across; every summit has its own */
@keyframes sp-fw-rocket { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--rx), var(--ry)); } }
@keyframes sp-fw-spark { 0% { opacity: 0; transform: scale(.3); } 6% { opacity: 1; transform: scale(1.3); } 55% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.45); } }
@keyframes sp-fx-sweep { 0% { opacity: .95; stroke-dashoffset: 1.36; } 85% { opacity: .95; } 100% { opacity: 0; stroke-dashoffset: .16; } }
@keyframes sp-fx-breathe { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .9; transform: scale(1.35); } }
@media (prefers-reduced-motion: no-preference) {
  .sp-trail.is-reached .sp-trail-summit circle:first-child { animation: sp-fx-swell .7s cubic-bezier(.2, .7, .2, 1) both; }
  .sp-trail.is-reached .sp-trail-summit circle:last-child { animation: sp-fx-breathe 2.6s ease-in-out .9s infinite; }
  .sp-trail.is-reached.is-onward .sp-trail-summit circle:last-child { animation: none; }
  .sp-trail.is-reached .sp-fx-ring { animation: sp-fx-ring 1.3s cubic-bezier(.15, .6, .3, 1) calc(var(--k) * .22s) both; }
  .sp-trail.is-reached .sp-fw-main .sp-fw-rocket, .sp-fw.is-burst .sp-fw-rocket { animation: sp-fw-rocket .5s cubic-bezier(.25, .7, .45, 1) var(--d) both; }
  .sp-trail.is-reached .sp-fw-main .sp-fw-spark, .sp-fw.is-burst .sp-fw-spark { animation: sp-fw-spark 1.5s cubic-bezier(.1, .75, .3, 1) calc(var(--d) + .48s) both; }
  .sp-fw.is-burst .sp-fw-ring { animation: sp-fx-ring 1.2s cubic-bezier(.15, .6, .3, 1) calc(var(--k) * .22s) both; }
  .sp-trail.is-reached .sp-trail-sweep { animation: sp-fx-sweep .9s ease-in both; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-fx-label { opacity: 1; transition: none; }
  .sp-trail-summit circle:first-child { filter: drop-shadow(0 0 6px rgba(249, 248, 243, .9)) drop-shadow(0 0 16px rgba(95, 194, 184, .8)); }
}
/* the next sprints' trails (Klemen 2026-10-31): a dotted outline under each, the coloured line drawn over it */
.sp-alt { --a: 97%; }
/* D635: each trail draws on the NEXT card's rise, so it starts only once its own card has locked into the stack */
.sp-alt-1 { --c: #84B9EE; --tl: --sp-next-2; }
.sp-alt-2 { --c: #F2C38B; --tl: --sp-next-3; } /* D650: on the fourth card's rise (was the end sentinel) */
.sp-alt-base { fill: none; stroke: var(--c); stroke-opacity: .4; stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; stroke-linejoin: round; }
.sp-alt-line { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sp-alt-camp { fill: var(--c); stroke: var(--c); stroke-width: 1.5; }
.sp-alt-top { fill: var(--c); }
.sp-alt-ring { fill: none; stroke: var(--c); stroke-opacity: .55; stroke-width: 1.2; }
.sp-alt text { font-family: var(--sp-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; fill: var(--c); }
/* D650: the range behind. At rest (reduced motion, no scroll timelines) it shows its end state: the three mountains
   small at the range's foot (.sp-trail-world, scaled about its base), an opaque backing so the range's trails do not
   show through them, their labels and the dot gone, and five mountains drawn behind, each with its own trail. */
.sp-trail-world { transform-box: view-box; transform-origin: 220px 624px; transform: scale(.46); }
.sp-world-back :is(path, rect) { fill: var(--sp-bg, #0A0F0C); }
.sp-trail-world .sp-alt text, .sp-trail-world .sp-fx-label, .sp-trail-box .sp-trail-dot { opacity: 0; }
.sp-range { transform-box: view-box; transform-origin: 220px 640px; }
.sp-range-m { fill: url(#sp-trail-fade); stroke: rgba(167, 221, 214, .26); stroke-width: 1; stroke-linejoin: round; }
.sp-range-m.is-back { fill-opacity: .6; stroke: rgba(167, 221, 214, .16); }
.sp-range-base { fill: none; stroke: var(--c); stroke-opacity: .35; stroke-width: 1.3; stroke-dasharray: 2 6; stroke-linecap: round; stroke-linejoin: round; }
.sp-range-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sp-range-top { fill: var(--c); }
.sp-range-ring { fill: none; stroke: var(--c); stroke-opacity: .55; stroke-width: 1.2; }
.sp-onward { border-color: rgba(167, 221, 214, .42); background: radial-gradient(90% 120% at 50% 0%, rgba(167, 221, 214, .14) 0%, transparent 62%), linear-gradient(180deg, #172B21 0%, #101C16 100%); }
.sp-onward { display: grid; align-content: center; min-height: 228px; } /* as tall as the Sprint cards it covers, so none peeks out below */
.sp-onward h3 { margin-top: 0; }
@media (min-width: 960px) { .sp-onward { min-height: 212px; } }
@media (min-width: 960px) {
  .sp-trail { grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: start; }
  .sp-trail-art { position: sticky; top: 96px; }
  .sp-trail-box { max-width: 340px; }
}
/* tall enough for the drawing at its own size: the dot travels the same path in CSS pixels */
@media (min-width: 960px) and (min-height: 780px) {
  .sp-trail { grid-template-columns: 440px minmax(0, 1fr); }
  .sp-trail-box { width: 440px; height: 640px; max-width: none; }
  .sp-trail-svg { width: 440px; height: 640px; }
  .sp-trail { --sp-art-mb: -348px; }
  .sp-trail-dot { position: absolute; top: 0; left: 0; display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--mf-canvas); box-shadow: 0 0 0 4px rgba(63, 158, 150, .5), 0 0 24px 6px rgba(95, 194, 184, .55); offset-path: path("M40 600L110 540L90 470L180 420L160 340L250 290L230 210L310 160L340 70"); offset-rotate: 0deg; offset-distance: 100%; }
}

.sp-trail-list { min-width: 0; }
.sp-trail-label { margin: 0 0 16px; font-family: var(--sp-mono); font-size: 12px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-accent); }
.sp-camps { position: relative; display: grid; gap: 14px; margin: 0; padding: 0 0 0 28px; list-style: none; }
.sp-camps::before { content: ""; position: absolute; left: 8px; top: 26px; bottom: 26px; width: 1.5px; background: linear-gradient(180deg, #84B9EE, #5FC2B8 50%, rgba(167, 221, 214, .25)); }
.sp-camp-card { position: relative; padding: 20px 22px 22px; background: linear-gradient(180deg, #172B21 0%, #101C16 100%); border-color: rgba(249, 248, 243, .14); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sp-camp-card { background: #142219; } }
.sp-camp-dot { position: absolute; left: -26px; top: 25px; width: 14px; height: 14px; border-radius: 50%; background: #A7DDD6; box-shadow: 0 0 0 4px #0B1510, 0 0 14px 2px rgba(95, 194, 184, .5); }
.sp-camp-n { font-family: var(--sp-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-accent); }
.sp-camp-card h3 { margin-top: 8px; font-size: 19px; line-height: 1.25; }
.sp-camp-card p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--sp-muted); }
@media (min-width: 960px) {
  .sp-camps { padding-left: 0; }
  .sp-camps::before, .sp-camp-dot { display: none; }
  .sp-camp-card { padding: 24px 28px 26px; }
  .sp-camp-card h3 { font-size: 22px; }
}
.sp-summit { margin-top: 20px; padding: 28px 24px 30px; border-color: rgba(167, 221, 214, .45); background: radial-gradient(90% 120% at 85% 0%, rgba(212, 168, 87, .16) 0%, transparent 60%), linear-gradient(180deg, rgba(63, 158, 150, .2) 0%, rgba(249, 248, 243, .04) 100%); }
.sp-summit-result { display: block; margin-top: 14px; font-family: var(--mf-font-display); font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; color: var(--sp-text); }
.sp-summit p { margin-top: 12px; max-width: 34em; font-size: 16.5px; line-height: 1.6; color: var(--sp-muted); }
/* the next sprints: one card each after the summit, tagged in its trail's colour */
.sp-next-sprint { --c: #84B9EE; margin-top: 20px; padding: 24px 24px 26px; border-color: rgba(132, 185, 238, .38); background: radial-gradient(90% 120% at 90% 0%, rgba(132, 185, 238, .12) 0%, transparent 60%), rgba(249, 248, 243, .04); }
.sp-next-sprint.is-alt-2 { --c: #F2C38B; border-color: rgba(242, 195, 139, .38); background: radial-gradient(90% 120% at 90% 0%, rgba(242, 195, 139, .12) 0%, transparent 60%), rgba(249, 248, 243, .04); }
.sp-next-tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sp-mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.sp-next-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.sp-next-sprint h3 { margin-top: 12px; font-size: 25px; line-height: 1.18; }
.sp-next-sprint p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--sp-muted); }
.sp-next-sprint .sp-next-ex { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(249, 248, 243, .1); font-size: 14.5px; line-height: 1.45; color: var(--sp-dim); }
@media (min-width: 960px) { .sp-next-sprint { padding: 28px 30px 30px; } .sp-next-sprint h3 { font-size: 28px; } .sp-next-tag { font-size: 15px; } }

/* =============================================================================================== the results page, in the brand's light skin */
/* The results page's own markup (results.js blockHtml, renderSprintPlan, the narrated cards), restyled here because
   results.css is not on this page: the phone's page and the bento's components, light on the dark canvas. */
.sp-rp { color: var(--mf-ink); font-family: var(--mf-font-body); font-size: 15px; line-height: 1.55; text-align: left; }
html[data-et-theme="dark"] .sp-rp :is(h1, h2, h3, h4) { color: var(--mf-ink); }
.sp-rp :is(h1, h2, h3, h4) { margin: 0; font-family: var(--mf-font-display); font-weight: 700; letter-spacing: -.01em; }
.sp-rp p { margin: 0; }
.sp-rp .card { padding: 0; background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: 16px; box-shadow: 0 18px 40px -26px rgba(23, 63, 39, .4); }
.sp-rp-top { display: flex; justify-content: center; padding: 0 0 14px; }
.sp-rp-logo { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mf-font-display); font-size: 17px; font-weight: 700; color: var(--mf-ink); }
.sp-rp-logo svg { width: 20px; height: 20px; color: var(--mf-pine); }
.sp-rp-stack { display: grid; gap: 14px; }
.sp-rp .fp-title-block { padding: 22px 18px 20px; }
/* D618: the H1 ("Sprint for <name>") is the small line, an eyebrow in the phone's light style; the sprint's name is
   the big line in the display face */
.sp-rp .fp-title-h1 { font-family: var(--mf-font-body); font-size: 12.5px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--mf-pine); }
.sp-rp .fp-title-h2 { margin-top: 8px; font-family: var(--mf-font-display); font-size: 29px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--mf-ink); }
.sp-rp-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 5px 12px 5px 5px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--mf-pine); background: #DDEFE1; }
.sp-rp-dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--mf-surface); background: var(--mf-pine); }
.sp-rp-dot svg { width: 11px; height: 11px; }
.sp-rp .et-sprint-plan { padding: 18px 16px; }
.sp-rp .et-plan-head h2 { margin: 0 0 12px; font-size: 20px; }
.sp-rp .et-plan-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.sp-rp .et-plan-a { display: grid; gap: 1px; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--mf-limestone); background: var(--mf-surface); }
.sp-rp .et-plan-n { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mf-pine); }
.sp-rp .et-plan-t { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--mf-ink); }
.sp-rp .fp-sec { overflow: hidden; }
.sp-rp .fp-sec-head { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 18px 16px 14px; }
.sp-rp .fp-n { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--mf-font-display); font-size: 14px; font-weight: 600; color: var(--mf-pine); background: var(--mf-shallows); }
.sp-rp .fp-sec-head h2 { font-size: 19px; line-height: 1.22; }
.sp-rp .fp-sec-head p { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--mf-slate); }
.sp-rp .fp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; border-top: 1px solid var(--mf-limestone); font-size: 14.5px; }
.sp-rp .fp-body h3 { margin-top: 6px; font-size: 16.5px; line-height: 1.25; }
.sp-rp .fp-body strong { font-weight: 600; color: var(--mf-forest); }
.sp-rp-audio { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 999px; border: 1px solid var(--mf-limestone); background: var(--mf-canvas); }
.sp-rp-play { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--mf-surface); background: var(--mf-pine); }
.sp-rp-play svg { width: 13px; height: 13px; margin-left: 2px; }
.sp-rp-track { flex: 1; height: 4px; border-radius: 4px; background: var(--mf-limestone); overflow: hidden; }
.sp-rp-track i { display: block; width: 18%; height: 100%; background: var(--mf-pine); }
.sp-rp-time { font-size: 12px; color: var(--mf-slate); }
.sp-rp-flow { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-rp-flow li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mf-line); background: color-mix(in srgb, var(--mf-moss) 10%, var(--mf-surface)); font-size: 13.5px; line-height: 1.45; color: var(--mf-slate); }
.sp-rp-flow b { font-family: var(--mf-font-display); font-size: 15px; color: var(--mf-pine); }
.sp-rp-input { display: block; min-height: 38px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--mf-limestone); background: var(--mf-canvas); font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--mf-slate); }
.sp-rp-next { font-size: 13.5px; color: var(--mf-slate); }
.sp-rp .et-bk-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sp-rp .et-bk { margin: 0; padding: 14px; border: 1px solid var(--mf-limestone); border-radius: 14px; background: var(--mf-surface); }
.sp-rp .et-bk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 10px; }
.sp-rp .et-bk-tag { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-pine); background: color-mix(in srgb, var(--mf-moss) 14%, var(--mf-surface)); }
.sp-rp .et-bk-head b { font-size: 15px; line-height: 1.3; color: var(--mf-ink); }
.sp-rp .fp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-rp .et-bk-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sp-rp .et-bk-table :is(th, td) { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mf-limestone); }
.sp-rp .et-bk-table thead th { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mf-slate); background: var(--mf-canvas); }
.sp-rp .et-bk-table tbody th { font-weight: 600; }
.sp-rp .et-bk-table tr:last-child :is(th, td) { border-bottom: 0; }
.sp-rp .et-bk-check ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; view-timeline: --sp-check block; }
.sp-rp .et-bk-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.sp-rp .et-bk-box { width: 20px; height: 20px; flex: none; margin-top: 1px; display: grid; place-items: center; border-radius: 6px; border: 2px solid var(--mf-pine); color: var(--mf-surface); background: var(--mf-pine); }
.sp-rp .et-bk-box svg { width: 12px; height: 12px; }
.sp-rp .et-bk-text { margin: 0; padding: 12px 14px; max-height: 260px; overflow: auto; white-space: pre-wrap; font: 13.5px/1.55 var(--mf-font-body); color: var(--mf-ink); background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 10px; }
.sp-rp .et-bk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.sp-rp .et-bk-note { font-size: 13px; color: var(--mf-slate); }
.sp-rp .et-bk-field { display: grid; gap: 5px; margin-top: 8px; font-size: 13.5px; font-weight: 600; }
.sp-rp .et-bk-action { border-color: color-mix(in srgb, var(--mf-pine) 40%, var(--mf-limestone)); background: color-mix(in srgb, var(--mf-moss) 8%, var(--mf-surface)); }
.sp-rp .et-bk-act-text { font-weight: 600; }
.sp-rp .et-bk-mirror { background: color-mix(in srgb, var(--mf-sky-light) 40%, var(--mf-surface)); }
.sp-rp .et-bk-mirror h3 { margin: 0 0 10px; font-size: 15.5px; }
.sp-rp .et-bk-mirror dl { display: grid; gap: 10px; margin: 0; }
.sp-rp .et-bk-mirror dt { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mf-slate); }
.sp-rp .et-bk-mirror dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.sp-rp .et-bk-q { margin-bottom: 8px; font-weight: 600; }
.sp-rp .et-bk-opts { display: grid; gap: 6px; }
.sp-rp .et-bk-opt { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--mf-limestone); background: var(--mf-canvas); font-size: 13.5px; }
.sp-rp .et-bk-opt[data-mark="right"] { border-color: var(--mf-pine); background: #DDEFE1; }
.sp-rp .et-refine { display: grid; gap: 10px; padding: 18px 16px; }
.sp-rp .et-refine-title { font-family: var(--mf-font-display); font-size: 20px; font-weight: 700; line-height: 1.2; }
.sp-rp .et-refine-body { font-size: 14px; color: var(--mf-slate); }
.sp-rp .et-rf-field { display: grid; gap: 5px; font-size: 13.5px; font-weight: 600; }
.sp-rp .et-rf-actions { margin-top: 4px; }
.sp-rp .btn-sm { padding: 10px 16px; font-size: 14px; }
.sp-rp .btn-ghost { background: var(--mf-surface); color: var(--mf-forest); border-color: var(--mf-forest); }
.sp-rp .btn-ghost:hover { background: #DDEFE1; }
.sp-rp .btn-ghost.is-done { color: var(--mf-surface); background: var(--mf-pine); border-color: var(--mf-pine); }
.sp-rp-panel { padding: 12px; border-radius: 18px; background: var(--mf-g-morning); border: 1px solid rgba(249, 248, 243, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.sp-rp-panel > .card, .sp-rp-panel > .et-bk { box-shadow: none; }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* round three: the visual blocks (diagram, chart, calendar), in the results page's own markup */
.sp-rp .et-bk-diagram, .sp-rp .et-bk-chart { margin: 0; }
.sp-rp .sp-svg-host { min-width: 0; }
.sp-rp .sp-svg-host > svg { display: block; width: 100%; height: auto; }
.sp-rp .et-bk-cap { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--mf-slate); }
.sp-rp-bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sp-rp-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13.5px; color: var(--mf-ink); }
.sp-rp-bars i { grid-column: 1 / -1; grid-row: 2; display: block; height: 14px; width: calc(var(--v) * 100%); border-radius: 8px; background: var(--mf-pine); }
.sp-rp-bars li + li i { background: color-mix(in srgb, var(--mf-pine) 75%, var(--mf-surface)); }
.sp-rp-bars b { font-size: 13.5px; }
.sp-rp .et-bk-cal { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sp-rp .et-bk-cal li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--mf-limestone); font-size: 14px; line-height: 1.45; }
.sp-rp .et-bk-cal li:last-child { border-bottom: 0; }
.sp-rp .et-bk-cal-day { font-weight: 700; color: var(--mf-pine); }
.sp-rp script { display: none; }

/* =============================================================================================== cards */
.sp-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .sp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .sp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.sp-card { display: flex; flex-direction: column; padding: 24px 22px 22px; min-width: 0; }
.sp-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-card-title { margin-top: 16px; font-size: 22px; line-height: 1.15; font-weight: 700; }
.sp-card-promise { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--sp-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-card-why { margin-top: 14px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; color: var(--sp-text); background: rgba(63, 158, 150, .12); border: 1px solid rgba(63, 158, 150, .35); }
.sp-card-go { margin-top: auto; align-self: flex-start; }
.sp-card-promise + .sp-card-go, .sp-card-why + .sp-card-go { margin-top: 20px; }
.sp-card .btn { padding: 13px 20px; font-size: 15px; }
@media (max-width: 479px) { .sp-card-go { align-self: stretch; } }

/* "Other sprints" (was "Coming soon", brief section 13): dim chips with a solid border, no link */
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.sp-chip { font-size: 13.5px; line-height: 1.3; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--sp-line-strong); color: var(--sp-dim); background: rgba(249, 248, 243, .02); }
.sp-chip.is-link { padding: 0; border-color: rgba(167, 221, 214, .45); background: rgba(167, 221, 214, .06); }
.sp-chip.is-link a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; color: var(--sp-text); text-decoration: none; border-radius: inherit; }
.sp-chip.is-link a:hover, .sp-chip.is-link a:focus-visible { color: var(--sp-accent); }
.sp-chip-arrow { width: 13px; height: 13px; flex: none; }
.sp-chips-label { margin-top: 22px; font-family: var(--sp-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-dim); }

/* =============================================================================================== sprint-catalog + explore bands */
.sp-bands { display: grid; gap: 20px; }
.sp-band { padding: 26px 18px 24px; border-radius: 26px; border: 1px solid var(--sp-line); background: rgba(249, 248, 243, .02); scroll-margin-top: 140px; }
@media (min-width: 640px) { .sp-band { padding: 32px 28px 30px; } }
.sp-band-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 20px; }
.sp-band-head :is(h2, h3) { font-size: clamp(24px, 3vw, 32px); line-height: 1.1; }
.sp-band-head p { flex: 1 1 280px; font-size: 16px; color: var(--sp-muted); }
.sp-band-count { font-family: var(--sp-mono); font-size: 12px; letter-spacing: .12em; color: var(--sp-dim); }
.sp-band-empty { font-size: 15px; color: var(--sp-dim); }
.sp-more { margin-top: 32px; text-align: center; }

/* explore: sticky category chips */
.sp-jump { position: sticky; top: 62px; z-index: 30; margin: 0 0 28px; padding: 10px 0; background: rgba(10, 15, 12, .72); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-block: 1px solid var(--sp-line); }
.sp-jump-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: 0; list-style: none; -webkit-overflow-scrolling: touch; }
.sp-jump-list::-webkit-scrollbar { display: none; }
.sp-jump a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--sp-line-strong); background: var(--sp-glass); }
html[data-et-theme="dark"] .sp-jump a { color: var(--sp-text); }
.sp-jump a:hover { border-color: rgba(63, 158, 150, .6); }
.sp-jump a span { font-family: var(--sp-mono); font-size: 11.5px; color: var(--sp-dim); }

/* explore: the search field above the chips (brief section 13, Doors; templates/assets/js/sprint-explore.js). The
   field is hidden in the markup and shown by the script, so a page without it never shows a field that does nothing.
   A band, a card, an "Other sprints" chip or a category chip with no match gets [hidden]. */
.sp-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sp-search { position: relative; max-width: 620px; margin: -8px auto 28px; }
.sp-search[hidden] { display: none; }
.sp-search-ico { position: absolute; z-index: 1; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--sp-dim); pointer-events: none; transition: color .15s ease; }
.sp-search-input { -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; width: 100%; height: 58px; margin: 0; padding: 0 56px 0 52px; border-radius: 999px; font: 500 17px/1.2 var(--mf-font-body); color: var(--sp-text); background: var(--sp-glass); border: 1px solid var(--sp-line-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 40px -24px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); transition: border-color .15s ease, box-shadow .15s ease; }
.sp-search-input::placeholder { color: var(--sp-dim); opacity: 1; }
.sp-search-input::-webkit-search-cancel-button, .sp-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.sp-search-input:hover { border-color: rgba(63, 158, 150, .5); }
.sp-search-input:focus, html[data-et-theme="dark"] .sp-search-input:focus-visible { outline: none; border-color: var(--sp-water); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 3px rgba(63, 158, 150, .3); }
.sp-search:focus-within .sp-search-ico { color: var(--sp-accent); }
.sp-search-clear { position: absolute; right: 10px; top: 50%; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; transform: translateY(-50%); border-radius: 999px; border: 1px solid transparent; background: rgba(249, 248, 243, .08); color: var(--sp-muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.sp-search-clear[hidden] { display: none; }
.sp-search-clear svg { width: 16px; height: 16px; }
.sp-search-clear:hover { color: var(--sp-text); background: rgba(249, 248, 243, .16); }
.sp-search-clear:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
@media (max-width: 479px) { .sp-search { margin-top: -12px; margin-bottom: 22px; } .sp-search-input { height: 54px; font-size: 16px; } }
.sp-jump li[hidden], .sp-band[hidden], .sp-card[hidden], .sp-chip[hidden], .sp-chips[hidden], .sp-chips-label[hidden], .sp-search-empty[hidden], .sp-cta-band[hidden], .sp-jump[hidden] { display: none; }
.sp-search-empty { padding: 40px 22px; text-align: center; }
.sp-search-empty p { font-family: var(--mf-font-display); font-size: clamp(22px, 3vw, 28px); line-height: 1.2; font-weight: 600; color: var(--sp-text); }
.sp-search-empty .sp-actions { justify-content: center; margin-top: 20px; }

/* =============================================================================================== sprint-catalog: the rail and the stack */
/* Round three (brief 10 C.1). .sp-show holds the rail and the bands. The rail is a sticky column at 1040px and up,
   a sticky row of chips above the bands below that (the Explore page's chip look). The bands' sticky stack and
   the covered band's scale and darkening are in round-three motion below; here every band simply follows the one
   before, which is also what reduced motion and a full-page capture show. The anchors the rail links to are
   zero-height spans before each band (a jump to a sticky element lands where it is stuck, not where it sits). */
.sp-catalog { --sp-headh: 64px; --sp-stack-top: 96px; --sp-stack-step: 56px; }
.sp-show { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.sp-show > * { min-width: 0; }
.sp-rail { position: sticky; top: var(--sp-headh); z-index: 30; margin: 0 0 20px; padding: 10px 0; background: rgba(10, 15, 12, .78); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-block: 1px solid var(--sp-line); }
.sp-rail-label { display: none; }
.sp-rail-list { display: flex; gap: 8px; margin: 0; padding: 2px 0; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sp-rail-list::-webkit-scrollbar { display: none; }
.sp-rail a { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 9px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-decoration: none; border: 1px solid var(--sp-line-strong); background: var(--sp-glass); transition: border-color .2s ease, background .2s ease, color .2s ease; }
html[data-et-theme="dark"] .sp-rail a { color: var(--sp-muted); }
.sp-rail a:hover { border-color: rgba(63, 158, 150, .6); }
html[data-et-theme="dark"] .sp-rail a.is-on { color: var(--sp-text); border-color: rgba(167, 221, 214, .6); background: rgba(63, 158, 150, .2); }
.sp-rail-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: rgba(167, 221, 214, .35); transition: background .2s ease, box-shadow .2s ease; }
.sp-rail a.is-on .sp-rail-dot { background: var(--sp-accent); box-shadow: 0 0 10px 2px rgba(95, 194, 184, .6); }
@media (min-width: 1040px) {
  .sp-show { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
  .sp-rail { top: var(--sp-stack-top); margin: 0; padding: 4px 0 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; }
  .sp-rail-label { display: block; margin: 0 0 14px 14px; font-family: var(--sp-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-dim); }
  .sp-rail-list { position: relative; flex-direction: column; gap: 4px; overflow: visible; padding: 0; }
  .sp-rail-list::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 1.5px; background: linear-gradient(180deg, rgba(132, 185, 238, .5), rgba(95, 194, 184, .4) 50%, rgba(167, 221, 214, .12)); }
  .sp-rail a { position: relative; display: flex; gap: 14px; padding: 11px 14px; border-color: transparent; background: none; font-size: 16px; white-space: normal; }
  .sp-rail-dot { width: 9px; height: 9px; box-shadow: 0 0 0 4px var(--sp-bg); }
  .sp-rail a.is-on .sp-rail-dot { box-shadow: 0 0 0 4px var(--sp-bg), 0 0 14px 3px rgba(95, 194, 184, .6); }
}
.sp-bands-stack { display: block; }
.sp-band-anchor { display: block; height: 0; scroll-margin-top: calc(var(--sp-headh) + 72px); }
@media (min-width: 1040px) { .sp-band-anchor { scroll-margin-top: calc(var(--sp-stack-top) + var(--i) * var(--sp-stack-step)); } }
.sp-band-stack { position: relative; margin: 0 0 20px; padding: 20px 16px 20px; border-radius: 26px; border-color: rgba(249, 248, 243, .16); background: radial-gradient(80% 60% at 100% 0%, rgba(63, 158, 150, .14) 0%, transparent 70%), linear-gradient(180deg, #16291F 0%, #0F1B15 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -24px 50px -30px rgba(0, 0, 0, .9), var(--sp-shadow); scroll-margin-top: 0; transform-origin: 50% 0; }
.sp-band-stack:last-child { margin-bottom: 0; }
@media (min-width: 640px) { .sp-band-stack { padding: 22px 26px 26px; } }
.sp-band-stack .sp-band-head { min-height: 34px; margin-bottom: 18px; }
@media (min-width: 1040px) { .sp-band-stack .sp-band-head :is(h2, h3) { font-size: 28px; } }
/* below 1040px a band's cards are a sideways row that snaps (its own scroll, never the page's), so a band stays
   shorter than the screen and can stick */
@media (max-width: 1039px) {
  .sp-band-stack .sp-cards { display: flex; gap: 14px; margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sp-band-stack .sp-cards::-webkit-scrollbar { display: none; }
  .sp-band-stack .sp-card { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
}
@media (min-width: 640px) and (max-width: 1039px) { .sp-band-stack .sp-cards { margin: 0 -26px; padding-inline: 26px; scroll-padding-inline: 26px; } }
/* D649 (Klemen, 2026-10-31): the showcase's covers were the same lake photo eighteen times. Each card now has a
   typographic cover (partials/sprint-showcase-card): a gradient mesh in its category's colour family (three hues per
   family, --sp-cv-1..3) over faint contour rings, the Sprint's key figure set large with a short line under it, and a
   glass tile with a glyph for what that Sprint delivers. Neighbours in a band differ: each of the three cards leads
   with a different hue of the family and lays its mesh out differently (nth-child). Category colour stays the family
   hint across bands. No red anywhere; the figure is white on the deep mesh. */
.sp-cv { position: relative; isolation: isolate; margin: 0 0 16px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #0B1511; border: 1px solid rgba(249, 248, 243, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.sp-cv-mesh { position: absolute; inset: 0; z-index: -1; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  background:
    repeating-radial-gradient(circle at var(--sp-cv-rx, 88%) var(--sp-cv-ry, 110%), transparent 0 17px, rgba(255, 255, 255, .07) 17px 18px),
    radial-gradient(95% 120% at var(--sp-cv-x1, 0%) var(--sp-cv-y1, 0%), color-mix(in srgb, var(--sp-cv-lead) 95%, transparent) 0%, transparent 72%),
    radial-gradient(80% 105% at var(--sp-cv-x2, 100%) var(--sp-cv-y2, 100%), color-mix(in srgb, var(--sp-cv-mid) 90%, transparent) 0%, transparent 74%),
    radial-gradient(45% 60% at var(--sp-cv-x3, 85%) var(--sp-cv-y3, 10%), color-mix(in srgb, var(--sp-cv-hi) 70%, transparent) 0%, transparent 70%),
    linear-gradient(160deg, #13241C, #08100C);
}
.sp-cv::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(200deg, transparent 40%, rgba(6, 11, 9, .42) 100%); }
.sp-cv-fig { position: absolute; left: 18px; bottom: 34px; font-family: var(--mf-font-display); font-size: clamp(52px, 5vw, 64px); font-weight: 700; line-height: .9; letter-spacing: -.035em; color: #fff; text-shadow: 0 6px 28px rgba(0, 0, 0, .35); }
.sp-cv-unit { position: absolute; left: 20px; bottom: 14px; right: 16px; font-family: var(--sp-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cv-tile { position: absolute; right: 14px; top: 14px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #fff;
  background: linear-gradient(160deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .1)); border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 26px -12px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sp-cv-glyph { width: 26px; height: 26px; }
.sp-cv-glyph.is-claude { color: #fff; }
/* a cover with no figure: the glyph tile grows and sits where the figure would */
.sp-cv.is-glyph-only .sp-cv-tile { right: auto; top: auto; left: 18px; bottom: 40px; width: 72px; height: 72px; border-radius: 20px; }
.sp-cv.is-glyph-only .sp-cv-glyph { width: 40px; height: 40px; }
.sp-cv.is-glyph-only .sp-cv-glyph.is-claude { color: #D97757; }
.sp-cv.is-glyph-only .sp-cv-tile:has(.is-claude) { background: var(--mf-canvas); }
/* the family's three hues, one leading per card, and three mesh layouts */
.sp-catalog .sp-card:nth-child(3n+1) .sp-cv { --sp-cv-lead: var(--sp-cv-1); --sp-cv-mid: var(--sp-cv-2); --sp-cv-hi: var(--sp-cv-3); }
.sp-catalog .sp-card:nth-child(3n+2) .sp-cv { --sp-cv-lead: var(--sp-cv-2); --sp-cv-mid: var(--sp-cv-3); --sp-cv-hi: var(--sp-cv-1); --sp-cv-x1: 100%; --sp-cv-y1: 0%; --sp-cv-x2: 0%; --sp-cv-y2: 100%; --sp-cv-x3: 30%; --sp-cv-y3: 20%; --sp-cv-rx: 10%; --sp-cv-ry: -10%; }
.sp-catalog .sp-card:nth-child(3n) .sp-cv { --sp-cv-lead: var(--sp-cv-3); --sp-cv-mid: var(--sp-cv-1); --sp-cv-hi: var(--sp-cv-2); --sp-cv-x1: 50%; --sp-cv-y1: 120%; --sp-cv-x2: 100%; --sp-cv-y2: 0%; --sp-cv-x3: 0%; --sp-cv-y3: 30%; --sp-cv-rx: 50%; --sp-cv-ry: 130%; }
.sp-catalog .sp-card:hover .sp-cv-mesh { transform: scale(1.06); }
@media (max-width: 639px) { .sp-cv-tile { width: 44px; height: 44px; border-radius: 13px; } .sp-cv-glyph { width: 23px; height: 23px; } .sp-cv-fig { bottom: 32px; } }
@media (prefers-reduced-motion: reduce) { .sp-cv-mesh { transition: none; } .sp-catalog .sp-card:hover .sp-cv-mesh { transform: none; } }
.sp-catalog [data-sp-category="marketing"] { --sp-cv-1: #FFB36B; --sp-cv-2: #E9803E; --sp-cv-3: #F2CF6E; }
.sp-catalog [data-sp-category="sales"] { --sp-cv-1: #7FB8FF; --sp-cv-2: #3E7FD1; --sp-cv-3: #62D0EE; }
.sp-catalog [data-sp-category="ai"] { --sp-cv-1: #B6A4FF; --sp-cv-2: #7358DE; --sp-cv-3: #DE9CF0; }
.sp-catalog [data-sp-category="wealth"] { --sp-cv-1: #F2D27A; --sp-cv-2: #B8892E; --sp-cv-3: #E3E39A; }
.sp-catalog [data-sp-category="health"] { --sp-cv-1: #8FE3A8; --sp-cv-2: #2F9E62; --sp-cv-3: #C3E886; }
.sp-catalog [data-sp-category="performance"] { --sp-cv-1: #7FE0EC; --sp-cv-2: #2492B0; --sp-cv-3: #90B4F7; }

/* =============================================================================================== sprint-inside: the card stack */
/* D618 (replaces round three's focus rail): the head pins on the left (960px and up) and eleven cards stack in one
   column on the right; on a phone the head sits above and the cards stack full width. Each card (.sp-focus-slot,
   an <li> with its own view timeline, named inline) is sticky at one line under the site header, --sp-card-top;
   the next one slides up over it, and the covered card lifts by --sp-strip so its number and title stay in view
   above the new card, scales a little and dims (round-three motion below). This block is the static layout. */
.sp-focus { --sp-headh: 64px; --sp-strip: 50px; --sp-focus-step: 12px; --sp-card-top: calc(var(--sp-headh) + 14px); display: grid; gap: 8px; }
@media (min-width: 960px) { .sp-focus { --sp-strip: 54px; --sp-focus-step: 16px; --sp-card-top: calc(var(--sp-headh) + 28px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } }
.sp-focus-head { min-width: 0; }
@media (min-width: 960px) { .sp-focus-head { position: sticky; top: var(--sp-card-top); } .sp-focus-head .sp-head { margin-bottom: 0; } }
.sp-focus-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: sp-focus; min-width: 0; }
@media (min-width: 960px) { .sp-focus-list { gap: 20px; } }
.sp-focus-slot { min-width: 0; counter-increment: sp-focus; transform-origin: 50% 0; }
.sp-focus-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 16px 18px 18px; background: linear-gradient(180deg, #172B21 0%, #101C16 100%); border-color: rgba(249, 248, 243, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -24px 50px -30px rgba(0, 0, 0, .9), var(--sp-shadow); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sp-focus-card { background: #142219; } }
@media (min-width: 640px) { .sp-focus-card { padding: 18px 26px 24px; } }
/* the heading strip: the number and the title on one line at the card's top, the part a covered card keeps showing */
.sp-focus-card .sp-bento-text h3 { --sp-h3: 23px; display: flex; align-items: flex-start; gap: 12px; font-size: var(--sp-h3); line-height: 1.2; }
.sp-focus-card .sp-bento-text h3::before { content: counter(sp-focus, decimal-leading-zero); flex: none; font-family: var(--sp-mono); font-size: 12px; font-weight: 400; line-height: calc(var(--sp-h3) * 1.2); letter-spacing: .14em; color: var(--sp-accent); }
/* D649: the content-type tile before each title (a line icon; the prompt, plugins and agents cards: the two marks on a
   light chip, so the black ChatGPT tile and the Claude orange both read on the dark card), centred on the first line */
.sp-h3-ic { --sp-ic: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: var(--sp-ic); height: var(--sp-ic); margin-top: calc((var(--sp-h3) * 1.2 - var(--sp-ic)) / 2); box-sizing: border-box; border-radius: 10px; color: #A7DDD6; background: linear-gradient(160deg, rgba(95, 194, 184, .22), rgba(63, 158, 150, .08)); border: 1px solid rgba(167, 221, 214, .3); box-shadow: var(--sp-highlight); }
.sp-h3-ic > svg { width: 18px; height: 18px; stroke-width: 1.9; }
.sp-h3-ic.is-brands { padding: 0 7px; background: var(--mf-canvas); border-color: rgba(255, 255, 255, .5); }
.sp-h3-ic.is-brands .sp-logo { width: 18px; height: 18px; color: #D97757; }
.sp-h3-ic.is-brands .sp-logo.is-chatgpt { color: #000; }
.sp-h3-t { min-width: 0; }
.sp-focus-card .sp-bento-text p { padding-left: 32px; }
.sp-bento-text h3 { font-size: 21px; line-height: 1.2; }
@media (min-width: 640px) { .sp-bento-text h3 { font-size: 23px; } }
.sp-bento-text p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--sp-muted); }
.sp-focus-card .et-bk-text { max-height: 300px; }
/* brief section 12: the code card's mockup, a dark editor box (language tag, filename, Copy chip, five lines of HTML
   with line numbers and three token colours from the people hues). Decorative, aria-hidden; the words are template text. */
.sp-code { min-width: 0; border-radius: 16px; overflow: hidden; background: #0B1210; border: 1px solid rgba(249, 248, 243, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -24px rgba(0, 0, 0, .9); }
.sp-code-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--sp-line); background: rgba(255, 255, 255, .03); }
.sp-code-lang { flex: none; padding: 4px 8px; border-radius: 999px; background: rgba(95, 194, 184, .14); border: 1px solid rgba(95, 194, 184, .38); font: 600 11px/1 var(--sp-mono); letter-spacing: .1em; color: #A7DDD6; }
.sp-code-file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px/1.2 var(--sp-mono); color: var(--sp-muted); }
.sp-code-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(249, 248, 243, .22); background: rgba(255, 255, 255, .05); font: 600 12.5px/1 var(--mf-font-body); color: var(--sp-text); }
.sp-code-copy svg { width: 13px; height: 13px; }
.sp-code-text { margin: 0; padding: 14px 16px 16px 10px; overflow-x: auto; font: 13.5px/1.75 var(--sp-mono); color: #E6ECE8; white-space: pre; tab-size: 2; }
.sp-c-ln { display: inline-block; width: 1.4em; margin-right: 14px; text-align: right; color: rgba(249, 248, 243, .26); }
.sp-c-t { color: #84B9EE; }
.sp-c-a { color: #F2C38B; }
.sp-c-s { color: #93D3A2; }
@media (max-width: 639px) { .sp-code-head { gap: 8px; padding: 8px 10px; } .sp-code-file { font-size: 11.5px; } .sp-code-text { padding: 12px 12px 13px 6px; font-size: 11.5px; line-height: 1.7; } .sp-c-ln { margin-right: 10px; } }
@media (max-width: 639px) { .sp-focus-card .et-sprint-plan { padding: 14px 12px; } .sp-focus-card .et-plan-t { font-size: 13.5px; } .sp-focus-card .sp-rp-panel { padding: 8px; } }

/* D618, cards 07 and 08: an install panel (the plugin with one skill per lesson; three AI agents with when they run)
   in the results page's light skin, and the two Made for buttons, each with the real logo: the mark in its own
   colours (Claude orange; the ChatGPT tile black with its white knot) beside the name set in the page font. */
.sp-install { position: relative; display: grid; gap: 12px; padding: 16px 14px 14px; border-radius: 18px; background: var(--mf-surface); border: 1px solid var(--mf-limestone); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); color: var(--mf-ink); font-family: var(--mf-font-body); font-size: 15px; line-height: 1.5; }
@media (min-width: 640px) { .sp-install { padding: 20px 20px 18px; } }
.sp-install-tag { justify-self: start; padding: 4px 9px; border-radius: 999px; background: rgba(43, 95, 74, .1); font-family: var(--sp-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mf-pine); }
.sp-install-head { display: flex; align-items: center; gap: 12px; }
.sp-install-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mf-pine); color: #fff; }
.sp-install-ic svg { width: 22px; height: 22px; }
.sp-install-name { display: grid; gap: 1px; min-width: 0; }
.sp-install-name b { font-family: var(--mf-font-display); font-size: 19px; line-height: 1.2; }
.sp-install-name span { font-size: 13px; color: var(--mf-slate); }
.sp-install-what { margin: 0; font-size: 14.5px; color: var(--mf-slate); }
.sp-install-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-install-list li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--mf-limestone); background: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.sp-install-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(43, 95, 74, .12); font-family: var(--sp-mono); font-size: 11px; font-weight: 600; color: var(--mf-pine); }
.sp-install-agents { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-install-agents li { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mf-limestone); background: #fff; }
/* D680: the connector card's address chip and its three steps, one per row. */
.sp-connector-url { justify-self: start; max-width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--mf-limestone); background: var(--mf-canvas); font: 600 13.5px/1.4 var(--sp-mono); color: var(--mf-ink); overflow-wrap: anywhere; }
.sp-install-list.sp-connector-steps { grid-template-columns: minmax(0, 1fr); }
.sp-agent-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.sp-agent-top b { font-size: 15px; }
.sp-agent-when { font-family: var(--sp-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--mf-pine); }
.sp-agent-what { font-size: 13.5px; line-height: 1.45; color: var(--mf-slate); }
.sp-madefor-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
html[data-et-theme="dark"] a.sp-madefor, .sp-madefor { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 14px; border-radius: 999px; border: 1px solid var(--mf-limestone); background: #fff; color: var(--mf-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 28, 22, .08); transition: border-color .2s, box-shadow .2s; }
.sp-madefor:hover { border-color: var(--mf-pine); box-shadow: 0 4px 14px rgba(16, 28, 22, .14); }
.sp-madefor:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.sp-madefor-pre { font-size: 13.5px; color: var(--mf-slate); }
.sp-lockup { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mf-font-body); font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1; color: #141413; }
.sp-logo { flex: none; width: 1.25em; height: 1.25em; overflow: visible; }
.sp-lockup-claude .sp-logo { color: #D97757; }
.sp-lockup-chatgpt .sp-logo { color: #000; }
/* phones: the stacked cards must fit under the sticky line, so the inside cards are set tighter */
@media (max-width: 639px) {
  .sp-focus { --sp-strip: 46px; --sp-card-top: calc(var(--sp-headh) + 10px + var(--sp-strip)); }
  .sp-focus-card { gap: 12px; padding: 14px 14px 14px; }
  .sp-focus-card .sp-bento-text h3 { --sp-h3: 19px; gap: 9px; }
  /* the number and the tile run inline, so a long title wraps under them and stays within two lines of the strip */
  .sp-focus-card .sp-bento-text h3 { display: block; }
  .sp-focus-card .sp-bento-text h3::before { display: inline-block; margin-right: 9px; line-height: 1; vertical-align: 2px; }
  .sp-h3-ic { --sp-ic: 28px; margin: 0 8px 0 0; vertical-align: -6px; border-radius: 9px; }
  .sp-h3-ic > svg, .sp-h3-ic.is-brands .sp-logo { width: 16px; height: 16px; }
  .sp-h3-ic.is-brands { padding: 0 6px; gap: 4px; }
  .sp-focus-card .sp-bento-text p { padding-left: 0; margin-top: 6px; font-size: 14.5px; line-height: 1.45; }
  .sp-install { gap: 9px; padding: 12px 11px 11px; }
  .sp-install-ic { width: 36px; height: 36px; border-radius: 10px; }
  .sp-install-name b { font-size: 17px; }
  .sp-install-what { font-size: 13.5px; line-height: 1.4; }
  .sp-install-list { gap: 4px; }
  .sp-install-list li { padding: 4px 8px; gap: 7px; font-size: 12.5px; }
  .sp-install-n { width: 19px; height: 19px; font-size: 10.5px; }
  .sp-install-agents li { padding: 8px 10px; gap: 2px; }
  .sp-agent-what { font-size: 12.5px; line-height: 1.4; }
  .sp-madefor-row { gap: 6px; }
  .sp-madefor { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 8px; border-radius: 16px; }
  .sp-madefor-pre { font-size: 11px; line-height: 1.1; white-space: nowrap; }
  .sp-lockup { gap: 4px; font-size: 13.5px; }
  .sp-focus-card .et-plan-list { gap: 3px; }
  .sp-focus-card .et-plan-a { padding: 4px 9px; }
  .sp-focus-card .et-plan-n { font-size: 10.5px; }
  .sp-focus-card .et-plan-t { font-size: 13px; line-height: 1.3; }
}

/* the audio player: the product's sample file, a drawn waveform, play/pause (sprint-sales.js; native controls without it) */
.sp-player { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 20px; background: rgba(10, 15, 12, .55); border: 1px solid var(--sp-line); }
.sp-player-btn { -webkit-appearance: none; appearance: none; flex: none; width: 58px; height: 58px; margin: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--mf-canvas); background: var(--mf-g-summit); box-shadow: 0 14px 30px -12px rgba(63, 158, 150, .8), var(--sp-highlight); transition: transform .15s ease; }
.sp-player-btn:hover { transform: scale(1.04); }
.sp-player-btn:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 3px; }
.sp-player-btn svg { width: 22px; height: 22px; }
.sp-player-btn .sp-i-play { margin-left: 3px; }
.sp-player-btn .sp-i-pause, .sp-player.is-playing .sp-player-btn .sp-i-play { display: none; }
.sp-player.is-playing .sp-player-btn .sp-i-pause { display: block; }
.sp-player-main { flex: 1; min-width: 0; display: grid; gap: 10px; }
.sp-player-title { font-size: 15px; font-weight: 600; color: var(--sp-text); }
.sp-wave { position: relative; height: 56px; cursor: pointer; }
.sp-wave[hidden] { display: none; }
.sp-wave-row { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.sp-wave-row i { flex: 1 1 0; min-width: 1.5px; border-radius: 2px; background: rgba(167, 221, 214, .3); }
.sp-wave-done { clip-path: inset(0 calc(100% - var(--sp-p, 0) * 100%) 0 0); }
.sp-wave-done i { background: linear-gradient(180deg, #A7DDD6 0%, #5FC2B8 100%); }
.sp-player-time { flex: none; font-family: var(--sp-mono); font-size: 12.5px; color: var(--sp-muted); }
.sp-player-time[hidden] { display: none; }
.sp-player-audio { width: 100%; height: 40px; }
.sp-player.is-ready .sp-player-audio { display: none; }
@media (max-width: 479px) { .sp-player { gap: 12px; padding: 14px 12px; } .sp-player-btn { width: 50px; height: 50px; } .sp-wave { height: 46px; } }

/* =============================================================================================== sprint-offer */
/* D618: the offer is one centred glass card, no price and no offer detail on the sales page */
.sp-offer-one { max-width: 760px; margin: 0 auto; padding: 40px 22px 36px; text-align: center; border-color: rgba(63, 158, 150, .45); background: radial-gradient(90% 70% at 50% 0%, rgba(63, 158, 150, .2) 0%, transparent 70%), linear-gradient(180deg, rgba(249, 248, 243, .06) 0%, rgba(249, 248, 243, .02) 100%); }
@media (min-width: 640px) { .sp-offer-one { padding: 56px 48px 52px; } }
.sp-offer-one .sp-head { margin-bottom: 0; }
.sp-offer-one .sp-tile { margin-inline: auto; }
.sp-offer-go { display: grid; justify-items: center; gap: 12px; padding-top: 30px; }
@media (max-width: 479px) { .sp-offer-go { justify-items: stretch; } .sp-offer-go > .btn, .sp-offer-go > .sp-btn-ghost { width: 100%; } }

/* =============================================================================================== sprint-founder */
/* D655 (Klemen, 2026-10-31): Who's behind Mount Founder, the mountfounder.ai homepage's founder section in the Sprints
   look: a glass ID card (sticky on desktop) beside the letter, a glass stat row, and the photo gallery. Desktop: each
   row's photos grow by their own width/height ratio (--r), so a row shares one height and nothing is cropped. Under
   760px the rows dissolve (display: contents) into a 2-up grid where .is-wide spans both columns. No red. */
.sp-fd-letter { display: grid; gap: 20px; align-items: start; margin-bottom: 20px; }
@media (min-width: 900px) { .sp-fd-letter { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 48px; margin-bottom: 32px; } }
.sp-fd-card { display: grid; gap: 18px; padding: 20px; }
@media (min-width: 900px) { .sp-fd-card { position: sticky; top: calc(var(--sp-headh, 64px) + 24px); padding: 22px; } }
.sp-fd-headshot { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--sp-line); }
.sp-fd-name { display: grid; gap: 4px; }
.sp-fd-name h3 { margin: 0; font-family: var(--mf-font-display); font-size: 26px; font-weight: 650; line-height: 1.1; letter-spacing: -.015em; }
.sp-fd-name p { margin: 0; font-size: 14px; color: var(--sp-dim); }
.sp-fd-facts { display: grid; gap: 12px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--sp-line); list-style: none; font-size: 15px; line-height: 1.4; color: var(--sp-text); }
.sp-fd-facts span, .sp-fd-label { display: block; margin: 0 0 3px; font-family: var(--sp-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-accent); }
.sp-fd-social { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--sp-line); }
.sp-fd-socrow { display: flex; flex-wrap: wrap; gap: 10px; }
html[data-et-theme="dark"] a.sp-fd-soc {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  color: var(--sp-text); background: var(--sp-glass); border: 1px solid var(--sp-line-strong); box-shadow: var(--sp-highlight);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease, color .2s ease;
}
html[data-et-theme="dark"] a.sp-fd-soc:hover, html[data-et-theme="dark"] a.sp-fd-soc:focus-visible { color: #a7ddd6; border-color: rgba(63, 158, 150, .6); box-shadow: var(--sp-highlight), var(--sp-glow); transform: translateY(-1px); }
.sp-fd-soc svg { width: 22px; height: 22px; fill: currentColor; }
@media (min-width: 560px) and (max-width: 899px) {
  .sp-fd-card { grid-template-columns: 168px minmax(0, 1fr); align-items: center; column-gap: 22px; }
  .sp-fd-card .sp-fd-facts, .sp-fd-card .sp-fd-social { grid-column: 1 / -1; }
}
.sp-fd-copy { display: grid; gap: 18px; font-size: 17px; line-height: 1.72; }
@media (min-width: 960px) { .sp-fd-copy { font-size: 18px; padding-top: 6px; } }
.sp-fd-copy p { margin: 0; color: var(--sp-muted); text-wrap: pretty; }
.sp-fd-copy .sp-word { font-size: 1em; }
.sp-fd-hello { margin: 0; font-family: var(--mf-font-display); font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; }
html[data-et-theme="dark"] .sp-fd-copy .sp-fd-sign { margin-top: 4px; font-family: var(--mf-font-display); font-size: 26px; font-style: italic; font-weight: 500; color: var(--sp-text); }
.sp-fd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 20px; padding: 0; list-style: none; overflow: hidden; }
/* the third stat ("$20M → $100M+") is the longest figure: its column is wider so it never runs into the fourth */
@media (min-width: 960px) { .sp-fd-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr); margin-bottom: 24px; } }
.sp-fd-stats li { display: grid; align-content: start; gap: 6px; padding: 20px 18px; border-right: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); }
.sp-fd-stats li:nth-child(2n) { border-right: 0; }
.sp-fd-stats li:nth-last-child(-n + 2) { border-bottom: 0; }
@media (min-width: 960px) {
  .sp-fd-stats li { padding: 26px 24px; border-bottom: 0; border-right: 1px solid var(--sp-line); }
  .sp-fd-stats li:nth-child(2n) { border-right: 1px solid var(--sp-line); }
  .sp-fd-stats li:last-child { border-right: 0; }
}
.sp-fd-stats strong {
  font-family: var(--mf-font-display); font-size: clamp(24px, 2.7vw, 32px); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; white-space: nowrap;
  color: #8FD3C5; background: linear-gradient(120deg, #84B9EE 0%, #5FC2B8 52%, #93D3A2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width: 419px) { .sp-fd-stats strong { font-size: 21px; white-space: normal; } .sp-fd-stats li { padding: 16px 14px; } }
.sp-fd-stats span { font-size: 14px; line-height: 1.4; color: var(--sp-muted); }
.sp-fd-gallery { display: grid; gap: 12px; }
.sp-fd-row { display: flex; gap: 12px; }
.sp-fd-ph { position: relative; flex: var(--r, 1.7778) 1 0; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--sp-line-strong); border-radius: 16px; background: var(--sp-glass-solid); box-shadow: var(--sp-shadow); }
.sp-fd-ph img { display: block; width: 100%; height: auto; }
.sp-fd-ph figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 16px 14px;
  background: linear-gradient(to top, rgba(10, 15, 12, .92) 0%, rgba(10, 15, 12, .7) 30%, rgba(10, 15, 12, .3) 66%, rgba(10, 15, 12, 0) 100%);
  font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: .005em; color: var(--sp-text); text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
@media (max-width: 759px) {
  .sp-fd-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .sp-fd-row { display: contents; }
  .sp-fd-ph { border-radius: 12px; }
  .sp-fd-ph.is-wide { grid-column: 1 / -1; }
  .sp-fd-ph figcaption { padding: 34px 9px 8px; font-size: 11.5px; }
  .sp-fd-ph.is-wide figcaption { padding: 48px 14px 12px; font-size: 13px; }
}

/* =============================================================================================== sprint-faq */
.sp-faq { display: grid; gap: 12px; }
.sp-faq details { padding: 0; }
.sp-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px; font-family: var(--mf-font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--sp-text); border-radius: var(--sp-radius); }
/* the question is ONE flex item, so the gradient <em> inside it (| sprintword) flows inline instead of spreading as a column (Klemen, 2026-10-31) */
.sp-faq-q { flex: 1 1 auto; min-width: 0; }
.sp-faq-q .sp-word { display: inline; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--sp-accent); border-bottom: 2px solid var(--sp-accent); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease; }
.sp-faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.sp-faq .sp-faq-a { padding: 0 22px 22px; font-size: 16.5px; line-height: 1.65; color: var(--sp-muted); }

/* =============================================================================================== sprint-demo: the demo's entrance */
/* Brief 16: the copy left, a laptop-like frame right (below on a phone) holding the demo results page as an iframe,
   drawn at 1200px (420px on a phone) and scaled to the screen by sprint-sales.js [data-sp-demo]. The iframe takes no
   pointer; .sp-demo-cover makes the whole screen one link to the demo. */
.sp-demo-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .sp-demo-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; } }
.sp-demo-device { position: relative; width: 100%; max-width: 680px; margin: 0 auto; }
.sp-demo-lid { position: relative; padding: 10px 10px 12px; border-radius: 20px; background: linear-gradient(160deg, #2B3B32 0%, #111A15 55%, #0B110D 100%); border: 1px solid var(--sp-line-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 44px 90px -34px rgba(0, 0, 0, .85), 0 30px 100px -40px rgba(63, 158, 150, .55); }
.sp-demo-chrome { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 8px; }
.sp-demo-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(249, 248, 243, .22); }
.sp-demo-url { flex: 1 1 auto; min-width: 0; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(249, 248, 243, .07); font-family: var(--sp-mono); font-size: 11.5px; color: var(--sp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-demo-screen { --sp-demo-w: 1200px; --sp-demo-h: 750px; --sp-demo-s: .5; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--sp-bg, #0A0F0C); }
.sp-demo-frame { position: absolute; top: 0; left: 0; width: var(--sp-demo-w); height: var(--sp-demo-h); border: 0; transform: scale(var(--sp-demo-s)); transform-origin: 0 0; pointer-events: none; background: #0A0F0C; }
.sp-demo-cover { position: absolute; inset: 0; z-index: 2; border-radius: 10px; }
.sp-demo-cover:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; }
.sp-demo-base { height: 14px; margin: 0 -5%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #33453B 0%, #18241D 100%); border: 1px solid var(--sp-line); border-top: 0; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .9); }
@media (max-width: 719px) {
  .sp-demo-screen { aspect-ratio: 4 / 5; }
  .sp-demo-lid { padding: 8px 8px 10px; border-radius: 18px; }
  .sp-demo-base { margin: 0 -3%; height: 10px; }
}

/* D668 (Klemen, 2026-11-01): the demo's three-step strip -- pick a result, answer, get the Sprint -- all on screen at
   once, so it reads in a glance. .is-play (sprint-sales.js, once on screen) runs one highlight across it: each card
   lights for a beat, a pulse runs along the line, and the Sprint card keeps its glow. Without the script or with
   reduced motion: the resting state, the Sprint card lit. */
.sp-demo-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; color: inherit; text-decoration: none; }
.sp-demo-flow:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 6px; border-radius: 18px; }
.sp-df-beat { display: flex; flex-direction: column; min-width: 0; }
.sp-df-k { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--sp-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); }
.sp-df-k b { font-weight: 600; color: var(--sp-accent); }
.sp-df-card { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(14, 26, 20, .82); border: 1px solid var(--sp-line-strong); box-shadow: var(--sp-highlight), 0 22px 44px -26px rgba(0, 0, 0, .9); transition: border-color .3s, box-shadow .3s; }
.sp-df-beat.is-last .sp-df-card { border-color: rgba(167, 221, 214, .6); box-shadow: var(--sp-highlight), 0 0 0 1px rgba(167, 221, 214, .25), 0 0 34px -6px rgba(95, 194, 184, .55); }
.sp-df-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--sp-text); background: rgba(249, 248, 243, .05); border: 1px solid var(--sp-line); }
.sp-df-chip svg { width: 14px; height: 14px; flex: none; color: #A7DDD6; }
.sp-df-chip.is-on { background: rgba(95, 194, 184, .16); border-color: rgba(167, 221, 214, .5); }
.sp-df-ghost { height: 34px; border-radius: 10px; background: rgba(249, 248, 243, .035); border: 1px dashed rgba(249, 248, 243, .1); }
.sp-df-ghost.is-short { width: 70%; }
.sp-df-typed { padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; color: var(--sp-muted); background: rgba(0, 0, 0, .22); border: 1px solid rgba(167, 221, 214, .3); }
.sp-df-typed::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #A7DDD6; }
.sp-df-title { font-family: var(--mf-font-display); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--sp-text); }
.sp-df-step { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; line-height: 1.3; color: var(--sp-muted); border: 1px solid var(--sp-line); }
.sp-df-step.is-open { color: var(--sp-text); border-color: rgba(167, 221, 214, .5); background: rgba(95, 194, 184, .12); }
.sp-df-step em { flex: none; font-style: normal; font-family: var(--sp-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #A7DDD6; }
.sp-df-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sp-df-tags span { padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #0A0F0C; background: linear-gradient(120deg, #84B9EE, #5FC2B8 52%, #93D3A2); }
.sp-df-line { position: relative; justify-self: center; width: 1.5px; height: 22px; background: rgba(167, 221, 214, .35); }
.sp-df-line i { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #F9F8F3; box-shadow: 0 0 10px 3px rgba(95, 194, 184, .8); opacity: 0; }
@media (min-width: 720px) {
  .sp-demo-flow { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1.08fr); gap: 0; align-items: stretch; }
  .sp-df-line { align-self: center; width: 100%; height: 1.5px; margin-top: 20px; }
  .sp-df-line i { top: 50%; left: 0; margin: -3.5px 0 0 -3.5px; }
}
@media (min-width: 960px) { .sp-demo-grid:has(.sp-demo-flow) { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; } }
@keyframes sp-df-lit { 0%, 100% { border-color: var(--sp-line-strong); box-shadow: var(--sp-highlight), 0 22px 44px -26px rgba(0, 0, 0, .9); } 25%, 60% { border-color: rgba(167, 221, 214, .75); box-shadow: var(--sp-highlight), 0 0 0 1px rgba(167, 221, 214, .3), 0 0 34px -4px rgba(95, 194, 184, .7); } }
@keyframes sp-df-land { 0% { border-color: var(--sp-line-strong); box-shadow: var(--sp-highlight), 0 22px 44px -26px rgba(0, 0, 0, .9); } 40% { border-color: rgba(167, 221, 214, .9); box-shadow: var(--sp-highlight), 0 0 0 1px rgba(167, 221, 214, .4), 0 0 46px 0 rgba(95, 194, 184, .8); } }
@keyframes sp-df-run-y { 0% { opacity: 1; top: 0; } 90% { opacity: 1; } 100% { opacity: 0; top: 100%; } }
@keyframes sp-df-run-x { 0% { opacity: 1; left: 0; } 90% { opacity: 1; } 100% { opacity: 0; left: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .sp-demo-flow.is-play .sp-df-beat:not(.is-last) .sp-df-card { animation: sp-df-lit .6s ease calc(var(--k) * .55s) both; }
  .sp-demo-flow.is-play .sp-df-beat.is-last .sp-df-card { animation: sp-df-land .7s ease 1.1s backwards; }
  .sp-demo-flow.is-play .sp-df-line i { animation: sp-df-run-y .3s ease-in calc(.3s + var(--k) * .55s) both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 720px) {
  .sp-demo-flow.is-play .sp-df-line i { animation-name: sp-df-run-x; }
}


/* =============================================================================================== sprint-cta */
.sp-close { text-align: center; padding-bottom: 120px; }
.sp-close-card { padding: 56px 22px; max-width: 920px; margin: 0 auto; overflow: hidden; }
@media (min-width: 640px) { .sp-close-card { padding: 80px 48px; } }
.sp-close-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(70% 80% at 82% 0%, rgba(212, 168, 87, .2) 0%, transparent 60%), radial-gradient(80% 90% at 50% 120%, rgba(46, 111, 64, .55) 0%, transparent 70%); }
.sp-close h2 { font-size: clamp(34px, 5.6vw, 60px); line-height: 1.03; letter-spacing: -.02em; }
.sp-close p { margin: 18px auto 0; max-width: 36em; font-size: 18px; color: var(--sp-muted); }

/* =============================================================================================== round-two motion */
/* Scroll-driven CSS only, switched off under prefers-reduced-motion; content never fades below .72 opacity. Without
   scroll timelines everything is simply shown in its final state: the ridge drawn, the camps lit, the checklist
   ticked, the phone's page scrollable by hand. */
@keyframes sp-chip-in { from { opacity: .72; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes sp-phone-scroll { from { transform: none; } to { transform: translateY(calc(-100% + var(--sp-phone-h) - 22px)); } }
@keyframes sp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sp-dot { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* D665: the dot and the ridge on the cards' clock: camp i is reached at i/8 of the range (step i+1's card locking
   into the stack), the summit at 8/8 (the summit card locking in), so the path's uneven segments land on time */
@keyframes sp-dot-steps { 0% { offset-distance: 0%; } 12.5% { offset-distance: 12.7%; } 25% { offset-distance: 22.8%; } 37.5% { offset-distance: 37%; } 50% { offset-distance: 48.3%; } 62.5% { offset-distance: 62.5%; } 75% { offset-distance: 73.9%; } 87.5% { offset-distance: 86.9%; } 100% { offset-distance: 100%; } }
@keyframes sp-draw-steps { 0% { stroke-dashoffset: 1; } 12.5% { stroke-dashoffset: .873; } 25% { stroke-dashoffset: .772; } 37.5% { stroke-dashoffset: .63; } 50% { stroke-dashoffset: .517; } 62.5% { stroke-dashoffset: .375; } 75% { stroke-dashoffset: .261; } 87.5% { stroke-dashoffset: .131; } 100% { stroke-dashoffset: 0; } }
@keyframes sp-camp { from { fill: #0E2418; stroke: rgba(167, 221, 214, .55); } to { fill: #A7DDD6; stroke: #A7DDD6; } }
@keyframes sp-alt-camp { from { fill: #0E2418; stroke-opacity: .5; } to { fill: var(--c); stroke-opacity: 1; } }
@keyframes sp-alt-fade { from { opacity: .35; } to { opacity: 1; } }
@keyframes sp-world-shrink { from { transform: none; } to { transform: scale(.46); } }
@keyframes sp-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes sp-range-in { from { opacity: 0; transform: translateY(28px) scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes sp-tick { from { background: var(--mf-surface); border-color: var(--mf-line); color: transparent; } to { background: var(--mf-pine); border-color: var(--mf-pine); color: var(--mf-surface); } }
.sp-phone-screen { overflow-y: auto; scrollbar-width: none; }
.sp-phone-screen::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sp-hero-phone { animation: sp-rise .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .sp-chip-float { animation: sp-chip-in .8s calc(.55s + var(--i) * .16s) cubic-bezier(.2, .7, .2, 1) both; } /* enter once, then rest: no endless bob over a backdrop-filter (it flickered a monitor) */
  @supports (animation-timeline: scroll()) {
    .sp-phone-screen { overflow: hidden; }
    .sp-phone-scroll { animation: sp-phone-scroll linear both; animation-timeline: scroll(root block); animation-range: var(--sp-ph-a, 0px) var(--sp-ph-b, 95vh); } /* D650: sprint-sales.js starts it once the whole phone is on screen */
  }
  @supports (animation-timeline: view()) {
    .sp-trail-line { animation: sp-draw linear both; animation-timeline: --sp-trail; animation-range: contain 0% contain 100%; }
    .sp-trail-dot { animation: sp-dot linear both, sp-hide linear both; animation-timeline: --sp-trail, --sp-end; animation-range: contain 0% contain 100%, cover 0% cover 10%; }
    .sp-trail-camps circle { animation: sp-camp linear both; animation-timeline: --sp-trail; animation-range: contain var(--a) contain calc(var(--a) + 2.5%); }
    /* the next sprints' trails draw while the following card rises through the viewport (D650: on phones too, where
       the drawing now stays pinned) */
    .sp-alt-line { animation: sp-draw linear both; animation-timeline: var(--tl); animation-range: entry 0% entry 100%; }
    .sp-alt-camp, .sp-alt-top { animation: sp-alt-camp linear both; animation-timeline: var(--tl); animation-range: entry calc(var(--a) * .96) entry calc(var(--a) * .96 + 3%); }
    .sp-alt-ring { animation: sp-alt-fade linear both; animation-timeline: var(--tl); animation-range: entry calc(var(--a) * .96) entry calc(var(--a) * .96 + 3%); }
    .sp-trail.is-reached .sp-fx-label { animation: sp-hide linear both; animation-timeline: --sp-end; animation-range: cover 0% cover 8%; }
    .sp-alt text { animation: sp-alt-fade linear both, sp-hide linear both; animation-timeline: var(--tl), --sp-end; animation-range: entry calc(var(--a) * .96) entry calc(var(--a) * .96 + 3%), cover 0% cover 8%; }
    /* D650: the onward card in, the world shrinks into the range's foot and the range draws its five trails (the end
       sentinel right after the card is the clock; a stuck card's own timeline stalls) */
    .sp-trail-world { animation: sp-world-shrink linear both; animation-timeline: --sp-end; animation-range: cover 0% cover 26%; }
    .sp-world-back { animation: sp-show linear both; animation-timeline: --sp-end; animation-range: cover 0% cover 16%; }
    .sp-range { animation: sp-range-in linear both; animation-timeline: --sp-end; animation-range: cover 4% cover 28%; }
    .sp-range-line { animation: sp-draw linear both; animation-timeline: --sp-end; animation-range: cover calc(16% + var(--d) * 4%) cover calc(34% + var(--d) * 4%); }
    .sp-range-top, .sp-range-ring { animation: sp-show linear both; animation-timeline: --sp-end; animation-range: cover calc(33% + var(--d) * 4%) cover calc(36% + var(--d) * 4%); }
    .sp-rp .et-bk-check .et-bk-box { animation: sp-tick linear both; animation-timeline: --sp-check; animation-range: cover calc(28% + var(--i) * 7%) cover calc(31% + var(--i) * 7%); }
  }
  /* Astra's step stack: each lesson card sticks a little below the one before, so they pile up beside the trail. */
  @media (min-height: 640px) {
    .sp-camps { gap: 16vh; }
    .sp-camp-card, .sp-summit, .sp-next-sprint { position: sticky; top: calc(76px + var(--i) * 10px); }
    .sp-summit, .sp-next-sprint { margin-top: 16vh; }
    .sp-trail-end { margin-top: 0; }
    /* D650: room after the onward card while the range draws, then the section lets go. Content, not padding: a
       sticky card stays inside its container's content box, so padding would release it early. */
    .sp-trail-list::after { content: ""; display: block; height: 46vh; }
  }
  /* D650 (Klemen): phones. The drawing pins under the header and the cards stack in the lower part of the screen, so the
     trails filling in stay in view until the last card. The drawing's bottom margin (cancelled by the list's) makes
     it let go together with the stuck cards instead of after them. */
  @media (max-width: 959px) and (min-height: 700px) {
    .sp-trail { gap: 0; }
    /* an opaque band the width of the screen (a shadow clipped to the sides; shadows add no scroll width), so a card that lets
       go slides under the drawing, never over it; its bottom margin = the stuck onward card's bottom minus its own */
    .sp-trail-art { position: sticky; top: 64px; z-index: 2; padding-top: 6px; margin-bottom: calc(4vh + 236px); background: var(--sp-bg); box-shadow: 0 0 0 100vmax var(--sp-bg); clip-path: inset(0 -100vmax); }
    .sp-trail-box { max-width: none; width: min(100%, calc((50vh - 92px) * .6875)); }
    .sp-trail-list { position: relative; z-index: 1; margin-top: calc(-4vh - 236px + 36px); }
    .sp-trail-label { position: sticky; top: calc(54vh - 30px); margin-bottom: 8px; }
    .sp-camps { gap: 24vh; }
    .sp-camp-card, .sp-summit, .sp-next-sprint { top: calc(54vh + var(--i) * 6px); }
    .sp-summit, .sp-next-sprint { margin-top: 24vh; }
    .sp-trail { --sp-s: calc(46vh); --sp-e: calc(100% - 30vh - 48px); }
    /* D665 (Klemen, 2026-11-01): the dot reached the summit while step 6 was on top -- the camps' contain range ends
       when the last card enters at the bottom. Now the range runs from step 1 locking in (the list's top at the
       cards' sticky top, --sp-s) to the summit card locking in (the list's bottom one gap above the summit's sticky
       top, --sp-e); camp i lights at --t = i/8 of it. */
    @supports (animation-timeline: view()) {
      .sp-trail-line { animation: sp-draw-steps linear both; animation-timeline: --sp-trail; animation-range: cover var(--sp-s) cover var(--sp-e); }
      .sp-trail-dot { animation: sp-dot-steps linear both, sp-hide linear both; animation-timeline: --sp-trail, --sp-end; animation-range: cover var(--sp-s) cover var(--sp-e), cover 0% cover 10%; }
      .sp-trail-camps circle { animation-range: cover calc(var(--sp-s) * (1 - var(--t)) + var(--sp-e) * var(--t)) cover calc(var(--sp-s) * (1 - var(--t)) + var(--sp-e) * var(--t) + 1.5%); }
    }
  }
  @media (min-width: 960px) and (min-height: 640px) {
    .sp-camps { gap: 22vh; }
    .sp-camp-card, .sp-summit, .sp-next-sprint { top: calc(96px + var(--i) * 14px); }
    .sp-summit, .sp-next-sprint { margin-top: 22vh; }
    .sp-trail { --sp-s: calc(100vh - 96px); --sp-e: calc(100% - 208px + 22vh); }
    /* D665 (Klemen, 2026-11-01): the dot reached the summit while step 6 was on top -- the camps' contain range ends
       when the last card enters at the bottom. Now the range runs from step 1 locking in (the list's top at the
       cards' sticky top, --sp-s) to the summit card locking in (the list's bottom one gap above the summit's sticky
       top, --sp-e); camp i lights at --t = i/8 of it. */
    @supports (animation-timeline: view()) {
      .sp-trail-line { animation: sp-draw-steps linear both; animation-timeline: --sp-trail; animation-range: cover var(--sp-s) cover var(--sp-e); }
      .sp-trail-dot { animation: sp-dot-steps linear both, sp-hide linear both; animation-timeline: --sp-trail, --sp-end; animation-range: cover var(--sp-s) cover var(--sp-e), cover 0% cover 10%; }
      .sp-trail-camps circle { animation-range: cover calc(var(--sp-s) * (1 - var(--t)) + var(--sp-e) * var(--t)) cover calc(var(--sp-s) * (1 - var(--t)) + var(--sp-e) * var(--t) + 1.5%); }
    }
    .sp-trail-list::after { height: 52vh; } /* D650: the drawing stays stuck while Sprint 3 draws its trail and the range rises */
    .sp-trail { margin-bottom: calc(-1 * var(--sp-art-mb, -203px)); } /* the drawing's overhang, kept clear of the next section */
    .sp-trail-art { margin-bottom: var(--sp-art-mb, -203px); } /* lets go with the stuck onward card (a negative margin box keeps it stuck past the list end by the difference) */
  }
}

/* =============================================================================================== round-three motion */
/* The showcase's stack and the inside focus rail (brief 10 C). Scroll-driven CSS only, switched off under
   prefers-reduced-motion (everything then sits in its final state, nothing sticks); nothing fades below .72
   opacity; at rest, where a full-page capture looks, every band and card is in its normal place. */
@keyframes sp-covered { to { transform: scale(.94); filter: brightness(.6) saturate(.85); } }
@keyframes sp-covered-lift { to { transform: translateY(calc(-1 * var(--sp-strip))) scale(.96); filter: brightness(.6) saturate(.85); } }
@media (prefers-reduced-motion: no-preference) and (min-height: 640px) {
  /* the stack: each band sticks a step below the one before; the next one slides up over it */
  .sp-catalog { --sp-stack-top: calc(var(--sp-headh) + 70px); --sp-stack-step: 10px; }
  .sp-band-stack { position: sticky; top: calc(var(--sp-stack-top) + var(--i) * var(--sp-stack-step)); }
  /* the card stack (D618): every card sticks at one line; the next one slides up over it */
  /* Klemen 2026-10-31 (D626): like the catalog bands, every card sticks one step lower than the one before, so the
     cards behind it stay visible as a pile of edges instead of being covered outright */
  .sp-focus-slot { position: sticky; top: calc(var(--sp-card-top) + var(--i) * var(--sp-focus-step)); }
  @supports (animation-timeline: view()) {
    /* the covered band: its timeline is the next band's (named inline, scoped on .sp-bands) */
    .sp-band-stack.has-next { animation: sp-covered linear both; animation-timeline: var(--sp-next); animation-range: entry 0% contain 0%; }
    /* the covered card: lifts one heading strip while the next card rises (its timeline), so the strip stays in view */
    .sp-focus-slot.has-next { animation: sp-covered linear both; animation-timeline: var(--sp-next); animation-range: entry 0% contain 0%; }
    /* the checklist's ticks fill while its card rises, before it sticks (a stuck card's own timeline stalls) */
    .sp-focus-slot .et-bk-check .et-bk-box { animation-range: cover calc(14% + var(--i) * 6%) cover calc(17% + var(--i) * 6%); }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1040px) and (min-height: 700px) {
  .sp-catalog { --sp-stack-top: 96px; --sp-stack-step: 56px; }
}

/* =============================================================================================== start + explore pages */
.sp-page { padding: 48px 0 96px; min-height: calc(100vh - 160px); }
@media (min-width: 960px) { .sp-page { padding: 80px 0 120px; } }
.sp-page-head { max-width: 780px; margin: 0 auto 40px; text-align: center; }
.sp-page-head h1 { font-size: clamp(38px, 6.4vw, 68px); line-height: 1.02; letter-spacing: -.025em; }
.sp-page-head p:not(.sp-eyebrow) { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--sp-muted); }
@media (min-width: 960px) { .sp-page-head p:not(.sp-eyebrow) { font-size: 20px; } }

.sp-under { margin-top: 28px; text-align: center; }

.sp-flow { max-width: 760px; margin: 0 auto; }
.sp-flow-card { padding: 28px 20px; }
@media (min-width: 640px) { .sp-flow-card { padding: 36px 34px; } }
.sp-back { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--sp-line-strong); font-size: 14.5px; font-weight: 600; color: var(--sp-text); }
.sp-back:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.sp-back svg { width: 16px; height: 16px; }
.sp-q h2 { margin-top: 10px; font-size: clamp(26px, 3.6vw, 34px); line-height: 1.12; }
.sp-q-help { margin-top: 8px; font-size: 15.5px; color: var(--sp-dim); }
.sp-q-opts { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 640px) { .sp-q-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-q-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--sp-line-strong); background: rgba(249, 248, 243, .04); font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--sp-text); transition: border-color .15s ease, background .15s ease; }
.sp-q-opt::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--sp-line-strong); }
.sp-q-opt:hover { border-color: rgba(63, 158, 150, .65); }
.sp-q-opt[aria-checked="true"] { border-color: var(--sp-water); background: rgba(63, 158, 150, .16); }
.sp-q-opt[aria-checked="true"]::before { border-color: var(--sp-accent); background: radial-gradient(circle, var(--sp-accent) 0 45%, transparent 50%); }
.sp-q-opt:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .sp-q:not([hidden]), [data-sp-view]:not([hidden]) { animation: sp-fade .35s ease both; } }

.sp-text label { display: block; font-family: var(--mf-font-display); font-size: clamp(21px, 2.8vw, 26px); line-height: 1.25; font-weight: 600; color: var(--sp-text); }
.sp-text textarea { display: block; box-sizing: border-box; width: 100%; min-height: 160px; margin-top: 18px; padding: 16px 18px; resize: vertical; font: 400 17px/1.55 var(--mf-font-body); color: var(--sp-text); background: rgba(10, 15, 12, .55); border: 1px solid var(--sp-line-strong); border-radius: 16px; }
.sp-text textarea::placeholder { color: var(--sp-dim); opacity: 1; }
.sp-text textarea:focus { outline: none; border-color: var(--sp-water); box-shadow: 0 0 0 3px rgba(63, 158, 150, .3); }
/* Dictation: the mic sits in the box's bottom-right corner; the mirror lies over the textarea with the typed text
   transparent and only the interim words painted, lighter (pointer-events off). The pulse runs only while
   listening, never under prefers-reduced-motion. */
.sp-text-box { position: relative; margin-top: 18px; }
.sp-text-box textarea { margin-top: 0; }
.sp-text-mirror { position: absolute; inset: 0; box-sizing: border-box; padding: 16px 18px; border: 1px solid transparent; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; font: 400 17px/1.55 var(--mf-font-body); color: transparent; pointer-events: none; }
.sp-text-mirror:empty { display: none; }
.sp-text-interim { color: var(--sp-dim); }
.sp-text-box.has-mic textarea, .sp-text-box.has-mic .sp-text-mirror { padding-bottom: 60px; }
.sp-mic { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--sp-line-strong); background: rgba(249, 248, 243, .06); color: var(--sp-muted); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.sp-mic svg { width: 19px; height: 19px; }
.sp-mic:hover { color: var(--sp-text); background: rgba(249, 248, 243, .12); }
.sp-mic:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.sp-mic[aria-pressed="true"] { color: var(--mf-ink); background: var(--sp-accent); border-color: var(--sp-accent); }
.sp-text-box.is-listening textarea { border-color: var(--sp-water); }
.sp-text-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sp-listen { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sp-accent); }
.sp-listen::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-accent); }
.sp-listen.is-blocked { color: var(--sp-muted); font-weight: 500; }
.sp-listen.is-blocked::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sp-mic[aria-pressed="true"] { animation: sp-mic-pulse 1.6s ease-out infinite; }
  .sp-text-box.is-listening ~ .sp-text-row .sp-listen::before, .sp-text-box.is-listening ~ .sp-tell-meta .sp-listen::before { animation: sp-mic-dot 1.6s ease-in-out infinite; }
}
@keyframes sp-mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(167, 221, 214, .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(167, 221, 214, 0); } }
@keyframes sp-mic-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.sp-text-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.sp-count { font-family: var(--sp-mono); font-size: 12.5px; color: var(--sp-dim); }
.sp-error { margin-top: 12px; font-size: 15px; color: var(--mf-wood); }
.sp-text .btn[disabled], .sp-text .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; transform: none; }
/* D659: step 4's attachments: the paperclip button and hint, one glass chip per file (name, size, read state, x). */
.sp-files { margin-top: 12px; }
.sp-files-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sp-files-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px 8px 12px; border-radius: 999px; border: 1px solid var(--sp-line-strong); background: rgba(249, 248, 243, .06); font-size: 15px; font-weight: 600; color: var(--sp-text); transition: background .15s ease, border-color .15s ease; }
.sp-files-btn svg { flex: none; width: 18px; height: 18px; color: var(--sp-accent); }
.sp-files-btn:hover { background: rgba(249, 248, 243, .12); }
.sp-files-btn:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.sp-files-hint { font-size: 13.5px; color: var(--sp-dim); }
.sp-files-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.sp-file { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px solid var(--sp-line-strong); background: rgba(10, 15, 12, .45); font-size: 14.5px; color: var(--sp-text); }
.sp-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sp-file-size { flex: none; font-family: var(--sp-mono); font-size: 12px; color: var(--sp-dim); }
.sp-file-state { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sp-muted); }
.sp-file.is-ready .sp-file-state { color: var(--sp-accent); }
.sp-file.is-ready .sp-file-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sp-accent); }
.sp-file.is-failed { border-color: rgba(203, 153, 104, .45); }
.sp-file.is-failed .sp-file-state { color: var(--mf-wood); }
.sp-file.is-reading .sp-file-state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(167, 221, 214, .3); border-top-color: var(--sp-accent); }
@media (prefers-reduced-motion: no-preference) { .sp-file.is-reading .sp-file-state::before { animation: sp-file-spin .8s linear infinite; } }
@keyframes sp-file-spin { to { transform: rotate(360deg); } }
.sp-file-x { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; font-size: 20px; line-height: 1; color: var(--sp-muted); }
.sp-file-x:hover { color: var(--sp-text); background: rgba(249, 248, 243, .1); }
.sp-file-x:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 1px; }
.sp-files-error { margin-top: 10px; }
.sp-text.is-drop .sp-text-box textarea { border-color: var(--sp-water); border-style: dashed; box-shadow: 0 0 0 3px rgba(63, 158, 150, .3); }
@media (max-width: 480px) {
  .sp-file { flex-wrap: wrap; row-gap: 2px; padding-left: 12px; }
  .sp-file-name { flex-basis: calc(100% - 44px); }
  .sp-file-x { order: 2; margin-left: auto; }
  .sp-file-size { order: 3; }
  .sp-file-state { order: 4; }
}
.sp-results-head { margin: 40px 0 20px; text-align: center; }
.sp-results-head h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.sp-retry { all: unset; cursor: pointer; font-weight: 600; color: var(--sp-accent); text-decoration: underline; text-underline-offset: 4px; }
.sp-retry:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; border-radius: 4px; }
.sp-pool { display: none !important; }

/* The engine (brief 13): one card that advances, a thin progress line ("1 of 4") with the back link on its left. */
.sp-engine-head { margin-bottom: 32px; }
.sp-engine-card { overflow: hidden; }
.sp-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.sp-progress .sp-back { margin: 0; padding: 6px 12px 6px 8px; font-size: 14px; }
.sp-progress .sp-back[hidden] { display: none; }
.sp-progress-label { margin-left: auto; font-family: var(--sp-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-accent); }
.sp-progress-bar { height: 3px; margin: 14px 0 26px; border-radius: 999px; background: rgba(249, 248, 243, .1); overflow: hidden; }
.sp-progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #84B9EE, #5FC2B8 60%, #93D3A2); transition: width .35s ease; }
@media (prefers-reduced-motion: reduce) { .sp-progress-bar span { transition: none; } }
.sp-q h2 { margin-top: 0; }
.sp-text-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sp-text-head label { flex: 1 1 auto; }
.sp-text-help { margin-top: 10px; }
/* D680: step 4's quiet connector note, under the help text. */
.sp-connector-note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--sp-muted); }
.sp-text-box.is-listening textarea::placeholder { color: transparent; }
/* The "Tell us" box ABOVE steps 1-3's options (partials/sprint-tell, D646): the full width of the card (both option
   columns), one line high and growing as they type (sprint-start.js, up to 160px, then it scrolls), the mic on its
   right at the first line; words in it give it the selected look (.is-on). Continue sits under the options. */
.sp-tell { margin-top: 18px; }
.sp-tell + .sp-q-opts { margin-top: 14px; }
.sp-tell-meta { margin: 6px 0 0; min-height: 0; font-size: 14px; color: var(--sp-muted); }
.sp-tell-meta:has(.sp-listen[hidden]) { display: none; }
.sp-tell-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--sp-muted); }
.sp-tell-box { margin-top: 0; }
.sp-tell-box textarea, .sp-tell-box .sp-text-mirror { padding: 13px 16px; font: 400 16px/1.5 var(--mf-font-body); }
.sp-tell-box textarea { display: block; box-sizing: border-box; width: 100%; min-height: 0; margin: 0; resize: none; color: var(--sp-text); background: rgba(249, 248, 243, .04); border: 1px solid var(--sp-line-strong); border-radius: 14px; transition: border-color .15s ease, background .15s ease; }
.sp-tell-box textarea::placeholder { color: var(--sp-dim); opacity: 1; }
.sp-tell-box textarea:hover { border-color: rgba(63, 158, 150, .65); }
.sp-tell-box textarea:focus { outline: none; border-color: var(--sp-water); box-shadow: 0 0 0 3px rgba(63, 158, 150, .3); }
.sp-tell-box.is-on textarea, .sp-tell-box.is-listening textarea { border-color: var(--sp-water); background: rgba(63, 158, 150, .16); }
.sp-tell-box.has-mic textarea, .sp-tell-box.has-mic .sp-text-mirror { padding-right: 62px; padding-bottom: 13px; }
.sp-tell-box textarea { overflow-y: hidden; }
.sp-tell-box textarea:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tell-box .sp-mic { top: 6px; bottom: auto; right: 8px; margin-top: 0; }
.sp-tell-row { margin-top: 16px; }
.sp-tell-row .btn { margin-left: auto; }
.sp-tell-row .btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 479px) { .sp-tell-row .btn { flex: 1 1 100%; justify-content: center; } }
/* D658: the engine loader. An orb of three soft rings breathes; statuses arrive one by one: the active one shimmers
   (a light sweep through the text, as in the Claude app), done ones turn to a tick, waiting ones stay faint. */
.sp-loading { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 44px 24px 40px; text-align: center; }
.sp-loading-orb { position: relative; width: 56px; height: 56px; }
.sp-loading-orb span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(95, 194, 184, .55); }
.sp-loading-orb span:nth-child(2) { inset: 10px; border-color: rgba(132, 185, 238, .6); }
.sp-loading-orb span:nth-child(3) { inset: 20px; border: 0; background: linear-gradient(135deg, #84B9EE, #5FC2B8 55%, #93D3A2); box-shadow: 0 0 22px rgba(95, 194, 184, .55); }
.sp-loading-title { margin: 0; font-family: var(--mf-font-display); font-size: clamp(21px, 2.6vw, 25px); color: var(--sp-text); outline: none; }
.sp-loading-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; text-align: left; width: min(100%, 400px); }
.sp-loading-step { display: flex; align-items: center; gap: 12px; font-size: 15.5px; line-height: 1.35; color: var(--sp-dim); opacity: .38; transform: translateY(4px); transition: opacity .45s ease, transform .45s ease, color .45s ease; }
.sp-loading-step.is-on, .sp-loading-step.is-done { opacity: 1; transform: none; }
.sp-loading-step.is-done { color: var(--sp-muted, var(--sp-dim)); }
.sp-loading-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(249, 248, 243, .22); color: transparent; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.sp-loading-mark svg { width: 12px; height: 12px; }
.sp-loading-step.is-on .sp-loading-mark { border-color: var(--sp-water); border-top-color: transparent; }
.sp-loading-step.is-done .sp-loading-mark { background: rgba(95, 194, 184, .18); border-color: rgba(95, 194, 184, .6); color: #8FD3C5; }
.sp-loading-step.is-on .sp-loading-text { color: var(--sp-text); }
@media (prefers-reduced-motion: no-preference) {
  .sp-loading-orb span:nth-child(1) { animation: sp-orb 2.4s ease-in-out infinite; }
  .sp-loading-orb span:nth-child(2) { animation: sp-orb 2.4s ease-in-out .3s infinite; }
  .sp-loading-orb span:nth-child(3) { animation: sp-orb-core 2.4s ease-in-out infinite; }
  .sp-loading-step.is-on .sp-loading-mark { animation: sp-spin .9s linear infinite; }
  .sp-loading-step.is-on .sp-loading-text {
    background: linear-gradient(90deg, var(--sp-text) 0%, var(--sp-text) 35%, #8FD3C5 50%, var(--sp-text) 65%, var(--sp-text) 100%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: sp-shimmer 1.8s linear infinite;
  }
}
@keyframes sp-orb { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: .35; } }
@keyframes sp-orb-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(.86); } }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.sp-engine-results .sp-results-head:first-child { margin-top: 8px; }
.sp-results-head p { max-width: 620px; margin: 12px auto 0; font-size: 17px; line-height: 1.55; color: var(--sp-muted); }
.sp-ideas-block { margin-top: 56px; }
/* D648: on every door but Explore the custom ideas come first (sprint-start.js moves the block). */
.sp-engine-results.is-ideas-first .sp-ideas-block { margin-top: 0; }
.sp-engine-results.is-ideas-first .sp-ideas-block:not([hidden]) + [data-sp-matches] { margin-top: 56px; }
.sp-idea { background: linear-gradient(160deg, rgba(132, 185, 238, .10) 0%, rgba(95, 194, 184, .06) 45%, rgba(249, 248, 243, .03) 100%); border-color: rgba(167, 221, 214, .22); }
.sp-idea .sp-card-title { font-size: 21px; }
.sp-idea .sp-card-promise { -webkit-line-clamp: 4; margin-bottom: 20px; }
.sp-idea .sp-card-promise + .sp-card-go { margin-top: auto; }
/* D651: "Because you said" -- the owner's own words the idea answers, under the Custom-created tag. */
.sp-card-echo { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--sp-muted); }
.sp-card-echo q { font-style: italic; quotes: "\201C" "\201D"; overflow-wrap: anywhere; }
.sp-card-echo[hidden] { display: none; }
.sp-results-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 44px; }
.sp-cta-band { margin-top: 64px; padding: 44px 22px; text-align: center; }
.sp-cta-band h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.08; }
.sp-cta-band .sp-actions { justify-content: center; }

/* =============================================================================================== sprint-paths */
/* Your own Sprint (brief 4.3b, one engine since brief 13): ONE wide glass card after the showcase. Its graphic
   (.sp-pf, aria-hidden) is the engine in three beats, a row from 1000px, a centred column below: answer chips over the
   text box with the mic, six custom-created cards (3 x 2, 2 x 3 on a phone; one picked) and the chosen Sprint as a
   results-page card. Between beats a fixed 40 x 12 fibre (turned upright on a phone) carries a pulse, a
   dash on pathLength 100 moved by stroke-dashoffset only; it and the caret run only while .sp-paths.is-live
   (sprint-sales.js) and never under reduced motion, which shows the fibres simply lit. Text never under 11px. */
.sp-path { padding: 14px 14px 24px; }
@media (min-width: 640px) { .sp-path { padding: 18px 18px 30px; } }
.sp-path-copy { display: grid; gap: 22px; margin: 28px 10px 0; }
@media (min-width: 900px) { .sp-path-copy { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; margin: 34px 18px 0; } }
.sp-path-copy h3 { margin: 0; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.sp-path-copy p { margin: 12px 0 0; max-width: 40em; font-size: 16.5px; line-height: 1.6; color: var(--sp-muted); text-wrap: pretty; }
.sp-path-go { justify-self: start; }
@media (max-width: 479px) { .sp-path-go { justify-self: stretch; } }

.sp-pf {
  position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--sp-line);
  display: flex; flex-direction: column; align-items: center; padding: 22px 14px 26px;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(95, 194, 184, .10) 0%, transparent 62%),
    linear-gradient(180deg, rgba(10, 15, 12, .55), rgba(10, 15, 12, .25));
}
.sp-pf::before { /* faint dot grid, the canvas the graphic sits on */
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(249, 248, 243, .09) 1px, transparent 1.2px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.sp-pf > * { position: relative; }
.sp-pf-beat { width: 100%; max-width: 380px; display: flex; flex-direction: column; }
.sp-pf-k { margin: 0 0 12px; height: 18px; display: flex; align-items: center; gap: 8px; font-family: var(--sp-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); white-space: nowrap; }
.sp-pf-k b { font-weight: 600; color: var(--sp-accent); }
.sp-pf-art { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

/* the fibre between beats */
.sp-pf-fibre { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 6px 0; }
.sp-pf-fibre svg { display: block; width: 40px; height: 12px; overflow: visible; transform: rotate(90deg); }
.sp-pf-fibre path { fill: none; stroke-linecap: round; }
.sp-pf-fib-base { stroke: rgba(249, 248, 243, .08); stroke-width: 3; }
.sp-pf-fib-lit { stroke: #5FC2B8; stroke-width: 1.3; opacity: .45; }
.sp-pf-fib-pulse { stroke: #A7E3D3; stroke-width: 2.4; opacity: 0; }
.sp-pf-fib-pulse.is-halo { stroke: #5FC2B8; stroke-width: 8; }
.sp-pf-fib-node { fill: #93D3A2; }

/* 1: the answers */
.is-ask .sp-pf-art { gap: 14px; }
.sp-pf-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sp-pf-chip {
  height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px 0 10px; border-radius: 999px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--sp-text);
  background: rgba(20, 38, 29, .92); border: 1px solid rgba(167, 221, 214, .32);
  box-shadow: var(--sp-highlight), 0 10px 24px -14px rgba(0, 0, 0, .9);
}
.sp-pf-chip i { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid var(--sp-accent); background: radial-gradient(circle, var(--sp-accent) 0 40%, transparent 46%); }
.sp-pf-chip b { margin-right: 7px; font-family: var(--sp-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--sp-dim); }

/* 1 (under the chips): the text box */
.sp-pf-box {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 128px; box-sizing: border-box; padding: 13px 15px 14px; border-radius: 16px;
  background: rgba(10, 18, 14, .8); border: 1px solid rgba(95, 194, 184, .55);
  box-shadow: 0 0 0 3px rgba(63, 158, 150, .16), var(--sp-highlight), 0 20px 40px -24px rgba(0, 0, 0, .9), 0 0 46px -14px rgba(95, 194, 184, .55);
}
.sp-pf-box small { font-family: var(--sp-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-dim); }
.sp-pf-typed { padding-right: 34px; font-size: 15.5px; line-height: 1.45; color: var(--sp-text); }
.sp-pf-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -.2em; border-radius: 1px; background: var(--sp-accent); box-shadow: 0 0 8px rgba(95, 194, 184, .9); }
.sp-pf-mic { position: absolute; right: 11px; bottom: 11px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--sp-line-strong); background: rgba(249, 248, 243, .06); color: var(--sp-muted); }
.sp-pf-mic svg { width: 16px; height: 16px; }

/* 2: the custom-created cards */
.sp-pf-panel { display: flex; flex-direction: column; gap: 9px; padding: 13px 12px 14px; border-radius: 16px; background: rgba(14, 26, 20, .82); border: 1px solid var(--sp-line-strong); box-shadow: var(--sp-highlight), 0 22px 44px -26px rgba(0, 0, 0, .9); }
.sp-pf-panel > small { display: flex; align-items: center; gap: 6px; font-family: var(--sp-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-dim); }
.sp-pf-panel > small.is-new { color: var(--sp-accent); }
.sp-pf-panel > small svg { width: 13px; height: 13px; flex: none; }
.sp-pf-row { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); } /* D666 (Klemen, 2026-11-01): three ideas, not six, a little larger */
.sp-pf-row .sp-pf-lib { gap: 10px; padding: 10px 10px 12px; font-size: 12.5px; }
.sp-pf-row .sp-pf-cover { height: 40px; }
.sp-pf-row .sp-pf-cover svg { width: 18px; height: 18px; }
@media (max-width: 519px) {
  .sp-pf-row { grid-template-columns: 1fr; }
  .sp-pf-row .sp-pf-lib { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; min-height: 0; font-size: 14px; }
  .sp-pf-row .sp-pf-cover { grid-row: span 2; width: 44px; height: 44px; }
  .sp-pf-row .sp-pf-lib:not(.is-on) .sp-pf-cover { grid-row: auto; }
  .sp-pf-row .sp-pf-lib em { grid-column: 2; margin-top: 0; justify-self: start; }
}
.sp-pf-lib { min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; border-radius: 11px; font-size: 11.5px; font-weight: 600; line-height: 1.28; color: var(--sp-text); background: rgba(249, 248, 243, .04); border: 1px solid var(--sp-line); }
.sp-pf-lib > span:not(.sp-pf-cover) { overflow-wrap: break-word; }
.sp-pf-cover { width: 100%; height: 28px; flex: none; display: grid; place-items: center; box-sizing: border-box; border-radius: 7px; color: rgba(167, 221, 214, .72); background: rgba(95, 194, 184, .14); border: 1px solid rgba(167, 221, 214, .16); } /* a quiet surface: the only CTA-green in the panel is the chip */
.sp-pf-cover svg { width: 15px; height: 15px; }
.sp-pf-lib.is-on {
  border-color: var(--sp-accent); background: rgba(63, 158, 150, .16);
  box-shadow: 0 0 0 1px var(--sp-accent), 0 0 28px rgba(95, 194, 184, .45);
}
.sp-pf-lib.is-on .sp-pf-cover { background: rgba(95, 194, 184, .2); border-color: rgba(167, 221, 214, .28); color: rgba(167, 221, 214, .9); }
.sp-pf-lib em { margin-top: auto; align-self: flex-start; max-width: 100%; box-sizing: border-box; white-space: nowrap; padding: 5px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.1; color: #0A0F0C; background: linear-gradient(120deg, #84B9EE, #5FC2B8 52%, #93D3A2); }

/* 3: the chosen Sprint */
.sp-pf-page {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 15px; border-radius: 16px;
  background: linear-gradient(rgba(16, 32, 24, .97), rgba(16, 32, 24, .97)) padding-box, linear-gradient(140deg, #84B9EE, #5FC2B8 52%, #93D3A2) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 0 4px rgba(95, 194, 184, .08), 0 22px 48px -20px rgba(95, 194, 184, .7);
}
.sp-pf-page-top { display: flex; align-items: center; gap: 10px; }
.sp-pf-cover.is-lg { width: 34px; height: 34px; border-radius: 9px; }
.sp-pf-cover.is-lg svg { width: 19px; height: 19px; }
.sp-pf-page-top small { font-family: var(--sp-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-accent); }
.sp-pf-page strong { font-family: var(--mf-font-display); font-size: 17px; font-weight: 700; line-height: 1.22; color: var(--sp-text); }
.sp-pf-lessons { display: grid; gap: 5px; }
.sp-pf-lessons > span { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 9px; border-radius: 8px; font-size: 12px; color: var(--sp-dim); background: rgba(249, 248, 243, .03); border: 1px solid var(--sp-line); }
.sp-pf-lessons i { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid var(--sp-line-strong); }
.sp-pf-lessons .is-open { color: var(--sp-text); font-weight: 600; background: rgba(63, 158, 150, .14); border-color: rgba(95, 194, 184, .5); }
.sp-pf-lessons .is-open i { border-color: #93D3A2; background: #93D3A2; box-shadow: 0 0 8px rgba(147, 211, 162, .8); }
.sp-pf-lessons em { margin-left: auto; font-family: var(--sp-mono); font-size: 11px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #93D3A2; }

/* from 1000px: one row, left to right; each fibre sits at its beats' centre line (under the 30px beat label) */
@media (min-width: 1000px) {
  .sp-pf { flex-direction: row; align-items: stretch; padding: 30px 24px 32px; }
  .sp-pf-beat { max-width: none; min-width: 0; }
  .sp-pf-beat.is-ask { flex: 0 0 236px; }
  .sp-pf-beat.is-find { flex: 1 1 0; }
  .sp-pf-beat.is-yours { flex: 0 0 214px; }
  .sp-pf-chips { flex-direction: column; flex-wrap: nowrap; }
  .sp-pf-chip { height: auto; min-height: 44px; padding: 7px 14px 7px 10px; white-space: normal; }
  .sp-pf-chip > span { display: grid; gap: 4px; line-height: 1.15; }
  .sp-pf-chip b { margin-right: 0; }
  .sp-pf-fibre { align-self: stretch; height: auto; width: 40px; margin: 30px 4px 0; }
  .sp-pf-fibre svg { transform: none; }
  .sp-pf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .sp-pf-lib { padding: 9px 10px 12px; font-size: 12px; }
  .sp-pf-row .sp-pf-lib { gap: 12px; padding: 12px 12px 14px; font-size: 14px; min-height: 150px; }
  .sp-pf-row .sp-pf-cover { height: 52px; }
  .sp-pf-row .sp-pf-cover svg { width: 22px; height: 22px; }
}
@media (min-width: 1160px) {
  .sp-pf-beat.is-ask { flex-basis: 248px; }
  .sp-pf-beat.is-yours { flex-basis: 224px; }
}

/* D649 (Klemen, 2026-10-31): below 1000px the three beats are stacked cards, the Inside stack's mechanism (.sp-focus-slot):
   each beat is a card that sticks under the site header a label strip lower than the one before, so the next one
   slides up over it while the covered card keeps its "01 / 02" label in view, scales a little and dims on the next
   card's view timeline. The fibres give way to the stack. .sp-pf clips instead of hiding its overflow so the cards
   can stick. Reduced motion or a short screen: the plain column with its fibres, as before. */
@media (prefers-reduced-motion: no-preference) and (min-height: 640px) and (max-width: 999px) {
  .sp-pf { --sp-pf-top: 76px; --sp-pf-step: 44px; overflow: clip; gap: 14px; padding: 12px 6px 14px; timeline-scope: --sp-pf-1, --sp-pf-2; }
  .sp-pf-fibre { display: none; }
  .sp-pf-beat {
    position: sticky; top: calc(var(--sp-pf-top) + var(--i, 0) * var(--sp-pf-step)); box-sizing: border-box; padding: 14px 10px 14px; border-radius: 18px; transform-origin: 50% 0;
    background: linear-gradient(180deg, #172B21 0%, #101C16 100%); border: 1px solid rgba(249, 248, 243, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -24px 50px -30px rgba(0, 0, 0, .9), var(--sp-shadow);
  }
  .sp-pf-beat.is-ask { --i: 0; }
  .sp-pf-k { padding-left: 4px; }
  .sp-pf-lib em { white-space: normal; }
  .sp-pf-beat.is-find { --i: 1; view-timeline-name: --sp-pf-1; }
  .sp-pf-beat.is-yours { --i: 2; view-timeline-name: --sp-pf-2; }
  @supports (animation-timeline: view()) {
    .sp-pf-beat.is-ask { animation: sp-covered linear both; animation-timeline: --sp-pf-1; animation-range: entry 0% contain 0%; }
    .sp-pf-beat.is-find { animation: sp-covered linear both; animation-timeline: --sp-pf-2; animation-range: entry 0% contain 0%; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes sp-pf-caret { 0%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
  @keyframes sp-pf-run { 0% { stroke-dashoffset: 30; } 26%, 100% { stroke-dashoffset: -100; } }
  .sp-pf-caret { animation: sp-pf-caret 1.1s steps(1, end) infinite; animation-play-state: paused; }
  .sp-pf-fib-pulse { opacity: 1; }
  .sp-pf-fib-pulse.is-halo { opacity: .28; }
  .sp-pf-fib-pulse path { stroke-dasharray: 30 170; stroke-dashoffset: 30; animation: sp-pf-run 3.6s var(--d, 0s) linear infinite; animation-play-state: paused; }
  .sp-pf-fibre:nth-of-type(2) .sp-pf-fib-pulse path { --d: .9s; }
  .sp-paths.is-live .sp-pf-caret, .sp-paths.is-live .sp-pf-fib-pulse path { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-pf-fib-lit { opacity: .95; stroke-width: 1.8; } /* no pulse: every fibre simply lit */
}

/* =============================================================================================== sprint-what */
/* What are Sprints (sprint-what.liquid): two inline-SVG diagrams of light fibres, each in a soft framed canvas with
   its caption under it. The wide SVG (viewBox 1000 wide) shows from 900px, the narrow one (360 wide, stacked, the
   fibres running down) below. Each fibre: .sp-fib-base (faint), .sp-fib-lit (its gradient, dim), and the pulse, a
   12-unit dash on pathLength 100 drawn twice (.is-halo: wider, low opacity, the glow; never an SVG filter). Only
   stroke-dashoffset and transform animate, and only while the section is .is-live (sprint-sales.js, on screen).
   People hues: Mike #84B9EE, Sara #93D3A2 (Jasna), Leo #F2C38B (peach); never red. */
.sp-what-dia { margin: 0 0 20px; padding: 16px 10px 20px; border-radius: 26px; border: 1px solid var(--sp-line); background: radial-gradient(90% 70% at 50% 0%, rgba(95, 194, 184, .07) 0%, transparent 70%), rgba(249, 248, 243, .015); }
@media (min-width: 640px) { .sp-what-dia { padding: 32px 28px 26px; margin-bottom: 24px; } }
.sp-what-dia figcaption { margin: 18px auto 0; max-width: 34em; font-size: 16.5px; line-height: 1.5; text-align: center; color: var(--sp-muted); text-wrap: balance; }
@media (min-width: 960px) { .sp-what-dia figcaption { font-size: 18px; margin-top: 24px; } }
.sp-what-art { max-width: 1040px; margin: 0 auto; }
.sp-what-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sp-what-svg.is-wide { display: none; }
@media (min-width: 900px) { .sp-what-svg.is-wide { display: block; } .sp-what-svg.is-narrow { display: none; } }
.sp-what-svg.is-narrow { max-width: 420px; margin: 0 auto; }

/* containers */
.sp-what-box { fill: rgba(20, 38, 29, .62); stroke: var(--sp-line-strong); stroke-width: 1; }
.sp-what-box.is-title { fill: rgba(20, 38, 29, .8); stroke: rgba(167, 221, 214, .38); }
.sp-what-page { fill: rgba(14, 30, 22, .9); stroke: rgba(167, 221, 214, .42); stroke-width: 1; }
.sp-what-page-glow { fill: none; stroke: #5FC2B8; stroke-width: 6; opacity: .12; }
.sp-wd-dot { fill: rgba(249, 248, 243, .18); }
.sp-wd-k { fill: #5FC2B8; }
.sp-wd-rule { stroke: var(--sp-line); stroke-width: 1; }
.sp-wd-tag { fill: rgba(63, 158, 150, .14); stroke: rgba(167, 221, 214, .38); }
.sp-wd-pill rect { fill: rgba(249, 248, 243, .05); stroke: rgba(167, 221, 214, .26); }
.sp-wd-pill circle { fill: #5FC2B8; }
.sp-wd-row rect { fill: rgba(249, 248, 243, .03); stroke: var(--sp-line); }
.sp-wd-row circle { fill: none; stroke: var(--sp-line-strong); }
.sp-wd-row.is-on rect { fill: rgba(63, 158, 150, .14); stroke: rgba(95, 194, 184, .6); }
.sp-wd-row.is-on circle { fill: #5FC2B8; stroke: #5FC2B8; }
.sp-wd-row.is-on .sp-wt-n { fill: #0A0F0C; }
.sp-wd-open { fill: rgba(147, 211, 162, .16); stroke: rgba(147, 211, 162, .55); }
.sp-what-port { fill: #0E2418; stroke: #93D3A2; stroke-width: 1.5; }
.sp-what-port.is-sm { stroke: rgba(167, 221, 214, .7); }

/* text (decorative, aria-hidden) */
.sp-what-svg text { font-family: var(--mf-font-body); }
.sp-wt-k { font-family: var(--sp-mono) !important; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--sp-accent); }
.sp-wt-k.is-dim { fill: var(--sp-dim); }
.sp-wt-pill { font-size: 13px; font-weight: 600; fill: var(--sp-text); }
.sp-wt-pill.is-sm { font-size: 12.5px; }
.sp-wt-title { font-family: var(--mf-font-display) !important; font-weight: 700; letter-spacing: -.01em; fill: var(--sp-text); }
.sp-wt-dim { font-size: 13px; fill: var(--sp-muted); }
.sp-wt-row { font-size: 13px; font-weight: 500; fill: var(--sp-text); }
.sp-wt-row.is-sm { font-size: 12px; font-weight: 400; fill: var(--sp-muted); }
.sp-wt-ln { font-family: var(--sp-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; fill: var(--sp-dim); }
.sp-wt-n { font-family: var(--sp-mono) !important; font-size: 10px; fill: var(--sp-muted); }
.sp-wt-open { font-family: var(--sp-mono) !important; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; fill: #93D3A2; }
.sp-wt-name { font-size: 14px; font-weight: 700; fill: var(--sp-text); }
.sp-wt-init { font-family: var(--mf-font-display) !important; font-weight: 700; fill: #0A0F0C; }

/* the three people */
.sp-what .is-u1 { --u: #84B9EE; }
.sp-what .is-u2 { --u: #93D3A2; }
.sp-what .is-u3 { --u: #F2C38B; }
.sp-wd-av-disc { fill: var(--u); }
.sp-wd-av-ring { fill: rgba(10, 15, 12, .9); stroke: var(--u); stroke-opacity: .45; stroke-width: 1.5; }
/* D628: the portraits. The ring is the person's hue, solid (no filter: a blur here flickered a monitor before); the
   photo sits clipped to a circle inside it; a thin dark edge seats the photo in the ring. */
.sp-wd-av-ring.is-photo { stroke-opacity: .95; stroke-width: 2.5; }
.sp-wd-av-edge { fill: none; stroke: rgba(10, 15, 12, .55); stroke-width: 1; }
.sp-wd-udot { fill: var(--u); }
.sp-wd-card-bg { fill: rgba(14, 30, 22, .9); fill: color-mix(in srgb, var(--u) 7%, rgba(14, 30, 22, .9)); stroke: var(--u); stroke-opacity: .42; }
.sp-wd-utag { fill: color-mix(in srgb, var(--u) 14%, transparent); stroke: var(--u); stroke-opacity: .5; }
.sp-wt-k.is-u, .sp-wt-ln.is-u { fill: var(--u); }
.sp-wd-act { fill: color-mix(in srgb, var(--u) 10%, transparent); stroke: var(--u); stroke-opacity: .32; }
.sp-wd-cover { fill: var(--u); opacity: .9; }
.sp-wd-cover-i { fill: none; stroke: #0A0F0C; stroke-width: 1.6; stroke-linejoin: round; }
.sp-what-port.is-u1, .sp-what-port.is-u2, .sp-what-port.is-u3 { stroke: var(--u); }

/* the fibres */
.sp-fib-base path, .sp-fib-lit path, .sp-fib-pulse path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sp-fib-base { stroke: rgba(249, 248, 243, .08); stroke-width: 3; }
.sp-fib-lit { stroke-width: 1.3; opacity: .42; }
.sp-fib-pulse { stroke-width: 2.4; opacity: 0; }
.sp-fib-pulse.is-halo { stroke-width: 9; }
.sp-what-node-core { fill: #E6FBF5; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes sp-fib { 0% { stroke-dashoffset: 12; } 74%, 100% { stroke-dashoffset: -101; } }
  @keyframes sp-node { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.12); } }
  .sp-fib-pulse { opacity: 1; }
  .sp-fib-pulse.is-halo { opacity: .26; }
  .sp-fib-pulse path { stroke-dasharray: 12 188; stroke-dashoffset: 12; animation: sp-fib 7.6s var(--d, 0s) linear infinite; animation-play-state: paused; }
  .sp-what-node-halo { transform-box: fill-box; transform-origin: center; animation: sp-node 3.8s ease-in-out infinite; animation-play-state: paused; }
  .sp-what.is-live .sp-fib-pulse path, .sp-what.is-live .sp-what-node-halo { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-fib-lit { opacity: .95; stroke-width: 1.8; } /* no loop: every fibre simply lit */
}