/* fiberpitch shell, the 2026-10-25 look (_build/DESIGN_SYSTEM_2026-10-25.md).
   No icons: numbers, words and treated photographs carry every screen. Navy where the brand lives
   (the rail, the hero, the kit, the finish bar on a lesson), light where the work happens. Hairlines,
   not cards. One progress device per screen. One typeface. Sizes in rem so the phone's own text
   setting still works; every control 44px or taller. */
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial");ascent-override:89.71%;descent-override:26.62%;line-gap-override:0%;size-adjust:109.69%}
:root{
  color-scheme:light;
  --navy:#0E1421; --navy-2:#151D31; --navy-3:#1D2A44; --navy-glow:#24324F;
  --on-navy:#FFFFFF; --on-navy-2:#C2CADB; --on-navy-3:#8A93A6; --on-navy-4:#B7C0D1;
  --bg:#F4F6FA; --s1:#FFFFFF; --s2:#EDF1F6; --s3:#E3E8F0;
  --hair:#D9DEE8; --border:#D9DEE8; --border2:#8A93A6; --dash:#B4BCCB;
  --t-hi:#0E1421; --t-body:#2B3445; --t-low:#4B5568; --t-mark:#5B6577; --t-faint:#B9C2D0;
  --accent:#0B6D7A; --accent-ink:#0B6D7A;
  --btn:#151D31; --btn-press:#0E1421; --btn-t:#FFFFFF; --btn-off:#D9DEE8; --btn-off-t:#4B5568;
  --ok:#12733A; --stop:#B4233A;
  --rail-bg:#0E1421; --rail-t:#C2CADB; --rail-hi:#FFFFFF;
  --teal-glow:#06B6D4; --red-mark:#E63946;
  --grad:linear-gradient(90deg,#E63946 0%,#06B6D4 100%);
  /* brand chip inks, 6:1+ on white; the logo image carries the exact brand colour */
  --b-clear:#0B3D91; --b-tmo:#A3005A; --b-sr:#A3161A; --b-yubi:#3E6B12; --b-intune:#005A9E; --b-edge:#0F5F8C;
  /* the two objects that move keep a shadow */
  --e3:0 12px 32px -12px rgba(14,20,33,.28);
  --r-card:12px; --r-ctl:12px; --r-pill:22px;
  --e-out:cubic-bezier(.22,1,.36,1); --e-std:cubic-bezier(.2,.8,.2,1); --e-in:cubic-bezier(.4,0,1,1); --ease:var(--e-std);
  --e-settle:var(--e-out); --e-pop:var(--e-out);
  --d-press:90ms; --d-release:220ms; --d-state:160ms; --d-step:340ms; --d-fill:420ms; --d-draw:360ms;
  --d-pulse:320ms; --d-celebrate:900ms; --d-section:1400ms;
  --fs-hero:2.5rem; --lh-hero:1.05;
  --fs-stat:2.5rem; --lh-stat:2.5rem;
  --fs-disp:1.75rem; --lh-disp:2.125rem;
  --fs-step:1.375rem; --lh-step:1.75rem;
  --fs-card:1.125rem; --lh-card:1.5rem;
  --fs-lead:1.1875rem; --lh-lead:1.7rem;
  --fs-body:1.0625rem; --lh-body:1.55rem;
  --fs-sec:.9375rem; --lh-sec:1.375rem;
  --fs-cap:.8125rem; --lh-cap:1.125rem;
  --rail-h:calc(64px + env(safe-area-inset-top));
  --wash:linear-gradient(35deg,rgba(14,20,33,.94) 0%,rgba(14,20,33,.80) 45%,rgba(14,20,33,.45) 100%);
  --photo-shadow:0 1px 1px rgba(14,20,33,.9),0 0 6px rgba(14,20,33,.6);
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --e-settle:linear(0,.057,.188,.344,.498,.635,.749,.837,.903,.949,.98,.999,1.009,1.014,1.015,1.012,1.008,1.004,1.001,1);
    --e-pop:linear(0,.072,.237,.433,.622,.782,.904,.988,1.038,1.062,1.068,1.062,1.051,1.038,1.025,1.014,1.006,1,.997,.996,.998,1);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;height:100%;color-scheme:light}
body{font-family:"Space Grotesk","Space Grotesk Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:400;background:var(--bg);color:var(--t-body);font-size:var(--fs-body);line-height:var(--lh-body);min-height:100%;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;left:0;right:0;top:-100vh;height:100vh;background:var(--rail-bg);z-index:-1}
h1,h2,h3,h4{font-weight:600;color:var(--t-hi)}
button{font:inherit;font-weight:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font-family:inherit}
a{color:var(--accent-ink);font-weight:600;text-underline-offset:3px;text-decoration-thickness:1px}
b,strong{color:var(--t-hi);font-weight:600}
.inst em,.inst i,.fb em,.fb i,.callout em,.callout i,.why em,.why i,.say em{font-style:normal}
.inst em,.inst i,.fb em,.fb i,.callout em,.callout i,.why em,.why i{font-weight:600}
code,kbd,.typed{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
svg.i{display:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rail :focus-visible,.hm-hero :focus-visible,.hm-kit :focus-visible,.sp-plate :focus-visible,.sheet-navy :focus-visible,.coursedone :focus-visible,.foot.navy :focus-visible,.dr-answer :focus-visible{outline-color:var(--teal-glow)}
.hidden{display:none!important}
[hidden]{display:none}
.sr{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.lock,html.lock body{overflow:hidden}
h1{text-wrap:balance}
.inst p,.why,.scene,.sub,.fb,.callout,.finish p{text-wrap:pretty}
img{max-width:100%}

/* ---------- pills and buttons: words, never glyphs ---------- */
.pill,a.pill:link,a.pill:visited,button.pill{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--t-hi);background:var(--s1);color:var(--t-hi);font-size:var(--fs-sec);font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color var(--d-release) var(--e-std),transform var(--d-release) var(--e-out)}
.pill:active{transform:scale(.97);background:var(--s2);transition-duration:var(--d-press)}
.rail .pill,.hm-hero .pill,.hm-kit .pill,.dr-answer .pill,.sheet-navy .pill,.foot.navy .pill,.secdone .pill,.on-navy .pill{border-color:rgba(255,255,255,.28);background:transparent;color:#fff;font-size:.875rem;font-weight:500}
.rail .pill:active,.dr-answer .pill:active,.foot.navy .pill:active{background:rgba(255,255,255,.12)}
.btn,a.btn:link,a.btn:visited,a.btn:hover,a.btn:active{display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:52px;padding:10px 20px;border-radius:var(--r-ctl);font-weight:600;font-size:var(--fs-body);line-height:1.25;letter-spacing:-.005em;width:100%;background:var(--btn);color:var(--btn-t);text-decoration:none;border:0;transition:transform var(--d-release) var(--e-out),background-color var(--d-release) var(--e-std),color var(--d-state) var(--e-std)}
.btn[disabled],.btn[aria-disabled=true]{background:var(--btn-off);color:var(--btn-off-t);cursor:default}
.btn.ghost,a.btn.ghost:link,a.btn.ghost:visited,a.btn.ghost:hover,a.btn.ghost:active,.btn.outline{background:var(--s1);color:var(--t-hi);border:1.5px solid var(--t-hi)}
.btn.light,a.btn.light:link,a.btn.light:visited,.sheet-navy .btn,.sheet-navy a.btn:link,.sheet-navy a.btn:visited,.foot.navy .btn,.secdone .btn,.secdone a.btn:link,.secdone a.btn:visited,.coursedone .btn,.coursedone a.btn:link,.coursedone a.btn:visited,.hm-hero .btn,.hm-kit .btn{background:#fff;color:var(--t-hi)}
.sheet-navy .btn.ghost,.sheet-navy a.btn.ghost:link,.sheet-navy a.btn.ghost:visited,.secdone .btn.ghost,.secdone a.btn.ghost:link,.secdone a.btn.ghost:visited{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn + .btn{margin-top:12px}
.card .btn{margin-top:16px}
.btn,.opt,.pill,.dcard,.shot,.pair button,.fp-tile,.sp-row,.lrow,.hm-band,.hm-kit,.sp-all,.fp-stage-tap{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.btn:active{transform:scale(.98);transition-duration:var(--d-press)}
.btn:not(.ghost):not(.outline):not(.light):not([aria-disabled=true]):active{background:var(--btn-press)}
.btn.ghost:active,.btn.outline:active{background:var(--s2)}
.btn[disabled]:active,.btn[aria-disabled=true]:active{transform:none;background:var(--btn-off)}
.opt,.pair button,.sp-row,.lrow{transition:background-color var(--d-release) var(--e-std),border-color var(--d-state) var(--e-std),opacity var(--d-state) var(--e-std)}
.sp-row:active,.lrow:active,.hm-band:active,.sp-all:active{background-color:var(--s2);transition-duration:var(--d-press)}
.opt:active,.pair button:active{border-color:var(--t-low);background:var(--s2)}
@media (hover:hover){
  .sp-row:hover,.lrow:hover,.sp-all:hover{background-color:var(--s2)}
  .opt:hover{border-color:var(--t-mark)}
  .btn:not([aria-disabled=true]):not([disabled]):not(.ghost):not(.outline):not(.light):hover{background:var(--navy-3)}
  .btn.ghost:hover,.btn.outline:hover{background:var(--s2)}
  .rail .pill:hover{background:rgba(255,255,255,.1)}
}
a.btnlink{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 16px;margin-top:12px;border-radius:var(--r-ctl);border:1.5px solid var(--t-hi);background:var(--s1);color:var(--t-hi);font-weight:600;text-decoration:none}

/* ---------- the rail: one navy bar, words in pills ---------- */
.rail{position:sticky;top:0;z-index:20;background:var(--rail-bg);color:var(--rail-hi);min-height:var(--rail-h);display:flex;align-items:center;gap:8px;padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));view-transition-name:rail}
.rail .mark{display:inline-flex;align-items:center;min-height:44px;flex:none;text-decoration:none;color:var(--rail-hi);font-weight:600;font-size:1rem}
.rail .mark img{display:block;height:30px;width:auto}
.rail .where{font-size:1rem;font-weight:600;color:var(--rail-hi);line-height:1.2;min-width:0;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;view-transition-name:where}
.rail .where.end{flex:1;text-align:right;font-size:1.0625rem;-webkit-line-clamp:1;line-clamp:1}
.rail .sp{flex:1}
.rail .exitb{margin-right:4px}
.rail .hb.acct span{max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:400px){.rail .hb.acct{display:none}}
/* The language pill (English / Español, Dylan 2026-10-25): a word on every rail, after Help. */
.rail .pill.lang{padding:0 12px}
.sheet .acct-row.lang .pill{border-color:var(--t-hi);color:var(--t-hi)}
@media (max-width:360px){.rail .pill.lang{padding:0 10px;font-size:.8125rem}}
/* the strand under a lesson rail: the lesson's own progress, lighting left to right */
.rail .track{position:absolute;left:0;right:0;bottom:0;height:2px;display:flex;background:var(--grad);overflow:hidden}
.rail .track i{flex:var(--w,1) 1 0;min-width:0;position:relative;overflow:hidden}
.rail .track i::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.14);transform-origin:right;transform:scaleX(calc(1 - var(--p,0)));transition:transform var(--d-fill) var(--e-settle)}
.rail .track .pulse{position:absolute;left:0;top:0;width:24px;height:2px;margin-left:-12px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));opacity:0;pointer-events:none;animation:pulse-x 360ms var(--e-out) forwards}
.rail .track .pulse.full{--to:100vw;animation-duration:520ms}
.rail.exit .track{bottom:0}

/* ---------- layout and the few shared pieces ---------- */
.wrap{max-width:560px;margin:0 auto;padding:24px max(20px,env(safe-area-inset-right)) 48px max(20px,env(safe-area-inset-left))}
.sub{font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-low);font-weight:400}
.k{font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;color:var(--t-low)}
.card{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-card);padding:20px}
.card + .card{margin-top:12px}
.card .t,.card h1.t{font-size:var(--fs-step);line-height:var(--lh-step);font-weight:600;color:var(--t-hi);letter-spacing:-.01em}
.card .m{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t-body);margin-top:6px}
.sechead h1{font-size:2rem;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--t-hi)}
.sechead p{margin-top:10px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t-low)}
.note{font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-low);margin-top:24px}
.note a{display:inline-block;padding:11px 0;margin:-11px 0;font-size:inherit}
.oh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:32px 0 10px}
.oh b,.oh h2{font-size:1.3125rem;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--t-hi)}
.oh span{font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
.grp{margin:32px 0 10px;font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}

/* ---------- treated photographs: two treatments, used everywhere ---------- */
.ph{position:relative;overflow:hidden;background:var(--navy-2)}
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 45%);display:block;filter:saturate(.55) contrast(1.05)}
.ph::after{content:"";position:absolute;inset:0;background:var(--wash);pointer-events:none}
.ph.plain::after{background:rgba(14,20,33,.55)}
.ph > *:not(img){position:relative;z-index:1}
.ph .cap,.ph figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;color:#fff;text-shadow:var(--photo-shadow)}
.thumb{position:relative;flex:none;width:56px;height:100px;border-radius:6px;overflow:hidden;background:var(--navy-2)}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);display:block;filter:grayscale(1) contrast(1.05)}
.thumb::after{content:"";position:absolute;inset:0;background:#151D31;mix-blend-mode:multiply;opacity:.75}

/* ---------- the home ---------- */
.hm-hero{position:relative;background:var(--navy-2);color:#fff;padding:40px max(20px,env(safe-area-inset-right)) 36px max(20px,env(safe-area-inset-left));overflow:hidden}
.hm-hero svg.strands{position:absolute;left:0;right:0;top:0;width:100%;height:100%;pointer-events:none}
.hm-hero > *:not(svg){position:relative}
.hm-in{max-width:560px;margin:0 auto}
.hm-eye{font-size:var(--fs-sec);font-weight:500;color:var(--on-navy-4);margin-bottom:14px}
.hm-h1{font-size:var(--fs-hero);line-height:var(--lh-hero);font-weight:600;letter-spacing:-.02em;color:#fff;max-width:11em}
.hm-h1 > span{display:block}
.dot-red{color:var(--red-mark)}
.dot-teal{color:var(--teal-glow)}
.hm-sub{font-size:var(--fs-body);line-height:1.4;color:var(--on-navy-4);margin-top:16px;font-weight:400;max-width:30em}
.hm-next{margin-top:40px}
.hm-next .label{font-size:var(--fs-sec);font-weight:500;color:var(--on-navy-4)}
.hm-next .where{font-size:1.25rem;font-weight:600;margin-top:6px;color:#fff}
.segs{display:flex;gap:6px;margin-top:12px}
.segs span{flex:1;height:3px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.segs span.done{background:var(--teal-glow)}
.segs span i{position:absolute;left:0;top:0;bottom:0;background:var(--teal-glow);display:block;width:calc(var(--p,0) * 100%)}
.hm-next .btn{margin-top:22px}
.hm-next .btn + .hm-where{margin-top:10px;font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--on-navy-4);font-weight:500}
.hm-main{background:var(--s1)}
.section-h{font-size:var(--fs-sec);font-weight:500;color:var(--t-low);padding:32px 20px 12px;max-width:560px;margin:0 auto}
.hm-route{list-style:none;margin:0;padding:0}
.hm-stop{max-width:100%}
.hm-band,a.hm-band:link,a.hm-band:visited{display:block;height:112px;color:#fff;text-decoration:none}
.hm-band figcaption{display:flex;align-items:baseline;gap:14px;bottom:14px}
.hm-band .num{font-size:3.5rem;font-weight:300;line-height:1;letter-spacing:-.03em;color:#fff}
.hm-band .name{font-size:1.375rem;font-weight:500;line-height:1;color:#fff}
.hm-stop.current .hm-band{height:152px}
.hm-stop.current .hm-band .num{font-size:4.75rem}
.hm-stop.current .hm-band .name{font-weight:600;font-size:1.75rem}
.hm-stop.current .hm-band figcaption{bottom:18px}
.hm-meta{padding:16px 20px 22px;border-bottom:1px solid var(--hair);max-width:560px;margin:0 auto;position:relative}
.hm-stop:last-child .hm-meta{border-bottom:0}
.hm-meta .sub{font-size:var(--fs-body);line-height:1.4;color:var(--t-body)}
.hm-meta .state{font-size:var(--fs-sec);font-weight:500;color:var(--t-low);margin-top:6px}
.hm-meta .state.on{color:var(--accent-ink)}
.hm-meta .state.ok{color:var(--ok)}
.hm-stop.current .hm-meta::before{content:"";position:absolute;left:8px;top:18px;width:3px;height:44px;background:var(--accent);border-radius:2px}
.hm-meta .yournext{font-size:var(--fs-sec);font-weight:500;color:var(--accent-ink);margin-top:18px}
.hm-meta .pickup{margin-top:4px;font-size:var(--fs-sec);font-weight:500;color:var(--t-hi)}
.hm-meta .btn{margin-top:10px}
.hm-aside,a.hm-aside:link,a.hm-aside:visited{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);text-decoration:none;color:inherit}
.hm-aside .t{font-size:var(--fs-body);font-weight:500;color:var(--t-hi)}
.hm-aside .s{font-size:var(--fs-sec);color:var(--t-low);margin-top:2px}
.hm-ready{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
.hm-kit,a.hm-kit:link,a.hm-kit:visited{display:block;background:var(--navy-2);color:#fff;padding:26px max(20px,env(safe-area-inset-right)) 28px max(20px,env(safe-area-inset-left));text-decoration:none}
.hm-kit .in{max-width:560px;margin:0 auto}
.hm-kit .head,.sp-plate .head{font-size:var(--fs-sec);font-weight:500;color:var(--on-navy-4)}
.hm-kit h2{font-size:1.75rem;font-weight:600;letter-spacing:-.01em;margin-top:4px;color:#fff}
.marks{display:flex;gap:10px;margin-top:20px}
.marks span{width:60px;height:60px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.marks img{display:block;width:34px;height:34px;object-fit:contain}
.marks img.tile{width:60px;height:60px;border-radius:12px}
.marks.small span{width:40px;height:40px;border-radius:9px}
.marks.small img{width:24px;height:24px}
.marks.small img.tile{width:40px;height:40px;border-radius:9px}
.hm-kit .status{font-size:var(--fs-body);line-height:1.4;color:var(--on-navy-4);margin-top:18px}
.hm-kit .status b{color:#fff;font-weight:600}
.hm-foot{height:28px;background:var(--s1)}
.hm-note{max-width:560px;margin:0 auto;padding:20px 20px 32px}
.fp-leftnote{max-width:560px;margin:0 auto;padding:14px 20px;font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-hi);border-bottom:1px solid var(--hair);background:var(--s1)}

/* ---------- a stop page: the plate, the lead, the hairline list ---------- */
.sp-plate{height:320px;color:#fff}
.sp-plate.tall{height:360px}
.sp-plate > img{filter:grayscale(1) contrast(1.08);mix-blend-mode:luminosity;opacity:.58}
.sp-plate::after{background:linear-gradient(to top,#0E1421 0%,rgba(14,20,33,.55) 42%,rgba(14,20,33,.05) 100%)}
.sp-plate.navy{height:auto;min-height:0;padding:36px 20px 28px}
.sp-plate.navy::after{display:none}
.sp-plate svg.strands{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
.sp-plate .text{position:absolute;left:max(20px,env(safe-area-inset-left));right:20px;bottom:22px;z-index:2;text-shadow:var(--photo-shadow);max-width:560px}
.sp-plate.navy .text{position:static;text-shadow:none;margin:0 auto}
.sp-plate .num{font-size:8rem;line-height:.85;font-weight:300;letter-spacing:-.04em;color:#fff}
.sp-plate h1{font-size:1.75rem;line-height:1.1;font-weight:600;letter-spacing:-.01em;margin-top:8px;color:#fff}
.sp-plate .sub{font-size:var(--fs-body);color:rgba(255,255,255,.72);margin-top:4px}
.sp-plate .marks{margin-top:14px}
.sp-plate.navy h1{margin-top:4px}
.sp-lead{padding:24px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));background:var(--s1)}
.sp-lead > *{max-width:560px;margin-left:auto;margin-right:auto}
.sp-lead p{font-size:1.125rem;line-height:1.45;color:var(--t-hi)}
.sp-lead .quiet{margin-top:10px;font-size:var(--fs-sec);color:var(--t-low)}
.sp-prog{margin-top:18px;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.sp-prog .cap{font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
.sp-prog .cap.on{color:var(--accent-ink)}
.sp-prog .bar{margin-top:8px;height:3px;border-radius:2px;background:var(--hair);position:relative;overflow:hidden}
.sp-prog .bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);background:var(--accent);display:block;transition:width var(--d-fill) var(--e-settle)}
.sp-lead .search{padding-bottom:20px}
.sp-all,a.sp-all:link,a.sp-all:visited{display:flex;align-items:center;gap:14px;padding:16px max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left));background:var(--s1);border-bottom:1px solid var(--hair);min-height:72px;text-decoration:none;color:inherit}
.sp-all .body{flex:1;min-width:0;max-width:560px}
.sp-all .t{font-size:var(--fs-body);font-weight:600;color:var(--t-hi)}
.sp-all .s{font-size:var(--fs-sec);color:var(--t-low);margin-top:2px}
.sp-all .go,.lrow .go{font-size:var(--fs-sec);font-weight:500;color:var(--t-low);flex:none}
.sp-group{margin-top:26px}
.sp-group .gh{display:flex;align-items:baseline;gap:10px;padding:0 20px 10px;max-width:560px;margin:0 auto}
.sp-group .gh .n{font-size:.875rem;font-weight:500;color:var(--t-low)}
.sp-group .gh .t{font-size:1.3125rem;font-weight:600;letter-spacing:-.01em;color:var(--t-hi)}
.sp-rows{list-style:none;margin:0;padding:0;background:var(--s1);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sp-row,a.sp-row:link,a.sp-row:visited{display:flex;gap:14px;padding:15px max(20px,env(safe-area-inset-right)) 15px max(20px,env(safe-area-inset-left));border-top:1px solid var(--hair);min-height:64px;align-items:flex-start;text-decoration:none;color:inherit;font-weight:400}
.sp-rows > :first-child{border-top:0}
.sp-row .body{flex:1;min-width:0}
.sp-row .kind{font-size:var(--fs-cap);font-weight:500;color:var(--t-low);margin-bottom:3px}
.sp-row .t{font-size:var(--fs-body);font-weight:600;line-height:1.3;color:var(--t-hi)}
.sp-row .state{font-size:var(--fs-sec);font-weight:500;color:var(--t-low);margin-top:3px}
.sp-row.lesson,.sp-row.situation{align-items:center;padding-top:14px;padding-bottom:14px}
.sp-row .gutter{flex:0 0 44px;width:44px;font-size:1.875rem;font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--t-low);padding-top:14px}
.sp-row.done .t,.sp-row.passed .t{color:var(--t-low);font-weight:500}
.sp-row.done .gutter,.sp-row.passed .gutter{color:var(--t-faint)}
.sp-row.done .thumb,.sp-row.passed .thumb{opacity:.7}
.sp-row.passed .state{color:var(--ok)}
.sp-row.mid .state,.sp-row.due .state{color:var(--accent-ink)}
.sp-row.next{box-shadow:inset 3px 0 0 var(--accent);padding-top:18px;padding-bottom:18px}
.sp-row.next .t{font-size:1.1875rem;font-weight:600;color:var(--t-hi)}
.sp-row.next .state{color:var(--accent-ink)}
.sp-row.next .gutter{color:var(--t-hi)}
@media (min-width:600px){.sp-row,.sp-all{padding-left:calc((100% - 560px) / 2 + 20px);padding-right:calc((100% - 560px) / 2 + 20px)}}
.sp-foot{height:40px}
/* the setup status on the Setup page: the five brand tiles and what to do now */
.sp-setup{background:var(--s1);padding:20px max(20px,env(safe-area-inset-right)) 22px max(20px,env(safe-area-inset-left));border-bottom:1px solid var(--hair)}
.sp-setup > *{max-width:560px;margin-left:auto;margin-right:auto}
.sp-setup .setup-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sp-setup .setup-h h2,.sp-setup .setup-h b{font-size:1.3125rem;font-weight:600;letter-spacing:-.01em;color:var(--t-hi)}
.setup-n{font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
.setup-now{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.setup-now .setup-l1,.setup-now p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t-hi)}
.setup-now .setup-l1 .m{display:block;margin-top:6px;font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-low);font-weight:400}
.setup-now .setup-small{margin-top:8px;font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-low)}
.setup-meanwhile{margin-top:14px;font-size:var(--fs-body)}
.setup-meanwhile a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;border-top:1px solid var(--hair);text-decoration:none;color:var(--t-hi);font-weight:500}
.setup-meanwhile a::after{content:"Open";font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
.setup-acts{margin-top:14px;display:grid;gap:10px}
.setup-acts .btn.ghost{min-height:48px}
.setup-change{display:block;margin:10px 0 0;min-height:44px;padding:0;background:none;border:0;font:inherit;font-size:var(--fs-sec);font-weight:500;color:var(--t-low);text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:3px;cursor:pointer}
/* the five setup tiles in a row: no badges, words and opacity say the state */
.strand{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:16px 0 0;padding:0}
.strand .node{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center;color:inherit}
.node-c{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#fff;border:1px solid var(--hair);transition:border-color var(--d-state) var(--e-std)}
.node-c img{display:block;width:26px;height:26px;object-fit:contain;border-radius:6px;transition:opacity 200ms var(--e-std)}
.node-c.two img{width:20px;height:20px;border-radius:5px}
.node-c.two img + img{margin-left:-6px;box-shadow:0 0 0 2px #fff}
.node-l{font-size:var(--fs-cap);line-height:var(--lh-cap);font-weight:500;color:var(--t-low);white-space:nowrap}
.strand .node.current .node-c{border:2px solid var(--navy)}
.strand .node.current .node-l{color:var(--t-hi);font-weight:600}
.strand .node.locked .node-c img{opacity:.4}
.strand .node.locked .node-l{color:var(--t-faint)}
.strand-cap{display:block;font-size:.75rem;line-height:1rem;font-weight:500;color:var(--accent-ink);white-space:nowrap}
.strand.small .node-c{width:40px;height:40px}
.sp-setup .fp-lockline{margin-top:10px}

/* ---------- generic hairline list (Help, At the door, films, tags, search) ---------- */
.lrows{background:var(--s1);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:16px -20px 0}
.lrow,a.lrow:link,a.lrow:visited,button.lrow{display:flex;align-items:center;gap:14px;width:100%;padding:15px 20px;border-top:1px solid var(--hair);min-height:64px;text-decoration:none;color:inherit;text-align:left;font:inherit;font-weight:400;background:none}
.lrows > :first-child,.lrows > .filmrow:first-child > .lrow{border-top:0}
.lrow .body{flex:1;min-width:0}
.lrow .kind{font-size:var(--fs-cap);font-weight:500;color:var(--t-low);margin-bottom:3px}
.lrow .t{font-size:var(--fs-body);font-weight:600;line-height:1.3;color:var(--t-hi)}
.lrow .s{font-size:var(--fs-sec);color:var(--t-low);margin-top:3px;font-weight:400}
.lrow .fthumb{flex:none;width:72px;height:48px;border-radius:6px}
.lrow .fthumb{position:relative;overflow:hidden;background:var(--navy-2)}
.lrow .fthumb img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05)}
.lrow .fthumb::after{content:"";position:absolute;inset:0;background:#151D31;mix-blend-mode:multiply;opacity:.75}
.filmrow .ftest{margin:0 20px 16px;width:auto}
.lrows .tel{display:block;padding:15px 20px 18px;border-top:1px solid var(--hair)}
.lrows .tel .t{font-size:var(--fs-body);font-weight:600;color:var(--t-hi)}
.lrows .tel .s{font-size:var(--fs-sec);color:var(--t-low);margin-top:3px}
.lrows .tel .btn{margin-top:12px}
.lrows .tel .under{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:var(--fs-sec);font-weight:500;color:var(--t-low);text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:3px}
/* Help's pages: tags, sign-in trouble, error screens */
.tagl .tg{padding:14px 20px}
.tagl .tg + .tg{border-top:1px solid var(--hair)}
.tagl .tg b{display:block;font-size:var(--fs-body);color:var(--t-hi)}
.tagl .tg ul{margin:4px 0 0 20px;font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-low)}
.tagl .tg li:only-child{list-style:none;padding-left:0}
.tagl .tg ul:has(> li:only-child){margin-left:0}
.fixd{padding:0 20px;border-top:1px solid var(--hair)}
.lrows > .fixd:first-child{border-top:0}
.fixd summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--t-hi);font-weight:600;padding:8px 0;min-height:56px}
.fixd summary::-webkit-details-marker{display:none}
.fixd summary::after{content:"Open";flex:none;font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
.fixd[open] summary::after{content:"Close"}
.fixd .fx{padding:0 0 14px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t-body)}
.fixd .fx p + p{margin-top:8px}
.fixd .go,.hit .go{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-weight:600;color:var(--accent-ink);text-decoration:none;font-size:var(--fs-sec)}
.look .lt{font-size:var(--fs-disp);line-height:var(--lh-disp);font-weight:600;letter-spacing:-.02em;color:var(--t-hi);margin-top:4px}
.look .answer{margin-top:12px;font-size:var(--fs-card);line-height:1.75rem;color:var(--t-hi)}
.look .answer p + p{margin-top:12px}
.look .cmp{margin-top:24px}
.look .media{margin-top:8px}

/* ---------- search ---------- */
.search{position:relative;margin-top:8px}
.search input{width:100%;min-height:52px;padding:0 16px;border:1.5px solid var(--border);border-radius:var(--r-ctl);background:var(--s1);font:inherit;font-weight:400;font-size:1.0625rem;color:var(--t-hi);-webkit-appearance:none;appearance:none;transition:border-color var(--d-state)}
.search input::placeholder{color:var(--t-mark);opacity:1}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,109,122,.18)}
.hits:empty{display:none}
.hits{margin:12px -20px 0;background:var(--s1);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.hit{display:block;padding:14px 20px;border-top:1px solid var(--hair);text-decoration:none;color:var(--t-body);font-weight:400;animation:fade 160ms both}
.hits > .hit:first-child{border-top:0}
.hit .hw{display:block;font-size:var(--fs-cap);line-height:var(--lh-cap);font-weight:500;color:var(--t-low)}
.hit b{display:block;margin-top:2px;font-size:var(--fs-body);line-height:1.3;font-weight:600}
.hit .hb{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:var(--fs-sec);line-height:var(--lh-sec)}
.nohit{font-size:var(--fs-sec);color:var(--t-low);padding:12px 0}

/* ---------- the player: rail, band, count line, stage, bottom bar ---------- */
.player{display:flex;flex-direction:column;min-height:calc(100vh - 64px);min-height:calc(100dvh - var(--rail-h));overflow-x:clip;background:var(--s1)}
.ls-band{height:180px;color:#fff}
.ls-band.navy{height:auto;padding:22px 20px 20px}
.ls-band.navy::after{display:none}
.ls-band figcaption{bottom:18px;left:max(20px,env(safe-area-inset-left))}
.ls-band.navy figcaption{position:static;text-shadow:none;max-width:560px;margin:0 auto}
.ls-band .eyebrow{font-size:var(--fs-sec);font-weight:500;color:#fff;opacity:.85}
.ls-band h1{font-size:2.125rem;line-height:1.06;font-weight:600;letter-spacing:-.02em;margin-top:6px;color:#fff}
.ls-band.navy h1{font-size:1.75rem}
.ls-band .marks{margin-top:14px}
.prog{position:relative;z-index:1;padding:14px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));max-width:560px;width:100%;margin:0 auto}
.prog .lab{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;color:var(--t-low);flex-wrap:wrap;row-gap:2px}
.prog .lab span:empty{display:none}
.player:not(.drill) #fp-count{margin-left:auto}
#fp-count{min-width:0;overflow-wrap:break-word}
#fp-chap{min-width:0}
.fp-secname{font-weight:600;color:var(--t-hi)}
#fp-vp{display:grid;flex:1 0 auto;overflow-x:hidden;overflow-x:clip}
#fp-vp > *{grid-area:1/1;min-width:0}
#fp-vp > .leaving{pointer-events:none}
.stage{padding:14px max(20px,env(safe-area-inset-right)) 28px max(20px,env(safe-area-inset-left));max-width:560px;width:100%;margin:0 auto}
.chip{display:inline-block;margin-top:10px;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;color:var(--t-low)}
.chip.other{color:var(--t-hi);font-weight:600}
.media{margin-top:12px}
.media img,.media video{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--hair);background:#fff}
.sample{font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-low);margin-top:10px}
.stitle{font-size:var(--fs-step);line-height:var(--lh-step);font-weight:600;letter-spacing:-.015em;color:var(--t-hi);margin-top:18px}
.stitle:focus,.q:focus{outline:none}
.scode{display:table;margin:0 0 6px;padding:1px 8px;border-radius:6px;background:var(--s2);font-size:var(--fs-cap);line-height:var(--lh-cap);font-weight:600;color:var(--t-low)}
.inst{margin-top:10px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t-body)}
.inst > p:first-child{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:400;color:var(--t-body)}
.stage.solo .inst > p:first-child{margin-top:4px}
.inst p + p{margin-top:12px}
.inst ul,.inst ol{margin:12px 0 0 0;padding-left:22px}
.inst ul{list-style:none;padding-left:18px}
.inst ul > li{position:relative}
.inst ul > li::before{content:"";position:absolute;left:-16px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--t-low)}
.inst ol > li::marker{color:var(--t-low);font-weight:500}
.inst li + li{margin-top:8px}
.inst .sample{margin-top:12px;padding-top:10px;border-top:1px solid var(--hair)}
/* the beats of a lesson: light numerals in a 44px margin, hairlines */
.beats{list-style:none;counter-reset:beat;margin:22px 0 0;padding:0;border-top:1px solid var(--hair)}
.beats li{counter-increment:beat;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding:18px 0;border-bottom:1px solid var(--hair)}
.beats li::before{content:counter(beat);grid-row:1/span 2;font-size:2.75rem;line-height:.9;font-weight:300;letter-spacing:-.04em;color:var(--t-hi);margin-top:-2px}
.beats li b{font-size:1.1875rem;line-height:1.25;font-weight:600;color:var(--t-hi)}
.beats li span,.beats li p{display:block;font-size:var(--fs-body);line-height:1.45;color:var(--t-body);margin-top:6px}
.inst p:has(> .btnlink:only-child){margin-top:20px}
.inst a.btnlink{min-height:44px;margin:0;padding:0;border:0;background:none;justify-content:flex-start;color:var(--accent-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent-ink);text-underline-offset:3px;text-decoration-thickness:1px}
div.why,p.why,.stage .why{position:relative;margin-top:28px;padding:18px 0 20px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);font-size:var(--fs-body);line-height:1.45;font-weight:500;color:var(--t-hi)}
.why .lbl{display:block;color:var(--t-low);font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;margin:0 0 6px}
.callout{margin-top:18px;padding:2px 0 2px 16px;border-left:3px solid var(--navy);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;color:var(--t-body)}
.callout.stop{border-left-color:var(--stop)}
.typed{font-size:1rem;background:var(--s2);border-radius:6px;padding:2px 6px;color:var(--t-hi);overflow-wrap:anywhere;font-weight:600}
.stuckbtn{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;padding:0;font-size:var(--fs-sec);font-weight:500;color:var(--t-low);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border2)}
.qbadge{display:inline-block;margin-top:18px;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;color:var(--accent-ink)}
.qbadge + .stitle{margin-top:6px}
.qcard{margin-top:14px;padding:16px 18px;border:1px solid var(--hair);border-left:3px solid var(--accent);border-radius:var(--r-card);background:var(--s1)}
.qcard > .inst{margin-top:0}
.qcard .check .q.qsm:first-child{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair)}
.fp-banner{max-width:560px;margin:14px auto 0;padding:2px 20px 2px 36px;position:relative;font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-body);font-weight:500}
.fp-banner::before{content:"";position:absolute;left:20px;top:2px;bottom:2px;width:3px;background:var(--navy)}
/* the bottom bar: white on a drill, navy on a lesson */
.foot{position:sticky;bottom:0;z-index:10;background:var(--s1);box-shadow:0 -1px 0 var(--hair)}
.foot.navy{background:var(--navy);box-shadow:none}
.foot .in{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:12px max(20px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));max-width:560px;margin:0 auto}
.foot.navy .in{padding-top:14px;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.foot .in > .btn{flex:1 1 0;width:auto}
.foot .back{flex:none}
.foot .back[disabled]{display:none}
.foot .hint{flex-basis:100%;font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-body);font-weight:500}
.foot.navy .hint{color:var(--on-navy-2)}
.foot .ffb{flex-basis:100%}
.foot .ffb:empty{display:none}
.foot .ffb .fb{margin-top:0;max-height:min(34vh,220px);max-height:min(34dvh,220px);overflow-y:auto;overscroll-behavior:contain}
.foot .ffb > * + *{margin-top:6px}
.foot.navy .btn[aria-disabled=true]{background:rgba(255,255,255,.14);color:var(--on-navy-2)}

/* ---------- drawn screen imitations, diagrams, frames ---------- */
.mock{position:relative;border-radius:12px;border:1px solid var(--hair);background:#fff;overflow:hidden;color:#1b1f27;font-size:var(--fs-sec);line-height:1.25rem;font-weight:400}
.mock.phone{max-width:300px;margin:0 auto;border-radius:30px;border:10px solid var(--navy-2)}
.mock .top{min-height:34px;background:#F3F5F8;border-bottom:1px solid #E3E7EE;display:flex;align-items:center;padding:6px 10px;gap:6px;font-size:.875rem;color:#4B5568}
.mock .top > span:not(.right){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.125rem}
.mock .top u{width:8px;height:8px;border-radius:50%;background:var(--border2);flex:none}
.mock.dark .top{background:#1D2A44;border-color:#151D31;color:#C2CADB}
.mock.dark .right{color:#fff}
.mock.dark .right.no{color:#ff9aa5}
.mock .right{margin-left:auto;flex-shrink:0;font-weight:700;font-size:var(--fs-sec);color:#1b1f27;white-space:nowrap;position:relative;padding:2px 6px}
.mock .right.no{color:var(--stop)}
.mock .it.input span.x.filled{color:#1b1f27;font-weight:500}
.mock .in{padding:14px 14px 16px}
.mock .h{font-size:1rem;font-weight:600}
.mock .p{font-size:var(--fs-sec);color:#4B5568;margin-top:2px}
.mock .it{position:relative;margin-top:10px}
.mock .it.btnlike span.x{display:inline-block;background:#0067b8;color:#fff;font-weight:600;padding:8px 14px;border-radius:4px}
.mock .it.btnlike.alt span.x{background:#E3E8F0;color:#1b1f27}
.mock .it.link span.x{color:#0067b8;font-weight:600}
.mock .it.input span.x{display:block;border:1px solid var(--border2);border-radius:4px;padding:8px 10px;color:#4B5568;min-height:38px}
.mock .it.rowlike{display:flex;gap:10px;border-top:1px solid #E6EAF1;padding-top:10px}
.mock .it.rowlike em{font-style:normal;color:#4B5568;margin-left:auto}
.mock .it.code span.x{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.25rem;letter-spacing:.12em;font-weight:600}
.mock .it.big span.x{font-size:var(--fs-card);font-weight:700}
.mock .ringed{display:inline-block;position:relative}
.mock .ringed:after{content:"";position:absolute;inset:-5px;border:2px solid var(--accent);border-radius:10px}
.mock .tag{display:inline-block;margin-left:12px;background:var(--navy);color:#fff;font-size:var(--fs-cap);font-weight:600;line-height:1.125rem;padding:3px 8px;border-radius:6px;vertical-align:middle}
.mock .crossed span.x{text-decoration:line-through;opacity:.55}
.mock .tag.no{background:var(--stop)}
.mock + .sample:empty{display:none}
.flow{display:grid;margin-top:4px;border-top:1px solid var(--hair)}
.flow .node{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--hair)}
.flow .node .n{flex:none;width:32px;font-size:1.625rem;line-height:1;font-weight:300;letter-spacing:-.02em;color:var(--t-low);padding-top:2px}
.flow .node.dim{opacity:.5}
.flow .node.has-ic{align-items:center}
.flow .node.here{box-shadow:inset 3px 0 0 var(--accent);padding-left:14px;background:none!important}
.flow .fic{position:relative;flex:none;display:flex}
.flow .fics{display:flex}
.flow .fics.two .ficon + .ficon{margin-left:-10px;box-shadow:0 0 0 2px var(--s1)}
.flow .ficon{width:40px;height:40px;border-radius:10px;display:block;flex:none;object-fit:contain;background:#fff;border:1px solid var(--hair)}
.flow img.ficon.round,.flow .ficon.round{border-radius:50%;object-fit:contain;padding:3px}
.flow .fic .n{display:none}
.flow .node.dim .ficon{filter:grayscale(1)}
.flow .node b{display:block;font-weight:600;color:var(--t-hi)}
.flow .node span{font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-low)}
.flow .node.here span{color:var(--accent-ink)!important;font-weight:600!important}
.pic{display:grid;place-items:center}
.shot{position:relative;border-radius:12px;border:1px solid var(--hair);background:var(--s2)}
.shot .scr{position:relative;overflow:hidden;border-radius:11px;background:var(--s2)}
.shot.phone{width:min(300px,100%);margin:0 auto;border:0;border-radius:30px;padding:10px;background:var(--navy-2)}
.shot.phone .scr{border-radius:21px;background:#fff}
.shot.computer{background:#fff;border:1px solid var(--hair);border-radius:12px;padding-top:28px;overflow:hidden;max-width:calc(var(--nw,100%) * 1.5);margin:0 auto}
.shot.computer::before{content:"";position:absolute;left:0;right:0;top:0;height:28px;background:var(--s2);border-bottom:1px solid var(--hair)}
.shot.computer .scr{border-radius:0;background:#fff}
.shot.product{border:0;background:none;border-radius:var(--r-card);max-width:320px;margin:0 auto;padding:12px}
.shot.product .scr{background:none;border-radius:0}
.shot img,.shot video{display:block;width:100%;height:auto;border:0;border-radius:0;background:none}
.shot img.fadein{opacity:0;transition:opacity 200ms var(--e-std)}
.shot img.fadein.in{opacity:1}
.shot .sring{position:absolute;border:2px solid var(--accent);border-radius:10px;pointer-events:none}
.shot .stag{position:absolute;background:var(--navy);color:#fff;font-size:var(--fs-cap);font-weight:600;line-height:var(--lh-cap);padding:3px 8px;border-radius:6px;pointer-events:none;white-space:nowrap}
.shot .stag.no{background:var(--stop)}
.zoomrow{display:flex;justify-content:flex-end;margin-top:8px}
.zoomb{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--t-low);font:inherit;font-size:var(--fs-sec);font-weight:500;text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:3px;cursor:pointer}
.stage .media .shot.phone{width:min(300px,100%,calc(44vh * var(--ar,.4945) + 20px));width:min(300px,100%,calc(44dvh * var(--ar,.4945) + 20px))}
.dstage{--dh:35vh;--dh:35dvh}
@media (max-height:759px){.dstage{--dh:33vh;--dh:33dvh}.dstage .media > .mock{zoom:.7}}
.dstage .media:has(> .zoomrow){--zr:52px}
.dstage .media .shot{width:min(300px,100%,calc((var(--dh) - var(--zr,0px)) * var(--ar,.4945) + 20px));margin:0 auto}
.stage .media > .sample{text-align:center}
.fp-tiles{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:10px;width:100%}
.fp-tiles.list{grid-template-columns:minmax(0,1fr)}
.fp-tile{position:relative;margin:0;min-width:0;background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;color:var(--t-hi);text-align:left}
.fp-tile.on{border:2px solid var(--accent)}
.fp-tile.dim .fp-tile-art{opacity:.45}
.fp-tile-art{position:relative;aspect-ratio:var(--ar,16/10);background:var(--s2);overflow:hidden;display:grid;place-items:center}
.fp-tile-art img{display:block;border:0;border-radius:0;background:none}
.fp-tile-art.logo img{width:58%;height:52%;object-fit:contain}
.fp-tile-art.logos{display:flex;align-items:center;justify-content:center;gap:10%}
.fp-tile-art.logos img{width:26%;max-width:64px;height:auto;max-height:52%;object-fit:contain;border-radius:22%}
.fp-tile-art.photo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.fp-tile-art.product img{width:84%;height:84%;object-fit:contain}
.fp-tile-n{position:absolute;left:10px;top:8px;z-index:1;font-size:1.25rem;line-height:1;font-weight:300;color:var(--t-hi)}
.fp-tile-c,.fp-tile figcaption{display:block;padding:10px 12px 14px}
.fp-tile-t{display:block;font-size:var(--fs-sec);line-height:1.25rem;font-weight:600;color:var(--t-hi)}
.fp-tile-d{display:block;margin-top:3px;font-size:var(--fs-cap);line-height:var(--lh-cap);font-weight:400;color:var(--t-low)}
.fp-tiles.list .fp-tile{display:flex;align-items:center;gap:14px;padding:10px}
.fp-tiles.list .fp-tile-art{flex:none;width:72px;height:72px;aspect-ratio:1;border-radius:10px}
.fp-tiles.list .fp-tile-c,.fp-tiles.list figcaption{padding:2px 4px 2px 0}
.fp-app{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.fp-app img{width:48px;height:48px;border-radius:12px;flex:none}
.fp-app b{display:block;color:var(--t-hi)}
.fp-app span{font-size:var(--fs-sec);color:var(--t-low)}
.keytap{position:relative;display:grid;justify-items:center;gap:12px}
.keytap .kt-art{position:relative;width:min(240px,100%)}
.keytap .kt-art img{display:block;width:100%;height:auto;border:0;background:none;border-radius:0;transition:transform 240ms var(--e-out)}
.keytap.nfc .kt-art{width:min(260px,100%)}
.kt-btn{position:absolute;left:var(--x,50%);top:var(--y,50%);width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.01);touch-action:manipulation}
.kt-btn::before{content:"";position:absolute;inset:8px;border-radius:50%;box-shadow:0 0 0 2px rgba(11,109,122,.35);animation:kt-hint 1600ms var(--e-std) infinite}
.kt-btn svg{display:block;position:absolute;inset:0;width:56px;height:56px;transform:rotate(-90deg)}
.kt-btn svg circle{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:163;stroke-dashoffset:163;transition:stroke-dashoffset 600ms var(--e-out)}
.keytap.done .kt-btn svg circle{stroke-dashoffset:0}
.keytap.done .kt-btn::before{animation:none;opacity:0}
.keytap.tap .kt-art img{animation:kt-press 240ms var(--e-out)}
.kt-cap{font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;color:var(--t-body);text-align:center;max-width:22em}
.keytap.done .kt-cap{color:var(--accent-ink);font-weight:600}
@keyframes kt-hint{0%,100%{box-shadow:0 0 0 2px rgba(11,109,122,.35)}50%{box-shadow:0 0 0 6px rgba(11,109,122,.12)}}
@keyframes kt-press{50%{transform:scale(.97)}}

/* ---------- sheet: white, slides up, pulls down ---------- */
.scrim{position:fixed;inset:0;background:rgba(14,20,33,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade .16s}
.scrim.zoom,.scrim:has(.zoom){background:rgba(14,20,33,.85)}
.sheet{position:relative;background:var(--s1);border-radius:20px 20px 0 0;width:100%;max-width:560px;max-height:86vh;max-height:88dvh;overflow:auto;overscroll-behavior:contain;padding:36px max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));box-shadow:var(--e3);animation:up .24s var(--ease);counter-reset:fx}
.sheet:focus{outline:none}
.scrim.js,.scrim.js .sheet{animation:none}
.sheet .grab{position:absolute;top:0;left:0;right:0;height:28px;touch-action:none;cursor:grab}
.sheet .grab::before{content:"";position:absolute;top:10px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--hair)}
.sheet .sheet-x{position:absolute;right:16px;top:20px;z-index:2;min-height:40px;padding:0 12px}
.sheet h2{font-size:var(--fs-disp);line-height:var(--lh-disp);font-weight:600;color:var(--t-hi);letter-spacing:-.02em;margin:8px 80px 12px 0}
.sheet h2.sr + *{margin-top:12px}
.sheet > p{font-size:var(--fs-body);line-height:var(--lh-body)}
.sheet .fix{border-top:1px solid var(--hair);padding:14px 0}
.sheet .fix:not(.last){position:relative;padding-left:40px;counter-increment:fx}
.sheet .fix:not(.last)::before{content:counter(fx);position:absolute;left:0;top:12px;font-size:1.625rem;line-height:1;font-weight:300;color:var(--t-low)}
.sheet .fix > b:first-child{display:block;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;margin-bottom:2px}
.sheet .fix p + p{margin-top:8px}
.sheet .fix.last{padding-bottom:4px}
.sheet .btn{margin-top:12px}
.sheet .zoom{display:block;width:100%;height:auto;border-radius:12px}
.didfix{border-top:1px solid var(--hair);padding:14px 0}
.didfix > b{display:block;font-size:var(--fs-body);font-weight:600}
.didfix .yn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.didfix .yn .btn{margin-top:10px;min-height:48px}
.srch{display:flex;align-items:center;min-height:48px;margin-top:8px;font-weight:600;color:var(--accent-ink);text-decoration:none;font-size:var(--fs-sec)}
.fp-dialnum{font-size:var(--fs-stat);line-height:var(--lh-stat);font-weight:600;letter-spacing:-.02em;color:var(--t-hi);margin:12px 0}
.sheet .acct-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 0;border-top:1px solid var(--hair);font-size:var(--fs-body)}
.sheet .acct-row b{font-weight:600}
.sheet .acct-row .pill{min-height:40px}
.sheet .acct-row + .acct-row{border-top:1px solid var(--hair)}
.sheet .acct-row:last-of-type{border-bottom:1px solid var(--hair)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* ---------- drills ---------- */
.q{font-size:var(--fs-step);line-height:var(--lh-step);font-weight:600;color:var(--t-hi);letter-spacing:-.015em;margin-top:8px}
.q.qsm{font-size:var(--fs-card);line-height:1.625rem;margin-top:16px}
.q.qsort{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;letter-spacing:0;margin-top:0}
.qlab{margin-top:8px}
.qcount{font-size:var(--fs-sec)!important;font-weight:500!important}
.opts{display:grid;gap:10px;margin-top:18px}
.opt{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:56px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-ctl);background:var(--s1);font-size:var(--fs-body);line-height:1.45;font-weight:500;color:var(--t-hi)}
.opt .mk{margin-left:auto;flex:none;font-size:var(--fs-sec);font-weight:600;white-space:nowrap}
.opt .mk .sr{position:absolute}
.opt.right{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok);background:var(--s1)}
.opt.right .mk,.opt.reveal .mk{color:var(--ok)}
.opt.reveal{border-color:var(--ok)}
.opt.wrong{border-color:var(--stop);box-shadow:0 0 0 1px var(--stop)}
.opt.wrong .mk{color:var(--stop)}
.opts.done .opt:not(.right):not(.reveal):not(.wrong){color:var(--t-low);border-color:var(--hair)}
.opt .n{flex:none;font-size:1.375rem;line-height:1;font-weight:300;color:var(--t-low);min-width:22px}
.opt.placed{border-color:var(--accent)}
.opt.placed .n{color:var(--accent-ink);font-weight:500}
.fb{position:relative;margin-top:12px;padding:2px 0 2px 16px;border-left:3px solid var(--ok);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;color:var(--t-body);animation:fbin 220ms var(--e-out)}
.fb.no{border-left-color:var(--stop)}
.fb b{color:var(--ok);font-weight:600}
.fb.no b{color:var(--stop)}
.fb b:first-child{display:inline}
@keyframes fbin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes nudge{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.nudge{animation:nudge 300ms var(--e-std)}
.deck{position:relative;margin-top:18px;min-height:200px;isolation:isolate}
.dcard{position:relative;background:var(--s1);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--e3);padding:44px 18px 28px;min-height:200px;display:grid;place-items:center;text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:600;letter-spacing:-.01em;color:var(--t-hi);touch-action:pan-y;transition:transform var(--d-release) var(--e-out)}
.dcard.held{transform:scale(1.02);transition-duration:var(--d-press)}
.dcard .lab-l,.dcard .lab-r{position:absolute;top:14px;font-size:var(--fs-sec);line-height:1.25rem;font-weight:600;pointer-events:none}
.dcard .lab-l{left:16px;color:var(--t-low);opacity:var(--l,0)}
.dcard .lab-r{right:16px;color:var(--accent-ink);opacity:var(--r,0)}
.dstamp{font-size:var(--fs-sec)!important;font-weight:600!important;background:none!important;padding:0!important}
.deck .dcard.next{position:absolute;inset:0;transform:translateY(10px) scale(.96);box-shadow:none;z-index:-1;transition:none}
.deck .dcard.back{position:absolute;inset:0;box-shadow:none;transition:none;pointer-events:none}
.deck .dcard.b1{transform:translateY(8px) scale(.965);z-index:-1}
.deck .dcard.b2{transform:translateY(16px) scale(.93);z-index:-2;background:var(--s2)}
.deck:has(.b1){margin-bottom:8px}
.deck:has(.b2){margin-bottom:16px}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.bins .btn{position:relative;min-height:60px;background:var(--s1);color:var(--t-hi);border:1.5px solid var(--border);box-shadow:0 0 0 calc(var(--p,0) * 2px) var(--accent)}
.bins .btn:active{background:var(--s2)}
.bins .btn.is{border-color:var(--accent);--p:1}
.bins .btn.hit{animation:binhit 360ms var(--e-out)}
@keyframes binhit{0%{transform:none}35%{transform:scale(1.04)}100%{transform:none}}
.plus1{position:absolute;top:-10px;right:12px;font-size:var(--fs-sec);font-weight:600;color:var(--ok);pointer-events:none;animation:plus-rise 240ms var(--e-out) forwards,fade-out 200ms 520ms forwards}
.score{font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
.prog .lab .score{display:flex;gap:12px;align-items:baseline;flex:none}
#fp-run{color:var(--accent-ink);font-weight:600;display:inline-block;position:relative}
#fp-run.up{animation:rise-num 200ms var(--e-out)}
.clock{font-weight:600;color:var(--t-hi);min-width:3.2em;text-align:right}
.stack{display:grid;gap:8px;margin-top:16px}
.stack .opt{min-height:56px}
.slot{display:flex;align-items:center;min-height:56px;padding:0 16px;border:1.5px dashed var(--dash);border-radius:var(--r-ctl);color:var(--t-low);font-size:var(--fs-sec);font-weight:500}
.pool{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
.stackdone{display:flex;align-items:center;justify-content:center;min-height:48px;color:var(--ok);font-weight:600;animation:rise 300ms var(--e-out) both}
.pair{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.pair button{min-width:0;border:1.5px solid var(--border);border-radius:var(--r-ctl);padding:8px;background:var(--s1);text-align:left}
.pair button.right,.pair button.reveal{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok)}
.pair button.wrong{border-color:var(--stop)}
.pair .cap{display:flex;align-items:center;gap:8px;font-size:var(--fs-sec);font-weight:600;color:var(--t-low);padding:8px 4px 4px}
.pair .cap .mk{margin-left:auto}
.pair button.right .mk,.pair button.reveal .mk{color:var(--ok)}
.pair button.wrong .mk{color:var(--stop)}
@media (min-width:480px){.pair{grid-template-columns:1fr 1fr}}
.tapq{position:sticky;top:var(--rail-h);z-index:5;background:var(--s1);padding:8px 0;margin-top:0}
.tapwrap{margin-top:8px}
.shot.tapzone{width:min(343px,100%);cursor:pointer}
.shot.tapzone img{pointer-events:none}
.touch{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(11,109,122,.25);pointer-events:none;animation:touch 360ms var(--e-out) forwards}
@keyframes touch{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}
.tapmiss{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid var(--t-hi);background:rgba(14,20,33,.12);pointer-events:none;animation:fade .15s}
.shot .sring.hint{border-color:var(--t-hi)}
.shot .sring.lock{border-color:var(--accent);animation:lockon 280ms var(--e-out) both;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 0 9999px rgba(14,20,33,0);transition:box-shadow 240ms var(--e-std)}
.shot .sring.lock.dim{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 0 9999px rgba(14,20,33,.3)}
.checkride .shot .sring.lock,.shot .sring.lock.ok{border-color:var(--ok)}
@keyframes lockon{from{transform:scale(1.25);opacity:0}to{transform:none;opacity:1}}
.showme{margin-top:12px}
.ostrand{position:relative;display:flex;justify-content:space-between;align-items:center;margin:18px 6px 4px;height:14px}
.ostrand::before{content:"";position:absolute;left:7px;right:7px;top:6px;height:2px;border-radius:1px;background:var(--hair)}
.ostrand::after{content:"";position:absolute;left:7px;top:6px;height:2px;border-radius:1px;width:calc((100% - 14px) * var(--o,0));background:var(--accent);transition:width 200ms var(--e-out)}
.ostrand i{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--s1);border:1.5px solid var(--border2)}
.ostrand i.on{background:var(--accent);border-color:var(--accent)}
@media (max-width:599px){.player.drill .wrap.dstage:not(:has(> .tapwrap)):not(:has(> .deck)){padding-bottom:calc(var(--fp-foot-h,calc(76px + env(safe-area-inset-bottom))) + 24px)}}
.player.drill .opt,.player.drill .pair button{scroll-margin-bottom:calc(var(--fp-foot-h,96px) + 12px)}
@media (max-width:599px){.wrap.dstage:has(> .deck){display:flex;flex-direction:column}.wrap.dstage > .deck{margin-top:auto}.wrap.dstage:has(> .deck) > .fbslot{margin-bottom:auto}.wrap.dstage:has(> .deck) > .deck,.wrap.dstage:has(> .deck) > .bins{flex:none}}

/* ---------- a practice door: the scene, the homeowner, the rep's turn, the line on that door ---------- */
.dr-where{font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
.dr-scene{width:calc(100% + 40px);margin:0 -20px;height:211px;color:#fff}
.dr-scene.strip{height:120px}
.dr-scene::after{background:linear-gradient(to top,rgba(14,20,33,.94) 0%,rgba(14,20,33,.78) 50%,rgba(14,20,33,.40) 100%)}
.dr-scene .cap{bottom:18px}
.dr-scene.strip .cap{bottom:14px}
.dr-scene .k{font-size:.875rem;font-weight:500;color:#fff;opacity:.8}
.dr-scene p{font-size:1.125rem;line-height:1.4;font-weight:500;margin-top:6px;color:#fff}
.dr-scene.strip p{font-size:1rem;margin-top:3px}
.dr-scene.warm > img{transition:transform 480ms var(--e-out)}
.scene{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t-body);margin-top:12px}
.dr-h{margin-top:28px;font-size:var(--fs-sec);font-weight:500;color:var(--accent-ink)}
.say{margin:10px 0 0;padding:0 0 0 16px;border-left:3px solid var(--navy);background:none;border-radius:0}
.say > span{display:block;font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--t-low)}
.say > em{display:block;font-size:1.625rem;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--t-hi);margin-top:4px}
.dr-row{padding-top:16px}
.dr-say{margin-top:30px;padding:20px 18px 18px;border:2px dashed var(--dash);border-radius:14px}
.dr-say p{font-size:1.1875rem;line-height:1.4;font-weight:500;color:var(--t-hi)}
.dr-say .btn{margin-top:16px}
.sayfirst{margin-top:26px;padding:20px 18px 18px;border:2px dashed var(--dash);border-radius:14px}
.sayfirst p{margin:0 0 14px;font-size:1.1875rem;line-height:1.4;font-weight:500;color:var(--t-hi)}
.sayfirst p b{font-weight:500}
.sayfirst .btn{width:100%}
.dr-answer{margin-top:22px;padding:22px 20px 20px;background:var(--navy);color:#fff;border-radius:14px}
.dr-answer .k{font-size:.875rem;font-weight:500;color:#fff;opacity:.75}
.dr-answer .line{font-size:1.25rem;line-height:1.4;font-weight:500;margin-top:8px;color:#fff}
.dr-answer .fp-hear{margin-top:18px}
.dr-answer .why{margin-top:18px;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:0;font-size:1rem;line-height:1.45;color:#fff;opacity:.85;font-weight:400}
.dr-answer .why b{color:#fff;font-weight:600}
.dr-answer .bc{color:#fff}
.dr-grade{padding-top:30px}
.dr-grade .q{font-size:1.1875rem;line-height:1.3;margin-top:0}
.dr-grade .pair{grid-template-columns:1fr 1fr;margin-top:14px}
.dr-grade .pair .btn{margin:0}
.say.me{margin-top:22px;padding:22px 20px 20px;background:var(--navy);color:#fff;border-radius:14px;border:0}
.say.me > span{color:#fff;opacity:.75}
.say.me > em{font-size:1.25rem;line-height:1.4;font-weight:500;color:#fff}
.say.me .fp-hear{margin-top:18px}
.say.me + .fb{margin:0 0 0;padding:0 20px 20px;background:var(--navy);color:#fff;border:0;border-radius:0 0 14px 14px;margin-top:-14px;font-size:1rem;opacity:1}
.say.me + .fb::before{content:"";display:block;height:1px;background:rgba(255,255,255,.18);margin-bottom:16px}
.say.me + .fb b{color:#fff}
.say.me:has(+ .fb){border-radius:14px 14px 0 0;padding-bottom:18px}
.rp-grade{margin-top:14px}
.thread{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 4px;border-bottom:1px solid var(--hair)}
.say.old{display:block;width:100%;margin:0;padding:10px 0;border:0;border-top:1px solid var(--hair);background:none;text-align:left;font:inherit;cursor:pointer;color:var(--t-low)}
.thread > .say.old:first-child{border-top:0}
.say.old span{display:inline;font-size:var(--fs-sec);font-weight:500;color:var(--t-low);margin-right:6px}
.say.old em{display:inline;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:400;color:var(--t-body);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.say.old.open em{white-space:normal}
.say.old.me{background:none;color:var(--t-low);padding:10px 0;border-radius:0}
.say.old.me span{color:var(--accent-ink)}
.say.old.me em{color:var(--t-body)}
.say.typing em{display:none}
.say:not(.typing) .dots{display:none}
.dots{display:inline-flex;gap:5px;padding:8px 0 4px}
.dots b{width:7px;height:7px;border-radius:50%;background:var(--t-mark);animation:dot 1s infinite var(--e-std)}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.ask.held{visibility:hidden}
.ask.rise{animation:rise 280ms var(--e-out) both}
.ask[hidden]{display:none}
.now{scroll-margin-top:64px}
.now .rp-play{display:inline-flex;margin:0}
.dwatch-next{margin-top:24px;padding-top:18px;border-top:1px solid var(--hair)}
.dwatch-next .scene{margin-top:6px}
.rules + .why{margin-top:16px}
.say .fp-hear{display:inline-flex;margin-top:10px}
.lines .say{margin-top:22px;padding:0 0 24px;border-left:0;border-bottom:1px solid var(--hair)}
.lines .say > span{font-size:var(--fs-sec);color:var(--accent-ink)}
.lines .say > em{font-size:1.3125rem;line-height:1.38;font-weight:500;letter-spacing:-.005em;margin-top:8px}
.lines .say .fp-hear{margin-top:16px}
.lines{border-top:1px solid var(--hair);margin-top:22px}
.lines .say:first-child{margin-top:0;padding-top:22px}
.fp-hear,button.fp-hear,a.fp-hear:link,a.fp-hear:visited{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--t-hi);background:var(--s1);font:inherit;font-size:var(--fs-sec);font-weight:600;color:var(--t-hi);text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.dr-answer .fp-hear,.say.me .fp-hear{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.fp-hear:active{opacity:.7}

/* ---------- finish screens ---------- */
.finish{text-align:center;padding-top:36px}
.finish h1{font-size:var(--fs-disp);line-height:var(--lh-disp);font-weight:600;color:var(--t-hi);letter-spacing:-.02em;animation:rise 300ms 120ms var(--e-out) both}
.finish > p{margin-top:12px;font-size:var(--fs-body);line-height:var(--lh-body);animation:rise 300ms 120ms var(--e-out) both}
.finish .btn{margin-top:24px;animation:rise 300ms 200ms var(--e-out) both}
.finish .btn + .btn{margin-top:12px}
.finish.plain h1,.finish.plain p,.finish.plain .btn{animation:fade 220ms both}
.fp-kick,.finish .fp-kick{display:block;margin:0 0 8px;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;color:var(--accent-ink);animation:rise 300ms 120ms var(--e-out) both}
.fp-kick.ok{color:var(--ok)}
.stats{display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:12px 32px;margin-top:22px;animation:rise 300ms 160ms var(--e-out) both}
.stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.stat b,.stat .v{font-size:var(--fs-stat);line-height:var(--lh-stat);font-weight:300;letter-spacing:-.03em;color:var(--t-hi)}
.stat span,.stat .l{font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;color:var(--t-low)}
.stat s,.newbest s{color:var(--t-mark);font-weight:400;font-size:var(--fs-body);text-decoration-thickness:1px}
.clean{display:inline-flex;align-items:center;font-size:var(--fs-stat);line-height:var(--lh-stat);font-weight:300;letter-spacing:-.03em;color:var(--ok)}
.nextch,a.nextch:link,a.nextch:visited{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 0;border-top:1px solid var(--hair);text-align:left;text-decoration:none;color:var(--t-hi);font-weight:600;animation:rise 300ms 260ms var(--e-out) both}
.nextch::after{content:"Open";margin-left:auto;font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
.nextch:first-of-type{margin-top:24px}
.recap{list-style:none;margin:20px auto 0;padding:0;max-width:420px;text-align:left;border-top:1px solid var(--hair);animation:rise 300ms 180ms var(--e-out) both}
.recap li{padding:10px 0;border-bottom:1px solid var(--hair);font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-body)}
.missed{margin-top:24px;text-align:left;border-top:1px solid var(--hair);padding-top:14px;animation:rise 300ms 160ms var(--e-out) both}
.missed .mi{padding:12px 0 0 16px;margin-top:12px;border-top:1px solid var(--hair);border-left:3px solid var(--stop)}
.missed .mi:first-of-type{border-top:0;margin-top:6px;padding-top:0}
.missed .mi b{display:block;font-size:var(--fs-body);line-height:1.5rem}
.missed .mi p{margin-top:4px;font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-body)}
details.whole{margin-top:24px;text-align:left}
details.whole summary,details.harder > summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600;color:var(--t-hi);list-style:none;border-top:1px solid var(--hair);padding:8px 0}
details.whole summary::-webkit-details-marker,details.harder > summary::-webkit-details-marker{display:none}
details.whole summary::after,details.harder > summary::after{content:"Open";margin-left:auto;font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
details[open].whole summary::after,details[open].harder > summary::after{content:"Close"}
details.harder{margin-top:24px;text-align:left;animation:rise 300ms 260ms var(--e-out) both}
details.harder .nextch,details.harder .nextch:first-of-type{margin-top:0;animation:none}
.fp-again,a.fp-again:link,a.fp-again:visited,button.fp-again{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;padding:0 12px;background:none;border:0;font:inherit;font-size:var(--fs-body);font-weight:600;color:var(--accent-ink);text-decoration:underline;text-decoration-color:rgba(11,109,122,.35);text-underline-offset:3px;cursor:pointer;animation:rise 300ms 220ms var(--e-out) both}
.fp-later,a.fp-later:link,a.fp-later:visited,button.fp-later{display:flex;align-items:center;width:fit-content;max-width:100%;min-height:44px;margin-top:4px;padding:10px 2px;background:none;border:0;font:inherit;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;color:var(--t-low);text-align:left;text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:3px;cursor:pointer}
.fp-passcode{margin-top:16px}
.finish .runline{font-size:var(--fs-body)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
/* the one navy card: a stop finished */
.sheet-navy,.secdone{background:var(--navy-2);color:var(--on-navy);text-align:center}
.sheet-navy{padding-top:40px}
.sheet-navy h2,.sheet-navy b{color:#fff}
.sheet-navy p{color:var(--on-navy-2)}
.sheet-navy .grab::before{background:rgba(255,255,255,.2)!important}
.secdone{margin:24px auto 0;max-width:420px;padding:24px 20px 22px;border-radius:14px;animation:rise 300ms 160ms var(--e-out) both}
.secdone > b:first-child{display:block;font-size:var(--fs-card);line-height:var(--lh-card);font-weight:600;letter-spacing:-.01em;color:#fff}
.secdone p{margin-top:8px;color:var(--on-navy-2);font-size:var(--fs-body);line-height:var(--lh-body);animation:none}
.secdone p b{color:#fff}
.secdone .bc{color:inherit}
.secdone .fp-route{margin-top:16px}
.secdone .fp-route-cap{text-align:center}
.secdone .btn{margin-top:18px}
.strandline{display:block;width:min(280px,80%);height:3px;margin:18px auto 4px;border-radius:2px;background:var(--grad);transform-origin:left;animation:grow-x 1000ms 300ms var(--e-out) both}
.finish:has(> .secdone){padding-top:20px}
/* course done, once */
.coursedone{position:fixed;inset:0;z-index:60;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:48px max(16px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));text-align:center;background:var(--navy);color:#fff;animation:fade 300ms both}
.coursedone h1{position:relative;z-index:2;font-size:var(--fs-hero);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:#fff}
.coursedone > :not(.fph-art):not(.fph-grain){position:relative;z-index:2}
.coursedone .btn{width:auto;min-width:240px}
.coursedone.neutral{background:var(--bg);color:var(--t-hi)}
.coursedone.neutral h1{color:var(--t-hi)}
.coursedone.neutral .btn{background:var(--btn);color:#fff}
.rmcard{position:relative;width:min(320px,100%);aspect-ratio:1.586;border-radius:16px;background:var(--navy-2);border:1px solid rgba(255,255,255,.1);text-align:left;padding:20px 22px;overflow:hidden;color:#fff;animation:card-in 600ms 200ms var(--e-out) both}
.rmcard .rm-logo{display:block;height:24px;width:auto}
.rmcard .rm-role{position:absolute;left:22px;bottom:58px;font-size:var(--fs-sec);font-weight:500;color:var(--on-navy-2)}
.rmcard .rm-name{position:absolute;left:22px;bottom:18px;right:52px;font-size:var(--fs-disp);line-height:var(--lh-disp);font-weight:600;letter-spacing:-.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmcard .rm-strand{position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--grad);opacity:.9}
.rmcard .rm-stripes{position:absolute;right:16px;top:18px;bottom:18px;display:flex;gap:4px}
.rmcard .rm-stripes i{width:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.rmcard .rm-stripes i.on{background:var(--teal-glow)}

/* ---------- the route line and the Ready mark ---------- */
.fp-route{width:100%;min-width:0;color:var(--t-low)}
.fp-route-go,a.fp-route-go:link,a.fp-route-go:visited{display:block;min-height:44px;padding:8px 0;color:inherit;font-weight:500;text-decoration:none;touch-action:manipulation}
.fp-route-bar{display:flex;gap:6px;height:3px;min-width:0}
.fp-route-bar i{position:relative;flex:var(--w,1) 1 0;min-width:6px;overflow:hidden;background:var(--hair)}
.fp-route-bar i::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0));transition:transform 400ms var(--e-out)}
.fp-route-cap{display:block;margin-top:8px;min-width:0;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;color:var(--t-low);overflow-wrap:break-word;text-wrap:pretty}
.fp-route-cap:empty{display:none}
.fp-route.dark,.fp-route.dark .fp-route-cap{color:var(--on-navy-2)}
.fp-route.dark .fp-route-bar i{background:rgba(255,255,255,.2)}
.fp-route.dark .fp-route-bar i::after{background:var(--teal-glow)}
.fp-finline{width:100%;max-width:420px;margin:24px auto 0;text-align:center;animation:rise 300ms 180ms var(--e-out) both}
.fp-finline .fp-route-cap{text-align:center}
.fp-ready,a.fp-ready:link,a.fp-ready:visited{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:1px solid var(--border2);border-radius:var(--r-pill);background:var(--s1);color:var(--t-low);font-size:var(--fs-sec);line-height:1.25rem;font-weight:600;text-decoration:none;white-space:nowrap}
.fp-ready.lit{border-color:var(--ok);color:var(--ok)}
.fp-ready-line{margin:8px 0 0;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:400;color:var(--t-low);overflow-wrap:break-word;text-wrap:pretty}
.fp-ready-line:empty{display:none}
.fp-ready-line a,.fp-ready-line button{display:inline;padding:13px 0;margin:-13px 0;background:none;border:0;font:inherit;font-weight:600;color:var(--accent-ink);text-decoration:underline;text-decoration-color:rgba(11,109,122,.35);text-underline-offset:3px;cursor:pointer}
/* the Start here map */
.fp-map{display:grid;margin:0;padding:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);text-align:left}
.fp-map > * + *{border-top:1px solid var(--hair)}
.fp-map-sec{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;margin:0;padding:10px 0;color:var(--t-hi)}
.fp-map-n{flex:none;width:44px;font-size:1.875rem;line-height:1;font-weight:300;letter-spacing:-.02em;color:var(--t-low)}
.fp-map-sec.done .fp-map-n{color:var(--t-faint)}
.fp-map-t{flex:1;min-width:0;display:flex;flex-direction:column}
.fp-map-t b{font-size:var(--fs-body);line-height:1.375rem;font-weight:600;color:var(--t-hi)}
.fp-map-t > span{font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:400;color:var(--t-low)}
.fp-map-sec .state{flex:none;font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
.fp-map-sec.done .state{color:var(--accent-ink)}
.fp-where > div{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--hair)}
.fp-where > div:first-child{border-top:0;padding-top:4px}
.fp-where b{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t-hi)}
.fp-where span{font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-low)}
ol.rules{margin:12px 0 0;padding-left:22px}
ol.rules li{margin:10px 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t-body)}
ol.rules li b{color:var(--t-hi)}
.fp-xdiv{display:flex;align-items:center;gap:12px;margin:16px 0 0;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:500;color:var(--t-low);white-space:nowrap}
.fp-xdiv::before,.fp-xdiv::after{content:"";flex:1 1 0;min-width:12px;height:1px;background:var(--hair)}
/* the film row on a lesson: the poster small and treated, the words, "Watch" */
.ls-film,button.ls-film{display:flex;align-items:center;gap:16px;width:calc(100% + 40px);margin:14px -20px 4px;padding:14px 20px;border:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--s1);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;color:inherit}
.ls-film .poster{position:relative;flex:none;width:66px;height:117px;border-radius:8px;overflow:hidden;background:var(--navy-2)}
.ls-film .poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity;opacity:.55}
.ls-film .body{flex:1;min-width:0}
.ls-film .t{display:block;font-size:1.1875rem;font-weight:600;line-height:1.2;color:var(--t-hi)}
.ls-film .s{display:block;font-size:var(--fs-sec);color:var(--t-low);margin-top:4px}
.ls-film .word{flex:none}
.stage > .words > .ls-film:first-child{margin-top:0;border-top:0}
.dstage .ls-film{margin-top:16px}
.fp-filmsheet .fp-film-box{margin-top:4px;border-radius:12px;overflow:hidden;background:#000}
.fp-filmsheet video{display:block;width:100%;height:auto;max-height:62vh;max-height:62dvh;border:0;background:#000;object-fit:contain}
.fp-filmsheet .fp-film-err{margin-top:8px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t-low)}
.fp-filmsheet .btn{margin-top:12px}
.fp-filmsheet [hidden]{display:none}

/* ---------- setup taps, call rows, ticks, terms, the account form ---------- */
.fp-stage-tap{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;margin-top:14px;padding:8px 16px;border:1.5px solid var(--t-hi);border-radius:var(--r-ctl);background:var(--s1);font:inherit;font-size:var(--fs-body);font-weight:600;color:var(--t-hi);text-align:left;cursor:pointer;transition:background-color var(--d-state) var(--e-std),border-color var(--d-state) var(--e-std)}
.fp-stage-tap .tk{display:none}
.fp-stage-tap .tl{flex:1;min-width:0}
.fp-stage-tap .ts{flex:none;font-size:var(--fs-sec);font-weight:600;color:var(--ok)}
.fp-stage-tap:active{transform:scale(.98)}
.fp-stage-tap.on{border-color:var(--hair);color:var(--t-low);cursor:default}
.fp-stage-tap.on:active{transform:none}
.fp-callrow[hidden]{display:none}
.fp-callrow{margin-top:14px}
.fp-callrow p{font-size:var(--fs-body);line-height:var(--lh-body)}
.fp-callrow .btn{margin-top:12px}
.fp-callnum{margin-top:8px;font-size:var(--fs-sec);color:var(--t-low);text-align:center}
.fp-callsay{margin-top:12px;padding-left:16px;border-left:3px solid var(--navy);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t-body)}
.fp-ticks{margin:20px 0 0;text-align:left;border-top:1px solid var(--hair)}
.fp-ticks > .k{display:block;margin:14px 0 2px;font-size:var(--fs-sec);font-weight:500;color:var(--t-low)}
.fp-ticks ul{list-style:none;margin:0;padding:0}
.fp-ticks li{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:var(--fs-body);line-height:1.375rem;color:var(--t-hi)}
.fp-ticks .yes li::before{content:"Done";flex:none;font-size:var(--fs-sec);font-weight:500;color:var(--accent-ink);min-width:44px}
.fp-ticks .left li{font-weight:600}
.fp-ticks .left li::before{content:"To do";flex:none;font-size:var(--fs-sec);font-weight:500;color:var(--t-low);min-width:44px}
dfn.term{font-style:normal;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--border2);text-underline-offset:3px;cursor:pointer}
.fp-err{font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--stop);font-weight:600}
.fp-account h2{margin-bottom:8px}
.fp-acc-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:4px 0 8px;padding:4px;border-radius:var(--r-ctl);background:var(--s2)}
.fp-acc-switch button,.fp-acc-switch a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:var(--fs-sec);font-weight:600;color:var(--t-low);text-decoration:none;cursor:pointer}
.fp-acc-switch .on,.fp-acc-switch [aria-pressed=true],.fp-acc-switch [aria-selected=true],.fp-acc-switch [aria-current]{background:var(--s1);color:var(--t-hi)}
.fp-field{display:block;margin-top:14px}
.fp-field > span,.fp-field > label,.fp-field > b{display:block;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:600;color:var(--t-hi)}
.fp-field input,.fp-field select{display:block;width:100%;margin-top:6px;min-height:52px;padding:0 14px;border-radius:var(--r-ctl);border:1.5px solid var(--border2);background:var(--s1);font:inherit;font-size:1.0625rem;letter-spacing:0;font-weight:400;color:var(--t-hi)}
.fp-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,109,122,.18)}
.fp-field small,.fp-field .hint{display:block;margin-top:4px;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--t-low)}
.fp-field[hidden]{display:none}
.fp-account .fp-err{margin-top:12px}
.fp-account .btn{margin-top:18px}
.fp-account .msg{margin-top:12px;padding-left:16px;border-left:3px solid var(--ok);font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-body)}
.fp-account .msg:empty{display:none}
.fp-account a:not(.btn),.fp-account button.lnk{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0;background:none;border:0;font:inherit;font-size:var(--fs-sec);font-weight:600;color:var(--accent-ink);text-decoration:underline;text-decoration-color:rgba(11,109,122,.35);text-underline-offset:3px;cursor:pointer}
.fp-account .fp-acc-switch a{text-decoration:none;margin-top:0}
.fp-account .fp-gate-alt{margin-top:12px;font-size:var(--fs-sec);color:var(--t-low)}
.fp-nocode{margin-top:12px;font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--t-low)}
button.fp-signin:not(.btn):not(.pill),a.fp-signin:not(.btn),button.fp-stage-open:not(.btn){display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;font:inherit;font-weight:600;color:var(--accent-ink);text-decoration:underline;text-decoration-color:rgba(11,109,122,.35);text-underline-offset:3px;cursor:pointer}
.fp-gate-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 20px}
.fp-gate-switch button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:68px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r-ctl);background:var(--s1);color:var(--t-hi);font:inherit;text-align:left;cursor:pointer}
.fp-gate-switch small{font-size:var(--fs-cap);line-height:var(--lh-cap);font-weight:500;color:var(--t-low)}
.fp-gate-switch b{display:block;font-size:var(--fs-card);line-height:var(--lh-card);font-weight:600;letter-spacing:-.01em;color:inherit}
.fp-gate-switch [aria-pressed=true]{background:var(--btn);border-color:var(--btn);color:#fff}
.fp-gate-switch [aria-pressed=true] small,.fp-gate-switch [aria-pressed=true] b{color:#fff}
.fp-gate-help{margin-top:12px}
.fp-gate-help p{font-size:var(--fs-sec);color:var(--t-low)}
.fp-gate-hero{padding-bottom:36px}
.fp-gate-hero + .wrap{padding-top:24px}

/* ---------- brand chips: the word in the brand's ink, its small logo right after ---------- */
.bc{color:var(--bc);font-weight:600;white-space:nowrap}
b .bc,strong .bc,h1 .bc,h2 .bc,h3 .bc{font-weight:inherit}
.bc-i{display:inline-block;width:1.05em;height:1.05em;margin-left:.24em;vertical-align:-.17em;border-radius:.26em;object-fit:contain;border:0;background:none}
.bc-clear{--bc:var(--b-clear)} .bc-tmo,.bc-tmofiber,.bc-oe,.bc-tlife{--bc:var(--b-tmo)} .bc-sr{--bc:var(--b-sr)}
.bc-yubi{--bc:var(--b-yubi)} .bc-intune{--bc:var(--b-intune)} .bc-edge{--bc:var(--b-edge)}
.on-navy .bc,.sheet-navy .bc,.coursedone .bc,.hm-kit .bc,.hm-hero .bc,.dr-answer .bc,.say.me .bc,.secdone .bc{color:inherit}

/* ---------- keyframes, transitions, breakpoints ---------- */
@keyframes pulse-x{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(var(--to,100px))}}
@keyframes rise-num{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes grow-x{from{transform:scaleX(0)}}
@keyframes plus-rise{from{transform:translateY(6px);opacity:0}to{transform:translateY(-6px);opacity:1}}
@keyframes fade-out{to{opacity:0}}
@keyframes card-in{from{opacity:0;transform:translateY(16px)}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 220ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in 340ms cubic-bezier(.22,1,.36,1) both}
@keyframes vt-out{to{opacity:0;transform:translateX(-12%)}}
@keyframes vt-in{from{opacity:0;transform:translateX(24%)}}
html.vt-back::view-transition-old(root){animation-name:vt-out-back}
html.vt-back::view-transition-new(root){animation-name:vt-in-back}
@keyframes vt-out-back{to{opacity:0;transform:translateX(12%)}}
@keyframes vt-in-back{from{opacity:0;transform:translateX(-24%)}}
.card,.sheet,.fp-callsay,.fp-banner,.callout,.fp-ticks,.secdone,.hit{overflow-wrap:break-word}
@media (max-width:359px){.hm-h1{font-size:2.125rem}.sp-plate .num{font-size:6.5rem}}
@media (min-width:600px) and (max-width:767px){
  .prog,.stage,.foot .in{max-width:640px;padding-left:24px;padding-right:24px}
  .stage .media .shot.phone{width:min(300px,100%,calc(50dvh * var(--ar,.4945) + 20px))}
}
@media (min-width:768px){
  .stage,.stage.solo{display:block;max-width:640px;padding:24px 24px 32px}
  .wrap,.drill .wrap.dstage{max-width:640px;padding-left:24px;padding-right:24px}
  .prog,.foot .in,.drill .prog,.drill .foot .in{max-width:640px;padding-left:24px;padding-right:24px}
  .foot .in{justify-content:flex-end}
  .foot .in > .btn{flex:1 1 auto;min-width:220px}
  .rail .track{left:50%;right:auto;width:min(100%,640px);transform:translateX(-50%)}
  .dr-scene{width:100%;margin:0;border-radius:12px}
  .ls-film,button.ls-film{width:100%;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .lrows,.hits{margin-left:0;margin-right:0;border-left:1px solid var(--hair);border-right:1px solid var(--hair);border-radius:12px;overflow:hidden}
}
@media (min-width:900px){
  :root{--fs-hero:3.25rem;--fs-disp:2.125rem;--lh-disp:2.5rem;--fs-step:1.5rem;--lh-step:1.875rem;--fs-stat:3rem;--lh-stat:3rem}
  .rail .mark img{height:34px}
  .hm-hero{padding-top:56px;padding-bottom:48px}
  .hm-band,a.hm-band:link,a.hm-band:visited{height:160px}
  .hm-stop.current .hm-band{height:200px}
  .ls-band{height:220px}
  .ls-band figcaption{left:max(24px,calc((100% - 640px) / 2 + 24px))}
  .sp-plate .text{left:max(24px,calc((100% - 640px) / 2 + 24px))}
  .sp-lead,.sp-setup{padding-left:calc((100% - 640px) / 2 + 24px);padding-right:calc((100% - 640px) / 2 + 24px)}
  .sp-row,.sp-all{padding-left:calc((100% - 640px) / 2 + 24px);padding-right:calc((100% - 640px) / 2 + 24px)}
  .sp-group .gh,.hm-meta,.section-h,.hm-kit .in,.hm-in,.fp-leftnote,.hm-note{max-width:640px}
  .scrim{align-items:center}
  .sheet{border-radius:20px}
  .mock.phone{max-width:320px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important}
  .fp-route-bar i::after,.sp-prog .bar i,.rail .track i::after{transition:none}
  .kt-btn::before{animation:none}
}

/* ---------- round-one fixes from the captures ---------- */
.sp-plate.navy{background:var(--navy-2)}
.sp-plate .bc,.ls-band .bc,.hm-band .bc{color:inherit}
.dr-grade .pair .btn:not(.outline),.rp-grade .btn:not(.outline){background:var(--btn);color:#fff;border:0}
.dr-grade .pair .btn.outline{background:var(--s1);color:var(--t-hi);border:1.5px solid var(--t-hi)}
.sp-lead .sp-h1{font-size:2rem;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--t-hi);margin-bottom:10px}
.sp-lead .sp-h1 + p{font-size:var(--fs-body);color:var(--t-low);padding-bottom:22px}
.sp-lead .search{margin:-8px 0 0;padding-bottom:22px}
.sp-lead > .search{max-width:560px}
.sp-tel{padding:16px max(20px,env(safe-area-inset-right)) 18px max(20px,env(safe-area-inset-left));background:var(--s1);border-bottom:1px solid var(--hair)}
.sp-tel > *{max-width:560px;margin-left:auto;margin-right:auto}
.sp-tel .t{font-size:var(--fs-body);font-weight:600;color:var(--t-hi)}
.sp-tel .s{font-size:var(--fs-sec);color:var(--t-low);margin-top:3px}
.sp-tel .btn{margin-top:12px}
.sp-tel .under{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:var(--fs-sec);font-weight:500;color:var(--t-low);text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:3px}
.sp-row .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.sp-row.film{align-items:center;padding-top:14px;padding-bottom:14px}
.sp-row.film .state{color:var(--t-low)}

/* ---------- round-two fixes from the critic ---------- */
/* the Ready mark is a state word, not a button */
.fp-ready,a.fp-ready:link,a.fp-ready:visited{border:0;background:none;padding:0;min-height:0;color:var(--t-low);font-weight:500}
.fp-ready.lit{color:var(--ok);font-weight:600}
/* the graded door keeps the word he chose where the buttons were */
.dr-graded{margin-top:10px;font-size:1.1875rem;font-weight:600;color:var(--stop)}
.dr-graded.ok{color:var(--ok)}
/* a list without a heading sits right under the lead */
.sp-group:has(> .sp-rows:first-child){margin-top:0}
.sp-group:has(> .sp-rows:first-child) > .sp-rows{border-top:0}
/* the setup pictures: one hairline list of brand tiles, never a grid of cards */
.fp-tiles,.fp-tiles.list{display:block;border-top:1px solid var(--hair)}
.fp-tile,.fp-tiles.list .fp-tile{display:flex;align-items:center;gap:14px;padding:12px 0;border:0;border-bottom:1px solid var(--hair);border-radius:0;background:none}
.fp-tile.on{border:0;border-bottom:1px solid var(--hair);box-shadow:inset 3px 0 0 var(--accent);padding-left:14px}
.fp-tile-art,.fp-tiles.list .fp-tile-art{flex:none;width:56px;height:56px;aspect-ratio:1;border-radius:10px;background:#fff;border:1px solid var(--hair)}
.fp-tile-art.logo img{width:62%;height:62%}
.fp-tile-art.logos{gap:4px}
.fp-tile-art.logos img{width:40%}
.fp-tile-n{position:static;flex:none;width:28px;font-size:1.625rem;font-weight:300;color:var(--t-low)}
.fp-tile-c,.fp-tile figcaption,.fp-tiles.list .fp-tile-c{padding:0;flex:1;min-width:0}
.fp-tile-t{font-size:var(--fs-body)}
.fp-tile-d{font-size:var(--fs-sec);line-height:var(--lh-sec)}
/* the setup flow keeps its words; the drawn pictures go */
.flow .fic{display:none}
/* a porch photo inside a lesson wears the band treatment */
.media img.art{filter:saturate(.55) contrast(1.05) brightness(.8)}
/* the two sort piles stand the same height */
.bins .btn{height:60px;min-height:60px}
/* the disabled Next on navy still reads */
.foot.navy .btn[aria-disabled=true]{background:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
/* the Setup plate's sub stays plain */
.sp-plate .sub .bc-i{display:none}
/* the drawn setup composites (a selfie frame, a key in a laptop, an envelope) are not photographs: the words carry the tile */
.fp-tile-art:has(img[src*="clear-selfie"]),.fp-tile-art:has(img[src*="yubikey-in-laptop"]),.fp-tile-art:has(img[src*="temp-pass-phone"]),.fp-tile-art:has(img[src*="clear-email"]),.fp-tile-art:has(img[src*="credentials-email"]),.fp-tile-art:has(img[src*="install-calendar"]),.fp-tile-art:has(img[src*="badge-sample"]),.fp-tile-art:has(img[src*="yubikey-nfc-phone"]){display:none}
/* a setup list that lost its drawn pictures keeps every row the same shape */
.fp-tiles.list:has(img[src*="clear-selfie"]) .fp-tile-art,.fp-tiles.list:has(img[src*="yubikey-in-laptop"]) .fp-tile-art,.fp-tiles.list:has(img[src*="temp-pass-phone"]) .fp-tile-art{display:none}

/* ---------- round-three fixes from the critic ---------- */
/* pills on navy are outlined, so the one white button on a screen stays the one strong control */
.rail a.pill:link,.rail a.pill:visited,.rail button.pill,.rail .pill,.hm-hero .pill,.hm-kit .pill,.dr-answer .pill,.sheet-navy .pill,.foot.navy .pill,.foot.navy button.pill,.secdone .pill{border-color:rgba(255,255,255,.28);background:transparent;color:#fff;font-size:.875rem;font-weight:500}
/* side-by-side buttons never take the stacked gap */
.bins .btn + .btn,.pair .btn + .btn,.dr-grade .btn + .btn,.didfix .yn .btn + .btn{margin-top:0}
/* a row's sub and state are quiet, never a second bold line */
.sp-all .s,.lrow .s,.sp-row .kind,.sp-row .state,.sp-tel .s{font-weight:400}
.sp-row.next .state,.sp-row.passed .state,.sp-row.mid .state,.sp-row.due .state,.hm-meta .state.on{font-weight:500}
/* one rule under the progress line, not two */
.sp-prog{border-bottom:0;padding-bottom:24px}
.sp-group:has(> .sp-rows:first-child) > .sp-rows{border-top:1px solid var(--hair)}
/* the strand under a lesson rail shows how far along he is */
.rail .track i::after{background:rgba(14,20,33,.82)}
/* a brand word is lit once per block; the repeats read as plain words */
.bc.bc-rep{color:inherit;font-weight:inherit}
/* a porch inside a lesson that already opens on a porch */
.media img.art{display:none}
.media:has(> img.art:only-child){display:none}
/* lists inside a lesson are hairlines, not dots */
.inst ul{padding-left:0;border-top:1px solid var(--hair)}
.inst ul > li{padding:10px 0;border-bottom:1px solid var(--hair)}
.inst ul > li::before{display:none}
.inst li + li{margin-top:0}
.inst ul + p{margin-top:16px}
/* the account switch: two equal choices, one line each */
.fp-gate-switch button{min-height:52px;align-items:center;justify-content:center;text-align:center}
.fp-gate-switch small{display:none}
.fp-gate-switch b{font-size:var(--fs-body)}
.fp-account .fp-gate-alt{display:none}
.card.fp-gate-help{border:0;background:none;padding:12px 0 0}
/* the one inline link style */
.srch{color:var(--t-low);font-weight:500;text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:3px}
/* a long quoted line steps down */
.say:not(.short) > em{font-size:1.375rem;line-height:1.3}
.fp-account .fp-gate-switch small{display:none}
.fp-account .fp-gate-switch button{min-height:52px;align-items:center;justify-content:center;text-align:center}

/* ---------- round-four fixes from the critic ---------- */
.node-c.word{font-size:.8125rem;font-weight:600;color:var(--t-hi);letter-spacing:.02em}
.fp-tiles:has(img[src*="intune"]) .fp-tile-art{display:none}
.inst .sample{font-size:var(--fs-body);line-height:1.45;color:var(--t-body)}
.setup-acts .btn.ghost:first-child{background:var(--btn);color:#fff;border:0}
.rail .where.end{padding-right:10px}
.prog .lab{display:block}
.prog .lab #fp-chap{display:block;margin:2px 0 0!important;text-align:left!important}
.prog .lab #fp-chap:empty{display:none}
.opt{flex-wrap:wrap}
.opt .mk{flex-basis:100%;margin-left:0;margin-top:6px;text-align:left}
.dwatch-next{border-top:0;padding-top:4px}
/* an order tile's numeral takes no room until the piece is placed, so every tile lines up */
.opt .n:empty{display:none}
.opt.placed .n{flex-basis:100%;margin-bottom:4px}
.fp-map-sec.beside{border-top:1px solid var(--hair)}
.fp-map-sec.beside .fp-map-n{font-size:var(--fs-sec);font-weight:500;line-height:1.3;color:var(--t-low)}

/* ---------- 2026-10-25, Dylan's home changes: inset bands, bigger words, Training beside The job and Setup ---------- */
.hm-route{padding:0 20px}
.hm-band,a.hm-band:link,a.hm-band:visited{border-radius:16px;height:124px}
.hm-stop.current .hm-band{height:164px}
.hm-band .name{font-size:1.625rem;font-weight:600}
.hm-stop.current .hm-band .name{font-size:2rem}
.hm-meta{padding:16px 0 24px}
.hm-meta .sub{font-size:1.0625rem;line-height:1.45;color:var(--t-hi)}
.hm-meta .state{font-size:1.0625rem;font-weight:600;color:var(--t-low);margin-top:6px}
.hm-meta .state.on{color:var(--accent-ink)}
.hm-stop.current .hm-meta::before{left:-12px}
.hm-cols{max-width:560px;margin:0 auto}
.hm-col .section-h{padding-left:20px}
.hm-col.beside .section-h{padding-top:12px}
.hm-stop.kit{margin-top:4px}
.hm-kit,a.hm-kit:link,a.hm-kit:visited{border-radius:16px;padding:24px 20px 26px}
.hm-stop.kit .hm-kit{margin-bottom:24px}
@media (min-width:900px){
  .hm-cols{max-width:1180px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 48px;padding:0 24px;align-items:start}
  .hm-band,a.hm-band:link,a.hm-band:visited{height:150px}
  .hm-stop.current .hm-band{height:190px}
  .hm-route{padding:0}
  .hm-col .section-h{padding-left:0}
  .hm-stop.current .hm-meta::before{left:-16px}
  .hm-note{max-width:1180px;padding-left:24px}
}

/* ---------- layout fixes, 2026-10-26 (Clayton's door screen and the sweep that followed) ----------
   The earlier lines of a door's conversation are one line each, cut with an ellipsis, tap to open.
   The cut was set on an inline <em>, where it does nothing, so a long line ran off the right edge on
   every practice door at every width; and the big spoken-line size meant for the current line also
   landed on these old lines. The cut now sits on the line itself (a block), so the label and the words share one
   line that ends in an ellipsis, and the full line opens on tap. Kept inline, the line reads the
   same to the English guard as before. */
.say.old{display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.say.old > span{margin-right:6px}
.say.old > em{display:inline;font-size:var(--fs-sec);line-height:var(--lh-sec);white-space:inherit;overflow:visible}
.say.old.open{white-space:normal}
/* The streak count is an empty span until three in a row; empty, it still took the flex gap and
   pushed "4 of 4 right" in from the left. */
#fp-run:empty{display:none}
/* A drawn browser or phone screen never runs past the column: it shrinks to fit, and a long address
   in its top bar ends in an ellipsis instead of being cut mid-word. */
.mock{max-width:100%;box-sizing:border-box}
.mock .top{min-width:0}
.mock .in{min-width:0}
.mock .in input,.mock .in .field,.mock .it{max-width:100%;box-sizing:border-box}
/* A lesson step's picture box is a one-column grid; its column grew to the widest thing inside, so a
   drawn browser with a long address pushed past the screen. The column now never outgrows the page. */
.pic{grid-template-columns:minmax(0,1fr)}
.pic > *{min-width:0}
/* Centred in that grid, the picture took its widest one-line content as its width (a nowrap address
   still counts at full length). Stretched to the column, it is the column's width and the address ends
   in an ellipsis; phone frames and screenshots keep their own max width and stay centred inside. */
.pic > .media{justify-self:stretch;width:100%}
/* Phones up to 400px wide (Dylan's reps on iPhones): the account pill was hidden to make room, which
   left no way to sign out, turn the sounds off or change the experience answer. It stays, as a round
   pill showing the rep's first initial (drawn from data-ini, so the page text reads the same); the full
   name is in its label for screen readers. */
@media (max-width:400px){
  .rail .hb.acct.fp-acct{display:inline-flex;width:44px;min-width:44px;padding:0;justify-content:center}
  .rail .hb.acct.fp-acct span{display:none}
  .rail .hb.acct.fp-acct::before{content:attr(data-ini);font-weight:600}
  .rail .pill.hb{padding:0 11px}
}
@media (max-width:360px){.rail .pill.hb{padding:0 9px}.rail .mark img{height:26px}}
/* Laptops and tablets: the stop-page, Door and Help rows hugged the left edge while their heading sat
   in the centred column. The rows are links, and "a.sp-row:link" outranks the plain ".sp-row" the
   centring rules used, so the centring never applied. The same rules, at the link's strength. */
@media (min-width:600px){
  a.sp-row:link,a.sp-row:visited,a.sp-all:link,a.sp-all:visited{padding-left:calc((100% - 560px) / 2 + 20px);padding-right:calc((100% - 560px) / 2 + 20px)}
}
@media (min-width:900px){
  a.sp-row:link,a.sp-row:visited,a.sp-all:link,a.sp-all:visited{padding-left:calc((100% - 640px) / 2 + 24px);padding-right:calc((100% - 640px) / 2 + 24px)}
}
/* "Before you call" sat at the left edge under the centred Call button: as an inline box, the
   centring margin did nothing. As a block it sits in the same centred column. */
.sp-tel .under{display:flex;width:auto}
/* On a tablet (768 to 899) the lesson's photo band set its title at the screen edge while the lesson
   below sits in the centred 640 column; the band now lines up with the lesson from 768. */
@media (min-width:768px){
  .ls-band figcaption{left:max(24px,calc((100% - 640px) / 2 + 24px))}
}
/* The stop heading, the Call block and the Setup block sat 16 to 20px in from the rows under them:
   their column was 560 wide while the rows' text column is 520 (600 to 899) or 592 (900 and up).
   Same column now, so the heading, the call button and every row start on one left edge. */
@media (min-width:600px) and (max-width:899px){
  .sp-lead > *,.sp-lead > .search,.sp-tel > *,.sp-setup > *{max-width:520px}
}
@media (min-width:900px){
  .sp-lead > *,.sp-lead > .search,.sp-tel > *,.sp-setup > *{max-width:592px}
}
/* The home on a tablet: the hero's text started 20px left of the photo bands under it. */
@media (min-width:600px) and (max-width:899px){.hm-in{max-width:520px}}
/* The home on a laptop: the hero text sat in a centred 640 column that lined up with neither home
   column; "Training" started 20px below "The job and Setup"; and the short right column ended long
   before the left one, leaving an empty block. The hero now starts on the Training column's edge, both
   column headings sit on one line, and the right column stays in view while the Training column
   scrolls past it. */
@media (min-width:900px){
  .hm-in{max-width:1180px;padding-left:24px;padding-right:24px}
  .hm-in > *{max-width:602px}
  .hm-col.beside .section-h{padding-top:32px}
}
/* Search with no results: the line sat flush against the screen edge inside the edge-to-edge list. */
.hits .nohit{padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}
/* The five setup steps on a phone: the labels sit in five narrow columns and could not wrap, so long
   Spanish ones ran into each other ("YubiKeyHerramientas"). They wrap and hyphenate inside their own
   column now (the page carries lang="es" in Spanish, so the break falls in the right place). */
.strand .node-l{white-space:normal;text-align:center;line-height:1.15;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;max-width:100%}
/* Stop pages on a phone: Back, the logo, the stop name, Help and the language pill shared one row,
   leaving the stop name a few letters ("Ho...", "Setu"). There, the logo steps aside (the big plate
   below carries the stop and the brand), and a long single word ends in an ellipsis instead of being
   cut mid-letter. */
@media (max-width:480px){.rail.back .mark{display:none}}
.rail .where.end{overflow-wrap:anywhere}

/* Phones: the miss note in the bottom bar is held to a few lines (it scrolls inside), so the bar never
   covers more than a sliver of the answers above it. */
@media (max-width:599px){.foot .ffb .fb{max-height:min(20vh,128px);max-height:min(20dvh,128px)}}
/* The right home column stays in view only where it fits: on a short laptop window it would be cut
   off at the bottom while stuck, so there it scrolls with the page. */
@media (min-width:900px) and (min-height:760px){.hm-col.beside{position:sticky;top:calc(var(--rail-h) + 8px)}}
/* Reviewer, round two, at 768: the plate title, the search box on Door and Help, and the Setup step
   strip still started at the screen edge or 20px off the rows. Same column as the rows now, and the
   navy Setup plate's text matches the rows at laptop width too. */
.sp-lead .search,.sp-setup > .strand{margin-left:auto;margin-right:auto}
@media (min-width:600px) and (max-width:899px){
  .sp-plate .text{left:calc((100% - 560px) / 2 + 20px);max-width:520px}
  .sp-plate.navy .text{left:auto;max-width:520px}
}
@media (min-width:900px){.sp-plate.navy .text{max-width:592px}}