/* Shared vanilla-CSS design system for every page except the landing page (which keeps its own
   larger-scale inline styles) and the app (app.html keeps its Tailwind-based UI). Same brand tokens,
   same header/footer/buttons/cards/faq/table treatment, sized for normal reading pages. */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/bricolage-grotesque-800.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: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/dm-sans.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; }

:root { color-scheme: light; --deep:#1b1545; --card:#fff; --hl:#fff7d1; --head:rgba(251,250,255,.9); --link:#5b4bff; --ink:#1b1545; --indigo:#5b4bff; --sun:#ffd84a; --sun-d:#f4c60f; --mist:#efecfc; --paper:#fbfaff; --mute:#5d5886; --line:#ddd8f5; --r:20px; }
:root.dark { color-scheme: dark; --ink:#f1eefc; --paper:#110e2b; --mist:#1e1946; --line:#322b75; --mute:#aaa4d8; --card:#292260; --hl:#2c2566; --head:rgba(17,14,43,.9); --link:#a79dff; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font: 16px/1.6 "DM Sans", system-ui, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: "Bricolage Grotesque", "DM Sans", sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-top: 1.6em; }
h3 { font-size: 1.15rem; margin-top: 1.2em; }
p { margin: 0 0 1em; }
a { color: var(--link); }
a.plain { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { padding-left: 1.3em; }
li { margin: .4em 0; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.wrap { width: min(880px, 100% - 40px); margin-inline: auto; }
.wrap.wide { width: min(1100px, 100% - 40px); }
main { padding: 2.5rem 0 4rem; }
.lead { font-size: 1.1rem; color: var(--mute); }
.muted { color: var(--mute); }
.small { font-size: .9rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 700 1rem "DM Sans", sans-serif; text-decoration: none; padding: 14px 24px; border-radius: 999px; background: var(--sun); color: var(--deep); border: 0; cursor: pointer; transition: transform .15s, background .15s; }
.btn:hover { background: var(--sun-d); transform: scale(1.03); }
.btn:active { transform: scale(.97); }
.btn.alt { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.btn.alt:hover { background: var(--mist); }
.btn.primary { background: var(--indigo); color: #fff; }
.btn.primary:hover { background: #4a3ae0; }
.btn.block { display: flex; width: 100%; }
.btn.sm { padding: 10px 18px; font-size: .9rem; }
.btn[hidden] { display: none; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only.focusable:focus { position: fixed; top: 10px; left: 10px; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--deep); color: #fff; }

/* header / nav (same as the landing page) */
header.site { position: sticky; top: 0; z-index: 40; background: var(--head); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0); }
.nav { display: flex; align-items: center; gap: 20px; height: 64px; width: min(1100px, 100% - 40px); margin-inline: auto; }
.logo { display: flex; align-items: center; gap: 9px; font: 800 1.15rem "Bricolage Grotesque", sans-serif; text-decoration: none; letter-spacing: -.02em; color: var(--ink); }
.logo img { width: 30px; height: 30px; border-radius: 9px; }
.links { display: flex; gap: 4px; margin-left: auto; }
.links a { padding: 8px 12px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--ink); }
.links a:hover { background: var(--mist); }
.nav .btn { margin-left: 6px; }
.theme { margin-left: 6px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--mist); color: var(--ink); font-size: 1.05rem; cursor: pointer; transition: transform .15s; flex-shrink: 0; }
.theme:hover { transform: scale(1.08); }
.burger { display: none; margin-left: auto; background: var(--mist); border: 0; border-radius: 999px; width: 40px; height: 40px; font-size: 1.15rem; cursor: pointer; color: var(--ink); }
@media (max-width: 760px) {
  .links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--paper); padding: 10px 20px 20px; box-shadow: 0 20px 30px -20px rgba(27,21,69,.3); }
  .links.open { display: flex; }
  .nav > .btn { display: none; }
  .burger { display: block; margin-left: 0; }
  .theme { margin-left: auto; }
}

/* cards, forms, tables, faq -- used across calculators, templates, blog */
.box { background: var(--card); border-radius: var(--r); padding: 1.5rem; border: 1px solid var(--line); }
.box + .box { margin-top: 1.25rem; }
label.field-label { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); margin-bottom: 5px; }
input[type="text"], input[type="number"], select, textarea {
  width: 100%; font: 700 1.05rem "DM Sans", sans-serif; padding: 11px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--sun-d); outline: 0; }
select { font-weight: 600; font-size: .95rem; }
.hint { font-size: .8rem; color: var(--mute); margin-top: 4px; }

.cardgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.cardgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cardgrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--mist); border-radius: var(--r); padding: 20px; }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card.plain { background: var(--card); border: 1px solid var(--line); }
.calc-layout { display: grid; grid-template-columns: 2fr 3fr; gap: 16px; align-items: start; margin-top: 1.5rem; }
.cardgrid.cols-form2 { grid-template-columns: 3fr 2fr; margin-top: 0; }
@media (max-width: 760px) { .cardgrid, .cardgrid.cols-3, .cardgrid.cols-4, .cardgrid.cols-form2, .calc-layout { grid-template-columns: 1fr; } }

a.tool-card { display: block; text-decoration: none; padding: 20px; border-radius: var(--r); background: var(--mist); transition: background .15s, translate .2s; color: inherit; }
a.tool-card:hover { background: var(--sun); color: var(--deep); translate: 0 -3px; }
a.tool-card p { color: var(--mute); font-size: .92rem; margin: 6px 0 0; }
a.tool-card:hover p { color: var(--deep); }
a.tool-card h3 { margin: 0; font-size: 1.05rem; }

.tw { overflow-x: auto; margin: 1.25rem 0; border-radius: var(--r); border: 2px solid var(--ink); }
table { border-collapse: collapse; width: 100%; background: var(--card); font-size: .92rem; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { background: var(--deep); color: #fff; font-weight: 700; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.faq-list details { border-top: 2px solid var(--ink); padding: 18px 0; }
.faq-list details:last-child { border-bottom: 2px solid var(--ink); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 700 1.05rem "DM Sans", sans-serif; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { display: none; }
.faq-list summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); color: var(--deep); font-size: 1.2rem; transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin-top: 12px; color: var(--mute); }

.cta-box { border-radius: var(--r); padding: 1.5rem; text-align: center; }
.cta-box.sun { background: var(--sun); color: var(--deep); }
.cta-box.sun a.btn { background: var(--deep); color: #fff; }
.cta-box.sun a.btn:hover { background: #2d2570; }
.cta-box.deep { background: var(--deep); color: #fff; }
.cta-box.deep .muted, .cta-box.deep p { color: #c9c3f2; }
.cta-box.mist { background: var(--mist); }
.cta-box h2, .cta-box h3 { margin-top: 0; }
.cta-box p { margin-bottom: 1.1em; }

.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sw-indigo { background: var(--indigo); }
.sw-amber { background: #f59e0b; }
.sw-emerald { background: #10b981; }
.sw-rose { background: #f43f5e; }
.sw-slate { background: #94a3b8; }
.bar-indigo { background: var(--indigo); }
.bar-amber { background: #f59e0b; }
.bar-emerald { background: #10b981; }
.bar-rose { background: #f43f5e; }
.bar-slate { background: #94a3b8; }

.pagebar { height: 12px; border-radius: 99px; background: var(--line); overflow: hidden; display: flex; }
.pagebar > div { height: 100%; }
.progress { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: var(--indigo); transition: width .3s; }
.progress > i.warn { background: #f59e0b; }
.progress > i.over { background: #ef4444; }

.note { border-radius: 12px; padding: 12px 14px; font-size: .9rem; border: 1px solid var(--line); background: var(--mist); }
.note.warn { background: #fff7d1; border-color: #f4c60f; color: #4b4210; }
:root.dark .note.warn { background: #3a2f0a; border-color: #8a6f10; color: #ffe9a8; }

.breadcrumb { font-size: .85rem; color: var(--mute); margin-bottom: .5rem; }
.breadcrumb a { color: var(--mute); text-decoration: underline; text-underline-offset: 2px; }

footer.site { border-top: 1px solid var(--line); padding: 48px 0 calc(32px + env(safe-area-inset-bottom, 0)); color: var(--mute); font-size: .92rem; }
footer.site .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; width: min(1100px, 100% - 40px); margin-inline: auto; }
footer.site h3 { font-family: "DM Sans", sans-serif; font-size: .92rem; font-weight: 700; letter-spacing: normal; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
footer.site a { text-decoration: none; color: var(--mute); }
footer.site a:hover { color: var(--link); text-decoration: underline; }
footer.site .logo { color: var(--ink); margin-bottom: 10px; }
footer.site .copy { margin-top: 28px; font-size: .85rem; width: min(1100px, 100% - 40px); margin-inline: auto; }
@media (max-width: 760px) { footer.site .grid { grid-template-columns: 1fr; } }

/* Long-form article body (blog posts) */
.article { font-size: 1.05rem; line-height: 1.75; color: var(--mute); }
.article > * + * { margin-top: 1.1em; }
.article h2 { margin-top: 2.2em; margin-bottom: .3em; font-size: 1.5rem; color: var(--ink); scroll-margin-top: 90px; }
.article h3 { margin-top: 1.8em; margin-bottom: .3em; font-size: 1.2rem; color: var(--ink); scroll-margin-top: 90px; }
.article strong { font-weight: 700; color: var(--ink); }
.article a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.article ul { list-style: disc; padding-left: 1.4em; }
.article ol { list-style: decimal; padding-left: 1.4em; }
.article li { margin: .5em 0; }
.article li > ul, .article li > ol { margin-top: .5em; }
.article code { padding: .15em .4em; border-radius: 5px; background: var(--mist); font-size: .9em; font-family: ui-monospace, monospace; }
.article blockquote { border-left: 4px solid var(--indigo); padding-left: 1em; font-style: italic; color: var(--mute); margin: 1.1em 0; }
.article .table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); margin: 1.1em 0; }
.article table { width: 100%; text-align: left; font-size: .9rem; line-height: 1.4; }
.article thead { background: var(--mist); }
.article th, .article td { padding: 10px 14px; }
.article tbody tr { border-top: 1px solid var(--line); }
.article a.cta-btn { text-decoration: none; }
.article hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }