/* ============================================================
   CoVince Explainer Engine - design layer
   One stylesheet for every feature explainer.
   Themes: light (default), dark, high-contrast.
   Text size: 3 steps (--ui-scale). Everything sizes off tokens.
   ============================================================ */

:root{
  /* brand - used sparingly, the way a calm product page uses colour */
  --brand:#0a7d43;
  --brand-2:#12a150;
  --brand-3:#8ff0b4;
  --brand-ink:#ffffff;

  /* surfaces: near-white page, pure white cards, hairline rules */
  --bg:#fbfbfd;
  --bg-2:#f5f5f7;
  --panel:#ffffff;
  --panel-2:#f5f5f7;
  --line:rgba(0,0,0,.09);
  --line-2:rgba(0,0,0,.16);
  --text:#1d1d1f;
  --text-2:#424245;
  --muted:#6e6e73;
  --soft:rgba(10,125,67,.07);
  --soft-line:rgba(10,125,67,.22);
  --shadow:0 2px 10px rgba(0,0,0,.05), 0 12px 34px -20px rgba(0,0,0,.28);
  --shadow-lg:0 4px 18px rgba(0,0,0,.06), 0 30px 70px -34px rgba(0,0,0,.4);

  /* status */
  --ok:#0a7d43;
  --warn:#8a5a00;
  --warn-soft:rgba(212,160,42,.13);
  --danger:#b3271a;
  --danger-soft:rgba(179,39,26,.09);
  --info:#12559f;
  --info-soft:rgba(18,85,159,.08);

  /* geometry: bigger radii, pill buttons, generous rhythm */
  --radius:22px;
  --radius-s:14px;
  --radius-l:30px;
  --pill:980px;
  --maxw:1620px;
  --ui-scale:1;           /* 1 | 1.18 | 1.4 - Normal / Bigger / Biggest letters */
  --base:calc(17px * var(--ui-scale));
  --gap:clamp(18px, 2.4vw, 32px);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable Text","Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
}

html[data-theme="dark"]{
  --bg:#000000;
  --bg-2:#0b0b0d;
  --panel:#1c1c1e;
  --panel-2:#2c2c2e;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);
  --text:#f5f5f7;
  --text-2:#d6d6da;
  --muted:#a1a1a6;
  --soft:rgba(52,209,122,.13);
  --soft-line:rgba(52,209,122,.32);
  --shadow:0 2px 10px rgba(0,0,0,.6), 0 18px 50px -26px rgba(0,0,0,.9);
  --shadow-lg:0 6px 22px rgba(0,0,0,.7), 0 40px 90px -34px rgba(0,0,0,.95);
  --brand:#34d17a;
  --brand-2:#34d17a;
  --brand-ink:#04180d;
  --ok:#34d17a;
  --warn:#e8b14a;
  --warn-soft:rgba(232,177,74,.13);
  --danger:#ff8f81;
  --danger-soft:rgba(255,143,129,.12);
  --info:#8cc0ff;
  --info-soft:rgba(140,192,255,.11);
}

html[data-contrast="high"]{
  --bg:#ffffff; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#ffffff;
  --text:#000000; --text-2:#111111; --muted:#222222;
  --line:#000000; --line-2:#000000;
  --brand:#00591f; --brand-2:#00591f; --soft:#e8f5ee; --soft-line:#00591f;
  --shadow:none; --shadow-lg:none;
}
html[data-contrast="high"] .card,
html[data-contrast="high"] .panel,
html[data-contrast="high"] .step,
html[data-contrast="high"] .skill{border-width:2px}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(96px * var(--ui-scale))}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
/* the size lives on the ROOT, so every rem on the page grows with it -
   captions, chips and the step list used to stay small at A++ */
html{font-size:var(--base)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);
  font-size:1rem;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:var(--brand);text-underline-offset:3px}
button{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.08;margin:0;font-weight:700;letter-spacing:-.022em}
h1{font-size:clamp(2.5rem,1.6rem + 2.6vw,4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.8rem,1.3rem + 1.4vw,2.6rem);letter-spacing:-.026em}
h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.6rem)}
p{margin:0 0 .85em}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-lg{width:1.7em;height:1.7em}
.hidden{display:none !important}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:14px;min-height:calc(64px * var(--ui-scale));flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.02rem;letter-spacing:.1px;text-decoration:none;color:var(--text);min-height:44px}
.brand .mark{width:2em;height:2em;border-radius:.6em;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));box-shadow:0 8px 20px -8px rgba(18,161,80,.7)}
.brand small{display:block;font-weight:600;font-size:.72rem;color:var(--muted);letter-spacing:.2px}
.toolbar{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tool{
  display:inline-flex;align-items:center;gap:7px;padding:.5em .95em;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:.9rem;font-weight:600;
  letter-spacing:-.01em;transition:.18s cubic-bezier(.2,.7,.3,1);min-height:2.8em;
}
.tool:hover{border-color:var(--line-2);background:var(--bg-2)}
.tool:active{transform:scale(.985)}
.tool[aria-pressed="true"]{background:var(--soft);border-color:var(--soft-line);color:var(--brand)}
.tool-group{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--radius-s);overflow:hidden;background:var(--panel)}
.tool-group .tool{border:0;border-radius:0;min-width:2.9em;justify-content:center}
.tool-group .tool+.tool{border-left:1px solid var(--line)}
@media(max-width:860px){ .tool-label{display:none} .tool{padding:.5em .7em} }
/* phone: one row that slides, instead of two rows of buttons eating the screen */
@media(max-width:700px){
  .topbar .wrap{flex-wrap:nowrap;gap:10px;min-width:0;overflow:hidden}
  .brand{flex:none}
  .brand small{display:none}
  .brand span:not(.mark){font-size:.95rem}
  .toolbar{flex-wrap:nowrap;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .toolbar::-webkit-scrollbar{display:none}
  .tool,.tool-group{flex:none}
}

/* the panel behind "How it looks" - every setting with a word next to it */
.view-sheet{border-bottom:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.view-sheet[hidden]{display:none}
.view-sheet .wrap{display:flex;gap:clamp(18px,4vw,50px);flex-wrap:wrap;padding-top:18px;padding-bottom:20px}
.view-group{display:flex;flex-direction:column;gap:10px;min-width:210px}
.view-group h4{margin:0 0 2px;font-size:.8rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted)}
.view-opt{display:flex;align-items:center;gap:12px;padding:.7em 1em;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--panel);font-weight:700;min-height:52px;text-align:left;
  transition:.15s}
.view-opt:hover{border-color:var(--soft-line);background:var(--soft)}
.view-opt[aria-pressed="true"]{border-color:var(--brand);background:var(--soft);color:var(--brand)}
.view-opt .icon{width:1.5em;height:1.5em}

/* ---------------- hero ---------------- */
/* overflow:hidden keeps the glow from widening the document by 20vw */
.hero{padding:clamp(28px,5vw,64px) 0 clamp(20px,3vw,34px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-10% -20% auto -20%;height:520px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 60% at 20% 20%,var(--soft),transparent 70%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;color:var(--brand);
  background:var(--soft);border:1px solid var(--soft-line);padding:.42em .85em;border-radius:99px;margin-bottom:1em}
.pill .dot{width:.55em;height:.55em;border-radius:50%;background:var(--brand);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero .lede{font-size:1.16rem;color:var(--text-2);max-width:60ch}
.facts{margin:1.1em 0 1.4em;color:var(--muted);font-size:1rem;font-weight:500}
.sep{opacity:.45;margin:0 .55em}

/* the "nothing can go wrong" line: reading size, dark text, above the button */
.safe-note{display:flex;gap:11px;align-items:flex-start;max-width:56ch;margin:0 0 1.6em;
  padding:0;background:transparent;border:0;color:var(--text-2);font-size:1rem;font-weight:500;line-height:1.5}
.safe-note .icon{color:var(--brand);margin-top:.15em;width:1.4em;height:1.4em}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:.6em}
.cta-plain{display:inline-flex;align-items:center;gap:9px;font-weight:600;text-decoration:none;color:var(--text-2);
  min-height:3em;padding:0 .3em}
.cta-plain:hover{color:var(--brand)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-weight:750;
  padding:.78em 1.5em;border-radius:var(--pill);border:1px solid transparent;transition:.2s cubic-bezier(.2,.7,.3,1);
  text-decoration:none;min-height:3em;font-size:1rem;letter-spacing:-.01em}
.btn-primary{background:var(--brand);color:var(--brand-ink);box-shadow:none}
.btn-primary:hover{background:var(--brand-2);transform:none}
.btn-primary:active{transform:scale(.985)}
.btn-ghost{background:var(--panel);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--soft-line);background:var(--soft)}
.btn-big{font-size:1.08rem;padding:1em 1.6em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.hero-media-col{display:flex;flex-direction:column;gap:14px}
.hero-media-col .stage-cap{margin:0;padding:0 .2em}
.hero-media{position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line);
  background:var(--panel);box-shadow:var(--shadow-lg);line-height:0}
@media(min-width:1000px){.hero-grid{grid-template-columns:1fr 1.12fr}}
.hero-media .stage{border:0;border-radius:0;aspect-ratio:1760/900;box-shadow:none}


/* phone: title, promise, button - the facts move under the button so the
   green button is on the first screen, not below a wall of chips */
@media(max-width:700px){
  .hero-text{display:flex;flex-direction:column}
  .hero-text .pill{order:1}
  .hero-text h1{order:2}
  .hero-text .lede{order:3}
  .hero-text .safe-note{order:4;margin-bottom:1em}
  .hero-text .cta-row{order:5}
  .hero-text .facts{order:6;margin-top:1.2em;margin-bottom:0}
  .cta-row .btn{width:100%}
}

/* ---------------- layout ---------------- */
.layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;
  padding-bottom:90px}
@media(max-width:1060px){.layout{grid-template-columns:1fr}}
.side{position:sticky;top:calc(84px * var(--ui-scale));max-height:calc(100vh - 110px);overflow:auto;padding-right:6px}
@media(max-width:1060px){.side{display:none}}
.side h4{font-size:.8rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:0 0 .8em}
.progress-ring{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-bottom:18px}
.progress-ring .ring{width:3.3rem;height:3.3rem;flex:none}
/* the track must stay visible against the arc in every theme - in extra
   contrast a var(--line) track went pure black and the arc vanished */
.ring-track{stroke:color-mix(in srgb,var(--text) 16%,transparent)}
html[data-contrast="high"] .ring-track{stroke:#bbbbbb}
.side-note{font-size:.85rem;color:var(--muted);margin:.6em 0 0;line-height:1.45}
.progress-ring b{display:block;font-size:1.02rem}
.progress-ring span{font-size:.85rem;color:var(--muted)}
.toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.toc a{display:flex;gap:10px;align-items:center;padding:.55em .7em;border-radius:10px;text-decoration:none;
  color:var(--text-2);font-size:.95rem;font-weight:600;border:1px solid transparent}
.toc a:hover{background:var(--panel);border-color:var(--line)}
.toc a.active{background:var(--soft);border-color:var(--soft-line);color:var(--brand)}
.toc .num{width:1.9em;height:1.9em;flex:none;border-radius:50%;border:1.5px solid var(--line-2);display:grid;
  place-items:center;font-size:.78rem;font-weight:800}
.toc a.done .num{background:var(--brand);border-color:var(--brand);color:#fff}
.toc a.active .num{border-color:var(--brand);color:var(--brand)}
.toc a.done.active .num{color:#fff}

/* ---------------- sections & cards ---------------- */
section{scroll-margin-top:calc(92px * var(--ui-scale))}
.sec-head{margin:clamp(34px,5vw,64px) 0 clamp(16px,2vw,26px)}
.sec-head .kicker{font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--muted);margin-bottom:.55em}
.sec-head p{color:var(--text-2);max-width:70ch;margin-top:.6em}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.fact,.tag{letter-spacing:-.01em}
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

.outcome{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);box-shadow:none}
.outcome .ic{width:2.4em;height:2.4em;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--bg-2);color:var(--brand)}
.outcome b{display:block;margin-bottom:.15em}
.outcome span{color:var(--text-2);font-size:.95rem}

/* ---------------- step cards ---------------- */
.steps{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.step{position:relative;overflow:hidden;scroll-margin-top:calc(96px * var(--ui-scale))}
.step .bar{display:none}
.step-in{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column}
.step-head{display:flex;gap:clamp(14px,2vw,24px);align-items:flex-start;flex-wrap:nowrap}
.step-num{flex:none;font-size:2.6rem;line-height:1;font-weight:700;letter-spacing:-.04em;
  color:var(--line-2);min-width:1.5em;font-variant-numeric:tabular-nums}
.step.done .step-num{color:var(--brand)}
.step-title{flex:1 1 260px;min-width:0}
.step-title h3{font-size:clamp(1.4rem,1.15rem + .8vw,2rem)}
.step-title .goal{color:var(--text-2);margin:.5em 0 0;font-size:1.05rem;max-width:60ch}
.step-meta{display:flex;align-items:center;flex-wrap:wrap;margin:.6em 0 0;color:var(--muted);font-size:.95rem}
.step-meta .linkbtn{margin-left:.9em;opacity:0;transition:opacity .15s;border:0;background:transparent;
  color:var(--muted);cursor:pointer;padding:.35em;border-radius:50%;min-width:40px;min-height:40px;
  display:inline-grid;place-items:center}
.step:hover .step-meta .linkbtn,.step-meta .linkbtn:focus-visible{opacity:1}
.step-meta .linkbtn:hover{color:var(--brand);background:var(--bg-2)}
@media(hover:none){.step-meta .linkbtn{opacity:.5}}
.tag{font-size:.82rem;font-weight:600;padding:.3em .8em;border-radius:var(--pill);border:1px solid var(--line);
  color:var(--muted);display:inline-flex;align-items:center;gap:6px}

/* THE SCREEN COMES FIRST AND IT IS BIG.
   A step is: the picture of the screen, full width, then what to do under it.
   A screenshot squeezed into a side column shows nothing you can act on. */
.step-body{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px);margin-top:clamp(18px,2.2vw,28px)}
.step-body .media-col{order:-1;width:auto;
  /* break out of the card padding: the screenshot touches both edges */
  margin-left:calc(-1 * clamp(22px,3vw,40px));
  margin-right:calc(-1 * clamp(22px,3vw,40px))}
.step-body .media-col .stage{border-radius:0;border-left:0;border-right:0;box-shadow:none}
.step-body .media-col .stage-cap,
.step-body .media-col .hot-legend{padding-left:clamp(22px,3vw,40px);padding-right:clamp(22px,3vw,40px)}
.step-body .text-col{max-width:74ch}

/* the old two-column look, for a step whose picture is a small detail:
   set  mediaLayout: 'side'  on the step */
.step-body.side{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
.step-body.side .media-col{order:0}
@media(max-width:900px){
  .step-body.side{display:flex}
  .step-body.side .media-col{order:-1}
}

.do-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.do-list li{display:flex;gap:12px;align-items:flex-start;line-height:1.55}
.do-list .mk{width:1.7em;height:1.7em;flex:none;border-radius:50%;background:var(--soft);color:var(--brand);
  display:grid;place-items:center;font-size:.78rem;font-weight:800;border:1px solid var(--soft-line);margin-top:.12em}
.do-list kbd{font:inherit;font-size:.86em;font-weight:700;background:var(--panel-2);border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:7px;padding:.1em .45em}
.ui-name{font-weight:750;color:var(--text);background:var(--soft);border:1px solid var(--soft-line);
  border-radius:7px;padding:.05em .4em}

.note{display:flex;gap:12px;padding:2px 0 2px 16px;margin-top:20px;border-left:2px solid var(--line-2);
  background:transparent;border-radius:0;font-size:1rem;color:var(--text-2)}
.note .icon{margin-top:.15em;flex:none}
.note b{display:block;color:var(--text)}
.note.tip{border-left-color:var(--brand)}
.note.tip .icon{color:var(--brand)}
.note.warn{border-left-color:var(--warn)}
.note.warn .icon{color:var(--warn)}
.note.info{border-left-color:var(--info)}
.note.info .icon{color:var(--info)}

.step-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.step-open{font-size:.95rem;padding:.6em 1.2em;min-height:3em}
.step-open .icon{color:var(--brand)}
.tick{display:inline-flex;align-items:center;gap:11px;cursor:pointer;font-weight:600;padding:.6em 1.25em;
  border-radius:var(--pill);border:1px solid var(--line-2);background:var(--panel);min-height:3em;transition:.16s}
.tick:hover{border-color:var(--soft-line);background:var(--soft)}
.tick .box{width:1.5em;height:1.5em;border-radius:7px;border:2px solid var(--line-2);display:grid;place-items:center;
  color:transparent;transition:.16s}
.tick[aria-pressed="true"]{border-color:var(--brand);background:var(--soft);color:var(--brand)}
.tick[aria-pressed="true"] .box{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------------- media stage ---------------- */
.stage{position:relative;border-radius:var(--radius-l);overflow:hidden;background:var(--panel-2);
  border:1px solid var(--line);aspect-ratio:16/10;box-shadow:var(--shadow-lg)}
.step-body:not(.side) .stage{aspect-ratio:1760/900}
.stage>img{object-fit:cover;object-position:top center}

.stage>img,.stage>video{width:100%;height:100%;object-fit:cover;background:var(--panel-2)}
.stage>img{cursor:zoom-in}
.stage.fit>img,.stage.fit>video{object-fit:contain}
.stage-cap{font-size:.95rem;color:var(--muted);margin-top:.85em;display:flex;gap:9px;align-items:flex-start;
  max-width:72ch;line-height:1.5}
.stage-cap .icon{flex:none;margin-top:.15em}
.zoom-btn{position:absolute;right:10px;bottom:10px;z-index:3;border-radius:11px;border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(6px);padding:.5em .75em;cursor:pointer;
  display:inline-flex;gap:7px;align-items:center;font-size:.85rem;font-weight:700;min-height:42px}
.zoom-btn:hover{background:var(--panel)}

.vid-play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;z-index:2}
.vid-play .disc{width:clamp(64px,9vw,92px);height:clamp(64px,9vw,92px);border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#04180d;box-shadow:0 20px 44px -14px rgba(0,0,0,.6);
  transition:.18s ease}
.vid-play:hover .disc{transform:scale(1.07)}
.vid-play .disc svg{width:38%;height:38%;fill:currentColor;stroke:none}
.vid-play .lbl{position:absolute;bottom:14px;left:14px;font-weight:750;font-size:.9rem;background:rgba(0,0,0,.62);
  color:#fff;border-radius:10px;padding:.35em .7em}
.vid-load{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.65));
  color:#fff;font-size:.85rem;font-weight:700;display:none;gap:10px;align-items:center}
.vid-load.on{display:flex}
.vid-load .track{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}
.vid-load .fill{height:100%;width:0;background:var(--brand-2);border-radius:99px;transition:width .25s ease}

/* THE RING IS CENTRED ON THE THING IT POINTS AT.
   The label hangs off the side without moving it - when the ring and the label
   were one flex row, the row's centre landed on the point and every ring sat
   too far left (note session 2026-09-19). */
.hot{position:absolute;z-index:4;transform:translate(-50%,-50%);width:46px;height:46px;
  background:transparent;border:0;padding:0;cursor:pointer;display:block}
.hot>*{pointer-events:none}
.hot .ring{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  border:3px solid var(--brand);color:var(--brand);font-weight:800;font-size:1rem;
  background:#ffffff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent), 0 10px 26px -10px rgba(0,0,0,.55)}
.hot .ring::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:3px solid var(--brand);opacity:.65;animation:ping 2.2s cubic-bezier(.2,.7,.4,1) infinite}
@keyframes ping{0%{transform:scale(.85);opacity:.7}80%{transform:scale(1.5);opacity:0}100%{opacity:0}}
/* the label: always there, so nothing has to be clicked to be understood */
/* solid green, white text: a white pill on a light screenshot was unreadable
   (note session 2026-09-19: "white on white not good readable") */
.hot .tag{position:absolute;top:50%;left:calc(100% + 12px);transform:translateY(-50%);
  font-size:.92rem;font-weight:700;line-height:1.25;color:var(--brand-ink);text-align:left;
  background:var(--brand);border:2px solid var(--brand);border-radius:var(--pill);padding:.45em 1em;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.55);white-space:nowrap;max-width:min(240px,34vw);
  overflow:hidden;text-overflow:ellipsis}
.hot.flip .tag{left:auto;right:calc(100% + 12px);text-align:right}
.hot:hover .ring{background:color-mix(in srgb,var(--brand) 16%,#fff)}
.hot:hover .tag{background:var(--brand-2);border-color:var(--brand-2)}
.hot[aria-expanded="true"] .ring{background:var(--brand);color:#fff}
@media(max-width:700px){ .hot .tag{display:none} }

.hot-pop{position:absolute;z-index:5;width:min(320px,70%);background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-lg);font-size:.95rem;line-height:1.45;
  transform:translate(-50%,0)}
.hot-pop.up{transform:translate(-50%,-100%)}
.hot-pop b{display:block;margin-bottom:.15em}

/* what the dots say, written out under the picture: readable, printable,
   and reachable without hitting a small circle on a photo */
.hot-legend{list-style:none;margin:.9em 0 0;padding:0;display:flex;flex-direction:column;gap:2px;max-width:72ch}
.hot-go{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:transparent;
  border:0;border-radius:12px;padding:.45em .5em;cursor:pointer;font-size:.98rem;color:var(--text-2);min-height:44px}
.hot-go:hover{background:var(--bg-2);color:var(--text)}
.hot-go .n{width:1.7em;height:1.7em;flex:none;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:.78rem;font-weight:800;margin-top:.1em}
.hot-go b{color:var(--text)}

/* the drawn screen: made to be read at full width, not a grey placeholder */
.mock{position:absolute;inset:0;background:var(--panel);display:flex;flex-direction:column;
  font-size:calc(.86rem + .12vw)}
.mock-bar{height:2.8em;flex:none;display:flex;align-items:center;gap:7px;padding:0 14px;
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.mock-bar i{width:.7em;height:.7em;border-radius:50%;background:var(--line-2);display:block;opacity:.7}
.mock-bar .t{margin-left:12px;font-size:.88em;color:var(--muted);font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-body{flex:1;display:grid;grid-template-columns:minmax(150px,26%) 1fr;min-height:0}
.mock-side{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px;
  background:var(--bg-2);min-width:0}
.mock-brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.015em;
  margin-bottom:12px;padding:0 6px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-brand .mk{width:1.55em;height:1.55em;border-radius:.5em;background:var(--brand);flex:none}
.mock-nav{display:flex;align-items:center;gap:9px;padding:.5em .6em;border-radius:10px;color:var(--text-2);
  min-width:0;font-weight:550}
.mock-nav .sq{width:.5em;height:.5em;border-radius:3px;background:var(--line-2);flex:none}
.mock-nav .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-nav.on{background:var(--soft);color:var(--brand);font-weight:700}
.mock-nav.on .sq{background:var(--brand)}
.mock-main{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mock-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mock-head .h{font-weight:700;font-size:1.15em;letter-spacing:-.02em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.mock-rows{display:flex;flex-direction:column;gap:8px;min-width:0}
.mock-line{display:flex;align-items:center;gap:10px;padding:.6em .8em;border-radius:12px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text-2);min-width:0}
.mock-line .dot{width:.55em;height:.55em;border-radius:50%;background:var(--line-2);flex:none}
.mock-line .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-line .st{font-size:.8em;font-weight:700;color:var(--muted);flex:none}
.mock-line.on{background:var(--soft);border-color:var(--soft-line);color:var(--text);font-weight:650}
.mock-line.on .dot{background:var(--brand)}
.mock-line .st-on{color:var(--brand)}
.mock-line.done .dot{background:var(--ok)}
.mock-line.wait .dot{background:var(--warn)}
.mock-line .st-wait{color:var(--warn)}
.mock-chip{height:2.1em;border-radius:12px;background:var(--soft);border:1px solid var(--soft-line)}
.mock-row{height:.85em;border-radius:6px;background:var(--line);opacity:.85}
.mock-row.w-70{width:70%}.mock-row.w-50{width:50%}.mock-row.w-85{width:85%}.mock-row.w-40{width:40%}
.mock-btn{flex:none;padding:.55em 1.1em;border-radius:var(--pill);font-size:.9em;font-weight:650;
  background:var(--brand);color:var(--brand-ink);white-space:nowrap}
.mock-note{flex:none;text-align:center;color:var(--muted);font-size:.8em;font-weight:600;
  padding:.5em .8em;background:var(--bg-2);border-top:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------- focus (wizard) mode ---------------- */
body.focus .hero,body.focus .side,body.focus .sec-extra,
body.focus #steps>.sec-head{display:none}      /* in focus mode: the step, nothing else */
/* the sidebar is gone, so the grid must stop reserving its column -
   without this the step card is squeezed into 288px */
body.focus .layout{grid-template-columns:minmax(0,1fr);max-width:1000px;margin-inline:auto}
.focusbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:12px;align-items:center;
  padding:12px clamp(12px,3vw,26px);background:var(--panel);
  border-top:1px solid var(--line);box-shadow:0 -14px 34px -22px rgba(0,0,0,.5)}
body.focus .focusbar{display:flex}
.focusbar .btn{flex:none;padding:.8em 1.1em}
.focusbar .mid{flex:1;min-width:0;text-align:center}
.focusbar .mid b{display:block;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.focusbar .mid span{font-size:.82rem;color:var(--muted)}
.focusbar .track{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
.focusbar .fill{height:100%;width:0;background:linear-gradient(90deg,var(--brand-2),var(--brand));border-radius:99px;transition:width .3s ease}
body.focus{padding-bottom:120px}
body.focus .step{display:none}
body.focus .step.current{display:block}
body.focus .steps{gap:0}

/* ---------------- skills / gallery ---------------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{padding:.5em 1.1em;border-radius:var(--pill);border:1px solid var(--line);background:var(--panel);cursor:pointer;
  font-weight:600;font-size:.92rem;min-height:2.8em;transition:.16s}
.chip:hover{background:var(--bg-2)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.skill{padding:20px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
  transition:.18s ease}
.skill:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.skill .ic{width:2.4em;height:2.4em;border-radius:12px;display:grid;place-items:center;background:var(--bg-2);
  color:var(--brand);margin-bottom:1em}
.skill b{display:block;font-size:1.05rem;margin-bottom:.3em}
.skill p{color:var(--text-2);font-size:.95rem;margin:0}
.skill .say{margin-top:.9em;font-size:.9rem;color:var(--muted);border-left:3px solid var(--soft-line);padding-left:10px}

/* ---------------- accordion ---------------- */
.acc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.acc+.acc{margin-top:12px}
.acc>button{width:100%;display:flex;gap:12px;align-items:center;text-align:left;padding:1em 1.1em;background:transparent;
  border:0;cursor:pointer;font-weight:750;min-height:3.4em}
.acc>button .chev{margin-left:auto;transition:transform .2s ease;color:var(--muted)}
.acc>button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc .body{padding:0 1.1em 1.1em 1.1em;color:var(--text-2)}
.acc .body[hidden]{display:none}

/* ---------------- quiz ---------------- */
.quiz{padding:clamp(20px,3vw,32px);border-radius:var(--radius-l);border:1px solid var(--soft-line);
  background:linear-gradient(160deg,var(--soft),transparent 60%),var(--panel);box-shadow:var(--shadow-lg)}
.q+.q{margin-top:26px;padding-top:24px;border-top:1px dashed var(--line)}
.q p.ask{font-weight:800;font-size:1.08rem;margin-bottom:.8em}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:.85em 1em;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--panel);font-weight:650;min-height:3.2em;transition:.15s;width:100%}
.opt:hover{border-color:var(--soft-line);background:var(--soft)}
.opt .mk{width:1.7em;height:1.7em;flex:none;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;
  font-size:.8rem;font-weight:800;color:var(--muted)}
.opt.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--panel))}
.opt.right .mk{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--danger);background:var(--danger-soft)}
.opt.wrong .mk{background:var(--danger);border-color:var(--danger);color:#fff}
.q .why{margin-top:12px;font-size:.95rem;color:var(--text-2);display:none}
.q .why.on{display:block}
.quiz-score{margin-top:24px;font-weight:800;font-size:1.1rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* glossary */
.term{border:0;border-bottom:2px dotted var(--brand);cursor:help;font-weight:650;background:none;
  padding:.2em .2em;margin:0 -.1em;line-height:inherit;font:inherit;color:inherit}
.term:hover{background:var(--soft)}
.tip-pop{position:fixed;z-index:90;max-width:min(330px,86vw);background:var(--panel);border:1px solid var(--line-2);
  border-radius:14px;padding:13px 15px;box-shadow:var(--shadow-lg);font-size:.94rem;line-height:1.5}
.tip-pop b{display:block;color:var(--brand);margin-bottom:.2em}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(4,12,8,.88);display:none;place-items:center;padding:24px}
.lightbox.on{display:grid}
.lightbox img,.lightbox video{max-width:min(1200px,94vw);max-height:86vh;border-radius:14px;box-shadow:var(--shadow-lg);
  width:auto;height:auto;object-fit:contain}
.lightbox .x{position:absolute;top:18px;right:18px;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;
  padding:.6em .9em;cursor:pointer;font-weight:750;display:flex;gap:8px;align-items:center;min-height:3em}

.next-card{display:flex;gap:14px;align-items:center;padding:18px 20px;border-radius:var(--radius);background:var(--panel);
  border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:.17s}
.next-card:hover{transform:translateY(-3px);border-color:var(--soft-line);box-shadow:var(--shadow-lg)}
.next-card .ic{width:2.6em;height:2.6em;border-radius:14px;display:grid;place-items:center;background:var(--soft);
  color:var(--brand);border:1px solid var(--soft-line);flex:none}
.next-card b{display:block}
.next-card span{color:var(--muted);font-size:.92rem}

footer{border-top:1px solid var(--line);margin-top:60px;padding:28px 0 46px;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 .2em;font-weight:700}

.toast{position:fixed;right:24px;left:auto;bottom:26px;transform:translate(0,160%);z-index:120;background:var(--text);
  color:var(--bg);padding:.85em 1.2em;border-radius:14px;font-weight:700;box-shadow:var(--shadow-lg);
  transition:transform .28s ease,opacity .2s ease,visibility .2s;
  display:flex;gap:10px;align-items:center;max-width:90vw;opacity:0;visibility:hidden}
.toast.on{transform:translate(0,0);opacity:1;visibility:visible}
body.focus .toast{bottom:104px}

.speaking{background:color-mix(in srgb,var(--brand) 18%,transparent);border-radius:8px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}

/* ---------------- search ---------------- */
.search-lay{position:fixed;inset:0;z-index:110;background:rgba(4,12,8,.55);backdrop-filter:blur(4px);
  display:flex;justify-content:center;align-items:flex-start;padding:clamp(12px,8vh,110px) 16px 16px}
.search-lay[hidden]{display:none}
.search-box{width:min(680px,100%);background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-l);
  box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:min(70vh,640px)}
.search-in{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.search-in .icon{color:var(--brand);width:1.5em;height:1.5em}
.search-in input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.1rem;color:var(--text);
  padding:.4em 0;outline:none}
.search-in input::-webkit-search-cancel-button,
.search-in input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.search-res{overflow:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
.hit{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:.75em .85em;border-radius:12px;
  border:1px solid transparent;background:transparent;cursor:pointer;min-height:3em}
.hit:hover,.hit.on{background:var(--soft);border-color:var(--soft-line)}
.hit>.icon{color:var(--brand);margin-top:.15em}
.hit-t{flex:1;min-width:0}
.hit-t b{display:block;font-weight:750;line-height:1.35}
.hit-t span{display:block;font-size:.88rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hit-k{flex:none;font-size:.75rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:.25em .6em;margin-top:.1em}
.hit mark,.search-res mark{background:color-mix(in srgb,var(--brand) 30%,transparent);color:inherit;border-radius:4px;padding:0 .1em}
.search-hint{display:flex;gap:12px;padding:20px;color:var(--muted);font-size:.95rem}
.search-hint .icon{color:var(--brand);flex:none}
.search-foot{border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:10px;align-items:center;
  font-size:.82rem;color:var(--muted);background:var(--panel-2)}
.search-foot kbd{font:inherit;font-size:.9em;font-weight:700;background:var(--panel);border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:6px;padding:.05em .4em}
@media(max-width:640px){.search-foot{display:none}.hit-k{display:none}}

/* copy-a-link buttons */
.linkbtn{background:transparent;cursor:pointer;color:var(--muted);transition:.15s;min-height:40px}
.linkbtn.icon-only{min-width:40px;justify-content:center;padding:.3em .5em}
.linkbtn:hover{color:var(--brand);border-color:var(--soft-line);background:var(--soft)}

/* the thing a link points at lights up on arrival */
@keyframes flashIn{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}
  25%{box-shadow:0 0 0 8px color-mix(in srgb,var(--brand) 22%,transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
.flash{animation:flashIn 2.2s ease-out;border-color:var(--brand) !important}

/* ---------------- print ---------------- */
@media print{
  :root{--ui-scale:1}
  .topbar,.focusbar,.side,.toolbar,.zoom-btn,.vid-play,.hot,.toast,.filters,.no-print,
  .search-lay,.linkbtn,.tick,[data-read]{display:none !important}
  body{background:#fff;color:#000;font-size:11.5pt;padding-bottom:0}
  body.focus .step{display:block}
  .layout{grid-template-columns:1fr;padding-bottom:0}
  .card,.step,.skill,.acc,.quiz{box-shadow:none;border:1px solid #bbb;break-inside:avoid}
  .step{page-break-inside:avoid}
  .stage{aspect-ratio:16/10}
  .acc .body[hidden]{display:block !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .hero::before{display:none}
}