/* =========================================================
   WP SailingFlow — Pricing page
   Builds on styles.css (.page-masthead, .pricing-grid, .plan,
   .plan-featured, .plan-badge, .plan-price, .check-list, .faq,
   .cta-band) and adds the per-site note + comparison table.
   ========================================================= */

/* ---------- Plan tweaks ---------- */
.plans-wrap { padding-top:56px; }
.plan-price .per { line-height:1.3; }
.plan-sub {
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--ink-soft); margin:2px 0 0;
}
.plan-note { margin:0 0 22px; font-size:13px; color:var(--ink-soft); }

/* Per-website explainer band under the cards */
.per-site {
  display:flex; align-items:flex-start; gap:14px;
  max-width:760px; margin:30px auto 0;
  background:var(--foam); border:1px solid var(--line); border-left:3px solid var(--sea);
  border-radius:10px; padding:16px 20px;
}
.per-site svg { flex:none; width:24px; height:24px; color:var(--sea); margin-top:1px; }
.per-site p { margin:0; font-size:15px; color:var(--ink-soft); }
.per-site strong { color:var(--ink); }

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.compare {
  width:100%; border-collapse:collapse; min-width:520px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.compare th, .compare td { padding:14px 18px; border-bottom:1px solid var(--line); text-align:left; }
.compare thead th { background:var(--ink); color:#fff; font-family:var(--sans); font-size:14px; }
.compare thead th:not(:first-child) { text-align:center; width:130px; }
.compare thead .pro-col { background:var(--sea-dark); }
.compare tbody tr:last-child td { border-bottom:none; }
.compare tbody tr:nth-child(even) { background:var(--paper); }
.compare .group td {
  background:var(--foam); font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sea-dark); font-weight:700; padding:10px 18px;
}
.compare .feat { color:var(--ink); font-weight:500; }
.compare .feat small { display:block; font-weight:400; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.compare td.cell { text-align:center; font-weight:700; }

/* check / dash marks */
.mark-yes, .mark-no { display:inline-block; width:22px; height:22px; border-radius:50%; }
.mark-yes {
  background:var(--sea);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/15px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/15px no-repeat;
}
.mark-no { background:var(--line); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2' fill='white'/%3E%3C/svg%3E") center/15px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2' fill='white'/%3E%3C/svg%3E") center/15px no-repeat; }
.compare .pro-cell { background:rgba(14,110,142,.05); }

.compare-foot { text-align:center; color:var(--ink-soft); font-size:13.5px; margin:16px auto 0; }