:root{
 --ink:#0b0b16;--body:#33323f;--muted:#6a6a7b;--line:#ececf5;
 --accent:#4f46e5;--accent2:#8b5cf6;--gold:#b7791f;--goldbg:#fdf6e9;
 --bg:#ffffff;--soft:#f7f7fc;--maxw:840px;--a:#4f46e5;--b:#8b5cf6;
 --grad:linear-gradient(135deg,var(--a),var(--b));
}
.c-ai_labs{--a:#059669;--b:#10b981}.c-product_mnc{--a:#4f46e5;--b:#8b5cf6}.c-fintech{--a:#db2777;--b:#f472b6}.c-quant_trading{--a:#d97706;--b:#f59e0b}.c-finance{--a:#2563eb;--b:#38bdf8}.c-india_services{--a:#475569;--b:#94a3b8}.c-core_hardware{--a:#dc2626;--b:#fb7185}.c-consulting{--a:#0891b2;--b:#22d3ee}.c-india_product{--a:#e11d48;--b:#fb7185}.c-dsa{--a:#4f46e5;--b:#8b5cf6}.c-system-design{--a:#0891b2;--b:#22d3ee}.c-sd-questions{--a:#7c3aed;--b:#a78bfa}.c-hld{--a:#2563eb;--b:#60a5fa}.c-lld{--a:#ea580c;--b:#fb923c}.c-lld-problems{--a:#0d9488;--b:#2dd4bf}.c-cs-fundamentals{--a:#059669;--b:#10b981}.c-behavioral{--a:#d97706;--b:#f59e0b}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
 color:var(--body);background:var(--bg);line-height:1.72;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:none}
::selection{background:#d7d2fb;color:#141127}
::-moz-selection{background:#d7d2fb;color:#141127}
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:200;transition:width .08s linear}
/* nav */
.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line)}
.nav .wrap{max-width:none;display:flex;align-items:center;gap:20px;padding:11px 26px}
.brand{font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.03em;flex-shrink:0} .brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mainnav{display:flex;align-items:center;gap:3px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{color:var(--body);font-weight:600;font-size:14.5px;padding:7px 12px;border-radius:9px;white-space:nowrap;transition:background .15s,color .15s}
.mainnav a:hover{color:var(--ink);background:var(--soft)}
.mainnav a.on{color:var(--accent);background:rgba(79,70,229,.1)}
.navright{display:flex;align-items:center;gap:14px;flex-shrink:0}
@media(max-width:1180px){.navsearch{display:none}}
@media(max-width:760px){.nav .wrap{gap:12px;padding:10px 16px} .mainnav a{font-size:13.5px;padding:6px 9px}}
.btn{display:inline-block;background:var(--grad);color:#fff!important;padding:10px 20px;border-radius:11px;font-weight:700;font-size:15px;box-shadow:0 6px 18px rgba(79,70,229,.3);transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(79,70,229,.4)}
.navsearch{flex:1;max-width:480px;margin:0 30px;position:relative}
.navsearch .nsi{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);opacity:.6;pointer-events:none}
.navsearch input{width:100%;padding:10px 14px 10px 38px;border:1px solid var(--line);border-radius:12px;font-size:14px;color:var(--ink);background:var(--soft);transition:.15s}
.navsearch input:focus{outline:none;border-color:var(--accent2);background:#fff;box-shadow:0 0 0 4px rgba(124,108,240,.1)}
.navres{position:absolute;top:48px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 44px rgba(11,11,22,.16);overflow:hidden;display:none;z-index:90}
.navres a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line);color:var(--ink);font-size:14px}
.navres a:last-child{border-bottom:none} .navres a:hover{background:var(--soft);text-decoration:none}
.navres a span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navres a em{font-style:normal;color:var(--muted);font-size:12px;text-transform:capitalize;white-space:nowrap;flex-shrink:0}
.nrempty{padding:13px 15px;color:var(--muted);font-size:14px}
@media(max-width:780px){.navsearch{display:none}}
/* animated hero backdrop */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 16s ease-in-out infinite}
.aurora i:nth-child(1){width:420px;height:420px;background:#c7bffb;top:-120px;left:-60px}
.aurora i:nth-child(2){width:360px;height:360px;background:#bfe0fb;top:-80px;right:-40px;animation-delay:-4s}
.aurora i:nth-child(3){width:300px;height:300px;background:#f6c7e6;bottom:-140px;left:30%;animation-delay:-8s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(0,30px) scale(1.08)}}
/* guide hero */
.hero{position:relative;background:linear-gradient(180deg,var(--soft),#fff);border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{max-width:var(--maxw);margin:0 auto;padding:50px 26px 42px;position:relative;z-index:1}
.crumb{font-size:13px;color:var(--muted);margin-bottom:18px} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--ink)}
.hrow{display:flex;align-items:center;gap:18px}
.hava{width:60px;height:60px;border-radius:17px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;flex-shrink:0;box-shadow:0 10px 28px rgba(0,0,0,.14)}
h1{font-size:44px;line-height:1.08;letter-spacing:-.035em;color:var(--ink);margin:.06em 0 .2em}
.lede{font-size:18px;color:var(--body);margin:.2em 0 1.2em;max-width:46em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;border:1px solid var(--line);color:var(--accent);font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.chip.g{color:var(--gold);background:var(--goldbg);border-color:transparent}
/* layout + flow */
.layout{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:272px 1fr;gap:52px;padding:40px 26px 40px}
.flow{position:sticky;top:86px;align-self:start;max-height:calc(100vh - 120px);overflow:auto}
.flow h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:700}
.flow ol{list-style:none;margin:0;padding:0;position:relative}
.flow ol::before{content:"";position:absolute;left:14px;top:10px;bottom:10px;width:2px;background:var(--line)}
.flow a{display:flex;gap:13px;align-items:flex-start;padding:7px 0;color:var(--muted);font-size:13.5px;line-height:1.35;position:relative}
.flow a:hover{color:var(--ink)}
.flow .dot{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;z-index:1;transition:.25s}
.flow a.active{color:var(--ink);font-weight:600} .flow a.active .dot{background:var(--grad);border-color:transparent;color:#fff;transform:scale(1.08);box-shadow:0 5px 14px rgba(79,70,229,.35)}
.flow a.done .dot{background:#efeefb;border-color:transparent;color:var(--accent)}
/* content */
.content{max-width:var(--maxw);min-width:0}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* section panels: each H2 block becomes its own card so the page reads as segments, not a wall of text */
.content .sec{background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px 30px 24px;margin:20px 0;box-shadow:0 2px 16px rgba(16,16,40,.045);transition:box-shadow .3s ease,border-color .3s ease}
.content .sec:hover{box-shadow:0 14px 40px rgba(79,70,229,.09);border-color:#e3e0f7}
.content .sec>h2{margin:.6em 0 .55em !important}
.content .sec>*:last-child{margin-bottom:0}
/* highlighted metrics: numbers, percentages, latencies, scale figures pop out of the prose */
.stat{font-weight:700;color:var(--accent);background:rgba(79,70,229,.07);padding:0 5px;border-radius:6px;font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.content blockquote .stat{background:rgba(79,70,229,.13)}
.content h2{display:flex;align-items:center;gap:15px;font-size:27px;letter-spacing:-.025em;color:var(--ink);margin:2.4em 0 .6em;scroll-margin-top:92px}
.content h2:first-of-type{margin-top:.1em}
.hnum{width:38px;height:38px;border-radius:11px;background:var(--grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;flex-shrink:0;box-shadow:0 5px 14px rgba(79,70,229,.28)}
.content h3{font-size:20.5px;color:var(--ink);margin:1.9em 0 .5em;padding-left:14px;border-left:3px solid var(--accent);letter-spacing:-.01em}
@media(max-width:600px){.content .sec{padding:6px 16px 18px} .content h2{font-size:22px} .mermaid{padding:14px}}
.content p{margin:.78em 0} .content ul,.content ol{padding-left:1.4em} .content li{margin:.34em 0}
.content strong{color:var(--ink)}
.content table{border-collapse:separate;border-spacing:0;width:100%;margin:1.5em 0;font-size:15px;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(11,11,22,.04)}
.content th,.content td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.content th{background:var(--grad);color:#fff;font-weight:700;font-size:13px} .content tr:last-child td{border-bottom:none}
.content tbody tr:nth-child(even) td{background:var(--soft)}
.content blockquote{border-left:4px solid var(--gold);background:var(--goldbg);margin:1.5em 0;padding:16px 22px;border-radius:0 14px 14px 0}
.content blockquote p{margin:.35em 0}
.content code{background:#efeef8;padding:2px 7px;border-radius:6px;font-size:14px;font-family:ui-monospace,Menlo,monospace}
/* premium dark code blocks */
.content pre{background:#0f1021;color:#e7e7f3;border-radius:0 0 13px 13px;padding:16px 18px;overflow:auto;font-size:14px;line-height:1.55;margin:0 0 1.5em}
.content pre code{background:none;padding:0;color:inherit;font-size:14px}
.codebar{display:flex;justify-content:space-between;align-items:center;background:#1b1c35;color:#c3c3dd;font-size:12px;padding:9px 15px;border-radius:13px 13px 0 0;margin-top:1.5em;font-family:ui-monospace,Menlo,monospace;letter-spacing:.03em}
.codebar span{text-transform:uppercase;font-weight:700}
.codebar button{background:#34345e;color:#e4e4f6;border:none;border-radius:7px;padding:4px 12px;font-size:12px;cursor:pointer;transition:.15s} .codebar button:hover{background:#45458a}
/* diagrams */
.mermaid{position:relative;background:linear-gradient(180deg,#faf9ff,#fff);border:1px solid var(--line);border-radius:18px;padding:26px;margin:1.8em 0;text-align:center;overflow:auto;box-shadow:0 8px 30px rgba(79,70,229,.07)}
.mermaid svg{max-width:100%;height:auto}
/* legibility floor: keep labels at a fixed readable size, matched to how mermaid measured the box */
.mermaid svg g.node .nodeLabel,.mermaid svg g.node foreignObject p,.mermaid svg g.node foreignObject span,.mermaid svg .nodeLabel p{font-size:15px !important;line-height:1.5 !important}
/* diagram animation + interactivity (defaults stay visible if JS/observer never fires) */
.mermaid svg .flowedge{stroke-dasharray:7 6;stroke-linecap:round}
.mermaid.in svg .flowedge{animation:flowdash 1s linear infinite}
@keyframes flowdash{to{stroke-dashoffset:-13}}
/* entrance: fade only. never animate `transform` on a node, it clobbers mermaid's positioning translate and makes nodes jump */
.mermaid.in svg g.node,.mermaid.in svg .actor{animation:nodepop .5s ease backwards}
.mermaid.in svg g.node:nth-child(2){animation-delay:.05s} .mermaid.in svg g.node:nth-child(3){animation-delay:.1s} .mermaid.in svg g.node:nth-child(4){animation-delay:.15s} .mermaid.in svg g.node:nth-child(5){animation-delay:.2s} .mermaid.in svg g.node:nth-child(6){animation-delay:.25s}
@keyframes nodepop{from{opacity:0}to{opacity:1}}
/* sequence diagrams: gentle fade-in for messages, labels and notes (keeps return arrows dashed, no messy flow) */
.mermaid.in svg .messageText,.mermaid.in svg .messageLine0,.mermaid.in svg .messageLine1,.mermaid.in svg .note,.mermaid.in svg .noteText,.mermaid.in svg .loopLine,.mermaid.in svg .labelText,.mermaid.in svg .loopText{animation:seqin .7s ease backwards}
@keyframes seqin{from{opacity:0}to{opacity:1}}
/* hover + click-to-focus: brightness/shadow/opacity only, so the node never moves */
.mermaid svg g.node{cursor:pointer;transition:opacity .22s ease}
.mermaid svg g.node rect,.mermaid svg g.node polygon,.mermaid svg g.node circle,.mermaid svg g.node ellipse,.mermaid svg g.node path{transition:filter .18s ease,stroke-width .18s ease}
.mermaid svg g.node:hover rect,.mermaid svg g.node:hover polygon,.mermaid svg g.node:hover circle,.mermaid svg g.node:hover ellipse,.mermaid svg g.node:hover path{filter:brightness(1.12) drop-shadow(0 9px 18px rgba(16,16,40,.3)) !important}
.mermaid svg.focusing g.node{opacity:.22}
.mermaid svg.focusing g.node.sel,.mermaid svg.focusing g.node.nbr{opacity:1}
.mermaid svg g.node.sel rect,.mermaid svg g.node.sel polygon,.mermaid svg g.node.sel circle,.mermaid svg g.node.sel ellipse,.mermaid svg g.node.sel path{filter:brightness(1.14) drop-shadow(0 11px 24px rgba(79,70,229,.42)) !important;stroke-width:3.4px !important}
.mermaid svg.focusing .flowedge{opacity:.14}
.mermaid svg.focusing .flowedge.hot{opacity:1;stroke:#4f46e5 !important;stroke-width:3.4px !important}
.dcap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(10px);background:#0f1021;color:#fff;padding:10px 18px;border-radius:999px;font-size:13.5px;box-shadow:0 12px 34px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:.22s;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcap.show{opacity:1;transform:translateX(-50%)}
.dcap b{color:#a5b4fc}
/* table polish: easy to scan */
.content table tbody tr{transition:.12s} .content table tbody tr:hover td{background:#f0eefc}
.content td:first-child{font-weight:600;color:var(--ink)}
/* dialogue (Candidate / Interviewer) */
.content blockquote strong:first-child{color:var(--accent)}
/* key callout */
.keybox{background:linear-gradient(180deg,#f3f1fb,#fff);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 14px 14px 0;padding:16px 20px;margin:1.5em 0}
/* callouts: key point / interviewer tip / red flag. authored in markdown as > [!key] Title */
.callout{border:1px solid var(--line);border-radius:14px;padding:15px 20px 15px 52px;margin:1.5em 0;position:relative;background:#fff;line-height:1.65}
.callout:before{position:absolute;left:16px;top:15px;font-size:20px;line-height:1.2}
.callout .ch{font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:3px}
.callout p{margin:.25em 0} .callout p:first-of-type{margin-top:0} .callout>*:last-child{margin-bottom:0}
.callout-key{background:linear-gradient(180deg,#f3f1fb,#fff);border-left:4px solid var(--accent)}
.callout-key:before{content:"\25C8";color:var(--accent)} .callout-key .ch{color:var(--accent)}
.callout-tip{background:linear-gradient(180deg,#fff8ec,#fff);border-left:4px solid var(--gold)}
.callout-tip:before{content:"\1F441";filter:grayscale(.1)} .callout-tip .ch{color:#9a6a12}
.callout-warn{background:linear-gradient(180deg,#fff1f1,#fff);border-left:4px solid #ef4444}
.callout-warn:before{content:"\26A0";color:#ef4444} .callout-warn .ch{color:#d12f2f}
/* TL;DR card under hero */
.tldr{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 26px;margin:22px 0 4px;box-shadow:0 6px 24px rgba(16,16,40,.06)}
.tldr h4{margin:0 0 4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:800}
.tldr .tsub{margin:0 0 14px;color:var(--muted);font-size:14px}
.tldr ol{margin:0;padding:0;list-style:none;counter-reset:t}
.tldr li{counter-increment:t;position:relative;padding:9px 0 9px 42px;border-top:1px solid var(--line);line-height:1.55;font-size:15.5px}
.tldr li:first-child{border-top:none}
.tldr li:before{content:counter(t);position:absolute;left:0;top:8px;width:28px;height:28px;border-radius:9px;background:var(--grad);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 11px rgba(79,70,229,.26)}
.tldr li b{color:var(--ink)}
/* collapsible follow-ups the interviewer will ask */
.followups{margin:1.6em 0}
.followups>.fh{font-weight:800;color:var(--ink);font-size:16.5px;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.followups>.fh:before{content:"\1F5E3";font-size:18px}
details.fq{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:#fff;overflow:hidden;transition:box-shadow .2s}
details.fq[open]{box-shadow:0 8px 24px rgba(16,16,40,.07)}
details.fq>summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:650;color:var(--ink);display:flex;align-items:center;gap:11px;font-size:15.5px}
details.fq>summary::-webkit-details-marker{display:none}
details.fq>summary:before{content:"";width:9px;height:9px;border-right:2.3px solid var(--accent);border-bottom:2.3px solid var(--accent);transform:rotate(-45deg);transition:transform .2s;flex-shrink:0;margin-left:2px}
details.fq[open]>summary:before{transform:rotate(45deg)}
details.fq>summary:hover{background:var(--soft)}
details.fq .fa{padding:2px 18px 16px 38px;color:var(--body);line-height:1.7;font-size:15.5px}
details.fq .fa p{margin:.3em 0}
/* "what you can now explain" checklist */
.cando{background:linear-gradient(180deg,#f1fbf4,#fff);border:1px solid #cdebd6;border-radius:18px;padding:22px 26px;margin:2em 0}
.cando h4{margin:0 0 12px;font-size:16.5px;color:#15803d;display:flex;align-items:center;gap:9px}
.cando h4:before{content:"\2713";display:inline-flex;width:24px;height:24px;border-radius:7px;background:#16a34a;color:#fff;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.cando ul{margin:0;padding:0;list-style:none}
.cando li{position:relative;padding:7px 0 7px 30px;line-height:1.55;border-top:1px solid #dcefe2;font-size:15.5px;color:var(--ink)}
.cando li:first-child{border-top:none}
.cando li:before{content:"\2713";position:absolute;left:0;top:7px;color:#16a34a;font-weight:800}
/* push vs pull side-by-side */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.6em 0}
.vs .vcol{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:#fff}
.vs .vcol h5{margin:0 0 4px;font-size:16px;color:var(--ink)}
.vs .vcol .vtag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin-bottom:10px;display:block}
.vs .vcol dl{margin:0} .vs .vcol dt{font-weight:700;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;margin-top:11px}
.vs .vcol dd{margin:2px 0 0;line-height:1.5;font-size:15px;color:var(--ink)}
.vs .vcol.win{border-color:#c9c3f3;background:linear-gradient(180deg,#f6f4fe,#fff)}
@media(max-width:720px){.vs{grid-template-columns:1fr}}
/* pull-quote */
.pullquote{font-size:24px;line-height:1.4;color:var(--ink);font-weight:650;letter-spacing:-.015em;border-left:4px solid var(--accent);padding:4px 0 4px 22px;margin:1.3em 0;max-width:24em}
/* big hero number callout for the one figure that matters most */
.bignum{display:flex;align-items:center;gap:22px;background:linear-gradient(120deg,#4f46e5,#7c6cf0);color:#fff;border-radius:18px;padding:22px 26px;margin:1.6em 0;box-shadow:0 18px 40px rgba(79,70,229,.28)}
.bignum .bn{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.03em;white-space:nowrap}
.bignum .bd{line-height:1.5} .bignum .bd b{color:#fff;font-weight:800} .bignum .bl{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.85;font-weight:700;margin-bottom:3px}
@media(max-width:600px){.bignum{flex-direction:column;align-items:flex-start;gap:10px} .bignum .bn{font-size:38px}}
/* self-check: pause and answer before scrolling */
.selfcheck{border:1.5px dashed #c3c7f2;border-radius:16px;padding:16px 20px;margin:1.6em 0;background:#fafaff}
.selfcheck .sq{font-weight:750;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.selfcheck .sq:before{content:"\270B";font-size:19px;line-height:1.2}
.selfcheck details{margin-top:10px}
.selfcheck summary{cursor:pointer;list-style:none;color:var(--accent);font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:7px}
.selfcheck summary::-webkit-details-marker{display:none}
.selfcheck summary:before{content:"\25B8";transition:transform .2s;display:inline-block}
.selfcheck details[open] summary:before{transform:rotate(90deg)}
.selfcheck .sa{margin-top:9px;color:var(--body);line-height:1.7}
/* diagram figure caption + legend */
figure.diagram{margin:1.8em 0} figure.diagram .mermaid{margin:0}
figure.diagram figcaption{text-align:center;color:var(--muted);font-size:14px;margin-top:10px;line-height:1.55}
figure.diagram figcaption b{color:var(--ink)}
.dlegend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:12px 0 0;font-size:13px;color:var(--body)}
.dlegend span{display:inline-flex;align-items:center;gap:6px}
.dlegend i{width:12px;height:12px;border-radius:4px;display:inline-block}
/* inline glossary term */
abbr.def{text-decoration:none;border-bottom:1.5px dotted var(--accent);cursor:help}
/* heading anchor link */
.content h2 .alink,.content h3 .alink{opacity:0;margin-left:9px;color:var(--muted);font-weight:600;text-decoration:none;font-size:.7em;transition:opacity .15s}
.content h2:hover .alink,.content h3:hover .alink{opacity:.55} .content .alink:hover{opacity:1 !important;color:var(--accent)}
.aflash{animation:aflash 1.4s ease} @keyframes aflash{0%,30%{background:rgba(79,70,229,.1)}100%{background:transparent}}
/* "who asks this" frequency widget */
.freq{border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin:2px 0 26px;background:linear-gradient(180deg,#faf9ff,#fff);box-shadow:0 3px 16px rgba(11,11,22,.05)}
.freq-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.freq-title{font-weight:800;color:var(--ink);font-size:16px;letter-spacing:-.01em}
.freq-badge{font-size:12px;font-weight:700;color:#fff;background:var(--grad);padding:6px 13px;border-radius:999px;white-space:nowrap}
.freq-lead{margin:10px 0 16px;font-size:14px;color:var(--muted)} .freq-lead b{color:var(--ink)}
.freq-row{display:flex;align-items:center;gap:12px;margin:10px 0}
.freq-co{display:flex;align-items:center;gap:8px;width:120px;font-weight:600;font-size:14px;color:var(--ink);flex-shrink:0}
.freq-co i{width:11px;height:11px;border-radius:3px;display:inline-block;flex-shrink:0}
.freq-bar{flex:1;height:11px;background:#eceaf6;border-radius:999px;overflow:hidden}
.freq-bar span{display:block;height:100%;border-radius:999px;width:var(--w)}
.freq.in .freq-bar span{animation:growbar 1.1s cubic-bezier(.2,.7,.2,1)}
@keyframes growbar{from{width:0}}
.freq-num{width:32px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;font-weight:600}
.freq-note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.55;border-top:1px solid var(--line);padding-top:12px}
@media(max-width:600px){.freq-co{width:94px;font-size:13px}}
.content hr{border:none;border-top:1px solid var(--line);margin:2.6em 0} .content em{color:var(--muted)}
/* reading comfort + confidence */
.content{font-size:17.5px}
.content p{margin:.9em 0;line-height:1.8}
.content li{margin:.42em 0;line-height:1.72}
.content h2{margin-top:2.7em}
.content strong{font-weight:700;color:var(--ink)}
.confband{background:linear-gradient(180deg,#f3f1fb,#fff);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 14px 14px 0;padding:14px 20px;margin:18px 0 0;font-size:15px;color:var(--body);max-width:48em;line-height:1.6}
.confband b{color:var(--ink);font-weight:700}
/* CTA */
.cta{position:relative;background:var(--grad);color:#fff;border-radius:22px;padding:36px 32px;margin:44px 0 10px;overflow:hidden;box-shadow:0 24px 50px rgba(79,70,229,.28)}
.cta::after{content:"";position:absolute;right:-50px;bottom:-70px;width:230px;height:230px;background:rgba(255,255,255,.1);border-radius:50%}
.cta h3{margin:0 0 6px;font-size:24px;color:#fff;position:relative} .cta p{margin:0 0 18px;color:#eceafd;position:relative;max-width:40em}
.cta form{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.cta input{flex:1;min-width:240px;border:none;border-radius:12px;padding:15px 17px;font-size:15px}
.cta button{background:#fff;color:var(--accent);border:none;border-radius:12px;padding:15px 28px;font-weight:800;font-size:15px;cursor:pointer;transition:.2s} .cta button:hover{transform:translateY(-1px)}
.cap-ok{display:none;position:relative;margin-top:14px;color:#fff;font-weight:600;font-size:15px}
/* related */
.related{max-width:var(--maxw);margin:10px auto 0;padding:0 26px}
.related h3{font-size:15px;letter-spacing:.02em;color:var(--ink);margin:30px 0 14px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.prevnext{display:flex;justify-content:space-between;gap:12px;margin:34px 0 10px;flex-wrap:wrap}
.pn{flex:1;min-width:200px;border:1px solid var(--line);border-radius:14px;padding:14px 18px;transition:.2s}
.pn:hover{border-color:var(--accent2);box-shadow:0 8px 22px rgba(79,70,229,.1)}
.pn small{color:var(--muted);font-size:12px} .pn div{color:var(--ink);font-weight:700;margin-top:2px}
/* course sidebar + progress */
.course{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow:auto;font-size:14px;padding-right:4px}
.chome a{color:var(--muted);font-size:13px;font-weight:600} .chome a:hover{color:var(--ink)}
.ctitle{font-weight:800;color:var(--ink);font-size:16px;margin:12px 0 12px;letter-spacing:-.01em}
.cprog{margin:0 0 14px}
.cbar{height:7px;background:var(--line);border-radius:999px;overflow:hidden}
.cbar span{display:block;height:100%;width:0;background:var(--grad);border-radius:999px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.cpct{font-size:12px;color:var(--muted);margin-top:6px;font-weight:600}
.cmod{margin-bottom:12px}
.cmodh{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:14px 0 6px;padding:0 4px}
.cmc{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cch{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:9px}
.cch:hover{background:var(--soft)} .cch.active{background:var(--soft)} .cch.active a{color:var(--accent);font-weight:700}
.cch a{color:var(--body);line-height:1.3;flex:1;min-width:0} .cch a:hover{text-decoration:none;color:var(--ink)}
.ccheck{width:18px;height:18px;border-radius:6px;border:2px solid var(--line);flex-shrink:0;cursor:pointer;transition:.12s;position:relative}
.ccheck:hover{border-color:var(--accent2)}
.cch.done .ccheck{background:var(--grad);border-color:transparent}
.cch.done .ccheck::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cch.done a{color:var(--muted)}
.donebtn{margin:30px 0 0;background:var(--grad);color:#fff;border:none;border-radius:12px;padding:13px 24px;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.26);transition:.15s}
.donebtn:hover{transform:translateY(-1px)} .donebtn.isdone{background:#eef0f5;color:var(--muted);box-shadow:none}
/* footer */
.footer{border-top:1px solid var(--line);background:var(--soft)}
.footer .wrap{max-width:1180px;margin:0 auto;padding:42px 26px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer a{color:var(--muted);margin-left:20px} .disc{font-size:12.5px;color:#9a97a8;max-width:62em;margin-top:8px}
/* ===== INDEX ===== */
.ihero{position:relative;text-align:center;border-bottom:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,#faf9ff,#fff)}
.ihero .wrap{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:78px 26px 34px}
.ihero h1{font-size:52px;letter-spacing:-.04em;line-height:1.05}
.ihero .lede{margin:16px auto 0;max-width:40em;font-size:18.5px}
.stats{display:flex;gap:30px;justify-content:center;margin:26px 0 4px;flex-wrap:wrap}
.stat b{display:block;font-size:26px;color:var(--ink);font-weight:800;letter-spacing:-.02em} .stat span{font-size:13px;color:var(--muted)}
.search{margin:24px auto 0;max-width:560px;position:relative}
.search input{width:100%;padding:17px 20px 17px 50px;font-size:16px;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 30px rgba(79,70,229,.1);transition:.2s}
.search input:focus{outline:none;border-color:var(--accent2);box-shadow:0 10px 36px rgba(79,70,229,.18)}
.search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);opacity:.45}
.pills{position:sticky;top:60px;z-index:40;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:12px 0}
.pills .wrap{max-width:1180px;margin:0 auto;padding:0 26px;display:flex;gap:9px;overflow-x:auto;scrollbar-width:none}
.pills .wrap::-webkit-scrollbar{display:none}
.pill{white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:600;font-size:13.5px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.18s}
.pill:hover{color:var(--ink);border-color:var(--accent2)}
.pill.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 5px 14px rgba(79,70,229,.3)}
.cats{max-width:1180px;margin:0 auto;padding:30px 26px 90px}
.cat{scroll-margin-top:120px} .cat h2{font-size:22px;color:var(--ink);margin:40px 0 4px;letter-spacing:-.015em;display:flex;align-items:center;gap:10px}
.cat h2 .pin{width:10px;height:22px;border-radius:5px;background:var(--grad)} .cat .n{color:var(--muted);font-weight:600;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin-top:18px}
/* section landing pages (one click from the nav) */
.sechero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--soft),#fff)}
.sechero .wrap{max-width:var(--maxw);margin:0 auto;padding:40px 26px 32px;position:relative;z-index:1}
.sechero h1{font-size:40px;letter-spacing:-.035em;margin:.12em 0 .14em;color:var(--ink)}
.sechero .lede{max-width:42em;color:var(--body);font-size:17px;line-height:1.6}
.secmeta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.secn{font-weight:700;color:var(--accent);background:rgba(79,70,229,.09);padding:6px 13px;border-radius:999px;font-size:13.5px;white-space:nowrap}
.secsearch{margin:0;max-width:360px;flex:1;min-width:220px}
.cats>.wrap{max-width:none;margin:0;padding:0}
.secgroup{margin:36px 0 0}
.secgh{font-size:19px;color:var(--ink);margin:0 0 2px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.secgh .pin{width:9px;height:21px;border-radius:5px;background:var(--grad)} .secgh .n{color:var(--muted);font-weight:600;font-size:13.5px}
.otherbar{border-top:1px solid var(--line);background:#fcfcff}
.otherbar .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:20px 26px;max-width:1180px;margin:0 auto}
.otherbar .ol{color:var(--muted);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;margin-right:4px}
.segchip{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;color:var(--body);background:#fff;transition:.15s}
.segchip:hover{border-color:var(--accent);color:var(--accent);background:rgba(79,70,229,.05)}
/* learn hub cards */
.hubgrid{max-width:1120px;margin:0 auto;padding:40px 26px 90px}
.hubgrid .wrap{max-width:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.hubcard{display:block;border:1px solid var(--line);border-radius:20px;padding:24px 26px;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.hubcard::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--a,#4f46e5),var(--b,#8b5cf6))}
.hubcard:hover{box-shadow:0 18px 44px rgba(16,16,40,.12);transform:translateY(-4px);border-color:transparent}
.hubtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.hubdot{width:30px;height:30px;border-radius:9px;box-shadow:0 5px 14px rgba(79,70,229,.25)}
.hubn{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--soft);padding:4px 11px;border-radius:999px}
.hubcard h3{font-size:21px;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
.hubcard p{color:var(--body);font-size:14.5px;line-height:1.55;margin:0 0 15px}
.hubgo{font-weight:700;color:var(--accent);font-size:14.5px}
@media(max-width:600px){.sechero h1{font-size:29px}}
.card{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff;transition:.18s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);opacity:0;transition:.18s}
.card:hover{border-color:transparent;box-shadow:0 14px 32px rgba(11,11,22,.1);transform:translateY(-3px)}
.card:hover::before{opacity:1}
.ava{width:46px;height:46px;border-radius:13px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0}
.card .nm{font-weight:700;color:var(--ink);font-size:15px;line-height:1.2} .card .rl{color:var(--muted);font-size:13px;margin-top:2px}
.card .arw{margin-left:auto;color:var(--muted);opacity:0;transform:translateX(-4px);transition:.18s} .card:hover .arw{opacity:1;transform:none;color:var(--accent)}
.nores{text-align:center;color:var(--muted);padding:50px 0;display:none}
/* AI plan page */
.planwrap{max-width:780px;margin:0 auto;padding:36px 24px 100px}
.planbox,.planres{text-align:left}
.browsehead{max-width:1180px;margin:0 auto;padding:30px 26px 0;text-align:center}
.browsehead h2{font-size:24px;color:var(--ink);letter-spacing:-.02em;margin:0 0 4px}
.browsehead .sub{color:var(--muted);margin:0 0 6px}
/* hero 2-col: what's inside + plan */
.herogrid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:34px;padding:0 26px;align-items:start;text-align:left}
.whatpanel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:0 10px 34px rgba(79,70,229,.07);position:sticky;top:86px}
.whatpanel h3{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;font-weight:700}
.wprow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.wprow:last-child{border-bottom:none}
.wprow:hover .wn{color:var(--accent)}
.wprow .wd{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;flex-shrink:0}
.wprow .wn{font-weight:600;color:var(--ink);font-size:14.5px;transition:.12s}
.wprow .wc{margin-left:auto;color:var(--muted);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:860px){.herogrid{grid-template-columns:1fr}.whatpanel{position:static;order:2}}
/* hero polish */
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);color:var(--accent);font-weight:700;font-size:13px;padding:7px 15px;border-radius:999px;margin-bottom:20px;box-shadow:0 3px 14px rgba(79,70,229,.1)}
.eyebrow .spark{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px rgba(124,108,240,.2)}
.ihero.home .wrap{padding:42px 26px 20px}
.ihero.home h1{font-size:46px;line-height:1.06}
.plan-label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 9px}
.plan-trust{color:var(--muted);font-size:13px;margin-top:12px;text-align:center}
.planbox{position:relative}
/* balanced two-column hero */
.herowrap{position:relative;z-index:1;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center;padding:30px 26px 18px;text-align:left}
.heroleft h1{font-size:43px;line-height:1.07;letter-spacing:-.035em;color:var(--ink);margin:0 0 14px;text-align:left}
.heroleft .lede{font-size:18px;color:var(--body);margin:0 0 20px;max-width:none;text-align:left}
.instrip{display:flex;flex-wrap:wrap;gap:8px}
.instat{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:13px;color:var(--ink);font-weight:600;box-shadow:0 1px 4px rgba(11,11,22,.03)}
.instat .id{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.heroright .planbox{box-shadow:0 22px 64px rgba(79,70,229,.16)}
@media(max-width:900px){.herowrap{grid-template-columns:1fr;gap:24px;text-align:center}.heroleft h1{font-size:33px;text-align:center}.heroleft .lede{text-align:center}.instrip{justify-content:center}}
@media(max-width:860px){.ihero.home h1{font-size:32px}}
/* ===== app-shell home: flush-left rail + focused main ===== */
.shell{display:grid;grid-template-columns:258px 1fr;align-items:start}
.rail{position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto;border-right:1px solid var(--line);background:#fcfcff;padding:24px 16px 40px}
.rail h3{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 12px;padding:0 10px}
.railrow{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;transition:.12s}
.railrow:hover{background:var(--soft)} .railrow:hover .wn{color:var(--accent)}
.railrow .wd{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;flex-shrink:0}
.railrow .wn{font-weight:600;color:var(--ink);font-size:14px;transition:.12s}
.railrow .wc{margin-left:auto;color:var(--muted);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.railnote{margin:18px 10px 0;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.5}
.main{min-width:0}
.mtop{display:grid;grid-template-columns:1fr minmax(430px,520px);gap:52px;align-items:start;padding:52px 46px 30px;background:radial-gradient(680px 320px at 18% -30%,rgba(124,108,240,.13),transparent)}
.mpitch{padding-top:10px}
.mpitch .eyebrow{margin-bottom:18px}
.mpitch h1{font-size:45px;line-height:1.05;letter-spacing:-.035em;color:var(--ink);margin:0 0 16px;text-align:left}
.mpitch .lede{font-size:18px;color:var(--body);margin:0 0 24px;max-width:none;text-align:left}
.mplan{min-width:0}
.trust{text-align:left}
.trust p{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 14px}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.logo{display:inline-flex;align-items:center}
.logo img{height:23px;width:auto;filter:grayscale(1);opacity:.6;transition:.2s}
.logo:hover img{filter:none;opacity:1}
.logo em{font-style:normal;font-weight:800;color:#9a9aad;font-size:16px;display:none}
.logo.nolog em{display:inline} .logo.nolog img{display:none}
@media(max-width:1080px){.mtop{grid-template-columns:1fr;gap:28px;padding:40px 26px 22px}.mpitch h1{font-size:36px}}
@media(max-width:900px){.shell{grid-template-columns:1fr}.rail{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px}.rail h3{width:100%}.railrow{flex:1 1 160px}.railnote{display:none}.mpitch h1{font-size:31px}}
.planbox{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 14px 50px rgba(79,70,229,.1)}
.planbox textarea{width:100%;min-height:96px;border:1px solid var(--line);border-radius:15px;padding:15px 17px;font-family:inherit;font-size:16px;resize:vertical;color:var(--ink)}
.planbox textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 4px rgba(124,108,240,.12)}
.exrow{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.ex{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--muted);cursor:pointer;transition:.15s}
.ex:hover{color:var(--ink);border-color:var(--accent2)}
.planbtn{background:var(--grad);color:#fff;border:none;border-radius:14px;padding:15px 24px;font-weight:800;font-size:16px;cursor:pointer;width:100%;margin-top:12px;box-shadow:0 8px 22px rgba(79,70,229,.28);transition:.15s}
.planbtn:hover{transform:translateY(-1px)} .planbtn:disabled{opacity:.6;cursor:default;transform:none}
.planloading{display:none;text-align:center;color:var(--muted);padding:40px 0 10px;font-size:15px}
.planloading .dots i{display:inline-block;width:10px;height:10px;margin:0 4px;border-radius:50%;background:var(--accent2);animation:bounce 1.2s infinite}
.planloading .dots i:nth-child(2){animation-delay:.15s} .planloading .dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
.planres{display:none;margin-top:30px}
.plan-head h2{font-size:25px;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em}
.plan-sub{color:var(--body);font-size:16px;line-height:1.6}
.plan-sec{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:30px 0 14px}
.step{display:flex;gap:15px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:11px 0;background:#fff;transition:.15s}
.step:hover{border-color:var(--accent2);box-shadow:0 10px 26px rgba(79,70,229,.12);transform:translateY(-1px)}
.step .sn{width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.step .sbody{flex:1;min-width:0} .step .st{font-weight:700;color:var(--ink)}
.step .sw{color:var(--muted);font-size:14px;margin-top:3px;line-height:1.5}
.step .smeta{display:flex;align-items:center;gap:12px;margin-top:8px}
.step .smin{color:var(--muted);font-size:12px} .step a.sopen{color:var(--accent);font-weight:700;font-size:13.5px}
/* reading path: one-line overview + connected timeline */
.pathmap{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;margin:2px 0 22px;padding:13px 18px;background:var(--soft);border:1px solid var(--line);border-radius:14px}
.pathmap .mdot{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--accent2);color:var(--accent);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;flex-shrink:0}
.pathmap .mdot:hover{background:var(--grad);color:#fff;border-color:transparent;transform:scale(1.12)}
.pathmap .mline{width:20px;height:2px;background:var(--accent2);opacity:.35;flex-shrink:0}
.pathmap .mtime{margin-left:auto;font-size:13px;color:var(--muted);font-weight:600;padding-left:14px;white-space:nowrap}
.path{position:relative;margin:2px 0}
.path::before{content:"";position:absolute;left:19px;top:22px;bottom:42px;width:2px;background:linear-gradient(180deg,var(--a),var(--b));opacity:.28}
.pnode{display:flex;gap:16px;align-items:flex-start;position:relative;padding:0 0 16px}
.pnode .pd{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;z-index:1;box-shadow:0 5px 14px rgba(79,70,229,.3)}
.pnode .pcard{flex:1;min-width:0;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff;transition:.15s}
.pnode .pcard:hover{border-color:var(--accent2);box-shadow:0 10px 24px rgba(79,70,229,.1);transform:translateY(-1px)}
.pnode .pt{font-weight:700;color:var(--ink)}
.pnode .pw{color:var(--muted);font-size:14px;margin-top:3px;line-height:1.5}
.pnode .pm{display:flex;gap:14px;align-items:center;margin-top:9px}
.pnode .smin{color:var(--muted);font-size:12px} .pnode .sopen{color:var(--accent);font-weight:700;font-size:13.5px}
.story{border-left:3px solid var(--gold);background:var(--goldbg);border-radius:0 12px 12px 0;padding:13px 17px;margin:10px 0;font-size:15px;line-height:1.55}
.story b{color:var(--ink)}
.plan-closer{margin-top:24px;padding:18px 20px;border-radius:16px;background:var(--grad);color:#fff;font-size:16px;font-weight:600}
.plan-closer a{color:#fff;text-decoration:underline}
.planerr{display:none;color:#b42318;background:#fef3f2;border:1px solid #fecdca;border-radius:12px;padding:14px 16px;margin-top:16px;font-size:14px}
@media(max-width:880px){.layout{grid-template-columns:1fr}.flow{display:none}h1{font-size:33px}.ihero h1{font-size:36px}}