/* Calcatrice — "The Ledger" design system.
   serif = authority (Newsreader) · sans = ease (Hanken Grotesk) · mono = data (IBM Plex Mono)
   emerald = money · aubergine = brand jewel · pine-green = structure · cool paper base. */
:root{
  --paper:#F4F6F1; --card:#FFFFFF; --card2:#FBFCF9; --sunk:#EEF1EA;
  --ink:#16241B; --ink-soft:#4C5A50; --ink-faint:#7B887E;
  --line:#DEE5DA; --line2:#C4D0C5; --line3:#A7B7AA;
  --green:#1C4B38; --green-deep:#123526; --green-soft:#E4EDE5;
  --emer:#0E7A52; --emer-soft:#DDEEE4;
  --plum:#5E2A4D; --plum-deep:#46203A; --plum-soft:#ECE1EA;
  --shadow:0 24px 46px -30px rgba(18,45,32,.28);
  --shadow-sm:0 10px 24px -18px rgba(18,45,32,.22);
  --serif:"Newsreader",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  background-image:
    radial-gradient(1200px 520px at 50% -12%, #E7EFE6 0%, transparent 68%),
    repeating-linear-gradient(0deg, transparent 0 27px, #0d3b2708 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, #0d3b2706 27px 28px);
  background-attachment:fixed;
}
.wrap,.container{width:100%;max-width:1060px;margin:0 auto;padding:0 22px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
a{color:var(--green)}
::selection{background:var(--green-soft);color:var(--green-deep)}

.rise{opacity:0;transform:translateY(13px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.24s}.d4{animation-delay:.34s}.d5{animation-delay:.46s}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}}

/* masthead */
.masthead{border-bottom:1.5px solid var(--green);margin-top:18px}
.mast-top{display:flex;align-items:center;gap:14px;padding:6px 0 12px}
.crest{width:58px;height:58px;flex:0 0 auto;object-fit:contain;display:block}
.mast-word{font-family:var(--serif);font-weight:600;font-size:2.05rem;letter-spacing:-.015em;line-height:1;color:var(--green-deep);text-decoration:none;font-variation-settings:"opsz" 40}
.mast-word .pt,.foot .fw .pt{color:var(--plum)}
.mast-meta{margin-left:auto;text-align:right;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);line-height:1.8}
.mast-strip{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:8px 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.mast-strip .seg{color:var(--plum)}
.mast-strip nav{display:flex;flex-wrap:wrap}
.mast-strip nav a{color:var(--ink-soft);text-decoration:none;margin-left:18px}
.mast-strip nav a:hover{color:var(--green)}
@media(max-width:640px){.mast-meta{display:none}.mast-strip{font-size:.58rem;letter-spacing:.1em}.mast-strip nav a{margin-left:11px}}

.chapter{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--plum);margin:38px 0 12px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,5.4vw,3.7rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 14px;max-width:17ch;color:var(--green-deep);font-variation-settings:"opsz" 72}
h1 em{font-style:italic;color:var(--plum)}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:56ch;margin:0}

/* home hero */
.home-hero{text-align:center;padding:44px 0 26px}
.home-hero h1{margin:0 auto 14px;max-width:20ch}
.home-hero .lede{margin:0 auto}

/* calculator + ledger */
.calc{display:grid;grid-template-columns:1fr 1.02fr;gap:22px;margin:26px 0 8px;align-items:start}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line2);border-radius:6px;box-shadow:var(--shadow);position:relative}
.card::before{content:"";position:absolute;inset:5px;border:1px solid var(--line);border-radius:3px;pointer-events:none}
.card-in{padding:22px 24px;position:relative}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:9px;margin:0 0 16px}
.eyebrow .no{color:var(--green)}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

.field{margin-bottom:14px}
.field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:5px;color:var(--ink)}
.field .help{font-size:.78rem;color:var(--ink-faint);margin-top:4px;font-family:var(--sans)}
.field input,.field select{width:100%;font-family:var(--mono);font-size:.95rem;letter-spacing:-.01em;color:var(--ink);background:var(--sunk);border:1px solid var(--line2);border-radius:3px;padding:10px 12px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.field.money input{padding-left:24px}
.field.money{position:relative}
.field.money::before{content:"$";position:absolute;left:11px;top:33px;font-family:var(--mono);color:var(--emer)}
.field input:focus,.field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}

.ledger{background:var(--card);position:relative;overflow:hidden}
.result{position:sticky;top:16px}
.ledger-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1.5px solid var(--green);padding-bottom:12px}
.result-headline{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.result-total{font-family:var(--mono);font-weight:600;font-size:clamp(2.5rem,6.6vw,3.5rem);line-height:.9;color:var(--emer);letter-spacing:-.04em;margin-top:4px}
.result-range{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);margin:8px 0 0}
.result-range .num{color:var(--emer);font-weight:700}
.breakdown{list-style:none;margin:14px 0 0;padding:0}
.breakdown li{display:flex;align-items:baseline;gap:8px;padding:6px 0;font-family:var(--mono);font-size:.84rem;letter-spacing:-.01em;color:var(--ink-soft)}
.breakdown .dot{flex:1;border-bottom:1px dotted var(--line2);transform:translateY(-4px)}
.breakdown .amt{color:var(--ink);font-variant-numeric:tabular-nums}
.breakdown li.grand{margin-top:6px;border-top:3px double var(--green);padding-top:10px;color:var(--ink);font-weight:700}
.breakdown li.grand .amt{color:var(--emer);font-weight:700}
.seal{position:absolute;top:16px;right:16px;width:88px;height:88px;transform:rotate(-10deg);opacity:.9;pointer-events:none}
@media(max-width:860px){.seal{width:72px;height:72px;top:12px;right:12px}}

.acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{font-family:var(--sans);font-weight:700;font-size:.94rem;padding:11px 18px;border-radius:3px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:var(--plum);color:#fff;border-color:var(--plum)}
.btn-primary:hover{background:var(--plum-deep);border-color:var(--plum-deep)}
.btn-ghost{background:transparent;color:var(--green-deep);border-color:var(--line3)}
.btn-ghost:hover{border-color:var(--green);background:var(--green-soft)}

.section-rule{display:flex;align-items:center;gap:16px;margin:46px 0 6px}
.section-rule h2{font-family:var(--serif);font-weight:600;font-size:1.6rem;letter-spacing:-.015em;margin:0;white-space:nowrap;color:var(--green-deep);font-variation-settings:"opsz" 44}
.section-rule::after{content:"";flex:1;height:1.5px;background:var(--green);opacity:.35}
.disclosure{font-size:.82rem;color:var(--ink-faint);border-left:2px solid var(--plum);padding:4px 0 4px 12px;margin:12px 0 16px;font-style:italic;font-family:var(--serif)}
.recs-note{font-family:var(--mono);font-size:.82rem;color:var(--green-deep);background:var(--green-soft);border-radius:3px;padding:9px 14px;margin:0 0 16px}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.entry{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:15px 16px 16px;box-shadow:var(--shadow-sm);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.entry:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:var(--shadow)}
.entry .cat{font-family:var(--mono);font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;color:var(--emer)}
.entry .nm{font-family:var(--serif);font-weight:600;font-size:1.12rem;margin:3px 0 3px;display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--green-deep);font-variation-settings:"opsz" 30}
.entry .nm .arw{font-family:var(--sans);color:var(--plum)}
.entry .bl{font-size:.84rem;color:var(--ink-faint);line-height:1.42}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:16px 0}
.tile{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:18px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .16s ease,border-color .16s ease}
.tile:hover{transform:translateY(-2px);border-color:var(--green)}
.tile .rn{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--plum)}
.tile .tile-title{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin:6px 0 4px;color:var(--green-deep);font-variation-settings:"opsz" 40}
.tile .tile-sub{font-size:.86rem;color:var(--ink-soft)}
.tile .big{position:absolute;right:-4px;bottom:-20px;font-family:var(--serif);font-size:4.6rem;color:var(--line);font-weight:600;line-height:1;font-variation-settings:"opsz" 72}
.tile.soon{opacity:.6;pointer-events:none}
.tile.soon .tile-sub::after{content:" · coming soon"}

.prose{max-width:68ch}
.prose ul{padding-left:1.1rem;margin:10px 0 0}
.prose li{margin:7px 0;color:var(--ink-soft)}
details.faq{border-bottom:1px solid var(--line);padding:15px 0}
details.faq summary{font-family:var(--serif);font-weight:600;font-size:1.12rem;cursor:pointer;list-style:none;position:relative;padding-right:28px;color:var(--green-deep);font-variation-settings:"opsz" 30}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:0;top:-2px;color:var(--plum);font-family:var(--mono);font-size:1.3rem}
details.faq[open] summary::after{content:"–"}
details.faq .faq-a{color:var(--ink-soft);margin:8px 0 0;font-size:.98rem}
details.faq .faq-a a{color:var(--green)}

.foot{border-top:1.5px solid var(--green);margin-top:52px;padding:26px 0 46px;font-size:.86rem;color:var(--ink-faint)}
.foot-cols{display:flex;gap:44px;flex-wrap:wrap;margin-bottom:22px}
.foot-cols h4{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft);margin:0 0 9px}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin:5px 0}
.foot-cols a{color:var(--ink-faint);text-decoration:none}
.foot-cols a:hover{color:var(--green)}
.foot .fw{font-family:var(--serif);font-weight:600;color:var(--green-deep);font-size:1.1rem}
.foot .tag{font-style:italic;color:var(--ink-soft)}

/* consent banner */
.consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:540px;margin:0 auto;background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:14px 16px;font-size:.86rem;color:var(--ink-soft);z-index:60;box-shadow:var(--shadow)}
.consent.hidden{display:none}
.consent-actions{display:flex;gap:8px;margin-top:10px}
.consent button{font-family:var(--sans);border:1.5px solid var(--line3);background:transparent;color:var(--ink);border-radius:6px;padding:7px 15px;font-weight:600;cursor:pointer}
.consent button.accept{background:var(--green);border-color:var(--green);color:#fff}