.brand__pro {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-wash);
  border: 1px solid var(--brand); border-radius: 4px; padding: 2px 6px;
}

.hero__mid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 {
  font-weight: 400;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
  font-size: clamp(2.5rem, 5.8vw, 4.35rem);
  max-width: 19ch;
}
.buy { align-items: center; }

.eyebrow__win { white-space: nowrap; }

/* Comparison table (.tablewrap / .cmp / .hint) lives in shared.css
   — it is used by this template and template-compare.php. */

.pill {
  margin-left: auto;
  font-size: 11px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}

.wgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 10px; }
.wg {
  font-size: 11.5px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 9px; background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.wg.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.wnote {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.wnote strong { color: var(--brand); }

.fieldrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 11px; border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.fieldrow:first-of-type { border-top: 0; }
.fieldrow__l { color: var(--ink-3); }
.fieldrow__v {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.fieldrow--sel .fieldrow__v { font-weight: 400; }
.swatch {
  width: 14px; height: 14px; border-radius: 3px;
  background: #1d2327; border: 1px solid var(--line);
}

.feat__show .cz {
  width: 100%;
  font-size: 12.5px;
}
.feat__demo-note {
  margin-top: 9px;
  font-size: 12px;
  color: var(--ink-3);
}
.feat__show .cz__preview {
  border-top: 0;
  border-bottom: 1px solid var(--wp-line);
  min-height: 0;
  padding: 14px 14px 16px;
}
.feat__show .cz__sample {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feat__show .cz__sample[contenteditable]:focus {
  outline: 2px solid var(--wp-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.tiers__note {
  margin-top: 20px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
}

.foot__in a { color: var(--ink-2); text-decoration: none; }
.foot__in a:hover { color: var(--brand); }
.foot__meta { max-width: 46ch; }

@media (max-width: 560px) {
  .wgrid { grid-template-columns: 1fr; }
  .readout { gap: 12px 20px; }
}