/* ============================================================
   Complyology — pricing page
   ------------------------------------------------------------
   Loaded after site.css; everything here is scoped to /pricing.
   The page's job is comparison, so the structure separates the two
   FIRM tiers (same buyer, real choice between them) from the DIRECT
   tier (a different buyer entirely) rather than lining up three
   cards and hoping the reader works it out.
   ============================================================ */

.ph{padding-top:72px;padding-bottom:8px}
.ph h1{font-size:clamp(38px,6vw,62px);line-height:1.05;letter-spacing:-.02em;margin-top:24px}

/* Screen-reader-only, for table captions and empty header cells. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── "never per" strip — the positioning, stated as a list of things
      that are NOT on the invoice. Struck through, because the claim is
      about absence. ───────────────────────────────────────────── */
.never{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px}
.never li{display:inline-flex;align-items:center;gap:9px;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--subtle);text-decoration:line-through;
  text-decoration-color:var(--chaos);text-decoration-thickness:1px;text-underline-offset:2px}
.never__x{position:relative;width:9px;height:9px;flex:none;text-decoration:none}
.never__x::before,.never__x::after{content:"";position:absolute;left:0;top:4px;
  width:9px;height:1.2px;background:var(--chaos)}
.never__x::before{transform:rotate(45deg)}
.never__x::after{transform:rotate(-45deg)}

/* ── band headers — name the buyer before showing them cards ── */
.bandh{margin-top:8px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.bandh--2{margin-top:72px}
.bandh p{font-size:14.5px;color:var(--muted);margin-top:12px;max-width:62ch;line-height:1.65}

/* ── firm tiers ───────────────────────────────────────────────
   align-items:stretch + column flex pins the CTA and the feature
   list to the same baseline across cards of unequal content. */
.tiers{display:grid;grid-template-columns:1fr;gap:24px;margin-top:32px;align-items:stretch}
@media(min-width:820px){.tiers--firm{grid-template-columns:1fr 1fr}}
.tier{position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.tier:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:var(--shadow-lg)}
.tier--hi{border-color:var(--ink);box-shadow:var(--shadow-md)}
.tier__flag{position:absolute;top:-11px;left:32px;display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--radius-sm);background:var(--ink);color:var(--ground);
  font-family:"JetBrains Mono",monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em}
.tier__flag .pip{width:4px;height:4px;border-radius:50%;background:var(--chaos)}
.tier__k{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--subtle)}
.tier__name{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:30px;letter-spacing:-.01em;
  margin:10px 0 0;line-height:1.1}
.tier__tag{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.6;min-height:3.2em}
/* margin-top:auto is what squares the cards up regardless of copy length. */
.tier__mid{margin-top:auto;padding-top:24px}
.tier__basis{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink);padding-bottom:16px}
.tier__cta{width:100%;justify-content:center}
.tier__f{list-style:none;padding:22px 0 0;margin:22px 0 0;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:11px}
.tier__f li{position:relative;padding-left:22px;font-size:13.5px;color:var(--muted);line-height:1.6}
.tier__f li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--chaos);opacity:.85}
.tier__f li b{color:var(--ink);font-weight:500}
.soon{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--border);
  border-radius:3px;font-family:"JetBrains Mono",monospace;font-size:8.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--subtle);vertical-align:1px}

/* ── direct tier — laid out horizontally so it reads as a different
      product, not a third column of the same comparison. ────── */
.direct{display:grid;grid-template-columns:1fr;gap:32px;margin-top:32px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.direct:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:var(--shadow-lg)}
@media(min-width:820px){.direct{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:52px}}
.direct__l{display:flex;flex-direction:column}
.direct__l .tier__basis{margin-top:auto;padding-top:24px}
.direct__r{border-top:1px solid var(--border);padding-top:22px;margin-top:0}
@media(min-width:820px){.direct__r{border-top:0;border-left:1px solid var(--border);
  padding-top:0;padding-left:44px}}

/* ── the "why no number" note ─────────────────────────────── */
.pnote{margin-top:44px;padding:24px 28px;border:1px solid var(--border);
  border-left:3px solid var(--chaos);border-radius:var(--radius);background:var(--surface);max-width:76ch}
.pnote p{font-size:14.5px;color:var(--muted);line-height:1.75}
.pnote b{color:var(--ink);font-weight:500}

/* ── comparison table ─────────────────────────────────────── */
.cmpwrap{margin-top:52px;overflow-x:auto;border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--card)}
.cmp{width:100%;min-width:600px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cmp th,.cmp td{padding:13px 18px;text-align:center;border-bottom:1px solid var(--border)}
.cmp thead th{position:sticky;top:0;background:var(--surface);
  font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--muted);font-weight:500;border-bottom:1px solid var(--border);z-index:1}
.cmp thead th.hi{color:var(--ink)}
.cmp tbody th{text-align:left;font-size:13.5px;font-weight:400;color:var(--ink);min-width:230px}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover th,.cmp tbody tr:hover td{background:var(--surface)}
.cmp td.hi{background:color-mix(in srgb,var(--chaos) 4%,transparent)}
.cmp tbody tr:hover td.hi{background:color-mix(in srgb,var(--chaos) 7%,transparent)}
.cmp td.n{color:var(--subtle)}
.cmp td.v{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.06em;color:var(--ink)}
.cmp td.s{font-family:"JetBrains Mono",monospace;font-size:9px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--subtle)}
/* A drawn tick rather than a glyph — an emoji or ✓ would be the one
   place on the site where a character carries brand weight. */
.tick{display:inline-block;width:13px;height:8px;border-left:1.6px solid var(--chaos);
  border-bottom:1.6px solid var(--chaos);transform:rotate(-45deg) translateY(-2px)}

/* ── how buying works ─────────────────────────────────────── */
.buy{list-style:none;padding:0;margin:52px 0 0;display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--border);border:1px solid var(--border)}
@media(min-width:760px){.buy{grid-template-columns:repeat(4,1fr)}}
.buy li{background:var(--card);padding:28px 24px;display:flex;flex-direction:column;gap:9px;
  position:relative;transition:background .2s var(--ease)}
.buy li:hover{background:var(--surface)}
.buy li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--chaos);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.buy li:hover::before{transform:scaleX(1)}
.buy__n{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;color:var(--chaos)}
.buy__t{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:18px;letter-spacing:-.005em}
.buy__d{font-size:13.5px;color:var(--muted);line-height:1.65}

/* Dark ground: cards need a lit top edge or they read as holes. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tier,
  :root:not([data-theme="light"]) .direct,
  :root:not([data-theme="light"]) .cmpwrap{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-md)}
}
:root[data-theme="dark"] .tier,
:root[data-theme="dark"] .direct,
:root[data-theme="dark"] .cmpwrap{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-md)}