/* Synch Academy — synchsupport.org/academy only (loaded after site.css).
   Look: warm paper and orange ink in light mode, a late-night study (dark paper, glowing orange ink)
   in dark mode. The page tells one story: an ink path runs from a first lesson to a verified
   certificate in the hero, a thread follows you down the chapters, and each chapter plays a small
   demo as it scrolls in (academy.js).
   Rules, same as the Architect page: everything is scoped under body.acad-page main, the Synch nav
   and footer keep the site's colours, and motion only exists behind html.js-decode (set by
   theme-init.js, never when animations are off). The un-animated state is always the finished page. */

/* ── colours: light / dark / dark-by-device, the same three-way pattern as site.css ── */
.acad-page main {
  --blue: #b4540e; --blue-ink: #9a470b; --blue-wash: #fbeadb;
  --bg: #fbf6ee; --bg-2: #f5ecdf; --panel: #fffdf9; --line: #eadccb;
  --ink: #23170e; --ink-2: #4d3a2b; --mute: #78624f;
  --or: #b4540e; --or-bright: #e8731c; --or-soft: #f6c79d; --on-or: #fff;
  --ok: #2c7a4b; --bad: #b42318;
  --guide: rgba(122, 84, 52, .22); --glow: rgba(232, 115, 28, .25);
  --wax: #c2410c; --wax-2: #ea6a24;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --dots: radial-gradient(circle at 1px 1px, rgba(122, 84, 52, .13) 1px, transparent 1.6px);
  --shadow: 0 1px 2px rgba(60, 34, 12, .06), 0 10px 28px rgba(60, 34, 12, .08);
}
:root[data-theme="dark"] .acad-page main {
  --blue: #ff9a4d; --blue-ink: #ffb57a; --blue-wash: #2a1a0e;
  --bg: #130d08; --bg-2: #1a120b; --panel: #21170f; --line: #3a2a1d;
  --ink: #fbefe3; --ink-2: #e3cfbb; --mute: #b39a83;
  --or: #ff9a4d; --or-bright: #ffae6b; --or-soft: #7a3a0c; --on-or: #1a0d03;
  --ok: #6fd49a; --bad: #ff8a80;
  --guide: rgba(255, 190, 140, .16); --glow: rgba(255, 154, 77, .45);
  --wax: #e8601c; --wax-2: #ff8a3d;
  --dots: radial-gradient(circle at 1px 1px, rgba(255, 170, 110, .09) 1px, transparent 1.6px);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .acad-page main {
    --blue: #ff9a4d; --blue-ink: #ffb57a; --blue-wash: #2a1a0e;
    --bg: #130d08; --bg-2: #1a120b; --panel: #21170f; --line: #3a2a1d;
    --ink: #fbefe3; --ink-2: #e3cfbb; --mute: #b39a83;
    --or: #ff9a4d; --or-bright: #ffae6b; --or-soft: #7a3a0c; --on-or: #1a0d03;
    --ok: #6fd49a; --bad: #ff8a80;
    --guide: rgba(255, 190, 140, .16); --glow: rgba(255, 154, 77, .45);
    --wax: #e8601c; --wax-2: #ff8a3d;
    --dots: radial-gradient(circle at 1px 1px, rgba(255, 170, 110, .09) 1px, transparent 1.6px);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
/* "Higher contrast" still wins over the warm palette */
:root.a11y-contrast .acad-page main { --ink: #000; --ink-2: #1d130b; --mute: #3b2a1c; --line: #8a6f58; --blue-ink: #6e3205; }
:root.a11y-contrast[data-theme="dark"] .acad-page main { --ink: #fff; --ink-2: #fff4ea; --mute: #e6d2bf; --line: #8c6e55; --blue-ink: #ffd0a8; }
@media (prefers-color-scheme: dark) {
  :root.a11y-contrast:not([data-theme="light"]) .acad-page main { --ink: #fff; --ink-2: #fff4ea; --mute: #e6d2bf; --line: #8c6e55; --blue-ink: #ffd0a8; }
}

.acad-page main { position: relative; overflow-x: clip; background: var(--dots) 0 0 / 22px 22px, var(--bg); color: var(--ink); }
.acad-page main .section--alt { background: color-mix(in srgb, var(--bg-2) 86%, transparent); }
.acad-page main ::selection { background: color-mix(in srgb, var(--or-bright) 30%, transparent); }
.acad-page main h1, .acad-page main h2, .acad-page main h3 { font-family: var(--serif); letter-spacing: -.01em; }
:root.a11y-font .acad-page main h1, :root.a11y-font .acad-page main h2, :root.a11y-font .acad-page main h3 { font-family: inherit; }
.acad-page main .eyebrow { color: var(--blue-ink); }
.acad-page main .btn--primary { background: var(--or); border-color: var(--or); color: var(--on-or); box-shadow: 0 8px 22px -12px var(--glow); }
.acad-page main .btn--primary:hover { background: var(--blue-ink); border-color: var(--blue-ink); }
.acad-page main .btn:not(.btn--primary) { background: var(--panel); border-color: var(--line); color: var(--ink); }
.acad-page main .btn:not(.btn--primary):hover { border-color: var(--or); }

/* ── hero ── */
.acad-hero { position: relative; overflow: hidden; padding: 72px 0 64px; border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 55% 70% at 78% 40%, var(--glow), transparent 70%); }
.acad-hero .wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 901px) { .acad-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.acad-kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .02em; color: var(--blue-ink); margin-bottom: 16px; }
.acad-kicker img { border-radius: 7px; }
.acad-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; }
.acad-hero .lead { margin-top: 18px; color: var(--ink-2); max-width: 54ch; }
.acad-hero .btn-row { margin-top: 26px; }
.acad-hero__note { margin-top: 14px; font-size: .92rem; }
.acad-hero__art { display: flex; justify-content: center; }
.acad-path { width: 100%; max-width: 560px; height: auto; overflow: visible; }
@media (max-width: 900px) {
  .acad-hero { padding: 40px 0 48px; }
  .acad-path { max-width: 440px; }
}

.ink-under { position: relative; white-space: nowrap; }
.ink-under svg { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .36em; overflow: visible; }
.ink-under path { fill: none; stroke: var(--or-bright); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }

.ah-guide { fill: none; stroke: var(--guide); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }
.ah-ink { fill: none; stroke: var(--or-bright); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px var(--glow)); }
.ah-glint { display: none; }
.ah-nib { display: none; fill: var(--or-bright); filter: drop-shadow(0 0 8px var(--or-bright)); opacity: 0; }
.ah-node, .ah-label, .c-seal, .c-splash, .c-verified, .ah-cert-rise { transform-box: fill-box; transform-origin: center; }
.node-ring { fill: var(--panel); stroke: var(--or-bright); stroke-width: 3; }
.node-dot { fill: var(--or-bright); }
.ah-label .lab { font: 700 17px var(--serif); fill: var(--ink); }
.ah-label .sub { font: 500 12.5px var(--font); fill: var(--mute); }
.c-shadow { fill: rgba(60, 30, 8, .14); }
.c-paper { fill: var(--panel); stroke: var(--line); }
.c-border { fill: none; stroke: var(--or-soft); stroke-width: 1.5; }
.c-title { font: 700 11px var(--font); letter-spacing: .22em; fill: var(--mute); }
.c-course { font: 700 15px var(--serif); fill: var(--ink); }
.c-line { fill: var(--line); }
.c-ref { font: 600 9.5px ui-monospace, 'Cascadia Mono', Consolas, monospace; fill: var(--mute); letter-spacing: .04em; }
.c-ok { font: 700 11px var(--font); fill: var(--ok); }
.c-seal__wax { fill: var(--wax); }
.c-seal__rim { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.4; stroke-dasharray: 2 2.4; }
.c-seal__star { fill: rgba(255, 245, 235, .92); }
.c-splash { fill: none; stroke: var(--wax-2); stroke-width: 2; opacity: 0; }

/* hero motion (only behind js-decode): ink draws, stops pop as the pen passes, the certificate
   rises, the seal stamps, then "Verified" appears. Done by ~3.6s; the buttons never wait. */
.js-decode .ah-nib { display: inline; }
.js-decode .ah-ink { animation: ah-draw 2.2s cubic-bezier(.45, 0, .25, 1) .3s both; }
.js-decode .ah-guide { animation: ah-fade .8s ease both; }
.js-decode .ah-node { animation: ah-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.js-decode .ah-label { animation: ah-rise .5s ease both; }
.js-decode .n1 { animation-delay: .85s; } .js-decode .l1 { animation-delay: .95s; }
.js-decode .n2 { animation-delay: 1.29s; } .js-decode .l2 { animation-delay: 1.39s; }
.js-decode .n3 { animation-delay: 1.62s; } .js-decode .l3 { animation-delay: 1.72s; }
.js-decode .n4 { animation-delay: 1.97s; } .js-decode .l4 { animation-delay: 2.07s; }
.js-decode .ah-cert-rise { animation: ah-cert .7s cubic-bezier(.2, .8, .2, 1) 2.3s both; }
.js-decode .c-seal { animation: ah-stamp .55s cubic-bezier(.5, 0, .3, 1.4) 3s both; }
.js-decode .c-splash { animation: ah-splash .7s ease-out 3.22s both; }
.js-decode .c-verified { animation: ah-rise .45s ease 3.45s both; }
.js-decode .ink-under path { animation: ah-draw .9s cubic-bezier(.5, 0, .2, 1) 1.1s both; }
.js-decode .ah-glint { display: inline; fill: none; stroke: #fff6ec; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .05 .95; opacity: .7;
  animation: ah-glint 2.6s ease-in-out 4.2s infinite both; }
.js-decode .c-seal__wax { animation: ah-breathe 5s ease-in-out 4s infinite; }
@keyframes ah-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ah-fade { from { opacity: 0; } }
@keyframes ah-pop { from { transform: scale(0); opacity: 0; } }
@keyframes ah-rise { from { transform: translateY(8px); opacity: 0; } }
@keyframes ah-cert { from { transform: translateY(26px) scale(.94); opacity: 0; } }
@keyframes ah-stamp { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.88); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ah-splash { from { transform: scale(1); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }
@keyframes ah-glint { 0% { stroke-dashoffset: 1.05; opacity: 0; } 15% { opacity: .75; } 70% { opacity: .75; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ah-breathe { 50% { fill: var(--wax-2); } }
:root[data-theme="dark"] .acad-page .ah-glint { stroke: #fff1df; }

/* ── the thread down the page: a faint line in the left gutter that inks in as you read ── */
.acad-thread { display: none; }
@media (min-width: 1260px) {
  .acad-ready .acad-thread { display: block; position: absolute; top: 0; bottom: 0; left: calc(50% - 600px); width: 2px; pointer-events: none;
    background: repeating-linear-gradient(to bottom, var(--guide) 0 4px, transparent 4px 11px); z-index: 1; }
  .acad-thread__ink { position: absolute; inset: 0; background: var(--or-bright); transform-origin: top; transform: scaleY(var(--p, 0)); box-shadow: 0 0 10px var(--glow); }
  .acad-thread__dot { position: absolute; left: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); border: 3px solid var(--guide);
    transition: border-color .3s, background .3s, transform .3s; }
  .acad-thread__dot.is-lit { border-color: var(--or-bright); background: var(--or-bright); transform: scale(1.1); }
}

/* ── chapter demos play when they scroll in (academy.js adds .is-on). Until then their animations
   wait on frame one; without academy.js they simply run (off screen) and finish. ── */
html.acad-ready [data-play]:not(.is-on), html.acad-ready [data-play]:not(.is-on) * { animation-play-state: paused !important; }

/* ── 1 · spectrum ── */
.spectrum { margin-top: 36px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--panel); box-shadow: var(--shadow); padding: 28px; }
.spectrum__stage { display: grid; gap: 28px; align-items: center; }
@media (min-width: 821px) { .spectrum__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.crowd { position: relative; height: 210px; border-radius: var(--radius); background: var(--bg-2); overflow: hidden; display: none; }
.spectrum.is-live .crowd { display: block; }
.crowd i { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--or-bright);
  transition: transform .7s cubic-bezier(.3, 1.2, .4, 1), opacity .45s ease, border-radius .5s, background .5s; }
.crowd i::after { content: ''; position: absolute; left: 50%; top: 100%; width: 3px; height: 9px; margin-left: -1.5px; background: var(--ink-2); border-radius: 2px; opacity: 0; transition: opacity .4s; }
.crowd.is-formal i { border-radius: 8px; background: var(--or); }
.crowd.is-formal i::after { opacity: .7; }
.crowd i.is-off { opacity: 0; }
.spectrum__cards { display: grid; gap: 14px; }
.spectrum.is-live .spectrum__cards { gap: 0; }
.spectrum.is-live .team-card { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; visibility: hidden; }
.spectrum.is-live .team-card.is-on { opacity: 1; transform: none; visibility: visible; }
.team-card h3 { font-size: 1.5rem; }
.team-card p { margin-top: 8px; }
.team-card__tip { margin-top: 16px !important; padding: 12px 14px; border-left: 3px solid var(--or-bright); background: var(--blue-wash); border-radius: 0 10px 10px 0; color: var(--ink-2); }
.team-card__tip b { color: var(--ink); }
.spectrum__control { display: none; align-items: center; gap: 14px; margin-top: 26px; font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.spectrum.is-live .spectrum__control { display: flex; }
.spectrum__end { white-space: nowrap; }
.spectrum__control input { flex: 1; accent-color: var(--or); min-width: 0; height: 28px; cursor: pointer; }
@media (max-width: 560px) { .spectrum { padding: 20px; } .spectrum__control { flex-wrap: wrap; } .spectrum__control input { order: -1; flex-basis: 100%; } .spectrum__control .spectrum__end:last-child { margin-left: auto; } }
.spectrum__foot { margin-top: 18px; color: var(--mute); }
.spectrum__foot b { color: var(--blue-ink); }

/* ── 2 · building blocks ── */
.blocks { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 22px; counter-reset: blk; }
@media (min-width: 901px) { .blocks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 900px) { .blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.block { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 22px; box-shadow: var(--shadow); }
.block::before { counter-increment: blk; content: counter(blk); position: absolute; top: 14px; right: 16px; font: 700 .85rem var(--serif); color: var(--mute); }
@media (min-width: 901px) {
  .block:not(:last-child)::after { content: ''; position: absolute; top: 62px; right: -19px; width: 16px; height: 16px; z-index: 1;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8 4l4 4-4 4' fill='none' stroke='%23e8731c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
.block__art { width: 100%; max-width: 170px; height: auto; display: block; margin: 0 auto 10px; overflow: visible; }
.block h3 { font-size: 1.35rem; }
.block p { margin-top: 6px; color: var(--ink-2); font-size: .97rem; }
.blocks__foot { margin-top: 26px; max-width: 72ch; color: var(--ink-2); }
.b-paper { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.b-p2 { fill: var(--bg-2); } .b-p3 { fill: var(--bg-2); opacity: .7; }
.b-line { fill: var(--line); }
.b-box { fill: none; stroke: var(--or-bright); stroke-width: 2; }
.b-tick { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.b-grade { font: 700 10px var(--font); fill: var(--or); letter-spacing: .06em; }
.b-badge circle { fill: var(--or-bright); } .b-badge path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.b-stage { font: 700 9.5px var(--font); fill: var(--mute); }
.b-track { fill: var(--bg-2); stroke: var(--line); }
.b-fill { fill: var(--or-bright); transform-box: fill-box; transform-origin: left; }
.b-fill.f3 { opacity: .55; }
.b-cap { fill: var(--ink); } .b-cap-base { fill: color-mix(in srgb, var(--ink) 80%, var(--bg)); }
.b-tassel path { stroke: var(--or-bright); stroke-width: 2.5; fill: none; } .b-tassel circle { fill: var(--or-bright); }
.b-tassel, .b-star, .b-badge, .b-stack .b-paper { transform-box: fill-box; }
.b-tassel { transform-origin: top center; }
.b-star { fill: var(--or-bright); transform-origin: center; }
.b-badge { transform-origin: center; }
.js-decode .blocks .block { animation: blk-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.js-decode .blocks .block:nth-child(2) { animation-delay: .35s; } .js-decode .blocks .block:nth-child(3) { animation-delay: .7s; } .js-decode .blocks .block:nth-child(4) { animation-delay: 1.05s; }
.js-decode .b-tick { animation: ah-draw .5s ease .55s both; }
.js-decode .b-p1 { animation: blk-stack .5s ease .55s both; } .js-decode .b-p2 { animation: blk-stack .5s ease .65s both; } .js-decode .b-p3 { animation: blk-stack .5s ease .75s both; }
.js-decode .b-badge { animation: ah-stamp .5s cubic-bezier(.5, 0, .3, 1.4) 1.15s both; }
.js-decode .b-fill.f1 { animation: blk-fill .6s ease 1.25s both; } .js-decode .b-fill.f2 { animation: blk-fill .6s ease 1.6s both; } .js-decode .b-fill.f3 { animation: blk-fill .6s ease 1.95s both; }
.js-decode .b-star { animation: ah-pop .5s cubic-bezier(.3, 1.6, .5, 1) 1.9s both, blk-twinkle 3.6s ease-in-out 3s infinite; }
.js-decode .b-tassel { animation: blk-swing 2.6s ease-in-out 1.6s infinite; }
@keyframes blk-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes blk-stack { from { transform: translate(-10px, -14px); opacity: 0; } }
@keyframes blk-fill { from { transform: scaleX(0); } }
@keyframes blk-swing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes blk-twinkle { 0%, 80%, 100% { transform: scale(1); } 90% { transform: scale(1.25); } }

/* ── 3 · difficulty ── */
.levels { display: grid; gap: 20px; margin-top: 36px; }
@media (min-width: 821px) { .levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.level { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.level h3 { font-size: 1.4rem; margin-top: 12px; }
.level > p { margin-top: 6px; color: var(--ink-2); }
.level__eg { margin-top: 16px !important; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute) !important; }
.level ul { margin: 6px 0 0; padding-left: 1.1em; color: var(--ink-2); font-size: .95rem; }
.level li + li { margin-top: 4px; }
.bars { display: inline-flex; align-items: flex-end; gap: 4px; height: 26px; }
.bars i { width: 9px; border-radius: 3px; background: var(--line); }
.bars i:nth-child(1) { height: 10px; } .bars i:nth-child(2) { height: 17px; } .bars i:nth-child(3) { height: 26px; }
.bars[data-level="1"] i:nth-child(-n+1), .bars[data-level="2"] i:nth-child(-n+2), .bars[data-level="3"] i { background: var(--or-bright); }
.js-decode .levels .bars i { transform-origin: bottom; animation: bar-up .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.js-decode .levels .bars i:nth-child(2) { animation-delay: .15s; } .js-decode .levels .bars i:nth-child(3) { animation-delay: .3s; }
.js-decode .levels .level:nth-child(2) .bars i { animation-delay: .35s; } .js-decode .levels .level:nth-child(2) .bars i:nth-child(2) { animation-delay: .5s; } .js-decode .levels .level:nth-child(2) .bars i:nth-child(3) { animation-delay: .65s; }
.js-decode .levels .level:nth-child(3) .bars i { animation-delay: .7s; } .js-decode .levels .level:nth-child(3) .bars i:nth-child(2) { animation-delay: .85s; } .js-decode .levels .level:nth-child(3) .bars i:nth-child(3) { animation-delay: 1s; }
@keyframes bar-up { from { transform: scaleY(0); } }

/* ── 4 · quiz + simulation ── */
.doing { display: grid; gap: 22px; margin-top: 36px; align-items: start; }
@media (min-width: 901px) { .doing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.quiz, .sim { background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); padding: 22px; box-shadow: var(--shadow); }
.quiz__meta, .sim__meta { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); }
.quiz__meta .muted, .sim__meta .muted { letter-spacing: .02em; text-transform: none; font-weight: 600; }
.quiz__q { margin-top: 12px; font: 600 1.15rem/1.45 var(--serif); }
:root.a11y-font .quiz__q { font-family: inherit; }
.quiz__opts { display: grid; gap: 10px; margin-top: 16px; }
.quiz__opt { text-align: left; font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px 12px 42px; cursor: pointer; position: relative;
  transition: border-color .15s, background .15s, transform .15s; }
.quiz__opt::before { content: ''; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid var(--mute); transition: all .2s; }
.quiz__opt:hover { border-color: var(--or-bright); }
.quiz__opt[aria-pressed="true"]::before { border-color: var(--or-bright); background: radial-gradient(circle, var(--or-bright) 45%, transparent 50%); }
.quiz__opt.is-right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--bg)); }
.quiz__opt.is-right::before { border-color: var(--ok); background: radial-gradient(circle, var(--ok) 45%, transparent 50%); }
.quiz__opt.is-wrong { border-color: var(--bad); }
.quiz__opt.is-wrong::before { border-color: var(--bad); background: radial-gradient(circle, var(--bad) 45%, transparent 50%); }
.js-decode .quiz__opt.is-wrong { animation: q-shake .35s ease; }
.js-decode .quiz__opt.is-right { animation: q-pop .35s ease; }
@keyframes q-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes q-pop { 50% { transform: scale(1.02); } }
.quiz__fb { margin-top: 14px; min-height: 3em; color: var(--ink-2); }
.quiz__fb.is-right { color: var(--ok); font-weight: 600; }

.sim__log { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: .96rem; line-height: 1.45; }
.msg b { display: block; font-size: .78rem; margin-bottom: 2px; }
.msg--them { background: var(--bg-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg--them b { color: var(--mute); }
.msg--you { justify-self: end; background: var(--or); color: var(--on-or); border-bottom-right-radius: 4px; }
.msg--you b { color: inherit; opacity: .85; }
.msg--note { max-width: 100%; background: color-mix(in srgb, var(--ok) 9%, var(--panel)); border: 1px dashed color-mix(in srgb, var(--ok) 55%, var(--line)); }
.msg--note b { color: var(--ok); }
.msg.is-typing { width: 64px; height: 38px; display: flex; gap: 5px; align-items: center; justify-content: center; }
.msg.is-typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: dot 1s ease-in-out infinite; }
.msg.is-typing i:nth-child(2) { animation-delay: .15s; } .msg.is-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 40% { transform: translateY(-4px); opacity: 1; } }
.js-decode .msg:not(.is-typing) { animation: msg-in .35s ease both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
.sim__foot { margin-top: 16px; font-size: .9rem; }

/* ── 5 · certificate ── */
.proof { display: grid; gap: 40px; align-items: center; }
@media (min-width: 901px) { .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.proof__text p + p { margin-top: 12px; }
.proof__text .h2 + p { margin-top: 14px; }
.proof__text p { color: var(--ink-2); }
.checker { margin-top: 26px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.checker label { font-weight: 700; display: block; }
.checker__row { display: flex; gap: 10px; margin-top: 10px; }
.checker__row .input { flex: 1; min-width: 0; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; text-transform: uppercase; background: var(--bg); border-color: var(--line); color: var(--ink); }
.checker__hint { margin-top: 8px; font-size: .86rem; }
.checker__hint.is-err { color: var(--bad); }
.cert { margin: 0; }
.cert__paper { position: relative; padding: 34px 30px 26px; text-align: center; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow);
  border: 1px solid var(--line); outline: 2px solid var(--or-soft); outline-offset: -12px; transform: rotate(-1.2deg); }
.cert__org { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue-ink); }
.cert__org img { border-radius: 5px; }
.cert__kind { margin-top: 10px !important; font: 700 .78rem var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.cert__small { margin-top: 14px !important; color: var(--mute); font-size: .9rem; }
.cert__name { font: 700 2rem/1.15 var(--serif); margin-top: 4px; }
.cert__course { font: 700 1.25rem var(--serif); margin-top: 4px; color: var(--blue-ink); }
:root.a11y-font .cert__name, :root.a11y-font .cert__course { font-family: inherit; }
.cert__foot { display: flex; justify-content: space-between; gap: 18px; margin-top: 26px; padding-top: 14px; border-top: 1px dashed var(--line); text-align: left; font-size: .9rem; padding-right: 76px; }
.cert__label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.cert__ref { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.cert__seal { position: absolute; right: 22px; bottom: 18px; width: 68px; height: 68px; }
.cert__seal svg { width: 100%; height: 100%; overflow: visible; }
.cert__seal circle { fill: var(--wax); } .cert__seal .rim { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.6; stroke-dasharray: 3 3; } .cert__seal path { fill: rgba(255, 245, 235, .92); }
.cert__status { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 18px; font-size: .95rem; flex-wrap: wrap; }
.cert__status b { color: var(--ok); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent); }
.js-decode .cert .cert__name, .js-decode .cert .cert__course { animation: cert-write .8s ease both; }
.js-decode .cert .cert__name { animation-delay: .2s; } .js-decode .cert .cert__course { animation-delay: .6s; }
.js-decode .cert .cert__seal { animation: ah-stamp .6s cubic-bezier(.5, 0, .3, 1.4) 1.2s both; }
.js-decode .cert .cert__status { animation: ah-rise .45s ease 1.8s both; }
.js-decode .cert .dot { animation: dot-ping 2.4s ease-out 2.2s infinite; }
@keyframes cert-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dot-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }
@media (max-width: 560px) { .cert__paper { padding: 28px 18px 22px; } .cert__name { font-size: 1.6rem; } .cert__foot { flex-direction: column; gap: 8px; } }

/* ── 6 · communities ── */
.paths { display: grid; gap: 20px; margin-top: 36px; }
@media (min-width: 821px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.path-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.path-card h3 { font-size: 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.path-card__min { font: 700 .82rem var(--font); color: var(--blue-ink); letter-spacing: .02em; }
.path-card p { margin-top: 8px; color: var(--ink-2); }
.path-card ul { margin: 12px 0 0; padding-left: 1.1em; color: var(--ink-2); }
.setup { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; position: relative; }
@media (min-width: 821px) {
  .setup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .setup::before { content: ''; position: absolute; left: 8%; right: 8%; top: 21px; height: 2px; background: var(--or-bright); transform-origin: left; opacity: .6; }
  .js-decode .setup::before { animation: blk-fill 1.4s ease .2s both; }
}
.setup__step { position: relative; }
.setup__n { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--or); color: var(--on-or); font: 700 1.1rem var(--serif); box-shadow: 0 0 0 6px var(--bg-2); }
.setup__step h3 { margin-top: 12px; font-size: 1.15rem; }
.setup__step p { margin-top: 6px; color: var(--ink-2); font-size: .96rem; }
.js-decode .setup .setup__n { animation: ah-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.js-decode .setup .setup__step:nth-child(2) .setup__n { animation-delay: .55s; } .js-decode .setup .setup__step:nth-child(3) .setup__n { animation-delay: 1.1s; }
.setup__btns { margin-top: 28px; }

/* ── numbers + finale ── */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; }
@media (min-width: 821px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats div { text-align: center; padding: 18px 10px; border-top: 3px solid var(--or-bright); }
.stats dd { margin: 0; font: 700 clamp(2rem, 5vw, 2.8rem)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.stats dt { margin-top: 6px; color: var(--mute); font-weight: 600; }
.stats div { display: flex; flex-direction: column-reverse; }
.finale { margin-top: 56px; text-align: center; padding: 48px 24px; border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(ellipse 70% 90% at 50% 0%, var(--glow), transparent 70%), var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.finale h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.finale > p { margin: 12px auto 0; max-width: 56ch; color: var(--ink-2); }
.finale .btn-row { justify-content: center; margin-top: 24px; }
.finale__note { font-size: .86rem; margin-top: 22px !important; }

/* phones: tighter sections */
@media (max-width: 560px) {
  .acad-page main .section { padding-top: 56px; padding-bottom: 56px; }
  .ah-label .sub { font-size: 13.5px; }
}

/* On phones the hero art sits below the text: it waits until it's on screen ([data-play]), and the
   SMIL pen nib (which can't wait) is left out there. */
@media (max-width: 900px) { .js-decode .ah-nib { display: none; } }