:root{
  --bg:      #FAFAF9;
  --surface: #FFFFFF;
  --ink:     #15171B;
  --ink-soft:#63676E;
  --accent:  #E2A400;
  --accent-deep:#8A5F00;
  --panel:   #15171B;
  --panel-2: #1E2126;
  --line:    #E5E4DF;
  --warn-wash:#FCEFD8;
  --radius:  6px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased
}
.num{font-family:"Space Grotesk",sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--accent-deep)}
a:hover{color:var(--ink)}

.page{max-width:640px;margin:0 auto;padding:28px 20px 64px}
.page-tool{max-width:600px}

@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){ .page > *{animation:none !important} }
.page-tool > *{animation:fadeUp .4s ease-out both}
.page-tool > *:nth-child(2){animation-delay:.03s}
.page-tool > *:nth-child(3){animation-delay:.06s}

.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px 18px;
  flex-wrap:wrap;margin-bottom:28px
}
.logo{
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;
  color:var(--ink);text-decoration:none;letter-spacing:-.01em
}
.logo span{color:var(--accent-deep)}
.site-nav{display:flex;flex-wrap:wrap;gap:2px 4px}
.site-nav a{
  font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:600;
  color:var(--ink-soft);text-decoration:none;padding:6px 8px;
  border-bottom:2px solid transparent
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

.eyebrow{
  font-size:12.5px;font-weight:600;color:var(--accent-deep);
  letter-spacing:.02em;margin:0 0 10px
}
h1{
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(26px,5.5vw,34px);line-height:1.15;letter-spacing:-.01em;
  margin:0 0 10px;color:var(--ink)
}
.lede{color:var(--ink-soft);font-size:15.5px;margin:0;max-width:48ch}
.updated{color:var(--ink-soft);font-size:12.5px;margin:0 0 8px}

.result{
  background:var(--panel);border-radius:var(--radius);
  border-top:3px solid var(--accent);
  padding:26px 26px 22px;margin-bottom:16px
}
.rlabel{
  font-family:"Space Grotesk",sans-serif;color:var(--accent);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;margin:0 0 10px
}
.rfig{
  font-family:"Space Grotesk",sans-serif;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:clamp(34px,9.5vw,50px);line-height:1;
  color:#fff;margin:0 0 8px
}
.rsub{color:#A2A6AB;font-size:13.5px;margin:0 0 20px}
.rbreak{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden
}
.rbreak > div{background:var(--panel-2);padding:12px 15px}
.rbreak .k{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:#8B8F94;margin:0 0 4px
}
.rbreak .v{
  font-family:"Space Grotesk",sans-serif;font-variant-numeric:tabular-nums;
  font-weight:600;font-size:16.5px;color:#fff;margin:0
}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 24px 22px;margin-bottom:16px
}
label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 7px}
.hint{display:block;font-weight:400;color:var(--ink-soft);font-size:12.5px;margin-top:2px}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
input[type="number"]{
  width:100%;padding:11px 12px;font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  font-family:"Space Grotesk",sans-serif;font-weight:500
}
input[type="number"]:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
input::placeholder{color:#B7B9BC}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:440px){.row{grid-template-columns:1fr}}

.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs input{position:absolute;opacity:0;pointer-events:none}
.tabs label{
  flex:1;text-align:center;cursor:pointer;margin:0 0 -1px;
  padding:9px 4px 10px;font-size:13px;font-weight:600;color:var(--ink-soft);
  border-bottom:2px solid transparent;transition:.12s
}
.tabs label span{display:block;font-size:11px;font-weight:500;opacity:.75;margin-top:1px}
.tabs input:checked + label{color:var(--ink);border-bottom-color:var(--accent)}
.tabs input:focus-visible + label{outline:2px solid var(--accent);outline-offset:-2px}

.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:12px 0 0}
.check input{width:18px;height:18px;margin-top:1px;accent-color:var(--accent);flex-shrink:0}
.check span{font-size:13.5px;color:var(--ink);font-weight:500}
.check .hint{margin-top:1px}

.note{
  border-left:3px solid var(--accent-deep);background:var(--warn-wash);
  border-radius:0 4px 4px 0;padding:12px 15px;font-size:13px;
  color:var(--accent-deep);margin-top:18px
}
.note strong{color:#5C3E00}

h2{font-family:"Space Grotesk",sans-serif;font-size:19px;margin:36px 0 10px;font-weight:600}
h3{font-family:"Space Grotesk",sans-serif;font-size:16px;margin:22px 0 6px;font-weight:600}
.prose{color:var(--ink-soft);font-size:15px}
.prose p{margin:0 0 12px}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 12px;padding-left:1.2em}
.prose li{margin:0 0 6px}
.prose code{font-size:.92em}

.table-wrap{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

.related{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;margin:0 0 10px;text-decoration:none
}
.related:hover{border-color:var(--accent)}
.related .k{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.related .v{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--ink);font-size:15px}

footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft)}
footer p{margin:0 0 6px}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px}
.footer-links a{color:var(--ink-soft);text-decoration:none;font-weight:600}
.footer-links a:hover{color:var(--ink)}
.cookie-btn{
  font:inherit;font-size:12px;font-weight:600;color:var(--accent-deep);
  background:transparent;border:0;padding:0;cursor:pointer;text-decoration:underline
}