/* Pricing page styles (KAN-156). Lives in its own file rather than a <style>
   block so the page stays clean under the marketing CSP's style-src, the same
   way signup.js keeps the homepage clean under script-src 'self'. The palette
   is not here: pricing.html links tokens.css ahead of this file (KAN-208), and
   the reset, header, nav, buttons and footer are in site.css (KAN-223), which
   it links next. Only what is specific to this page is below. */

/* --c-ink-honey, not --c-accent (KAN-209): links are body text, and the honey
   fill is 4.29:1 on the light page background, under WCAG AA. The ink is the
   same hue at 4.72:1 on bg, 5.06:1 on the cards (dark mode 7.80:1 / 6.90:1).
   infra/tests/test_marketing_contrast.py measures this rule. */
a { color: rgb(var(--c-ink-honey)); }

/* --- layout --- */

section { padding: 2.75rem 0; }
section + section { border-top: 1px solid rgb(var(--c-line)); }

h1 {
  font-size: 2rem;
  /* Raw honey is fine here alone: 2rem is WCAG large text (3:1 applies) and
     the fill measures 4.29:1. Everything body-sized takes --c-ink-honey. */
  color: rgb(var(--c-accent));
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
h2 { font-size: 1.35rem; margin: 0 0 1rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
p { margin: 0 0 1rem; }
.lede { color: rgb(var(--c-muted)); font-size: 1.05rem; max-width: 46rem; }
.small { font-size: 0.9rem; }

/* --- plan cards --- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.plan {
  border: 1px solid rgb(var(--c-line));
  border-radius: 14px;
  background: rgb(var(--c-surface));
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
}
.plan.featured { border-color: rgb(var(--c-primary)); border-width: 2px; }
.plan h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--c-muted)); }
.price { font-size: 1.9rem; font-weight: 700; color: rgb(var(--c-ink)); line-height: 1.15; }
.price .per { font-size: 0.95rem; font-weight: 600; color: rgb(var(--c-muted)); }
.price-alt { margin: 0.15rem 0 0.9rem; color: rgb(var(--c-muted)); font-size: 0.95rem; }
.plan p { font-size: 0.95rem; }
.plan ul { margin: 0 0 0.5rem; padding-left: 1.1rem; font-size: 0.95rem; }
.plan li { margin-bottom: 0.3rem; }
/* The lifetime seat count (KAN-186). Sized and coloured like the rest of the
   card's prose deliberately -- it is a fact about the plan, not a badge or an
   alarm, and giving it its own colour would make it read as pressure. */
.seats {
  margin: -0.4rem 0 0.9rem;
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
}
/* A tranche nobody can buy into. The price stops being the loudest thing on
   the card, and the "Sold out" pill above it says why. Muted, not struck
   through: the price is still accurate, it is just not for sale. */
.plan.sold-out .price { color: rgb(var(--c-muted)); }
.plan.sold-out .tag { background: rgb(var(--c-line) / 0.7); }

.tag {
  align-self: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgb(var(--c-primary) / 0.18);
  color: rgb(var(--c-ink));
}

/* --- callout bands --- */

.callout {
  border: 1px solid rgb(var(--c-line));
  border-left: 4px solid rgb(var(--c-accent));
  border-radius: 10px;
  background: rgb(var(--c-surface));
  padding: 1.1rem 1.25rem;
}
.callout h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.callout p:last-child { margin-bottom: 0; }

/* --- comparison table --- */

.table-scroll { overflow-x: auto; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.95rem;
}
caption { text-align: left; color: rgb(var(--c-muted)); font-size: 0.9rem; padding-bottom: 0.75rem; }
th, td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid rgb(var(--c-line)); vertical-align: top; }
thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--c-muted)); }
thead th:not(:first-child), tbody td { text-align: center; }
tbody th { font-weight: 500; }
tbody th[colspan] {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* 0.82rem bold is still "normal" text to WCAG, so the honey ink, not the
     honey fill; the 40% rule under it is non-text and keeps the fill. */
  color: rgb(var(--c-ink-honey));
  padding-top: 1.4rem;
  border-bottom-color: rgb(var(--c-accent) / 0.4);
}
tbody tr:first-child th[colspan] { padding-top: 0.55rem; }
td .yes { color: rgb(var(--c-ok)); font-weight: 700; }
td .no { color: rgb(var(--c-muted)); }
td .qual { font-size: 0.88rem; color: rgb(var(--c-muted)); }
.footnote { font-size: 0.88rem; color: rgb(var(--c-muted)); margin-top: 0.9rem; }

/* --- promise / policy lists --- */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem 2rem;
}
.cols h3 { color: rgb(var(--c-ink)); }
.cols p { font-size: 0.95rem; color: rgb(var(--c-muted)); }
.promises { list-style: none; margin: 0; padding: 0; }
.promises li {
  padding: 0.55rem 0 0.55rem 1.6rem;
  border-bottom: 1px solid rgb(var(--c-line));
  position: relative;
}
.promises li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: rgb(var(--c-ok));
  font-weight: 700;
}
.promises li:last-child { border-bottom: none; }

/* --- CTA --- */

.cta { text-align: center; }
.cta .lede { margin-left: auto; margin-right: auto; }
.cta .pill { margin-top: 0.5rem; }

@media (max-width: 640px) {
  h1 { font-size: 1.6rem; }
  section { padding: 2rem 0; }
}