/* ============================================================
   Compare + Pricing. Loaded after site.css and pages.css.
   Only rules those two pages need.

     1  Compare: long H1, the three-way table with glosses
     2  Pricing: hero price jump list
     3  Pricing: plan sheets (filled panel + ruled feature list)
     4  Pricing: limits table, Soon bar, fine print
     5  Pricing: Claude paragraph
   ============================================================ */

/* ---------- 1. compare ---------- */
.phero--long h1{font-size:clamp(38px,5.4vw,72px);max-width:15ch}

/* The three-way table: every column head carries a one-line gloss. */
.cmp--who{table-layout:fixed}
.cmp--who thead th{vertical-align:top;padding-top:8px;padding-bottom:14px;text-transform:none}
.cmp--who thead th .nm{text-transform:uppercase}
.cmp--who thead th small{display:block;margin-top:8px;font-family:var(--head);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;line-height:1.4;color:var(--chalk-dim)}
.cmp--who thead th.us small{color:var(--sea)}
.cmp--who tbody th{width:19%;font-size:16px}
.cmp--who tbody td{font-size:16px;line-height:1.4}
.cmp--who td.us{color:var(--chalk)}
@media(max-width:760px){
  /* the head row becomes a key: name + gloss for each column, then the rows below read against it */
  .cmp--who{table-layout:auto}
  .cmp--who thead{display:block;position:static;width:auto;height:auto;overflow:visible;clip:auto;margin-bottom:22px}
  .cmp--who thead td{display:none}
  .cmp--who thead th{padding:12px 0;border-bottom:1px solid var(--rule)}
  .cmp--who thead th.us{padding:12px 10px;margin:0 -10px;border-bottom-color:var(--signal)}
  .cmp--who tbody th{width:auto;font-size:17px}
}

/* "theirs" vs "ours" price pair inside a feature row */
.frow p.prices{display:grid;gap:4px;margin-top:14px;padding:14px 16px;background:var(--p-fill);font-size:15.5px;line-height:1.45;color:var(--p-ink)}
.prices span{display:block}

/* ---------- 2. pricing hero: jump list that carries the prices ---------- */
.jump--prices a b{font-weight:800}
.jump--prices a span{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.jump--prices a:hover span{color:var(--p-accent)}

/* ---------- 3. plan sheets ---------- */
.sheets{display:grid;gap:56px}
.sheet{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px 56px;align-items:start}
.sheet-card{position:sticky;top:24px;padding:30px 28px 32px;background:var(--sea);color:var(--chalk)}
.sheet--free .sheet-card{background:var(--mint);color:var(--sea)}
.sheet--builder .sheet-card{background:var(--signal);color:var(--sea)}
.sheet-card h3{font-weight:800;font-size:clamp(22px,2vw,26px);letter-spacing:-.03em;line-height:1.1}
.sheet--fleet .sheet-card h3{color:var(--mint)}
.sheet-price{margin-top:10px;font-weight:800;font-size:clamp(56px,5.4vw,76px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.sheet-price small{font-family:var(--mono);font-weight:500;font-size:16px;letter-spacing:0}
.sheet-note{margin-top:10px;font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.01em}
.sheet-line{margin-top:18px;max-width:34ch;font-size:17px;font-weight:500;line-height:1.45}
.sheet--fleet .sheet-line{color:#D5E2E0}
.sheet-card .btn{margin-top:26px}
.sheet--free .btn,.sheet--builder .btn{background:var(--sea);border-color:var(--sea);color:var(--chalk)}
.sheet--free .btn:hover,.sheet--builder .btn:hover{background:var(--chalk);border-color:var(--sea);color:var(--sea)}
.sheet--fleet :focus-visible{outline-color:var(--signal)}
.sheet-card .stamp{position:absolute;top:30px;right:26px;margin:0}
.sheet code{padding:.05em .35em;background:rgba(13,43,51,.12);border-radius:2px}

.feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:2px solid var(--p-ink)}
.feats li{padding:15px 0 17px;border-bottom:1px solid var(--p-rule);font-size:15.5px;line-height:1.5;color:var(--p-dim)}
.feats b{display:block;margin-bottom:3px;font-weight:800;font-size:clamp(17px,1.5vw,19px);letter-spacing:-.02em;line-height:1.25;color:var(--p-accent)}
.feats .feats-all{grid-column:1/-1;padding:14px 0 15px}
.feats .feats-all b{margin:0;color:var(--p-ink)}
.feats .feats-all b::before{content:"+";display:inline-block;width:1.2em;color:var(--p-accent);font-family:var(--mono)}
@media(max-width:940px){.sheet{grid-template-columns:1fr;gap:26px}.sheet-card{position:relative;top:auto;max-width:520px}}
@media(max-width:620px){.feats{grid-template-columns:1fr}}

/* ---------- 4. limits table, Soon bar, fine print ---------- */
.cmp--plans{table-layout:fixed}
.cmp--plans thead th{font-size:14px;padding-bottom:14px}
.cmp--plans thead th:nth-child(2){color:var(--chalk)}
.cmp--plans thead th:nth-child(3){color:var(--signal)}
.cmp--plans thead th:nth-child(4){color:var(--mint)}
.cmp--plans tbody th{width:34%;font-size:17px}
.cmp--plans tbody td{color:var(--chalk);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.gloss{margin-top:26px;max-width:60ch;font-size:16.5px;line-height:1.55;color:var(--chalk-dim)}
.soonbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 22px;align-items:baseline;margin-top:52px;padding:22px 0;border-top:2px dashed var(--chalk-dim)}
.soonbar .soon{justify-self:start}
.soonbar p{max-width:62ch;font-size:16px;line-height:1.55;color:var(--chalk)}
.soonbar .more{margin-top:0}
.fineprint{padding-top:18px;border-top:1px solid var(--rule);font-size:15px;color:var(--chalk-dim)}
@media(max-width:820px){.soonbar{grid-template-columns:1fr}}

/* ---------- 5. Claude paragraph ---------- */
.claude-say{max-width:36ch;font-weight:700;font-size:clamp(22px,2.4vw,31px);line-height:1.28;letter-spacing:-.025em}
.s-signal .more{color:var(--sea)}

/* link on its own line inside an FAQ answer */
.faq-a .more{margin-top:6px}