/* ============================================================ PLANNR.DO — multipage additions Extends assets/style.css + the inline pl- system from the original single-file site. Everything here is namespaced `pg-` (pages) so it can't collide with existing rules. Reuses the same tokens: --accent #ffaf01, --s1/--s2/--s3, --b1/--b2/--b3, --tx/--tx2/--tx3, --m mono, --ease. ============================================================ */ /* per-hub accent — set on the page so each Product page keeps its own section colour, the way the app tints its clusters. Falls back to gold. */ :root{ --hub:#ffaf01; --hub-soft:rgba(255,175,1,.10); --hub-line:rgba(255,175,1,.32); } body[data-hub="plan-act"] {--hub:#22d3ee;--hub-soft:rgba(34,211,238,.10);--hub-line:rgba(34,211,238,.34)} body[data-hub="capture-think"]{--hub:#c084fc;--hub-soft:rgba(192,132,252,.10);--hub-line:rgba(192,132,252,.34)} body[data-hub="body-mind"] {--hub:#34d399;--hub-soft:rgba(52,211,153,.10);--hub-line:rgba(52,211,153,.34)} body[data-hub="money"] {--hub:#fbbf24;--hub-soft:rgba(251,191,36,.10);--hub-line:rgba(251,191,36,.34)} body[data-hub="world"] {--hub:#2dd4bf;--hub-soft:rgba(45,212,191,.10);--hub-line:rgba(45,212,191,.34)} body[data-hub="insights"] {--hub:#fb923c;--hub-soft:rgba(251,146,60,.10);--hub-line:rgba(251,146,60,.34)} /* pull the fixed nav's height into a var the new pages can pad against */ :root{--pg-navh:72px} /* every standalone page starts below the fixed nav */ .pg-main{padding-top:var(--pg-navh)} /* ---------- generic page hero ---------- */ .pg-hero{position:relative;padding:96px 0 60px;overflow:hidden} .pg-hero .wrap{position:relative;z-index:2} .pg-hero-wash{display:none} .pg-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--m); font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--hub); margin-bottom:22px} .pg-eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--hub)} .pg-hero h1{font-size:clamp(34px,5.4vw,62px);font-weight:900;letter-spacing:-.04em; line-height:1.02;max-width:16ch} .pg-hero .pg-lede{font-size:clamp(17px,2vw,21px);color:var(--tx2);line-height:1.6; max-width:60ch;margin-top:22px} .pg-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px} /* breadcrumb */ .pg-crumbs{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:12px; color:var(--tx3);margin-bottom:26px;flex-wrap:wrap} .pg-crumbs a{color:var(--tx3);transition:color .2s} .pg-crumbs a:hover{color:var(--tx)} .pg-crumbs .sep{color:var(--mut)} .pg-crumbs .cur{color:var(--hub)} /* hub badge with the real app icon */ .pg-hubmark{display:inline-flex;align-items:center;gap:13px;margin-bottom:24px} .pg-hubmark .ico{width:46px;height:46px;border-radius:12px;flex:none;display:grid; place-items:center;background:var(--hub-soft);border:1px solid var(--hub-line);color:var(--hub)} .pg-hubmark .ico svg{width:24px;height:24px} .pg-hubmark .meta{font-family:var(--m);font-size:11.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--tx3)} .pg-hubmark .meta b{display:block;color:var(--tx);font-family:var(--f);font-size:15px; letter-spacing:-.01em;text-transform:none;margin-top:2px;font-weight:600} /* ---------- section detail blocks (Product pages) ---------- */ .pg-sections{padding:40px 0 30px} .pg-sec{padding:52px 0;border-top:1px solid var(--b1)} .pg-sec:first-child{border-top:none} .pg-sec-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center} .pg-sec.rev .pg-sec-copy{order:2}.pg-sec.rev .pg-sec-vis{order:1} .pg-sec-copy .tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px} .pg-sec-copy .tag .si{width:30px;height:30px;border-radius:8px;flex:none;display:grid; place-items:center;background:var(--hub-soft);border:1px solid var(--hub-line);color:var(--hub)} .pg-sec-copy .tag .si svg{width:16px;height:16px} .pg-sec-copy .tag .sn{font-family:var(--m);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--tx3)} .pg-sec-copy h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.03em; line-height:1.12;margin-bottom:16px} .pg-sec-copy p{font-size:16px;color:var(--tx2);line-height:1.66;max-width:54ch} .pg-feat{list-style:none;margin:24px 0 0;display:flex;flex-direction:column;gap:12px} .pg-feat li{position:relative;padding-left:28px;color:var(--tx2);font-size:15px;line-height:1.5} .pg-feat li::before{content:'';position:absolute;left:0;top:7px;width:15px;height:15px; border-radius:5px;background:var(--hub)} .pg-feat li::after{content:'';position:absolute;left:4px;top:10px;width:6px;height:3px; border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg)} /* visual card used on the right of each section block */ .pg-card{background:var(--s1);border:1px solid var(--b2);border-radius:16px;padding:22px; box-shadow:0 34px 90px -46px rgba(0,0,0,.9)} .pg-card-head{display:flex;align-items:center;gap:8px;padding:0 2px 16px;margin-bottom:16px; border-bottom:1px solid var(--b1)} .pg-card-head .dot{width:9px;height:9px;border-radius:50%;background:var(--b3)} .pg-card-head .dot:nth-child(1){background:#ff5f57}.pg-card-head .dot:nth-child(2){background:#febc2e}.pg-card-head .dot:nth-child(3){background:#28c840} .pg-card-head .ct{margin-left:8px;font-family:var(--m);font-size:11.5px;color:var(--tx3)} /* mini generic rows used inside pg-card mockups */ .pg-rows{display:flex;flex-direction:column;gap:9px} .pg-row{display:flex;align-items:center;gap:12px;background:var(--s2);border:1px solid var(--b2); border-radius:10px;padding:12px 14px} .pg-row .rl{width:9px;height:9px;border-radius:3px;background:var(--hub);flex:none} .pg-row .rt{font-size:13.5px;color:var(--tx);flex:1;min-width:0} .pg-row .rm{font-family:var(--m);font-size:11px;color:var(--tx3);white-space:nowrap} .pg-row.done .rt{color:var(--tx3);text-decoration:line-through} .pg-row.done .rl{background:var(--tx3)} .pg-pill{font-family:var(--m);font-size:10px;letter-spacing:.05em;padding:3px 8px;border-radius:6px; color:var(--hub);border:1px solid var(--hub-line);white-space:nowrap} /* stat trio inside a card */ .pg-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .pg-stat{background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:14px} .pg-stat .l{font-family:var(--m);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)} .pg-stat .v{font-size:22px;font-weight:800;margin-top:6px;letter-spacing:-.02em} .pg-stat .v.hub{color:var(--hub)} /* mini bar chart */ .pg-bars{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:10px} .pg-bars .bar{flex:1;background:var(--hub-soft);border:1px solid var(--hub-line); border-radius:6px 6px 0 0;min-height:8px} .pg-bars .bar.hot{background:var(--hub)} /* week heat grid */ .pg-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .pg-week .d{aspect-ratio:1;border-radius:6px;background:var(--s3);border:1px solid var(--b1)} .pg-week .d.on{background:var(--hub);border-color:transparent} /* ---------- cross-hub nav strip at the foot of product pages ---------- */ .pg-crosslinks{padding:64px 0 20px;border-top:1px solid var(--b1)} .pg-crosslinks .h{font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--tx4,var(--mut));margin-bottom:22px;text-align:center} .pg-xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;grid-auto-rows:1fr} .pg-xcard{display:flex;gap:13px;align-items:flex-start;background:var(--s1);border:1px solid var(--b1); border-radius:12px;padding:16px 18px;transition:.3s var(--ease)} .pg-xcard:hover{border-color:var(--b3);transform:translateY(-2px);background:var(--s2)} .pg-xcard .xi{width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center; background:var(--s3);color:var(--accent)} .pg-xcard .xi svg{width:17px;height:17px} .pg-xcard b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em} .pg-xcard span{display:block;font-size:12.5px;color:var(--tx3);margin-top:2px;line-height:1.45} /* ---------- overview cards (product landing intent on hub pages) ---------- */ .pg-inhub{padding:20px 0 10px} .pg-inhub .h{text-align:center;margin-bottom:8px} .pg-inhub-sub{text-align:center;color:var(--tx3);font-size:14px;margin-bottom:40px} /* ============================================================ HELP CENTER ============================================================ */ .pg-help-search{max-width:640px;margin:30px auto 0} .pg-help-search input{width:100%;box-sizing:border-box;background:var(--s2); border:1px solid var(--b2);border-radius:12px;padding:15px 18px;color:var(--tx); font-family:var(--f);font-size:16px;transition:border-color .25s} .pg-help-search input:focus{outline:none;border-color:var(--hub)} .pg-help-search input::placeholder{color:var(--tx3)} .pg-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px;grid-auto-rows:1fr} .pg-cat{background:var(--s1);border:1px solid var(--b1);border-radius:14px;padding:24px; transition:.3s var(--ease)} .pg-cat:hover{border-color:var(--b3);transform:translateY(-3px);background:var(--s2)} .pg-cat .ci{width:38px;height:38px;border-radius:10px;display:grid;place-items:center; background:var(--hub-soft);border:1px solid var(--hub-line);color:var(--hub);margin-bottom:16px} .pg-cat .ci svg{width:20px;height:20px} .pg-cat h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px} .pg-cat p{font-size:13.5px;color:var(--tx3);line-height:1.5;margin-bottom:14px} .pg-cat ul{list-style:none;display:flex;flex-direction:column;gap:8px} .pg-cat li a{font-size:14px;color:var(--tx2);display:inline-flex;gap:7px;align-items:center;transition:color .2s} .pg-cat li a::before{content:'›';color:var(--hub);font-weight:700} .pg-cat li a:hover{color:var(--tx)} /* help article accordion (reuses faq visual language) */ .pg-articles{max-width:820px;margin:0 auto} .pg-art-group{margin-bottom:40px} .pg-art-group > h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px; display:flex;align-items:center;gap:11px} .pg-art-group > h2 .gi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center; background:var(--hub-soft);color:var(--hub);border:1px solid var(--hub-line)} .pg-art-group > h2 .gi svg{width:15px;height:15px} .pg-acc{display:flex;flex-direction:column;gap:10px} .pg-acc-item{background:var(--s1);border:1px solid var(--b1);border-radius:12px;overflow:hidden; transition:border-color .3s} .pg-acc-item.open{border-color:var(--b3)} .pg-acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px; background:none;border:none;color:var(--tx);font-family:var(--f);font-size:15.5px;font-weight:600; text-align:left;padding:18px 22px;cursor:pointer;line-height:1.4} .pg-acc-q .x{font-size:21px;color:var(--tx3);flex:none;font-weight:400;transition:transform .3s var(--ease)} .pg-acc-item.open .pg-acc-q .x{transform:rotate(45deg);color:var(--hub)} .pg-acc-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .pg-acc-a .in{padding:0 22px 20px;color:var(--tx2);font-size:14.5px;line-height:1.7} .pg-acc-a .in p{margin-bottom:12px} .pg-acc-a .in p:last-child{margin-bottom:0} .pg-acc-a .in ol,.pg-acc-a .in ul{margin:0 0 12px;padding-left:20px} .pg-acc-a .in li{margin-bottom:6px} .pg-acc-a .in code{font-family:var(--m);font-size:.9em;color:var(--sec-brain); background:rgba(192,132,252,.1);padding:2px 6px;border-radius:5px} .pg-acc-a .in a{color:var(--hub);border-bottom:1px solid var(--hub-line)} /* ============================================================ BLOG ============================================================ */ .pg-blog-feat{margin-top:20px;display:grid;grid-template-columns:1.3fr 1fr;gap:30px; background:var(--s1);border:1px solid var(--b2);border-radius:18px;overflow:hidden;align-items:stretch} .pg-blog-feat .cov{background:var(--hub-soft); min-height:280px;display:grid;place-items:center;position:relative} .pg-blog-feat .cov .glyph{width:88px;height:88px;color:var(--hub);opacity:.9} .pg-blog-feat .cov .glyph svg{width:100%;height:100%} .pg-blog-feat .body{padding:34px 34px 34px 6px;display:flex;flex-direction:column;justify-content:center} .pg-blog-feat .kk{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--hub);margin-bottom:14px} .pg-blog-feat h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.025em; line-height:1.16;margin-bottom:14px} .pg-blog-feat p{font-size:15px;color:var(--tx2);line-height:1.6;margin-bottom:20px} .pg-blog-feat .meta{font-family:var(--m);font-size:12px;color:var(--tx3)} .pg-postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;grid-auto-rows:1fr} .pg-post{display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--b1); border-radius:14px;overflow:hidden;transition:.3s var(--ease)} .pg-post:hover{border-color:var(--b3);transform:translateY(-3px);background:var(--s2)} .pg-post .cov{height:150px;background:var(--hub-soft); display:grid;place-items:center} .pg-post .cov .glyph{width:44px;height:44px;color:var(--hub);opacity:.85} .pg-post .cov .glyph svg{width:100%;height:100%} .pg-post .body{padding:20px;flex:1;display:flex;flex-direction:column} .pg-post .kk{font-family:var(--m);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--hub);margin-bottom:11px} .pg-post h3{font-size:16.5px;font-weight:700;letter-spacing:-.015em;line-height:1.28;margin-bottom:9px} .pg-post p{font-size:13.5px;color:var(--tx3);line-height:1.55;flex:1} .pg-post .meta{font-family:var(--m);font-size:11px;color:var(--tx3);margin-top:16px; padding-top:14px;border-top:1px solid var(--b1)} .pg-topics{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:10px} .pg-topics button{font-family:var(--m);font-size:12.5px;letter-spacing:.03em;background:var(--s2); border:1px solid var(--b2);color:var(--tx3);padding:8px 16px;border-radius:100px;cursor:pointer; transition:.2s} .pg-topics button:hover,.pg-topics button.on{color:#000;background:var(--hub);border-color:var(--hub)} /* ============================================================ CONTACT ============================================================ */ .pg-contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start} .pg-contact-copy h1{font-size:clamp(30px,4.4vw,50px);font-weight:900;letter-spacing:-.04em;line-height:1.04} .pg-contact-copy .pg-lede{margin-top:20px} .pg-contact-ways{margin-top:34px;display:flex;flex-direction:column;gap:14px} .pg-way{display:flex;gap:14px;align-items:flex-start;background:var(--s1);border:1px solid var(--b1); border-radius:13px;padding:18px 20px} .pg-way .wi{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center; background:var(--hub-soft);border:1px solid var(--hub-line);color:var(--hub)} .pg-way .wi svg{width:18px;height:18px} .pg-way b{display:block;font-size:15px;font-weight:700} .pg-way p{font-size:13.5px;color:var(--tx3);margin-top:3px;line-height:1.5} .pg-way a{color:var(--hub)} .pg-form{background:var(--s1);border:1px solid var(--b2);border-radius:18px;padding:34px} .pg-field{margin-bottom:20px} .pg-field label{display:block;font-family:var(--m);font-size:11.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--tx3);margin-bottom:9px} .pg-field label .req{color:var(--hub)} .pg-input,.pg-select,.pg-textarea{width:100%;box-sizing:border-box;background:var(--s2); border:1px solid var(--b2);border-radius:11px;padding:13px 15px;color:var(--tx); font-family:var(--f);font-size:15px;transition:border-color .25s} .pg-input:focus,.pg-select:focus,.pg-textarea:focus{outline:none;border-color:var(--hub)} .pg-input::placeholder,.pg-textarea::placeholder{color:var(--tx3)} .pg-textarea{resize:vertical;min-height:140px;line-height:1.6} .pg-select{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%236e6e6e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center} .pg-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .pg-form .pg-submit{width:100%;margin-top:6px} .pg-consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:22px} .pg-consent input{margin-top:3px;accent-color:var(--hub);width:16px;height:16px;flex:none} .pg-consent label{font-size:13px;color:var(--tx3);line-height:1.5;font-family:var(--f); letter-spacing:0;text-transform:none} .pg-consent label a{color:var(--hub)} .pg-form-note{font-family:var(--m);font-size:12px;color:var(--tx3);margin-top:16px;text-align:center} .pg-form-ok{display:none;text-align:center;padding:30px 10px} .pg-form-ok.show{display:block} .pg-form-ok .big-ck{width:56px;height:56px;border-radius:50%;background:var(--hub);color:#000; display:grid;place-items:center;margin:0 auto 20px} .pg-form-ok .big-ck svg{width:28px;height:28px} .pg-form-ok h3,.pg-form-ok h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px} .pg-form-ok p{font-size:15px;color:var(--tx2);line-height:1.6;max-width:40ch;margin:0 auto} /* ---------- shared CTA band ---------- */ .pg-band{padding:30px 0 96px} .pg-band-card{background:var(--s2);border:1px solid var(--b2);border-radius:22px;padding:56px 40px; text-align:center;overflow:hidden;position:relative} .pg-band-card > *{position:relative} .pg-band-card h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.1} .pg-band-card p{font-size:16px;color:var(--tx2);max-width:52ch;margin:16px auto 0;line-height:1.6} .pg-band-cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ---------- responsive ---------- */ @media(max-width:900px){ .pg-sec-grid{grid-template-columns:1fr;gap:34px} .pg-sec.rev .pg-sec-copy{order:1}.pg-sec.rev .pg-sec-vis{order:2} .pg-xgrid,.pg-cats,.pg-postgrid{grid-template-columns:1fr 1fr} .pg-contact-grid{grid-template-columns:1fr;gap:36px} .pg-blog-feat{grid-template-columns:1fr} .pg-blog-feat .cov{min-height:180px} .pg-blog-feat .body{padding:28px} } @media(max-width:600px){ .pg-hero{padding:64px 0 44px} .pg-xgrid,.pg-cats,.pg-postgrid,.pg-stats,.pg-row2{grid-template-columns:1fr} .pg-form{padding:24px} .pg-band-card{padding:40px 24px} } @media(prefers-reduced-motion:reduce){ .pg-xcard,.pg-cat,.pg-post{transition:none} } /* ============================================================ KNOWLEDGE BASE (help center v2) ============================================================ */ /* --- help index --- */ .kb-hero{padding:64px 0 20px;text-align:center;border-bottom:1px solid var(--b1)} .kb-hero .k{font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--hub)} .kb-hero h1{font-size:clamp(30px,4.5vw,46px);font-weight:800;letter-spacing:-.03em;margin:14px 0 0} .kb-hero p{color:var(--tx2);font-size:17px;margin:16px auto 0;max-width:52ch;line-height:1.6} .kb-search{max-width:600px;margin:26px auto 0;position:relative} .kb-search input{width:100%;box-sizing:border-box;background:var(--s2);border:1px solid var(--b2); border-radius:12px;padding:15px 18px 15px 46px;color:var(--tx);font-size:15px;font-family:var(--s)} .kb-search input:focus{outline:none;border-color:var(--hub)} .kb-search input::placeholder{color:var(--tx3)} .kb-search .si{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--tx3)} .kb-search .si svg{width:18px;height:18px} /* search results dropdown */ .kb-results{max-width:600px;margin:8px auto 0;background:var(--s1);border:1px solid var(--b2); border-radius:12px;overflow:hidden;display:none;text-align:left} .kb-results.show{display:block} .kb-results a{display:block;padding:12px 16px;border-bottom:1px solid var(--b1);text-decoration:none} .kb-results a:last-child{border-bottom:none} .kb-results a:hover{background:var(--s2)} .kb-results .rt{font-size:14px;font-weight:600;color:var(--tx)} .kb-results .rc{font-family:var(--m);font-size:11px;color:var(--hub);margin-left:8px} .kb-results .rs{font-size:12.5px;color:var(--tx3);margin-top:2px} .kb-noresult{padding:16px;color:var(--tx3);font-size:13px;font-family:var(--m)} /* --- category grid on index --- */ .kb-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px;grid-auto-rows:1fr} .kb-cat{display:block;background:var(--s1);border:1px solid var(--b1);border-radius:16px; padding:26px;text-decoration:none;transition:border-color .16s,transform .16s,background .16s} .kb-cat:hover{border-color:var(--b3);transform:translateY(-3px);background:var(--s2)} .kb-cat .ci{width:40px;height:40px;border-radius:11px;display:grid;place-items:center; background:var(--hub-soft);border:1px solid var(--hub-line);color:var(--hub);margin-bottom:16px} .kb-cat .ci svg{width:21px;height:21px} .kb-cat h3,.kb-cat h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 7px;color:var(--tx)} .kb-cat p{font-size:13.5px;color:var(--tx3);line-height:1.5;margin:0 0 14px} .kb-cat .cc{font-family:var(--m);font-size:11px;letter-spacing:.05em;color:var(--hub)} /* popular / article link lists */ .kb-sec-h{font-family:var(--m);font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--tx3);margin:0 0 16px} .kb-list{display:grid;gap:10px} .kb-alink{display:flex;align-items:center;gap:14px;background:var(--s1);border:1px solid var(--b1); border-radius:12px;padding:15px 18px;text-decoration:none;transition:border-color .16s,background .16s} .kb-alink:hover{border-color:var(--b3);background:var(--s2)} .kb-alink .ai{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center; background:var(--hub-soft);border:1px solid var(--hub-line);color:var(--hub)} .kb-alink .ai svg{width:17px;height:17px} .kb-alink .at{flex:1;min-width:0} .kb-alink .at b{display:block;font-size:14.5px;font-weight:600;color:var(--tx);line-height:1.3} .kb-alink .at span{display:block;font-size:12.5px;color:var(--tx3);line-height:1.4;margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kb-alink .akind{font-family:var(--m);font-size:10px;letter-spacing:.06em;padding:3px 8px;border-radius:6px; border:1px solid var(--b2);color:var(--tx3);flex:none} .kb-alink .arrow{color:var(--tx3);flex:none} .kb-alink:hover .arrow{color:var(--hub)} /* --- article page layout --- */ .kb-article{display:grid;grid-template-columns:1fr 220px;gap:56px; max-width:1000px;margin:0 auto;padding:0 28px;align-items:start} .kb-body{min-width:0;max-width:680px} .kb-crumbs{display:flex;align-items:center;gap:9px;font-family:var(--m);font-size:12px; color:var(--tx3);margin-bottom:22px;flex-wrap:wrap} .kb-crumbs a{color:var(--tx3);text-decoration:none} .kb-crumbs a:hover{color:var(--hub)} .kb-crumbs .sep{opacity:.5} .kb-crumbs .cur{color:var(--hub)} .kb-arthead{border-bottom:1px solid var(--b1);padding-bottom:24px;margin-bottom:30px} .kb-kindtag{display:inline-flex;align-items:center;gap:7px;font-family:var(--m);font-size:11px; letter-spacing:.08em;text-transform:uppercase;color:var(--hub);white-space:nowrap; background:var(--hub-soft);border:1px solid var(--hub-line);padding:5px 11px;border-radius:7px} .kb-kindtag svg{width:14px;height:14px;flex:none} .kb-article h1{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.03em; line-height:1.1;margin:16px 0 0} .kb-lede{font-size:17px;color:var(--tx2);line-height:1.6;margin:14px 0 0;max-width:60ch} .kb-meta{display:flex;gap:16px;font-family:var(--m);font-size:12px;color:var(--tx3);margin-top:18px} .kb-body p{font-size:15.5px;color:var(--tx2);line-height:1.72;margin:0 0 18px} .kb-body a{color:var(--hub);text-decoration:none;border-bottom:1px solid var(--hub-line)} .kb-body a:hover{border-bottom-color:var(--hub)} .kb-body code{font-family:var(--m);font-size:.88em;background:var(--s2);border:1px solid var(--b1); padding:2px 6px;border-radius:5px;color:var(--tx);white-space:nowrap} .kb-h{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--tx); margin:38px 0 14px;scroll-margin-top:96px} .kb-ul,.kb-ol{margin:0 0 20px;padding-left:0;list-style:none;display:grid;gap:10px} .kb-ul li,.kb-ol li{position:relative;padding-left:26px;color:var(--tx2);font-size:15px;line-height:1.6} .kb-ul li::before{content:'';position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:2px;background:var(--hub)} .kb-ol{counter-reset:kbo} .kb-ol li{counter-increment:kbo} .kb-ol li::before{content:counter(kbo);position:absolute;left:0;top:0;font-family:var(--m);font-size:12px; color:var(--hub);font-weight:600} /* steps */ .kb-steps{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:2px} .kb-step{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--b1)} .kb-step:first-child{border-top:none} .kb-step-n{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center; background:var(--hub);color:#111;font-family:var(--m);font-size:13px;font-weight:700} .kb-step-b b{display:block;font-size:15px;font-weight:600;color:var(--tx);margin-bottom:4px} .kb-step-b p{font-size:14.5px;color:var(--tx2);line-height:1.6;margin:0} /* callouts */ .kb-callout{display:flex;gap:13px;padding:15px 17px;border-radius:12px;margin:0 0 22px; border:1px solid var(--b2);background:var(--s1)} .kb-callout-i{flex:none;width:20px;height:20px;margin-top:1px} .kb-callout-i svg{width:20px;height:20px} .kb-callout-b{font-size:14px;color:var(--tx2);line-height:1.6} .kb-callout-b p{margin:0;font-size:14px} .kb-tip{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.06)} .kb-tip .kb-callout-i{color:#34d399} .kb-note{border-color:var(--hub-line);background:var(--hub-soft)} .kb-note .kb-callout-i{color:var(--hub)} .kb-warn{border-color:rgba(248,113,113,.32);background:rgba(248,113,113,.06)} .kb-warn .kb-callout-i{color:#f87171} /* figure / mockup */ .kb-fig{margin:8px 0 26px} .kb-mock{border-radius:14px;overflow:hidden} .kb-mock svg{display:block} /* table */ .kb-table-wrap{margin:0 0 24px;border:1px solid var(--b1);border-radius:12px;overflow:hidden} .kb-table{width:100%;border-collapse:collapse;font-size:14px} .kb-table th{background:var(--s2);color:var(--tx3);font-family:var(--m);font-size:11px; letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:11px 16px;font-weight:500} .kb-table td{padding:12px 16px;border-top:1px solid var(--b1);color:var(--tx2)} .kb-table td:first-child{color:var(--tx)} /* quote/definition */ .kb-quote{margin:0 0 22px;padding:14px 18px;border-left:3px solid var(--hub); background:var(--s1);border-radius:0 10px 10px 0;color:var(--tx2);font-size:15px;line-height:1.65} /* sidebar TOC */ .kb-side{position:sticky;top:96px;display:grid;gap:26px} .kb-toc h4,.kb-related h4,.kb-toc .kb-sh,.kb-related .kb-sh{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--tx3);margin:0 0 12px} .kb-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:9px; border-left:1px solid var(--b1);padding-left:14px} .kb-toc a{font-size:13px;color:var(--tx3);text-decoration:none;line-height:1.4;display:block} .kb-toc a:hover,.kb-toc a.active{color:var(--hub)} .kb-related{display:grid;gap:8px} .kb-related a{display:block;font-size:13.5px;color:var(--tx2);text-decoration:none; padding:9px 12px;border:1px solid var(--b1);border-radius:9px;line-height:1.35} .kb-related a:hover{border-color:var(--b3);color:var(--tx);background:var(--s1)} /* article footer */ .kb-artfoot{max-width:680px;margin:40px auto 0;padding:0 28px} .kb-feedback{border:1px solid var(--b1);border-radius:14px;padding:22px 24px;text-align:center; background:var(--s1)} .kb-feedback b{display:block;font-size:15px;color:var(--tx);margin-bottom:6px} .kb-feedback p{font-size:13.5px;color:var(--tx3);margin:0 0 14px} .kb-fbtns{display:inline-flex;gap:10px} .kb-fbtn{font-family:var(--m);font-size:13px;padding:8px 18px;border-radius:9px;border:1px solid var(--b2); background:var(--s2);color:var(--tx2);cursor:pointer;transition:border-color .15s,color .15s} .kb-fbtn:hover{border-color:var(--hub);color:var(--hub)} .kb-fbtn.picked{border-color:var(--hub);color:var(--hub);background:var(--hub-soft)} /* prev/next + still-stuck band reuse pg-band */ /* --- category page --- */ .kb-cathead{padding:56px 0 8px} .kb-cathead .ci{width:48px;height:48px;border-radius:13px;display:grid;place-items:center; background:var(--hub-soft);border:1px solid var(--hub-line);color:var(--hub);margin-bottom:18px} .kb-cathead .ci svg{width:25px;height:25px} .kb-cathead h1{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.03em;margin:0} .kb-cathead p{font-size:16px;color:var(--tx2);margin:12px 0 0;max-width:56ch;line-height:1.6} @media(max-width:900px){ .kb-cats{grid-template-columns:1fr 1fr} .kb-article{grid-template-columns:1fr;gap:8px} .kb-side{position:static;border-top:1px solid var(--b1);padding-top:24px;margin-top:8px} .kb-toc ul{border-left:none;padding-left:0} } @media(max-width:560px){ .kb-cats{grid-template-columns:1fr} }