.runner-journey-shell[data-runner-journey]{display:grid;grid-template-columns:245px minmax(0,1fr);gap:26px;align-items:start;max-width:1440px;margin:auto}
.runner-explorer-nav{display:grid;gap:8px;position:sticky;top:100px}
.runner-explorer-nav button{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 14px;border:1px solid #ffffff12;border-radius:14px;background:#0b102280;color:#b5c1d3;transition:background .25s,border-color .25s,box-shadow .25s;width:100%;cursor:pointer}
.runner-explorer-nav button[aria-pressed=true]{background:linear-gradient(120deg,#17384c,#17182b);border-color:#52d7ed70;box-shadow:0 0 24px #2ed1f410;color:white}
.runner-explorer-nav button:hover{border-color:#73e3f080}
.runner-explorer-nav button:focus-visible{outline:2px solid #65dff0;outline-offset:3px}
.runner-explorer-nav strong{display:block;font-size:14px;font-weight:600;line-height:1.4}
.runner-explorer-nav small{display:block;font-size:11px;line-height:1.5;margin-top:4px;color:#8eabc0}
.runner-explorer-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid #525266;border-radius:50%;background:linear-gradient(145deg,#101124,#090a1a);transition:box-shadow .25s,border-color .25s}
.runner-explorer-nav [aria-pressed=true] .runner-explorer-icon{border-color:#b5f4fc;box-shadow:0 0 16px #38d9f047,inset 0 0 12px #4bdcf016}
.runner-explorer-stage{min-width:0;position:relative;isolation:isolate;padding:20px;border-radius:24px;background:radial-gradient(ellipse at 55% 22%,#25bada24,transparent 65%),radial-gradient(ellipse at 90% 85%,#9260e31a,transparent 70%);border:1px solid #80d9ff12}
.runner-explorer-stage .runner-browser{box-shadow:0 20px 60px #00000040,0 0 45px #20bad510}
.runner-explorer-stage .runner-journey-transport{display:flex!important;justify-content:center;align-items:center;min-height:0!important;margin:12px 0 0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.runner-explorer-stage [data-runner-status],.runner-explorer-stage [data-runner-caption],.runner-explorer-stage [data-runner-next],.runner-explorer-stage [data-runner-previous]{display:none!important}
.runner-explorer-stage .runner-journey-actions{justify-content:center;gap:10px}
.runner-explorer-stage .runner-journey-control{font-size:11px!important;min-height:30px!important;padding:5px 10px!important;background:transparent!important;border-color:#ffffff18!important;box-shadow:none!important}
.runner-explorer-stage [data-runner-play-label]{display:inline!important}
@media(max-width:1000px){.runner-journey-shell[data-runner-journey]{grid-template-columns:1fr;gap:14px}.runner-explorer-nav{position:static;display:flex;overflow-x:auto;padding:3px 0 8px;gap:8px}.runner-explorer-nav button{width:auto;flex:0 0 auto;padding:10px}.runner-explorer-nav small{display:none}.runner-explorer-nav strong{font-size:12px}.runner-explorer-icon{flex-basis:32px;width:32px;height:32px}.runner-explorer-icon img{width:23px;height:23px}.runner-explorer-stage{padding:12px}}
@media(prefers-reduced-motion:reduce){.runner-explorer-nav button,.runner-explorer-icon{transition:none}}

/* One fixed browser format; scene content scales uniformly inside it. */
.runner-explorer-stage{min-height:620px;display:flex;flex-direction:column;justify-content:center;padding:52px 42px;background:radial-gradient(ellipse 35% 65% at 0% 50%,#21c6e538,transparent 90%),radial-gradient(ellipse 35% 65% at 100% 50%,#9b60dc30,transparent 90%),#090e1c}
.runner-explorer-stage .runner-browser{width:100%;max-width:760px;margin:0 auto;flex:none}
.runner-explorer-stage .runner-browser-viewport{position:relative!important;aspect-ratio:3/2!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
.runner-explorer-stage .runner-browser-chrome{flex:none}
.runner-explorer-stage .runner-journey-transport{flex:none}
@media(max-width:1000px){.runner-explorer-stage{min-height:0;padding:32px 22px}}
@media(max-width:600px){.runner-explorer-stage{padding:24px 10px}.runner-explorer-stage .runner-browser-viewport{aspect-ratio:3/2!important}}
.runner-explorer-stage .runner-browser-viewport{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
.runner-explorer-stage .runner-browser{container-type:inline-size}
.runner-explorer-stage .runner-browser-viewport{height:66.666cqw!important;aspect-ratio:auto!important}

.runner-heading-transport{display:flex!important;justify-content:center!important;align-items:center;min-height:0!important;margin:16px auto 24px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.runner-heading-transport [data-runner-status],.runner-heading-transport [data-runner-caption],.runner-heading-transport [data-runner-next],.runner-heading-transport [data-runner-previous]{display:none!important}
.runner-heading-transport .runner-journey-actions{justify-content:center;gap:10px}
.runner-heading-transport .runner-journey-control{font-size:11px!important;min-height:30px!important;padding:5px 10px!important;background:transparent!important;border-color:#ffffff18!important;box-shadow:none!important}
.runner-heading-transport [data-runner-play-label]{display:inline!important}

/* Outer stage matches navigation; the browser is a smaller landscape exhibit. */
.runner-journey-shell[data-runner-journey]{align-items:stretch!important}
.runner-explorer-nav{position:static!important}
.runner-explorer-stage{height:100%!important;min-height:0!important;padding:28px 36px!important;justify-content:center!important;gap:24px;overflow:hidden;background:#0a1020!important}
.runner-explorer-stage::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 12% 48%,#1dbbd32e,transparent 48%),radial-gradient(ellipse at 88% 58%,#7560d529,transparent 48%);will-change:transform;animation:runnerLightFlow 16s ease-in-out infinite alternate}
.runner-explorer-stage[data-light=breathe]::before{animation:runnerLightBreathe 9s ease-in-out infinite}
.runner-explorer-stage[data-light=still]::before{animation:none;will-change:auto}
.runner-explorer-impact{color:#e9f7ff;font-size:clamp(18px,1.8vw,25px);line-height:1.3;text-align:center;font-weight:600;max-width:550px;margin:0 auto;min-height:2.6em;display:flex;align-items:center;justify-content:center}
.runner-explorer-stage .runner-browser{width:100%!important;max-width:650px!important;aspect-ratio:16/10;display:flex!important;flex-direction:column;flex:none;overflow:hidden}
.runner-explorer-stage .runner-browser-chrome{height:58px!important;min-height:58px!important;flex:0 0 58px!important;padding:5px 10px!important;box-sizing:border-box}
.runner-explorer-stage .runner-browser-tabs{height:24px!important;padding:0!important;font-size:10px!important}
.runner-explorer-stage .runner-browser-address-row{height:22px!important;padding:0!important;font-size:10px!important}
.runner-explorer-stage .runner-browser-viewport{height:auto!important;flex:1 1 0!important;min-height:0!important;aspect-ratio:auto!important}
.runner-light-options{display:flex;gap:6px;justify-content:center}
.runner-light-options button{border:1px solid #ffffff12;border-radius:20px;background:transparent;color:#7f9aac;font-size:10px;padding:5px 10px;cursor:pointer}
.runner-light-options button[aria-pressed=true]{color:#adecf5;border-color:#45d4e74d;background:#24bfd00c}
@keyframes runnerLightFlow{from{transform:translate(-3%,0)}to{transform:translate(3%,2%)}}
@keyframes runnerLightBreathe{0%,100%{opacity:.55}50%{opacity:1}}
@media(max-width:1000px){.runner-explorer-stage{height:auto!important;padding:24px 16px!important}.runner-explorer-impact{min-height:0}}
@media(prefers-reduced-motion:reduce){.runner-explorer-stage::before{animation:none!important;will-change:auto}}

/* Cyan motion studies, confined to the stage behind the browser. */
.runner-explorer-stage::before{inset:-25%;background:radial-gradient(ellipse 26% 62% at 15% 48%,#17dbf56b,transparent 74%),radial-gradient(ellipse 24% 58% at 85% 58%,#16c9e35c,transparent 74%);animation:runnerCyanFlow 12s ease-in-out infinite alternate}
.runner-explorer-stage[data-light=breathe]::before{background:radial-gradient(ellipse at 50% 52%,#18dff254,transparent 64%);animation:runnerCyanBreathe 7s ease-in-out infinite;will-change:opacity,transform}
.runner-explorer-stage[data-light=still]::before{animation:none;transform:none;opacity:.7;will-change:auto}
@keyframes runnerCyanFlow{0%{transform:translate(-5%,-3%) rotate(-8deg)}100%{transform:translate(5%,3%) rotate(8deg)}}
@keyframes runnerCyanBreathe{0%,100%{opacity:.38;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.runner-explorer-stage::before{animation:none!important;will-change:auto}}

/* Slow cyan spiral, outside the unchanged browser frame. */
.runner-explorer-stage[data-light=swirl]::before{inset:auto;left:50%;top:54%;width:94%;height:auto;aspect-ratio:1;background:url('/images/runner/cyan-swirl.svg') center/contain no-repeat;opacity:.27;transform:translate(-50%,-50%);animation:runnerCyanSwirl 80s linear infinite;will-change:transform}
@keyframes runnerCyanSwirl{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.runner-explorer-stage[data-light=swirl]::before{animation:none!important}}

.runner-explorer-stage[data-light=swirl]{background:radial-gradient(ellipse at 50% 54%,#1bcfe51c,transparent 66%),#0a1020!important}

.runner-mobile-sections{display:none}
@media(max-width:1000px){
 .runner-explorer-nav{display:none!important}
 .runner-mobile-sections{display:grid;gap:8px;color:#a9c4d3;font-size:11px}
 .runner-mobile-sections select{appearance:auto;width:100%;min-width:0;padding:14px 16px;border-radius:12px;border:1px solid #47d6ed55;background:#112133;color:#ecfaff;font:inherit;font-size:14px;cursor:pointer}
 .runner-mobile-sections select:focus-visible{outline:2px solid #4edcf1;outline-offset:3px}
}

/* Central light follows the browser without changing its geometry. */
.runner-explorer-stage[data-light=swirl] .runner-browser{box-shadow:0 0 38px 8px #20d3ee24,0 0 95px 28px #17cce51c,0 20px 50px #00000030!important}
.runner-explorer-stage[data-light=swirl]{background:radial-gradient(ellipse 48% 46% at 50% 58%,#20cfe536 0%,#17cce51a 55%,transparent 100%),#0a1020!important}

.runner-mobile-carousel{display:none}
@media(max-width:1000px){
 /* Sides fade out like the reviews row (owner 2026-10-27): the cut-off neighbouring chapters never end in a hard edge. */
 .runner-mobile-carousel{display:block;position:relative;height:100px;overflow:hidden;perspective:700px;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
 /* Dim neighbouring steps with colour, never by making the card see-through. */
 .runner-mobile-carousel button{position:absolute;z-index:1;left:50%;top:10px;width:70%;height:78px;display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #89d9ec2e;border-radius:16px;background:linear-gradient(125deg,#123144,#151c2d) #151c2d;color:#ebf7ff;text-align:left;cursor:pointer;opacity:1;filter:brightness(.55);transform:translateX(calc(-50% + var(--offset)*88%)) scale(.88) rotateY(calc(var(--offset)*-12deg));transition:transform .36s cubic-bezier(.22,.8,.25,1),filter .3s,border-color .3s;user-select:none}
 .runner-mobile-carousel button[data-near=false]{visibility:hidden}
 .runner-mobile-carousel button[aria-current=step]{z-index:2;filter:none;transform:translateX(-50%) scale(1);border-color:#53d7ed88;box-shadow:0 0 16px #32cbe619}
 .runner-mobile-carousel strong{display:block;font-size:14px;line-height:1.3}
 .runner-mobile-carousel small{display:block;font-size:10px;color:#8caeba;margin-bottom:4px}
 .runner-mobile-carousel img{pointer-events:none;-webkit-user-drag:none}
 .runner-mobile-carousel button:focus-visible{outline:2px solid #7be9fa;outline-offset:-4px}
}
@media(prefers-reduced-motion:reduce){.runner-mobile-carousel button{transition:none}}

/* Compact transport and readable walkthrough narration outside the scaled scene. */
.runner-heading-transport [data-runner-previous],.runner-heading-transport [data-runner-next]{display:inline-flex!important}
.runner-heading-transport [data-runner-previous],.runner-heading-transport [data-runner-next],.runner-heading-transport [data-runner-replay],.runner-heading-transport [data-runner-play][data-started=true]{width:40px!important;height:40px!important;padding:0!important;align-items:center;justify-content:center;font-size:21px!important}
.runner-heading-transport [data-runner-play][data-started=true] [data-runner-play-label]{display:none!important}
.runner-heading-transport .runner-journey-control:disabled{opacity:.3}
.runner-cursor-balloon{position:absolute;z-index:20;max-width:min(230px,75%);padding:9px 12px;border:1px solid #54dffb65;border-radius:12px;background:#102637f2;color:#eaffff;font-size:12px;line-height:1.4;box-shadow:0 4px 18px #0005;pointer-events:none;transition:left .35s ease,top .35s ease}
.runner-cursor-balloon[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.runner-cursor-balloon{transition:none}}

@media(max-width:700px){
 .runner-explorer-stage{padding:24px 10px!important;gap:18px}
 .runner-explorer-stage .runner-browser{aspect-ratio:3/5!important;max-height:780px}
 .runner-explorer-stage .runner-browser-viewport{overflow:hidden!important}
 .runner-heading-transport [data-runner-replay]{display:inline-flex!important}
}

/* Centre the replay SVG at every viewport, including desktop. */
.runner-heading-transport [data-runner-replay]{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;vertical-align:middle}
.runner-heading-transport [data-runner-replay] svg{display:block!important;flex:0 0 20px;width:20px!important;height:20px!important;margin:0!important;overflow:visible}

/* Icon controls float without rectangular button outlines. */
.runner-heading-transport [data-runner-previous],
.runner-heading-transport [data-runner-next],
.runner-heading-transport [data-runner-replay],
.runner-heading-transport [data-runner-play][data-started=true] {
 border:0!important; background:transparent!important; box-shadow:none!important;
}
.runner-heading-transport .runner-journey-control:focus-visible { outline:2px solid #56d9f2; outline-offset:3px; }
/* The core tour uses the stage itself as its canvas, at native text size. */
.runner-core-tour .runner-explorer-stage{padding:28px!important;gap:22px!important;justify-content:flex-start!important;align-self:start;min-height:600px!important}
.runner-core-tour .runner-explorer-stage .runner-browser{max-width:none!important;width:100%!important;aspect-ratio:auto!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;container-type:normal}
.runner-core-tour .runner-browser-viewport{flex:none!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.runner-core-tour .runner-example-label{display:none!important}
.runner-core-heading{width:100%;text-align:center}
.runner-core-progress{display:flex;align-items:center;justify-content:center;color:#8c9faf;font-size:11px;margin-bottom:24px;letter-spacing:.04em}
.runner-core-dots{display:flex;align-items:center;gap:6px}
.runner-core-dots i{width:5px;height:5px;border-radius:9px;background:#65758a60}
.runner-core-dots i.is-current{width:20px;background:#26c6e6}
.runner-core-tour .runner-explorer-impact{min-height:0;max-width:100%;font-size:clamp(22px,2.1vw,30px);font-weight:500;line-height:1.25}
.runner-core-explanation{max-width:600px;margin:12px auto 0;color:#afc0d0;font-size:15px;line-height:1.6}
.runner-core-tour .runner-explorer-stage[data-light=swirl]::before{opacity:.09;width:85%}
/* Keep the spiral as soft ambient light behind cards, without blurring their content. */
.runner-core-tour .runner-explorer-stage[data-light=swirl][data-surface=cards]::before{filter:blur(36px);opacity:.07}
.runner-core-tour .runner-explorer-stage::after{opacity:.35}
.runner-heading-transport .runner-journey-control>img,.runner-heading-transport [data-runner-play-icon]>img{display:block;width:24px;height:24px;object-fit:contain}
.runner-heading-transport [data-runner-play-icon]{border:0!important;background:none!important;box-shadow:none!important}
.runner-core-tour .runner-explorer-icon{border:0;box-shadow:none!important;background:none!important}
.runner-core-tour .runner-explorer-icon img{width:32px;height:32px;filter:none!important}
@media(max-width:700px){.runner-core-tour .runner-explorer-stage{padding:20px 12px!important;min-height:0!important;gap:18px!important}.runner-core-explanation{font-size:14px;line-height:1.5;padding:0 4px}.runner-core-progress{margin-bottom:18px}.runner-core-tour .runner-explorer-impact{font-size:23px}.runner-core-tour .runner-explorer-stage .runner-browser{aspect-ratio:auto!important;max-height:none!important}.runner-core-tour .runner-browser-viewport{max-height:none!important}}

.runner-core-tour .runner-explorer-stage{height:auto!important;overflow:clip!important}
.runner-core-heading{flex:none}

.runner-core-tour iframe{background:transparent!important}

/* Floor glow (option A, 2026-10-25): light pools up from the bottom of every slide card. */
.runner-core-tour .runner-explorer-stage[data-light]{background:linear-gradient(90deg,transparent 8%,#8fe9ff70 30%,#bff3ff80 50%,#8fe9ff70 70%,transparent 92%) bottom/100% 1px no-repeat,#0a1020!important}
.runner-core-tour .runner-explorer-stage[data-light][data-surface]::before{content:"";position:absolute;z-index:-1;inset:auto;left:50%;top:auto;bottom:-36%;width:140%;height:78%;aspect-ratio:auto;border-radius:50%;
 background:radial-gradient(closest-side,#2ed1f4a6,#22b8e880 32%,#1e8fd84a 58%,transparent)!important;filter:blur(42px)!important;opacity:1!important;transform:translateX(-50%);
 animation:runnerFloorRise 1.8s cubic-bezier(.2,.7,.2,1) both,runnerFloorBreathe 7s 1.8s ease-in-out infinite!important;will-change:transform,opacity}
@keyframes runnerFloorRise{from{opacity:0;transform:translate(-50%,45%) scale(.6)}}
@keyframes runnerFloorBreathe{50%{transform:translateX(-50%) scale(1.07);opacity:.82}}
@media(prefers-reduced-motion:reduce){.runner-core-tour .runner-explorer-stage[data-light][data-surface]::before{animation:none!important}}

/* Random flicker (2026-10-25): three light layers replace the breathing glow; the shell script gives each
   one a new random height, brightness and lean at random moments. */
.runner-core-tour .runner-explorer-stage[data-light][data-surface]::before{content:none!important}
.runner-floor-glow{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;animation:runnerFloorIn 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes runnerFloorIn{from{opacity:0;transform:translateY(30%)}}
.runner-floor-glow i{position:absolute;left:50%;bottom:-36%;width:140%;height:78%;border-radius:50%;background:radial-gradient(closest-side,#2ed1f4a6,#22b8e880 32%,#1e8fd84a 58%,transparent);filter:blur(42px);
 transform:translateX(-50%);animation:runnerFloorTide 9s ease-in-out infinite;will-change:transform}
.runner-floor-glow i+i{width:62%;height:62%;bottom:-30%;background:radial-gradient(closest-side,#7fe6ffb0,#2ed1f466 40%,transparent 75%);filter:blur(30px);opacity:.6;animation-delay:-2s}
.runner-floor-glow i:nth-child(2){left:38%}.runner-floor-glow i:nth-child(3){left:63%;animation-delay:-4.5s}
/* Floor glow motion = Tide (owner 2026-10-25, option 2): the light level rises and falls like water; replaces the random flicker. */
@keyframes runnerFloorTide{0%,100%{transform:translate(-50%,14%)}50%{transform:translate(-50%,-6%)}}
.runner-floor-glow[data-paused="true"] i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.runner-floor-glow,.runner-floor-glow i{animation:none;transition:none}}

/* One card size (2026-10-25): all five slide cards share one height; shorter scenes sit centred in it. */
.runner-core-tour .runner-explorer-stage{height:940px!important;min-height:0!important}
/* Smaller on desktop (owner 2026-10-27: "WAY too big"): the whole tour, chapter list and slides scale down evenly,
   so every slide keeps its proportions (940 px card shows ~680 px). Phones keep their own layout. */
@media(min-width:701px){.runner-core-tour{zoom:.72}}

/* Chapter cards = app tiles (2026-10-25): no border, a thin cyan inner edge and a soft cyan inner glow
   (--ri-shadow-tile). Like the app's S1 tiles, the chosen chapter's light grows slowly up from the bottom
   (800 ms after a 140 ms pause) and sinks back faster (380 ms) when another chapter is chosen. */
@property --chapter-lift{syntax:'<number>';inherits:false;initial-value:0}
.runner-core-tour .runner-explorer-nav button,.runner-core-tour .runner-mobile-carousel button{--chapter-lift:0;border:0!important;
 background:radial-gradient(130% calc(55% + 30% * var(--chapter-lift)) at 50% 118%,rgb(46 209 244 / calc(.10 + .26 * var(--chapter-lift))),rgb(46 209 244 / calc(.10 * var(--chapter-lift))) 55%,transparent 82%),linear-gradient(#ffffff0a,#ffffff0a),#0b1222!important;
 box-shadow:inset 0 0 0 1px rgb(46 209 244 / calc(.14 + .66 * var(--chapter-lift))),inset 0 0 calc(24px + 4px * var(--chapter-lift)) rgb(46 209 244 / calc(.13 + .09 * var(--chapter-lift)))!important;
 transition:--chapter-lift 380ms cubic-bezier(.4,0,.2,1),filter .3s,transform .36s cubic-bezier(.22,.8,.25,1)!important}
.runner-core-tour .runner-explorer-nav button:hover{--chapter-lift:.3;transition:--chapter-lift 800ms cubic-bezier(.3,.1,.3,1) 140ms!important}
.runner-core-tour .runner-explorer-nav button[aria-pressed=true],.runner-core-tour .runner-mobile-carousel button[aria-current=step]{--chapter-lift:1;
 transition:--chapter-lift 800ms cubic-bezier(.3,.1,.3,1) 140ms,filter .3s,transform .36s cubic-bezier(.22,.8,.25,1)!important}
@media(prefers-reduced-motion:reduce){.runner-core-tour .runner-explorer-nav button,.runner-core-tour .runner-mobile-carousel button{transition:none!important}}
/* No play walkthrough control (owner 2026-10-26): visitors step with the arrows and the chapter list. The button stays
   in the markup because runner-journey-shell.js binds to it. */
.runner-journey-control--play{display:none!important}
/* Desktop = the phone layout (owner 2026-10-27): the chapter switcher sits ABOVE the card as the same sliding
   carousel (chosen chapter in the middle, its neighbours tilted and dimmed at the sides), not as a list on the left. */
@media(min-width:1001px){
 .runner-journey-shell[data-runner-journey]{grid-template-columns:minmax(0,1fr);gap:18px;max-width:1080px}
 .runner-explorer-nav{display:none!important}
 .runner-mobile-carousel{display:block;position:relative;height:112px;overflow:hidden;perspective:900px;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
 .runner-mobile-carousel button{position:absolute;z-index:1;left:50%;top:12px;width:34%;height:86px;display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:16px;color:#ebf7ff;text-align:left;cursor:pointer;filter:brightness(.55);transform:translateX(calc(-50% + var(--offset)*96%)) scale(.88) rotateY(calc(var(--offset)*-10deg));user-select:none}
 .runner-mobile-carousel button[data-near=false]{visibility:hidden}
 .runner-mobile-carousel button[aria-current=step]{z-index:2;filter:none;transform:translateX(-50%) scale(1)}
 .runner-mobile-carousel strong{display:block;font-size:16px;line-height:1.3}
 .runner-mobile-carousel small{display:block;font-size:11px;color:#8caeba;margin-bottom:4px}
 .runner-mobile-carousel img{pointer-events:none;-webkit-user-drag:none}
 .runner-mobile-carousel button:focus-visible{outline:2px solid #7be9fa;outline-offset:-4px}
}
/* No card (owner 2026-10-27, "keep the carousel open"; phones too: "no card on mobile, just like desktop"): the slide
   sits straight on the page under the chapter carousel — no box, edge or corner, and no cyan floor glow. */
.runner-core-tour .runner-explorer-stage,.runner-core-tour .runner-explorer-stage[data-light]{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.runner-core-tour .runner-floor-glow{display:none}
/* And more (owner 2026-10-27): no cyan floor glow behind its carousel on desktop */
@media(min-width:1001px){.runner-core-tour .runner-explorer-stage[data-surface=more] .runner-floor-glow{display:none}}
/* No box while loading (owner 2026-10-27: "remove the borders, no limits"): until its own styles arrive, the
   walkthrough page paints a framed teal/purple backdrop, so the frame stays invisible until it reports ready. */
.runner-core-tour .runner-browser-iframe{opacity:0;transition:opacity .45s ease}
.runner-core-tour[data-frame-ready=true] .runner-browser-iframe{opacity:1}
@media(prefers-reduced-motion:reduce){.runner-core-tour .runner-browser-iframe{transition:none}}
/* Wider on desktop (owner 2026-10-27, "so much space unused, extend the width"): the tour spans almost the whole
   window (up to 1500 px on screen). Its lengths are inside zoom:.72, hence the division. */
@media(min-width:1001px){
 .runner-core-tour .runner-journey-shell[data-runner-journey],.runner-core-tour.runner-journey-shell[data-runner-journey]{width:min(calc(1500px / .72),calc((100vw - 64px) / .72));max-width:none;position:relative;left:50%;translate:-50% 0}
 .runner-core-tour .runner-mobile-carousel button{width:min(34%,520px)}
 /* Taller slide area to hold the bigger content (all five slides still share one height). */
 .runner-core-tour .runner-explorer-stage{height:1080px!important}
}
/* Heading swipe (owner 2026-10-27): runner-heading-swipe.js restarts this when the chapter changes. */
.runner-core-heading.is-swiping>*{animation:runnerHeadingSwipe .52s cubic-bezier(.22,.8,.25,1) both}
@keyframes runnerHeadingSwipe{from{opacity:0;transform:translateX(calc(var(--swipe-dir,1) * 60px))}}
@media(prefers-reduced-motion:reduce){.runner-core-heading.is-swiping>*{animation:none}}
/* One header on desktop (owner 2026-10-27): the section's big title/subtitle show the current slide (runner-heading-
   swipe.js), so the small heading above the slide goes; the slide gets its room. */
@media(min-width:1001px){
 .runner-core-tour .runner-core-heading{display:none!important}
 /* Same height on every slide, so nothing below jumps: the title stays on one line, the subtitle holds two. */
 .product-tour-section .product-tour-heading{max-width:none!important;width:100%}
 .product-tour-section .product-tour-title{white-space:nowrap;max-width:none}
 .product-tour-section .product-tour-subcopy{min-height:calc(2 * 1.65em);max-width:760px;margin-inline:auto}
 .product-tour-section .product-tour-title.is-swiping,.product-tour-section .product-tour-subcopy.is-swiping{animation:runnerHeadingSwipe .6s cubic-bezier(.22,.8,.25,1) both}
}
@media(prefers-reduced-motion:reduce){.product-tour-section .is-swiping{animation:none!important}}
/* No previous/next/replay buttons on desktop (owner 2026-10-27): the chapter carousel (click or swipe) and the arrow
   keys move between slides. Phones keep them. */
@media(min-width:1001px){.product-tour-heading .runner-heading-transport{display:none!important}}
/* Less space under the walkthrough (owner 2026-10-27, "too much space"): a shorter slide area, no extra room under
   the section and a smaller top padding on the next section ("How we built the prediction engine"). */
@media(min-width:1001px){
 .runner-core-tour .runner-explorer-stage{padding-bottom:0!important}
 .product-tour-section{padding-bottom:0!important}
 .how-it-works-flow-section{padding-top:40px!important}
}
/* One header on phones too (owner 2026-10-27: "just one header and subheader, just like desktop"): the section's
   title/subtitle show the current slide (runner-heading-swipe.js) and the small heading above the slide goes. */
@media(max-width:1000px){
 .runner-core-tour .runner-core-heading{display:none!important}
 /* Same height on every slide, so the carousel never jumps: the title holds two lines (sitting on the subtitle),
    the subtitle three. */
 .product-tour-section .product-tour-title{min-height:calc(2 * 1.05em);display:flex;flex-direction:column;justify-content:flex-end}
 .product-tour-section .product-tour-subcopy{min-height:calc(3 * 1.65em)}
}
/* One screen (owner 2026-10-27, "this needs to fit in ONE screen"): the slide area takes what the window leaves
   under the header, the slide title and the chapter carousel (~360 px), up to the full 1080. The walkthrough page
   scales its slides to that height (journey.js fitToFrame). Lengths are inside zoom:.72, hence the division. */
@media(min-width:1001px){
 .runner-core-tour .runner-explorer-stage{height:clamp(calc(420px / .72),calc((100vh - 360px) / .72),1080px)!important;padding-top:6px!important}
 .runner-core-tour .runner-journey-shell[data-runner-journey]{gap:8px}
}
/* The chapters are one loop (owner 2026-10-27): sync, inspect, match, buy, compare, track, then sync again. The
   cards sit further apart, with an arrow in each gap; after the last step a sync icon reads "Again". */
.runner-chapter-next{display:none}
@media(min-width:1001px){
 .runner-mobile-carousel button{overflow:visible;transform:translateX(calc(-50% + var(--offset)*112%)) scale(.88) rotateY(calc(var(--offset)*-10deg))}
 .runner-mobile-carousel button[aria-current=step]{transform:translateX(-50%) scale(1)}
 .runner-chapter-next{display:flex;flex-direction:column;align-items:center;gap:2px;position:absolute;left:109%;top:50%;translate:-50% -50%;pointer-events:none}
}
@media(min-width:1001px){.runner-chapter-next svg{opacity:.85}}
/* Cyan floor glow is back on desktop (owner 2026-10-27, "with the mirror"): one wide, flat pool of light under the
   whole slide, so the mirrored floor sits in it. It fades out before the slide's bottom and sides (no card edge). */
@media(min-width:1001px){
 .runner-core-tour .runner-explorer-stage .runner-floor-glow,.runner-core-tour .runner-explorer-stage[data-surface=more] .runner-floor-glow{display:block;
  -webkit-mask-image:linear-gradient(0deg,transparent,#000 16%),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(0deg,transparent,#000 16%),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
 .runner-core-tour .runner-floor-glow i{width:118%;height:58%;bottom:-8%;filter:blur(56px)}
 .runner-core-tour .runner-floor-glow i+i{width:52%;height:42%;bottom:-4%;filter:blur(40px);opacity:.6}
 .runner-core-tour .runner-floor-glow i:nth-child(2){left:30%}.runner-core-tour .runner-floor-glow i:nth-child(3){left:70%}
}
/* The floor glow now lives inside the walkthrough page, on each slide's own floor (owner 2026-10-27: it sat at the
   bottom of the slide area, below a shoe that stands higher). The shell's copy stays off. */
@media(min-width:1001px){.runner-core-tour .runner-explorer-stage .runner-floor-glow,.runner-core-tour .runner-explorer-stage[data-surface=more] .runner-floor-glow{display:none!important}}
/* One screen on phones (owner 2026-10-27, "EVERYTHING should fit on ONE MOBILE SCREEN, for the carousel, NO
   SCROLLING"): the slide title, subtitle, buttons, chapter row and the slide itself fill exactly the screen under the
   fixed header. 100svh = the screen with the browser's toolbars showing, so they never cover the bottom. The title and
   subtitle hold fixed room (2 + 3 lines), so --tour-above is the same on every slide; the slide page scales a slide
   that is still taller than its frame (journey.js fitPhoneScene). */
@media(max-width:700px){
 .product-tour-section{--tour-above:262px}
 /* no arrows or restart on phones (owner 2026-10-27): swipe the step row instead */
 .product-tour-heading .runner-heading-transport{display:none!important}
 .product-tour-section .product-tour-heading{margin-bottom:4px!important}
 .product-tour-section .product-tour-heading>.hero-subtitle-gradient{margin-bottom:12px!important}
 .product-tour-section .product-tour-title{font-size:23px!important;line-height:1.15!important;min-height:calc(2 * 1.15em)!important;margin:0!important}
 .product-tour-section .product-tour-subcopy{font-size:13.5px!important;line-height:1.45!important;min-height:calc(3 * 1.45em)!important;margin:6px auto 0!important}
 .product-tour-heading .runner-heading-transport{margin:2px auto 0!important;height:32px}
 .product-tour-heading .runner-heading-transport .runner-journey-control{width:36px!important;height:32px!important;min-height:32px!important}
 .runner-core-tour.runner-journey-shell[data-runner-journey]{gap:4px!important}
 .runner-core-tour .runner-mobile-carousel{height:56px}
 .runner-core-tour .runner-mobile-carousel button{top:3px;height:50px;padding:6px 14px;gap:10px}
 .runner-core-tour .runner-mobile-carousel strong{font-size:13px;line-height:1.2}
 .runner-core-tour .runner-mobile-carousel small{font-size:9.5px;margin-bottom:2px}
 .runner-core-tour .runner-mobile-carousel .runner-explorer-icon,.runner-core-tour .runner-mobile-carousel .runner-explorer-icon img{width:26px!important;height:26px!important;flex-basis:26px}
 .runner-core-tour .runner-explorer-stage{height:max(300px,calc(100svh - var(--tour-above)))!important;min-height:0!important;padding:0!important;gap:0!important}
}

/* One screen (owner 2026-10-27: "this should NOT be scrollable"): the slide area takes exactly what is left below the
   title and chapter row (~300 px under the pill), so the whole tour fits the window. The page never snaps to it
   ("this section SHOULD NOT INTERFERE WITH ANY SCROLLING"); the margin only places #runner-preview links under the header. */
@media(min-width:1001px){
 #runner-preview{scroll-margin-top:51px}
 .runner-core-tour .runner-explorer-stage{height:clamp(calc(420px / .72),calc((100vh - 404px) / .72),1080px)!important}
}

/* Step cards: title beside the icon, step count on the right (owner 2026-10-27). */
.runner-mobile-carousel button>small,.runner-core-tour .runner-mobile-carousel button>small{margin:0 0 0 auto;flex-shrink:0}