:root { --brand: #9a4a1c; --brand-ink: #fff; --accent: #f2c14e; --brand-text-dark: #f0a46e; }
.site-header .brand img { width: 2.5rem; height: 2.5rem; }
.site-header .brand { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); letter-spacing: -0.02em; }
.hero { padding-block: var(--s5) var(--s6); }
.hero .container { grid-template-columns: 1fr; }
.hero-title { max-width: 20ch; }
.hero .promise { max-width: 44ch; margin-bottom: var(--s4); }
@media (max-width: 759px) {
  .hero { padding-top: var(--s3); }
  .hero-title { font-size: var(--step-3); }
  .inputs { gap: var(--s2); }
  .hero .promise { margin-bottom: var(--s2); font-size: var(--step-0); }
  .inputs { gap: var(--s3); padding: var(--s4); }
}
.tools-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s5); }
.tools-nav a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 var(--s3); border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 700; font-size: var(--step--1); text-decoration: none; }
.tools-nav a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.inputs { display: grid; gap: var(--s4); align-content: start; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.lab-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.lab-row b { font-size: var(--step--1); }
.field label, .lab { font-weight: 700; font-size: var(--step--1); }
.seg.mini { padding: 2px; }
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.groups button { min-height: 2.9rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius); font: 700 var(--step--1)/1.1 var(--font-body); cursor: pointer; padding: 0.4rem 0.3rem; }
.groups button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.groups button small { display: block; font-weight: 400; font-size: 0.75rem; margin-top: 2px; }
@media (min-width: 760px) { .flow { align-items: start; } }
.answer { display: grid; gap: var(--s3); align-content: start; }
.answer-panel { padding: var(--s5); }
.answer-panel .small { font-weight: 700; }
.answer-panel .why { max-width: 34ch; }
.answer-panel .btn { min-height: 2.75rem; }
.gear { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.gear li { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s3); align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.gear li.focus { display: none; }
.gear .ico { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-s); background: var(--brand-soft); display: grid; place-items: center; }
.gear .ico svg { width: 1.7rem; height: 1.7rem; color: var(--brand-text); }
.gear .k { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.gear .v { font: 800 var(--step-1)/1.15 var(--font-display); display: block; }
.gear .n { font-size: var(--step--1); color: var(--ink-2); display: block; margin-top: 2px; }
.section h2 { margin-bottom: var(--s4); }
.prose * + h2 { margin-top: var(--s6); }
.answer-panel .btn { background: transparent; color: var(--brand-ink); border: 2px solid var(--brand-ink); }
.prose { max-width: var(--narrow); }
.prose p + p, .prose p + ol, .prose ol + p { margin-top: var(--s3); }
.table-wrap { margin-top: var(--s4); }
.notice { margin-top: var(--s5); }
.field .lab-row { flex-wrap: nowrap; min-height: 2.75rem; }
.seg.mini button { padding: 0.3rem 0.5rem; min-height: 2.75rem; min-width: 2.75rem; }
@media (max-width: 759px) { .answer-panel .big { justify-self: end; } .answer-panel .unit { justify-self: start; } }
.rtable tr.now td { font-weight: 700; background: var(--brand-soft); }
.qa h3 { font-size: var(--step-0); margin-top: var(--s4); }
.qa h3 + p { margin-top: var(--s1); }
.checklist, .guides { margin: var(--s3) 0 0; padding-left: 1.25rem; display: grid; gap: var(--s2); }
.related { margin-top: var(--s3); }