/* The answer surface: /facts, /compare, /answers and its pages.
   Token values mirror brand/tokens.json, the same :root block index.html
   carries. Mobile first: the base rules are the 375px layout, the one media
   query widens the type. Reading pages, so one column at 680px max. */
:root{--ink:#211E1C;--paper:#FAF7F1;--paper-deep:#EFE9DE;--raised:#FFF;--sage:#6F7F5E;--sage-deep:#55644A;--sage-tint:#EBEFE5;--taupe:#A39B8E;--muted:#6E675D;--line:#E5DFD4;--hairline:#C7BFAF;--body:#4A453E}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:400 17px/28px Inter,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--sage-deep)}
img{display:block;max-width:100%}
.tnum{font-variant-numeric:tabular-nums}

/* header: paper grain as ground, the logo asset, one quiet way in */
.top{background:var(--paper-deep) url("texture-paper-dotgrid.webp") top left/480px repeat;border-bottom:1px solid var(--line)}
.top-in{max-width:1080px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.top-in .home{display:inline-flex;align-items:center;min-height:44px}
.top-in .home img{height:22px;width:auto}
.top-in nav{display:flex;align-items:center;gap:16px}
.top-in nav a{font:500 14px/1 Inter,sans-serif;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.top-in nav a:hover{color:var(--sage-deep)}
.top-in nav .hide-sm{display:none}

main{max-width:680px;margin:0 auto;padding:36px 16px 56px}
.crumb{font:500 13px/20px Inter,sans-serif;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.crumb a:hover{color:var(--sage-deep)}
h1{font:600 30px/38px Fraunces,Georgia,serif;letter-spacing:-.01em;text-wrap:balance;margin-bottom:18px}
h2{font:600 22px/30px Fraunces,Georgia,serif;text-wrap:balance;margin:40px 0 12px}
h3{font:600 17px/26px Inter,sans-serif;margin:24px 0 6px}
p{margin-bottom:14px;color:var(--body);text-wrap:pretty}
p b,li b{color:var(--ink)}
.lead{font:400 19px/30px Inter,sans-serif;color:var(--ink)}
ul,ol{margin:0 0 16px 22px;color:var(--body)}
li{margin-bottom:8px;padding-left:2px}
.checked{font:400 14px/22px Inter,sans-serif;color:var(--muted)}

/* the short answer: a raised card, sage rule on the left */
.short{background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--sage);border-radius:12px;box-shadow:0 1px 3px rgba(33,30,28,.08);padding:20px 20px 6px;margin:8px 0 8px}
.short p{color:var(--ink)}

/* a guest message, written out to copy */
.msg{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0 0 16px;font:400 16px/26px Inter,sans-serif;color:var(--ink)}
.msg-label{font:500 12px/18px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:6px}

/* the facts page: a definition list, label over value on a phone */
dl.facts{border-top:1px solid var(--line);margin:8px 0 24px}
dl.facts div{border-bottom:1px solid var(--line);padding:14px 0}
dl.facts dt{font:600 15px/22px Inter,sans-serif;color:var(--ink);margin-bottom:4px}
dl.facts dd{color:var(--body)}
dl.facts dd p{margin-bottom:6px}

/* the comparison table: stacked cards on a phone, a grid from 720px */
.cmp{margin:8px 0 24px;border-top:1px solid var(--line)}
.cmp table{width:100%;border-collapse:collapse;font:400 15px/22px Inter,sans-serif}
.cmp caption{text-align:left;font:400 14px/22px Inter,sans-serif;color:var(--muted);padding:10px 0}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--line)}
.cmp thead{display:none}
.cmp tbody tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
.cmp tbody th{display:block;padding:0 0 6px;border:0;font:600 16px/24px Inter,sans-serif;color:var(--ink)}
.cmp tbody td{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border:0;color:var(--body)}
.cmp tbody td::before{content:attr(data-who);font-weight:500;color:var(--ink);flex:none;min-width:112px}
.cmp tbody td.re{color:var(--ink)}
.cmp tbody td.re::before{color:var(--sage-deep)}
.cmp td span{text-align:right}

/* the price, at the decision point, with the anti-meter and tax lines */
.price{background:var(--raised);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgba(33,30,28,.08);padding:24px 20px;margin:40px 0 0;text-align:center}
.price .num{font:600 44px/48px Fraunces,Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.price .what{font:400 16px/26px Inter,sans-serif;color:var(--body);margin:8px auto 18px;max-width:440px}
.price .fine{font:400 13px/20px Inter,sans-serif;color:var(--muted);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 16px/1 Inter,sans-serif;padding:0 28px;min-height:52px;border-radius:8px;background:var(--sage-deep);color:#fff;text-decoration:none;transition:filter 180ms cubic-bezier(.2,0,0,1);margin-bottom:14px}
/* sage-deep: white on sage is 4.31:1, under AA (Lighthouse 2026-10-21) */
.btn:hover{filter:brightness(.88)}

/* related answers */
.related{margin-top:48px;border-top:1px solid var(--line);padding-top:8px}
.related ul{list-style:none;margin:0}
.related li{margin:0;border-bottom:1px solid var(--line)}
.related a{display:flex;align-items:center;min-height:52px;padding:10px 0;font:500 16px/24px Inter,sans-serif;text-decoration:none;color:var(--ink)}
.related a:hover{color:var(--sage-deep)}

.sources{font:400 14px/22px Inter,sans-serif;color:var(--muted)}
.sources li{margin-bottom:6px;word-break:break-word}
.sources a{color:var(--muted)}

/* footer, same shape as the landing's */
footer{border-top:1px solid var(--line);background:var(--raised)}
.foot{max-width:1080px;margin:0 auto;padding:40px 16px 36px;display:flex;flex-direction:column;align-items:center;gap:12px;font:400 13px/20px Inter,sans-serif;color:var(--muted);text-align:center}
.foot img{height:18px;width:auto}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 16px}
.foot nav a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot nav a:hover{color:var(--sage-deep)}

@media (min-width:720px){
  .top-in{padding:16px 24px}
  .top-in nav{gap:22px}
  .top-in nav .hide-sm{display:inline-flex}
  main{padding:56px 24px 72px}
  h1{font-size:38px;line-height:46px}
  h2{font-size:24px;line-height:32px}
  .cmp thead{display:table-header-group}
  .cmp thead th{font:600 14px/20px Inter,sans-serif;color:var(--muted)}
  .cmp thead th.re{color:var(--sage-deep)}
  .cmp tbody tr{display:table-row;padding:0}
  .cmp tbody th{display:table-cell;padding:12px 8px;border-bottom:1px solid var(--line);font-size:15px;line-height:22px;width:26%}
  .cmp tbody td{display:table-cell;padding:12px 8px;border-bottom:1px solid var(--line)}
  .cmp tbody td::before{content:none}
  .cmp td span{text-align:left}
  .price{padding:32px}
}
/* six columns need more than the reading column: the table alone widens */
@media (min-width:1000px){
  .cmp{width:920px;margin-left:calc((100% - 920px) / 2)}
  .cmp tbody th{width:20%}
}