/* compare.css — GENERATED by tools/site/build_compare.py from the design
   <style> (pixel-perfect) + store-badge chrome + a mobile @media (design has none).
   Do not hand-edit; edit tools/site/src/comparison.dc.html or the builder. */
a{color:var(--accent)}a:hover{color:var(--accent2)}
.site{position:relative;width:100%;max-width:1300px;margin:0 auto;font-family:var(--font-sans);color:var(--text-body)}
.fx{display:flex}.ac{align-items:center}.jcc{justify-content:center}.gap10{gap:10px}
.flip{transform:scaleX(-1)}
.fs8{font-size:8px}.fs10{font-size:10px}.fs14{font-size:14px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 44px;border-bottom:1px solid var(--border-strong)}
.nlinks{display:flex;align-items:center;gap:24px}
.nlink{font-size:var(--text-sm);font-weight:600;color:var(--text-body);text-decoration:none;cursor:pointer}
.nlink:hover{color:var(--accent)}
.nlink.on{color:var(--accent);font-weight:700}
.lg36{width:36px;height:36px;border-radius:9px}
.creed{display:inline-flex;align-items:center;gap:7px;color:var(--creed);font-weight:700;letter-spacing:var(--tracking-creed);text-transform:uppercase;line-height:1;margin-top:5px}
.creed .cm-laurel{color:var(--laurel);opacity:.95}
.kick{display:block;margin-bottom:14px}
.h1{margin:0;font-size:46px;font-weight:800;letter-spacing:var(--tracking-tight);line-height:1.08;color:var(--text-body);text-wrap:balance}
.h2{margin:0;font-size:30px;font-weight:800;letter-spacing:var(--tracking-tight);line-height:1.18;color:var(--text-body);text-wrap:balance}
.h3{margin:0;font-size:19px;font-weight:800;line-height:1.3;color:var(--text-body);text-wrap:pretty}
.lead{margin:16px 0 0;font-size:17px;line-height:1.62;color:var(--text-muted);text-wrap:pretty}
.mxa{max-width:720px;margin-left:auto;margin-right:auto}
.center{text-align:center}
.hub{padding:64px 72px 56px;text-align:center}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:40px auto 0;text-align:left}
.rule{display:flex;gap:13px;align-items:flex-start;padding:18px 20px;background:var(--surface-card);border:1px solid var(--border-hairline);border-top:3px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.chip{width:36px;height:36px;flex:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.chip.laurel{background:color-mix(in srgb,var(--laurel) 16%,transparent);color:var(--laurel-deep)}
.chip.good{background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good)}
.rt{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--text-body)}
.rp{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-muted)}
.rail{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:38px auto 0;max-width:1040px}
.railc{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 17px;border-radius:var(--radius-pill);background:var(--surface-card);border:1px solid var(--border-hairline);box-shadow:var(--shadow-card);font-size:13.5px;font-weight:700;color:var(--text-body);text-decoration:none;transition:border-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.railc:hover{border-color:var(--accent);color:var(--accent)}
.railn{font-size:11.5px;font-weight:600;color:var(--muted)}
.page{border-top:1px solid var(--border-strong)}
.hero{padding:58px 72px 44px}
.crumb{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:16px}
.deck{margin:16px 0 0;font-size:20px;font-weight:700;line-height:1.35;color:var(--accent);max-width:840px;text-wrap:pretty}
.intro{margin:20px 0 0;font-size:16.5px;line-height:1.68;color:var(--text-muted);max-width:790px;text-wrap:pretty}
.sec{padding:54px 72px}
.sect{border-top:1px solid var(--border-hairline)}
.band-tyr{background:radial-gradient(120% 82% at 50% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 62%)}
.band-laurel{background:radial-gradient(120% 82% at 50% 0%,color-mix(in srgb,var(--laurel) 11%,transparent),transparent 62%)}
.laurelhd{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--laurel);margin-bottom:14px}
.laurelhd .cm-label{color:var(--accent)}
.tw{max-width:1060px;margin:0 auto;background:var(--surface-card);border:1px solid var(--border-hairline);border-top:3px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden}
.tbl{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;padding:15px 22px;border-bottom:1px solid var(--border-hairline);vertical-align:top;line-height:1.5}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:none}
.tbl thead th{padding:16px 22px;border-bottom:1px solid var(--border-strong);font-size:16px;font-weight:800;color:var(--text-body)}
.tbl thead th .cm-label{display:block;margin-bottom:5px;color:var(--muted)}
.tbl tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-sunken) 55%,transparent)}
.cmcol{background:color-mix(in srgb,#A67C3C 9%,transparent);box-shadow:inset 1px 0 0 color-mix(in srgb,#A67C3C 30%,transparent),inset -1px 0 0 color-mix(in srgb,#A67C3C 30%,transparent)}
.rowh{width:23%;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.us{font-weight:600;color:var(--text-body)}
.them{color:var(--text-muted)}
.tbl b{font-weight:800;color:var(--text-body)}
.tbl em{font-style:italic}
.cmhead{display:flex;align-items:center;gap:9px}
.lg22{width:22px;height:22px;border-radius:6px}
.tnote{max-width:1060px;margin:14px auto 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.pex{position:relative;overflow:hidden;padding:50px 72px 54px;background:var(--accent);background-image:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,#E9C977 16%,transparent),transparent 58%);color:#FDFCF4}
.pex .wm{position:absolute;top:-26px;right:56px;color:#E9C977;opacity:.17;pointer-events:none}
.pexin{position:relative;z-index:1;max-width:760px}
.pexk{display:block;font-size:var(--text-2xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#E9C977;margin-bottom:12px}
.pexh{margin:0;font-size:30px;font-weight:800;letter-spacing:var(--tracking-tight);color:#FDFCF4}
.pexline{margin:14px 0 0;font-size:19px;font-weight:700;line-height:1.45;color:#FDFCF4}
.pexp{margin:16px 0 0;font-size:15.5px;line-height:1.68;color:rgba(253,252,244,.84);text-wrap:pretty}
.rk{color:#E9C977;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(233,201,119,.45)}
.rk:hover{color:#F2DCA4;border-bottom-color:rgba(242,220,164,.8)}
.pexp b{color:#E9C977;font-weight:800}
.prose{max-width:820px}
.ch3{margin:26px 0 0;font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--accent);text-wrap:pretty}
.ch3:first-child{margin-top:0}
.cp{margin:12px 0 0;font-size:16px;line-height:1.72;color:var(--text-body);text-wrap:pretty}
.cp b{font-weight:700}
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1060px;margin:34px auto 0;align-items:start}
.fcard{position:relative;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:26px 26px 28px}
.fcard.theirs{border-top:3px solid var(--laurel)}
.fcard.ours{border-top:3px solid var(--accent)}
.fh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fbody{margin:0;font-size:15.5px;line-height:1.72;color:var(--text-body);text-wrap:pretty}
.fbody em{font-style:italic}
.choose{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1060px;margin:32px auto 0}
.ccard{padding:24px 26px 26px;border-radius:var(--radius-md);background:var(--surface-sunken);border:1px solid var(--border-hairline)}
.ccard.ours{background:color-mix(in srgb,var(--accent) 7%,var(--surface-card));border-color:color-mix(in srgb,var(--accent) 26%,transparent)}
.cwho{display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ccard.ours .cwho{color:var(--accent)}
.cname{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--text-body)}
.ctext{margin:12px 0 0;font-size:15.5px;line-height:1.68;color:var(--text-body)}
.cta{padding:56px 72px 60px;text-align:center}
.ctah{margin:0 auto;max-width:760px;font-size:27px;font-weight:800;letter-spacing:var(--tracking-tight);line-height:1.22;color:var(--text-body)}
.ctap{margin:14px auto 0;max-width:640px;font-size:16.5px;line-height:1.55;color:var(--text-muted)}
.btnrow{display:flex;align-items:center;gap:12px;margin-top:26px}
.cta-laurel{position:relative}
.ctal{position:absolute;top:50%;color:var(--laurel);opacity:0;pointer-events:none;transition:transform 760ms cubic-bezier(.22,1,.36,1),opacity 560ms var(--ease-standard)}
.ctal.l{right:100%;margin-right:10px;transform-origin:right center;transform:translateY(-50%) scaleX(-1) scale(.2) rotate(-16deg)}
.ctal.r{left:100%;margin-left:10px;transform-origin:left center;transform:translateY(-50%) scale(.2) rotate(-16deg)}
.cta-laurel:hover .ctal{opacity:.92}
.cta-laurel:hover .ctal.l{transform:translateY(-50%) scaleX(-1) scale(1) rotate(0deg)}
.cta-laurel:hover .ctal.r{transform:translateY(-50%) scale(1) rotate(0deg)}
.ctasub{margin:18px auto 0;max-width:620px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.sib{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;padding:17px 72px;border-top:1px solid var(--border-hairline);background:color-mix(in srgb,var(--accent) 4%,transparent);font-size:13px;color:var(--muted)}
.sibl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.siba{font-weight:700;color:var(--accent);text-decoration:none}
.siba:hover{color:var(--accent2);text-decoration:underline}
.ver{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted)}
.foot{border-top:1px solid var(--border-strong);padding:46px 72px 34px}
.frow{display:flex;justify-content:space-between;gap:44px;align-items:flex-start}
.fcol{display:flex;flex-direction:column;gap:10px}
.flink{font-size:var(--text-sm);color:var(--text-body);text-decoration:none;cursor:pointer}
.flink:hover{color:var(--accent)}
.fnote{margin:0;font-size:var(--text-xs);color:var(--muted);line-height:1.6}
.fbot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border-hairline);padding-top:20px;margin-top:34px}

/* store badges — copied from css/pages.css so the standard footer renders identically */
.stores{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;align-items:flex-start}
.storecell{display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px}
.store-badge{display:inline-flex;border-radius:9px;text-decoration:none;transition:opacity .18s ease}
.store-badge img{display:block;height:42px;width:auto}
.store-badge:hover{opacity:.82}
.soon{font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);background:var(--surface-sunken);border:1px solid var(--border-hairline);border-radius:999px;padding:3px 9px}
.foot .store-badge img{height:34px}
.fsoc{display:inline-flex;align-items:center;gap:8px}

/* ── responsive (authored for the repo; the design canvas ships none) ── */
@media (max-width:1080px){
  .hub,.hero,.sec,.pex,.cta,.sib{padding-left:44px;padding-right:44px}
  .rules{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav,.foot{padding-left:22px;padding-right:22px}
  .nlinks{gap:14px}
  .nlinks .nlink{display:none}
  .frow{flex-wrap:wrap;gap:28px}
  .hub,.hero,.sec,.pex,.cta,.sib{padding-left:22px;padding-right:22px}
  .rules,.twoup,.choose{grid-template-columns:1fr}
  .h1{font-size:34px}.h2{font-size:26px}
  .hub{padding-top:48px;padding-bottom:44px}
  .deck{font-size:18px}
}
@media (max-width:760px){
  /* comparison table → one stacked card per row (reproduces the design's .mob demo).
     The party label is ABSOLUTELY positioned (not grid/flex): a grid/flex td promotes every
     inline child — <em>, <b> — to its own item, which scatters wrapped values. Block td +
     absolute label keeps the value one right-aligned text flow with its emphasis intact. */
  .tw{border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;margin-top:24px!important}
  .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block}
  .tbl thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .tbl tbody tr{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:12px;padding:13px 15px;margin-bottom:9px;box-shadow:var(--shadow-card)}
  .tbl tbody tr:nth-child(even){background:var(--surface-card)}
  .tbl th.rowh{width:auto;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 9px;padding:0;border:0}
  .tbl td{position:relative;padding:0 0 0 104px;border:0;font-size:13px;line-height:1.5;text-align:right;min-height:20px}
  .tbl td+td{border-top:1px solid var(--border-hairline);margin-top:8px;padding-top:9px}
  .tbl td::before{content:attr(data-col);position:absolute;left:0;top:0;width:94px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);line-height:1.5}
  .tbl td+td::before{top:9px}
  .tbl td.cmcol{background:none;box-shadow:none}
  .tbl td.cmcol::before{color:var(--accent)}
  .tnote{padding-left:0;padding-right:0}
  .crumb{flex-wrap:wrap}
}