/* ── Shared site chrome: nav, logo, account dropdown, footer ──────────────
   Phase 2 of the CSS consolidation (phase 1 was tokens.css). These rules
   used to be copy-pasted into the <style> block of every public page.
   Linked right after tokens.css and BEFORE each page's own <style>, so a
   page can still override any of this locally (e.g. 404's larger footer
   margin) just by redefining the rule. Uses tokens only, never raw hex.
   Every page that links this was checked against pixel-diffed screenshots
   (desktop + mobile, signed out / in / account menu open) when extracted.
   Edit here, not in the pages. */
.s-nav{position:sticky;top:0;z-index:100;font-family:'Inter','Inter Fallback',sans-serif;line-height:normal;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--b0)}
.s-nav-inner{max-width:1280px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.s-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.s-logo-mark{width:34px;height:34px;background:var(--navy);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl);font-weight:800;color:var(--gold);font-family:'IBM Plex Mono',monospace;flex-shrink:0}
.s-logo-name{font-size:var(--fs-base);font-weight:700;color:var(--navy);line-height:1.2}
.s-logo-sub{font-size:var(--fs-3xs);color:var(--t3);letter-spacing:1px;text-transform:uppercase}
.s-nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.s-nav-link{font-size:var(--fs-sm);font-weight:500;color:var(--t2);text-decoration:none;padding:6px 12px;border-radius:6px;transition:all .15s}
.s-nav-link:hover{background:var(--navy3);color:var(--navy)}
.s-btn-login{font-size:var(--fs-sm);font-weight:600;color:var(--navy);text-decoration:none;padding:7px 16px;border:1.5px solid var(--b0);border-radius:8px;transition:all .15s;white-space:nowrap}
.s-btn-login:hover{border-color:var(--navy);background:var(--navy3)}
.s-btn-start{font-size:var(--fs-sm);font-weight:600;color:#fff;background:var(--navy);text-decoration:none;padding:8px 18px;border-radius:8px;transition:all .15s;white-space:nowrap}
.s-btn-start:hover{background:var(--navy2)}
.s-nav-account{position:relative;display:flex;justify-content:flex-end;align-items:center}
.s-nav-auth-slot{display:grid;grid-template-areas:"stack"}
.s-nav-auth-slot > *{grid-area:stack}
.s-nav-guest{display:flex;align-items:center;gap:6px}
.s-btn-account{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--navy);background:none;border:1.5px solid var(--b0);border-radius:8px;padding:7px 14px;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.s-btn-account:hover{border-color:var(--navy);background:var(--navy3)}
.s-nav-caret{font-size:var(--fs-3xs);color:var(--t3);transition:transform .15s}
.s-nav-account.open .s-nav-caret{transform:rotate(180deg)}
.s-nav-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--s0);border:1.5px solid var(--b0);border-radius:var(--r);box-shadow:0 8px 24px rgba(20,30,50,.12);min-width:180px;overflow:hidden;z-index:200}
.s-nav-account.open .s-nav-dropdown{display:block}
.s-nav-dropdown a,.s-nav-dropdown button{display:block;width:100%;text-align:left;font-size:var(--fs-md);font-weight:500;color:var(--t1);background:none;border:none;padding:11px 16px;cursor:pointer;font-family:inherit;text-decoration:none;transition:background .15s}
.s-nav-dropdown a:hover,.s-nav-dropdown button:hover{background:var(--navy3);color:var(--navy)}
.s-nav-signout{border-top:1px solid var(--b0)!important;color:var(--red)!important}
.s-nav-signout:hover{background:var(--red-s)!important;color:var(--red)!important}
/* A long first name is cut with … at every width (it used to be capped on phones only,
   and a 26-letter name wrapped the bar on small laptops). */
.s-btn-account span:first-child{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:40em){.s-btn-account span:first-child{max-width:80px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:40em){.s-nav-inner{padding:12px 16px}.s-nav-link{display:none}.logo-sub-more{display:none}}
/* Tablets and narrow laptop windows. The full bar (logo with its long subtitle,
   five links, two buttons) needs about 1000px, and between the phone layout and
   that width it used to wrap onto a second and sometimes a third row.
   From just over 40em (the phone layout ends at exactly 40em; 40.001 rather
   than 40.0625 so that no whole-pixel width falls between the two at larger text
   sizes) up to 61.25em (980px at default text): the subtitle shortens to "WealthVault"
   and the links sit a little closer. Up to 55em (880px): only Tools and Guides
   stay as links; the rest are in the footer of every page. Breakpoints are in em,
   so a reader with larger text gets the simpler bar sooner. */
@media(min-width:40.001em) and (max-width:61.25em){.logo-sub-more{display:none}.s-nav-link{padding:6px 9px;white-space:nowrap}.s-btn-account span:first-child{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(min-width:40.001em) and (max-width:55em){.s-nav-link:not([href="/tools"]):not([href="/guides"]){display:none}}
.s-footer{background:#0a1628;color:rgba(255,255,255,.4);padding:40px 0 24px;margin-top:20px}
.s-footer-inner{max-width:1280px;margin:0 auto;padding:0 28px}
.s-footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:20px}
.s-footer-brand-name{font-size:var(--fs-base);font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.s-footer-mark{width:28px;height:28px;background:var(--navy);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);font-weight:800;color:var(--gold);font-family:monospace}
.s-footer-desc{font-size:var(--fs-sm);color:rgba(255,255,255,.35);line-height:1.6;max-width:260px}
.s-footer-links{display:flex;gap:40px;flex-wrap:wrap}
.s-footer-col-title{font-size:var(--fs-3xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:12px}
.s-footer-col a{display:block;font-size:var(--fs-sm);color:rgba(255,255,255,.5);text-decoration:none;margin-bottom:7px;transition:color .15s}
.s-footer-col a:hover{color:#fff}
.s-footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.s-footer-copy{font-size:var(--fs-xs);color:rgba(255,255,255,.25)}
.s-footer-legal{font-size:var(--fs-2xs);color:rgba(255,255,255,.2);max-width:480px;text-align:right}
@media(max-width:40em){.s-footer-inner{padding:0 16px}.s-footer-top{flex-direction:column;gap:24px}.s-footer-links{gap:24px}.s-footer-legal{text-align:left}}

/* ── Narrow-phone nav fit ────────────────────────────────────────────────
   Measured with the real Inter font: logo + wordmark + Login + Start Free
   overflowed the viewport (sideways scrolling) at 360px by ~2px and at
   320px by ~42px, and at every phone width for readers with a larger
   browser text size once font sizes moved to rem. The wordmark breakpoint
   is in em, NOT px, so it scales with the reader's text size: 21.5em =
   344px at the default 16px (only very small phones lose the wordmark),
   430px at 20px (every phone, for large-text readers). The logo mark
   stays, so the brand is still there, and the wordmark is only visually
   hidden so screen readers still announce the link as "dontjustwork". */
@media(max-width:40em){.s-nav-inner{gap:10px}}
@media(max-width:21.5em){.s-logo-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.s-logo-sub{display:none}} /* visually hidden, not display:none, so the logo link keeps "dontjustwork" as its accessible name */
/* Extreme text size on the smallest phones (screen under 12em: 175% text on a 320px phone;
   never at default or 150% text): the Login / Start Free buttons move to a second row of
   the nav bar instead of pushing the page sideways. */
@media(max-width:12.3em){.s-nav-inner{flex-wrap:wrap;row-gap:8px}} /* 12.3, not 12: at 175% text the bar was still 1 to 7px too wide between 337 and 343px */
/* Phones 345 to 356px wide (some older Androids and iPhones in zoomed display mode): the
   wordmark is back but the bar was 1 to 12px too wide, so the page slid sideways. Slightly
   tighter side padding in just that band. */
@media(min-width:21.501em) and (max-width:22.3em){.s-nav-inner{padding:12px 8px;gap:4px}}

/* ── Page header banner (one standard look on every public page, chosen 2026-10-01) ──
   .hero: About, Contact, Privacy, Terms, Tools, calculators. .guides-index-hero: Guides list.
   .article-hero: guide articles. Page-specific extras stay on the page (Privacy/Terms .meta). */
.hero,.guides-index-hero,.article-hero{background:linear-gradient(135deg,#0d1e38,var(--navy));padding:56px 24px 48px;text-align:center}
.hero h1,.guides-index-hero h1,.article-hero h1{font-size:clamp(1.625rem,4.5vw,2.5rem);font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1.2;margin:0 auto 12px;max-width:860px;overflow-wrap:break-word}
.hero p,.guides-index-hero p,.article-hero .dek{font-size:var(--fs-lg);color:rgba(255,255,255,.65);max-width:640px;margin:0 auto;line-height:1.7}
.article-hero .dek{margin-bottom:16px}
.hero .badge,.article-hero .badge{display:inline-block;background:rgba(255,255,255,.1);color:var(--gold);font-size:var(--fs-xs);font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:6px 14px;border-radius:20px;margin-bottom:16px}

/* ── "Try WealthVault" bar near the bottom of pages (gold button everywhere, chosen 2026-10-01) ──
   Text block is .cta-bar-text on most pages and a plain <div> in guide articles; the button is
   the bar's direct <a> child (class .btn on most pages). Spacing above it stays on each page. */
.cta-bar{background:var(--navy);border-radius:var(--r2);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;line-height:normal}
/* .article-body variants: in guide articles the bar sits inside the article text, whose own
   h3/p rules (dark heading, big margins) would otherwise win over these. */
.cta-bar h3,.article-body .cta-bar h3{font-size:var(--fs-xl);font-weight:700;color:#fff;margin:0 0 4px}
.cta-bar p,.article-body .cta-bar p{font-size:var(--fs-md);color:rgba(255,255,255,.6);margin:0}
.cta-bar > a{background:var(--gold);color:#1a1f36;border:none;padding:11px 24px;border-radius:var(--r);font-size:var(--fs-md);font-weight:700;font-family:inherit;text-decoration:none;display:inline-block;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.cta-bar > a:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.25)}
@media(max-width:40em){.cta-bar{flex-direction:column;text-align:center}.cta-bar > a{white-space:normal}}