/* Warm newsprint. Structure from rules and space, never boxes.
   Colour marks structure only - never sentiment. */
:root{
  --paper:#FFFFFF; --paper-deep:#F2F6F8;
  --ink:#052B42; --ink-2:#40616F; --ink-3:#7B95A1;
  --rule:#DDE7EC; --rule-heavy:#052B42;
  --mark:#052B42; --lime:#E0FF4F;
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme:dark){
  --paper:#041F30; --paper-deep:#07293D;
  --ink:#EAF3F7; --ink-2:#A7C0CC; --ink-3:#6E8B99;
  --rule:#0E3B54; --rule-heavy:#EAF3F7;
  --mark:#E0FF4F; --lime:#E0FF4F;
}}
:root[data-theme="dark"]{
  --paper:#041F30; --paper-deep:#07293D;
  --ink:#EAF3F7; --ink-2:#A7C0CC; --ink-3:#6E8B99;
  --rule:#0E3B54; --rule-heavy:#EAF3F7;
  --mark:#E0FF4F; --lime:#E0FF4F;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:940px;margin:0 auto;padding:0 24px}
table,.num{font-variant-numeric:tabular-nums}
a{color:var(--ink);text-decoration-color:var(--rule);text-underline-offset:2px}
a:hover{text-decoration-color:var(--mark)}
h1,h2,h3{text-wrap:balance;line-height:1.15;margin:0}
:focus-visible{outline:2px solid var(--mark);outline-offset:2px}

/* Dateline: small, factual, above the headline. Never competes. */
header.site{border-bottom:1px solid var(--rule)}
.hdr{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:12px 0;flex-wrap:wrap}
.brand{font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:19px;font-weight:700;
  letter-spacing:-.02em;
  text-decoration:none;color:var(--ink);letter-spacing:-.01em}
.brand span{color:var(--ink-3)}
nav.site{display:flex;gap:18px;font-size:13.5px}
nav.site a{color:var(--ink-2);text-decoration:none;padding-bottom:2px}
nav.site a:hover{color:var(--ink)}
nav.site a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--lime)}

.dateline{display:flex;gap:16px;flex-wrap:wrap;padding:18px 0 0;
  font-size:13px;color:var(--ink-3)}
.dateline b{font-weight:500;color:var(--ink-2)}
.dateline .ts{font-family:"Roboto Mono",monospace;font-size:11.5px}

.lede{padding:8px 0 0;max-width:none}
.lede h1{font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:clamp(28px,4vw,40px);
  font-weight:700;letter-spacing:-.025em;line-height:1.06;
  max-width:19ch;margin-bottom:0}
.intro{max-width:62ch;color:var(--ink-2);margin:14px 0 0;font-size:16px}
.intro strong{color:var(--ink);font-weight:600}

/* The gap: the site's thesis, drawn. Two equal numbers, a measured distance. */
.gap{display:flex;align-items:center;gap:18px;margin:22px 0 6px}
.gap .n{font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:clamp(34px,7.5vw,60px);font-weight:300;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.gap .bar{flex:1;height:1px;background:var(--ink);min-width:20px}
.gapfoot{display:flex;justify-content:space-between;gap:18px;
  font-size:13px;color:var(--ink-2);max-width:100%}
.gapfoot div:last-child{text-align:right}
.gapfoot b{display:block;font-weight:500;color:var(--ink)}

/* The picker sits above the answer: change either side, get a new number. */
.picker{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:26px 0 4px;font-size:clamp(17px,2.4vw,22px);color:var(--ink-2)}
.picker select{font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:clamp(19px,2.6vw,25px);font-weight:500;color:var(--ink);
  background:var(--paper);border:0;border-bottom:3px solid var(--lime);
  padding:2px 22px 3px 4px;border-radius:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:right 8px top 60%,right 3px top 60%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.picker select:focus{outline:none;border-bottom-width:3px}

.allink{margin:12px 0 0;font-size:13.5px}
.allink a{color:var(--ink-3);text-decoration:none;box-shadow:inset 0 -2px 0 var(--lime)}
.allink a:hover{color:var(--ink)}
.oneline{font-size:15.5px;color:var(--ink-2);max-width:62ch;margin:0 0 26px}
.oneline b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* The answer: the whole point of a comparison page. */
.answer{margin:4px 0 14px;padding-bottom:18px;border-bottom:1px solid var(--rule-heavy)}
.apx{font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:clamp(46px,10.5vw,96px);
  font-weight:700;line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  display:inline-block;box-shadow:inset 0 -.09em 0 var(--lime);
  padding-bottom:.03em}
.asub{font-size:16px;color:var(--ink-2);margin-top:12px}
.asub b{font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:19px;color:var(--ink);
  font-variant-numeric:tabular-nums}

.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px;background:transparent;border-top:1px solid var(--rule);
  border-left:1px solid var(--rule)}
.pick{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:12px 13px;background:var(--paper);text-decoration:none;color:var(--ink-2);
  font-size:14px;box-shadow:1px 1px 0 0 var(--rule)}
.pick:focus-visible{outline:2px solid var(--ink)}
.pick:hover{background:var(--paper-deep);color:var(--ink)}
.pick b{font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:17px;font-weight:500;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Section heads sit ON a rule, with the basis right-aligned on the same line. */
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:20px;font-weight:600;
  letter-spacing:-.015em;
  margin:32px 0 14px;padding-bottom:7px;border-bottom:1px solid var(--rule-heavy)}
.shead .qual{font-family:"Roboto Mono",monospace;font-size:11px;font-weight:400;
  color:var(--ink-3);white-space:nowrap;padding-left:16px}

/* Table: set, not rendered. No box, no row rules - leading does the work. */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
caption{text-align:left;font-size:13px;color:var(--ink-3);padding:0 0 10px}
th,td{padding:13px 12px;text-align:right;vertical-align:top}
th:first-child,td:first-child{text-align:left;padding-left:0}
th:last-child,td:last-child{padding-right:0}
thead th{font-size:13px;font-weight:500;color:var(--ink-3);
  border-bottom:2px solid var(--rule-heavy);padding-bottom:8px}
tbody tr:last-child td{border-bottom:1px solid var(--rule)}
tbody tr.anchor td{background:var(--paper-deep)}
tbody tr.anchor .co{font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:17px}
/* The reference rule: where today's price falls. Structure, not sentiment. */
tbody tr.refline td{padding:2px 0 0;border-top:1px solid var(--mark)}
tbody tr.refline td div{text-align:right}
tbody tr.refline td div span{font-family:"Roboto Mono",monospace;
  font-size:10.5px;color:var(--mark)}
.co{font-weight:600;font-size:15px}
.co small{display:block;
  font-weight:400;font-size:13.5px;color:var(--ink-2);
  white-space:normal;max-width:36ch;margin-top:2px}
td.imp{font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:26px;font-weight:400;
  white-space:nowrap;letter-spacing:-.01em}
.mono{color:var(--ink-2);white-space:nowrap}
.delta{font-size:14px;color:var(--ink-3);white-space:nowrap}
.formula{font-size:13px;color:var(--ink-3);margin:10px 0 0}

/* Notes: indented italic under a hairline. No tint, no box, no label. */
.note{border-top:1px solid var(--rule);margin:20px 0 0;padding:12px 0 0 18px;
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:15px;color:var(--ink-2);max-width:64ch}
.note b{font-weight:600;color:var(--ink)}

.sliders{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:20px}
.sl label{display:block;font-size:15px;color:var(--ink-2);margin-bottom:10px}
.sl label b{font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:21px;font-weight:500;
  color:var(--ink);font-variant-numeric:tabular-nums}
.sl input[type=range]{width:100%;-webkit-appearance:none;appearance:none;
  height:2px;background:var(--rule);outline:none;margin:0}
.sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--mark);cursor:grab;border:0}
.sl input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:var(--mark);cursor:grab;border:0}
.sl input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}
.ticks{display:flex;justify-content:space-between;gap:8px;margin-top:7px;
  font-size:11.5px;color:var(--ink-3)}
.ticks span:nth-child(2){text-align:center}
.ticks span:last-child{text-align:right}
.outrow{display:flex;gap:36px;align-items:baseline;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:16px}
.outrow .lbl{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:2px}
.outrow .big{font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:38px;font-weight:400;
  line-height:1;font-variant-numeric:tabular-nums}
.outrow .big.sm{font-size:24px;color:var(--ink-2)}
@media (max-width:700px){.sliders{grid-template-columns:1fr;gap:22px}
  .outrow{gap:22px}.outrow .big{font-size:31px}}

/* Calculator: a rule-bounded band, not a card. */
.calc{border-top:1px solid var(--rule-heavy);border-bottom:1px solid var(--rule);
  padding:18px 0}
.calcrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px;
  font-size:14.5px;color:var(--ink-2)}
label{font-size:14px;color:var(--ink-2)}
select,input[type=text]{font-family:"Inter",sans-serif;font-size:15px;
  padding:7px 9px;border:1px solid var(--rule);border-radius:0;
  background:var(--paper);color:var(--ink)}
select:focus,input:focus{border-color:var(--mark);outline:none}
.result{font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:clamp(19px,3.2vw,25px);
  font-weight:400;line-height:1.5;max-width:56ch}
.result b{font-weight:600;font-variant-numeric:tabular-nums}

/* FAQ: hairlines only. */
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:16px;
  list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Roboto Mono",monospace;
  color:var(--mark);font-weight:400}
.faq details[open] summary::after{content:"‘2"}
.faq .ans{padding:0 0 16px;color:var(--ink-2);max-width:64ch;font-size:15.5px}
.faq .ans p{margin:0 0 10px} .faq .ans p:last-child{margin:0}
.faq .ans strong{color:var(--ink);font-weight:600}

footer.site{margin-top:54px;border-top:1px solid var(--rule);
  padding:20px 0 48px;font-size:13px;color:var(--ink-3)}
footer.site p{margin:0 0 8px;max-width:70ch}
.src{font-family:"Roboto Mono",monospace;font-size:11px;line-height:1.7}

@media (max-width:700px){
  .gap{gap:12px}
  .lede{max-width:none}
  /* Stack the table - never hide the payload column behind a scroll. */
  thead{position:absolute;left:-9999px}
  tbody tr{display:block;border-bottom:1px solid var(--rule);padding:14px 0}
  tbody tr.refline{padding:0;border:0}
  tbody td{display:block;text-align:left;padding:0}
  tbody td.imp{font-size:30px;margin:6px 0 2px}
  tbody td.mono,tbody td.delta{display:inline;font-size:13.5px;color:var(--ink-3)}
  tbody td.mono::after{content:" · "}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}