/* slides-src/slides.css -- the slides page's own styles, linked after the homepage's snapshot
   (scripts/build-slides.mjs copies it to site/demo/_shared/slides/assets/slides.css). Same look as the
   Sprints homepage: dark glass cards, Mount Founder greens. A plain scrolling page, never snap scrolling. */

html { scroll-behavior: smooth; scroll-snap-type: none; }
main > section[id] { scroll-margin-top: 72px; }
.sl-lead { margin: 16px 0 0; color: var(--sp-muted); font-size: 18px; line-height: 1.6; max-width: 680px; }

/* Header: Mount Founder plus the client's logo; anchor links; Book a call. */
.sl-head-brands { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.sl-x { color: var(--sp-dim); font-size: 14px; }
.sl-client-chip { display: inline-flex; align-items: center; height: 34px; padding: 5px 12px; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px -10px rgba(0,0,0,.6); }
.sl-client-chip img { display: block; max-height: 24px; max-width: 140px; width: auto; height: auto; object-fit: contain; }
.sl-client-chip.is-text { font: 700 14px/1 var(--mf-font-body); color: #15231B; }
@media (max-width: 860px) { .sp-head-bar .sp-nav .sp-nav-link { display: none !important; } }
@media (max-width: 480px) { .sl-client-chip img { max-width: 92px; } .sl-x { display: none; } }

/* Hero: "Prepared for" line with the client's logo. */
.sl-prepared { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--sp-line); background: var(--sp-glass); color: var(--sp-muted); font-size: 14px; }
.sl-prepared .sl-client-chip { height: 36px; }
@media (max-width: 560px) { .sl-prepared { border-radius: 18px; padding: 10px 14px 10px 10px; } }
.sl-prepared b { color: var(--sp-text); font-weight: 700; }
.sl-prepared-site { color: var(--sp-dim); }

/* Funnels: one glass card each, with the demo pop-up's step diagram. */
.sl-funnel-list { display: grid; gap: 22px; }
.sl-funnel { padding: 28px 28px 30px; }
.sl-funnel-top { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start; margin-bottom: 26px; }
.sl-funnel-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--mf-g-summit); color: #fff; font: 700 20px/1 var(--mf-font-display); box-shadow: var(--sp-glow); }
.sl-funnel h3 { margin: 2px 0 6px; font: 700 26px/1.15 var(--mf-font-display); letter-spacing: -.01em; color: var(--sp-text); }
.sl-funnel-top p { margin: 0; color: var(--sp-muted); font-size: 16px; line-height: 1.6; max-width: 640px; }
.sl-tag { white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(167,221,214,.35); color: var(--mf-shallows); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.sl-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: var(--cols); gap: 12px; }
.sl-phase { min-width: 0; }
.sl-phase-name { display: block; margin-bottom: 14px; padding-bottom: 7px; border-bottom: 2px solid rgba(249,248,243,.14); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(249,248,243,.6); }
.sl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.sl-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sl-step::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: #3ecf6e; opacity: .55; z-index: 0; }
.sl-flow > .sl-phase:first-child .sl-step:first-child::before { display: none; }
.sl-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: #1d3a27; border: 2px solid #3ecf6e; color: #bff0cf; font-size: 13px; font-weight: 800; }
.sl-step.is-optional .sl-dot { border-style: dashed; background: #16261c; color: rgba(249,248,243,.75); }
.sl-step.is-goal .sl-dot { background: #3ecf6e; color: #0f2417; box-shadow: 0 0 0 6px rgba(62,207,110,.2), 0 0 22px rgba(62,207,110,.45); }
.sl-label { font-size: 13px; font-weight: 700; line-height: 1.25; color: rgba(249,248,243,.9); }
.sl-label small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: rgba(249,248,243,.5); }

/* Growth playbook: three engines side by side, recurring revenue in the center. */
.sl-engine-row { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 18px; align-items: stretch; }
.sl-engine { padding: 30px 26px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sl-engine.is-center { border-color: rgba(167,221,214,.4); box-shadow: var(--sp-highlight), var(--sp-glow); transform: translateY(-10px); }
.sl-engine-orb { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 16px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%, var(--e1), var(--e2) 70%); box-shadow: 0 0 0 8px rgba(255,255,255,.04), 0 16px 40px -14px var(--e2); }
.sl-engine-orb svg { width: 32px; height: 32px; }
.sl-engine-kicker { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--e1); }
.sl-engine h3 { margin: 0 0 10px; font: 700 24px/1.15 var(--mf-font-display); color: var(--sp-text); }
.sl-engine > p { margin: 0 0 18px; color: var(--sp-muted); font-size: 15.5px; line-height: 1.6; }
.sl-chips { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sl-chips li { padding: 7px 13px; border-radius: 999px; background: rgba(249,248,243,.07); border: 1px solid rgba(249,248,243,.16); color: var(--sp-text); font-size: 13px; font-weight: 700; }
.sl-chips li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--e1); vertical-align: 1px; }
.sl-engine-note { margin: 30px 0 0; text-align: center; color: var(--sp-muted); font-size: 16px; }

/* What we can do for you. */
.sl-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sl-work-card { padding: 28px; }
.sl-work-num { display: inline-block; margin-bottom: 14px; font: 700 15px/1 var(--mf-font-body); letter-spacing: .04em; background: var(--mf-g-jasna); -webkit-background-clip: text; background-clip: text; color: transparent; filter: brightness(1.6); }
.sl-work-card h3 { margin: 0 0 8px; font: 700 22px/1.2 var(--mf-font-display); color: var(--sp-text); }
.sl-work-card p { margin: 0; color: var(--sp-muted); font-size: 15.5px; line-height: 1.6; }

.sl-foot { padding: 34px 16px 48px; text-align: center; color: var(--sp-dim); font-size: 13px; }
.sl-foot img { display: block; height: 22px; width: auto; margin: 0 auto 12px; opacity: .85; }

@media (max-width: 900px) {
  .sl-engine-row { grid-template-columns: 1fr; }
  .sl-engine.is-center { transform: none; }
  .sl-funnel-top { grid-template-columns: auto 1fr; }
  .sl-tag { grid-column: 2; justify-self: start; }
}
/* Phones: each funnel's steps become a vertical path. */
@media (max-width: 720px) {
  .sl-funnel { padding: 22px 18px 24px; }
  .sl-funnel h3 { font-size: 22px; }
  .sl-flow { grid-template-columns: 1fr; gap: 6px; }
  .sl-phase-name { margin-bottom: 8px; }
  .sl-steps { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .sl-step { flex-direction: row; text-align: left; gap: 14px; padding: 6px 0; }
  .sl-step::before { top: -50%; bottom: 50%; left: 15px; right: auto; width: 2px; height: auto; }
  .sl-flow > .sl-phase:first-child .sl-step:first-child::before { display: none; }
  .sl-label small { display: inline; margin-left: 4px; }
  .sl-work-grid { grid-template-columns: 1fr; }
  .sl-lead { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hero: what the growth engine brings, as chips. */
.sl-outcomes { list-style: none; margin: 18px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-outcomes li { padding: 6px 12px; border-radius: 999px; background: rgba(62,207,110,.12); border: 1px solid rgba(62,207,110,.35); color: #bff0cf; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sl-outcomes li::before { content: "↑"; margin-right: 6px; color: #3ecf6e; }

/* Section heads: no icon tile, just a larger eyebrow. */
.sp-tile { display: none !important; }
.sp-sec .sp-eyebrow, main > section .sp-eyebrow { font-size: 14.5px; letter-spacing: .14em; }
.sp-hero-copy .sp-eyebrow { font-size: 12px; }
@media (max-width: 639px) { .sp-sec .sp-eyebrow, main > section .sp-eyebrow { font-size: 13px; } }

/* Header: at the top it sits clear inside the hero (no glass, no border, no logo, since the hero shows the big
   logo) with the menu visible on every screen size; once the hero logo scrolls away it becomes the sticky glass bar. */
html[data-et-theme="dark"] .sp-head-bar[data-sp-hero] { position: sticky; top: 0; z-index: 50; }
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; }
/* Phones hide the hero's big logo, so the bar keeps its own logo; at the very top it is still clear, not glass. */
@media (max-width: 959px) {
  .sp-hero-copy .sp-hero-logo { display: none; }
  .sp-hero-copy { padding-top: 56px; }
  html[data-et-theme="dark"] .sp-head-bar[data-sp-hero].sl-top {
    background: transparent; border-bottom-color: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Hero: the growth engine, a live 3D spiral (engine.js). Glass labels sit around the canvas. */
.sl-engine3d { margin: 0; display: grid; justify-items: center; gap: 10px; min-width: 0; width: 100%; }
.sl-e3-stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1.1; }
.sl-e3-stage::before { content: ""; position: absolute; inset: 10% 6% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(60,194,122,.18), rgba(60,194,122,0) 72%); pointer-events: none; }
.sl-e3-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(249,248,243,.09) 1.2px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 85%); mask-image: radial-gradient(closest-side, #000 30%, transparent 85%); }
.sl-e3-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.sl-e3-tag { position: absolute; z-index: 2; max-width: 44%; padding: 10px 14px 11px; border-radius: 14px; pointer-events: none;
  background: rgba(14, 28, 20, .58); border: 1px solid rgba(249,248,243,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -22px rgba(0,0,0,.9);
  opacity: 0; animation: sl-e3-in .8s cubic-bezier(.2,.7,.2,1) forwards; }
.sl-e3-tag b { display: flex; align-items: center; gap: 7px; font: 500 11px/1.2 var(--sp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--k); }
.sl-e3-tag b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k); box-shadow: 0 0 10px var(--k); flex: none; }
.sl-e3-tag span { display: block; margin-top: 5px; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #F9F8F3; }
.sl-e3-tag.is-ev { --k: #E3A3EC; left: 0; translate: 0 -50%; animation-delay: 1.1s; }
.sl-e3-tag.is-pr { --k: #8ACCF4; right: 0; translate: 0 -50%; animation-delay: 1.5s; }
.sl-e3-tag.is-in { --k: #B9D8CC; left: 0; bottom: 3%; animation-delay: .35s; }
.sl-e3-tag.is-top { --k: #E8D5B0; right: 0; top: 0; animation-delay: 2.1s; }
.sl-e3-core { position: absolute; z-index: 2; translate: -50% -50%; text-align: center; color: #fff; pointer-events: none; line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.35); opacity: 0; animation: sl-e3-in .8s .8s cubic-bezier(.2,.7,.2,1) forwards; }
.sl-e3-core b { display: block; font-weight: 800; font-size: 1em; letter-spacing: .06em; }
.sl-e3-core span { display: block; margin-top: .25em; font-size: max(8px, .27em); font-weight: 700; letter-spacing: .02em; opacity: .9; white-space: nowrap; }
.sl-e3-cap { font: 600 22px/1.2 var(--mf-font-display); color: var(--sp-text); text-align: center; letter-spacing: -.005em; }
.sl-e3-cap em { font-style: normal; color: #E8D5B0; }
@keyframes sl-e3-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .sl-e3-tag { max-width: 40%; padding: 7px 9px 8px; border-radius: 11px; }
  .sl-e3-tag b { font-size: 9.5px; letter-spacing: .08em; gap: 5px; }
  .sl-e3-tag b::before { width: 6px; height: 6px; }
  .sl-e3-tag span { font-size: 11.5px; margin-top: 3px; }
  .sl-e3-cap { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .sl-e3-tag, .sl-e3-core { animation: none; opacity: 1; } }

/* Development preview: the growth engine two ways, the 2D flywheel beside the 3D spiral. */
.sl-views-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .sl-views-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.sl-fw { margin: 0; display: grid; justify-items: center; gap: 10px; min-width: 0; width: 100%; }
.sl-fw-stage { position: relative; width: 100%; max-width: 620px; aspect-ratio: 740 / 640; }
.sl-fw-stage::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(60,194,122,.14), rgba(60,194,122,0) 75%); pointer-events: none; }
.sl-fw-stage canvas, .sl-fw-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-fw-stage svg { overflow: visible; }
.sl-fw-node { font-family: var(--mf-font-display); font-weight: 650; font-size: 27px; fill: #F9F8F3; }
.sl-fw-sub { font-family: var(--mf-font-body, "DM Sans", sans-serif); font-weight: 600; font-size: 15px; fill: rgba(249,248,243,.68); }
.sl-fw-flow { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 7 9; animation: sl-fw-flow 1.6s linear infinite; }
.sl-fw-flow.is-in { stroke-width: 5; }
.sl-fw-flow.is-loop { stroke-width: 3; opacity: .85; }
@keyframes sl-fw-flow { to { stroke-dashoffset: -32; } }
/* The pills hold still: scaling them made the browser re-run their SVG glow filter every frame (screen flicker). */
.sl-fw-pt { font-family: var(--mf-font-display); font-weight: 650; font-size: 36px; fill: #F9F8F3; }
.sl-fw-ps { font-family: var(--mf-font-body, "DM Sans", sans-serif); font-weight: 800; font-size: 12.5px; letter-spacing: .16em; fill: rgba(249,248,243,.85); }
.sl-fw-rr { font-family: var(--mf-font-body, "DM Sans", sans-serif); font-weight: 800; font-size: 42px; letter-spacing: .06em; fill: #fff; }
.sl-fw-rrs { font-family: var(--mf-font-body, "DM Sans", sans-serif); font-weight: 700; font-size: 12.5px; fill: rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce) { .sl-fw-flow { animation: none; } }

/* "What are Sprints" diagram: the filter between Emma's information and her Sprint page (slides-src/info-flow.mjs).
   Cool blue-teal fibres go in, the gold glass filter is her coach's methods, frameworks and knowledge base,
   warm pink-gold fibres come out into the page. */
.sl-filter-box { fill: rgba(40,32,16, .72); stroke-width: 1.4; }
.sl-filter-glow { fill: none; stroke-width: 10; opacity: .14; }
.sl-filter-k { fill: #EBD39A; }
.sl-filter-row rect { fill: rgba(212,174,95, .08); stroke: rgba(212,174,95, .34); }
.sl-filter-row circle { fill: #D4AE5F; }
.sl-page-warm { stroke: #F2C38B; }
.sp-what-node-core.sl-node-warm { fill: #FFF1DC; }
.sp-what-port.sl-port-warm { stroke: #F2C38B; }
@media (prefers-reduced-motion: no-preference) {
  .sl-filter-glow { animation: sl-filter-breathe 4.2s ease-in-out infinite; animation-play-state: paused; }
  .sl-filter-row rect { animation: sl-filter-row 4.2s calc(var(--k) * .5s) ease-in-out infinite; animation-play-state: paused; }
  .sp-what.is-live .sl-filter-glow, .sp-what.is-live .sl-filter-row rect { animation-play-state: running; }
}
@keyframes sl-filter-breathe { 0%, 100% { opacity: .1; } 50% { opacity: .3; } }
@keyframes sl-filter-row { 0%, 100% { fill: rgba(212,174,95, .08); stroke: rgba(212,174,95, .34); } 50% { fill: rgba(235,211,154, .2); stroke: rgba(235,211,154, .7); } }

/* "your methods, frameworks, and knowledge base" in the gold of Regan Hillyer's logo and buttons, same as the diagram's filter (Klemen, 2026-11-07). */
.sp-word.sl-word-filter { color: #DDB86A; background: linear-gradient(120deg, #B8893A 0%, #D9B467 50%, #EBD39A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Her Sprint page, the point of the diagram: a glowing border that moves through Mount Founder green, bright green
   and the filter's gold, so the page reads as both. */
.sp-what-page.sl-page-live { stroke-width: 2; }
.sl-page-warm { stroke-width: 16; opacity: .5; filter: blur(9px); }

/* Funnels: after Results the journey goes on. The next offer is dashed, in the filter's gold (Klemen, 2026-11-07). */
.sl-phase.is-next .sl-phase-name { color: #EBD39A; border-bottom: 2px dashed rgba(212,174,95,.5); }
.sl-step.is-next::before { background: repeating-linear-gradient(90deg, #D4AE5F 0 6px, transparent 6px 12px); opacity: .95; }
.sl-step.is-next .sl-dot { background: rgba(40,32,16,.85); border: 2px dashed #D4AE5F; color: #F6E6BF; box-shadow: 0 0 18px rgba(212,174,95,.35); }
.sl-step.is-next .sl-label { color: #EBD39A; }
.sl-step.is-next .sl-label small { color: rgba(235,211,154,.7); }
@media (prefers-reduced-motion: no-preference) {
  .sl-step.is-next::before { animation: sl-next-flow 1.2s linear infinite; }
}
@keyframes sl-next-flow { to { background-position: 12px 0; } }
@keyframes sl-next-flow-v { to { background-position: 0 12px; } }
@media (max-width: 720px) {
  .sl-step.is-next::before { background: repeating-linear-gradient(180deg, #D4AE5F 0 6px, transparent 6px 12px); animation-name: sl-next-flow-v; }
}

/* Growth playbook: the hero's 2D flywheel under the three engine cards. */
.sl-playbook-fw { display: flex; justify-content: center; margin: 48px auto 8px; }
@media (max-width: 720px) { .sl-playbook-fw { margin-top: 32px; } }

/* Growth playbook cards: the engine's name, one big word (Growth, Profit, Stability), then what it does. The orbs use
   the flywheel's own colours: Evergreen pink, Promo blue, Recurring green (Klemen, 2026-11-07). */
.sl-engine-name { margin: 0 0 4px; font: 700 21px/1.2 var(--mf-font-display); color: rgba(249,248,243,.86); }
.sl-engine h3 { margin: 0 0 8px; font-size: 40px; line-height: 1.05; }
.sl-engine .sl-engine-kicker { margin: 0 0 12px; }

/* The playbook's flywheel, about 40% larger, with room on both sides for the "10 Sprints" markers: the stage (canvas)
   is the middle 740/940 of the row and the SVG on top spans all of it (slides-src/flywheel-sprints.mjs). */
.sl-playbook-fw .sl-fw.is-sprints { max-width: 1088px; }
.sl-playbook-fw .is-sprints .sl-fw-stage { justify-self: start; width: 79.57%; max-width: 866px; }
.sl-playbook-fw .is-sprints .sl-fw-stage svg { left: 0; width: 125.68%; }
/* Wide screens: shift right so the wheel, not the whole drawing, sits in the middle of the page. */
@media (min-width: 1200px) {
  .sl-playbook-fw .sl-fw.is-sprints { transform: translateX(10.2%); }
  .sl-playbook-fw .is-sprints .sl-e3-cap { justify-self: start; width: 79.57%; text-align: center; }
}
.sl-fw-sprints-bg { fill: rgba(14, 26, 20, .82); stroke-width: 1.2; stroke-opacity: .6; }
.sl-fw-sprints-n { font-family: var(--mf-font-display); font-weight: 700; font-size: 17px; fill: #F9F8F3; }
.sl-fw-sprints-s { font-family: var(--mf-font-body, "DM Sans", sans-serif); font-size: 11.5px; fill: rgba(249,248,243,.65); }

/* Hero and the section below it carry the same "10 Sprints" markers (Klemen, 2026-11-07). There the wider canvas
   (930 units, the extra 190 on the right for the members marker) fits inside the stage, so nothing spills past the column. */
.sl-fw.is-sprints:not(.sl-playbook-fw *) .sl-fw-stage { aspect-ratio: 930 / 640; max-width: 780px; }
.sl-fw.is-sprints:not(.sl-playbook-fw *) .sl-fw-stage canvas { width: 79.57%; }
.sl-fw.is-sprints:not(.sl-playbook-fw *) .sl-fw-stage::before { inset: 8% 26.75% 8% 6.35%; }

/* Catalog covers in Regan Hillyer's own look (Klemen, 2026-11-07): the soft pearl background of her homepage's
   "Transformation Pathways" section (reganhillyer.com metrics-bg.jpg, kept in slides-src/faces/), her font Work Sans,
   and her gold #CBA747 for the number. */
#sprint-catalog .sp-cv { background: #F6EEE8 url(/demo/_shared/slides/assets/rh-cover-bg.jpg) center / cover no-repeat; border-color: rgba(203,167,71,.45); }
#sprint-catalog .sp-card:nth-child(3n+2) .sp-cv { background-position: 70% 40%; }
#sprint-catalog .sp-card:nth-child(3n) .sp-cv { background-position: 100% 80%; }
#sprint-catalog .sp-cv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.12) 70%); pointer-events: none; }
#sprint-catalog .sp-cv::after, #sprint-catalog .sp-cv-mesh { display: none; }
#sprint-catalog .sp-cv-fig { font-family: "Work Sans", sans-serif; font-weight: 700; letter-spacing: -.02em; color: #CBA747; background: linear-gradient(120deg, #A87F2E 0%, #CBA747 50%, #D9BD6A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
#sprint-catalog .sp-cv-unit { font-family: "Work Sans", sans-serif; font-weight: 600; letter-spacing: .1em; color: #57534E; }
#sprint-catalog .sp-cv-tile { background: rgba(255,255,255,.6); border: 1px solid rgba(203,167,71,.5); color: #B8933A; box-shadow: 0 4px 14px rgba(120,90,30,.12); backdrop-filter: blur(6px); }

/* 10 more Sprint ideas per catalog area, as pills in Regan Hillyer's gold (Klemen, 2026-11-07). */
.sl-more-pills { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 8px; }
.sl-more-pills li { padding: 6px 12px; border-radius: 999px; font-family: "Work Sans", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; color: #1C1917;
  background: linear-gradient(120deg, #A87F2E 0%, #CBA747 45%, #D9C38A 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(203,167,71,.18); }
/* Below 1040px the cards scroll sideways; the pills do too, in two rows, so each area stays short enough to read
   before the next one slides over it. */
@media (max-width: 1039px) {
  .sl-more-pills { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: max-content; gap: 7px 8px;
    overflow-x: auto; margin: 14px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; }
  .sl-more-pills::-webkit-scrollbar { display: none; }
  .sl-more-pills li { white-space: nowrap; }
}
@media (min-width: 640px) and (max-width: 1039px) { .sl-more-pills { margin-inline: -26px; padding-inline: 26px; } }
@media (max-width: 639px) { .sl-more-pills li { font-size: 12.5px; padding: 6px 11px; } }

/* Two covers per area carry a two-word phrase instead of a number, so the covers don't all read the same (Klemen, 2026-11-07). */
#sprint-catalog .sp-cv.is-word { container-type: inline-size; }
#sprint-catalog .sp-cv.is-word .sp-cv-fig { font-size: min(13cqw, 40px); line-height: .98; letter-spacing: -.025em; white-space: nowrap; padding-bottom: .06em; }

/* The hero outcome pills were removed (Klemen, 2026-11-07); keep a little air between the two hero paragraphs. */
.sp-hero-body + .sp-hero-body2 { margin-top: 18px; }

/* Proposed strategy: three phases as three rows that stack as cards while you scroll, the catalog's mechanism
   (sticky, each one a step lower, the covered one scales down on the next one's scroll timeline). On wide screens
   each row has the phase and its title on the left, the text and objectives on the right (Klemen, 2026-11-07). */
.sl-strategy { --sl-stack-top: 100px; --sl-stack-step: 12px; --sl-gap: 34px; list-style: none; margin: 0 0 56px; padding: 0; display: grid; gap: var(--sl-gap); counter-reset: none; }
.sl-phase-card { position: relative; overflow: visible; padding: 26px 24px 28px; border-radius: 22px; display: flex; flex-direction: column; gap: 12px; transform-origin: 50% 0; }
.sl-phase-head, .sl-phase-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 900px) {
  .sl-phase-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 48px; align-items: start; padding: 30px 36px 32px; }
  .sl-phase-body { padding-top: 2px; }
}
.sl-phase-tag { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--sp-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #E2C67E; }
.sl-phase-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: "Work Sans", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0; color: #1C1917;
  background: linear-gradient(120deg, #A87F2E 0%, #CBA747 50%, #D9C38A 100%); box-shadow: 0 0 0 5px rgba(203,167,71,.12), 0 6px 18px rgba(203,167,71,.25); }
.sl-phase-card h3 { margin: 4px 0 0; font-family: var(--mf-font-display); font-size: clamp(23px, 2.1vw, 27px); line-height: 1.2; color: #F9F8F3; }
.sl-phase-body > p:not([class]) { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(249,248,243,.78); }
.sl-phase-goal-label { margin: 8px 0 0; font-family: var(--sp-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(249,248,243,.55); }
.sl-phase-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } /* one objective per row */
.sl-phase-goals li { padding: 7px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #EBD39A; background: rgba(203,167,71,.1); border: 1px solid rgba(203,167,71,.35); }
/* The arrow to the next phase sits in the gap under the card: a gold dashed line that flows down and a chevron that nods. */
.sl-phase-arrow { position: absolute; left: 50%; top: 100%; width: 24px; height: var(--sl-gap); transform: translateX(-50%); display: grid; justify-items: center; align-content: start; color: #D4AE5F; pointer-events: none; }
.sl-phase-arrow::before { content: ""; width: 2px; height: calc(var(--sl-gap) - 12px); background: repeating-linear-gradient(180deg, #D4AE5F 0 5px, transparent 5px 10px); opacity: .9; }
.sl-phase-arrow svg { width: 16px; height: 16px; margin-top: -7px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(212,174,95,.5)); }
@media (prefers-reduced-motion: no-preference) {
  .sl-phase-arrow::before { animation: sl-arrow-flow .9s linear infinite; }
  .sl-phase-arrow svg { animation: sl-arrow-nod 1.6s ease-in-out infinite; }
}
@keyframes sl-arrow-flow { to { background-position: 0 10px; } }
@keyframes sl-arrow-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* The stacks (the three funnels and the three phases): sticky cards, each a step lower than the one before; the
   covered card scales down and dims while the next one slides over it. engine.js sets --sl-p (0 when the next card
   touches this one, 1 when it rests) on scroll: a sticky card's CSS view timeline counts its stuck phase as its
   exit, so it cannot time the approach, and Safari has no scroll-driven animations at all. Off under reduced motion
   and on short screens, where the cards just sit in flow (Klemen, 2026-11-07). */
.sl-stack { --sl-stack-top: 100px; --sl-stack-step: 12px; }
.sl-stack > * { transform-origin: 50% 0; }
.sl-funnel-list.sl-stack { gap: 28px; }
@media (prefers-reduced-motion: no-preference) and (min-height: 640px) {
  .sl-stack > * { position: sticky; top: calc(var(--sl-stack-top) + var(--i) * var(--sl-stack-step)); }
  .sl-stack::after { content: ""; display: block; height: var(--sl-hold-h, 0px); } /* engine.js: the final card's rest */
  .sl-stack > .has-next { transform: scale(calc(1 - .035 * var(--sl-d, 0))); filter: brightness(calc(1 - .4 * var(--sl-p, 0))) saturate(calc(1 - .15 * var(--sl-p, 0))); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1040px) and (min-height: 700px) {
  .sl-stack { --sl-stack-step: 66px; } /* each covered card keeps its number and title visible above the next */
}
/* While the cards stack, the section head stays pinned above them (Klemen, 2026-11-07): on wide screens the whole
   head (tile, eyebrow, heading, lead); on phones a compact bar with the eyebrow alone, so the cards keep room.
   The pinned part sits in .sl-pin, whose height engine.js sets so that the head releases at the very moment the
   pile is complete: head and cards then scroll away together and no card ever slides under the head, so the head
   needs no backdrop. engine.js also sets --sl-stack-top on the stack so the cards rest just below the pinned part. */
.sl-stack-wrap { position: relative; }
.sl-pin { display: flow-root; }
.sl-stack-eyebrow { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-height: 640px) and (min-width: 900px) {
  .sl-stack-head { position: sticky; top: calc(var(--sl-bar, 64px) + 14px); z-index: 3; }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 640px) and (max-width: 899px) {
  /* the heading and lead scroll up under the bar, so the bar is glass like the nav bar above it */
  .sl-stack-eyebrow { display: flex; position: sticky; top: var(--sl-bar, 64px); z-index: 3; margin: 0 -16px 12px; padding: 12px 16px 10px; background: rgba(10, 15, 12, .72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
}
/* Hero: the flywheel column reaches further right on wide screens while the copy stays where the page's content
   sits, and the wheel itself is larger (Klemen, 2026-11-07). */
.sp-hero .sl-fw-stage { max-width: 700px; }
@media (min-width: 1240px) {
  .sp-hero .sl-fw.is-sprints { --sl-ext: max(0px, min(130px, calc((100vw - 1212px) / 2 - 16px))); width: calc(100% + var(--sl-ext)); margin-right: calc(-1 * var(--sl-ext)); }
}
.sl-work-eyebrow { margin: 0 0 16px; }

/* Funnels: what each one is best for, at the bottom of its card and easy to see (Klemen, 2026-11-07). */
.sl-best { margin: 26px 0 0; padding: 18px 20px 20px; border-radius: 16px; background: linear-gradient(120deg, rgba(203,167,71,.14), rgba(203,167,71,.04) 70%); border: 1px solid rgba(203,167,71,.4); border-left: 4px solid #CBA747; }
.sl-best-label { margin: 0 0 6px; font-family: var(--sp-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #E2C67E; }
.sl-best-title { margin: 0; font-family: var(--mf-font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 650; line-height: 1.2; color: #F9F8F3; }
.sl-best-title span { color: #EBD39A; font-weight: 500; }
.sl-best-text { margin: 8px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.5; color: rgba(249,248,243,.75); }

/* The engine each funnel feeds, as a pill next to "Best for", in the playbook flywheel's colours (Klemen, 2026-11-07). */
.sl-best-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.sl-engine-pill { padding: 6px 13px; border-radius: 999px; font-family: var(--mf-font-body, "DM Sans", sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: #fff; }
.sl-engine-pill.is-rr { background: linear-gradient(120deg, #2E9E5E, #5FD08F); box-shadow: 0 0 18px rgba(95,208,143,.35); }
.sl-engine-pill.is-ev { background: linear-gradient(120deg, #A84BC0, #D77BE3); box-shadow: 0 0 18px rgba(215,123,227,.35); }
.sl-engine-pill.is-promo { background: linear-gradient(120deg, #1E86D0, #4DB5F0); box-shadow: 0 0 18px rgba(77,181,240,.35); }
.sl-best .sl-best-label { margin-bottom: 14px; }

/* Flywheel: each engine's business result beside its "10 Sprints" card, and air above the caption (Klemen, 2026-11-07). */
.sl-fw-out-t { font-family: var(--mf-font-body, "DM Sans", sans-serif); font-size: 14.5px; font-weight: 600; letter-spacing: .005em; }
.sl-fw .sl-e3-cap { margin-top: 26px; }

/* The example Sprint's title card, first on the trail: same width as the steps, a bigger title. */
.sl-title-card { display: flex; flex-direction: column; justify-content: center; min-height: 120px; }
.sl-title-card h3 { font-size: 24px; line-height: 1.2; }
@media (min-width: 720px) { .sl-title-card h3 { font-size: 28px; } }

/* What we can do for you: the localization card, across both columns, with the top 10 languages, the largest
   countries that speak each one (flags from flagcdn.com) and the same line in each language and alphabet. */
.sl-local-card { grid-column: 1 / -1; }
.sl-local-card > p { max-width: 760px; }
.sl-langs { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.sl-langs li { padding: 14px 16px; border-radius: 14px; background: rgba(249,248,243,.04); border: 1px solid rgba(249,248,243,.09); min-width: 0; }
.sl-lang-top { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sl-lang-top b { font-size: 15.5px; color: var(--sp-text); margin-right: 2px; }
.sl-lang-flags { display: inline-flex; gap: 5px; }
.sl-lang-flags img { display: block; width: 24px; height: 18px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(249,248,243,.18); }
.sl-lang-more { font-size: 12.5px; font-weight: 600; color: var(--sp-dim); }
.sl-local-card .sl-lang-line { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: #EBD39A;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans Thai", "Noto Sans Devanagari", "Noto Sans Arabic", "PingFang SC", "Hiragino Sans", sans-serif; }
.sl-lang-line[dir="rtl"] { text-align: right; }
@media (max-width: 720px) { .sl-langs { grid-template-columns: 1fr; } .sl-local-card .sl-lang-line { font-size: 16px; } }

/* Screen flicker (Klemen, 2026-11-09): the page had about 95 "liquid glass" layers, each blurring whatever lies behind
   it (backdrop-filter) on every frame while the page scrolls and the hero animates, and that made the whole screen
   shimmer on some Macs. The cards sit on a still, dark page, so the blur showed almost nothing: they now get a solid
   backing in the page's own dark under the same glass tint, and only the header bar, its nav pill and the phones'
   pinned eyebrow bar keep a real blur (they sit over moving content). */
.sp-glass, .sp-btn-ghost { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #0E1712; }
.sp-cv-tile, #sprint-catalog .sp-cv-tile { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* The flicker test switches (engine.js): ?calm and ?flat. */
html.sl-calm *, html.sl-calm *::before, html.sl-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.sl-flat *, html.sl-flat *::before, html.sl-flat *::after { background-image: none !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.sl-flat canvas { visibility: hidden !important; }
html.sl-flat .sp-word, html.sl-flat .sl-word-filter, html.sl-flat .sl-work-num { color: #A7DDD6 !important; -webkit-text-fill-color: #A7DDD6 !important; }
.sl-flat-me, .sl-flat-me::before, .sl-flat-me::after { background-image: none !important; }
html.sl-flat-shadow *, html.sl-flat-shadow *::before, html.sl-flat-shadow *::after { box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.sl-flat-txt { color: #A7DDD6 !important; -webkit-text-fill-color: #A7DDD6 !important; }
html.sl-flat-canvas canvas { visibility: hidden !important; }

/* Screen flicker, the cause (Klemen, 2026-11-09, found with ?flat=page on his older Samsung): the page's large, very
   dark gradients, i.e. the body's green-to-black fade over the first 900px and the gold and teal glow at the top of
   the hero, Connect, Funnels and Work sections. Near-black fades that wide shimmer on some panels, so the page is a
   flat dark green-black and the sections have no glow. Cards and smaller gradients stay. */
html[data-et-theme="dark"] body { background-image: none; background-color: #0C130F; }
.sp-glow::before { display: none; }