/* motus.leap — landing and help
   Design system: motus.leap (Atomic 22 landing system). Dark only.
   Composition: an asymmetric hero where a video leaps along the logo's arc
   into a playlist, then a hands-on review board, a job queue, a three-node
   "what runs where" flow, a scroll-filled timeline and an exclusive FAQ. */

@font-face{font-family:"Source Sans 3";src:url(assets/fonts/SourceSans3.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:Lexend;src:url(assets/fonts/Lexend.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Deltha;src:url(assets/fonts/Deltha.woff2) format("woff2");font-display:swap}

:root{
  color-scheme:dark;
  /* colour tokens (design system: site-*) */
  --site-ground:#0c131d;--site-panel:#111d2b;--site-ink:#edf2fa;--site-lead:#c5d0df;
  --site-body-soft:#c2cfe0;--site-muted:#b0bed0;--site-nav:#aebccd;--site-rule:#2c394a;
  --site-panel-line:#334258;--site-row-line:#243247;--site-timeline:#29384c;
  --site-accent:#78b6ff;--site-accent-hover:#bedcff;--site-on-accent:#091321;
  --site-step-number:#80b8f5;--site-selection:#3466a1;
  --brand-blue:#2f8fc9;--brand-dot:#8894a3;--wordmark-ink:#f3f5f8;
  --status-success:#16a34a;--status-warning:#ca8a04;
  /* type */
  --font-wordmark:Deltha,"Source Sans 3",serif;
  --font-display:Lexend,"Source Sans 3",sans-serif;
  --font-body:"Source Sans 3",system-ui,sans-serif;
  /* shape + space */
  --radius-button:7px;--radius-card:12px;
  --space-section:clamp(48px,7vw,96px);
  --measure:min(1320px,100% - 2*max(16px,5vw));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--site-ground);color:var(--site-ink);font:18px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--site-accent);text-underline-offset:5px;text-decoration-thickness:1px}
a:hover{color:#fff}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--site-accent);outline-offset:5px;border-radius:2px}
::selection{background:var(--site-selection);color:#fff}
h1,h2,h3{text-wrap:balance;margin:0}
p{text-wrap:pretty;margin:0}

.skip{position:absolute;left:12px;top:-80px;z-index:50;background:var(--site-panel);padding:10px 16px;border-radius:var(--radius-button)}
.skip:focus{top:12px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgb(12 19 29 / .82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent}
.bar{width:var(--measure);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-block:18px}
.publisher{color:#e5edf8;font-weight:650;text-decoration:none;letter-spacing:.01em}
.site-header nav{display:flex;gap:28px;flex-wrap:wrap;font-size:.98rem}
.site-header nav a{color:var(--site-nav);text-decoration:none}
.site-header nav a:hover,.site-header nav a[aria-current]{color:#fff}
.progress{position:absolute;inset:auto 0 -1px;height:2px;background:var(--site-accent);transform-origin:0 50%;scale:0 1}

/* ---------- shared bits ---------- */
main>section{width:var(--measure);margin:auto;padding-block:var(--space-section)}
main>section+section{border-top:1px solid var(--site-panel-line)}
h2{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.025em;font-weight:700}
h3{font-size:1.35rem;line-height:1.3;font-weight:650}
.section-intro{max-width:46rem;margin-bottom:clamp(32px,5vw,56px)}
.section-intro h2{margin:0}
.section-intro>p{margin-top:18px;color:var(--site-lead);font-size:1.15rem}
.lead{font-size:clamp(1.15rem,1.6vw,1.32rem);color:var(--site-lead);max-width:36rem}
.status,.note,figcaption{font-size:.94rem;color:var(--site-muted)}
.note{margin-top:28px}
.actions{display:flex;gap:16px 28px;align-items:center;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;background:var(--site-accent);color:var(--site-on-accent);border-radius:var(--radius-button);font-weight:650;font-size:1.05rem;text-decoration:none;transition:background-color .15s}
.button:hover{background:var(--site-accent-hover);color:var(--site-on-accent)}
.button:active{scale:.98}
.text-link{font-weight:600}
.chip{display:inline-block;padding:2px 10px;margin-right:8px;border:1px solid var(--site-panel-line);border-radius:999px;font-size:.82rem;font-weight:600;color:var(--site-ink);letter-spacing:.02em}
.replay{background:transparent;color:#d6e2f1;border:1px solid var(--site-panel-line);border-radius:var(--radius-button);padding:8px 16px;font-size:.92rem;transition:border-color .15s,color .15s}
.replay:hover{border-color:var(--site-accent);color:#fff}
.thumb{flex:none;width:56px;aspect-ratio:16/9;border-radius:5px;background:linear-gradient(135deg,#1d3550,#16263a);position:relative}
.thumb::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-left:9px solid var(--site-accent);border-block:6px solid transparent;translate:2px 0}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:start;padding-block:clamp(40px,7vw,96px) var(--space-section)}
.hero-copy{display:flex;flex-direction:column;gap:26px;min-width:0}
.identity{display:flex;align-items:center;gap:16px;text-decoration:none;width:fit-content}
.identity-symbol{width:74px;height:auto}
.wordmark{font:clamp(1.9rem,3.2vw,2.6rem)/1.2 var(--font-wordmark);color:var(--wordmark-ink);letter-spacing:0;view-transition-name:wordmark}
.wordmark .u{color:var(--brand-blue)}
.wordmark .dot{color:var(--brand-dot)}
.hero h1{font:700 clamp(3rem,7vw,6.2rem)/1.0 var(--font-display);letter-spacing:-.04em}
.hero .status{display:flex;align-items:center;flex-wrap:wrap;gap:6px}

/* the sorter: example videos leap from Watch later into playlists (one orchestrated moment) */
.sorter{margin:0;min-width:0;display:flex;flex-direction:column;gap:14px}
.sorter{container-type:inline-size}
.stage{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(16px,2.5vw,32px);padding:clamp(16px,2vw,24px);border:1px solid var(--site-row-line);border-radius:var(--radius-card);background:linear-gradient(160deg,#111d2b 0%,var(--site-ground) 75%)}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--site-row-line)}
.panel-head .title{font-weight:650;font-size:1rem}
.chan{font-size:.82rem;color:var(--site-muted);font-variant-numeric:tabular-nums}
.chan b{font-weight:600;color:var(--site-body-soft)}
.inbox-list,.pl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.inbox-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:6px;border-radius:9px;position:relative;transition:background-color .2s,opacity .3s}
.inbox-row .meta,.pl-meta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.inbox-row .title,.pl-meta .title{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-row.active{background:rgb(120 182 255 / .1)}
.inbox-row.gone{opacity:0}
.inbox-row.moved{grid-template-columns:1fr;padding:3px 6px;opacity:.75}
.inbox-row.moved .thumb{display:none}
.inbox-row.moved .title{font-weight:500;font-size:.84rem}
.inbox-row.moved .chan{color:var(--site-step-number)}
.inbox-row.moved .chan::before{content:"\2713  "}
.inbox-row.waiting .thumb{outline:1.5px dashed var(--site-accent);outline-offset:2px}
.verdict{align-self:flex-start;margin-top:4px;font-size:.74rem;font-weight:650;padding:2px 8px;border-radius:999px;border:1px solid var(--site-panel-line);color:var(--site-body-soft);white-space:nowrap}
.verdict:empty{display:none}
.verdict.ok{border-color:var(--site-accent);color:var(--site-ink)}

/* video thumbnails: 16:9, play glyph, duration badge */
.stage .thumb{flex:none;position:relative;width:88px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--g,#1d3550)}
.stage .thumb::after{border-left-color:#fff;border-left-width:11px;border-block-width:7px}
.stage .thumb svg{position:absolute;left:5px;top:5px;width:22%;height:auto;opacity:.85;fill:none;stroke:rgb(237 242 250 / .9);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.stage .thumb .dur{position:absolute;right:4px;bottom:4px;font:600 .66rem/1 var(--font-body);padding:2px 4px;border-radius:3px;background:rgb(0 0 0 / .78);color:#fff;font-variant-numeric:tabular-nums}
.t-travel{--g:linear-gradient(135deg,#2f8fc9,#1b4f7a)}
.t-workshop{--g:linear-gradient(135deg,#3466a1,#1c2f4c)}
.t-music{--g:linear-gradient(135deg,#5a6b85,#2a3442)}
.t-learning{--g:linear-gradient(135deg,#4b86c9,#23466e)}
.t-misc{--g:linear-gradient(135deg,#3a4656,#1e2732)}

/* playlist cards: stacked covers + count badge, the way playlists look on YouTube */
.pl{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:8px 6px 6px}
.pl-cover{position:relative;width:96px;aspect-ratio:16/9;border-radius:6px;background:var(--g);display:grid;place-items:start center;padding-top:9%;box-shadow:0 -5px 0 -2px #415069,0 -9px 0 -4px #2b3747}
.pl-cover>svg{width:30%;fill:none;stroke:rgb(237 242 250 / .9);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pl-badge{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:3px;padding:3px 6px;border-radius:6px 0 6px 0;background:rgb(0 0 0 / .78);color:#fff;font:600 .7rem/1 var(--font-body);font-variant-numeric:tabular-nums}
.pl-badge svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.pl.bump .pl-cover{animation:bump .45s ease-out}
@keyframes bump{40%{scale:1.08}}
.stage .leaper{position:absolute;z-index:5;pointer-events:none;box-shadow:0 14px 30px rgb(0 0 0 / .5)}

@container (max-width:560px){
  .stage{grid-template-columns:1fr}
  .pl-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pl{grid-template-columns:1fr;gap:6px}
  .pl-cover{width:100%}
}
.sorter figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;font-variant-numeric:tabular-nums}
.sorter figcaption span{flex:1 1 auto;min-width:0}
.sorter figcaption .replay{flex:none}
@media (max-width:520px){.sorter figcaption{flex-wrap:wrap}}

/* ---------- review board ---------- */
.board{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;container-type:inline-size}
.pane{min-width:0}
.pane-review,.playlist{background:var(--site-panel);border:1px solid var(--site-panel-line);border-radius:var(--radius-card);padding:20px}
.pane-playlists{display:grid;gap:20px;align-content:start}
.pane-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.pane-head h3{font-size:1.1rem}
.pane-count{font-size:.85rem;font-weight:650;min-width:28px;padding:2px 9px;text-align:center;border-radius:999px;border:1px solid var(--site-panel-line);color:var(--site-body-soft);font-variant-numeric:tabular-nums}
.review-list,.playlist-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.video{background:var(--site-ground);border:1px solid var(--site-row-line);border-radius:10px;padding:14px;display:grid;gap:12px;view-transition-class:video}
.video-main{display:flex;gap:14px;align-items:center;min-width:0}
.video-title{font-weight:650;line-height:1.3}
.video-meta{font-size:.86rem;color:var(--site-muted)}
.suggestion{font-size:.92rem;color:var(--site-body-soft)}
.suggestion strong{color:var(--site-accent);font-weight:650}
.video-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-confirm,.btn-skip{min-height:40px;padding:8px 16px;border-radius:var(--radius-button);font-size:.92rem;font-weight:600;border:1px solid transparent}
.btn-confirm{background:var(--site-accent);color:var(--site-on-accent)}
.btn-confirm:hover{background:var(--site-accent-hover)}
.btn-skip{background:transparent;color:#d6e2f1;border-color:var(--site-panel-line)}
.btn-skip:hover{border-color:var(--site-accent);color:#fff}
.video.placed{grid-template-columns:auto 1fr;align-items:center;padding:10px 12px;gap:12px}
.video.placed .thumb{width:44px}
.video.placed .video-title{font-size:.95rem}
.video.left-alone{opacity:.62}
.video.left-alone .suggestion::after{content:" · left in place";color:var(--site-muted)}
.video.just-placed{border-color:var(--site-accent)}
.empty{display:none;padding:28px 8px;text-align:center;color:var(--site-muted)}
.pane-review:not(:has(.review-list .video)) .empty{display:block}
.board-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
@container (min-width:620px){
  .review-list .video{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .review-list .video .suggestion{grid-column:1}
  .review-list .video .video-actions{grid-column:2;grid-row:1 / span 2;flex-direction:column}
}
::view-transition-group(*.video){animation-duration:.45s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}


/* ---------- real screenshots ---------- */
.shot-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);align-items:start}
.shot-row li:nth-child(2){margin-top:clamp(0px,4vw,56px)}
.shot-row figure{margin:0;display:flex;flex-direction:column;gap:16px}
.shot-row img{width:100%;border-radius:22px;border:1px solid var(--site-panel-line);background:#0f1115;box-shadow:0 24px 60px rgb(0 0 0 / .45)}
.shot-row figcaption{color:var(--site-body-soft);font-size:.98rem}
.shot-row figcaption strong{display:block;color:var(--site-ink);font-size:1.08rem;margin-bottom:2px}
@media (max-width:760px){
  .shot-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:12px;margin-inline:calc(-1 * max(16px,5vw));padding-inline:max(16px,5vw);scrollbar-width:thin}
  .shot-row li{flex:0 0 78%;scroll-snap-align:center}
  .shot-row li:nth-child(2){margin-top:0}
}

/* ---------- job queue ---------- */
.queue{list-style:none;margin:0;padding:0;border-top:1px solid var(--site-panel-line);container-type:inline-size}
.job{display:grid;gap:6px 24px;padding:22px 0;border-bottom:1px solid var(--site-panel-line);grid-template-columns:1fr auto;align-items:start}
.job-name{font:650 1.2rem/1.3 var(--font-display);letter-spacing:-.01em}
.job-desc{grid-column:1 / -1;color:var(--site-body-soft);max-width:48rem}
.state{grid-column:2;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;font-size:.84rem;font-weight:600;border:1px solid var(--site-panel-line);white-space:nowrap}
.state::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.state-done{color:var(--site-ink)}.state-done::before{background:var(--status-success)}
.state-running{color:var(--site-ink)}.state-running::before{background:var(--site-accent)}
.state-queued{color:var(--site-ink)}.state-queued::before{background:transparent;border:2px solid var(--site-muted)}
.state-review{color:var(--site-ink)}.state-review::before{background:var(--status-warning)}
@media (prefers-reduced-motion:no-preference){.state-running::before{animation:pulse 1.4s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.35}}
@container (min-width:760px){
  .job{grid-template-columns:260px minmax(0,1fr) 150px;align-items:center}
  .job-desc{grid-column:2}
  .state{grid-column:3}
}

/* ---------- what runs where ---------- */
.flow{display:grid;grid-template-columns:1fr 64px 1fr 64px 1fr;align-items:stretch;container-type:inline-size}
.node{border:1px solid var(--site-panel-line);border-radius:var(--radius-card);padding:24px;background:var(--site-panel);display:flex;flex-direction:column;gap:10px;min-width:0}
.node-core{border-color:var(--brand-blue);background:linear-gradient(var(--site-panel),var(--site-panel)) padding-box}
.node-kicker{font-size:.92rem;color:var(--site-step-number);font-weight:600}
.node p:last-child{color:var(--site-body-soft);font-size:.98rem}
.link{position:relative;display:flex;align-items:center}
.link span{display:block;width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--site-accent) 0 6px,transparent 6px 12px);position:relative}
.link span::before,.link span::after{content:"";position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--site-accent);translate:0 -50%}
.link span::before{left:-4px}.link span::after{right:-4px}

/* ---------- walkthrough ---------- */
.walk{counter-reset:walk;list-style:none;margin:0 0 36px;padding:0 0 0 72px;position:relative;max-width:900px;view-timeline:--walk block}
.walk::before,.walk::after{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--site-timeline)}
.walk::after{background:var(--site-accent);transform-origin:50% 0;scale:1 1}
.walk li{counter-increment:walk;position:relative;padding-bottom:44px}
.walk li:last-child{padding-bottom:0}
.walk li::before{content:counter(walk,decimal-leading-zero);position:absolute;left:-72px;top:-2px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--site-panel-line);background:var(--site-ground);color:var(--site-step-number);font:600 .95rem/1 var(--font-body);z-index:1}
.walk h3{margin-bottom:8px}
.walk p{color:var(--site-body-soft);max-width:44rem}

/* ---------- faq ---------- */
.faq-list{max-width:900px;border-top:1px solid var(--site-panel-line)}
details{border-bottom:1px solid var(--site-panel-line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:650 1.18rem/1.35 var(--font-body)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--site-accent);border-bottom:2px solid var(--site-accent);rotate:45deg;translate:0 -3px;transition:rotate .2s,translate .2s}
details[open] summary::after{rotate:225deg;translate:0 3px}
summary:hover{color:#fff}
details p{padding:0 0 24px;color:var(--site-body-soft);max-width:46rem}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:clip;transition:block-size .3s ease,content-visibility .3s allow-discrete}
  details[open]::details-content{block-size:auto}
}

/* ---------- download ---------- */
.download-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,5vw,56px);border:1px solid var(--site-panel-line);border-radius:20px;background:var(--site-panel);position:relative;overflow:hidden}
.download-card img{width:clamp(96px,14vw,180px)}
.download-card h2{margin-bottom:12px}
.download-card .actions{margin-top:24px}
.resources{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:22px;font-size:.98rem}

/* ---------- footer ---------- */
.site-footer{width:var(--measure);margin:auto;border-top:1px solid var(--site-panel-line);padding-block:32px 48px;color:var(--site-muted);display:flex;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;font-size:.94rem}
.site-footer .resources{margin-top:0}

/* ---------- help page ---------- */
.help{width:var(--measure);margin:auto;padding-block:clamp(40px,6vw,80px) var(--space-section);display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.help-head{grid-column:1 / -1}
.help-head h1{font:700 clamp(2.4rem,5vw,4rem)/1.05 var(--font-display);letter-spacing:-.035em;margin-bottom:14px}
.help-head p{color:var(--site-lead);font-size:1.2rem}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--site-panel-line);padding-left:16px}
.toc a{color:var(--site-nav);text-decoration:none;padding:6px 0;font-size:.98rem}
.toc a:hover{color:#fff}
.help-body section{padding-block:0 40px;scroll-margin-top:96px}
.help-body section+section{padding-top:40px;border-top:1px solid var(--site-panel-line)}
.help-body h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:14px}
.help-body p{color:var(--site-body-soft);max-width:44rem}


/* ---------- merged page additions ---------- */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:40px;height:auto}
.brand .wordmark{font-size:1.6rem;view-transition-name:wordmark}
.nav-cta{background:var(--site-accent);color:var(--site-on-accent)!important;padding:8px 16px;border-radius:var(--radius-button);font-weight:650}
.nav-cta:hover{background:var(--site-accent-hover)}
.site-header nav{align-items:center}
.availability{display:inline-flex;align-items:center;gap:8px;width:fit-content;font-size:.95rem;color:var(--site-step-number);font-weight:600}
.availability::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--site-accent)}

/* real Android screens */
.phone-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.5vw,32px);align-items:start}
.phone-row li:nth-child(even){margin-top:clamp(0px,3vw,40px)}
.phone-row figure{margin:0;display:flex;flex-direction:column;gap:14px}
.phone-row a{display:block;border-radius:26px}
.phone-row img{width:100%;border-radius:26px;border:6px solid #1b2533;outline:1px solid var(--site-panel-line);box-shadow:0 24px 50px rgb(0 0 0 / .45);background:#0f1115}
.phone-row figcaption,.shot-row figcaption{color:var(--site-body-soft);font-size:.98rem}
.phone-row figcaption strong{display:block;color:var(--site-ink);font-size:1.08rem;margin-bottom:2px}

/* channel rules */
.rule-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.rule-copy{display:flex;flex-direction:column;gap:14px;max-width:44rem}
.rule-copy h3{font-size:1.5rem}
.rule-copy p{color:var(--site-body-soft)}
.route{list-style:none;margin:0;padding:24px;display:flex;flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--site-panel-line);border-radius:var(--radius-card);background:var(--site-panel)}
.route li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px;background:var(--site-ground);border:1px solid var(--site-row-line)}
.route li+li{margin-top:34px;position:relative}
.route li+li::before{content:"↓";position:absolute;left:50%;top:-30px;translate:-50% 0;color:var(--site-accent);font-size:1.1rem}
.route .thumb{width:64px}
.route b{display:block;font-weight:650}
.route .route-rule{justify-content:center;border-color:var(--site-accent);color:var(--site-ink);gap:10px}
.route .route-rule b{display:inline;color:var(--site-accent)}
.pl-mini{flex:none;width:64px;aspect-ratio:16/9;border-radius:6px;background:var(--g);box-shadow:0 -4px 0 -2px #415069,0 -7px 0 -4px #2b3747}

/* web shots: same frame for differently sized captures */
.shot-row img{aspect-ratio:1/1;object-fit:cover;object-position:top left}

/* download: two paths */
.get-paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0 18px}
.get-paths>div{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:20px;border:1px solid var(--site-panel-line);border-radius:var(--radius-card);background:var(--site-ground)}
.get-paths h3{font-size:1.15rem}
.get-paths p{color:var(--site-body-soft);font-size:.98rem}
.get-paths .button{margin-top:auto}
.optional{font-size:.8rem;font-weight:600;color:var(--site-muted);border:1px solid var(--site-panel-line);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:middle}
.button-ghost{background:transparent;color:var(--site-ink);border:1px solid var(--site-panel-line)}
.button-ghost:hover{background:transparent;border-color:var(--site-accent);color:#fff}
@media (max-width:760px){.get-paths{grid-template-columns:1fr}}

/* footer */
.site-footer{flex-direction:column}
.foot-main{display:flex;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;width:100%}
.foot-main p{margin-top:4px}
.trademark{font-size:.84rem;color:var(--site-muted);max-width:70ch}

@media (max-width:1000px){.phone-row{grid-template-columns:repeat(2,minmax(0,1fr))}.rule-split{grid-template-columns:1fr}}
@media (max-width:760px){
  .phone-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:12px;margin-inline:calc(-1 * max(16px,5vw));padding-inline:max(16px,5vw)}
  .phone-row li{flex:0 0 62%;scroll-snap-align:center;margin-top:0!important}
  .site-header nav a:not(.nav-cta){display:none}
  .bar{flex-wrap:nowrap}
  .brand .wordmark{font-size:1.35rem}
  .brand img{width:32px}
  .nav-cta{white-space:nowrap;padding:8px 12px;font-size:.88rem}
}

/* ---------- scroll-driven enhancements (decorative, progressive) ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:scroll()) and (animation-range:0 1px)){
    .progress{animation:grow-x linear both;animation-timeline:scroll(root block)}
    .site-header{animation:header-line linear both;animation-timeline:scroll(root block);animation-range:0 80px}
  }
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    .walk::after{animation:fill-y linear both;animation-timeline:--walk;animation-range:cover 10% contain 60%}
  }
  @view-transition{navigation:auto}
}
@keyframes grow-x{to{scale:1 1}}
@keyframes header-line{to{border-bottom-color:var(--site-rule)}}
@keyframes fill-y{from{scale:1 0}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;grid-template-rows:auto 40px auto 40px auto}
  .link{justify-content:center}
  .link span{width:2px;height:100%;background:repeating-linear-gradient(180deg,var(--site-accent) 0 6px,transparent 6px 12px)}
  .link span::before{left:50%;top:-4px;translate:-50% 0}
  .link span::after{left:50%;right:auto;top:auto;bottom:-4px;translate:-50% 0}
}
@media (max-width:760px){
  body{font-size:17px}
  .bar{gap:10px 20px}
  .site-header nav{gap:18px;font-size:.92rem}
  .board{grid-template-columns:1fr}
  .walk{padding-left:60px}
  .walk::before,.walk::after{left:17px}
  .walk li::before{left:-60px;width:36px;height:36px;font-size:.85rem}
  .download-card{grid-template-columns:1fr}
  .help{grid-template-columns:1fr}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 18px;border-left:0;padding-left:0}
}