/* feature/compare-plans — public Plans & Features comparison (/compare-plans). Builds on help.css tokens and the
   shared public chrome; no framework, no inline styles, no script. */
.cmp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cmp-main { max-width: 1120px; }
.cmp-hero { text-align: center; padding: 16px 0 28px; }
.cmp-hero h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--help-ink); }
.cmp-hero p { color: var(--help-muted); font-size: 1.05rem; margin: 0; }
.cmp-hero .cmp-trial-lede { margin-top: 10px; font-size: 0.95rem; color: var(--help-ink-soft); font-weight: 600; }

.cmp-table-wrap { border: 1px solid var(--help-line); border-radius: 16px; background: var(--help-surface); }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp-table thead th, .cmp-table thead td { position: sticky; top: 64px; z-index: 2; background: var(--help-surface);
  border-bottom: 1px solid var(--help-line); }
.cmp-corner { width: 40%; border-top-left-radius: 16px; }
.cmp-plan { width: 20%; padding: 14px 10px; text-align: center; vertical-align: middle; }
.cmp-pricing td, .cmp-pricing th { border-bottom: 1px solid var(--help-line); }
.cmp-pricecell { text-align: center; vertical-align: top; padding: 4px 12px 20px; }
.cmp-plan:last-child { border-top-right-radius: 16px; }
.cmp-plan__name { display: block; font-size: 1.1rem; font-weight: 800; color: var(--help-ink); }
.cmp-plan--professional .cmp-plan__name { color: var(--help-indigo); }
.cmp-price { margin: 10px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cmp-price__amount { font-size: 1.5rem; font-weight: 800; color: var(--help-ink); letter-spacing: -0.01em; }
.cmp-price--unavailable .cmp-price__amount { font-size: 1.05rem; color: var(--help-ink-soft); }
.cmp-price__unit { font-size: 0.8rem; color: var(--help-muted); font-weight: 500; }
.cmp-plan__custom { margin: 2px 0 0; font-size: 0.8rem; color: var(--help-ink-soft); font-weight: 600; }
.cmp-cta { display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 10px; background: var(--help-indigo);
  color: #fff; font-weight: 700; font-size: 0.88rem; text-decoration: none; }
.cmp-cta:hover { background: #1b12ac; }
.cmp-cta--ghost { background: transparent; color: var(--help-indigo); border: 1px solid #c9cdf2; }
.cmp-cta--ghost:hover { background: var(--help-tint); }
.cmp-cta:focus-visible, .cmp-notes a:focus-visible { outline: 2px solid var(--help-indigo-bright); outline-offset: 2px; }

.cmp-cat th { text-align: left; padding: 22px 20px 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--help-indigo); background: var(--help-bg); border-bottom: 1px solid var(--help-line); }
.cmp-row th, .cmp-row td { border-bottom: 1px solid var(--help-line); }
.cmp-group:last-of-type .cmp-row:last-child th, .cmp-group:last-of-type .cmp-row:last-child td { border-bottom: 0; }
.cmp-feature { text-align: left; padding: 14px 20px; font-weight: 400; vertical-align: top; }
.cmp-feature__name { display: block; font-weight: 700; color: var(--help-ink); }
.cmp-feature__desc { display: block; margin-top: 2px; font-size: 0.88rem; color: var(--help-muted); line-height: 1.45; }
.cmp-note { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--help-ink-soft); font-style: italic; }
.cmp-cell { text-align: center; vertical-align: middle; padding: 14px 10px; }
.cmp-cell__plan { display: none; }
.cmp-mark { font-size: 1.15rem; font-weight: 800; line-height: 1; }
.cmp-cell--yes .cmp-mark { color: #067647; }
.cmp-cell--no .cmp-mark { color: #98a2b3; }
.cmp-cell__value { font-weight: 700; color: var(--help-ink); }
.cmp-cell__condition { font-size: 0.8rem; line-height: 1.35; color: var(--help-ink-soft); }
.cmp-cell[data-plan="professional"] { background: rgba(18, 10, 143, 0.025); }

.cmp-notes { max-width: 760px; margin: 28px auto 0; color: var(--help-ink-soft); font-size: 0.92rem; line-height: 1.6; }
.cmp-notes p { margin: 0 0 10px; }
.cmp-notes a { color: var(--help-indigo); font-weight: 600; }

/* Phones: every feature keeps all three plan values side by side (labelled), so no difference is hidden. */
@media (max-width: 720px) {
  .cmp-main { padding-left: 12px; padding-right: 12px; }
  .cmp-table, .cmp-table thead, .cmp-table tbody, .cmp-table tr { display: block; }
  /* The whole thead is pinned (its parent, the table, spans the page), so the plan names stay in view. */
  .cmp-table thead { position: sticky; top: 64px; z-index: 2; background: var(--help-surface); border-bottom: 1px solid var(--help-line);
    border-radius: 16px 16px 0 0; }
  .cmp-table thead tr, .cmp-table .cmp-pricing tr, .cmp-table .cmp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp-table thead th, .cmp-table thead td { position: static; border-bottom: 0; }
  .cmp-corner, .cmp-pricing__label { display: none; }
  .cmp-plan { width: auto; padding: 10px 4px; }
  .cmp-plan__name { font-size: 0.95rem; }
  .cmp-pricecell { padding: 2px 4px 14px; }
  .cmp-price__amount { font-size: 1.05rem; }
  .cmp-price__unit, .cmp-plan__custom { font-size: 0.68rem; }
  .cmp-cta { margin-top: 8px; padding: 6px 8px; font-size: 0.75rem; }
  .cmp-cat th { display: block; padding: 18px 14px 8px; }
  .cmp-table .cmp-row { border-bottom: 1px solid var(--help-line); }
  .cmp-row th, .cmp-row td { border-bottom: 0; }
  .cmp-feature { grid-column: 1 / -1; padding: 12px 14px 4px; }
  .cmp-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 12px; }
  .cmp-cell__plan { display: block; font-size: 0.68rem; font-weight: 600; color: var(--help-muted); }
}