/* WealthPro — website. Same system as the 財務健康檢查 tool (DESIGN.md, direction A · 滙豐式克制):
   white page, grey bands, square edges, black type, logo green only where it carries meaning. */

:root{
  color-scheme:light;
  --bg:#FFFFFF; --surface-alt:#F4F4F4; --surface-hover:#EDEDED;
  --border:#D9D9D9; --border-soft:#EBEBEB; --border-field:#8C8C8C; --border-hover:#1A1A1A;
  --text:#1A1A1A; --text-2:#333333; --text-3:#666666;
  --accent:#03B243; --accent-hover:#14C454; --accent-ink:#0B7A35; --accent-wash:#EAF7EF; --neon:#2BFF56;
  --go:#07873A; --go-hover:#066F31;  /* green buttons with white text (4.6:1) */
  --accent-rgb:3,178,67;
  --signal:#C2410C; --signal-wash:#FDF1EB;
  --f-sans:"Noto Sans TC","PingFang HK","Microsoft JhengHei",system-ui,sans-serif;
  --f-num:"Source Sans 3","Noto Sans TC",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1200px; --gut:clamp(16px,4vw,56px); --topH:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topH) + 16px)}
body{margin:0;background:var(--bg);color:var(--text-2);font:400 15.5px/1.75 var(--f-sans);letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{color:var(--text);margin:0;letter-spacing:.02em}
p{margin:0 0 1em}
button{font:inherit;letter-spacing:inherit}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums lining-nums;letter-spacing:0}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--text);color:#fff;padding:10px 16px}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- Utility strip + top bar ---------- */
.util{background:var(--accent-wash);border-top:4px solid var(--accent);border-bottom:1px solid #D3EEDC;font-size:13px;color:var(--accent-ink)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:16px}
.util nav{display:flex;gap:22px}
.util a{text-decoration:none}
.util a{color:var(--text-2)}
.util a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.util span{font-weight:500}
.top{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border);height:var(--topH)}
.top .wrap{display:flex;align-items:center;height:100%;gap:32px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.brand img{height:30px;width:auto}
.brand span{font-size:13px;color:var(--text-3);padding-left:14px;border-left:1px solid var(--border);line-height:1.3}
.mainnav{display:flex;gap:4px;margin-left:auto;height:100%}
.mainnav a{display:flex;align-items:center;padding:0 14px;height:100%;text-decoration:none;color:var(--text);font-size:15px;font-weight:500;box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .2s,background-color .2s}
.mainnav a:hover{background:var(--accent-wash);box-shadow:inset 0 -3px 0 #A7E3BC}
.mainnav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent)}
.top .btn{flex-shrink:0}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--text);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.menu-btn i{display:block;width:18px;height:2px;background:var(--text);position:relative}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text);transition:transform .2s}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.menu-open .menu-btn i{background:transparent}
.menu-open .menu-btn i::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translateY(-6px) rotate(-45deg)}
.drawer{display:none}

/* ---------- Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:0;padding:13px 24px;min-height:48px;font:600 15.5px/1.2 var(--f-sans);letter-spacing:.02em;cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s,box-shadow .2s}
.btn-pri{background:var(--text);color:#fff}
.btn-pri:hover{background:#333}
.btn-pri:active{background:#000}
.btn-go{background:var(--go);color:#fff}
.btn-go:hover{background:var(--go-hover)}
.btn-go:active{background:#055A27}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.btn-ghost:hover{background:var(--surface-alt)}
.btn-ghost.on-dark{color:#fff;box-shadow:inset 0 0 0 1px #fff}
.btn-ghost.on-dark:hover{background:#333}
.btn-sm{min-height:40px;padding:9px 18px;font-size:14.5px}
.btn[aria-disabled="true"],.btn:disabled{background:#E6E6E6;color:#8C8C8C;box-shadow:none;cursor:not-allowed}
.btn .arr{font-family:var(--f-num);transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.link{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.link:hover{text-decoration-color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- Type helpers ---------- */
.eyebrow{display:block;font:600 12.5px/1.4 var(--f-num);letter-spacing:.14em;color:var(--text-3);text-transform:uppercase;margin-bottom:14px}
.eyebrow b{color:var(--accent);font-weight:700;font-size:15px;margin-right:12px;letter-spacing:.06em}
.eyebrow b::before{content:"";display:inline-block;width:18px;height:3px;background:var(--accent);vertical-align:4px;margin-right:8px}
.h-hero{font-size:clamp(32px,3.6vw,48px);font-weight:300;line-height:1.3}
.h-page{font-size:clamp(30px,3.2vw,42px);font-weight:300;line-height:1.3}
.h-sec{font-size:clamp(24px,2.4vw,32px);font-weight:300;line-height:1.35}
.h-mark{font-size:19px;font-weight:500;line-height:1.4}
.h-mark::before{content:"";display:inline-block;width:4px;height:18px;margin-right:12px;background:var(--accent);vertical-align:-2px}
.lead{font-size:17px;line-height:1.85;color:var(--text-2);max-width:620px}
.muted{color:var(--text-3)}
.small{font-size:13.5px;line-height:1.7}

/* ---------- Sections ---------- */
.sec{padding:clamp(56px,7vw,96px) 0}
.sec + .sec{border-top:1px solid var(--border-soft)}
.band{background:var(--surface-alt)}
.sec.band + .sec,.sec + .sec.band{border-top:0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:40px}
.sec-head p{margin:14px 0 0;max-width:640px}

/* ---------- Home hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:min(640px,calc(100svh - var(--topH) - 36px));border-bottom:1px solid var(--border)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:56px var(--gut) 56px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.hero-copy .h-hero{max-width:560px;margin-bottom:22px}
.hero-copy .lead{margin-bottom:32px;max-width:520px}
.hero-photo{position:relative;background:#2a2a2a;overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero-photo figcaption{position:absolute;left:0;bottom:0;background:var(--text);color:#fff;padding:22px 28px 24px;max-width:360px;border-top:4px solid var(--accent)}
.hero-photo figcaption .cap-k{display:block;font-size:12.5px;letter-spacing:.14em;color:#a6a6a6;margin-bottom:6px}
.hero-photo figcaption b{display:block;font:200 clamp(64px,6.4vw,92px)/.95 var(--f-num);color:var(--neon);margin-bottom:10px;letter-spacing:-.02em}
.hero-photo figcaption b small{font:400 16px var(--f-sans);color:#fff;margin-left:6px;letter-spacing:0}
.hero-photo figcaption span:last-child{font-size:13.5px;line-height:1.6;color:#d9d9d9}
.stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;margin-top:44px}
.stats div{position:relative;padding:18px 22px 4px 0}
.stats div + div{padding-left:22px;border-left:1px solid var(--border)}
.stats div::before{content:"";position:absolute;top:0;left:0;width:28px;height:3px;background:var(--accent)}
.stats div + div::before{left:22px}
.stats b{display:flex;align-items:baseline;gap:4px;font:200 clamp(38px,3.3vw,52px)/1 var(--f-num);color:var(--text);letter-spacing:-.02em;white-space:nowrap}
.stats b small{font:500 14px var(--f-sans);color:var(--text-2);letter-spacing:0}
.stats b small.pre{font:500 16px var(--f-num);align-self:flex-start;margin-top:8px}
.stats span{display:block;margin-top:8px;font-size:13px;color:var(--text-3);white-space:nowrap}

/* ---------- Quick access ---------- */
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--border)}
.quick a{display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;text-decoration:none;min-height:190px;transition:background-color .2s}
.quick a + a{border-left:1px solid var(--border)}
.quick a:hover{background:var(--surface-alt)}
.quick a:hover .go{box-shadow:inset 0 -2px 0 var(--accent)}
.quick svg{width:30px;height:30px;stroke:var(--text);stroke-width:1.4;fill:none;margin-bottom:6px}
.quick h3{font-size:17px;font-weight:500}
.quick p{font-size:14px;line-height:1.7;color:var(--text-3);margin:0;flex:1}
.quick .go{font-weight:600;font-size:14px;color:var(--text);align-self:flex-start;padding-bottom:2px}

/* ---------- Principles ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--text)}
.cols3 > div{padding:26px 28px 6px 0}
.cols3 > div + div{padding-left:28px;border-left:1px solid var(--border)}
.cols3 .n{font:300 40px/1 var(--f-num);color:var(--text);display:block;margin-bottom:18px}
.cols3 h3{font-size:18px;font-weight:500;margin-bottom:10px}
.cols3 p{font-size:15px;color:var(--text-2)}
.disclose{margin-top:32px;padding:16px 20px;background:var(--surface-alt);border-left:4px solid var(--text);font-size:14px;color:var(--text-2)}

/* ---------- Health check feature ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.pillars{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--border)}
.pillars li{display:grid;grid-template-columns:28px minmax(0,1fr) 120px 44px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border-soft);font-size:15px}
.pillars .i{font:600 12.5px/1 var(--f-num);color:var(--text-3)}
.pillars .t{color:var(--text);font-weight:500}
.pillars .bar{height:6px;background:var(--border-soft);position:relative}
.pillars .bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);width:var(--w);transform-origin:left;animation:grow 1s var(--ease) both}
.pillars .w{font:600 14px/1 var(--f-num);color:var(--text);text-align:right}
@keyframes grow{from{transform:scaleX(0)}}
.stmt{background:var(--text);color:#fff;padding:32px}
.stmt .eyebrow{color:#a6a6a6}
.stmt-top{display:flex;gap:28px;align-items:center;padding-bottom:24px;border-bottom:1px solid #333}
.ring{width:132px;height:132px;flex-shrink:0;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring .tr{stroke:#333}
.ring .arc{stroke:var(--neon);stroke-dasharray:var(--len);stroke-dashoffset:var(--off);animation:draw 1.2s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:var(--len)}}
.ring b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:300 44px/1 var(--f-num)}
.ring b small{font-size:12.5px;color:#a6a6a6;margin-top:6px;font-family:var(--f-sans);letter-spacing:.08em}
.stmt-top h3{color:#fff;font-size:19px;font-weight:400;margin-bottom:6px}
.stmt-top p{color:#bfbfbf;font-size:14px;margin:0}
.stmt-rows{list-style:none;margin:0;padding:8px 0 0}
.stmt-rows li{display:grid;grid-template-columns:minmax(0,1fr) 100px 36px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #2b2b2b;font-size:14.5px;color:#e6e6e6}
.stmt-rows .bar{height:5px;background:#333;position:relative}
.stmt-rows .bar i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--neon)}
.stmt-rows .bar.low i{background:#F59E0B}
.stmt-rows b{font:600 15px/1 var(--f-num);text-align:right;color:#fff}
.stmt-note{font-size:12.5px;color:#8c8c8c;margin:16px 0 0}
.parts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--border);background:#fff;margin-top:48px}
.parts div{padding:20px 20px 16px}
.parts div + div{border-left:1px solid var(--border)}
.parts b{display:block;font:600 12.5px/1 var(--f-num);letter-spacing:.12em;color:var(--accent-ink);margin-bottom:10px}
.parts h4{font-size:16px;font-weight:500;margin-bottom:6px}
.parts p{font-size:13.5px;line-height:1.65;color:var(--text-3);margin:0}

/* ---------- Plans ---------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.plan{position:relative;background:#fff;border:1px solid var(--border);padding:26px 24px 24px;display:flex;flex-direction:column}
.plan.featured{border-color:var(--text);box-shadow:inset 0 4px 0 var(--accent)}
.plan .tag{position:absolute;top:-1px;right:-1px;background:var(--text);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;letter-spacing:.08em}
.plan .no{font:600 12.5px/1 var(--f-num);letter-spacing:.12em;color:var(--text-3)}
.plan h3{font-size:18px;font-weight:500;margin:12px 0 6px;line-height:1.45}
.plan .plan-no{font:200 44px/1 var(--f-num);color:var(--text);letter-spacing:-.01em}
.plan .plan-no::after{content:"";display:block;width:24px;height:3px;background:var(--accent);margin-top:14px}
.plan h3.plan-t{font-size:clamp(15.5px,1.32vw,17px);margin:16px 0 6px;letter-spacing:0;white-space:nowrap}
.plan .for{font-size:14px;color:var(--text-3);margin-bottom:18px}
.plan .price{font:300 34px/1 var(--f-num);color:var(--text);padding:16px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);margin-bottom:16px}
.plan .price small{font:400 14px var(--f-sans);color:var(--text-3);margin-left:2px}
.plan ul{list-style:none;padding:0;margin:0 0 18px;flex:1}
.plan li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.65;margin-bottom:8px}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:5px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg)}
.plan .ex{font-size:13px;color:var(--text-3);line-height:1.65;padding-top:12px;border-top:1px dashed var(--border);margin-bottom:18px}
.plan .btn{width:100%}

.table-wrap{overflow-x:auto;border:1px solid var(--border);margin-top:40px;-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;min-width:880px;font-size:14.5px}
.cmp th,.cmp td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-soft)}
.cmp thead th{background:var(--surface-alt);font-weight:500;color:var(--text);border-bottom:1px solid var(--border)}
.cmp thead th .num{display:block;font-size:20px;font-weight:300;margin-top:4px}
.cmp tbody th{font-weight:600;color:var(--text);width:140px;background:#fff}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:s;border-top:1px solid var(--text)}
.steps li{list-style:none;padding:22px 24px 8px 0;counter-increment:s}
.steps li + li{padding-left:24px;border-left:1px solid var(--border)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:300 32px/1 var(--f-num);color:var(--text);margin-bottom:14px}
.steps h3{font-size:17px;font-weight:500;margin-bottom:8px}
.steps p{font-size:14.5px;margin:0}
ol.steps{margin:0;padding:0}

/* ---------- Articles ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chips button{min-height:40px;padding:8px 16px;border:1px solid var(--border-field);background:#fff;color:var(--text);font-size:14.5px;cursor:pointer;border-radius:0;transition:border-color .2s,background-color .2s}
.chips button:hover{border-color:var(--text)}
.chips button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:#fff}
.chips button .num{margin-left:6px;opacity:.6;font-size:13px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);text-decoration:none;transition:border-color .2s}
.card:hover{border-color:var(--text)}
.card:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.cover{position:relative;aspect-ratio:16/8;background:var(--surface-alt);border-bottom:1px solid var(--border);overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;padding:18px 20px}
.cover .sec-no{font:200 clamp(56px,6vw,76px)/.8 var(--f-num);color:var(--text);letter-spacing:-.02em}
.cover .cat{font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--text-2);background:#fff;padding:4px 10px;border:1px solid var(--border)}
.cover::before{content:"";position:absolute;left:20px;top:18px;width:28px;height:4px;background:var(--accent)}
.cover .lines{position:absolute;right:0;top:0;bottom:0;width:46%;background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(0,0,0,.055) 13px 14px)}
.cover.dark{background:var(--text)}
.cover.dark .sec-no{color:#fff}
.cover.dark .lines{background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(255,255,255,.07) 13px 14px)}
.cover.dark::before{background:var(--neon)}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card .src{font-size:12.5px;color:var(--text-3);margin-bottom:8px;letter-spacing:.04em}
.card h3{font-size:17.5px;font-weight:500;line-height:1.55;margin-bottom:10px}
.card p{font-size:14.5px;line-height:1.75;color:var(--text-3);margin:0 0 16px;flex:1}
.card .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--text-3);padding-top:14px;border-top:1px solid var(--border-soft)}
.card .meta b{color:var(--text);font-weight:600}
.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border:1px solid var(--border);background:#fff;text-decoration:none;margin-bottom:16px;transition:border-color .2s}
.feature:hover{border-color:var(--text)}
.feature .cover{aspect-ratio:auto;min-height:300px;border-bottom:0;border-right:1px solid var(--border)}
.feature .cover .sec-no{font-size:clamp(96px,11vw,150px)}
.feature .card-body{padding:32px 34px}
.feature h3{font-size:clamp(22px,2.2vw,28px);font-weight:300;line-height:1.45;margin-bottom:14px}
.feature:hover h3{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.feature p{font-size:15.5px;line-height:1.85;color:var(--text-2);margin-bottom:22px}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.path{background:#fff;border:1px solid var(--border);padding:24px 24px 18px}
.path h3{font-size:17px;font-weight:500;margin-bottom:6px}
.path > p{font-size:14px;color:var(--text-3);margin-bottom:14px}
.path ol{margin:0;padding:0;list-style:none;counter-reset:p}
.path li{counter-increment:p;border-top:1px solid var(--border-soft)}
.path li a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;padding:10px 0;text-decoration:none;font-size:14.5px;line-height:1.55;color:var(--text)}
.path li a::before{content:counter(p);font:600 13px/1.6 var(--f-num);color:var(--accent-ink)}
.path li a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.search{display:flex;gap:0;max-width:420px;margin-bottom:20px}
.search input{flex:1;height:44px;border:1px solid var(--border-field);border-radius:0;padding:0 14px;font:400 16px var(--f-sans);min-width:0}
.search input:focus{outline:0;border-color:var(--text);box-shadow:0 0 0 1px var(--text),0 0 0 4px rgba(var(--accent-rgb),.28)}
.empty{padding:40px;text-align:center;border:1px dashed var(--border);color:var(--text-3);display:none}

/* ---------- Article page ---------- */
.progress{position:fixed;left:0;top:0;height:3px;background:var(--accent);width:0;z-index:60}
.crumbs{font-size:13.5px;color:var(--text-3);padding:22px 0 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.crumbs span{margin:0 8px;color:var(--text-3)}
.art-head{padding:36px 0 40px;border-bottom:1px solid var(--border)}
.art-head .h-page{max-width:860px;margin-bottom:18px}
.art-head .dek{font-size:18px;line-height:1.85;color:var(--text-2);max-width:760px;margin-bottom:24px}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--text-3)}
.art-meta b{color:var(--text);font-weight:600;margin-right:6px}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,80px);padding:48px 0 72px}
.prose{max-width:700px;font-size:17px;line-height:1.95;color:var(--text-2)}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:21px;font-weight:500;line-height:1.5;margin:2.2em 0 .9em;padding-left:16px;border-left:4px solid var(--accent)}
.prose .dx{background:var(--surface-alt);border-left:4px solid var(--text);padding:16px 20px;margin:1.6em 0 1em;color:var(--text);font-weight:600}
.prose .dx + p{font-weight:500;color:var(--text)}
.prose .lede::first-letter{font-size:1em}
.fade{position:relative;max-height:360px;overflow:hidden}
.fade::after{content:"";position:absolute;inset:auto 0 0 0;height:200px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.gate{border:1px solid var(--text);padding:28px 30px;margin-top:8px;background:#fff}
.gate h3{font-size:20px;font-weight:400;margin-bottom:8px}
.art-end{max-width:700px;margin-top:40px;padding-top:24px;border-top:1px solid var(--border);font-size:13.5px;color:var(--text-3);line-height:1.8}
.aside{position:sticky;top:calc(var(--topH) + 24px);align-self:start;display:flex;flex-direction:column;gap:16px}
.box{border:1px solid var(--border);padding:22px 22px 20px;background:#fff}
.box.dark{background:var(--text);border-color:var(--text);color:#d9d9d9}
.box.dark h3{color:#fff}
.box .eyebrow{margin-bottom:10px}
.box.dark .eyebrow{color:#a6a6a6}
.box h3{font-size:16.5px;font-weight:500;line-height:1.55;margin-bottom:8px}
.box p{font-size:14px;line-height:1.75;margin-bottom:14px}
.box .btn{width:100%}
.box .hl{color:var(--neon);font-weight:600}
.toc{list-style:none;margin:0;padding:0}
.toc li a{display:block;padding:8px 0 8px 14px;border-left:2px solid var(--border-soft);font-size:14px;line-height:1.55;text-decoration:none;color:var(--text-3)}
.toc li a:hover{color:var(--text);border-left-color:var(--text)}
.toc li a.on{color:var(--text);border-left-color:var(--accent);font-weight:500}
.pn{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);margin-top:48px;max-width:700px}
.pn a{padding:18px 20px;text-decoration:none;display:block}
.pn a + a{border-left:1px solid var(--border);text-align:right}
.pn a:hover{background:var(--surface-alt)}
.pn small{display:block;font-size:12.5px;color:var(--text-3);letter-spacing:.06em;margin-bottom:4px}
.pn span{font-size:15px;color:var(--text);font-weight:500;line-height:1.55}

/* ---------- Book ---------- */
.book{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.book-stage{display:flex;justify-content:center;padding:40px 0;background:var(--surface-alt);border:1px solid var(--border)}
.bcover{position:relative;width:min(280px,70%);aspect-ratio:148/210;background:var(--text);color:#fff;box-shadow:0 22px 40px -18px rgba(0,0,0,.45),inset 6px 0 0 #000,inset 7px 0 0 #333;padding:28px 24px 22px 32px;display:flex;flex-direction:column}
.bcover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bcover .bt{font:300 clamp(36px,3.6vw,46px)/1.15 var(--f-sans);letter-spacing:.06em;margin-top:auto;color:#fff}
.bcover .bs{font-size:12px;letter-spacing:.14em;color:#a6a6a6;margin-top:14px;padding-top:12px;border-top:1px solid #444}
.bcover .bm{width:36px;height:4px;background:var(--neon)}
.bcover .bl{position:absolute;right:22px;top:26px;font:600 10.5px/1 var(--f-num);letter-spacing:.2em;color:#8c8c8c}
.bcover .bars{display:flex;gap:6px;align-items:flex-end;height:64px;margin-top:22px}
.bcover .bars i{width:14px;background:#333}
.bcover .bars i:last-child{background:var(--neon)}
.price-box{display:flex;align-items:flex-end;gap:20px;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:26px 0 22px}
.price-box .now{font:300 52px/1 var(--f-num);color:var(--text)}
.price-box .now small{font:400 15px var(--f-sans);color:var(--text-3);margin-left:4px}
.price-box .was{font-size:15px;color:var(--text-3)}
.price-box s{font:400 17px var(--f-num)}
.price-box .save{font-size:13px;font-weight:600;color:var(--accent-ink);background:var(--accent-wash);padding:3px 10px;margin-left:auto;align-self:center}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);margin-top:22px}
.facts div{padding:14px 16px}
.facts div + div{border-left:1px solid var(--border)}
.facts b{display:block;font-size:12.5px;color:var(--text-3);font-weight:400;margin-bottom:2px}
.facts span{font-size:15px;color:var(--text);font-weight:500}
.contents{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--border);background:#fff}
.contents > div{padding:22px 20px 18px}
.contents > div + div{border-left:1px solid var(--border)}
.contents .pt{font:600 12.5px/1 var(--f-num);letter-spacing:.12em;color:var(--accent-ink)}
.contents h3{font-size:17px;font-weight:500;margin:10px 0 12px}
.contents ul{list-style:none;margin:0;padding:0}
.contents li{border-top:1px solid var(--border-soft)}
.contents li a{display:block;padding:9px 0;font-size:14px;line-height:1.55;text-decoration:none;color:var(--text-2)}
.contents li a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.contents li a .num{color:var(--text-3);margin-right:6px;font-size:13px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--text)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-size:16.5px;font-weight:500;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex-shrink:0;background:linear-gradient(var(--text),var(--text)) center/12px 2px no-repeat,linear-gradient(var(--text),var(--text)) center/2px 12px no-repeat;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
.faq .a{padding:0 0 22px;max-width:760px;font-size:15px}

/* ---------- Forms ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label,.field legend{font-size:14px;font-weight:500;color:var(--text)}
.field input,.field select,.field textarea{height:48px;border:1px solid var(--border-field);border-radius:0;background:#fff;padding:0 14px;font:400 16px var(--f-sans);color:var(--text);width:100%}
.field textarea{height:auto;min-height:110px;padding:12px 14px;line-height:1.7;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#4D4D4D}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--text);box-shadow:0 0 0 1px var(--text),0 0 0 4px rgba(var(--accent-rgb),.28)}
.field .hint{font-size:13px;color:var(--text-3)}
.seg{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.seg label{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--border-field);cursor:pointer;font-size:15px;font-weight:400}
.seg input{accent-color:var(--accent-ink);width:16px;height:16px;margin:0}
.seg label:has(input:checked){background:var(--accent-wash);border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.7}
.check input{margin-top:5px;accent-color:var(--accent-ink);width:16px;height:16px;flex-shrink:0}
.form-note{font-size:13.5px;color:var(--text-3)}
.form-out{display:none;grid-column:1/-1;padding:16px 20px;background:var(--accent-wash);border-left:4px solid var(--accent-ink);color:var(--text)}

/* ---------- CTA band + page hero ---------- */
.cta{background:var(--text);color:#d9d9d9}
.cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding-top:64px;padding-bottom:64px}
.cta h2{color:#fff;font-size:clamp(24px,2.4vw,32px);font-weight:300;line-height:1.4;margin-bottom:10px}
.cta p{margin:0;max-width:600px}
.cta .btn-go{min-width:200px}
.phero{border-bottom:1px solid var(--border);background:#fff}
.phero .wrap{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,64px)}
.phero .h-page{max-width:820px;margin-bottom:18px}
.phero.with-photo .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center}
.phero-photo{aspect-ratio:4/3;overflow:hidden;background:#2a2a2a}
.phero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.anchor-nav{border-bottom:1px solid var(--border);background:var(--surface-alt);position:sticky;top:var(--topH);z-index:40}
.anchor-nav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.anchor-nav a{flex-shrink:0;padding:14px 16px;font-size:14.5px;text-decoration:none;color:var(--text-2);white-space:nowrap}
.anchor-nav a:hover{color:var(--text);background:var(--surface-hover)}

.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border)}
.creds div{padding:22px 24px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;gap:16px;align-items:flex-start;background:#fff}
.creds svg{width:26px;height:26px;stroke:var(--text);stroke-width:1.4;fill:none;flex-shrink:0;margin-top:2px}
.creds h3{font-size:16px;font-weight:500;margin-bottom:4px}
.creds p{font-size:14px;color:var(--text-3);margin:0;line-height:1.7}
.bounds{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border)}
.bounds > div{padding:26px 28px}
.bounds > div + div{border-left:1px solid var(--border)}
.bounds h3{font-size:17px;font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.bounds h3 i{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;font-weight:700}
.bounds .yes h3 i{background:var(--accent);color:#0A0A0A}
.bounds .no h3 i{background:var(--text);color:#fff}
.bounds ul{margin:0;padding:0 0 0 18px;font-size:15px}
.bounds li{margin-bottom:8px}

.legal h2{font-size:20px;font-weight:500;margin:36px 0 12px}
.legal{max-width:780px}

/* ---------- Status flags, videos, education strip ---------- */
.flag{display:inline-block;padding:2px 8px;font:600 12px/1.5 var(--f-sans);background:var(--surface-alt);color:var(--text-3);margin-bottom:8px;letter-spacing:.04em}
.flag.on{background:var(--accent-wash);color:var(--accent-ink)}
.plan .tag.soon{background:var(--surface-alt);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--border)}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:var(--text);cursor:pointer;overflow:hidden;border-bottom:1px solid var(--border)}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s}
.yt:hover img{opacity:1}
.yt .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--accent)}
.yt .play::after{content:"";position:absolute;left:26px;top:20px;border-left:16px solid #0A0A0A;border-top:12px solid transparent;border-bottom:12px solid transparent}
.yt.soon{cursor:default;background:var(--text) repeating-linear-gradient(90deg,transparent 0 13px,rgba(255,255,255,.06) 13px 14px)}
.yt.soon .play{background:#333}
.yt.soon .play::after{border-left-color:#8c8c8c}
.yt .soon-t{position:absolute;left:16px;bottom:14px;font-size:12.5px;font-weight:600;letter-spacing:.1em;color:#d9d9d9}
.yt-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-bottom:1px solid var(--border)}
.vcard:hover{border-color:var(--border)}
.vcard:hover h3{text-decoration:none}
.edu-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);background:#fff;margin-top:16px}
.edu-strip a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:18px 22px;text-decoration:none;transition:background-color .2s}
.edu-strip a + a{border-left:1px solid var(--border)}
.edu-strip a:hover{background:var(--surface-alt)}
.edu-strip b{color:var(--text);font-weight:500;font-size:16px}
.edu-strip span{grid-column:1;font-size:13.5px;color:var(--text-3)}
.edu-strip i{grid-row:1/3;grid-column:2;font-style:normal;font-family:var(--f-num);color:var(--text)}
@media (max-width:720px){.edu-strip{grid-template-columns:1fr}.edu-strip a + a{border-left:0;border-top:1px solid var(--border)}}

/* ---------- Plan finder ---------- */
.finder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);border:1px solid var(--border);background:#fff}
.finder fieldset{border:0;margin:0;padding:24px 24px 26px;min-width:0}
.finder fieldset + fieldset{border-left:1px solid var(--border)}
.finder legend{float:left;width:100%;display:flex;gap:12px;align-items:center;font-size:16.5px;font-weight:500;color:var(--text);margin-bottom:16px;padding:0}
.finder legend .num{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--text);color:#fff;font-size:14px;font-weight:600}
.finder .opts{clear:both;display:flex;flex-direction:column;gap:8px}
.finder .opts button{min-height:48px;text-align:left;padding:10px 14px;border:1px solid var(--border-field);background:#fff;color:var(--text);font-size:15px;line-height:1.5;cursor:pointer;border-radius:0;transition:border-color .2s,background-color .2s}
.finder .opts button:hover{border-color:var(--text)}
.finder .opts button[aria-pressed="true"]{background:var(--accent-wash);border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.finder-out{background:var(--text);color:#d9d9d9;padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.finder-out .muted{color:#a6a6a6;margin:0}
.finder-out .eyebrow{color:#a6a6a6;margin-bottom:8px}
.finder-out h3{color:#fff;font-size:21px;font-weight:400;line-height:1.45}
.fo-price{font:300 34px/1 var(--f-num);color:var(--neon);margin:14px 0}
.fo-price small{font:400 13.5px var(--f-sans);color:#a6a6a6;margin-left:10px}
.finder-out p{font-size:14.5px}
.finder-out .actions{margin-top:6px}
.finder-out .btn{flex:1 1 auto}

/* ---------- Plan detail tabs ---------- */
.plan-more{display:block;text-align:center;margin-top:12px;font-size:14px;color:var(--text);text-underline-offset:4px;text-decoration-color:var(--accent)}
.plan-more:hover{text-decoration-color:var(--text)}
.tabs{background:#fff;border:1px solid var(--border)}
.tablist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--border);background:var(--surface-alt)}
.tablist button{border:0;background:transparent;padding:16px 18px;text-align:left;font-size:15px;font-weight:500;color:var(--text-2);cursor:pointer;line-height:1.5;box-shadow:inset 0 -3px 0 transparent;transition:background-color .2s}
.tablist button + button{border-left:1px solid var(--border)}
.tablist button .num{display:block;font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--text-3);margin-bottom:2px}
.tablist button:hover{background:var(--surface-hover)}
.tablist button[aria-selected="true"]{background:#fff;color:var(--text);box-shadow:inset 0 -3px 0 var(--accent)}
.panel{padding:30px 32px 32px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--border-soft);margin-bottom:28px}
.panel-head h3{font-size:clamp(21px,2vw,26px);font-weight:300;margin-bottom:4px}
.panel-head p{margin:0;font-size:14.5px}
.panel-price .num{font:300 40px/1 var(--f-num);color:var(--text)}
.panel-price small{font-size:14px;color:var(--text-3);margin-left:4px}
.panel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-bottom:28px}
.panel-grid .h-mark{font-size:16px;margin-bottom:14px}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:22px;font-size:15px;line-height:1.65;margin-bottom:9px}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:5px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg)}
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 18px 22px;border-left:1px solid var(--border);margin-left:5px}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-6px;top:5px;width:11px;height:11px;background:#fff;border:2px solid var(--text)}
.tl li:first-child::before{background:var(--accent);border-color:var(--accent)}
.tl b{display:block;font-size:13.5px;color:var(--text);font-weight:600;line-height:1.4;margin-bottom:2px}
.tl span{font-size:14.5px;line-height:1.65;color:var(--text-2)}
.agenda{width:100%;border-collapse:collapse;font-size:14.5px}
.agenda th,.agenda td{padding:9px 0;border-bottom:1px solid var(--border-soft);text-align:left;vertical-align:top;line-height:1.6}
.agenda th{width:72px;font-weight:600;color:var(--text);font-size:14px}
.agenda tr:first-child th,.agenda tr:first-child td{border-top:1px solid var(--text)}
.panel .ex{font-size:13px;color:var(--text-3);line-height:1.7}
.more-wrap{text-align:center;margin-top:20px}

/* ---------- Course page ---------- */
.course-panel{padding:28px}
.cp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#333;border:1px solid #333;margin-bottom:12px}
.cp-stats div{background:var(--text);padding:14px 14px 12px}
.cp-stats b{display:block;font:300 28px/1.1 var(--f-num);color:#fff}
.cp-stats span{font-size:12.5px;color:#a6a6a6}
.course-panel .stmt-rows li{grid-template-columns:minmax(0,1fr) 0 60px}
.feat{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0}
.feat > div{border-top:1px solid var(--text);padding-left:0!important;border-left:0!important;padding-right:28px}
.syl{border-top:1px solid var(--text);background:#fff}
.syl details{border-bottom:1px solid var(--border)}
.syl summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:56px minmax(0,1fr) auto 24px;gap:12px;align-items:center;padding:18px 20px}
.syl summary::-webkit-details-marker{display:none}
.syl summary::after{content:"";width:12px;height:12px;justify-self:end;background:linear-gradient(var(--text),var(--text)) center/12px 2px no-repeat,linear-gradient(var(--text),var(--text)) center/2px 12px no-repeat;transition:transform .25s var(--ease)}
.syl details[open] summary::after{transform:rotate(45deg)}
.syl summary:hover{background:var(--surface-alt)}
.syl .sn{font:300 26px/1 var(--f-num);color:var(--text)}
.syl .st{font-size:16.5px;font-weight:500;color:var(--text);line-height:1.5}
.syl .sc{font-size:13.5px;color:var(--text-3);font-weight:600}
.syl .ls{margin:0;padding:0 20px 20px 88px;columns:2;column-gap:32px;list-style:none;counter-reset:l}
.syl .ls li{counter-increment:l;break-inside:avoid;display:grid;grid-template-columns:28px minmax(0,1fr);font-size:14.5px;line-height:1.6;padding:7px 0;border-top:1px solid var(--border-soft)}
.syl .ls li::before{content:counter(l,decimal-leading-zero);font:600 12.5px/1.9 var(--f-num);color:var(--accent-ink)}
.syl .ls li.more{color:var(--text-3)}
.syl .ls li.more::before{content:"+";color:var(--text-3)}
.price-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;max-width:920px}
@media (max-width:980px){
  .finder{grid-template-columns:1fr 1fr}
  .finder-out{grid-column:1/-1}
  .tablist{grid-template-columns:1fr 1fr}
  .tablist button:nth-child(3){border-left:0}
  .tablist button:nth-child(n+3){border-top:1px solid var(--border)}
  .panel-grid{grid-template-columns:1fr 1fr}
  .panel-grid > div:last-child{grid-column:1/-1}
  .feat{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .finder{grid-template-columns:1fr}
  .finder fieldset + fieldset{border-left:0;border-top:1px solid var(--border)}
  .panel{padding:22px 18px 24px}
  .panel-head{flex-direction:column;align-items:flex-start}
  .panel-grid{grid-template-columns:1fr;gap:28px}
  .tablist button{padding:12px 14px;font-size:14px}
  .feat{grid-template-columns:1fr}
  .syl summary{grid-template-columns:40px minmax(0,1fr) 20px;padding:16px 14px}
  .syl .sc{display:none}
  .syl .ls{columns:1;padding:0 14px 16px 14px}
  .price-grid{grid-template-columns:1fr}
  .cp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 3D book ---------- */
.book-stage{overflow:hidden}
.book3d{--w:min(250px,58vw);--h:calc(var(--w) * 1.384);--t:30px;position:relative;width:var(--w);height:var(--h);perspective:1400px;margin:10px 0 26px}
.b3{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(26deg) rotateX(4deg);animation:b3in 1.4s var(--ease) both,b3sway 7s ease-in-out 1.4s infinite alternate;transition:transform .8s var(--ease)}
.book3d:hover .b3{animation-play-state:paused,paused;transform:rotateY(8deg) rotateX(2deg)}
.b3 > div{position:absolute;backface-visibility:hidden}
.b3-front{inset:0;transform:translateZ(calc(var(--t) / 2));overflow:hidden;box-shadow:inset 3px 0 0 rgba(0,0,0,.18)}
.b3-front img{width:100%;height:100%;object-fit:cover;display:block}
.b3-glare{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 48%,transparent 60%);transform:translateX(-120%);animation:b3glare 1.6s var(--ease) 1s both}
.b3-spine{top:0;height:var(--h);width:var(--t);left:calc(var(--w) / 2 - var(--t) / 2);transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));background:linear-gradient(90deg,#1E2340,#2E3458 45%,#1E2340);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 0 18px}
.b3-spine span{writing-mode:vertical-rl;font-size:15px;letter-spacing:.3em;color:#D9B676;font-weight:700}
.b3-spine small{writing-mode:vertical-rl;font-size:9px;letter-spacing:.2em;color:#C8CBDD}
.b3-pages{top:3px;height:calc(var(--h) - 6px);width:calc(var(--t) - 4px);left:calc(var(--w) / 2 - var(--t) / 2 + 2px);transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));background:repeating-linear-gradient(90deg,#F7F4EE 0 2px,#E4DFD5 2px 3px)}
.b3-top{left:0;width:calc(var(--w) - 3px);height:calc(var(--t) - 4px);top:calc(var(--h) / 2 - var(--t) / 2 + 2px);transform:rotateX(90deg) translateZ(calc(var(--h) / 2 - 2px));background:repeating-linear-gradient(0deg,#F7F4EE 0 2px,#E4DFD5 2px 3px)}
.b3-back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--t) / 2));background:#1E2340}
.b3-shadow{position:absolute;left:-4%;right:8%;bottom:-22px;height:26px;background:radial-gradient(closest-side,rgba(0,0,0,.32),transparent);filter:blur(4px);animation:b3shadow 7s ease-in-out 1.4s infinite alternate}
@keyframes b3in{from{opacity:0;transform:rotateY(75deg) rotateX(8deg) translateY(16px)}}
@keyframes b3sway{from{transform:rotateY(26deg) rotateX(4deg) translateY(0)}to{transform:rotateY(14deg) rotateX(2deg) translateY(-8px)}}
@keyframes b3shadow{to{transform:scaleX(.9);opacity:.75}}
@keyframes b3glare{to{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.b3{animation:none;transform:rotateY(18deg)}.b3-shadow,.b3-glare{animation:none}.b3-glare{display:none}}

/* ---------- Course teaser (home) ---------- */
.teaser{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.teaser .ticks li{font-size:15px}

/* ---------- YouTube-style animation cards ---------- */
.yt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.yt-chan{display:flex;gap:18px;align-items:flex-start}
.yt-chan > img{width:52px;height:52px;border-radius:50%;border:1px solid var(--border);background:#fff;flex-shrink:0;margin-top:4px}
.yt-chan .muted{margin:10px 0 0;font-size:15px}
.btn-yt{background:#FF0033;color:#fff}
.btn-yt:hover{background:#D9002B}
.yt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 18px}
.ytc{min-width:0}
.yt-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:#0F0F0F;cursor:pointer;overflow:hidden;border-radius:12px}
.yt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.yt-thumb:hover img{transform:scale(1.03)}
.yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;background:rgba(33,33,33,.82);border-radius:14px;transition:background-color .2s}
.yt-play::after{content:"";position:absolute;left:27px;top:14px;border-left:18px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.yt-thumb:hover .yt-play,.yt-thumb:focus-visible .yt-play{background:#FF0033}
.yt-dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.8);color:#fff;font-size:12.5px;font-weight:600;padding:2px 6px;border-radius:4px}
.yt-thumb.soon{cursor:default;background:linear-gradient(135deg,#1A1A1A 0%,#10261A 100%)}
.yt-thumb.soon::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.04) 23px 24px)}
.yt-thumb.soon .yt-play{background:rgba(255,255,255,.12)}
.yt-ep{position:absolute;left:16px;top:14px;font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--neon)}
.yt-ttl{position:absolute;left:16px;right:16px;bottom:16px;color:#fff;font-size:clamp(15px,1.4vw,18px);font-weight:500;line-height:1.45;text-align:left}
.yt-soon{position:absolute;right:12px;top:12px;font-size:11.5px;font-weight:600;letter-spacing:.08em;color:#0A0A0A;background:var(--neon);padding:3px 8px;border-radius:4px}
.ytc .yt-frame{border-radius:12px;border:0}
.ytc-meta{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding-top:12px}
.ytc-av{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff}
.ytc-meta h3{font-size:16px;font-weight:500;line-height:1.45;margin-bottom:2px}
.ytc-meta p{font-size:13.5px;color:var(--text-3);margin:0}
.ytc-read{display:inline-block;margin-top:6px;font-size:13.5px;color:var(--text-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.ytc-read:hover{color:var(--text)}
@media (max-width:980px){.teaser{grid-template-columns:1fr}.yt-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.yt-grid{grid-template-columns:1fr}.yt-head .actions{width:100%}}

/* ---------- Coming soon ---------- */
.btn.btn-soon{background:#fff;color:var(--text);box-shadow:inset 0 0 0 1px var(--border-field);cursor:default;letter-spacing:.06em}
.btn.btn-soon i{width:8px;height:8px;background:var(--accent);display:inline-block}
.price-box.soon-box{flex-direction:column;align-items:flex-start;gap:8px}
.price-box.soon-box .now{font:300 clamp(34px,4vw,46px)/1 var(--f-num);letter-spacing:.01em}

/* ---------- Member login ---------- */
.login-sec{background:var(--surface-alt);min-height:calc(100svh - var(--topH) - 36px)}
.login-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(32px,6vw,80px);align-items:start;max-width:1000px}
.login-box{padding:36px 36px 32px}
.login-box .h-page{margin-bottom:24px}
.login-box form{display:flex;flex-direction:column;gap:16px}
.login-box .form-out{display:none;margin-top:18px;padding:14px 18px;background:var(--accent-wash);border-left:4px solid var(--accent-ink);color:var(--text);font-size:14.5px}
.login-box .form-out.bad{background:var(--signal-wash);border-left-color:var(--signal)}
.login-box [data-confirm] p{margin-bottom:16px}
.notice{padding:14px 18px;margin-bottom:20px;background:var(--surface-alt);border-left:4px solid var(--text);font-size:14.5px;color:var(--text)}
.notice.ok{background:var(--accent-wash);border-left-color:var(--accent-ink)}
.notice b{display:block}
.login-side .h-mark{font-size:16px;margin:0 0 8px}
.login-side p{font-size:14.5px;margin-bottom:26px}

/* ---------- Classroom ---------- */
.learn-msg{padding:72px var(--gut)}
.learn-room{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:calc(100svh - var(--topH) - 36px);border-bottom:1px solid var(--border)}
.learn-nav{background:var(--surface-alt);border-right:1px solid var(--border);display:flex;flex-direction:column;max-height:calc(100svh - var(--topH));position:sticky;top:var(--topH);overflow-y:auto}
.learn-top{padding:22px 22px 18px;border-bottom:1px solid var(--border)}
.learn-top .eyebrow{margin-bottom:12px;line-height:1.6;letter-spacing:.06em;text-transform:none}
.lp{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--text)}
.lp-bar{height:6px;background:var(--border)}
.lp-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s var(--ease)}
.ch{border-bottom:1px solid var(--border)}
.ch summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:start;padding:14px 22px;font-size:14.5px;color:var(--text);font-weight:500;line-height:1.5}
.ch summary::-webkit-details-marker{display:none}
.ch summary:hover{background:var(--surface-hover)}
.ch-no{font-weight:600;font-size:13px;color:var(--text-3);padding-top:2px}
.ch-c{font-size:12.5px;color:var(--text-3);padding-top:2px}
.ch ol{list-style:none;margin:0;padding:0 0 8px}
.ch li button{width:100%;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:start;text-align:left;border:0;background:transparent;padding:9px 22px 9px 30px;font-size:14px;line-height:1.55;color:var(--text-2);cursor:pointer;min-height:40px}
.ch li button:hover{background:var(--surface-hover);color:var(--text)}
.ch li button.on{background:#fff;color:var(--text);box-shadow:inset 4px 0 0 var(--accent);font-weight:500}
.ch li button.soon{color:var(--text-3)}
.ch .tick{width:14px;height:14px;border:1.5px solid var(--border-field);margin-top:4px;position:relative}
.ch .tick.done{background:var(--accent);border-color:var(--accent)}
.ch .tick.done::after{content:"";position:absolute;left:3px;top:1px;width:4px;height:7px;border:solid #0A0A0A;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ch .lm{font-size:12px;color:var(--text-3);white-space:nowrap;padding-top:2px}
.ch-notes{display:inline-block;margin:0 22px 14px 30px;font-size:13.5px}
.learn-acct{margin-top:auto;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--border);background:#fff}
.learn-acct span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.learn-main{padding:28px clamp(16px,3vw,40px) 40px;min-width:0}
.player{position:relative;aspect-ratio:16/9;background:var(--text)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#d9d9d9;text-align:center;padding:20px;font-size:15px}
.player-msg b{color:#fff;font-size:20px;font-weight:400}
.lesson-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;padding:22px 0 18px;border-bottom:1px solid var(--border-soft)}
.lesson-bar .eyebrow{margin-bottom:6px;text-transform:none;letter-spacing:.04em}
.lesson-title{font-size:clamp(20px,2vw,26px);font-weight:300;line-height:1.45}
.lesson-bar .actions{gap:8px}
[data-done].is-done{background:var(--accent-wash);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-ink)}
.learn-note{margin-top:18px}
@media (max-width:980px){
  .login-grid{grid-template-columns:1fr}
  .learn-room{grid-template-columns:1fr}
  .learn-nav{position:static;max-height:none;order:2;border-right:0;border-top:1px solid var(--border)}
  .learn-main{order:1}
}
@media (max-width:720px){
  .login-box{padding:26px 20px 24px}
  .learn-main{padding:0 0 24px}
  .lesson-bar,.learn-note{padding-left:16px;padding-right:16px}
  .lesson-bar .actions{width:100%}
  .lesson-bar .actions .btn{flex:1 1 auto}
}

/* ---------- Footer ---------- */
.foot{background:#111;color:#a6a6a6;font-size:14px}
.foot .wrap{padding-top:56px;padding-bottom:28px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px;padding-bottom:40px;border-bottom:1px solid #2b2b2b}
.foot-top img{height:28px;width:auto;margin-bottom:18px}
.foot-top p{max-width:340px;line-height:1.8}
.foot .fh{color:#fff;font-size:14px;font-weight:500;margin-bottom:14px;letter-spacing:.06em}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot a{text-decoration:none;color:#d9d9d9}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--neon)}
.foot-legal{padding-top:24px;font-size:12.5px;line-height:1.85;color:#8c8c8c}
.foot-legal p{max-width:980px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:18px;font-size:12.5px;color:#8c8c8c}

/* ---------- Motion ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .mainnav a{padding:0 10px;font-size:14.5px}
  .brand span{display:none}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contents{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contents > div:nth-child(4){border-left:0}
  .contents > div:nth-child(n+4){border-top:1px solid var(--border)}
}
@media (max-width:980px){
  :root{--topH:64px}
  .util{display:none}
  .mainnav,.top .wrap > .btn{display:none}
  .menu-btn{display:inline-flex}
  .drawer{display:block;position:fixed;inset:var(--topH) 0 0 0;background:#fff;z-index:49;padding:8px var(--gut) 32px;overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
  .menu-open .drawer{opacity:1;transform:none;visibility:visible;transition:opacity .2s,transform .25s var(--ease)}
  .drawer a.nl{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:1px solid var(--border-soft);text-decoration:none;font-size:17px;color:var(--text)}
  .drawer a.nl[aria-current="page"]{box-shadow:inset 4px 0 0 var(--accent);padding-left:14px}
  .drawer .actions{margin-top:24px}
  .drawer .btn{flex:1}
  .menu-open{overflow:hidden}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-photo{order:-1;aspect-ratio:16/10}
  .hero-photo img{object-position:50% 18%}
  .hero-photo figcaption{display:none}
  .hero-copy{padding:40px var(--gut) 48px}
  .quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick a:nth-child(3){border-left:0}
  .quick a:nth-child(n+3){border-top:1px solid var(--border)}
  .split,.book,.phero.with-photo .wrap{grid-template-columns:1fr}
  .parts{grid-template-columns:1fr 1fr}
  .parts div{border-left:0!important;border-top:1px solid var(--border)}
  .parts div:nth-child(even){border-left:1px solid var(--border)!important}
  .parts div:nth-child(-n+2){border-top:0}
  .cards,.paths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature{grid-template-columns:1fr}
  .feature .cover{min-height:200px;border-right:0;border-bottom:1px solid var(--border)}
  .art-grid{grid-template-columns:1fr}
  .aside{position:static}
  .steps{grid-template-columns:1fr 1fr}
  .steps li:nth-child(3){padding-left:0;border-left:0}
  .steps li:nth-child(n+3){border-top:1px solid var(--border)}
  .creds{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .cta .wrap{grid-template-columns:1fr}
  .sec-head{grid-template-columns:1fr}
  .phero-photo{aspect-ratio:16/9}
}
@media (max-width:720px){
  .cols3{grid-template-columns:1fr}
  .cols3 > div + div{padding-left:0;border-left:0;border-top:1px solid var(--border)}
  .cols3 > div{padding-right:0}
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(3){padding-left:0;border-left:0}
  .stats div:nth-child(3)::before{left:0}
  .stats div:nth-child(n+3){border-top:1px solid var(--border);margin-top:12px}
  .cards,.paths,.plans,.creds,.bounds{grid-template-columns:1fr}
  .bounds > div + div{border-left:0;border-top:1px solid var(--border)}
  .contents{grid-template-columns:1fr}
  .contents > div{border-left:0!important;border-top:1px solid var(--border)}
  .contents > div:first-child{border-top:0}
  .form{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .pillars li{grid-template-columns:24px minmax(0,1fr) 72px 40px}
  .stmt{padding:24px 20px}
  .stmt-top{flex-direction:column;align-items:flex-start;gap:18px}
  .facts{grid-template-columns:1fr}
  .facts div + div{border-left:0;border-top:1px solid var(--border)}
  .prose{font-size:16.5px}
  .gate{padding:22px 20px}
  .feature .card-body{padding:24px 22px}
  .pn{grid-template-columns:1fr}
  .pn a + a{border-left:0;border-top:1px solid var(--border);text-align:left}
  .price-box .now{font-size:44px}
}
@media (max-width:520px){
  .quick{grid-template-columns:1fr}
  .quick a{min-height:0;border-left:0!important}
  .quick a + a{border-top:1px solid var(--border)}
  .parts{grid-template-columns:1fr}
  .parts div{border-left:0!important;border-top:1px solid var(--border)!important}
  .parts div:first-child{border-top:0!important}
  .steps{grid-template-columns:1fr}
  .steps li{padding-left:0!important;border-left:0!important}
  .steps li + li{border-top:1px solid var(--border)}
  .brand img{height:24px}
  .hero-photo figcaption{max-width:none;right:0;padding:14px 18px}
  .hero-photo figcaption b{font-size:28px}
  .actions .btn{flex:1 1 100%}
}
@media print{.top,.util,.foot,.cta,.aside,.progress,.anchor-nav{display:none!important}}

/* Real book cover image */
.bcover.has-img{aspect-ratio:1156/1600;padding:0;box-shadow:0 22px 40px -18px rgba(0,0,0,.45)}
.book-sub{font-size:clamp(18px,1.6vw,21px);font-weight:500;color:var(--text);line-height:1.6;margin:14px 0 0}

/* Article share row */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:700px;margin-top:40px;padding-top:20px;border-top:1px solid var(--border)}
.share span{font-size:14px;font-weight:500;color:var(--text);margin-right:6px}
.share + .art-end{margin-top:20px;border-top:0;padding-top:0}