/* ─────────────────────────────────────────────────────────────────────────── LevyReady — Guides design system (v2: bolder, more confident type + motion). Same homepage PALETTE + the blue glow so every page feels like one product, but with a modern grotesk display face (Space Grotesk), Inter body, a signature gradient headline word, gradient/glow buttons and tasteful micro-interactions. Zero JavaScript: static, fast, and CSP-safe (no inline script, no on*=). ─────────────────────────────────────────────────────────────────────────── */ /* Self-hosted brand fonts — vendored same-origin under /web/vendor/fonts/ (no third-party Google fetch, no IP leak). Declared here in the guides' own shared stylesheet (already loaded) so no extra font-CSS request is added. Inter is variable (one file per range spans 400–800); Space Grotesk is variable (500–700). font-display:swap makes the brand fonts always render (never stuck on the fallback); the preloads in each guide's keep the swap-in near-instant so any layout shift stays minimal. latin + latin-ext cover English + European accents. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/web/vendor/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/web/vendor/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/web/vendor/fonts/spacegrotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/web/vendor/fonts/spacegrotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --ink:#0e0e0e;--ink-muted:#54565f;--ink-faint:#6e6e6e; --paper:#f8f6f1;--paper-dark:#eeece6;--paper-darker:#e0ddd5; --accent:#1e3a8a;--accent-mid:#2563eb;--accent-light:#bfdbfe;--accent-faint:#eff6ff; --indigo:#4f46e5;--violet:#6d4ad6; --danger:#8b1a1a;--danger-light:#fdf0f0;--danger-br:#fca5a5; --amber:#7a4a00;--amber-light:#fdf4e0;--amber-br:#fcd34d; --green:#15803d;--green-light:#dcfce7;--green-br:#86efac; --display:'Space Grotesk',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif; --grad:linear-gradient(115deg,#2563eb 0%,#4f46e5 55%,#6d4ad6 100%); --radius:14px;--radius-sm:7px;--radius-lg:22px; --shadow:0 2px 16px rgba(20,40,80,.07);--shadow-lg:0 16px 50px rgba(20,40,80,.13); } html{scroll-behavior:smooth;background:var(--paper)} body{font-family:var(--sans);background:transparent;color:var(--ink);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* Brand watermark — a single faint mark bleeding off the bottom-right, behind all content (a subtle "letterhead" feel). Fixed so it stays as the page scrolls. */ body::after{content:"";position:fixed;right:-3vw;bottom:-5vh;width:min(46vw,560px);height:min(46vw,560px);background:url(/web/lr-mark.svg) center/contain no-repeat;opacity:.07;z-index:0;pointer-events:none} .gnav{z-index:200} .wrap,.gfoot{position:relative;z-index:1} /* Ambient blue glow — the homepage hero effect, FIXED behind the content and gently alive (slow drift). Each gradient fades to transparent toward the centre so the reading column stays clean. */ body::before{content:'';position:fixed;inset:-20%;z-index:-1;pointer-events:none; background: linear-gradient(135deg,rgba(147,197,253,.72) 0%,transparent 58%), linear-gradient(225deg,rgba(147,197,253,.48) 0%,transparent 52%), radial-gradient(circle at 14% 12%,rgba(37,99,235,.26) 0%,transparent 52%), radial-gradient(circle at 86% 8%,rgba(79,70,229,.24) 0%,transparent 48%), radial-gradient(circle at 62% 97%,rgba(37,99,235,.18) 0%,transparent 56%)} @media(prefers-reduced-motion:no-preference){ body::before{animation:drift 26s ease-in-out infinite alternate} @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2.5%,1.5%,0) scale(1.06)}} } img,svg{display:block;max-width:100%} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} ::selection{background:rgba(37,99,235,.18)} /* ── NAV ─────────────────────────────────────────────────────── */ .gnav{position:sticky;top:0;z-index:200;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 1.75rem;background:rgba(248,246,241,.82);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--paper-darker)} .gnav-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)} .gnav-logo:hover{text-decoration:none} .gnav-logo-mark{width:30px;height:32px;background:url("/web/lr-mark.svg") center/contain no-repeat;flex-shrink:0} .gnav-logo-name{font-family:var(--sans);font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1} .gnav-logo-name .l{color:var(--accent);font-weight:600} .gnav-logo-name .r{color:var(--ink);font-weight:800;letter-spacing:-.03em} .gnav-right{display:flex;align-items:center;gap:14px} .gnav-link{font-size:14px;color:var(--ink-muted);font-weight:500} .btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;cursor:pointer;border:none;transition:transform .18s,box-shadow .18s,background .18s;text-decoration:none;line-height:1;letter-spacing:-.01em} .btn:hover{text-decoration:none} .btn-primary{background:var(--grad);color:#fff;padding:12px 24px;border-radius:99px;font-size:14px;box-shadow:0 4px 14px rgba(37,99,235,.28)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,99,235,.40)} .btn-lg{padding:16px 34px;font-size:16.5px} /* ── LAYOUT ──────────────────────────────────────────────────── */ .wrap{max-width:1120px;margin:0 auto;padding:0 1.75rem} .article-grid{display:grid;grid-template-columns:1fr;gap:0} @media(min-width:1024px){.article-grid{grid-template-columns:228px minmax(0,720px);gap:3.5rem;justify-content:center}} .article{max-width:720px;width:100%} /* ── BREADCRUMB ──────────────────────────────────────────────── */ .crumb{font-size:13px;color:var(--ink-faint);padding:1.5rem 0 0;font-weight:500} .crumb a{color:var(--ink-muted);font-weight:600} /* ── HERO / HEADER ───────────────────────────────────────────── */ .g-hero{padding:2.75rem 0 1.75rem;border-bottom:1px solid var(--paper-darker);margin-bottom:2.5rem} .g-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(37,99,235,.09);color:var(--accent);padding:6px 15px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1.4rem;border:1px solid rgba(37,99,235,.18)} .g-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--grad)} .g-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,5.6vw,58px);line-height:1.04;letter-spacing:-.03em;color:var(--ink);margin-bottom:1.2rem} .g-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .g-lede{font-size:clamp(18px,2.3vw,21px);color:var(--ink-muted);font-weight:400;line-height:1.6;max-width:640px} .g-meta{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:1.7rem;font-size:13px;color:var(--ink-faint)} .g-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint)} .g-verified{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-weight:700} /* ── TABLE OF CONTENTS (sticky, desktop) ─────────────────────── */ .toc{display:none} @media(min-width:1024px){ .toc{display:block;position:sticky;top:88px;align-self:start;font-size:13.5px; background:#fff;border:1px solid var(--paper-darker);border-radius:16px; padding:1.25rem 1.1rem 1.35rem; box-shadow:0 1px 2px rgba(16,24,40,.04),0 18px 42px -28px rgba(16,24,40,.30)} .toc-title{display:flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:700;color:var(--accent);margin-bottom:.85rem;font-family:var(--display)} .toc-title::before{content:"";width:15px;height:2px;border-radius:2px;background:var(--accent-mid)} .toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:1px} .toc li{counter-increment:toc} .toc li a{display:flex;gap:11px;align-items:baseline;padding:8px 10px;border-radius:9px;color:var(--ink-muted);line-height:1.35;font-weight:500;transition:color .15s,background .15s} .toc li a::before{content:counter(toc,decimal-leading-zero);font-family:var(--display);font-size:11px;font-weight:700;color:var(--accent-mid);font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:1.4em;padding-top:1px} .toc li a:hover{color:var(--accent);background:var(--accent-faint);text-decoration:none} .toc li a:hover::before{color:var(--accent)} } /* ── PROSE ───────────────────────────────────────────────────── */ .prose h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,33px);line-height:1.15;letter-spacing:-.025em;margin:2.9rem 0 1rem;scroll-margin-top:84px} .prose h3{font-family:var(--display);font-weight:600;font-size:20px;margin:2rem 0 .6rem;letter-spacing:-.02em;scroll-margin-top:84px} .prose p{margin:0 0 1.15rem} .prose ul,.prose ol{margin:0 0 1.25rem;padding-left:1.3rem} .prose li{margin:0 0 .55rem} .prose li::marker{color:var(--accent-mid)} .prose strong{font-weight:700;color:var(--ink)} .prose a{font-weight:600;background:linear-gradient(var(--accent-mid),var(--accent-mid)) 0 100%/0 1.5px no-repeat;transition:background-size .25s;padding-bottom:1px;text-decoration:none} .prose a:hover{background-size:100% 1.5px;text-decoration:none} .lead{font-size:19.5px;color:var(--ink);line-height:1.62} /* ── KEY-FACTS CARD ──────────────────────────────────────────── */ .facts{background:#fff;border:1px solid var(--paper-darker);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1.7rem 1.85rem;margin:2.1rem 0;position:relative;overflow:hidden} .facts::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)} .facts-h{font-family:var(--display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:1.2rem;display:flex;align-items:center;gap:8px} .facts dl{display:grid;grid-template-columns:1fr;gap:0} .facts .row{display:flex;justify-content:space-between;gap:1.5rem;padding:.72rem 0;border-bottom:1px solid var(--paper-dark)} .facts .row:last-child{border-bottom:none} .facts dt{color:var(--ink-muted);font-size:15px} .facts dd{font-weight:700;text-align:right;font-size:15px} .facts dd em{font-style:normal;font-family:var(--display);font-size:22px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* ── CALLOUTS ────────────────────────────────────────────────── */ .note{border-radius:var(--radius);padding:1.15rem 1.4rem;margin:1.7rem 0;font-size:15.5px;line-height:1.6;border:1px solid} .note .nh{font-weight:700;display:block;margin-bottom:.3rem;font-size:14px;font-family:var(--display);letter-spacing:-.01em} .note p:last-child{margin-bottom:0} .note-info{background:var(--accent-faint);border-color:var(--accent-light);color:#1e3361} .note-info .nh{color:var(--accent)} .note-warn{background:var(--amber-light);border-color:var(--amber-br);color:#5c3a06} .note-warn .nh{color:var(--amber)} .note-tip{background:var(--green-light);border-color:var(--green-br);color:#0f5026} .note-tip .nh{color:var(--green)} /* ── WORKED EXAMPLE ──────────────────────────────────────────── */ .example{background:#0c1222;color:#e8edf7;border-radius:var(--radius);padding:1.7rem 1.85rem;margin:2.1rem 0;font-size:15.5px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden} .example::after{content:'';position:absolute;top:-40%;right:-10%;width:55%;height:160%;background:radial-gradient(circle,rgba(79,70,229,.28),transparent 65%);pointer-events:none} .example .eh{font-family:var(--display);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#9db4f0;margin-bottom:1.1rem;position:relative} .example .calc{font-family:var(--sans);position:relative} .example .calc .ln{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.08)} .example .calc .ln:last-child{border-bottom:none} .example .calc .ln.total{border-top:2px solid rgba(255,255,255,.22);border-bottom:none;margin-top:.4rem;padding-top:.75rem;font-weight:700;font-size:18px;font-family:var(--display)} .example .calc .v{font-variant-numeric:tabular-nums;white-space:nowrap} .example .calc .v.hl{color:#7ee6a8;font-weight:700} /* ── TABLES ──────────────────────────────────────────────────── */ .t-scroll{overflow-x:auto;margin:1.7rem 0;border-radius:var(--radius);box-shadow:var(--shadow)} table.gt{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border:1px solid var(--paper-darker);border-radius:var(--radius);overflow:hidden} table.gt th{background:var(--accent);color:#fff;text-align:left;padding:12px 16px;font-weight:600;font-size:13px;font-family:var(--display);letter-spacing:.01em} table.gt td{padding:12px 16px;border-top:1px solid var(--paper-dark);vertical-align:top} table.gt tr:nth-child(even) td{background:#faf9f5} /* ── PULL STAT ───────────────────────────────────────────────── */ .bigstat{text-align:center;margin:2.6rem 0;padding:1.7rem 0;border-top:1px solid var(--paper-darker);border-bottom:1px solid var(--paper-darker)} .bigstat .n{font-family:var(--display);font-weight:700;font-size:clamp(48px,8vw,72px);line-height:1;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .bigstat .l{font-size:15.5px;color:var(--ink-muted);margin-top:.6rem;max-width:500px;margin-left:auto;margin-right:auto} /* ── FAQ (native
, no JS) ───────────────────────────── */ .faq{margin:1.6rem 0} .faq details{border-bottom:1px solid var(--paper-darker);padding:.2rem 0} .faq summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;font-weight:600;font-size:17.5px;position:relative;color:var(--ink);font-family:var(--display);letter-spacing:-.015em;transition:color .15s} .faq summary:hover{color:var(--accent)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';position:absolute;right:.3rem;top:.9rem;font-size:24px;font-weight:400;color:var(--accent-mid);transition:transform .2s} .faq details[open] summary::after{content:'–'} .faq .fa{padding:0 0 1.2rem;color:var(--ink-muted);font-size:16px} .faq .fa p:last-child{margin-bottom:0} /* ── CTA BLOCK ───────────────────────────────────────────────── */ .cta{background:var(--grad);border-radius:var(--radius-lg);padding:2.75rem 2rem;text-align:center;color:#fff;margin:3rem 0;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(37,99,235,.30)} .cta::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 82% 8%,rgba(255,255,255,.18) 0%,transparent 45%),radial-gradient(circle at 10% 100%,rgba(255,255,255,.10) 0%,transparent 40%);pointer-events:none} .cta h3{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,36px);line-height:1.12;letter-spacing:-.025em;margin-bottom:.65rem;position:relative} .cta p{color:rgba(255,255,255,.85);max-width:500px;margin:0 auto 1.6rem;position:relative;font-size:16.5px} .cta .btn-primary{background:#fff;color:var(--accent);position:relative;box-shadow:0 8px 24px rgba(0,0,0,.18)} .cta .btn-primary:hover{background:#fff;transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.28)} .cta .sub{font-size:13px;color:rgba(255,255,255,.7);margin-top:1.1rem;position:relative} /* ── RELATED ─────────────────────────────────────────────────── */ .related{margin:3.2rem 0 1rem} .related h2{font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:-.025em;margin-bottom:1.3rem} .rel-grid{display:grid;grid-template-columns:1fr;gap:1rem} @media(min-width:640px){.rel-grid{grid-template-columns:1fr 1fr}} .rel-card{display:block;background:#fff;border:1px solid var(--paper-darker);border-radius:var(--radius);padding:1.35rem 1.5rem;transition:transform .18s,box-shadow .18s,border-color .18s} .rel-card:hover{border-color:var(--accent-light);box-shadow:var(--shadow-lg);transform:translateY(-3px);text-decoration:none} .rel-card .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-mid);margin-bottom:.45rem;font-family:var(--display)} .rel-card .t{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);line-height:1.18;margin-bottom:.35rem;letter-spacing:-.02em} .rel-card .d{font-size:14px;color:var(--ink-muted)} /* ── DISCLAIMER + FOOTER ─────────────────────────────────────── */ .disclaimer{font-size:13px;color:var(--ink-faint);border-top:1px solid var(--paper-darker);padding-top:1.5rem;margin-top:2.5rem;line-height:1.6} .gfoot{background:#0c0d10;padding:3rem 1.75rem;margin-top:3rem} .gfoot-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem} .gfoot-logo{font-family:var(--sans);font-weight:600;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:8px;font-size:18px} .gfoot-logo strong{font-weight:800;color:rgba(255,255,255,.9)} .gfoot-links{display:flex;gap:1.5rem;flex-wrap:wrap} .gfoot-links a{font-size:13px;color:rgba(255,255,255,.4);font-weight:500} .gfoot-links a:hover{color:rgba(255,255,255,.8);text-decoration:none} .gfoot-copy{font-size:11px;color:rgba(255,255,255,.25);line-height:1.7;text-align:center;width:100%} /* ── HUB (guides index) ──────────────────────────────────────── */ .hub-hero{text-align:center;padding:3.5rem 0 2rem} .hub-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,6.6vw,62px);line-height:1.03;letter-spacing:-.035em;margin-bottom:1.1rem} .hub-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hub-hero p{font-size:19.5px;color:var(--ink-muted);font-weight:400;max-width:580px;margin:0 auto} .hub-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:2.75rem 0} @media(min-width:768px){.hub-grid{grid-template-columns:1fr 1fr}} .hub-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--paper-darker);border-radius:var(--radius);padding:1.85rem;transition:transform .18s,box-shadow .18s,border-color .18s} .hub-card:hover{border-color:var(--accent-light);box-shadow:var(--shadow-lg);transform:translateY(-4px);text-decoration:none} .hub-card .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-mid);margin-bottom:.65rem;font-family:var(--display)} .hub-card .t{font-family:var(--display);font-weight:700;font-size:25px;color:var(--ink);line-height:1.12;margin-bottom:.55rem;letter-spacing:-.025em} .hub-card .d{font-size:15px;color:var(--ink-muted);flex:1} .hub-card .go{font-size:14px;font-weight:700;color:var(--accent);margin-top:1.1rem;font-family:var(--display)}