/* ══════════════════════════════════════════════════════════════
   ALM ACADEMY 2.0
   Built to Keith's two mockups (Browse and the Vault lesson,
   2026-09-22). Same petrol green, mint and Archivo as the Vault
   site, with the mockups' softer panels: rounded corners, a faint
   mint wash at the top of the page, thin mint borders.
   ══════════════════════════════════════════════════════════════ */

:root{
  --field:      #03211C;
  --field-deep: #01100D;
  --rail-bg:    #021A16;
  --panel:      #052B24;
  --panel-hi:   #073830;
  --rule:       #0E4A3F;
  --rule-soft:  #0A3A31;
  --rule-mint:  rgba(151,252,228,.22);

  --mint:      #97FCE4;
  --mint-deep: #50D2C1;
  --mint-dim:  rgba(151,252,228,.11);

  --ink:   #EAF6F2;
  --ink-2: #9DBAB2;
  --ink-3: #62877F;

  --red:     #FF8F80;
  --red-dim: rgba(255,143,128,.12);

  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, monospace;
  --hand: "Shadows Into Light", "Bradley Hand", cursive;
  --ease: cubic-bezier(.16,1,.3,1);

  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;

  --rail: 232px;
  --top:  68px;
  --pad:  clamp(16px, 3vw, 44px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100dvh;
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  background:
    radial-gradient(900px 420px at 62% -120px, rgba(80,210,193,.16), transparent 70%),
    var(--field);
  color:var(--ink);
  font-family:var(--sans);
  font-variation-settings:"wdth" 100;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; line-height:1.1; letter-spacing:-.015em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:0; z-index:90; background:var(--mint); color:var(--field-deep); padding:.75rem 1.25rem; font-weight:700; }
.skip:focus{ left:0; }

:where(a,button,input,[tabindex]):focus-visible{ outline:2px solid var(--mint); outline-offset:3px; border-radius:6px; }

.ic{ width:18px; height:18px; flex:none; display:block; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.eyeb{
  display:block;
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mint-deep);
}

/* ══════════════════════════════════════════════════════════════
   RAIL
   ══════════════════════════════════════════════════════════════ */
/* the rail is sticky and one screen tall, so the column it sits in is
   painted by the body too. Otherwise a long page shows field green under it. */
@media (min-width:1001px){
  body{
    background:
      linear-gradient(90deg, var(--rail-bg) 0 calc(var(--rail) - 1px), var(--rule-soft) calc(var(--rail) - 1px) var(--rail), transparent var(--rail)),
      radial-gradient(900px 420px at 62% -120px, rgba(80,210,193,.16), transparent 70%),
      var(--field);
  }
}
.rail{
  position:sticky; top:0; z-index:40;
  height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
  background:var(--rail-bg);
  border-right:1px solid var(--rule-soft);
  padding:22px 0 16px;
}
.rail-top{ display:flex; align-items:center; gap:.6rem; padding:0 20px; }
.rail-brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:1; min-width:0; }
.rail-alm{
  font-variation-settings:"wdth" 120,"wght" 900;
  font-size:1.65rem; line-height:1; color:var(--mint); letter-spacing:-.02em;
}
.rail-sub{
  font-size:.5rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); line-height:1.5;
}
.rail-x{ display:none; padding:.4rem; background:none; border:1px solid var(--rule); border-radius:var(--r-sm); color:var(--ink-2); cursor:pointer; }

.rail-status{
  display:flex; align-items:center; gap:.5rem;
  margin:30px 0 0; padding:0 20px;
  font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--mint-deep);
}
.dot{ width:8px; height:8px; flex:none; background:var(--mint); border-radius:2px; }

.rail-nav{ margin-top:30px; padding:0 12px; }
/* the note under Tools: a light grey rule, then a line for people who are not members yet */
.nav-note{ margin:16px 8px 0; padding:16px 4px 0; border-top:1px solid rgba(255,255,255,.16); font-size:.8rem; line-height:1.55; color:var(--ink-2); }
.nav-note a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.nav-note a:hover{ color:var(--mint); }
.rail-lab{
  margin:0 0 10px; padding:0 8px;
  font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--mint-deep);
}
.nav-a{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:10px;
  text-decoration:none; color:var(--ink-2);
  font-size:.9rem; font-weight:500;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-a .ic{ width:19px; height:19px; color:var(--ink-2); transition:color .2s var(--ease); }
.nav-a:hover{ color:var(--ink); background:rgba(151,252,228,.05); }
.nav-a.is-on{ color:var(--ink); background:var(--panel-hi); box-shadow:inset 0 0 0 1px var(--rule); }
.nav-a.is-on .ic{ color:var(--mint); }

.scrim{ display:none; }

/* ══════════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════════ */
.app{ min-width:0; display:flex; flex-direction:column; }

.top{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px;
  min-height:var(--top); padding:12px var(--pad);
  background:rgba(3,33,28,.82);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.top.is-stuck{ border-bottom-color:var(--rule-soft); }
.top-menu{ display:none; padding:.45rem; background:none; border:1px solid var(--rule); border-radius:var(--r-sm); color:var(--ink-2); cursor:pointer; }

.crumb{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:.6em;
  font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
  white-space:nowrap; overflow:hidden;
}
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--mint); }
.crumb i{ font-style:normal; color:var(--ink-3); }
.crumb b{ font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }

.find{ position:relative; display:flex; align-items:center; }
.find-ic{ position:absolute; left:14px; color:var(--ink-2); pointer-events:none; width:17px; height:17px; }
#q{
  width:clamp(200px,24vw,300px); padding:11px 36px 11px 42px;
  background:rgba(1,16,13,.55); border:1px solid var(--rule); border-radius:10px;
  color:var(--ink); font-family:var(--sans); font-size:.86rem;
  transition:border-color .2s var(--ease);
}
#q::placeholder{ color:var(--ink-3); }
#q:focus{ outline:none; border-color:var(--mint-deep); }
#q::-webkit-search-cancel-button{ -webkit-appearance:none; }
.find-k{
  position:absolute; right:10px; padding:1px 6px;
  font-family:var(--mono); font-size:.6rem; color:var(--ink-3);
  border:1px solid var(--rule); border-radius:5px; pointer-events:none;
}
.find:focus-within .find-k{ opacity:0; }

.find-out{
  position:absolute; top:calc(100% + 8px); right:0; z-index:50;
  width:min(86vw,400px); max-height:min(62vh,460px); overflow-y:auto;
  background:var(--field-deep); border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:0 24px 50px rgba(0,0,0,.55);
  padding:6px;
}
.find-r{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:8px; border-radius:var(--r-sm);
  color:var(--ink); text-decoration:none; font-size:.86rem;
}
.find-r:hover,.find-r.is-on{ background:var(--panel-hi); }
.find-art{ width:64px; aspect-ratio:16/9; flex:none; border-radius:6px; overflow:hidden; border:1px solid var(--rule); background:var(--field-deep); }
.find-art img{ width:100%; height:100%; object-fit:cover; }
.find-ico{ width:64px; aspect-ratio:16/9; flex:none; display:grid; place-items:center; border-radius:6px; background:var(--mint-dim); color:var(--mint); }
.find-r b{ display:block; font-weight:600; }
.find-r i{ display:block; font-style:normal; font-size:.72rem; color:var(--ink-3); }
.find-r mark{ background:none; color:var(--mint); }
.find-r.is-soon{ opacity:.6; }
.find-none{ padding:14px 10px; font-size:.84rem; color:var(--ink-3); }

/* ══════════════════════════════════════════════════════════════
   VIEW + SHARED PIECES
   ══════════════════════════════════════════════════════════════ */
#view{ flex:1; padding:clamp(18px,3vw,34px) var(--pad) clamp(48px,6vw,80px); outline:none; }
.wrap{ width:min(100%,1180px); }

@media (prefers-reduced-motion:no-preference){
  .anim{ animation:rise .55s var(--ease) both; }
  @keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
}

.panel{
  background:linear-gradient(180deg, rgba(7,56,48,.5), rgba(5,43,36,.28));
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
}

.h2{ font-size:clamp(1.25rem,2vw,1.5rem); font-weight:700; font-variation-settings:"wdth" 100; letter-spacing:-.02em; }
.h3{ font-size:1.15rem; font-weight:700; letter-spacing:-.015em; }
.sub{ margin-top:6px; font-size:.9rem; color:var(--ink-2); }

.sec{ margin-top:clamp(32px,4vw,44px); scroll-margin-top:90px; }
.sec-h{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.sec-r{ display:flex; align-items:center; gap:12px; }
.more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mint-deep); text-decoration:none;
}
.more .ic{ width:15px; height:15px; }
.more:hover{ color:var(--mint); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border:1px solid var(--mint); border-radius:10px;
  background:var(--mint); color:#02211B;
  font-family:var(--sans); font-size:.95rem; font-weight:700; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .25s var(--ease);
}
.btn .ic{ width:15px; height:15px; }
.btn:hover{ background:#B8FFEE; border-color:#B8FFEE; }
.btn:active{ transform:translateY(1px); }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--rule-mint); }
.btn-line .ic{ width:18px; height:18px; color:var(--ink-2); }
.btn-line:hover{ background:var(--mint-dim); border-color:var(--mint-deep); color:var(--ink); }
.btn-line.is-done{ color:var(--mint); border-color:var(--mint-deep); background:var(--mint-dim); }
.btn-line.is-done .ic{ color:var(--mint); }

/* progress bar */
.bar{ position:relative; display:block; height:8px; border-radius:99px; background:rgba(151,252,228,.1); overflow:hidden; }
.bar > i{ position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--mint); transition:width .5s var(--ease); }

.tag{
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:99px;
  font-family:var(--sans); font-size:.56rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-style:normal;
  color:var(--mint); background:var(--mint-dim); border:1px solid rgba(151,252,228,.35);
  white-space:nowrap;
}
.tag-soon{ color:var(--ink-2); background:rgba(157,186,178,.08); border-color:var(--rule); }
/* preview only: a lesson with work members cannot see yet */
.tag-draft{ color:#F2CF7A; background:rgba(242,207,122,.1); border-color:rgba(242,207,122,.4); }
.lh1 .tag-draft{ margin-left:14px; vertical-align:middle; font-size:.62rem; }

/* the bar across the top of every screen in preview */
.pvw{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  max-width:1180px; margin:0 0 22px; padding:12px 16px; border-radius:var(--r-sm);
  background:rgba(242,207,122,.1); border:1px solid rgba(242,207,122,.45);
  font-size:.86rem; color:#F6E2AE;
}
.pvw b{ font-size:.66rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#F2CF7A; }
.pvw span{ flex:1 1 220px; }
.pvw a{ color:#F2CF7A; font-weight:700; }
.pvw.is-off{ background:rgba(255,143,128,.1); border-color:rgba(255,143,128,.45); color:#FFD2CB; }
.pvw.is-off b, .pvw.is-off a{ color:var(--red); }

/* the runtime chip that sits on a picture */
.badge{
  position:absolute; right:6px; bottom:6px;
  padding:2px 6px; border-radius:5px;
  background:rgba(1,16,13,.84);
  font-family:var(--mono); font-size:.6rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
}

/* a picture slot: the lesson's own artwork, or a title card when it has none */
.art{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--field-deep); container-type:inline-size; }
.art img{ width:100%; height:100%; object-fit:cover; }

.tc{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:3cqi;
  padding:7cqi 7cqi 6cqi;
  background:
    linear-gradient(rgba(151,252,228,.05) 1px, transparent 1px) 0 0/8cqi 8cqi,
    linear-gradient(90deg, rgba(151,252,228,.05) 1px, transparent 1px) 0 0/8cqi 8cqi,
    radial-gradient(90% 90% at 88% 10%, rgba(80,210,193,.26), transparent 60%),
    linear-gradient(160deg, #06332B, #021813);
}
.tc-ic{ position:absolute; right:6cqi; top:6cqi; color:var(--mint); }
.tc-ic .ic{ width:16cqi; height:16cqi; stroke-width:1.2; }
.tc-t{
  font-variation-settings:"wdth" 112,"wght" 820;
  font-size:max(9px, 8.4cqi); line-height:1.02; letter-spacing:-.02em; color:var(--ink);
  max-width:78%; text-wrap:balance;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.tc-k{ font-size:max(6px, 3.1cqi); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--mint-deep); }
.tc.is-soon{ filter:saturate(.5); }
.tc.is-soon .tc-t{ color:var(--ink-2); }
.tc.is-soon .tc-ic{ color:var(--ink-3); }

/* ══════════════════════════════════════════════════════════════
   BROWSE
   ══════════════════════════════════════════════════════════════ */
.hello .eyeb{ margin-bottom:14px; }
.hello-h{
  font-variation-settings:"wdth" 116,"wght" 860;
  font-size:clamp(2.7rem,6.4vw,5.1rem); line-height:.95; letter-spacing:-.035em;
  color:var(--ink);
}
.hello-h span{ color:var(--mint); }
.hello-p{ margin-top:14px; font-size:clamp(1rem,1.5vw,1.14rem); color:var(--ink-2); max-width:62ch; }

/* ── Start Here ──────────────────────────────────────────── */
.start{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:clamp(360px,31%,480px) minmax(0,1fr) clamp(350px,31%,500px);
  margin-top:28px; min-height:400px;
  border:1px solid var(--rule-mint); border-radius:var(--r-lg);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(80,210,193,.08), transparent 70%),
    linear-gradient(160deg, #06302A, #032520);
}
.start-c{
  container-type:inline-size;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(26px,3.2vw,50px) clamp(24px,2.6vw,40px);
  position:relative; z-index:1;
}
.start-hi{ font-size:.72rem; letter-spacing:.3em; }
.start-t{
  margin-top:14px;
  font-variation-settings:"wdth" 104,"wght" 820;
  font-size:clamp(2.3rem, 19cqi, 4.6rem); line-height:.95; letter-spacing:-.035em;
}
.start-t span{ color:var(--mint); }
.start-p{ margin-top:18px; font-size:clamp(.95rem, 4.7cqi, 1.18rem); line-height:1.5; color:rgba(234,246,242,.8); max-width:44ch; }
.start-r{
  display:flex; flex-direction:column; align-items:flex-start; margin-top:26px;
}
.btn-lg{ padding:16px 26px; font-size:1.02rem; white-space:nowrap; }
.btn-lg .ic{ width:17px; height:17px; }
/* the hand-written note sits under the button, the arrow pointing at it */
.start-note{
  align-self:stretch; max-width:340px; margin-top:22px; padding-top:14px;
  border-top:1px solid var(--rule-mint);
  display:flex; align-items:center; gap:8px; padding-left:clamp(6px,3cqi,18px);
  font-family:var(--hand); font-size:1.5rem; line-height:1; color:rgba(234,246,242,.9);
}
.start-note span{ display:inline-block; transform:rotate(-4deg); transform-origin:0 100%; margin-bottom:6px; text-wrap:balance; }
.start-arrow{ width:34px; height:40px; flex:none; margin-top:-4px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* The scene fills the middle column, full height, fading in from the left
   so the text column runs into it. Its right edge stops hard at the
   onboarding column.

   The optional sign (site.startSign) is placed in the picture's own
   coordinates. On a wide screen the picture is sized by the panel's height
   (1.778 times as wide as it is tall) and slid left by --px of whatever
   overflows, so a point p of the way across the picture sits at
   1.778 x height x (p - px) + px x width. Her hair ends at 48.4% of the way
   across; the sign starts at 47.6%, so her hair (start-front, laid on top)
   just overlaps the first letter. */
.start-art{ position:relative; margin-left:-44px; container-type:size; --px:.34; }
.start-art img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:calc(var(--px) * 100%) 50%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24%);
          mask-image:linear-gradient(90deg, transparent 0, #000 24%);
}
.start-art .start-front{ z-index:3; }
/* a soft shade in the top right corner, so the sign reads over the jet and the sky */
.start-art.has-sign::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(52% 48% at 74% 16%, rgba(1,16,13,.55), transparent 72%);
  pointer-events:none; z-index:1;
}
.start-sign{
  --x:calc(100cqh * 1.778 * (.476 - var(--px)) + 100cqw * var(--px));
  position:absolute; z-index:2; top:8%; left:var(--x); width:max-content;
  text-align:center; text-transform:uppercase;
  font-variation-settings:"wdth" 125,"wght" 900;
  font-size:clamp(1.1rem, calc((100cqw - 20px - var(--x)) / 7.1), 2.6rem); line-height:.9; letter-spacing:-.015em;
  color:var(--ink);
  text-shadow:0 2px 20px rgba(1,16,13,.75), 0 1px 2px rgba(1,16,13,.6);
}
.start-sign span{ display:block; }
.start-sign span:last-child{ color:var(--mint); }

.start-ob{
  padding:clamp(24px,2.6vw,40px) clamp(22px,2vw,30px);
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:1;
  background:#042520; border-left:1px solid var(--rule-mint);
}
.ob-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ob-h .eyeb{ letter-spacing:.16em; white-space:nowrap; }
.ob-n{ font-size:1.45rem; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.ob-pct{ margin-top:8px; text-align:right; font-size:.74rem; color:var(--ink-2); }
.ob-l{ margin-top:12px; display:grid; gap:2px; }
.ob-a{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:7px 10px; margin:0 -10px;
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink);
  transition:background .2s var(--ease);
}
.ob-a:hover{ background:rgba(151,252,228,.06); }
.ob-num{
  display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:50%;
  border:1.5px solid rgba(157,186,178,.5); font-size:1rem; font-weight:500; color:var(--ink);
}
.ob-num .ic{ width:17px; height:17px; }
.ob-t b{ display:block; font-size:.95rem; font-weight:500; line-height:1.25; }
.ob-t i{ display:block; margin-top:2px; font-style:normal; font-size:.8rem; line-height:1.3; color:var(--ink-2); }
.ob-go{ width:18px; height:18px; color:var(--ink-2); transition:transform .2s var(--ease), color .2s var(--ease); }
.ob-a:hover .ob-go{ color:var(--mint); transform:translateX(2px); }
.ob-a.is-done .ob-num{ border-color:var(--mint); background:var(--mint); color:#02211B; }
.ob-a.is-cur .ob-num{
  border:2px solid var(--mint); background:var(--mint-dim);
  box-shadow:0 0 0 4px rgba(151,252,228,.07), 0 0 18px rgba(151,252,228,.28);
}

/* narrower screens: the scene becomes a banner across the top of the panel,
   with the text and the onboarding side by side under it */
@media (max-width:1180px){
  .start{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .start-art{ grid-column:1 / -1; order:-1; margin:0; aspect-ratio:16/8; --px:.3; }
  .start-art img{
    object-position:30% 15%;
    -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
  }
  /* the banner is wider than the picture's shape, so the picture is sized by
     width and a point p of the way across sits at p x width */
  .start-sign{ --x:47.6cqw; top:7%; font-size:clamp(1.1rem, calc((100cqw - 14px - var(--x)) / 7.1), 2.6rem); }
}

/* ── goals ───────────────────────────────────────────────── */
.goals{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.goal{
  display:flex; align-items:center; gap:16px; height:100%;
  padding:18px 20px; border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(7,56,48,.5), rgba(5,43,36,.28)); border:1px solid var(--rule);
  text-decoration:none;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .25s var(--ease);
}
.goal:hover{ border-color:var(--mint-deep); background:var(--panel-hi); }
.goal-ic{ color:var(--mint); }
.goal-ic .ic{ width:32px; height:32px; stroke-width:1.4; }
.goal b{ display:block; font-size:.98rem; font-weight:650; }
.goal i{ display:block; margin-top:2px; font-style:normal; font-size:.8rem; color:var(--ink-2); }

/* ── continue + first 3 ──────────────────────────────────── */
.duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:16px; margin-top:clamp(28px,3.4vw,36px); }
.duo > .panel{ padding:20px; }
.duo .h3 + *{ margin-top:14px; }

.cont{
  display:grid; grid-template-columns:150px minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:12px; border-radius:var(--r-md); border:1px solid var(--rule);
  background:rgba(1,16,13,.35); text-decoration:none;
  transition:border-color .2s var(--ease);
}
.cont:hover{ border-color:var(--mint-deep); }
.cont .art{ border-radius:var(--r-sm); }
.cont b{ display:block; font-size:.98rem; font-weight:650; }
.cont i{ display:block; margin-top:3px; font-style:normal; font-size:.8rem; color:var(--ink-2);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.cont-bar{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.cont-bar .bar{ flex:1; height:6px; }
.cont-bar em{ font-style:normal; font-family:var(--mono); font-size:.66rem; color:var(--ink-2); }
.cont-play{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--mint); color:#02211B; transition:transform .25s var(--ease);
}
.cont-play .ic{ width:16px; height:16px; margin-left:2px; }
.cont:hover .cont-play{ transform:scale(1.06); }
.cont-done{ font-size:.9rem; color:var(--ink-2); }

.first{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.first li{ position:relative; }
.first li + li::before{
  content:""; position:absolute; left:-17px; top:calc(28% - 5px);
  width:8px; height:8px; border-top:1.6px solid var(--ink-2); border-right:1.6px solid var(--ink-2);
  transform:rotate(45deg);
}
.first-a{ display:block; text-decoration:none; }
.first-a .art{ border-radius:var(--r-sm); border:1px solid var(--rule); transition:border-color .2s var(--ease); }
.first-a:hover .art{ border-color:var(--mint-deep); }
.first-c{ display:flex; align-items:flex-start; gap:10px; margin-top:10px; }
.first-c b{ font-size:.84rem; font-weight:650; line-height:1.3; }
.num{
  display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:50%;
  border:1px solid var(--ink-2); font-family:var(--mono); font-size:.62rem; color:var(--ink);
}
.first-a.is-done .num{ border-color:var(--mint); color:var(--mint); background:var(--mint-dim); }
.first-a .done-ck{ position:absolute; left:6px; top:6px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--mint); color:#02211B; }
.first-a .done-ck .ic{ width:13px; height:13px; stroke-width:2.4; }

/* ── recommended ─────────────────────────────────────────── */
.recs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.rec{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr); align-items:center; gap:14px; height:100%;
  padding:10px; border-radius:var(--r-md); border:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(7,56,48,.5), rgba(5,43,36,.28)); text-decoration:none;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.rec:hover{ border-color:var(--mint-deep); background:var(--panel-hi); }
.rec .art{ border-radius:var(--r-sm); }
.rec b{ display:block; font-size:.9rem; font-weight:650; line-height:1.3; }
.rec i{ display:block; margin-top:5px; font-style:normal; font-size:.76rem; color:var(--ink-2); line-height:1.45;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }

/* ── learning paths ──────────────────────────────────────── */
.chev-btn{
  display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-sm);
  background:none; border:1px solid transparent; color:var(--ink); cursor:pointer;
  transition:border-color .2s var(--ease), transform .3s var(--ease);
}
.chev-btn:hover{ border-color:var(--rule); }
.chev-btn[aria-expanded="true"] .ic{ transform:rotate(180deg); }
.chev-btn .ic, .path-chev .ic{ transition:transform .3s var(--ease); }

.paths{ display:grid; gap:10px; }
.path{ border-radius:var(--r-md); border:1px solid var(--rule); background:linear-gradient(180deg, rgba(7,56,48,.45), rgba(5,43,36,.22)); transition:border-color .2s var(--ease); }
.path:hover{ border-color:#15594C; }
.path-h{
  display:grid; grid-template-columns:44px 52px minmax(0,1fr) auto 36px; align-items:center; gap:10px;
  width:100%; padding:14px 18px; background:none; border:0; text-align:left; cursor:pointer;
}
.path-n{ font-family:var(--mono); font-size:.76rem; color:var(--ink-2); }
.path-ic{ color:var(--mint); }
.path-ic .ic{ width:32px; height:32px; stroke-width:1.4; }
.path-c{ min-width:0; }
.path-c b{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:1.02rem; font-weight:650; }
.path-c > i{ display:block; margin-top:3px; font-style:normal; font-size:.8rem; color:var(--ink-2); }
/* on a phone the count column goes, and the caption carries the count instead */
.path-c > i .k{ display:none; }
.path-k{ padding:4px 0 4px 20px; min-width:92px; border-left:1px solid var(--rule); line-height:1.25; }
.path-k b{ display:block; font-size:.98rem; font-weight:700; }
.path-k i{ display:block; font-style:normal; font-size:.74rem; color:var(--ink-2); }
.path-chev{ display:grid; place-items:center; color:var(--ink); }
.path.is-open .path-chev .ic{ transform:rotate(180deg); }
.path-b{ padding:4px 18px 16px; border-top:1px solid var(--rule-soft); }
.path-b[hidden]{ display:none; }
.path-open{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--mint-deep); text-decoration:none;
}
.path-open .ic{ width:15px; height:15px; }
.path-open:hover{ color:var(--mint); }

/* a list of lessons inside a path */
.ll{ display:grid; }
.lr{
  display:grid; grid-template-columns:30px 104px minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:10px 8px; border-bottom:1px solid var(--rule-soft); border-radius:var(--r-sm);
  text-decoration:none; color:var(--ink);
  transition:background .2s var(--ease);
}
.ll li:last-child .lr{ border-bottom:0; }
a.lr:hover{ background:rgba(151,252,228,.05); }
.lr-n{ font-family:var(--mono); font-size:.7rem; color:var(--ink-3); text-align:center; }
.lr-n .ic{ width:18px; height:18px; margin:auto; color:var(--mint); }
.lr .art{ border-radius:6px; border:1px solid var(--rule); }
.lr-c b{ display:block; font-size:.9rem; font-weight:600; line-height:1.3; }
.lr-c i{ display:flex; gap:8px; margin-top:3px; font-style:normal; font-size:.72rem; color:var(--ink-3); }
.lr-c i span + span::before{ content:"·"; margin-right:8px; }
.lr-s{ font-family:var(--mono); font-size:.66rem; color:var(--ink-2); }
.lr.is-done .lr-c b{ color:var(--ink-2); }
.lr.is-soon{ color:var(--ink-2); }
.lr.is-soon .lr-c b{ color:var(--ink-2); font-weight:500; }

/* ══════════════════════════════════════════════════════════════
   PAGE HEAD (path, all lessons, tools)
   ══════════════════════════════════════════════════════════════ */
.back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); text-decoration:none;
}
.back .ic{ width:15px; height:15px; transform:rotate(180deg); }
.back:hover{ color:var(--mint); }

.phead{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.phead-c{ min-width:0; max-width:64ch; }
.phead .eyeb{ margin-bottom:12px; }
.h1{
  font-variation-settings:"wdth" 112,"wght" 850;
  font-size:clamp(2.2rem,5vw,3.9rem); line-height:.98; letter-spacing:-.035em; color:var(--mint);
  text-wrap:balance;
}
.lede{ margin-top:12px; font-size:clamp(.98rem,1.4vw,1.08rem); color:var(--ink-2); text-wrap:pretty; }
.phead-art{ width:min(100%,260px); }
.phead-art .art{ border-radius:var(--r-md); border:1px solid var(--rule); }

.stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.stat{ padding:10px 16px; border-radius:var(--r-md); border:1px solid var(--rule); background:rgba(1,16,13,.3); min-width:110px; }
.stat i{ display:block; font-style:normal; font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.stat b{ display:block; margin-top:2px; font-size:1.05rem; font-weight:700; }
.stat b.mono{ font-size:.95rem; }

.prog-row{ display:flex; align-items:center; gap:14px; margin-top:18px; max-width:520px; }
.prog-row .bar{ flex:1; }
.prog-row em{ font-style:normal; font-size:.76rem; color:var(--ink-2); white-space:nowrap; }

.path-go{ margin-top:22px; }
.path-list{ margin-top:26px; padding:8px 12px; }
.empty-l{ padding:16px 8px; color:var(--ink-2); font-size:.9rem; }

.all-p + .all-p{ margin-top:34px; }
.all-p .sec-h{ margin-bottom:8px; }
.all-p .h2 a{ text-decoration:none; }
.all-p .h2 a:hover{ color:var(--mint); }
.all-p .path-list{ margin-top:0; }

/* ══════════════════════════════════════════════════════════════
   LESSON
   ══════════════════════════════════════════════════════════════ */
.lhead .eyeb{ margin-bottom:12px; }
.lh1{
  font-variation-settings:"wdth" 112,"wght" 860;
  font-size:clamp(2.1rem,4.8vw,3.8rem); line-height:.98; letter-spacing:-.035em; color:var(--mint);
  max-width:22ch; text-wrap:balance;
}

.lgrid{ display:grid; grid-template-columns:minmax(0,1fr) 318px; gap:22px; align-items:start; margin-top:24px; }
.l-aside{ display:grid; gap:18px; }

.player{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--rule); background:var(--field-deep);
}
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.player .art{ position:absolute; inset:0; aspect-ratio:auto; }
.player-note{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:10px 14px; border-radius:var(--r-sm); background:rgba(1,16,13,.88); border:1px solid var(--rule);
  font-size:.84rem; color:var(--ink-2);
}

.l-card{ padding:22px; }
.l-count{ margin-top:4px; font-size:.84rem; color:var(--ink-2); }
.l-title{ margin-top:10px; font-size:1.5rem; font-weight:750; letter-spacing:-.025em; line-height:1.15; }
.meta{ margin:16px 0 0; }
.meta > div{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--rule-soft); }
.meta dt{ display:flex; align-items:center; gap:12px; font-size:.86rem; color:var(--ink-2); }
.meta dt .ic{ width:19px; height:19px; color:var(--mint-deep); }
.meta dd{ margin:0; font-size:.88rem; color:var(--ink); text-align:right; }
.meta dd.mono{ font-size:.8rem; }
.l-btns{ display:grid; gap:10px; margin-top:16px; }
.l-btns .btn{ width:100%; }

.res{ margin-top:18px; padding-top:16px; border-top:1px solid var(--rule-soft); }
.res ul{ display:grid; gap:8px; margin-top:10px; }
.res-a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid var(--rule); background:rgba(1,16,13,.3); text-decoration:none; font-size:.84rem; color:var(--ink-2);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.res-a:hover{ border-color:var(--mint-deep); color:var(--mint); }
.res-a .ic{ width:15px; height:15px; margin-left:auto; color:var(--ink-3); }
.res-a:hover .ic{ color:var(--mint); }

/* the path, down the side of a lesson */
.lp{ overflow:hidden; }
.lp-h{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border-bottom:1px solid var(--rule); }
.lp-h b{ display:block; font-size:1.2rem; font-weight:750; letter-spacing:-.02em; }
.lp-h b a{ text-decoration:none; }
.lp-h b a:hover{ color:var(--mint); }
.lp-h i{ display:block; font-style:normal; font-size:.78rem; color:var(--ink-2); }
.lp-art{ width:96px; flex:none; }
.lp-art .art{ border-radius:var(--r-sm); border:1px solid var(--rule); }
.lp-l a, .lp-l .lp-soon{
  display:grid; grid-template-columns:26px minmax(0,1fr) auto 18px; align-items:center; gap:10px;
  padding:11px 18px; border-bottom:1px solid var(--rule-soft); text-decoration:none; font-size:.84rem; color:var(--ink-2);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lp-l li:last-child > *{ border-bottom:0; }
.lp-l a:hover{ background:rgba(151,252,228,.05); color:var(--ink); }
.lp-l .n{ font-family:var(--mono); font-size:.66rem; color:var(--ink-3); }
.lp-l .t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-l .d{ font-family:var(--mono); font-size:.64rem; color:var(--ink-3); }
.lp-l .s .ic{ width:17px; height:17px; }
.lp-l a.is-done .s{ color:var(--mint); }
.lp-l a.is-cur{ background:var(--mint-dim); color:var(--ink); font-weight:650; box-shadow:inset 2px 0 0 var(--mint); }
.lp-l a.is-cur .s{ color:var(--mint); }
.lp-l .lp-soon{ opacity:.55; }
.lp-l .lp-soon .tag{ font-size:.5rem; padding:2px 6px; }

/* ── the write-up under the video ────────────────────────── */
.l-body{ min-width:0; scroll-margin-top:90px; }
.ls{ margin-top:clamp(28px,3.4vw,38px); }
.ls > .h2{ margin-bottom:14px; }
.ls-p{ font-size:1rem; line-height:1.7; color:var(--ink-2); max-width:70ch; }
.ls-cap{ margin:-6px 0 14px; font-size:.86rem; color:var(--ink-2); }

.steps{ display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:26px; }
.step{
  position:relative; padding:18px 16px 20px; text-align:center;
  border-radius:var(--r-md); border:1px solid var(--rule); background:linear-gradient(180deg, rgba(7,56,48,.45), rgba(5,43,36,.22));
}
.step + .step::before{
  content:""; position:absolute; left:-18px; top:50%;
  width:8px; height:8px; margin-top:-4px; border-top:1.6px solid var(--ink-2); border-right:1.6px solid var(--ink-2); transform:rotate(45deg);
}
.step-n{ position:absolute; left:14px; top:12px; font-family:var(--mono); font-size:.66rem; color:var(--ink-3); }
.step-ic{ display:grid; place-items:center; margin:6px auto 12px; color:var(--mint); }
.step-ic .ic{ width:30px; height:30px; stroke-width:1.4; }
.step b{ display:block; font-size:.98rem; font-weight:650; line-height:1.25; text-wrap:balance; }
.step p{ margin-top:8px; font-size:.84rem; line-height:1.55; color:var(--ink-2); text-wrap:pretty; }

.cards{ display:grid; grid-template-columns:repeat(var(--c,3),minmax(0,1fr)); gap:14px; }
.card{ padding:18px; border-radius:var(--r-md); border:1px solid var(--rule); background:linear-gradient(180deg, rgba(7,56,48,.45), rgba(5,43,36,.22)); }
.card-h{ display:flex; align-items:center; gap:12px; }
.card-h .ic{ width:28px; height:28px; color:var(--mint); stroke-width:1.4; }
.card-h b{ font-size:.98rem; font-weight:650; }
.card p{ margin-top:10px; font-size:.84rem; line-height:1.6; color:var(--ink-2); }

.tbl-wrap{ overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--rule); }
.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th{
  padding:12px 16px; text-align:left; background:rgba(1,16,13,.4);
  font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
}
.tbl td{ padding:13px 16px; border-top:1px solid var(--rule-soft); color:var(--ink); white-space:nowrap; }
.tbl td.mono{ font-size:.84rem; }
.tbl td:last-child{ color:var(--mint); }
.tbl-note{ margin-top:10px; font-size:.8rem; color:var(--ink-3); }

.watch{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.watch li{ padding:4px 22px; border-left:1px solid var(--rule); }
.watch li:first-child{ padding-left:0; border-left:0; }
.watch .ic{ width:26px; height:26px; color:var(--mint); stroke-width:1.4; }
.watch b{ display:block; margin-top:10px; font-size:.94rem; font-weight:650; }
.watch p{ margin-top:6px; font-size:.82rem; line-height:1.55; color:var(--ink-2); }

.kt{
  display:flex; gap:20px; align-items:flex-start;
  padding:22px 26px; border-radius:var(--r-lg);
  border:1px solid var(--rule-mint); background:linear-gradient(160deg, rgba(7,56,48,.7), rgba(3,33,28,.5));
}
.kt-q{ flex:none; font-variation-settings:"wdth" 110,"wght" 900; font-size:3.4rem; line-height:.8; color:var(--mint); }
.kt-h{ display:block; font-size:1rem; font-weight:700; color:var(--mint); }
.kt p{ margin-top:6px; font-size:1rem; line-height:1.6; color:var(--ink); }

.keys{ display:grid; gap:12px; padding:20px 22px; }
.keys li{ position:relative; padding-left:22px; font-size:.95rem; line-height:1.65; color:var(--ink-2); }
.keys li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--mint-deep); }
.keys strong{ color:var(--ink); }

.checks{ display:grid; gap:10px; }
.checks li{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--rule); background:rgba(1,16,13,.28);
  font-size:.92rem; line-height:1.5; color:var(--ink);
}
.checks .ic{ width:19px; height:19px; margin-top:1px; color:var(--mint); }
.checks.is-warn li{ border-color:rgba(255,143,128,.24); background:rgba(255,143,128,.05); }
.checks.is-warn .ic{ color:var(--red); }

.cmp th:nth-child(2){ color:var(--mint); }
.cmp th:nth-child(3){ color:var(--red); }
.cmp td{ white-space:normal; vertical-align:top; line-height:1.45; }
.cmp tbody th{
  padding:13px 16px; border-top:1px solid var(--rule-soft); background:none; vertical-align:top;
  font-size:.86rem; font-weight:650; letter-spacing:0; text-transform:none; color:var(--ink); white-space:normal; width:24%;
}
.cmp td:nth-child(2){ color:var(--ink); }
.cmp td:nth-child(3){ color:var(--red); }
.cmp td:last-child{ color:var(--red); }

.look{ display:grid; gap:12px; }
.look-i{ padding:14px 16px; border-radius:var(--r-md); border:1px solid var(--rule); background:rgba(1,16,13,.3); }
.look-i .eyeb{ margin-bottom:10px; color:var(--ink-3); }
.look-r{ display:flex; align-items:center; gap:12px; padding:6px 0; }
.look-r .ic{ width:18px; height:18px; flex:none; }
.look-r.is-real .ic{ color:var(--mint); }
.look-r.is-fake .ic{ color:var(--red); }
.look-r code{ font-family:var(--mono); font-size:.8rem; color:var(--ink); overflow-wrap:anywhere; }
.look-r mark{ background:var(--red-dim); color:var(--red); border-radius:3px; padding:0 1px; box-shadow:0 0 0 1px rgba(255,143,128,.4); }
.look-r em{ margin-left:auto; flex:none; font-style:normal; font-size:.58rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.look-r.is-real em{ color:var(--mint); }
.look-r.is-fake em{ color:var(--red); }

.fig{ margin:0; max-width:560px; }
.fig-a{ display:block; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--rule); background:var(--field-deep); }
.fig-a img{ display:block; width:100%; height:auto; }
.fig-cap{ margin-top:10px; font-size:.8rem; color:var(--ink-3); }

.prose{ max-width:70ch; }
.prose > * + *{ margin-top:1rem; }
.prose p, .prose li{ color:var(--ink-2); line-height:1.75; }
.prose ul{ list-style:disc; padding-left:1.2rem; }
.prose ol{ list-style:decimal; padding-left:1.3rem; }
.prose li::marker{ color:var(--mint-deep); }
.prose a{ color:var(--mint); text-underline-offset:3px; }
.prose strong{ color:var(--ink); }
.prose h3{ margin-top:1.8rem; font-size:1.1rem; }
.prose code{ font-family:var(--mono); font-size:.84em; color:var(--mint); background:var(--field-deep); padding:.1em .35em; border-radius:4px; }
.prose blockquote{ margin:0; padding:14px 16px; border-radius:var(--r-sm); background:var(--mint-dim); border:1px solid var(--mint-deep); }

.pager{ display:flex; justify-content:space-between; gap:16px; margin-top:clamp(32px,4vw,44px); padding-top:18px; border-top:1px solid var(--rule); }
.pg{ display:inline-flex; align-items:center; gap:12px; max-width:48%; text-decoration:none; }
.pg.is-next{ margin-left:auto; flex-direction:row-reverse; text-align:right; }
.pg-a{ display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:50%; border:1px solid var(--rule); color:var(--ink-2); transition:all .2s var(--ease); }
.pg-a .ic{ width:16px; height:16px; }
.pg.is-prev .pg-a .ic{ transform:rotate(180deg); }
.pg-c i{ display:block; font-style:normal; font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.pg-c b{ display:block; margin-top:2px; font-size:.9rem; font-weight:600; line-height:1.3; color:var(--ink-2); }
.pg:hover .pg-a{ background:var(--mint); border-color:var(--mint); color:#02211B; }
.pg:hover .pg-c b{ color:var(--mint); }

/* ══════════════════════════════════════════════════════════════
   TOOLS
   ══════════════════════════════════════════════════════════════ */
.tools{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; margin-top:28px; }
.tools > li{ display:flex; }
.tool{
  flex:1; display:flex; gap:14px; padding:18px; border-radius:var(--r-md);
  border:1px solid var(--rule); background:linear-gradient(180deg, rgba(7,56,48,.5), rgba(5,43,36,.28));
  text-decoration:none; transition:border-color .2s var(--ease), background .2s var(--ease);
}
a.tool:hover{ border-color:var(--mint-deep); background:var(--panel-hi); }
.tool-ico{ display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:10px; background:var(--mint-dim); color:var(--mint); }
.tool-ico .ic{ width:20px; height:20px; }
.tool b{ display:block; font-size:.96rem; font-weight:650; line-height:1.35; }
.tool b .ic{ display:inline-block; width:13px; height:13px; margin-left:7px; vertical-align:-1px; color:var(--ink-3); }
.tool b .tag{ margin-left:8px; vertical-align:2px; }
.tool p{ margin-top:6px; font-size:.82rem; line-height:1.55; color:var(--ink-2); }
.tool-cta{ display:inline-block; margin-top:10px; padding:5px 9px; border-radius:6px; background:var(--mint-dim); border:1px solid rgba(151,252,228,.3); font-family:var(--mono); font-size:.72rem; color:var(--mint); overflow-wrap:anywhere; }
.tool.is-soon{ opacity:.6; }

/* ── empty + 404 ─────────────────────────────────────────── */
.empty{ margin-top:24px; padding:36px 24px; text-align:center; }
.empty b{ display:block; font-size:1.1rem; }
.empty p{ margin-top:8px; color:var(--ink-2); }
.empty .btn{ margin-top:18px; }

/* ── footer ──────────────────────────────────────────────── */
.foot{ padding:22px var(--pad) 28px; border-top:1px solid var(--rule-soft); }
.disc{ max-width:96ch; font-size:.74rem; line-height:1.8; color:var(--ink-3); }
.disc strong{ color:var(--ink-2); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .goals{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .recs{ grid-template-columns:1fr; }
  .rec{ grid-template-columns:220px minmax(0,1fr); }
  .watch{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px; }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .watch li:nth-child(odd){ padding-left:0; border-left:0; }
}

@media (max-width:1000px){
  body{ grid-template-columns:1fr; }
  .rail{
    position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:60;
    transform:translateX(-100%); visibility:hidden;
    transition:transform .35s var(--ease), visibility .35s;
  }
  body.rail-on .rail{ transform:none; visibility:visible; }
  .rail-x{ display:block; }
  .scrim{
    display:block; position:fixed; inset:0; z-index:50;
    background:rgba(1,16,13,.72); opacity:0; visibility:hidden;
    transition:opacity .3s var(--ease), visibility .3s;
  }
  .scrim:not([hidden]){ opacity:1; visibility:visible; }
  .top-menu{ display:block; }

  /* the lesson collapses to one column: video, the lesson card, the write-up, the path */
  .lgrid{ display:flex; flex-direction:column; align-items:stretch; gap:18px; }
  .l-main, .l-aside{ display:contents; }
  .l-media{ order:1; width:100%; }
  .l-card{ order:2; }
  .l-body{ order:3; }
  .l-side{ order:4; }
  .l-card .l-btns{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .duo{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  :root{ --top:auto; }
  .top{ flex-wrap:wrap; row-gap:10px; }
  .crumb{ order:1; flex:1 1 auto; }
  .top-menu{ order:0; }
  .find{ order:2; flex:1 1 100%; }
  #q{ width:100%; }
  .find-out{ left:0; right:0; width:auto; }

  .start{ grid-template-columns:1fr; }
  .start-ob{ border-left:0; border-top:1px solid var(--rule-mint); }
  .start-c{ padding-bottom:26px; }

  .goal{ flex-direction:column; align-items:flex-start; gap:10px; padding:16px; }

  .cont{ grid-template-columns:110px minmax(0,1fr) auto; gap:12px; }
  .first{ grid-template-columns:1fr; gap:10px; }
  .first li + li::before{ display:none; }
  .first-a{ display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; gap:14px; }
  .first-c{ margin-top:0; align-items:center; }

  .rec{ grid-template-columns:130px minmax(0,1fr); }

  .path-h{ grid-template-columns:40px minmax(0,1fr) 28px; gap:12px; padding:14px; }
  .path-n{ display:none; }
  .path-ic .ic{ width:28px; height:28px; }
  .path-k{ display:none; }
  .path-c > i .k{ display:inline; }
  .path-b{ padding:4px 10px 14px; }

  .lr{ grid-template-columns:26px 88px minmax(0,1fr); gap:12px; }
  .lr-s{ display:none; }

  .steps{ grid-template-columns:1fr; gap:12px; }
  .step + .step::before{ display:none; }
  .step{ display:grid; grid-template-columns:44px minmax(0,1fr); text-align:left; column-gap:12px; padding:16px; }
  .step-n{ display:none; }
  .step-ic{ grid-row:span 2; margin:0; align-self:start; }
  .step p{ margin-top:4px; }

  .watch{ grid-template-columns:1fr; row-gap:18px; }
  .cards{ grid-template-columns:1fr; }
  .watch li, .watch li:nth-child(odd){ padding:0; border-left:0; }

  .kt{ padding:18px; gap:14px; }
  .kt-q{ font-size:2.6rem; }

  .phead-art{ display:none; }
  .cmp tbody th{ width:auto; }
}

@media (max-width:480px){
  .l-card .l-btns{ grid-template-columns:1fr; }
  .goals{ gap:10px; }
  .goal b{ font-size:.92rem; }
  .cont{ grid-template-columns:96px minmax(0,1fr); }
  .cont-play{ display:none; }
  .rec{ grid-template-columns:112px minmax(0,1fr); gap:12px; }
  .rec i{ -webkit-line-clamp:2; }
  .lr{ grid-template-columns:22px 76px minmax(0,1fr); gap:10px; padding:10px 4px; }
  .pg{ max-width:50%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}