/* =========================================================
   WP SailingFlow — Features page
   Builds on styles.css (shared header, footer, buttons, vars,
   .section, .feature-grid, .feature, .check-list, .code-card,
   .publish-grid, .cta-band)
   ========================================================= */

/* ---------- Pillar quick-nav chips ---------- */
.pillars { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:26px 24px 0; max-width:var(--maxw); margin:0 auto; }
.pillar {
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; font-size:14.5px; font-weight:600; color:var(--ink);
  transition:border-color .15s, transform .15s, color .15s;
}
.pillar:hover { border-color:var(--sea); color:var(--sea); transform:translateY(-2px); }
.pillar svg { width:18px; height:18px; color:var(--sea); }

/* ---------- Pro tag ---------- */
.pro-tag {
  display:inline-block; vertical-align:middle;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:2px 7px; border-radius:999px; margin-left:6px;
  position:relative; top:-1px;
}
.feature h3 .pro-tag { font-size:9px; }

/* ---------- Section intro alignment ---------- */
.section-head.left { text-align:left; margin-left:0; margin-right:0; max-width:62ch; }

/* ---------- Showcase rows reuse .publish-grid; add media frame ---------- */
.showcase-media {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; overflow:hidden;
}
.showcase-cap { font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 12px; }

/* ---------- Mock standings table ---------- */
.mock {
  width:100%; border-collapse:collapse; font-size:13.5px; color:var(--ink);
  font-family:var(--sans);
}
.mock th, .mock td { padding:9px 10px; text-align:center; white-space:nowrap; }
.mock thead th {
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
  border-bottom:2px solid var(--line); font-weight:700;
}
.mock tbody tr { border-bottom:1px solid var(--line); }
.mock tbody tr:nth-child(even) { background:var(--foam); }
.mock .pos { font-weight:700; color:var(--sea-dark); width:36px; }
.mock .boat { text-align:left; font-weight:600; }
.mock .sail { color:var(--ink-soft); }
.mock .net { font-weight:700; }
.mock .drop { color:var(--ink-soft); text-decoration:line-through; opacity:.55; }
.mock .badge { display:block; font-size:10px; color:var(--accent); font-weight:700; }

/* ---------- Free vs Pro split ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:880px; margin:0 auto; }
.split-col {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px;
}
.split-col.pro { border-color:var(--accent); }
.split-col h3 { display:flex; align-items:center; gap:10px; font-size:21px; margin:0 0 16px; }
.split-col h3 .tag {
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
}
.split-col.free h3 .tag { background:var(--foam); color:var(--sea-dark); }
.split-col.pro h3 .tag { background:var(--accent); color:#fff; }
.split-foot { text-align:center; color:var(--ink-soft); font-size:14.5px; margin:24px auto 0; max-width:60ch; }

/* The mock table scrolls horizontally whenever it's wider than its card. */
.ref-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:820px) {
  .split { grid-template-columns:1fr; }
}