/* Soccer Edge — Design System */
/* Athletic Precision: Deep navy, electric blue, warm sand */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Navy depths */
  --navy-950: #020617;
  --navy-900: #0B1A2B;
  --navy-800: #0f172a;
  --navy-700: #1e293b;
  --navy-600: #334155;
  --navy-500: #475569;
  --navy-400: #64748b;
  --navy-300: #94a3b8;
  --navy-200: #cbd5e1;
  --navy-100: #e2e8f0;
  --navy-50: #f1f5f9;

  /* Electric blue */
  --blue-600: #2F6BFF;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;
  --blue-200: #bfdbfe;
  --blue-100: #dbeafe;
  --blue-50: #eff6ff;
  --blue-glow: rgba(47, 107, 255, 0.15);

  /* Warm sand */
  --sand-600: #92794a;
  --sand-500: #b09468;
  --sand-400: #c4ad84;
  --sand-300: #d8c9a8;
  --sand-200: #e8dfc8;
  --sand-100: #f5f1e8;

  /* Emerald (for success/check states) */
  --green-500: #10b981;
  --green-400: #34d399;
  --green-100: #d1fae5;

  /* Red (for X states) */
  --red-500: #ef4444;
  --red-100: #fee2e2;
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: white;
  color: var(--navy-800);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
}
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.01em; line-height: 1.15; color: var(--navy-900); }
p { max-width: 68ch; }
a { color: var(--blue-600); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ============ NAVIGATION ============ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--navy-100);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}
.logo-mark {
  width: 38px;
  height: 38px;
  background: var(--blue-600);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
}
.logo-wordmark {
  font-weight: 650;
  font-size: 1.125rem;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}
.logo-wordmark span { color: var(--blue-600); }

.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
.nav-links a {
  color: var(--navy-600);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}
.nav-links a:hover { color: var(--navy-900); background: var(--navy-50); }
.nav-links a.active { color: var(--blue-600); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.125rem;
  background: var(--blue-600);
  color: white !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}
.nav-cta:hover { background: var(--blue-500); }

.mobile-toggle {
  display: flex;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy-700);
}
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .mobile-toggle { display: none; }
}

.mobile-nav {
  display: none;
  padding: 0.5rem 1.5rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid var(--navy-100);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 0.625rem 0;
  color: var(--navy-700);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--navy-50);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { color: var(--navy-900); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-blue { background: var(--blue-600); color: white; }
.btn-blue:hover { background: var(--blue-500); }

.btn-sand { background: var(--navy-800); color: white; }
.btn-sand:hover { background: var(--navy-700); }

.btn-outline {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--navy-300);
}
.btn-outline:hover { border-color: var(--navy-600); background: var(--navy-50); }
.section-dark .btn-outline, .cta-section .btn-outline { color: #fff; border-color: rgba(255,255,255,0.4); }

.btn-outline-blue {
  background: transparent;
  color: var(--blue-500);
  border: 1.5px solid var(--blue-500);
}
.btn-outline-blue:hover { background: var(--blue-50); }

.btn-lg { padding: 0.875rem 1.5rem; font-size: 1.0625rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

.btn-group { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ============ HERO SECTIONS ============ */
.hero {
  position: relative;
  background: #fff;
  padding: 8rem 1.5rem 3rem;
  border-bottom: 1px solid var(--navy-100);
}

.hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: var(--navy-600);
  padding: 0;
  border: none;
  background: none;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.hero h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 650;
  color: var(--navy-900);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
  max-width: 20ch;
}
.hero h1 .accent, .hero h1 .sand { color: inherit; }
.hero-sub {
  font-size: 1.1875rem;
  color: var(--navy-600);
  max-width: 58ch;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Sub-page heroes (smaller) */
.hero-sub-page {
  padding: 7rem 1.5rem 2.5rem;
}
.hero-sub-page h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ============ SECTIONS ============ */
section {
  padding: 4.5rem 1.5rem;
}
.section-light { background: white; }
.section-gray { background: var(--navy-50); }
.section-dark { background: var(--navy-900); }
.section-darker { background: var(--navy-950); }

.section-header {
  text-align: left;
  max-width: 720px;
  margin: 0 0 2.5rem;
}
.section-header h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.section-header p {
  font-size: 1.0625rem;
  color: var(--navy-600);
  line-height: 1.6;
}
.section-dark .section-header h2 { color: white; }
.section-dark .section-header p { color: var(--navy-400); }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy-500);
  margin-bottom: 0.5rem;
}
.section-dark .section-label { color: var(--blue-400); }

/* ============ FEATURE CARDS ============ */
.feature-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.feature-grid-2 { grid-template-columns: 1fr; }
.feature-grid-3 { grid-template-columns: 1fr; }
.feature-grid-4 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .feature-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .feature-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .feature-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.feature-card {
  background: white;
  border: 1px solid var(--navy-100);
  border-radius: 8px;
  padding: 1.5rem;
}
.feature-card-dark {
  background: var(--navy-800);
  border-color: rgba(255,255,255,0.06);
}

/* Icon tiles removed site-wide: a coloured square with a generic glyph says nothing a heading doesn't. */
.card-icon { display: none; }
.card-icon svg { width: 26px; height: 26px; }
.card-icon-blue { background: var(--blue-50); color: var(--blue-600); }
.card-icon-sand { background: var(--sand-100); color: var(--sand-600); }
.card-icon-green { background: var(--green-100); color: var(--green-500); }
.card-icon-red { background: var(--red-100); color: var(--red-500); }
.card-icon-navy { background: var(--navy-100); color: var(--navy-600); }

.feature-card h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--navy-900);
  margin-bottom: 0.375rem;
}
.feature-card p {
  color: var(--navy-600);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.feature-card-dark h3 { color: white; }
.feature-card-dark p { color: var(--navy-400); }

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.25rem;
  color: var(--blue-500);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: gap 0.2s;
}
.feature-link:hover { text-decoration: underline; }
.feature-link svg { width: 16px; height: 16px; }

/* ============ PRODUCT SPLIT (ClubEdge + CoachEdge) ============ */
.product-split {
  display: grid;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) { .product-split { grid-template-columns: 1fr 1fr; } }

.product-card {
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  background: #fff;
  border: 1px solid var(--navy-200);
}
.product-card-blue, .product-card-sand { background: #fff; }
.product-card-tag {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 1rem;
  padding: 0;
  color: var(--navy-500);
}
.tag-blue, .tag-sand { background: none; color: var(--navy-500); }

.product-card h3 {
  font-size: 1.375rem;
  font-weight: 650;
  color: var(--navy-900);
  margin-bottom: 0.375rem;
}
.product-card .product-subtitle {
  color: var(--navy-600);
  margin-bottom: 1.25rem;
}
.product-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.product-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--navy-700);
  font-size: 0.9375rem;
}
.product-list li svg { display: none; }
.product-list li::before { content: "–"; color: var(--navy-400); flex-shrink: 0; }

/* ============ DEMO CONTAINERS ============ */
.demo-frame {
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
}
.demo-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--navy-700);
}
.demo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-r { background: #ef4444; }
.dot-y { background: #eab308; }
.dot-g { background: #22c55e; }
.demo-url {
  margin-left: 1rem;
  font-size: 0.75rem;
  color: var(--navy-500);
  font-family: monospace;
}
.demo-body { padding: 1.5rem; }

/* Demo tabs */
.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.demo-tab {
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  background: var(--navy-700);
  color: var(--navy-300);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.demo-tab.active { background: var(--blue-600); color: white; }
.demo-tab:hover:not(.active) { background: var(--navy-600); color: white; }
.demo-panel { display: none; }
.demo-panel.active { display: block; }

/* ============ LIVE BADGE ============ */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.live-dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ============ STATS ROW ============ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.stat-item { text-align: center; }
.stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--blue-400);
  letter-spacing: -1px;
}
.stat-label {
  font-size: 0.875rem;
  color: var(--navy-400);
  font-weight: 500;
  margin-top: 0.25rem;
}

/* ============ COMPARISON TABLE ============ */
.compare-wrap {
  max-width: 1000px;
  margin: 0 auto;
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.compare-table th,
.compare-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--navy-100);
  font-size: 0.9375rem;
}
.compare-table thead th {
  font-weight: 600;
  color: var(--navy-600);
  background: var(--navy-50);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.compare-table thead th:last-child {
  background: var(--blue-50);
  color: var(--blue-600);
}
.compare-table td:first-child {
  font-weight: 500;
  color: var(--navy-700);
}
.compare-table td:nth-child(2) { text-align: center; color: var(--navy-400); }
.compare-table td:last-child { text-align: center; background: rgba(37, 99, 235, 0.03); }

.compare-category td {
  background: var(--navy-100) !important;
  font-weight: 600 !important;
  color: var(--navy-600) !important;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.icon-check {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-500);
  align-items: center;
  justify-content: center;
}
.icon-x {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy-100);
  color: var(--navy-400);
  align-items: center;
  justify-content: center;
}
.icon-dollar {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sand-100);
  color: var(--sand-600);
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.icon-nominal {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-600);
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
}
.icon-check svg, .icon-x svg { width: 14px; height: 14px; }

/* ============ STORY / TESTIMONIAL ============ */
.story-split {
  display: grid;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) { .story-split { grid-template-columns: 1fr 1fr; } }

.quote-card {
  background: var(--navy-50);
  border-radius: 8px;
  padding: 1.75rem;
  border: 1px solid var(--navy-200);
}
.quote-card blockquote {
  font-size: 1.125rem;
  color: var(--navy-600);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.quote-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.quote-avatar {
  width: 48px;
  height: 48px;
  background: var(--blue-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.quote-name { font-weight: 600; color: var(--navy-800); }
.quote-role { font-size: 0.875rem; color: var(--navy-500); }

/* ============ FAQ ============ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.faq-list details {
  border-bottom: 1px solid var(--navy-200);
  padding: 1.25rem 0;
}
.faq-list summary {
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  color: var(--navy-800);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-list summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--navy-400);
  transition: transform 0.2s;
}
.faq-list details[open] summary::after {
  content: '−';
}
.faq-list details p {
  margin-top: 0.75rem;
  color: var(--navy-500);
  line-height: 1.7;
}

/* ============ CTA SECTION ============ */
.cta-section {
  background: var(--navy-900);
  padding: 4.5rem 1.5rem;
  text-align: left;
  position: relative;
}
.cta-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}
.cta-content h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 650;
  color: white;
  margin-bottom: 0.75rem;
}
.cta-content p {
  color: var(--navy-400);
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

/* ============ CONTACT FORM ============ */
.contact-form {
  max-width: 480px;
  margin: 0;
}
.form-field { margin-bottom: 1rem; }
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--navy-300);
  color: var(--navy-900);
  font-family: inherit;
  font-size: 1rem;
}
.form-input::placeholder { color: var(--navy-400); }
.form-input:focus { outline: 2px solid var(--blue-500); outline-offset: 1px; border-color: var(--blue-500); }
textarea.form-input { resize: vertical; min-height: 100px; }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--navy-950);
  padding: 4rem 1.5rem 2rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-brand p {
  color: var(--navy-400);
  font-size: 0.9375rem;
  margin-top: 1rem;
  max-width: 280px;
}
.footer-col h4 {
  color: var(--navy-300);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  color: var(--navy-500);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: 0.25rem 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--blue-400); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--navy-600);
  font-size: 0.875rem;
}

/* ============ FEATURE ROW (alternating image/text) ============ */
.feature-row {
  display: grid;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 0;
}
@media (min-width: 768px) {
  .feature-row { grid-template-columns: 1fr 1fr; }
  .feature-row.reverse { direction: rtl; }
  .feature-row.reverse > * { direction: ltr; }
}
.feature-row h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy-800);
  margin-bottom: 0.75rem;
  letter-spacing: -0.25px;
}
.feature-row p {
  color: var(--navy-500);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.feature-row .tag {
  display: inline-flex;
  padding: 0.25rem 0.625rem;
  background: var(--blue-50);
  color: var(--blue-600);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ============ CHECKLIST ============ */
.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
}
.checklist li svg { display: none; }
.checklist li::before { content: "–"; color: var(--navy-400); flex-shrink: 0; }
.checklist-dark li { color: var(--navy-200); }

/* No entrance animations: content is readable the instant it paints. */
.animate-in, .delay-1, .delay-2, .delay-3, .delay-4 { animation: none; opacity: 1; }

/* ============ UTILITY ============ */
.text-center { text-align: center; }
.text-white { color: white; }
.text-muted { color: var(--navy-500); }
.text-sm { font-size: 0.875rem; }
.mt-2 { margin-top: 2rem; }
.mt-4 { margin-top: 4rem; }
.mb-2 { margin-bottom: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-800 { max-width: 800px; }
.max-w-640 { max-width: 640px; }
.gap-1 { gap: 1rem; }

/* Stoplight indicators */
.dot-green { width: 22px; height: 22px; border-radius: 50%; background: #22c55e; }
.dot-yellow { width: 22px; height: 22px; border-radius: 50%; background: #eab308; }
.dot-red { width: 22px; height: 22px; border-radius: 50%; background: #ef4444; }

/* ── Grouped feature breakdown ──────────────────────────────────────────────
   The highlights section used to be one flat wall of a dozen cards. As the
   platform grew that stopped being readable: a club admin scanning for
   "can it take payments in instalments" had to read every card. Features are
   now grouped by the job they do, with a heading per group. */
.feature-group { margin-bottom: 3.5rem; }
.feature-group:last-child { margin-bottom: 0; }
.feature-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--navy-100, #e2e8f0);
  flex-wrap: wrap;
}
.feature-group-head h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--navy-800, #1e293b);
  margin: 0;
}
.feature-group-head p {
  font-size: 0.9375rem;
  color: var(--navy-500, #64748b);
  margin: 0;
  line-height: 1.5;
}
.tag-new {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--blue-500, #2563eb);
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
  white-space: nowrap;
}
/* A compact list inside a card — the sub-points of one feature, so a reader can
   see what it actually includes without opening another page. */
.card-points {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}
.card-points li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--navy-500, #64748b);
  margin-bottom: 0.3rem;
}
.card-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-500, #2563eb);
}

/* ============ FIGURES ============ */
.figure {
  margin: 0 auto 2rem;
  max-width: 1000px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--navy-200);
  background: var(--navy-900);
}
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption {
  padding: 0.875rem 1.25rem;
  background: white;
  border-top: 1px solid var(--navy-100);
  color: var(--navy-500);
  font-size: 0.875rem;
  line-height: 1.5;
}
.figure figcaption strong { color: var(--navy-800); font-weight: 600; }
@media (max-width: 640px) {
  .figure figcaption { font-size: 0.8125rem; padding: 0.75rem 1rem; }
}

/* ============ PLAIN HOME (2026-10) ============
   The home page stopped pretending to be a SaaS launch: no badges, gradients,
   icon tiles or staggered fades. Left-aligned text, one typeface, real artifacts. */
.hero-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
.hero-fact { margin-top: 1.75rem; color: var(--navy-500); font-size: 0.9375rem; }
.hero-fact a { color: inherit; }
.artifact { border: 1px solid var(--navy-200); border-radius: 8px; overflow: hidden; background: #fff; }
.artifact img { display: block; width: 100%; height: auto; }
.artifact figcaption { padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--navy-600); border-top: 1px solid var(--navy-100); line-height: 1.5; }
.two-col { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .two-col { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 0.75rem 0; border-top: 1px solid var(--navy-100); }
.plain-list li:last-child { border-bottom: 1px solid var(--navy-100); }
.plain-list b { display: block; font-weight: 600; color: var(--navy-900); }
.plain-list span { color: var(--navy-600); font-size: 0.9375rem; }
.col-title { font-size: 1.125rem; font-weight: 650; margin-bottom: 0.25rem; }
.col-sub { color: var(--navy-600); margin-bottom: 1.25rem; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; padding-top: 0.75rem; border-top: 2px solid var(--navy-900); }
.steps li::before { content: counter(step); display: block; font-size: 0.875rem; color: var(--navy-500); margin-bottom: 0.5rem; }
.steps b { display: block; font-weight: 650; margin-bottom: 0.375rem; }
.steps p { font-size: 0.9375rem; color: var(--navy-600); }
.price-block { display: grid; gap: 2rem; }
@media (min-width: 800px) { .price-block { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.price-big { font-size: 2.25rem; font-weight: 650; color: var(--navy-900); letter-spacing: -0.01em; }
.price-note { color: var(--navy-600); margin-top: 0.5rem; }
.prose p { margin-bottom: 1rem; color: var(--navy-700); }
.prose p:last-child { margin-bottom: 0; }
.byline { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--navy-500); }
.compare-plain td, .compare-plain th { padding: 0.75rem 1rem; }
.compare-plain td:nth-child(2), .compare-plain td:last-child { text-align: left; background: none; }
.compare-plain .yes { color: var(--navy-900); font-weight: 600; }
.compare-plain .no { color: var(--navy-400); }
.cta-plain { background: var(--navy-50); border-top: 1px solid var(--navy-100); }
.cta-plain h2 { color: var(--navy-900); }
.cta-plain p { color: var(--navy-600); }
.cta-grid { display: grid; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 800px) { .cta-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ---- Club screenshot gallery -------------------------------------------
   Three artifacts in one frame. Built on .artifact so it inherits the border,
   radius and caption styling rather than growing a parallel look.
   Slides are stacked and cross-faded, so the frame never changes height and
   the page does not jump as it rotates. */
.gallery { position: relative; }
.gallery-stage { position: relative; }
.gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.gallery-slide.is-active { position: relative; opacity: 1; }
.gallery-slide img { display: block; width: 100%; height: auto; }
.gallery-caption { padding: .75rem 1rem; font-size: .875rem; color: var(--navy-600);
  border-top: 1px solid var(--navy-100); line-height: 1.5; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* Every caption stays in the DOM, all three in the SAME grid cell, so the box is
   always as tall as the LONGEST one and the page does not jump when the rotation
   reaches a wordier slide. A fixed min-height would only hold at one width. */
.gallery-captions { display: grid; flex: 1 1 16rem; }
.gallery-captions > span { grid-area: 1 / 1; opacity: 0; transition: opacity .4s ease; }
.gallery-captions > span.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gallery-captions > span { transition: none; } }
.gallery-dots { display: flex; gap: .5rem; flex-shrink: 0; }
.gallery-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: var(--navy-200); cursor: pointer; transition: background .2s ease; }
.gallery-dot[aria-current="true"] { background: var(--blue-500, #2563eb); }
.gallery-dot:focus-visible { outline: 2px solid var(--blue-500, #2563eb); outline-offset: 2px; }
/* Rotation is decoration. Anyone who has asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) { .gallery-slide { transition: none; } }