
  :root{
    --blue:#299dce; --blue-d:#1f7da6; --blue-ink:#0f4f6c; --blue-50:#ebf7fc; --blue-100:#d4ecf8; --blue-line:#bfe2f3;
    --red:#e0413a; --red-d:#b62e28; --red-ink:#8c241f; --red-50:#fdeceb; --red-100:#f8d3d1;
    --ink:#15181c; --ink2:#444b54; --ink3:#6b7480; --line:#e7ebef; --line2:#d8dee4;
    --bg:#f5f8fa; --card:#ffffff;
    --r:14px; --r-sm:10px; --shadow:0 1px 2px rgba(20,30,40,.04),0 6px 22px rgba(20,40,60,.06);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html,body{margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
  .disp{font-family:"Bricolage Grotesque","Manrope",sans-serif;letter-spacing:-.01em}

  .topaccent{height:4px;background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 72%,var(--red) 72%,var(--red) 100%)}
  header.bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:18px;padding:11px 26px}
  header.bar img{height:38px;display:block}
  .divider{width:1px;height:26px;background:var(--line2)}
  .masthead{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-weight:700}
  .crumbs{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink3);font-weight:600}
  .crumbs .sep{opacity:.45}
  .crumbs .here{color:var(--ink)}
  .pill{background:var(--blue);color:#fff;font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;letter-spacing:.02em;box-shadow:0 2px 8px rgba(41,157,206,.35)}

  .wrap{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:280px 1fr;gap:38px;padding:30px 26px 80px}
  @media(max-width:900px){.wrap{grid-template-columns:1fr}}

  .rail{position:sticky;top:88px;align-self:start;height:max-content}
  .railwrap{min-width:0}
  .railwrap>summary{display:none}
  .prog{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
  .prog .lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:700}
  .prog .big{font-family:"Bricolage Grotesque",sans-serif;font-size:30px;font-weight:700;color:var(--ink);margin:3px 0 12px;letter-spacing:-.02em}
  .track{height:8px;border-radius:99px;background:var(--blue-50);overflow:hidden}
  .track i{display:block;height:100%;width:60%;background:linear-gradient(90deg,var(--blue),var(--blue-d));border-radius:99px}
  .prog small{display:block;margin-top:9px;font-size:12.5px;color:var(--ink3);font-weight:600}
  .grp{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:700;margin:16px 6px 7px}
  .clist{list-style:none;margin:0;padding:0;font-size:13.5px;font-weight:600}
  .clist li{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:9px;color:var(--ink2)}
  .clist li .n{width:21px;height:21px;flex:none;border-radius:50%;background:var(--blue-50);color:var(--blue-ink);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .clist li.done{color:var(--ink3)}
  .clist li.done .n{background:#eaf2ee;color:#2f8a5b}
  .clist li.cur{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(41,157,206,.32)}
  .clist li.cur .n{background:#fff;color:var(--blue-d)}

  main{min-width:0}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red-d);font-weight:800}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--red)}
  h1.title{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:48px;line-height:1.02;letter-spacing:-.025em;color:var(--ink);margin:8px 0 12px}
  .lede{font-size:18px;color:var(--ink2);max-width:62ch;margin:0;font-weight:500}
  .tags{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 6px}
  .tag{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:8px;background:var(--blue-50);color:var(--blue-ink);border:1px solid var(--blue-line)}
  .tag.red{background:var(--red-50);color:var(--red-ink);border-color:var(--red-100)}

  .layer{position:relative;margin:32px 0 0;padding:0 0 0 62px}
  .layer>.mark{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:13px;background:var(--ink);color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
  .layer.lr>.mark{background:var(--red)}
  .layer .klabel{font-size:25px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);font-weight:800;line-height:1.2;margin:3px 0 13px}
  .layer.lr .klabel{color:var(--red)}
  .layer h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:25px;letter-spacing:-.02em;color:var(--ink);margin:3px 0 13px}
  .layer p{margin:0 0 12px;color:var(--ink2)}
  .pl-blf{background:var(--blue-50);border:1px solid var(--blue-line);border-radius:var(--r-sm);padding:13px 16px;margin:0 0 15px}
  .pl-blf .lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink);font-weight:800;margin-bottom:4px}
  .pl-blf p{margin:0;color:var(--ink);font-weight:600}
  .pl-test{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-sm);padding:14px 16px;margin:0 0 15px}
  .pl-test .lab{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:11px}
  .pl-test ol{list-style:none;margin:0;padding:0}
  .pl-test li{display:flex;gap:11px;align-items:flex-start;margin:0 0 9px;color:var(--ink2)}
  .pl-test li:last-child{margin:0}
  .pl-test li .n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue-50);color:var(--blue-ink);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
  .pl-watch{border:1px solid var(--red-100);border-left:4px solid var(--red);border-radius:var(--r-sm);background:var(--red-50);padding:12px 15px;margin:0 0 15px}
  .pl-watch .lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink);font-weight:800;margin-bottom:4px}
  .pl-watch p{margin:0;color:var(--ink)}
  .pl-scope{border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:var(--r-sm);background:#f7f9fb;padding:10px 14px;margin:0 0 4px}
  .pl-scope .lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin-bottom:3px}
  .pl-scope p{margin:0;color:var(--ink2);font-size:14.5px}
  .pl-key{font-weight:800;color:var(--ink)}
  .ra-facts{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-sm);padding:13px 16px;margin:0 0 15px}
  .ra-facts>.lab,.ra-var>.lab,.ra-take>.lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;margin-bottom:5px}
  .ra-facts>.lab{color:var(--ink3)}
  .ra-facts p,.ra-var p,.ra-take p{margin:0;color:var(--ink)}
  .ra-var{background:var(--card);border:1px solid var(--line2);border-left:4px solid var(--blue);border-radius:var(--r-sm);padding:13px 16px;margin:0 0 15px}
  .ra-var>.lab{color:var(--blue-d)}
  .ra-steps{display:flex;flex-direction:column;gap:12px;margin:0 0 15px}
  .ra-step{display:flex;gap:11px;align-items:flex-start}
  .ra-step .ra-n{flex:none;width:23px;height:23px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
  .ra-step .ra-q{font-weight:800;color:var(--ink)}
  .ra-step .ra-ex{display:block;margin-top:2px;color:var(--ink2)}
  .ra-a{font-size:11px;font-weight:800;letter-spacing:.03em;padding:1px 9px;border-radius:999px;margin-left:7px;white-space:nowrap}
  .ra-yes{background:#e7f5ec;color:#1b7a42}
  .ra-no{background:var(--red-50);color:var(--red-ink)}
  .ra-take{background:var(--blue-50);border:1px solid var(--blue-line);border-radius:var(--r-sm);padding:12px 16px;margin:0 0 4px}
  .ra-take>.lab{color:var(--blue-ink)}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}

  .official{border:1px solid var(--blue-line);background:linear-gradient(180deg,var(--blue-50),#fff 60%)}
  .official .badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--blue);padding:6px 12px;border-radius:999px;margin-bottom:15px;box-shadow:0 3px 10px rgba(41,157,206,.3)}
  .official h3{font-family:"Bricolage Grotesque",sans-serif;font-size:19px;color:var(--ink);margin:0 0 9px}
  .official .sub{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink);margin:17px 0 7px;font-weight:800}
  .official ul{margin:0;padding-left:20px}.official li{margin:0 0 9px;color:var(--ink2)}
  .official .excl{color:var(--red-d);font-weight:600}

  .hook{background:linear-gradient(180deg,#fff,var(--blue-50));border:1px solid var(--blue-line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
  .hook ul{margin:0;padding-left:20px}.hook li{margin:0 0 8px;color:var(--ink2)}
  .hook .cue{margin-top:14px;background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:13px 17px;font-weight:700;font-size:15px}
  .hook .cue b{color:#7fd0ee}

  .steps{display:grid;gap:11px}
  .step{display:flex;gap:15px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 17px;box-shadow:var(--shadow)}
  .step .s{width:28px;height:28px;flex:none;border-radius:9px;background:var(--blue);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
  .step b{color:var(--ink)}
  .flip{margin-top:13px;font-size:15px;color:var(--ink2);font-weight:500}.flip b{color:var(--red-d)}

  .traps{display:grid;grid-template-columns:1fr 1fr;gap:13px}
  @media(max-width:640px){.traps{grid-template-columns:1fr}}
  .trap{background:linear-gradient(180deg,#fff,var(--red-50));border:1px solid var(--red-100);border-radius:var(--r-sm);padding:16px 18px;box-shadow:var(--shadow)}
  .trap .tt{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--red-d);font-size:15.5px;margin-bottom:5px}
  .trap p{font-size:14px;margin:0;color:var(--ink2)}
  .trap .beat{display:block;margin-top:8px;font-size:13px;color:var(--blue-d);font-weight:700}

  .cuebox{border-left:4px solid var(--blue);background:var(--blue-50);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 19px;font-size:16px;color:var(--ink2);font-weight:500}

  .q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
  .q .qn{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
  .q .stem{margin:7px 0 4px;color:var(--ink2)}
  .q .call{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--ink);margin:9px 0 15px;font-size:17px}
  .opts{display:grid;gap:10px}
  .opt{display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%;background:#fff;border:1.5px solid var(--line2);border-radius:var(--r-sm);padding:13px 16px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s}
  .opt:hover{border-color:var(--blue);box-shadow:0 3px 12px rgba(41,157,206,.14)}
  .opt .lt{width:26px;height:26px;flex:none;border-radius:8px;border:1.5px solid var(--line2);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
  .opt .ot{flex:1;font-weight:500}
  .opt .ann{display:none;margin-top:8px;font-size:13.5px;line-height:1.5;font-weight:500}
  .opt .ann .lab{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:6px;margin-bottom:6px}
  .q.answered .opt{cursor:default}
  .opt.correct{border-color:var(--blue);background:var(--blue-50)}
  .opt.correct .lt{background:var(--blue);border-color:var(--blue);color:#fff}
  .opt.correct .lab{background:var(--blue-100);color:var(--blue-ink)}
  .opt.wrong{border-color:var(--red-100);background:var(--red-50)}
  .opt.wrong .lt{background:var(--red);border-color:var(--red);color:#fff}
  .opt.wrong .lab{background:var(--red-100);color:var(--red-ink)}
  .q.answered .opt .ann{display:block}
  .q.answered .opt:not(.correct):not(.wrong){opacity:.55}
  .q .reset{margin-top:13px;font:inherit;font-size:13px;font-weight:700;color:var(--blue-d);background:none;border:none;cursor:pointer;padding:0}

  .footnav{display:flex;justify-content:space-between;gap:14px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
  .nav-btn{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);padding:13px 20px;border:1px solid var(--line2);border-radius:var(--r-sm);background:#fff;min-width:210px;box-shadow:var(--shadow)}
  .nav-btn:hover{border-color:var(--blue)}
  .nav-btn .d{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:700}
  .nav-btn .t{font-weight:700;font-family:"Bricolage Grotesque",sans-serif}
  .nav-btn.next{text-align:right;background:var(--ink);color:#fff;border-color:var(--ink)}
  .nav-btn.next .d{color:#9fb2c0}
  .mocknote{max-width:1240px;margin:0 auto;padding:8px 26px 44px;font-size:12.5px;color:var(--ink3);font-weight:500}

  .crow{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:9px;color:var(--ink2);text-decoration:none}
  .crow:hover{background:var(--blue-50);color:var(--ink)}
  .crow .n{width:21px;height:21px;flex:none;border-radius:50%;background:var(--blue-50);color:var(--blue-ink);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .crow.cur{background:var(--accent,var(--blue));color:#fff;box-shadow:0 4px 14px rgba(20,40,60,.22)}
  .crow.cur .n{background:#fff;color:var(--accent,var(--blue-d))}
  .backcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);margin-bottom:14px;text-decoration:none}
  .backcard .ba{display:block;font-weight:800;color:var(--accent,var(--blue-d));font-size:13px}
  .backcard .bb{display:block;color:var(--ink3);font-size:12px;font-weight:600;margin-top:2px}
  .crumbs a.clk,.crumbs .clk{color:var(--ink3);text-decoration:none}.crumbs a.clk:hover{color:var(--blue-d)}
  header.bar a{display:flex}
  .home{max-width:1080px;margin:0 auto;padding:34px 26px 80px}
  .hero{padding:14px 0 6px}
  .bigtitle{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:60px;letter-spacing:-.03em;margin:8px 0 12px;color:var(--ink)}
  .hlede{font-size:18px;color:var(--ink2);max-width:70ch;font-weight:500;margin:0}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 8px}
  @media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
  .stat .sv{font-family:"Bricolage Grotesque",sans-serif;font-size:34px;font-weight:800;color:var(--blue);line-height:1}
  .stat .sl{font-size:13px;color:var(--ink3);font-weight:600;margin-top:4px}
  .catblock{margin-top:30px}
  .catname{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:20px;color:var(--ink);margin:0 2px 12px;display:flex;align-items:baseline;gap:10px}
  .catname span{font-size:13px;color:var(--ink3);font-weight:600;font-family:"Manrope",sans-serif}
  .cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
  @media(max-width:720px){.cgrid{grid-template-columns:1fr}}
  .ccard{display:flex;align-items:center;gap:15px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;text-decoration:none;box-shadow:var(--shadow);transition:border-color .15s,transform .12s,box-shadow .15s}
  .ccard:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 26px rgba(41,157,206,.16)}
  .ccard .cn{width:40px;height:40px;flex:none;border-radius:12px;background:var(--blue-50);color:var(--accent,var(--blue-d));font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
  .ccard .cmid{flex:1;min-width:0}
  .ccard .ctitle{font-weight:700;color:var(--ink);font-size:16px}
  .ccard .ccount{font-size:12.5px;color:var(--ink3);font-weight:600;margin-top:1px}
  .ccard .cgo{color:var(--accent,var(--blue));font-weight:800;font-size:18px}

  .subjsel{margin-left:6px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:7px 10px;cursor:pointer}
  .subjsel:hover{border-color:var(--blue)}
  .crumbs{margin-left:14px}
  header.bar{gap:14px}
  .subjcard .cn{background:var(--accent,var(--ink));color:#fff;font-size:20px;box-shadow:0 4px 12px -4px var(--accent,transparent)}
  .subjcard .cn svg{width:22px;height:22px}
  .subjcard .cgo{color:var(--accent,var(--blue));transition:transform .12s}
  .subjcard:hover{border-color:var(--accent,var(--blue))}
  .subjcard:hover .cgo{transform:translateX(3px)}
  .subjcard .cdesc{font-size:13px;color:var(--ink2);font-weight:500;margin-top:3px;line-height:1.45}
  .herocta{margin:20px 0 2px}
  .herocta:empty{display:none}
  .resume{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent,var(--blue));border-radius:var(--r);padding:11px 18px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .15s}
  .resume:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(20,40,60,.1)}
  .resume .rlab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--accent,var(--blue-d))}
  .resume .rmain{font-weight:700;color:var(--ink);font-size:16px}
  .startcta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--blue);color:#fff;font-weight:800;font-size:15px;padding:12px 22px;border-radius:999px;box-shadow:0 4px 14px rgba(41,157,206,.32);transition:background .15s}
  .startcta:hover{background:var(--blue-d)}
  .cprog{display:flex;align-items:center;gap:9px;margin-top:9px}
  .cprog .cbar{flex:1;height:6px;border-radius:99px;background:var(--blue-50);overflow:hidden;max-width:190px}
  .cprog .cbar i{display:block;height:100%;background:var(--accent,var(--blue));border-radius:99px;transition:width .35s ease}
  .cprog .cpn{font-size:12px;color:var(--ink3);font-weight:700;white-space:nowrap}
  .cprog.done .cbar i{background:#2e9e5b}
  .cprog.done .cpn{color:#2e9e5b}
  .markdone{display:inline-flex;align-items:center;gap:8px;margin:10px 0 2px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink2);background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
  .markdone:hover{border-color:var(--ink3)}
  .markdone .mdi{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
  .markdone.done{color:#fff;background:#2e9e5b;border-color:#2e9e5b}
  .markdone.done:hover{background:#278a4f;border-color:#278a4f}
  .markdone.done .mdi{border-color:#fff}
  .statechip{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--red);padding:4px 9px;border-radius:6px;line-height:1}
  .fletitle{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:34px;letter-spacing:-.02em;margin:8px 0 5px;color:var(--ink)}
  .resumeBig{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent,var(--blue));border-radius:18px;padding:20px 24px;box-shadow:0 10px 30px rgba(20,40,60,.09);max-width:680px;text-decoration:none;transition:transform .12s,box-shadow .15s}
  .resumeBig:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(20,40,60,.13)}
  .resumeBig .rl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--accent,var(--blue-d))}
  .resumeBig .rm{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:22px;margin-top:3px;color:var(--ink);line-height:1.15}
  .resumeBig .rsub{font-size:13px;color:var(--ink3);margin-top:5px;font-weight:600}
  .resumeBig .rbtn{flex:none;background:var(--accent,var(--blue));color:#fff;font-weight:800;font-size:14px;padding:11px 20px;border-radius:999px;white-space:nowrap}
  .startcta-big{font-size:16px;padding:14px 26px}
  @media(max-width:560px){.resumeBig{flex-direction:column;align-items:flex-start;gap:14px}}


  .tab-nav{display:flex;gap:0;margin:20px 0 0;border-bottom:2px solid var(--line)}
  .tab-btn{font:inherit;font-size:14px;font-weight:700;padding:10px 22px;border:none;background:none;cursor:pointer;color:var(--ink3);border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:6px 6px 0 0;transition:color .15s,background .15s}
  .tab-btn:hover{color:var(--ink);background:var(--blue-50)}
  .tab-btn.active{color:var(--blue-d);border-bottom-color:var(--blue);background:var(--blue-50)}
  .tab-pane{padding-top:6px}
  .mem-section{margin:28px 0}
  .mem-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:800;margin-bottom:10px}
  .fc-total{font-family:"Manrope",sans-serif;font-size:11px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink3)}
  .qrc-card{background:linear-gradient(180deg,var(--blue-50),#fff 70%);border:1px solid var(--blue-line);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow)}
  .qrc-card ul{margin:0;padding-left:20px}
  .qrc-card li{margin:0 0 9px;color:var(--ink2);font-weight:500}
  .qrc-card li:last-child{margin-bottom:0}
  .mnem-list{display:grid;gap:10px}
  .mnem{background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:13px 17px;font-weight:700;font-size:15px}
  .fc-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
  .fc-counter{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
  .fc-stage{min-height:160px;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .fc-card{width:100%;background:var(--blue-50);border:2px solid var(--blue-line);border-radius:var(--r);padding:28px;text-align:center;transition:background .25s,border-color .25s}
  .fc-card.flipped{background:linear-gradient(180deg,#eaf4ea,#fff);border-color:#9fd3b5}
  .fc-front{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:20px;color:var(--ink);line-height:1.3}
  .fc-back{font-size:16px;color:var(--ink2);font-weight:500;line-height:1.55}
  .fc-hint{font-size:12px;color:var(--blue-d);font-weight:600;margin-top:14px;opacity:.65}
  .fc-controls{display:flex;gap:10px;justify-content:center;margin-top:18px}
  .fc-btn{font:inherit;font-size:14px;font-weight:700;padding:9px 22px;border:1.5px solid var(--line2);border-radius:var(--r-sm);background:#fff;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s,background .15s}
  .fc-btn:hover{border-color:var(--blue);color:var(--blue-d)}
  .fc-btn.fc-flip{background:var(--blue);color:#fff;border-color:var(--blue)}
  .fc-btn.fc-flip:hover{background:var(--blue-d);border-color:var(--blue-d)}
  /* ===================== MOBILE / RESPONSIVE ===================== */
  @media(max-width:900px){
    /* Header condenses to logo + subject switcher */
    header.bar{flex-wrap:wrap;gap:10px;padding:10px 16px}
    header.bar .divider,header.bar .masthead,header.bar .crumbs{display:none}
    .subjsel{margin-left:auto;font-size:14px;padding:10px 12px}

    /* Concept sidebar becomes a collapsible disclosure */
    .railwrap{position:static;margin-bottom:18px}
    .railwrap>summary{display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;
      background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:14px 16px;box-shadow:var(--shadow);font-weight:800;color:var(--ink);font-size:14px}
    .railwrap>summary::-webkit-details-marker{display:none}
    .railwrap>summary .rs-ic{width:18px;height:18px;flex:none;border-radius:5px;background:var(--blue);position:relative}
    .railwrap>summary .rs-ic::before,.railwrap>summary .rs-ic::after{content:"";position:absolute;background:#fff;border-radius:2px}
    .railwrap>summary .rs-ic::before{left:4px;right:4px;top:8px;height:2px}
    .railwrap>summary .rs-ic::after{top:4px;bottom:4px;left:8px;width:2px;transition:opacity .2s}
    .railwrap[open]>summary .rs-ic::after{opacity:0}
    .railwrap>summary .rs-tx{flex:1}
    .railwrap>summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--ink3);
      border-bottom:2px solid var(--ink3);transform:rotate(45deg);margin-right:3px;transition:transform .2s}
    .railwrap[open]>summary::after{transform:rotate(-135deg)}
    .rail{position:static;top:auto;height:auto;margin-top:12px}

    /* Single-column padding */
    .wrap{padding:18px 16px 64px;gap:0}
    .home{padding:24px 16px 64px}
    .mocknote{padding:8px 16px 40px}

    /* Layers: drop the 62px indent, stack the number badge */
    .layer{padding-left:0;margin-top:26px}
    .layer>.mark{position:static;margin-bottom:11px;width:38px;height:38px;font-size:17px;border-radius:11px}

    /* Fluid display type (caps match desktop, so >900px is unchanged) */
    h1.title{font-size:clamp(28px,7.6vw,48px)}
    .bigtitle{font-size:clamp(30px,8.2vw,60px)}
    .layer .klabel{font-size:22px}
    .lede,.hlede{font-size:16.5px}

    /* Footer prev/next stack full width (fixes horizontal scroll) */
    .footnav{flex-direction:column;margin-top:32px}
    .nav-btn{min-width:0;width:100%}
    .nav-btn.next{text-align:left}

    /* Larger tap targets */
    .tab-btn{padding:12px 18px}
    .fc-btn{padding:12px 22px}
  }
  @media(max-width:430px){
    .wrap,.home{padding-left:13px;padding-right:13px}
    .card,.official,.hook,.qrc-card,.fc-wrap{padding-left:16px;padding-right:16px}
    .q{padding:18px 16px}
    .tab-btn{padding:11px 13px;font-size:13px}
    .tags{gap:7px}
  }

/* ===================== MAKE IT STICK (layer 3) ===================== */
.ms-lead{margin:0 0 15px;color:var(--ink);font-weight:600}
.ms-lead:last-child{margin-bottom:0}
.ms-key{font-weight:800;color:var(--blue-ink)}
.ms-list{margin:0 0 15px}
.ms-list:last-child{margin-bottom:0}
.ms-list>.lab{display:block;color:var(--blue-ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:8px}
.ms-items{display:flex;flex-direction:column;gap:10px}
.ms-item{display:flex;gap:11px;align-items:flex-start}
.ms-n{flex:none;width:23px;height:23px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ms-item p{margin:0;color:var(--ink2)}
.ms-mnem{background:var(--card);border:1px solid var(--blue-line);border-radius:var(--r-sm);padding:13px 16px;margin:0 0 15px}
.ms-mnem:last-child{margin-bottom:0}
.ms-mnem>.lab{display:block;color:var(--blue-ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:5px}
.ms-mnem p{margin:0;color:var(--ink);font-weight:700}
.ms-cue{background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:13px 17px;margin:0 0 15px}
.ms-cue:last-child{margin-bottom:0}
.ms-cue>.lab{display:block;color:#7fd0ee;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:5px}
.ms-cue p{margin:0;font-weight:700;font-size:15px}
.ms-cue b,.ms-cue .ms-key{color:#7fd0ee}
.ms-trap{border:1px solid var(--red-100);border-left:4px solid var(--red);background:var(--red-50);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 15px;margin:0 0 15px}
.ms-trap:last-child{margin-bottom:0}
.ms-trap>.lab{display:block;color:var(--red-ink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;margin-bottom:4px}
.ms-trap p{margin:0;color:var(--ink)}

/* ===================== HOW IT'S TESTED (layer 6) ===================== */
.ht-trigger{background:var(--blue-50);border-left:4px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 16px;margin:0 0 15px}
.ht-trigger>.lab{display:block;color:var(--blue-ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:4px}
.ht-trigger p{margin:0;color:var(--ink);font-weight:500}
.ht-steps{margin:0 0 15px}
.ht-steps:last-child{margin-bottom:0}
.ht-steps>.lab{display:block;color:var(--blue-ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:8px}
.ht-stepwrap{display:flex;flex-direction:column;gap:10px}
.ht-step{display:flex;gap:11px;align-items:flex-start}
.ht-n{flex:none;width:23px;height:23px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ht-step p{margin:0;color:var(--ink2)}
.ht-tells{border:1px solid var(--red-100);background:var(--red-50);border-radius:var(--r-sm);padding:13px 16px;margin:0 0 15px}
.ht-tells:last-child{margin-bottom:0}
.ht-tells>.lab{display:block;color:var(--red-ink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;margin-bottom:8px}
.ht-tells ul{margin:0;padding:0;list-style:none}
.ht-tells li{display:flex;gap:9px;align-items:flex-start;margin:0 0 7px;color:var(--ink)}
.ht-tells li:last-child{margin-bottom:0}
.ht-tells .ht-x{color:var(--red);font-weight:800;flex:none}
.ht-take{background:var(--bg);border-radius:var(--r-sm);padding:12px 16px;margin:0}
.ht-take>.lab{display:block;color:var(--ink3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:4px}
.ht-take p{margin:0;color:var(--ink2)}

/* ---- concept header redesign (toolbar + layer navs) ---- */
.cactions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin:20px 0 12px;padding:12px 16px;border:1px solid var(--line,#e6e9ef);border-radius:14px;background:#fbfcfd}
.ca-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cactions .cbtn{height:42px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:0 18px;border-radius:999px;border:1.5px solid #d3d8e0;background:#fff;color:#2b3344;font-size:14px;font-weight:700;font-family:inherit;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap}
.cactions .markdone .mdi{width:15px;height:15px;border-radius:999px;border:2px solid #c2c8d2;display:inline-block}
.cactions .markdone.done{border-color:var(--accent,#299dce);background:color-mix(in srgb,var(--accent,#299dce) 8%,#fff);color:var(--accent,#299dce)}
.cactions .markdone.done .mdi{border:none;width:auto;height:auto}
.cactions .cact-prac{border-color:color-mix(in srgb,var(--accent,#299dce) 45%,#fff);background:color-mix(in srgb,var(--accent,#299dce) 8%,#fff);color:var(--accent,#299dce)}
.cactions .cact-prac:hover{background:color-mix(in srgb,var(--accent,#299dce) 16%,#fff)}
.subjprog{display:flex;align-items:center;gap:10px}
.subjprog .sp-bar{width:120px;height:6px;border-radius:99px;background:#e6eaef;overflow:hidden}
.subjprog .sp-bar i{display:block;height:100%;border-radius:99px;background:var(--accent,#299dce)}
.subjprog .sp-t{font-size:12px;font-weight:700;color:#6b7480;white-space:nowrap}
.layernav{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 20px}
.layernav a{font-size:12.5px;font-weight:600;color:#54607a;text-decoration:none;background:#eef1f6;border-radius:999px;padding:6px 12px;white-space:nowrap}
.layernav a:hover{background:var(--accent,#299dce);color:#fff}
.layernav a.lp{background:color-mix(in srgb,var(--accent,#299dce) 10%,#fff);color:var(--accent,#299dce)}
.layernav a.lp:hover{background:var(--accent,#299dce);color:#fff}
.layernav a .ln-n{opacity:.55;font-weight:800;margin-right:5px}
@media(max-width:640px){.cactions{padding:10px 12px}.subjprog .sp-bar{width:90px}}
