/* ========================================================================== mQuickCalc — Shared Design System v3 (2026 rebrand) One CSS for the whole matrix (mquickcalc.com / finance. / health.), theme-switchable via [data-site]. All calculator pages share this file. ========================================================================== */ /* ---------- Inter (self-hosted) ---------- Served from our own origin rather than fonts.googleapis.com: loading it from Google transmits the visitor's IP to a third party, which German courts have ruled is a GDPR breach. This is the variable font, so one file per subset covers weights 100-900. latin covers English and most European text; latin-ext covers the remaining Latin ranges. */ @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(/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:100 900;font-display:swap; src:url(/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} /* ---------- Design Tokens ---------- */ :root{ --container-max:1160px; --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace; --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px; --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px; --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px; --shadow-xs:0 1px 2px rgba(15,23,42,.05); --shadow-sm:0 1px 3px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.05); --shadow-md:0 8px 24px -6px rgba(15,23,42,.12); --shadow-lg:0 24px 56px -16px rgba(15,23,42,.18); --fs-xs:12px;--fs-sm:13.5px;--fs-base:15.5px;--fs-lg:17.5px;--fs-xl:20px; --fs-2xl:25px;--fs-3xl:33px;--fs-4xl:44px;--fs-5xl:56px; --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--fw-black:900; /* brand palette — overridden per site */ --brand:#2563eb;--brand-ink:#1d4ed8;--brand-600:#2563eb;--brand-700:#1d4ed8; --brand-bg:#eff6ff;--brand-pill:#dbeafe;--brand-grad-start:#2563eb;--brand-grad-end:#1e40af; /* neutrals */ --bg:#ffffff;--bg-soft:#f8fafc;--bg-muted:#eef2f7; --ink:#0b1220;--ink-2:#1e293b;--muted:#5b6b82;--line:#e5eaf1;--line-strong:#cbd5e1; --ok:#16a34a;--ok-bg:#f0fdf4;--warn:#d97706;--warn-bg:#fffbeb;--danger:#dc2626;--danger-bg:#fef2f2; } /* ---------- Site Themes (matrix identity) ---------- */ [data-site="main"]{ --brand:#4f46e5;--brand-ink:#4338ca;--brand-bg:#eef2ff;--brand-pill:#e0e7ff; --brand-grad-start:#4f46e5;--brand-grad-end:#7c3aed; } [data-site="finance"]{ --brand:#059669;--brand-ink:#047857;--brand-bg:#ecfdf5;--brand-pill:#d1fae5; --brand-grad-start:#059669;--brand-grad-end:#064e3b; } [data-site="health"]{ --brand:#0d9488;--brand-ink:#0f766e;--brand-bg:#f0fdfa;--brand-pill:#ccfbf1; --brand-grad-start:#0d9488;--brand-grad-end:#115e59; } /* ---------- Reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font-sans);color:var(--ink);background:var(--bg);line-height:1.6;font-size:var(--fs-base);-webkit-font-smoothing:antialiased} a{color:var(--brand-ink);text-decoration:none;transition:color .15s} a:hover{text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--container-max);margin:0 auto;padding:0 20px} /* ---------- Header ---------- */ .site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)} .header-inner{display:flex;align-items:center;gap:18px;height:68px;max-width:var(--container-max);margin:0 auto;padding:0 20px} .brand{display:flex;align-items:center;gap:9px;font-weight:var(--fw-extrabold);font-size:21px;color:var(--ink);letter-spacing:-.02em;white-space:nowrap} .brand svg{flex-shrink:0} .brand-mark{display:inline-flex;line-height:0;flex-shrink:0} .brand-mark svg{display:block;border-radius:6px;box-shadow:var(--shadow-xs)} .brand b{color:var(--brand)} .brand:hover{text-decoration:none;opacity:.92} .brand .site-tag{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--brand-bg);color:var(--brand-ink);padding:3px 8px;border-radius:var(--radius-pill);margin-left:2px;border:1px solid var(--brand-pill)} .site-header nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap} .site-header nav a{color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:8px 13px;border-radius:var(--radius-md);transition:.15s} .site-header nav a:hover{color:var(--ink);background:var(--bg-muted)} .site-header nav a.active{color:var(--brand-ink);background:var(--brand-bg)} /* ---------- Breadcrumb ---------- */ .breadcrumb{font-size:var(--fs-sm);color:var(--muted);padding:18px 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--brand-ink)} .breadcrumb .sep{color:var(--line-strong);font-size:11px} .breadcrumb .current{color:var(--ink);font-weight:var(--fw-semibold)} /* ---------- Hero (new v3) ---------- */ .hero{position:relative;overflow:hidden;padding:72px 0 56px;text-align:center;background:linear-gradient(180deg,var(--brand-bg) 0%,#fff 100%);border-bottom:1px solid var(--line)} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--brand-pill) 1.4px,transparent 1.4px);background-size:26px 26px;opacity:.55;mask-image:linear-gradient(180deg,#000,transparent 72%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 72%)} .hero>*{position:relative} .hero h1{font-size:clamp(34px,5.4vw,58px);line-height:1.06;letter-spacing:-.03em;font-weight:var(--fw-black);color:var(--ink);margin:0 auto;max-width:900px} .hero h1 .accent{color:var(--brand)} .hero p.sub{color:var(--muted);max-width:660px;margin:18px auto 0;font-size:var(--fs-lg);line-height:1.65} .hero .kicker{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.13em;text-transform:uppercase;color:var(--brand-ink);border:1px solid var(--brand-pill);background:rgba(255,255,255,.8);padding:6px 16px;border-radius:var(--radius-pill);margin-bottom:22px;box-shadow:var(--shadow-xs)} /* search */ .hero-search{max-width:640px;margin:30px auto 0;position:relative} .hero-search input{width:100%;padding:17px 52px 17px 22px;font-size:var(--fs-lg);font-family:var(--font-sans);border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);background:#fff;color:var(--ink);outline:none;box-shadow:var(--shadow-md);transition:border-color .15s,box-shadow .15s} .hero-search input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-pill),var(--shadow-md)} .hero-search .s-ico{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none} .search-empty{display:none;margin:14px auto 0;max-width:480px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 18px;color:var(--muted);font-size:var(--fs-sm)} /* chips */ .hero-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px} .hero-chips a,.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:var(--radius-pill);transition:.15s} .hero-chips a:hover{background:var(--brand-bg);border-color:var(--brand);color:var(--brand-ink)} /* stats */ .hero-stats{display:flex;gap:34px;justify-content:center;margin-top:32px;flex-wrap:wrap} .hero-stat{display:flex;flex-direction:column;align-items:center} .hero-stat .num{font-size:var(--fs-3xl);font-weight:var(--fw-black);color:var(--brand);letter-spacing:-.02em;line-height:1} .hero-stat .lbl{font-size:var(--fs-sm);color:var(--muted);margin-top:4px} /* trust badges row */ .trust-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px} .trust-row .trust{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;color:var(--muted);background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:var(--radius-pill)} .trust-row .trust svg{color:var(--brand)} .trust-label{width:100%;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#94a3b8;font-weight:700;margin-bottom:2px} /* ---------- Brand bar under hero ---------- */ .brandbar{border-bottom:1px solid var(--line);background:#fff} .brandbar-inner{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:14px 0;font-size:var(--fs-sm);color:var(--muted)} .brandbar b{color:var(--ink)} /* ---------- Sections ---------- */ section.block{padding:56px 0} section.block.alt{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:12px} .section-head h2{font-size:clamp(21px,2.8vw,28px);font-weight:var(--fw-extrabold);letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:10px} .section-head h2 .h-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);background:var(--brand-bg);flex-shrink:0} .section-head .view-all{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--brand-ink);white-space:nowrap} .section-note{color:var(--muted);font-size:var(--fs-sm);margin-top:-12px;margin-bottom:20px} /* section sticky pills nav */ .cat-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:30px auto 0;max-width:860px} .cat-pills a{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--muted);background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:var(--radius-pill);transition:.15s} .cat-pills a:hover{color:var(--brand-ink);border-color:var(--brand);background:var(--brand-bg)} /* ---------- Tool Grid & Cards ---------- */ .tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px} .tool-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-xs);transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s,border-color .18s;position:relative;overflow:hidden} .tool-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),transparent);opacity:0;transition:opacity .18s} .tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand)} .tool-card:hover::after{opacity:1} .tool-card .icon-row{display:flex;align-items:center;gap:12px} .tool-card .emoji{font-size:21px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--brand-bg);border:1px solid var(--brand-pill);border-radius:11px;flex-shrink:0} /* Inline line icons swapped in for emoji by site.js — they inherit currentColor so they pick up each site's theme automatically. */ .ico{display:block} .tool-card .emoji .ico,.feat-card .f-emoji .ico{width:22px;height:22px;color:var(--brand)} h1 .ico,h2 .ico,h3 .ico{width:22px;height:22px;vertical-align:-4px;margin-right:3px;display:inline-block;color:var(--brand)} .tool-card .tc-title{font-weight:var(--fw-bold);color:var(--ink);font-size:var(--fs-xl);letter-spacing:-.01em;line-height:1.25} .tool-card .tc-desc{color:var(--muted);font-size:var(--fs-sm);line-height:1.5;flex:1} .tool-card .tc-link{font-size:var(--fs-xs);font-weight:700;color:var(--brand);letter-spacing:.02em;opacity:0;transform:translateY(2px);transition:.18s} .tool-card:hover .tc-link{opacity:1;transform:none} /* ---------- Feature trio ---------- */ .trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px} .feature{border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;background:#fff;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-xs)} .feature .f-ico{width:46px;height:46px;border-radius:13px;background:var(--brand-bg);color:var(--brand);display:flex;align-items:center;justify-content:center} .feature h3{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.01em} .feature p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6} /* ---------- Featured cards (horizontal) ---------- */ .featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .feat-card{border-radius:var(--radius-xl);padding:28px;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-md);transition:transform .18s} .feat-card:hover{transform:translateY(-4px)} .feat-card .f-emoji{font-size:30px;width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);border-radius:14px} .feat-card h3{font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-.01em} .feat-card p{font-size:var(--fs-sm);opacity:.92;line-height:1.55;flex:1} .feat-card .f-go{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;color:#fff} .feat-card.g1{background:linear-gradient(135deg,#2563eb,#1e40af)} .feat-card.g2{background:linear-gradient(135deg,#0ea5e9,#1d4ed8)} .feat-card.g3{background:linear-gradient(135deg,#7c3aed,#4c1d95)} .feat-card.g4{background:linear-gradient(135deg,#0d9488,#115e59)} [data-site="finance"] .feat-card.g1{background:linear-gradient(135deg,#059669,#065f46)} [data-site="finance"] .feat-card.g2{background:linear-gradient(135deg,#0d9488,#115e59)} [data-site="finance"] .feat-card.g3{background:linear-gradient(135deg,#2563eb,#1e40af)} [data-site="health"] .feat-card.g1{background:linear-gradient(135deg,#0d9488,#134e4a)} [data-site="health"] .feat-card.g2{background:linear-gradient(135deg,#059669,#065f46)} [data-site="health"] .feat-card.g3{background:linear-gradient(135deg,#2563eb,#1e40af)} /* ---------- Matrix CTA band ---------- */ .matrix{background:var(--ink);border-radius:var(--radius-xl);padding:40px;color:#fff;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:22px;align-items:center} .matrix h2{font-size:clamp(20px,2.4vw,26px);font-weight:var(--fw-extrabold);letter-spacing:-.02em;margin-bottom:6px} .matrix p{color:#94a3b8;font-size:var(--fs-sm);line-height:1.55} .matrix .m-go{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:16px;border-radius:var(--radius-lg);transition:.15s;color:#fff} .matrix .m-go:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);color:#fff} .matrix .m-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .matrix .m-go b{display:block;font-size:var(--fs-base)} .matrix .m-go span{font-size:var(--fs-xs);color:#94a3b8} .matrix .m-med .m-ico,.matrix .m-mai .m-ico{background:#4f46e5} .matrix .m-fin .m-ico{background:#059669} .matrix .m-hea .m-ico{background:#0d9488} [data-site="finance"] .matrix{grid-template-columns:1.2fr repeat(3,1fr)} @media(max-width:980px){.matrix{grid-template-columns:1fr 1fr 1fr}.matrix>div:first-child{grid-column:1/-1}} /* ---------- Callout / disclaimer ---------- */ .callout{background:var(--brand-bg);border-left:4px solid var(--brand);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:18px 22px;margin:24px 0} .callout.warn{background:var(--warn-bg);border-left-color:var(--warn)} .callout.danger{background:var(--danger-bg);border-left-color:var(--danger)} .callout .t{font-weight:var(--fw-bold);margin-bottom:4px;color:var(--ink);display:flex;align-items:center;gap:8px} .callout p{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6} /* ---------- Page (tool pages v2/v3) ---------- */ .page{padding:26px 0 56px} h1.page-title{font-size:clamp(28px,4.2vw,40px);letter-spacing:-.02em;line-height:1.12;font-weight:var(--fw-black);color:var(--ink)} .page-hero-emoji{font-size:40px;line-height:1;margin-bottom:12px} .lede{color:var(--muted);margin:12px 0 22px;max-width:740px;font-size:var(--fs-lg);line-height:1.65} .upd{font-size:var(--fs-sm);color:var(--muted);margin:-8px 0 22px} /* Calc card (v2 tool page body) */ .calc-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:26px;max-width:760px;margin:14px 0 22px} .calc-card label,.calc-card .f-label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--muted);margin:14px 0 8px} .calc-card label:first-of-type,.calc-card .f-label:first-child{margin-top:0} .input,.calc-card select,.calc-card input[type="text"],.calc-card input[type="number"]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-md);font-size:var(--fs-base);color:var(--ink);background:var(--bg);font-family:var(--font-sans);transition:border-color .15s,box-shadow .15s} .input:focus,.calc-card select:focus,.calc-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;border:none;border-radius:var(--radius-md);padding:12px 24px;font-size:var(--fs-base);font-weight:var(--fw-semibold);cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;box-shadow:var(--shadow-xs)} .btn:hover{background:var(--brand-ink);transform:translateY(-1px);box-shadow:var(--shadow-sm);color:#fff} .btn:active{transform:none} .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none} .btn.ghost:hover{background:var(--bg-muted);border-color:var(--line-strong);color:var(--ink)} /* Result */ .result{margin-top:22px;background:var(--bg-muted);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;display:none} .result.show{display:block;animation:fadeIn .25s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .result .big{font-size:clamp(32px,5vw,46px);font-weight:var(--fw-black);color:var(--brand);letter-spacing:-.02em;line-height:1.1;margin-bottom:8px} .result .status-tag{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:4px 12px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.06em;margin-left:8px;vertical-align:middle} .result .status-tag.ok{background:var(--ok-bg);color:var(--ok)} .result .status-tag.warn{background:var(--warn-bg);color:var(--warn)} .result .status-tag.danger{background:var(--danger-bg);color:var(--danger)} .result .status-tag.info{background:var(--brand-bg);color:var(--brand-ink)} .result .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:16px} .result .cell{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 16px} .result .cell .lbl{font-size:var(--fs-xs);color:var(--muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.05em} .result .cell .val{font-size:var(--fs-xl);font-weight:var(--fw-bold);margin-top:2px;color:var(--ink)} .result .cell .sub{font-size:var(--fs-sm);color:var(--muted);margin-top:2px} /* Result meter — shows where an answer sits inside a scale. The page declares min/max/value plus labelled bands as data attributes; site.js renders it. */ .meter{margin-top:18px} .meter-track{position:relative;display:flex;height:10px;border-radius:var(--radius-pill);overflow:hidden;background:var(--bg-muted)} .meter-seg{height:100%} .meter-seg.ok{background:#86efac} .meter-seg.info{background:#bfdbfe} .meter-seg.warn{background:#fcd34d} .meter-seg.danger{background:#fca5a5} .meter-pin{position:absolute;top:-4px;width:3px;height:18px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px #fff;transform:translateX(-50%);transition:left .25s ease} .meter-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:var(--fs-xs);color:var(--muted);align-items:center} .meter-legend span{display:inline-flex;align-items:center;gap:6px} .meter-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;flex-shrink:0} .meter-legend i.ok{background:#86efac} .meter-legend i.info{background:#bfdbfe} .meter-legend i.warn{background:#fcd34d} .meter-legend i.danger{background:#fca5a5} .meter-legend b{color:var(--ink);font-weight:600} /* Prose */ .prose{max-width:760px;margin-top:24px} .prose h3{font-size:var(--fs-xl);font-weight:var(--fw-bold);margin:24px 0 12px;letter-spacing:-.01em;color:var(--ink)} .prose h3:first-child{margin-top:0} .prose p{color:var(--ink-2);line-height:1.75;margin-bottom:16px} .prose ul,.prose ol{margin:0 0 16px 20px;color:var(--ink-2)} .prose li{margin-bottom:8px} .prose strong{color:var(--ink)} .prose code{background:var(--bg-muted);padding:2px 8px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.9em;color:var(--brand-ink)} .ref-table{width:100%;border-collapse:collapse;margin:12px 0 22px;font-size:var(--fs-base);background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line)} .ref-table th{background:var(--brand-bg);color:var(--brand-ink);font-weight:var(--fw-bold);font-size:var(--fs-sm);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)} .ref-table td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink-2)} .ref-table tr:last-child td{border-bottom:none} .ref-table tr:nth-child(even) td{background:var(--bg-soft)} .related-section{padding:40px 0 48px;border-top:1px solid var(--line);margin-top:32px} .related-section h2{font-size:clamp(18px,2.4vw,22px);font-weight:var(--fw-extrabold);margin-bottom:20px;letter-spacing:-.01em} /* ---------- Footer ---------- */ .site-footer{background:#0b1220;border-top:none;margin-top:0;padding:56px 0 30px;color:#94a3b8} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px} .footer-brand .footer-logo{font-size:22px;font-weight:var(--fw-extrabold);color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:9px} .footer-brand .footer-logo b{color:var(--brand)} .footer-brand p{color:#94a3b8;font-size:var(--fs-sm);line-height:1.65;max-width:300px} .footer-matrix{display:flex;flex-direction:column;gap:8px;margin-top:16px} .footer-matrix a{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:600;color:#cbd5e1;padding:7px 12px;border:1px solid #1e293b;border-radius:var(--radius-md);transition:.15s;background:rgba(255,255,255,.02)} .footer-matrix a:hover{background:#1e293b;color:#fff} .footer-matrix .dot{width:8px;height:8px;border-radius:50%} .footer-col h4{color:#e2e8f0;font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px} .footer-col ul{list-style:none} .footer-col li{margin-bottom:9px} .footer-col a{color:#94a3b8;font-size:var(--fs-sm)} .footer-col a:hover{color:#fff} .copyright{margin-top:36px;padding-top:22px;border-top:1px solid #1e293b;font-size:var(--fs-xs);color:#64748b;text-align:center;line-height:1.7} /* ---------- Cookie Bar ---------- */ .cookiebar{position:fixed;left:12px;right:12px;bottom:12px;max-width:600px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:16px 20px;display:none;z-index:1000;font-size:var(--fs-sm)} .cookiebar.show{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .cookiebar p{flex:1;min-width:220px;margin:0;color:var(--ink-2)} .cookiebar a{color:var(--brand-ink);text-decoration:underline} /* ---------- Misc ---------- */ .note{font-size:var(--fs-sm);color:var(--muted)} .dim{color:var(--muted);font-size:var(--fs-sm)} .center{text-align:center} /* ========================================================================== LEGACY v1 tool pages — harmonize into the brand (body.legacy) These pages ship their own inline