/* SJA Learning — secondary-page styles (7 Sep 2026 redesign). Loads AFTER /theme.css on every page except the
   homepage and the Store: blog + posts, What's new, About, Why SJA, product pages, legal pages, quiz, 404, order page.
   Everything shared (tokens, fixed header, footer, buttons, island, pop-ups) lives in theme.css. Bump ?v= when editing. */
:root{--ok:var(--green);--bad:var(--red);--gold:var(--blue);--gold2:var(--blue);--navy:var(--ink);--navy2:var(--bg3)}

/* ---- page column ---- */
.page{max-width:820px;margin:0 auto;padding:clamp(28px,4vw,44px) 20px 24px;font-size:17px;line-height:1.75}
.page.wide{max-width:1120px}
.page.narrow{max-width:720px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:13.5px;font-weight:700;color:var(--mut2);margin-bottom:22px}
.crumbs a{color:var(--mut)}
.crumbs a:hover{color:var(--blue)}
.page .kicker{margin-bottom:10px}
.page h1{font-size:clamp(30px,4.2vw,44px);margin:0 0 14px}
.page h1 em,.page h2 em{color:var(--blue);font-style:normal}
.page .meta{font-size:14px;color:var(--mut2);font-weight:600;margin:0 0 26px}
.page .lead{margin:0 0 18px;max-width:none}
.page .sub{font-size:17px;color:var(--mut);margin:0 0 28px;max-width:680px}
.page h2{font-size:clamp(23px,2.6vw,30px);margin:2em 0 .55em;letter-spacing:-.025em}
.page h3{font-size:19px;margin:1.6em 0 .5em}
.page h2+h3{margin-top:.6em}
.page p{margin:0 0 15px}
.page ul,.page ol{padding-left:24px;margin:0 0 16px}
.page li{margin:0 0 7px}
.page li::marker{color:var(--blue)}
.page b,.page strong{color:var(--ink)}
.page blockquote{margin:1.4em 0;padding:16px 20px;border-left:4px solid var(--blue);background:var(--blue-soft);border-radius:0 12px 12px 0;color:var(--ink);font-size:17.5px}
.page hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.page img{max-width:100%}
.page .cover{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:16px;border:1px solid var(--line);margin:6px 0 26px;display:block;box-shadow:var(--shadow)}
.page .fine,.page .disc,.page .eff{font-size:13.5px;color:var(--mut2);line-height:1.6}
.page .fine,.page .disc{margin-top:28px}
.page .eff{margin:0 0 30px;font-weight:600}
.page .top{display:none}                       /* old "← back" links: the fixed header covers navigation now */
.page .cta{background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:16px;padding:20px 24px;margin:32px 0;font-size:15.5px;color:var(--ink)}
.page .cta a{font-weight:800}
.page .cta p{margin:0 0 12px}
.page .cta.center,.page .cta.box{text-align:center}
.page .cta .btn{margin:6px 4px 0}
.page .note{background:var(--blue-soft);border:1px solid var(--blue-line);border-left:4px solid var(--blue);border-radius:12px;padding:14px 18px;font-size:15.5px;margin:18px 0;color:var(--ink)}
.page .tip{background:var(--green-soft);border-left:4px solid var(--green);border-radius:0 12px 12px 0;padding:13px 16px;margin:16px 0;font-size:15.5px}
.page .warn{background:var(--red-soft);border-left:4px solid var(--red);border-radius:0 12px 12px 0;padding:13px 16px;margin:16px 0;font-size:15.5px}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 8px}
.page .btn{margin:0;white-space:normal;text-align:center;max-width:100%;line-height:1.25}
.page .btn+.btn{margin-left:8px}
.page .btn.line{background:#fff;color:var(--ink);border-color:var(--line)}
.page .biz{background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:16px 20px;font-size:14px;margin:24px 0;color:var(--mut)}
.page .biz b{color:var(--ink)}

/* tables inside pages */
.page table{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;line-height:1.5;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:18px 0 22px}
.page th{text-align:left;background:var(--bg3);color:var(--ink);font-weight:800;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.04em;text-transform:uppercase;vertical-align:top}
.page td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:top}
.page tr:last-child td{border-bottom:0}
.page td.c,.page th.c{text-align:center}
.page .old{color:var(--red);text-decoration:line-through;text-decoration-thickness:1.5px}
.page .new{color:var(--green);font-weight:800}
.page .src{font-size:12.5px;line-height:1.45;color:var(--mut)}
.page table.fam td:first-child,.page table.traps td:first-child,.page .routine td:first-child{color:var(--blue);font-weight:800;white-space:nowrap}
.page table.fam td:first-child{text-align:center}
.page table.fam td:nth-child(3){font-size:13.5px;color:var(--mut)}
.tblwrap,.page .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 20px}
.tblwrap table{min-width:560px;margin:0}
.swipehint{display:none;font-size:12.5px;color:var(--blue);text-align:center;margin:0 0 6px;font-weight:700}
@media(max-width:700px){.swipehint{display:block}.tblwrap table th:first-child,.tblwrap table td:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:2px 0 0 var(--line)}.tblwrap table th:first-child{background:var(--bg3)}}

/* ---- cards / grids on pages ---- */
.page .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 22px;margin:14px 0;color:var(--text)}
.page .card b{color:var(--ink)}
.page .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 18px}
.page .grid2 div{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.55}
.page .grid2 b{display:block;margin-bottom:3px}
@media(max-width:640px){.page .grid2{grid-template-columns:1fr}}
.page .chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.page .chip{background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--blue);font-weight:700}

/* ---- blog index ---- */
.page .sect{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin:34px 0 14px}
.page .sect:first-of-type{margin-top:10px}
.postgrid,.page .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-bottom:12px}
.page .grid a.card,.postgrid a.card{margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;color:var(--text)}
.page .grid a.card:hover,.postgrid a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--blue-line);text-decoration:none}
.page .grid a.card img{width:100%;aspect-ratio:1200/630;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.page .grid a.card .cb{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;gap:8px}
.page .grid a.card b{font-size:17px;line-height:1.35;color:var(--ink);display:block}
.page .grid a.card p{font-size:14.5px;color:var(--mut);margin:0;flex:1;line-height:1.55}
.page .grid a.card span{color:var(--blue);font-size:13.5px;font-weight:800}

/* ---- post extras ---- */
.page .series{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.page .series a{font-size:12.5px;font-weight:800;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--mut);background:#fff}
.page .series a:hover{border-color:var(--blue-line);color:var(--blue);text-decoration:none}
.page .series a.cur{background:var(--blue);color:#fff;border-color:var(--blue)}
.page .glance{background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:16px;padding:16px 20px;margin:0 0 22px;font-size:16.5px;line-height:1.6;color:var(--ink)}
.page .glance .k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.page .fig{margin:18px 0 24px}
.page .fig img{width:100%;display:block;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
.page .fig figcaption{font-size:13.5px;color:var(--mut2);margin-top:9px;line-height:1.5}
.page .steps,.page .loop,.page .chg{counter-reset:s;margin:14px 0 20px}
.page .steps>div,.page .loop>div,.page .chg>div{position:relative;padding:12px 16px 12px 54px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:15.5px;box-shadow:var(--shadow)}
.page .chg>div{padding:14px 18px 14px 58px;border-radius:14px}
.page .steps>div::before,.page .loop>div::before,.page .chg>div::before{counter-increment:s;content:counter(s);position:absolute;left:14px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px}
.page .chg>div::before{left:16px;top:14px;width:30px;height:30px}
.page .chg h3{margin:0 0 6px;font-size:17px}
.page .faq dt{color:var(--ink);font-weight:800;margin-top:14px}
.page .faq dd{margin:4px 0 0;font-size:15.5px}
.page .dl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:16px;padding:18px 22px;margin:22px 0}
.page .dl b{color:var(--ink);font-size:17px;display:block;margin-bottom:4px}
.page .dl span{font-size:14px;color:var(--mut)}
.page .dl a.btn{margin-left:auto;background:var(--blue);color:#fff;border-radius:999px;padding:12px 20px;font-weight:800;white-space:nowrap}
.page .tb{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.page .tb div{border-radius:10px;padding:8px 12px;font-size:13.5px;line-height:1.5}
.page .tb .was{background:var(--bg3);border:1px solid var(--line)}
.page .tb .now{background:var(--green-soft);border:1px solid #bfe6cc}
.page .tb i{display:block;font-style:normal;font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.page .tb .was i{color:var(--mut2)}
.page .tb .now i{color:var(--green)}
@media(max-width:560px){.page .tb{grid-template-columns:1fr}}
.page .rates,.page .score{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0 20px}
.page .rates div,.page .score div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--mut);box-shadow:var(--shadow)}
.page .rates b,.page .score b{display:block;font-size:24px;color:var(--ink);letter-spacing:-.02em}
.page .rates i,.page .score i{display:block;font-style:normal;color:var(--blue);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.page .bands{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.page .bands span{border-radius:999px;padding:6px 14px;font-size:13px;font-weight:800}
.page .b1{background:var(--green-soft);color:var(--green);border:1px solid #bfe6cc}
.page .b2{background:var(--amber-soft);color:var(--amber);border:1px solid #f1dfa0}
.page .b3{background:var(--red-soft);color:var(--red);border:1px solid #f3c1bb}
/* interactive sample quiz (case-study + numericals posts) */
.sample{background:#fff;color:#1c2b3a;border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin:18px 0 24px;box-shadow:var(--shadow-lg)}
.scase{background:#f3f6fa;border-left:5px solid #4F46E5;border-radius:12px;padding:14px 16px;line-height:1.7;font-size:15px}.scase p{margin:0 0 10px}.scase p:last-child{margin:0}
.sk{display:block;font-size:11px;font-weight:800;letter-spacing:.8px;color:#4F46E5;text-transform:uppercase;margin-bottom:6px}
.sq{margin-top:16px;border:1px solid #e2e8f0;border-radius:14px;padding:14px 16px}
.sqn{font-size:12px;font-weight:800;color:#4F46E5;margin-bottom:4px}.sst{font-weight:600;font-size:16px;line-height:1.55;margin-bottom:10px}
.so{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;padding:10px 12px;margin-bottom:8px;font:inherit;font-size:14.5px;line-height:1.5;color:#1c2b3a;cursor:pointer}
.so:hover:not([disabled]){border-color:#4F46E5}.so[disabled]{cursor:default}
.so .sl{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#fff;border:1.5px solid #cbd5e1;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.so.right{border-color:#16A34A;background:#f0fdf4}.so.right .sl{background:#16A34A;color:#fff;border-color:#16A34A}
.so.wrong{border-color:#DC2626;background:#fef2f2}.so.wrong .sl{background:#DC2626;color:#fff;border-color:#DC2626}
.sx{display:none;margin-top:6px}.sv{border-radius:12px;padding:10px 14px;font-weight:800;margin-bottom:8px}.sv.good{background:#f0fdf4;color:#15803d;border:1.5px solid #16A34A}.sv.poor{background:#fef2f2;color:#b91c1c;border:1.5px solid #DC2626}
.swhy{background:#f0fdf4;border-left:4px solid #16A34A;border-radius:0 12px 12px 0;padding:10px 14px;font-size:14px;line-height:1.6}
.swrong{margin-top:8px;font-size:13.5px;line-height:1.55}.swrong>b{display:block;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#64748B;margin-bottom:4px}.sw{padding:6px 10px;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:5px;background:#fff}.sw b{color:#DC2626}
.sscore{margin-top:14px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.55}

/* ---- What's new timeline ---- */
.page .badge{display:inline-flex;align-items:center;gap:8px;background:var(--green-soft);border:1px solid #bfe6cc;color:var(--green);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:800;margin:6px 0 26px}
.page .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(30,132,73,.15)}
.tl{position:relative;padding-left:26px}
.tl:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--blue),var(--blue-line))}
.ev{position:relative;margin:0 0 22px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.ev:before{content:"";position:absolute;left:-23px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 1px var(--blue-line)}
.ev.new{border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-soft)}
.date{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--blue);text-transform:uppercase}
.ev .tag{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:3px 9px;margin-left:8px;background:var(--bg3);color:var(--mut);letter-spacing:0;text-transform:none}
.ev .tag.content{background:var(--green-soft);color:var(--green)}
.ev .tag.platform{background:var(--blue-soft);color:var(--blue)}
.ev .tag.store{background:var(--amber-soft);color:var(--amber)}
.ev h3{font-size:17.5px;margin:6px 0 6px}
.ev p,.ev li{font-size:15px;color:var(--text)}
.ev p:last-child{margin-bottom:0}
.ev ul{padding-left:20px;margin:4px 0 0}
.page .next{margin-top:34px;background:var(--blue-soft);border:1px dashed var(--blue-line);border-radius:16px;padding:18px 20px}
.page .next h3{color:var(--blue);font-size:16px;margin:0 0 6px}

/* ---- About ---- */
.page .about-grid{display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:start;margin-bottom:10px}
@media(max-width:700px){.page .about-grid{grid-template-columns:1fr}}
.page .photo{width:100%;border-radius:18px;border:1px solid var(--line);display:block;box-shadow:var(--shadow-lg)}

/* ---- product pages ---- */
.page .pr{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:30px;color:var(--ink);font-weight:800;margin:14px 0 6px;letter-spacing:-.02em}
.page .pr s{color:var(--mut2);font-size:18px;font-weight:500}
.page .pr .save{color:var(--green);background:var(--green-soft);border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:800}
.page .pr [hidden]{display:none}
.page .prodhead{display:grid;grid-template-columns:1fr auto;gap:18px 32px;align-items:start;margin-bottom:8px}
@media(max-width:700px){.page .prodhead{grid-template-columns:1fr}}
.page .prodacts{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 22px}
.page .prodacts .btn{margin:0}
.page table.spec th{width:34%;text-transform:none;letter-spacing:0;font-size:14px}

/* ---- legal / plain pages ---- */
.page.legal h2{font-size:21px;margin-top:1.8em}

/* ---- quiz ---- */
.quiz .bar{height:8px;background:var(--bg3);border-radius:6px;margin:0 0 22px;border:1px solid var(--line)}
.quiz .bar b{display:block;height:100%;background:var(--blue);border-radius:6px;transition:width .3s}
.quiz #qcard{padding:26px 24px;margin:0}
.quiz .meta{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--blue);margin:0 0 14px;letter-spacing:.04em;text-transform:uppercase}
.quiz .stem{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:18px;line-height:1.5}
.quiz .opt{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;color:var(--text);font-size:15.5px;cursor:pointer;margin-bottom:10px;font-family:inherit;line-height:1.5;transition:border-color .15s,background .15s}
.quiz .opt:hover:not(:disabled){border-color:var(--blue);background:var(--blue-soft)}
.quiz .opt.ok{border-color:var(--green);background:var(--green-soft);color:var(--ink);font-weight:700}
.quiz .opt.bad{border-color:var(--red);background:var(--red-soft)}
.quiz .expl{background:var(--bg3);border-left:4px solid var(--blue);border-radius:0 12px 12px 0;padding:13px 16px;font-size:15px;margin:14px 0 18px}
.quiz .big{font-size:64px;color:var(--ink);font-weight:800;text-align:center;letter-spacing:-.03em;line-height:1.1}
.quiz .trow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.quiz .trow span{text-align:right}

/* ---- centred single-card pages (404, order page) ---- */
.centre{min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;justify-content:center;padding:32px 20px}
.centre .card{max-width:560px;width:100%;padding:36px 30px;text-align:center;box-shadow:var(--shadow-lg)}
.centre .code{font-size:72px;line-height:1;color:var(--blue);font-weight:800;letter-spacing:-.04em}
.centre h1{font-size:28px;margin:12px 0 8px}
.centre p{color:var(--mut);font-size:15.5px;line-height:1.6;margin:0 0 8px}
.centre .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.centre .small{font-size:13px;color:var(--mut2);margin-top:18px}
.centre .mark{width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;font-size:30px;font-weight:800;line-height:64px;margin:0 auto 14px}
.centre .spin{width:36px;height:36px;border:4px solid var(--line);border-top-color:var(--blue);border-radius:50%;margin:18px auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.centre .creds{background:var(--bg3);border:1px solid var(--blue-line);border-radius:14px;padding:18px;margin:16px 0;font-family:ui-monospace,Consolas,monospace;font-size:17px;color:var(--ink);text-align:left}
.centre .creds b{color:var(--blue)}
.centre .books{text-align:left;background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:14px;max-height:260px;overflow:auto}
.centre .books a{display:block;color:var(--text);font-size:13.5px;padding:6px 0;border-bottom:1px dashed var(--line)}
.centre .books b{color:var(--ink)}
.centre .btn{margin:6px 4px 0}