/* Shared styles for the comparison pages.
   index.html stays a single self contained file on purpose. These secondary
   pages share a stylesheet instead, because duplicating the whole thing four
   times is how they drift apart. Tokens match index.html exactly. */
:root{
  --base:#F4F5F7;
  --surface:#FFFFFF;
  --gold:#F5A623;
  --gold-ink:#925700;
  --blue-ink:#2160D6;
  --ink:#0B0D10;
  --muted:#5E656E;
  --hairline:rgba(11,13,16,.13);
  --hairline-soft:rgba(11,13,16,.07);
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(1.25rem,5vw,4rem);
  --measure:820px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:var(--font);
  font-variation-settings:"wdth" 100,"wght" 400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}

.devbar{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--gold);color:var(--ink);padding:.62rem 1rem;
  font-size:.7rem;font-variation-settings:"wdth" 94,"wght" 660;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
}
.devbar-dot{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.5;flex:none}
@media(max-width:560px){.devbar{font-size:.58rem;letter-spacing:.1em}}

.nav{border-bottom:1px solid var(--hairline-soft);background:var(--surface)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px;padding-block:.75rem}
.wordmark{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;
  font-variation-settings:"wdth" 98,"wght" 800;font-size:.86rem;letter-spacing:.13em;text-transform:uppercase}
.logo{height:28px;width:auto;aspect-ratio:1;flex:none;fill:currentColor}
.nav a.back{color:var(--muted);text-decoration:none;font-size:.78rem;
  font-variation-settings:"wght" 600;letter-spacing:.04em}
.nav a.back:hover{color:var(--ink)}

main{padding-block:clamp(2.75rem,7vw,4.5rem) clamp(3rem,8vw,5rem)}
.eyebrow{font-size:.7rem;font-variation-settings:"wdth" 96,"wght" 650;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1rem}
h1{margin:0 0 1.25rem;font-size:clamp(1.9rem,5vw,3rem);font-variation-settings:"wdth" 106,"wght" 850;
  line-height:1.04;letter-spacing:-.026em;text-wrap:balance}
h2{margin:2.75rem 0 .9rem;font-size:clamp(1.2rem,2.6vw,1.5rem);
  font-variation-settings:"wdth" 102,"wght" 780;letter-spacing:-.014em;line-height:1.2}
p{margin:0 0 1.1rem;font-variation-settings:"wght" 380}
.lede{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--muted);font-variation-settings:"wght" 340}
a{color:var(--blue-ink)}

.tbl{width:100%;border-collapse:collapse;margin:1.25rem 0 .5rem;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--hairline-soft);vertical-align:top}
.tbl th{font-variation-settings:"wght" 700;font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.tbl td:first-child{font-variation-settings:"wght" 620}
.tbl-scroll{overflow-x:auto}

.note{border-left:3px solid var(--gold);padding:.15rem 0 .15rem 1rem;margin:1.5rem 0;
  color:var(--muted);font-size:.92rem}

.cta{margin-top:2.75rem;padding:1.5rem;background:var(--surface);
  border:1px solid var(--hairline);border-radius:10px}
.cta p{margin:0 0 1rem}
.btn{display:inline-block;background:var(--gold);color:var(--ink);text-decoration:none;
  padding:.8rem 1.3rem;border-radius:7px;font-variation-settings:"wdth" 98,"wght" 720;font-size:.92rem}

.footer{border-top:1px solid var(--hairline-soft);padding-block:2.25rem;color:var(--muted);font-size:.78rem}
.footer-inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.footer a{color:var(--muted)}

/* Comparison table. Ruled like a table on purpose: without vertical
   dividers the three columns read as loose floating text. The qualifier
   sits under our own answer, not next to the feature name, so it reads
   as our claim rather than as a description of the row. */
.cmp{width:100%;border-collapse:collapse;margin:1.4rem 0 .7rem;font-size:.95rem;
  background:var(--surface);border:1px solid var(--hairline);border-radius:10px;overflow:hidden}
.cmp th,.cmp td{text-align:left;padding:.8rem .9rem;border:1px solid var(--hairline-soft);vertical-align:top}
.cmp thead th{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-variation-settings:"wght" 700;background:var(--base);border-bottom:1px solid var(--hairline)}
.cmp thead th.us{color:var(--gold-ink)}
.cmp td:first-child{background:var(--base);font-variation-settings:"wght" 680;width:26%}
.cmp td.us{width:40%}
.cmp .sub{display:block;margin-top:.3rem;font-size:.82rem;line-height:1.45;
  color:var(--muted);font-variation-settings:"wght" 380}
.cmp .y{font-variation-settings:"wght" 680}
.cmp .n{color:var(--muted)}
@media(max-width:560px){
  .cmp{font-size:.88rem}
  .cmp th,.cmp td{padding:.65rem .6rem}
  .cmp td:first-child{width:auto}
}

.footer-compare{width:100%;display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.7rem;opacity:.8;margin-top:.4rem}
.footer-compare a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline)}
.footer-compare a:hover{color:var(--ink)}