/* ============================================================
   STR School — /learn
   Sits on top of site.css. The John Andrew Homes shell (header,
   footer, contact band) is unchanged; everything inside the
   course gets its own warmer palette so it reads as a distinct
   product without leaving the brand.

   Semantic colour rule from the brief, enforced by convention:
   --str-ok / --str-warn / --str-bad are used ONLY for
   correct / caution / costly-mistake. Never decoratively. If you
   want a colour for decoration, use coral or sand.
   ============================================================ */

:root {
  --str-coral:      #C8593A;   /* confident terracotta — Florida, not beach cliché */
  --str-coral-dp:   #A6462C;
  --str-coral-lt:   #F2D9CF;
  --str-coral-wash: #FBF1ED;
  --str-ink:        #18222E;   /* near-black with a blue cast, never pure #000 */
  --str-ink-soft:   #46545F;
  --str-page:       #FCFAF6;   /* warm off-white */
  --str-line:       #E6E0D6;
  --str-card:       #FFFFFF;

  --str-ok:         #3F7A55;
  --str-ok-bg:      #EAF3EC;
  --str-warn:       #9A6B12;
  --str-warn-bg:    #FAF2E0;
  --str-bad:        #A8393C;
  --str-bad-bg:     #FAEBEB;

  --str-measure:    68ch;
  --str-r:          14px;
}

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- shared type inside the course ---------- */
.lhero, .lpath, .lteaser, .lesson, .lquiz, .lgd, .lpn, .term, .ghero,
.glist, .exhero, .cert, .lsec { background: var(--str-page); color: var(--str-ink); }

.lprose, .term, .exhero { font-size: 18.5px; line-height: 1.75; }
.lprose p, .term p { max-width: var(--str-measure); }
.lprose p + p { margin-top: 1.05em; }
.lprose em { font-style: italic; }
.lprose strong, .term strong { font-weight: 600; color: var(--str-ink); }

.lprose h2, .term-sh {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.02rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--str-coral); margin: 2.3em 0 .7em; font-weight: 700;
}
.lprose h3 { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; margin: 1.6em 0 .5em; }

.lbullets { margin: 1.1em 0; padding-left: 0; list-style: none; max-width: var(--str-measure); }
.lbullets li { position: relative; padding-left: 26px; margin-bottom: .7em; }
.lbullets li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--str-coral);
}

/* the one callback beat per lesson */
.beat {
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; font-size: .82rem;
  color: var(--str-ink-soft); margin: 2.4em 0 1.6em; padding-top: 1.6em;
  border-top: 1px solid var(--str-line);
}

/* ---------- glossary auto-link + tooltip ---------- */
a.gl {
  color: inherit; text-decoration: underline;
  text-decoration-style: dotted; text-decoration-color: var(--str-coral);
  text-underline-offset: 3px; text-decoration-thickness: 2px;
  position: relative; cursor: help;
}
a.gl:hover, a.gl:focus-visible { color: var(--str-coral-dp); text-decoration-style: solid; }
a.gl::after {
  content: attr(data-def);
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: min(19rem, 76vw);
  background: var(--str-ink); color: #fff; font-size: .82rem; line-height: 1.45;
  font-weight: 400; text-decoration: none; letter-spacing: 0;
  padding: 9px 12px; border-radius: 9px; z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
  box-shadow: 0 10px 30px rgba(24,34,46,.22);
}
a.gl:hover::after, a.gl:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (hover: none) { a.gl::after { display: none; } }

/* ---------- call-out components ---------- */
.cal {
  display: flex; gap: 14px; margin: 1.9em 0; padding: 20px 22px;
  border-radius: var(--str-r); border: 1px solid var(--str-line);
  background: var(--str-card); max-width: var(--str-measure);
}
.cal-b { flex: 1; min-width: 0; }
.cal-h {
  font-family: 'Montserrat', sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5em;
}
.cal p { font-size: .98rem; line-height: 1.68; max-width: none; }
.cal-i { flex: none; color: var(--str-bad); margin-top: 2px; }

.cal-warn  { background: var(--str-bad-bg);  border-color: #EBC9C9; }
.cal-warn .cal-h { color: var(--str-bad); }
.cal-real  { background: #F3F1EC; border-color: var(--str-line); border-left: 4px solid var(--ps-sand); }
.cal-real .cal-h { color: var(--ps-sand-deep); }
.cal-money { background: var(--str-ok-bg); border-color: #CFE2D5; }
.cal-money .cal-h { color: var(--str-ok); }
.cal-def   { background: var(--str-coral-wash); border-color: var(--str-coral-lt); }
.cal-def .cal-h { color: var(--str-coral); }
.def-term  { font-weight: 700; color: var(--str-coral-dp); text-decoration: underline;
             text-decoration-color: var(--str-coral-lt); text-underline-offset: 3px; }

.money-t { width: 100%; border-collapse: collapse; font-size: .95rem; }
.money-t th, .money-t td { padding: 7px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(63,122,85,.16); font-weight: 400; }
.money-t tr:last-child th, .money-t tr:last-child td { border-bottom: 0; }
.money-t .n { text-align: right; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; padding-left: 14px; }
.money-t .note { font-size: .82rem; color: var(--str-ink-soft); padding-left: 14px; }

/* data tables (the waterfall) */
.ltable-wrap { margin: 1.9em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ltable { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .95rem;
  background: var(--str-card); border: 1px solid var(--str-line); border-radius: var(--str-r); }
.ltable caption { text-align: left; font-family: 'Montserrat', sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--str-ink-soft); padding-bottom: 10px; }
.ltable thead th { background: var(--str-ink); color: #fff; text-align: left;
  padding: 11px 14px; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.ltable th, .ltable td { padding: 10px 14px; border-bottom: 1px solid var(--str-line);
  text-align: left; font-weight: 400; }
.ltable tbody th { font-weight: 500; }
.ltable td { font-variant-numeric: tabular-nums; }
.ltable tr:last-child th, .ltable tr:last-child td { border-bottom: 0; }
.ltable tbody tr:nth-child(even) { background: #FBF9F5; }

/* graveyard card, in prose */
.gcard { margin: 2.2em 0; padding: 24px; border-radius: var(--str-r);
  background: var(--str-card); border: 1px solid var(--str-line);
  border-top: 5px solid var(--str-bad); box-shadow: var(--shadow-sm); }
.gcard-n { font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--str-bad); }
.gcard-a { font-family: 'Source Sans 3', serif; font-size: 1.35rem; line-height: 1.35;
  font-weight: 600; font-style: italic; margin: .35em 0 .9em; color: var(--str-ink);
  text-transform: none; letter-spacing: 0; }
.gcard-d { margin: 0; }
.gcard-d dt { font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--str-ink-soft);
  margin-top: 1.1em; }
.gcard-d dd { margin: .3em 0 0; font-size: .97rem; line-height: 1.66; }
.gcard-d .dmg { color: var(--str-bad); font-weight: 500; }

/* ---------- sticky progress bar ---------- */
.lbar { position: sticky; top: 0; z-index: 30; background: rgba(252,250,246,.94);
  backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--str-line); }
.lbar-in { max-width: 1160px; margin: 0 auto; padding: 9px 24px;
  display: flex; align-items: center; gap: 14px; }
.lbar-back { font-family: 'Montserrat', sans-serif; font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--str-ink-soft);
  white-space: nowrap; }
.lbar-back:hover { color: var(--str-coral); }
.lbar-track { flex: 1; height: 6px; border-radius: 99px; background: var(--str-line);
  overflow: hidden; }
.lbar-fill { display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--str-coral); transition: width .5s ease; }
.lbar-pct { font-size: .76rem; font-weight: 700; color: var(--str-coral);
  font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
@media (max-width: 560px) { .lbar-back span { display: none; } }

/* ---------- hub hero ---------- */
.lhero { padding: 54px 0 46px; background:
  linear-gradient(168deg, var(--str-ink) 0%, #24313F 62%, #2E3A45 100%); color: #fff; }
.lhero .eyebrow { color: var(--ps-sand); }
.lhero-h { font-size: clamp(2.6rem, 9vw, 4.6rem); color: #fff; margin: .1em 0 .06em; }
.lhero-tag { font-size: clamp(1.05rem, 3.4vw, 1.4rem); font-style: italic;
  color: var(--ps-sand); margin-bottom: 1em; }
.lhero-p { max-width: 46rem; color: rgba(255,255,255,.84); font-size: 1.05rem; }
.lhero-fine { margin-top: 20px; font-size: .86rem; color: rgba(255,255,255,.56); max-width: 44rem; }

.lhero-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px;
  margin: 30px 0 26px; }
.lstat { display: flex; flex-direction: column; }
.lstat-n { font-family: 'Montserrat', sans-serif; font-size: 1.9rem; font-weight: 700;
  line-height: 1; color: var(--ps-sand); font-variant-numeric: tabular-nums; }
.lstat-l { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-top: 5px; }

.lring-wrap { position: relative; width: 80px; height: 80px; margin-left: auto; }
.lring { width: 80px; height: 80px; transform: rotate(-90deg); }
.lring circle { fill: none; stroke-width: 7; }
.lring-bg { stroke: rgba(255,255,255,.16); }
.lring-fg { stroke: var(--ps-sand); stroke-linecap: round;
  stroke-dasharray: 213.6; stroke-dashoffset: 213.6; transition: stroke-dashoffset .9s ease; }
.lring-t { position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'Montserrat', sans-serif; font-size: .84rem; font-weight: 700; color: #fff; }

.lhero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- graveyard teaser ---------- */
.lteaser { padding: 40px 0; }
.lteaser-card { background: var(--str-card); border: 1px solid var(--str-line);
  border-left: 6px solid var(--str-bad); border-radius: var(--str-r);
  padding: 28px 26px; box-shadow: var(--shadow-sm); max-width: 780px; }
.lteaser-e { font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--str-bad); }
.lteaser-q { font-size: clamp(1.2rem, 4vw, 1.55rem); font-style: italic; font-weight: 600;
  margin: .4em 0 .6em; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.lteaser-a { color: var(--str-ink-soft); font-size: .99rem; }
.lteaser-d { margin-top: .8em; color: var(--str-bad); font-size: 1.02rem; }
.lteaser-go { display: inline-block; margin-top: 1em; font-family: 'Montserrat', sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--str-coral); }
.lteaser-go:hover { color: var(--str-coral-dp); }

/* ---------- the level path ---------- */
.lpath { padding: 56px 0 64px; }
.lpath-track { position: relative; margin-top: 34px; }
.lpath-track::before { content: ""; position: absolute; left: 21px; top: 26px; bottom: 40px;
  width: 2px; background: linear-gradient(var(--str-coral-lt), var(--str-line)); }
@media (min-width: 820px) { .lpath-track::before { left: 27px; } }

.lv { position: relative; display: flex; gap: 18px; padding-bottom: 26px; }
.lv-num { flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--str-card);
  border: 2px solid var(--str-line); font-family: 'Montserrat', sans-serif;
  font-weight: 700; color: var(--str-ink-soft); z-index: 1; transition: .3s; }
@media (min-width: 820px) { .lv-num { width: 56px; height: 56px; font-size: 1.1rem; } }
.lv.is-done .lv-num { background: var(--str-coral); border-color: var(--str-coral); color: #fff; }
.lv.is-open .lv-num { border-color: var(--str-coral); color: var(--str-coral); }

.lv-body { flex: 1; min-width: 0; background: var(--str-card);
  border: 1px solid var(--str-line); border-radius: var(--str-r); padding: 22px 22px 18px;
  box-shadow: var(--shadow-sm); }
.lv-name { font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--str-coral);
  display: flex; align-items: center; gap: 8px; }
.lv-badge { font-size: 1rem; filter: grayscale(1) opacity(.4); transition: .3s; }
.lv-badge.is-on { filter: none; }
.lv-sub { font-size: clamp(1.25rem, 4.2vw, 1.6rem); margin: .16em 0 .5em;
  text-transform: none; letter-spacing: -.01em; }
.lv-blurb { color: var(--str-ink-soft); font-size: .98rem; max-width: 52ch; }
.lv-partial { margin-top: .5em; font-size: .78rem; color: var(--str-warn);
  font-weight: 600; letter-spacing: .03em; }

.lv-lessons { list-style: none; margin: 16px 0 4px; padding: 0; }
/* wrap: the "in development" / "interactive" tags are nowrap, and on a 375px
   phone a long lesson title plus a tag overflowed the viewport and gave the
   whole hub a horizontal scrollbar. */
.ll a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
  padding: 7px 0; font-size: .96rem; border-bottom: 1px solid #F2EFE9; }
.lv-lessons li:last-child a { border-bottom: 0; }
.ll a:hover { color: var(--str-coral); }
.ll-tick { color: var(--str-line); font-size: .7rem; flex: none; }
.ll.is-done .ll-tick { color: var(--str-ok); }
.ll.is-done a { color: var(--str-ink-soft); }
.ll-n { color: var(--str-ink-soft); font-variant-numeric: tabular-nums;
  font-size: .82rem; flex: none; }
.ll-soon a { color: #9AA4AC; }
.ll-tag { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--str-warn); background: var(--str-warn-bg);
  padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.ll-int { color: var(--str-coral); background: var(--str-coral-wash); }

.lv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--str-line); }
.lv-bar { flex: 1 1 110px; height: 5px; border-radius: 99px; background: var(--str-line);
  overflow: hidden; min-width: 90px; }
.lv-fill { display: block; height: 100%; width: 0; background: var(--str-coral);
  border-radius: 99px; transition: width .6s ease; }
.lv-cta { font-family: 'Montserrat', sans-serif; font-size: .76rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--str-coral); }
.lv-cta:hover { color: var(--str-coral-dp); text-decoration: underline;
  text-underline-offset: 4px; }

/* ---------- badge shelf ---------- */
.lsec { padding: 54px 0 60px; }
.bdg-grid { list-style: none; display: grid; gap: 14px; padding: 0; margin-top: 30px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.bdg { background: var(--str-card); border: 1px solid var(--str-line);
  border-radius: var(--str-r); padding: 18px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bdg-i { font-size: 1.8rem; filter: grayscale(1) opacity(.32); transition: .35s; }
.bdg.is-on .bdg-i { filter: none; transform: scale(1.06); }
.bdg.is-on { border-color: var(--str-coral-lt); background: var(--str-coral-wash); }
.bdg-n { font-family: 'Montserrat', sans-serif; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.bdg-u { font-size: .76rem; color: var(--str-ink-soft); line-height: 1.4; }

/* ---------- lesson page ---------- */
.lcrumbs { font-size: .78rem; color: var(--str-ink-soft); margin-bottom: 18px; }
.lcrumbs a:hover { color: var(--str-coral); text-decoration: underline; text-underline-offset: 3px; }
.lcrumbs span { opacity: .5; margin: 0 2px; }

.lhead { padding: 30px 0 6px; }
.lhead-e { font-family: 'Montserrat', sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--str-coral); }
.lhead-h { font-family: 'Montserrat', sans-serif; font-size: clamp(1.8rem, 6.2vw, 2.7rem);
  line-height: 1.16; margin: .28em 0 .32em; text-transform: none; letter-spacing: -.015em; }
.lhead-s { color: var(--str-ink-soft); font-size: 1.06rem; max-width: var(--str-measure); }
.lhead-m { display: flex; gap: 14px; align-items: center; margin-top: 16px;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--str-ink-soft); font-weight: 600; }
.lhead-xp { color: var(--str-coral); background: var(--str-coral-wash);
  padding: 3px 10px; border-radius: 99px; }

.lbody { padding: 8px 0 20px; }
.lterms { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--str-line);
  font-size: .9rem; color: var(--str-ink-soft); }
.lterms span { font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  font-size: .74rem; }
.lterms a { text-decoration: underline; text-decoration-color: var(--str-coral-lt);
  text-underline-offset: 3px; }
.lterms a:hover { color: var(--str-coral); }

.lsoon { background: var(--str-warn-bg); border: 1px solid #EBDCB6;
  border-radius: var(--str-r); padding: 24px; max-width: var(--str-measure); }
.lsoon-e { font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--str-warn);
  margin-bottom: .7em; }
.lsoon p + p { margin-top: .9em; }

.ldone-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 40px 0 8px; }
.ldone.is-done { background: var(--str-ok); border-color: var(--str-ok); }
.ldone-msg { font-size: .88rem; color: var(--str-ok); font-weight: 600; }

/* ---------- quiz ---------- */
.lquiz { padding: 46px 0 52px; border-top: 1px solid var(--str-line); }
.lquiz-head { margin-bottom: 26px; }
.lquiz-h { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; margin: .2em 0 .3em;
  text-transform: none; letter-spacing: -.01em; }
.lquiz-s { color: var(--str-ink-soft); font-size: .95rem; }
.qlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.qq { background: var(--str-card); border: 1px solid var(--str-line);
  border-radius: var(--str-r); padding: 22px; }
.qq-n { font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--str-ink-soft); }
.qq-q { font-size: 1.08rem; font-weight: 600; margin: .45em 0 1em; line-height: 1.45; }
.qopts { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.qopt { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--str-line);
  background: var(--str-page); font: inherit; font-size: .97rem; color: inherit;
  cursor: pointer; transition: border-color .15s, background .15s; }
.qopt:hover:not(:disabled) { border-color: var(--str-coral); background: var(--str-coral-wash); }
.qopt:focus-visible { outline: 3px solid var(--str-coral); outline-offset: 2px; }
.qopt:disabled { cursor: default; }
.qopt-k { flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--str-line); color: var(--str-ink); display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; margin-top: 1px; }
.qopt.is-right { border-color: var(--str-ok); background: var(--str-ok-bg); }
.qopt.is-right .qopt-k { background: var(--str-ok); color: #fff; }
.qopt.is-wrong { border-color: var(--str-bad); background: var(--str-bad-bg); }
.qopt.is-wrong .qopt-k { background: var(--str-bad); color: #fff; }
.qfb { margin-top: 12px; font-size: .95rem; line-height: 1.6; padding: 11px 14px;
  border-radius: 10px; display: none; }
.qfb.show { display: block; }
.qfb.ok  { background: var(--str-ok-bg);  color: var(--str-ok);  }
.qfb.bad { background: var(--str-bad-bg); color: var(--str-bad); }
.lquiz-foot { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.qscore { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; }
.qscore.pass { color: var(--str-ok); }
.qscore.fail { color: var(--str-warn); }
.lquiz .btn-ghost, .cert-actions .btn-ghost {
  color: var(--str-ink); border-color: var(--str-ink-soft); background: transparent; }
.lquiz .btn-ghost:hover, .cert-actions .btn-ghost:hover {
  background: var(--str-ink); color: #fff; border-color: var(--str-ink); }

/* ---------- go deeper + prev/next ---------- */
.lgd { padding: 8px 0 42px; }
.lgd-in { background: var(--str-coral-wash); border: 1px solid var(--str-coral-lt);
  border-radius: var(--str-r); padding: 22px; }
.lgd-h { font-family: 'Montserrat', sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--str-coral);
  margin-bottom: 12px; }
.gd-card { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 13px 16px; background: var(--str-card); border: 1px solid var(--str-coral-lt);
  border-radius: 10px; margin-bottom: 9px; font-weight: 500; transition: .16s; }
.gd-card:last-child { margin-bottom: 0; }
.gd-card:hover { transform: translateX(3px); border-color: var(--str-coral); }
.gd-go { color: var(--str-coral); font-weight: 700; flex: none; }

.lpn { padding: 0 0 56px; }
.lpn-in { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .lpn-in { grid-template-columns: 1fr 1fr; } }
.pn { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--str-line); border-radius: var(--str-r);
  background: var(--str-card); transition: .16s; }
.pn:hover { border-color: var(--str-coral); }
.pn span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--str-coral); font-weight: 700; }
.pn strong { font-weight: 600; font-size: 1rem; }
.pn-n { text-align: right; }

/* ---------- glossary ---------- */
.ghero { padding: 34px 0 26px; }
.ghero-h { font-size: clamp(2.1rem, 7vw, 3.2rem); margin-bottom: .2em; }
.ghero-p { color: var(--str-ink-soft); max-width: 44rem; font-size: 1.04rem; }
.gfilter { margin-top: 26px; }
.gsearch input { width: 100%; max-width: 460px; padding: 13px 16px; font: inherit;
  font-size: 1rem; border: 1.5px solid var(--str-line); border-radius: 10px;
  background: var(--str-card); color: var(--str-ink); }
.gsearch input:focus-visible { outline: 3px solid var(--str-coral); outline-offset: 1px;
  border-color: var(--str-coral); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fchip { font: inherit; font-size: .8rem; font-weight: 600; padding: 7px 14px;
  border-radius: 99px; border: 1.5px solid var(--str-line); background: var(--str-card);
  color: var(--str-ink-soft); cursor: pointer; transition: .15s; }
.fchip:hover { border-color: var(--str-coral); color: var(--str-coral); }
.fchip.is-on { background: var(--str-coral); border-color: var(--str-coral); color: #fff; }
.gcount { margin-top: 14px; font-size: .84rem; color: var(--str-ink-soft); }

.glist { padding: 10px 0 60px; }
.gcat { margin-bottom: 38px; }
.gcat-h { font-family: 'Montserrat', sans-serif; font-size: .88rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--str-coral); margin-bottom: 14px;
  padding-bottom: 9px; border-bottom: 2px solid var(--str-coral-lt);
  display: flex; align-items: center; gap: 10px; }
.gcat-n { font-size: .72rem; color: var(--str-ink-soft); background: var(--str-card);
  border: 1px solid var(--str-line); border-radius: 99px; padding: 1px 9px; }
.gterm-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.gterm { display: flex; flex-direction: column; gap: 4px; padding: 15px 17px;
  background: var(--str-card); border: 1px solid var(--str-line);
  border-radius: 11px; transition: .16s; }
.gterm:hover { border-color: var(--str-coral); transform: translateY(-2px);
  box-shadow: var(--shadow-sm); }
.gterm-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .92rem;
  color: var(--str-ink); }
.gterm-d { font-size: .87rem; color: var(--str-ink-soft); line-height: 1.5; }
.gnone { text-align: center; padding: 40px 0; color: var(--str-ink-soft); }

/* ---------- term page ---------- */
.term { padding: 30px 0 60px; }
.term-cat { font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--str-coral); }
.term-h { font-family: 'Montserrat', sans-serif; font-size: clamp(2rem, 7vw, 3rem);
  margin: .2em 0 .3em; text-transform: none; letter-spacing: -.015em; }
.term-exp { display: block; font-size: 1rem; font-weight: 400; color: var(--str-ink-soft);
  letter-spacing: 0; text-transform: none; margin-top: .3em; }
.term-short { font-size: 1.22rem; line-height: 1.6; color: var(--str-ink);
  padding: 18px 20px; background: var(--str-coral-wash);
  border-left: 4px solid var(--str-coral); border-radius: 0 11px 11px 0; }
.term-ex { background: var(--str-ok-bg); border: 1px solid #CFE2D5;
  border-radius: var(--str-r); padding: 18px 20px; }
.term-ex p { max-width: none; }
.term-taught { margin-top: 2em; padding: 14px 18px; background: var(--str-card);
  border: 1px solid var(--str-line); border-radius: 11px; font-size: .95rem; }
.term-taught a { color: var(--str-coral); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; }
.rel-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-chip { font-size: .84rem; font-weight: 600; padding: 7px 14px; border-radius: 99px;
  background: var(--str-card); border: 1.5px solid var(--str-line); transition: .15s; }
.rel-chip:hover { border-color: var(--str-coral); color: var(--str-coral); }
.term-back { margin-top: 2.6em; font-weight: 600; }
.term-back a { color: var(--str-coral); }

/* ---------- exam + certificate ---------- */
.exhero { padding: 34px 0 10px; }
.exhero-h { font-size: clamp(2.1rem, 7vw, 3.2rem); margin: .12em 0 .3em; }
.exhero-p { color: var(--str-ink-soft); }
.exhero-x { margin-top: 1em; color: var(--str-coral); font-weight: 600; }
.exam .qq { border-left: 3px solid var(--str-line); }
.exam-pass { width: 100%; margin-top: 6px; }

.cert { padding: 40px 0 64px; }
.cert-h { font-size: clamp(1.9rem, 6.4vw, 2.9rem); margin-bottom: .3em; }
.cert-p { color: var(--str-ink-soft); max-width: 46rem; }
.cert-field { display: block; margin: 26px 0 18px; max-width: 420px; }
.cert-field span { display: block; font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--str-ink-soft);
  margin-bottom: 7px; }
.cert-field input { width: 100%; padding: 13px 16px; font: inherit; font-size: 1rem;
  border: 1.5px solid var(--str-line); border-radius: 10px; background: var(--str-card); }
.cert-field input:focus-visible { outline: 3px solid var(--str-coral); outline-offset: 1px; }
.cert-canvas-wrap { margin: 8px 0 20px; border: 1px solid var(--str-line);
  border-radius: var(--str-r); overflow: hidden; background: var(--str-card); }
#certCanvas { width: 100%; height: auto; display: block; }
.cert-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cert-email { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--str-line); }
.cert-sh { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; margin-bottom: .4em;
  text-transform: none; letter-spacing: 0; }
.cert-form { max-width: 420px; margin-top: 18px; background: none; padding: 0; }

/* ---------- interactive modules ---------- */
.lmod { margin: 2.2em 0; }
.lmod-ns { padding: 18px 20px; background: var(--str-warn-bg); border: 1px solid #EBDCB6;
  border-radius: var(--str-r); font-size: .95rem; }
.mod { background: var(--str-card); border: 1px solid var(--str-line);
  border-radius: var(--str-r); overflow: hidden; box-shadow: var(--shadow-sm); }
.mod-head { background: var(--str-ink); color: #fff; padding: 15px 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mod-t { font-family: 'Montserrat', sans-serif; font-size: .84rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; }
.mod-meta { font-size: .82rem; color: var(--ps-sand); font-variant-numeric: tabular-nums;
  font-weight: 700; }
.mod-b { padding: 20px; }
.mod-b p { max-width: none; }
.mod-foot { padding: 14px 20px; border-top: 1px solid var(--str-line);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: #FBF9F5; }
.mod-msg { font-size: .9rem; font-weight: 600; }
.mod-msg.ok { color: var(--str-ok); }
.mod-msg.bad { color: var(--str-bad); }

/* sliders (real net + break-even + cleaning fee) */
.f-row { display: grid; gap: 6px; margin-bottom: 16px; }
.f-row label { font-size: .84rem; font-weight: 600; color: var(--str-ink-soft);
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.f-row output { font-family: 'Montserrat', sans-serif; font-weight: 700;
  color: var(--str-coral); font-variant-numeric: tabular-nums; }
.f-row input[type=range] { width: 100%; accent-color: var(--str-coral); height: 26px; }
.f-row input[type=number] { width: 100%; padding: 11px 13px; font: inherit;
  border: 1.5px solid var(--str-line); border-radius: 9px; background: var(--str-page); }
.f-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .f-grid { grid-template-columns: 1fr 1fr; } }

.res { margin-top: 6px; border-top: 1px solid var(--str-line); padding-top: 14px; }
.res-row { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0;
  font-size: .95rem; border-bottom: 1px solid #F2EFE9; }
.res-row:last-child { border-bottom: 0; }
.res-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-row.neg b { color: var(--str-bad); }
.res-row.tot { margin-top: 8px; padding-top: 12px; border-top: 2px solid var(--str-ink);
  border-bottom: 0; font-size: 1.1rem; font-weight: 700; }
.res-row.tot.good b { color: var(--str-ok); }
.res-row.tot.bad  b { color: var(--str-bad); }
.verdict { margin-top: 14px; padding: 14px 16px; border-radius: 10px; font-size: .95rem;
  line-height: 1.6; }
.verdict.good { background: var(--str-ok-bg);  color: var(--str-ok); }
.verdict.warn { background: var(--str-warn-bg); color: var(--str-warn); }
.verdict.bad  { background: var(--str-bad-bg); color: var(--str-bad); }

/* jargon slayer */
.js-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .js-grid { grid-template-columns: 1fr 1fr; } }
.js-col h4 { font-family: 'Montserrat', sans-serif; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--str-ink-soft); margin-bottom: 8px; }
.js-opt { display: block; width: 100%; text-align: left; padding: 11px 14px;
  border-radius: 10px; border: 1.5px solid var(--str-line); background: var(--str-page);
  font: inherit; font-size: .93rem; color: inherit; cursor: pointer; margin-bottom: 8px;
  transition: .14s; }
.js-opt:hover:not(:disabled) { border-color: var(--str-coral); }
.js-opt:focus-visible { outline: 3px solid var(--str-coral); outline-offset: 2px; }
.js-opt.is-sel { border-color: var(--str-coral); background: var(--str-coral-wash); }
.js-opt.is-hit { border-color: var(--str-ok); background: var(--str-ok-bg); opacity: .45; }
.js-opt.is-miss { border-color: var(--str-bad); background: var(--str-bad-bg); }
.js-opt:disabled { cursor: default; }

/* assumption graveyard flip cards */
.ag-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ag-grid { grid-template-columns: 1fr 1fr; } }
.ag { perspective: 1400px; }
/* Both faces share one grid cell, so the card is as tall as the taller face
   and nothing scrolls inside it. Absolute positioning needed a fixed height,
   and the backs of cards 2 and 11 are comfortably past any number worth
   hard-coding. */
.ag-in { display: grid; transform-style: preserve-3d; transition: transform .6s;
  min-height: 240px; }
.ag.is-flipped .ag-in { transform: rotateY(180deg); }
.ag-f, .ag-bk { grid-area: 1 / 1; backface-visibility: hidden;
  border-radius: var(--str-r); padding: 20px; display: flex; flex-direction: column;
  border: 1px solid var(--str-line); background: var(--str-card); }
.ag-f { border-top: 5px solid var(--str-ink); }
.ag-bk { transform: rotateY(180deg); border-top: 5px solid var(--str-bad);
  background: var(--str-bad-bg); }
.ag-n { font-family: 'Montserrat', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--str-ink-soft); }
.ag-q { font-size: 1.08rem; font-style: italic; font-weight: 600; line-height: 1.42;
  margin: .5em 0 auto; }
.ag-btns { display: flex; gap: 8px; margin-top: 16px; }
.ag-btns button { flex: 1; font: inherit; font-size: .82rem; font-weight: 700;
  padding: 10px 8px; border-radius: 9px; border: 1.5px solid var(--str-line);
  background: var(--str-page); cursor: pointer; transition: .14s; }
.ag-btns button:hover { border-color: var(--str-coral); color: var(--str-coral); }
.ag-btns button:focus-visible { outline: 3px solid var(--str-coral); outline-offset: 2px; }
.ag-v { font-family: 'Montserrat', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; }
.ag-v.ok { color: var(--str-ok); }
.ag-v.bad { color: var(--str-bad); }
.ag-d { font-size: .9rem; line-height: 1.6; margin-top: .5em; }
.ag-d b { display: block; margin-top: .7em; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--str-ink-soft); }
.ag-back { margin-top: auto; padding-top: 12px; font-size: .78rem; font-weight: 700;
  color: var(--str-coral); background: none; border: 0; cursor: pointer; font-family: inherit;
  text-align: left; }

/* self-assessment */
.sa-q { padding: 16px 0; border-bottom: 1px solid var(--str-line); }
.sa-q:last-of-type { border-bottom: 0; }
.sa-q p { font-weight: 600; margin-bottom: 10px; font-size: .98rem; }
.sa-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-opts button { font: inherit; font-size: .85rem; padding: 8px 15px; border-radius: 99px;
  border: 1.5px solid var(--str-line); background: var(--str-page); cursor: pointer;
  transition: .14s; }
.sa-opts button:hover { border-color: var(--str-coral); }
.sa-opts button:focus-visible { outline: 3px solid var(--str-coral); outline-offset: 2px; }
.sa-opts button.is-on { background: var(--str-coral); border-color: var(--str-coral); color: #fff; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lring-fg, .lbar-fill, .lv-fill, .ag-in, .gd-card, .gterm, .pn, a.gl::after,
  .bdg-i { transition: none !important; }
  .ag.is-flipped .ag-in { transform: none; }
  .ag-f { display: none; }
  .ag:not(.is-flipped) .ag-bk { display: none; }
  .ag-bk { transform: none; }
  .ag-in { min-height: 0; }
}

/* ---------- print (certificate) ---------- */
@media print {
  .site-header, .site-footer, .lbar, .cert-email, .cert-actions, .cert-field,
  .lcrumbs { display: none !important; }
  .cert { padding: 0; }
}

/* ============================================================
   MASCOTS — Milo (the veteran) and Cooper (the rookie)
   Inlined SVG, so linework using currentColor inherits the tone
   of whatever call-out it sits in: Milo runs red inside a
   warning, sand inside Real Talk, coral inside a Rookie
   Question. The real art decides how much of that it takes up.

   Every mascot is decorative. Nothing here is the only signal
   of a state — hide images and every quiz result, badge and
   call-out still reads correctly.
   ============================================================ */
.mascot {
  display: inline-block; flex: none; line-height: 0;
  /* width/height are set inline from the size prop, so the box is
     reserved before the SVG paints and nothing reflows. */
}
.mascot svg { display: block; width: 100%; height: 100%; }
.mascot.is-flipped { transform: scaleX(-1); }

.cal-warn   .mascot { color: var(--str-bad); }
.cal-real   .mascot { color: var(--ps-sand-deep); }
.cal-rookie .mascot { color: var(--str-coral); }

/* Below 640px the margin dogs come out entirely rather than squeezing the
   text column — the measure matters more than the joke. */
@media (max-width: 640px) {
  .cal > .mascot { display: none; }
}

/* ---------- Rookie Question call-out ----------
   Deliberately not a warning. Warning is alarming (red, Milo yelling);
   this is friendly and curious — coral, a question in the reader's own
   voice, then the straight answer. */
.cal-rookie {
  background: #fff; border-color: var(--str-coral-lt);
  border-left: 4px solid var(--str-coral);
}
.cal-rookie .cal-h { color: var(--str-coral); }
.rq-q {
  font-size: 1.06rem !important; font-weight: 600; font-style: italic;
  color: var(--str-ink); line-height: 1.45; margin-bottom: .6em;
}
.rq-a { color: var(--str-ink-soft); }

/* ---------- hub hero pair ---------- */
.lhero-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 36px; }
.lhero-words { flex: 1 1 min(100%, 30rem); min-width: 0; }
.lhero-dogs { flex: 0 1 auto; max-width: 340px; }
.lhero-dogs .mascot { color: var(--ps-sand); }
.lhero-dogs-n {
  margin-top: 10px; font-size: .84rem; line-height: 1.5;
  color: rgba(255, 255, 255, .62); max-width: 320px;
}
.lhero-dogs-n strong { color: var(--ps-sand); font-weight: 700; }
@media (max-width: 760px) {
  .lhero-dogs { max-width: 260px; }
  .lhero-dogs .mascot { width: 192px !important; height: 96px !important; }
}

/* ---------- quiz correct state ---------- */
.qfb { display: none; }
.qfb.show { display: flex; align-items: flex-start; gap: 12px; }
.qfb .mascot { color: var(--str-ok); margin-top: -2px; }
@media (max-width: 560px) { .qfb .mascot { display: none; } }

/* ---------- badge unlock ---------- */
.badge-pop {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 14px;
  background: var(--str-ink); color: #fff; padding: 14px 22px 14px 16px;
  border-radius: 18px; box-shadow: 0 16px 48px rgba(0, 0, 0, .34);
  max-width: min(92vw, 26rem);
}
.badge-pop .mascot { color: var(--ps-sand); }
.badge-pop-t { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ps-sand); font-weight: 700; }
.badge-pop-n { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; }
.badge-pop.is-in { animation: badgePop .42s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes badgePop {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---------- certificate + 404 ---------- */
.cert-top { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.cert-top .mascot { color: var(--str-coral); }
.cert-top > div { flex: 1 1 22rem; min-width: 0; }

.l404 { padding: 60px 0 80px; background: var(--str-page); color: var(--str-ink); }
.l404 .mascot { color: var(--str-coral); margin-bottom: 18px; }
.l404-h { font-size: clamp(1.7rem, 6vw, 2.7rem); margin-bottom: .4em; }
.l404-p { color: var(--str-ink-soft); max-width: 40rem; margin-bottom: 1.6em; }
.l404-links { display: flex; flex-wrap: wrap; gap: 12px; }
.l404 .btn-ghost { color: var(--str-ink); border-color: var(--str-ink-soft); }
.l404 .btn-ghost:hover { background: var(--str-ink); color: #fff; }

/* Nothing bounces twice — and under reduced motion, nothing bounces at all. */
@media (prefers-reduced-motion: reduce) {
  .badge-pop.is-in { animation: none; }
  .mascot, .mascot svg { transition: none !important; animation: none !important; }
}

/* ---------- stakeholder map (Level 3) ---------- */
.sm-group { margin-bottom: 18px; }
.sm-group h4 {
  font-family: 'Montserrat', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--str-ink-soft);
  margin-bottom: 8px;
}
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-chip {
  font: inherit; font-size: .86rem; font-weight: 600; padding: 9px 15px;
  border-radius: 99px; border: 1.5px solid var(--str-line);
  background: var(--str-page); color: var(--str-ink); cursor: pointer;
  transition: .14s; text-align: left;
}
.sm-chip:hover { border-color: var(--str-coral); color: var(--str-coral); }
.sm-chip:focus-visible { outline: 3px solid var(--str-coral); outline-offset: 2px; }
.sm-chip.is-on {
  background: var(--str-coral); border-color: var(--str-coral); color: #fff;
}
.sm-detail:empty { display: none; }
.sm-detail {
  margin-top: 6px; padding: 18px 20px; border-radius: var(--str-r);
  background: var(--str-coral-wash); border: 1px solid var(--str-coral-lt);
}
.sm-name {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--str-coral-dp); margin-bottom: .6em;
}
.sm-dl { margin: 0; }
.sm-dl dt {
  font-family: 'Montserrat', sans-serif; font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--str-ink-soft);
  margin-top: .9em;
}
.sm-dl dd { margin: .25em 0 0; font-size: .95rem; line-height: 1.6; }
.sm-dl dd.p { color: var(--str-bad); font-weight: 500; }
.sm-more {
  display: inline-block; margin-top: 1em; font-family: 'Montserrat', sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--str-coral);
}
.sm-more:hover { color: var(--str-coral-dp); text-decoration: underline;
  text-underline-offset: 3px; }