/* =========================================================================
   Sapey website · Home page styles
   ========================================================================= */

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,var(--s-paper) 100%)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 22% 32%,rgba(127,168,224,.30),rgba(127,168,224,0)),radial-gradient(32% 40% at 82% 22%,rgba(105,81,184,.10),rgba(105,81,184,0)),radial-gradient(34% 40% at 72% 56%,rgba(45,91,168,.10),rgba(45,91,168,0));pointer-events:none}
.hero-in{position:relative;padding-block:88px 104px;display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:56px;align-items:center}
/* desktop: the hero is a little wider than the page (1280px), and its text column is exactly as wide as
   "A record of every answer." at the headline's size (11em), so that sentence never breaks. The sphere takes the rest */
@media (min-width:1021px){
  .hero .sx{max-width:1280px}
  .hero-in{grid-template-columns:minmax(0,calc(clamp(31px,4.6vw,49px) * 11)) minmax(0,1fr)}
}
/* the hero headline uses the section headline size (.h2 scale), so the sphere can lead */
.display{font-size:clamp(31px,4.6vw,49px);line-height:1.03;font-weight:700;letter-spacing:-.03em;margin:24px 0;max-width:16ch;text-wrap:balance}
.grad{background:linear-gradient(90deg,var(--s-azure-light) 0%,var(--s-azure) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:19px;max-width:52ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* the stage: a sphere of requests, each answer kept in its color. No box around it.
   The canvas reaches a little left of the stage (--bleed) so the arriving stream has room.
   The script keeps the sphere, the stream and the labels 24px inside the canvas */
.visual{position:relative;display:grid}
.stage{position:relative;aspect-ratio:1/1;--bleed:0px}
.stage canvas{position:absolute;top:0;left:calc(-1 * var(--bleed));width:calc(100% + var(--bleed));max-width:none;height:100%}
.stage .motion-btn{position:absolute;right:6px;top:6px;z-index:2}
/* the label above the answer on its trip: the answer badge on top, the example action under it.
   HTML over the canvas; the script moves it with its request and sets its opacity */
.chip{position:absolute;left:0;top:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:max-content;max-width:220px;padding:8px 12px 10px 8px;background:var(--s-linen);border-radius:var(--s-r-input);box-shadow:0 8px 22px rgba(20,35,70,.14),0 1px 3px rgba(20,35,70,.10);font-size:13px;line-height:1.2;pointer-events:none;opacity:0;will-change:opacity}
.chip .ac{font-weight:600;padding-left:4px}
/* the note under the sphere: quiet text, not a card */
.visual .foot-note{font-size:12px;color:var(--s-ink2);text-align:center;width:90%;margin:-12px auto 0}

/* ---------- Why now ---------- */
.why{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:end}
/* desktop: the headline gets the wider column (two lines at most), and the last line of the headline
   and the last line of the paragraph sit on the same baseline */
@media (min-width:1021px){
  .why{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:last baseline}
  .why .h2{margin-bottom:0}
  @supports not (align-items:last baseline){
    .why{align-items:end}
    .why .lead{padding-bottom:calc((1.08em * 49 / 18 - 1.6em) / 2)}
  }
}
.dates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:56px 0 0;padding:0;list-style:none;border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.dates li{padding:28px 20px;display:grid;gap:10px;align-content:start;position:relative}
.dates li+li{border-left:1px solid var(--s-line)}
.dates li::before{content:"";position:absolute;left:20px;top:-1px;width:48px;height:3px;background:var(--c)}
.dates .cat{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--s-ink2)}
.dates .cat::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.dates time{font-family:var(--f-mono);font-weight:500;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;color:var(--s-ink)}
.dates li:first-child time{color:var(--s-azure)}
.dates p{font-size:14px;line-height:1.5;color:var(--s-ink2)}
.dates .src{font-size:12px;color:var(--s-ink2)}

/* ---------- How it works ---------- */
.tabwrap{display:flex;justify-content:center}
.tabwrap .tabs{margin-top:36px}
/* the tabs themselves are shared: base.css */
.panels{position:relative}
.panel{margin-top:40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.panel h3{font-size:clamp(25px,3.2vw,31px);font-weight:700;margin:32px 0 8px;letter-spacing:-.01em}
.panel .q{font-weight:600;margin:0 0 6px}
.panel .lead{margin-inline:auto}
/* no border: the color glow fades out before the edges, so the frame has no visible outline */
.gph{position:relative;width:100%;max-width:900px;aspect-ratio:16/7;border-radius:var(--s-r-card);background:radial-gradient(closest-side,var(--g-glow,rgba(127,168,224,.22)),rgba(255,255,255,0)),var(--s-linen);overflow:hidden}
.gph.c1{--g-glow:rgba(127,168,224,.28)}
.gph.c2{--g-glow:rgba(105,81,184,.14)}
.gph.c3{--g-glow:rgba(175,106,132,.16)}
.gph.c4{--g-glow:rgba(138,150,115,.2)}
.gph{container-type:inline-size}
.how-ctl{display:flex;justify-content:center;margin-top:16px}
/* automatic advance (assets/js/how.js): a thin bar in the active tab fills over that step's time.
   Azure on a light tab, the light on-Azure color on the selected (blue) tab */
.tab{position:relative}
.tab-bar{position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:var(--s-azure);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.tab[aria-selected="true"] .tab-bar{background:var(--s-on-az2)}
.tabs.is-auto .tab.is-timing .tab-bar{opacity:1;animation:tab-fill var(--step) linear both}
.tabs.is-held .tab-bar{animation-play-state:paused}
@keyframes tab-fill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.tab-bar{display:none}}

/* ---------- How it works · step scenes ----------
   Small pieces of the Sapey interface, drawn at 900 x 394 (the approved mockup) and scaled with the frame.
   Without the class "run" each scene is a still frame with everything in place: that is what visitors see
   with JavaScript off or with reduced motion. assets/js/how.js adds "run" to the visible step only. */
.ui{--k:1;--py:calc(var(--sp-2) + var(--sp-1));--shadow:0 18px 40px color-mix(in srgb,var(--s-ink) 8%,transparent);position:absolute;left:50%;top:50%;width:900px;height:394px;transform:translate(-50%,-50%) scale(var(--k));text-align:left;font-size:14px;line-height:1.3;color:var(--s-ink)}
.ui p{margin:0}
.ui > *{position:absolute}
@container (max-width:899px){.ui{--k:0.9778}}
@container (max-width:879px){.ui{--k:0.9556}}
@container (max-width:859px){.ui{--k:0.9333}}
@container (max-width:839px){.ui{--k:0.9111}}
@container (max-width:819px){.ui{--k:0.8889}}
@container (max-width:799px){.ui{--k:0.8667}}
@container (max-width:779px){.ui{--k:0.8444}}
@container (max-width:759px){.ui{--k:0.8222}}
@container (max-width:739px){.ui{--k:0.8}}
@container (max-width:719px){.ui{--k:0.7778}}
@container (max-width:699px){.ui{--k:0.7556}}
@container (max-width:679px){.ui{--k:0.7333}}
@container (max-width:659px){.ui{--k:0.7111}}
/* the shared interface pieces (.ui-card, .ui-head, .ui-row, .ui-dot, .ui-flow and the rest) are in base.css */

/* 1 · Understand (9 second loop) */
.u{--dot:var(--s-azure)}
.u-agent{left:48px;top:172px}
.u-agent .ui-i{width:18px;height:18px;color:var(--s-azure)}
.u-link{left:178px;top:188px;width:122px;height:10px}
.u-dot{left:100%;top:0;width:10px;height:10px;opacity:0}
.u-card{left:318px;top:46px;width:470px}
.u-head{justify-content:space-between}
.u-title{font-size:16px;font-weight:700}
.u-facts{display:flex;flex-direction:column;padding:var(--py) var(--sp-3) var(--sp-3)}
.u-facts .ui-label{margin-bottom:var(--sp-2)}
.u-facts .ui-row{height:36px;padding:0}
.u-v{position:relative;display:flex;align-items:center;min-height:24px}
.u-skel{position:absolute;right:0;width:64px;height:12px;border-radius:6px;opacity:0;background:linear-gradient(90deg,var(--s-mist) 0%,var(--s-paper) 50%,var(--s-mist) 100%);background-size:200% 100%}
.u-val{position:relative;font-weight:600}
/* EXCEPTION to "amber only means Waiting", asked for on purpose: the missing fact is what leads to the
   Waiting answer in the next step, so it carries the Waiting tint. Needs Dan's approval (see pull request #4) */
.u-miss{background:var(--s-amber-tint);border-color:var(--s-amber)}
.u-note{left:318px;top:340px;width:470px;text-align:center;font-size:13px;color:var(--s-ink2)}
.run .u-agent{animation:u-agent 9s ease-in-out infinite both}
.run .u-dot{animation:u-dot 9s ease-in-out infinite both}
.run .u-card{animation:u-card 9s ease-out infinite both}
.run .u-r1{animation:u-r1 9s ease-out infinite both}
.run .u-r2{animation:u-r2 9s ease-out infinite both}
.run .u-r3{animation:u-r3 9s ease-out infinite both}
.run .u-r4{animation:u-r4 9s ease-out infinite both}
.run .u-r1 .u-skel{animation:u-s1 9s infinite both,u-shimmer 1.2s ease-in-out infinite}
.run .u-r2 .u-skel{animation:u-s2 9s infinite both,u-shimmer 1.2s ease-in-out infinite}
.run .u-r3 .u-skel{animation:u-s3 9s infinite both,u-shimmer 1.2s ease-in-out infinite}
.run .u-r4 .u-skel{animation:u-s4 9s infinite both,u-shimmer 1.2s ease-in-out infinite}
.run .u-v1{animation:u-v1 9s ease-out infinite both}
.run .u-v2{animation:u-v2 9s ease-out infinite both}
.run .u-v3{animation:u-v3 9s ease-out infinite both}
.run .u-miss{animation:u-v4 9s ease-out infinite both,u-pulse 1.6s ease-in-out infinite}
.run .u-note{animation:u-note 9s ease-out infinite both}
@keyframes u-agent{0%{opacity:0;transform:translateX(-16px)}8%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes u-dot{0%,8%{left:0;opacity:0}10%{opacity:1}22%{left:100%;opacity:1}24%,100%{left:100%;opacity:0}}
@keyframes u-card{0%,20%{opacity:0;transform:translateY(10px) scale(.98)}26%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes u-r1{0%,28.9%{opacity:0;transform:translateY(6px)}33.3%,100%{opacity:1;transform:none}}
@keyframes u-r2{0%,34.4%{opacity:0;transform:translateY(6px)}38.9%,100%{opacity:1;transform:none}}
@keyframes u-r3{0%,40%{opacity:0;transform:translateY(6px)}44.4%,100%{opacity:1;transform:none}}
@keyframes u-r4{0%,45.6%{opacity:0;transform:translateY(6px)}50%,100%{opacity:1;transform:none}}
@keyframes u-s1{0%,33.3%{opacity:1}36.7%,100%{opacity:0}}
@keyframes u-s2{0%,38.9%{opacity:1}42.2%,100%{opacity:0}}
@keyframes u-s3{0%,44.4%{opacity:1}47.8%,100%{opacity:0}}
@keyframes u-s4{0%,53.3%{opacity:1}56.7%,100%{opacity:0}}
@keyframes u-v1{0%,33.3%{opacity:0}36.7%,100%{opacity:1}}
@keyframes u-v2{0%,38.9%{opacity:0}42.2%,100%{opacity:1}}
@keyframes u-v3{0%,44.4%{opacity:0}47.8%,100%{opacity:1}}
@keyframes u-v4{0%,53.3%{opacity:0}56.7%,100%{opacity:1}}
@keyframes u-note{0%,60%{opacity:0}64.4%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes u-shimmer{0%,100%{background-position:200% 0}50%{background-position:0 0}}
@keyframes u-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--s-amber) 0%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--s-amber) 18%,transparent)}}

/* 2 · Judge (one case every 5 seconds, from how.js). A dot takes the request to your policies; the light
   sweeps every policy at once; the same dot, now in the answer's color, takes it to the answers, and only
   then the answer and its reason show */
.j{--line:color-mix(in srgb,var(--s-violet) 50%,transparent);--dot:var(--s-azure)}
.j-dot1,.j-dot2{top:-5px;left:100%;opacity:0}
.j-dot2{--dot:var(--s-amber)}
.j[data-case="a"] .j-dot2{--dot:var(--s-jade)}
.j[data-case="r"] .j-dot2{--dot:var(--s-burg)}
.j.go .j-dot1{animation:j-dot1 5s ease-in-out both}
.j.go .j-dot2{animation:j-dot2 5s ease-in-out both}
@keyframes j-dot1{0%{left:0;opacity:0}2%{opacity:1}12%{left:100%;opacity:1}14%,100%{left:100%;opacity:0}}
@keyframes j-dot2{0%,40%{left:0;opacity:0}42%{opacity:1}52%{left:100%;opacity:1}54%,100%{left:100%;opacity:0}}
.j-l1{left:232px;top:196px;width:68px}
.j-l2{left:590px;top:196px;width:60px}
.j-req{left:40px;top:160px;width:192px;padding:14px var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1);box-shadow:0 10px 24px color-mix(in srgb,var(--s-ink) 6%,transparent)}
.j-act{display:none;font-size:14px;font-weight:700;line-height:1.25}
.j-pol{left:300px;top:70px;width:290px}
.j-pol .ui-head .ui-i{color:var(--s-violet)}
.j-pol .ui-row{position:relative;justify-content:flex-start;padding:var(--py) var(--sp-3)}
.j-sweep{position:absolute;inset:0;z-index:1;pointer-events:none;transform:translateX(-120%);background:linear-gradient(90deg,color-mix(in srgb,var(--s-violet) 0%,transparent) 0%,color-mix(in srgb,var(--s-violet) 10%,transparent) 50%,color-mix(in srgb,var(--s-violet) 0%,transparent) 100%)}
.j.go .j-sweep{animation:j-sweep 5s ease-in-out both}
.j.go .j-pol .ui-row{animation:j-glow 5s ease-in-out both}
@keyframes j-sweep{0%,12%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
@keyframes j-glow{0%,14%{background-color:var(--s-linen)}24%,32%{background-color:color-mix(in srgb,var(--s-violet) 7%,var(--s-linen))}42%,100%{background-color:var(--s-linen)}}
.j-out{left:650px;top:70px;width:220px;padding:var(--sp-3)}
.j-answers{display:flex;flex-direction:column;gap:var(--py)}
/* the three answers: the same badge, the same size; only the current one is at full strength */
.j-answers .ans{width:100%;height:48px;padding:0 var(--sp-3);gap:10px;font-size:15px;background:var(--s-linen);box-shadow:inset 0 0 0 1px var(--s-line);opacity:.45}
.j-answers .ans svg{width:20px;height:20px}
.j-answers .a{--tint:var(--s-jade-tint);--ring:var(--s-jade)}
.j-answers .r{--tint:var(--s-burg-tint);--ring:var(--s-burg)}
.j-answers .w{--tint:var(--s-amber-tint);--ring:var(--s-amber)}
.j[data-answer="a"] .ans.a,.j[data-answer="r"] .ans.r,.j[data-answer="w"] .ans.w{opacity:1;background:var(--tint);box-shadow:inset 0 0 0 1px var(--ring),0 0 0 4px var(--tint)}
.run .j-answers .ans{transition:opacity .45s ease,box-shadow .45s ease,background-color .45s ease}
.j-why{margin-top:var(--py);min-height:40px;padding:2px var(--sp-1);font-size:13px;line-height:1.35;color:var(--s-ink2)}
.j-why span{display:none}
.j[data-case="a"] .j-act[data-k="a"],.j[data-case="r"] .j-act[data-k="r"],.j[data-case="w"] .j-act[data-k="w"],
.j[data-answer="a"] .j-why [data-k="a"],.j[data-answer="r"] .j-why [data-k="r"],.j[data-answer="w"] .j-why [data-k="w"]{display:block}

/* 3 · Act (6 second loop). Both dots leave together and arrive together */
.a-list{left:40px;top:74px;width:326px}
.a-list .ui-row{height:92px;font-weight:600}
.a-lane{inset:0;pointer-events:none}
.a-lane > *{position:absolute}
.a-go-t{left:366px;top:164px;width:240px;--line:color-mix(in srgb,var(--s-jade) 45%,transparent);--dot:var(--s-jade)}
.a-stop-t{left:366px;top:256px;width:170px;--line:color-mix(in srgb,var(--s-burg) 45%,transparent);--dot:var(--s-burg)}
.a-go,.a-stop{top:-5px}
.a-go{left:95.8%;opacity:0}
.a-stop{left:100%}
.a-wall{left:560px;top:224px;height:66px;border-left:2px dashed var(--s-burg)}
/* the pill ends before the system card, so the two never overlap */
.a-tag{right:318px;top:300px;padding:6px 10px;font-size:12px;box-shadow:none}
.a-sys{left:606px;top:74px;width:254px}
.a-sys .ui-head .ui-i{color:var(--s-ink2)}
.a-sys .ui-row{height:44px;justify-content:flex-start;font-size:13px;color:var(--s-ink2)}
.a-new{max-height:44px;overflow:hidden;background:color-mix(in srgb,var(--s-jade) 7%,var(--s-linen));border-bottom:1px solid var(--s-mist)}
.a-new .ui-row{border-bottom:0;font-weight:600;color:var(--s-ink)}
.run .a-go{animation:a-go 6s ease-in-out infinite both}
.run .a-stop{animation:a-stop 6s ease-in-out infinite both}
.run .a-new{animation:a-new 6s ease-in-out infinite both}
.run .a-tag{animation:a-tag 6s ease-in-out infinite both}
.run .a-wall{animation:a-wall 6s ease-in-out infinite both}
@keyframes a-go{0%,10%{left:2.5%;opacity:0}14%{opacity:1}48%{left:95.8%;opacity:1}54%,100%{left:95.8%;opacity:0}}
@keyframes a-stop{0%,10%{left:3.5%;opacity:0}14%{opacity:1}48%,86%{left:100%;opacity:1}94%,100%{left:100%;opacity:0}}
@keyframes a-new{0%,50%{opacity:0;max-height:0;transform:translateY(-6px)}58%,90%{opacity:1;max-height:44px;transform:none}98%,100%{opacity:0;max-height:44px}}
@keyframes a-tag{0%,50%{opacity:0;transform:translateY(4px)}56%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes a-wall{0%,42%{opacity:.35}50%,86%{opacity:1}96%,100%{opacity:.35}}

/* 4 · Verify (one step every 1.1 seconds, from how.js) */
.v{--line:color-mix(in srgb,var(--s-stone-ink) 50%,transparent)}
.v-l{left:520px;top:196px;width:84px}
.v-rec{left:60px;top:66px;width:460px}
.v-rec .ui-head{justify-content:space-between}
.v-rows{position:relative}
.v-rows .ui-row{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr) 90px;height:72px}
.v-act{font-weight:600}
/* under each action, its result in the system: a second, smaller line */
.v-what{display:grid;gap:2px;min-width:0}
.v-res{font-size:13px;line-height:1.3;color:var(--s-ink2)}
.v-band{position:absolute;left:0;right:0;top:0;height:72px;background:color-mix(in srgb,var(--s-stone) 12%,transparent);opacity:0}
.v-aud{left:604px;top:112px;width:240px;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--s-r-input);background:var(--s-linen);border:1px dashed var(--s-stone)}
.v-aud-head{display:flex;align-items:center;gap:var(--sp-2);font-size:15px;font-weight:700}
.v-aud-head .ui-i{width:18px;height:18px;color:var(--s-stone-ink)}
.v-aud-text{font-size:13px;line-height:1.4;color:var(--s-ink2)}
.v-rule{height:1px;background:var(--s-mist)}
.v-find{min-height:40px;font-size:14px;font-weight:600;line-height:1.4}
.v-checking{display:none}
.v[data-step="0"] .v-checking,.v[data-step="1"] .v-checking,.v[data-step="2"] .v-checking,.v[data-step="3"] .v-checking{display:block}
.v[data-step="0"] .v-done,.v[data-step="1"] .v-done,.v[data-step="2"] .v-done,.v[data-step="3"] .v-done{display:none}
.v[data-step="0"] .ui-tag,.v[data-step="1"] .ui-tag,.v[data-step="2"] .v-t2,.v[data-step="2"] .v-t3,.v[data-step="3"] .v-t3{opacity:0;transform:translateX(6px)}
.v[data-step="1"] .v-band,.v[data-step="2"] .v-band,.v[data-step="3"] .v-band{opacity:1}
.v[data-step="2"] .v-band{top:72px}
.v[data-step="3"] .v-band{top:144px}
.run .v-band{transition:top .5s ease,opacity .4s ease}
.run .ui-tag{transition:opacity .35s ease,transform .35s ease}

/* motion stops off screen, with the tab hidden, with the pause button, and for reduced motion */
.panels.is-off *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.ui *{animation:none!important;transition:none!important}}

/* ---------- Who it's for ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.bcard{position:relative;overflow:hidden;background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-card);padding:32px 28px 140px;display:grid;gap:12px;align-content:start;min-height:360px}
.bcard h3{font-size:22px;line-height:1.3;font-weight:700;max-width:22ch}
.bcard p{font-size:15px;line-height:1.6;color:var(--s-ink2);max-width:38ch}
.bcard .deco{position:absolute;right:0;bottom:0;width:100%;height:130px;pointer-events:none}
.bcard .icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.bcard .icon svg{width:22px;height:22px}
.bcard .icon.v{background:rgba(105,81,184,.14);color:var(--s-violet)}
.bcard .icon.m{background:rgba(175,106,132,.14);color:var(--s-mauve-ink)}
.bcard .icon.s{background:rgba(138,150,115,.2);color:var(--s-stone-ink)}

@media (min-width:1021px){.stage{--bleed:48px}}
@media (max-width:1020px){
  .h2.narrow{max-width:18ch}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .visual{max-width:620px}
}
@media (max-width:760px){
  .hero .lead{font-size:17px}
  .ctas .btn{width:100%}
  .hero-in{padding-block:40px 56px}
  .why{grid-template-columns:minmax(0,1fr);gap:16px}
  .dates{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px}
  .dates li:nth-child(3){border-left:0}
  .dates li:nth-child(n+3){border-top:1px solid var(--s-line)}
  .dates li{padding:24px 16px}
  .dates li::before{left:16px}
  .bento{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .bcard{min-height:0}
}
@media (max-width:420px){.dates{grid-template-columns:minmax(0,1fr)}.dates li+li{border-left:0;border-top:1px solid var(--s-line)}}

/* phones: the step frames use the full screen width */
@media (max-width:760px){
  .gph{width:calc(100% + 40px);margin-inline:-20px;border-radius:0}
}

/* below 640px the scenes are not shrunk: they stack, about 4 by 5, and the motion runs top to bottom.
   No text under 12px */
@media (max-width:639px){
  .gph{aspect-ratio:auto}
  .ui{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:125vw;transform:none;display:flex;flex-direction:column;justify-content:center;padding:var(--sp-4) var(--sp-3)}
  .ui > *{position:relative;left:auto;top:auto;width:auto}
  .ui-label{font-size:12px}
  .ui-flow{background:repeating-linear-gradient(180deg,var(--line) 0 5px,transparent 5px 14px)}
  .run .ui-flow{animation-name:ui-flow-down}

  .u-agent{align-self:center}
  .u-link{align-self:center;width:10px;height:36px}
  .u-dot{left:0;top:100%}
  .run .u-dot{animation-name:u-dot-down}
  .u-head{flex-wrap:wrap}
  .u-note{margin-top:var(--sp-3)}

  .j-req{order:0}
  .j-l1{order:1;align-self:center;width:2px;height:36px}
  .j-pol{order:2}
  .j-l2{order:3;align-self:center;width:2px;height:36px}
  .j-dot1,.j-dot2{left:-5px;top:100%}
  .j.go .j-dot1{animation-name:j-dot1-down}
  .j.go .j-dot2{animation-name:j-dot2-down}
  .j-out{order:4}
  .j-answers{flex-direction:row;gap:6px}
  .j-answers .ans{flex:1 1 0;min-width:0;padding:0 6px;justify-content:center;gap:6px}
  .j-why{text-align:center}

  .a-list{order:0}
  .a-list .ui-row{height:56px}
  .a-lane{order:1;inset:auto;height:96px}
  .a-go-t{left:30%;top:0;width:2px;height:100%}
  .a-stop-t{left:72%;top:0;width:2px;height:44%}
  .a-go,.a-stop{left:-5px;top:100%}
  .a-go{top:100%}
  .run .a-go{animation-name:a-go-down}
  .run .a-stop{animation-name:a-stop-down}
  .a-wall{left:calc(72% - 28px);top:44%;width:56px;height:0;border-left:0;border-top:2px dashed var(--s-burg);margin-top:6px}
  .a-tag{left:auto;right:0;top:62%;width:auto}
  .a-sys{order:2}
  .a-more{display:none}

  .v-rec{order:0}
  .v-l{order:1;align-self:center;width:2px;height:24px}
  .v-aud{order:2}
  .v-rows .ui-row{grid-template-columns:auto minmax(0,1fr) auto}
}
@keyframes u-dot-down{0%,8%{top:0;opacity:0}10%{opacity:1}22%{top:100%;opacity:1}24%,100%{top:100%;opacity:0}}
@keyframes j-dot1-down{0%{top:0;opacity:0}2%{opacity:1}12%{top:100%;opacity:1}14%,100%{top:100%;opacity:0}}
@keyframes j-dot2-down{0%,40%{top:0;opacity:0}42%{opacity:1}52%{top:100%;opacity:1}54%,100%{top:100%;opacity:0}}
@keyframes a-go-down{0%,10%{top:0;opacity:0}14%{opacity:1}48%{top:100%;opacity:1}54%,100%{top:100%;opacity:0}}
@keyframes a-stop-down{0%,10%{top:0;opacity:0}14%{opacity:1}48%,86%{top:100%;opacity:1}94%,100%{top:100%;opacity:0}}