/* ============================================================
   STYLE VARIANTS — applied via body class
   ============================================================
   .style-plain      (default — clean enterprise)
   .style-editorial  (massive display type, asymmetric)
   .style-data       (data-forward — chart motifs everywhere)
   .style-contrast   (alternating dark/light sections)
   .style-accent     (bold coral accent)
   ============================================================ */


/* ============================================================
   EDITORIAL — heavy display type, oversized section numbers
   ============================================================ */
body.style-editorial { font-family: 'Roboto', system-ui, sans-serif; }

body.style-editorial .h-display {
  font-size: clamp(56px, 10vw, 144px);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 0.98;
}
body.style-editorial .h-section {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.04;
}
body.style-editorial .lede { font-size: 21px; line-height: 1.5; }

body.style-editorial .eyebrow {
  font-size: 11px;
  letter-spacing: .2em;
  font-weight: 700;
}

/* Editorial hero */
body.style-editorial .hero { padding: 64px 0 32px; }
body.style-editorial .hero-grid { grid-template-columns: 1fr; gap: 56px; }
body.style-editorial .hero h1 em { font-style: normal; color: hsl(var(--primary)); }

/* Big section numbers as motif */
body.style-editorial .section-head {
  position: relative;
  padding-top: 40px;
}
body.style-editorial .section-head::before {
  content: attr(data-num);
  position: absolute;
  top: -20px; right: 0;
  font-size: 200px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: hsl(var(--primary) / .06);
  font-family: 'Roboto', sans-serif;
  pointer-events: none;
  z-index: 0;
}

body.style-editorial .benefit-tile { padding: 40px 32px; }
body.style-editorial .benefit-num {
  background: transparent;
  font-size: 36px; font-weight: 900;
  letter-spacing: -.02em;
  width: auto; height: auto;
  font-family: 'Roboto', sans-serif;
  color: hsl(var(--primary));
}
body.style-editorial .benefit-title { font-size: 22px; font-weight: 700; }

body.style-editorial .help-title { font-size: 32px; font-weight: 700; letter-spacing: -.008em; }
body.style-editorial .help-num {
  font-size: 18px; font-weight: 800; color: hsl(var(--primary));
  font-family: 'Roboto', sans-serif;
}
body.style-editorial .help-row { padding: 40px 0; }

body.style-editorial .testimonial-stat { font-size: 64px; font-weight: 800; letter-spacing: -.012em; }

body.style-editorial .step-title { font-size: 28px; font-weight: 700; letter-spacing: -.006em; }
body.style-editorial .why-title { font-size: 28px; font-weight: 700; letter-spacing: -.006em; }
body.style-editorial .pod-role { font-size: 20px; font-weight: 700; }


/* ============================================================
   DATA-FORWARD — chart motifs, dashboard-feel page
   ============================================================ */
body.style-data { background: hsl(220 20% 98%); }

body.style-data .hero {
  background:
    linear-gradient(0deg, transparent 39px, hsl(var(--border) / .35) 40px),
    linear-gradient(90deg, transparent 39px, hsl(var(--border) / .35) 40px);
  background-size: 40px 40px;
  background-position: -1px -1px;
}

body.style-data .benefit-tile { position: relative; overflow: hidden; }
body.style-data .benefit-tile::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, hsl(var(--primary)) var(--w, 20%), hsl(var(--border)) var(--w, 20%));
}
body.style-data .benefit-tile:nth-child(1)::after { --w: 80%; }
body.style-data .benefit-tile:nth-child(2)::after { --w: 95%; }
body.style-data .benefit-tile:nth-child(3)::after { --w: 70%; }
body.style-data .benefit-tile:nth-child(4)::after { --w: 60%; }
body.style-data .benefit-tile:nth-child(5)::after { --w: 88%; }
body.style-data .benefit-tile:nth-child(6)::after { --w: 75%; }

/* sparkline strips between sections */
body.style-data .help-row {
  background: linear-gradient(90deg, hsl(var(--primary) / .03), transparent 60%);
  padding-left: 24px;
  margin-left: -24px;
  border-radius: 8px;
}

body.style-data .step {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  padding: 32px;
  border-top: 3px solid hsl(var(--primary));
}
body.style-data .step + .step { border-left: 1px solid hsl(var(--border)); margin-left: 16px; }

body.style-data .testimonial { position: relative; padding-top: 56px; }
body.style-data .testimonial::before {
  content: '';
  position: absolute; top: 24px; left: 32px; right: 32px;
  height: 24px;
  background:
    linear-gradient(90deg, hsl(var(--primary)) 60%, hsl(var(--primary) / .25) 60%);
  border-radius: 2px;
  opacity: .5;
}

body.style-data .pod-row { background: hsl(var(--card)); }
body.style-data .pod-avatar {
  background: hsl(var(--primary));
  color: #fff;
  border-radius: 8px;
}


/* ============================================================
   HIGH CONTRAST — alternating dark/light sections
   ============================================================ */
body.style-contrast .nav { background: hsl(222 25% 10% / .92); border-bottom-color: hsl(222 22% 18%); }
body.style-contrast .nav-row, body.style-contrast .nav-links a, body.style-contrast .nav-brand { color: #fff; }
body.style-contrast .nav-brand-sub { color: hsl(220 9% 60%); }
body.style-contrast .nav-logo-full { filter: brightness(0) invert(1); }
body.style-contrast .nav-links a:hover { color: hsl(218 80% 70%); }
body.style-contrast .nav-cta .btn-secondary {
  background: transparent; color: #fff; border-color: rgb(255 255 255 / .2);
}
body.style-contrast .nav-cta .btn-secondary:hover { background: rgb(255 255 255 / .08); }

/* Hero — dark */
body.style-contrast .hero {
  background: hsl(222 25% 10%);
  color: #fff;
}
body.style-contrast .hero .lede,
body.style-contrast .hero-trust-item .lbl,
body.style-contrast .hero-floating-card .card-lbl,
body.style-contrast .hero-frame-url,
body.style-contrast .meta-lbl {
  color: hsl(220 9% 65%);
}
body.style-contrast .hero-trust { border-top-color: hsl(222 22% 18%); }
body.style-contrast .hero-bg-grid {
  background-image:
    linear-gradient(hsl(218 80% 62% / .12) 1px, transparent 1px),
    linear-gradient(90deg, hsl(218 80% 62% / .12) 1px, transparent 1px);
}
body.style-contrast .hero-eyebrow-pill {
  background: hsl(218 80% 62% / .15); color: hsl(218 80% 70%);
}
body.style-contrast .eyebrow-muted { color: hsl(220 9% 60%); }
body.style-contrast .hero .btn-secondary {
  background: transparent; color: #fff; border-color: rgb(255 255 255 / .25);
}
body.style-contrast .hero .btn-secondary:hover { background: rgb(255 255 255 / .08); }
body.style-contrast .hero .btn-primary { background: hsl(218 80% 62%); color: #0b1322; }
body.style-contrast .hero .btn-primary:hover { background: hsl(218 80% 70%); }
body.style-contrast .hero-floating-card { background: hsl(222 18% 14%); border-color: hsl(222 22% 22%); color: #fff; }
body.style-contrast .hero-frame { background: hsl(222 18% 14%); border-color: hsl(222 22% 22%); }
body.style-contrast .hero-frame-bar { background: hsl(222 18% 12%); border-color: hsl(222 22% 22%); }

/* Logo strip — keep light, but darker bg */
body.style-contrast .logo-strip { background: hsl(220 14% 96%); }

/* Benefits — light, default */

/* How we help — DARK */
body.style-contrast section#how {
  background: hsl(222 25% 10%) !important;
  color: #fff;
}
body.style-contrast section#how .help-body { color: hsl(220 9% 65%); }
body.style-contrast section#how .help-num { color: hsl(218 80% 70%); }
body.style-contrast section#how .help-row,
body.style-contrast section#how .help-list .help-row:last-child { border-color: hsl(222 22% 18%); }
body.style-contrast section#how .eyebrow { color: hsl(218 80% 70%); }
body.style-contrast section#how .lede { color: hsl(220 9% 65%); }

/* Plans — light */

/* How it works — DARK */
body.style-contrast .section:has(.steps) {
  background: hsl(222 25% 10%) !important;
  color: #fff;
}
body.style-contrast .section:has(.steps) .step-body { color: hsl(220 9% 65%); }
body.style-contrast .section:has(.steps) .step + .step { border-left-color: hsl(222 22% 18%); }
body.style-contrast .section:has(.steps) .eyebrow,
body.style-contrast .section:has(.steps) .step-num { color: hsl(218 80% 70%); }
body.style-contrast .section:has(.steps) .step { border-top-color: hsl(218 80% 62%); }
body.style-contrast .section:has(.steps) .step-week { color: hsl(220 9% 60%); }

/* Pod — light */

/* Why — DARK */
body.style-contrast .section:has(.why-grid) {
  background: hsl(222 25% 10%) !important;
  color: #fff;
}
body.style-contrast .section:has(.why-grid) .why-body { color: hsl(220 9% 65%); }
body.style-contrast .section:has(.why-grid) .why-grid,
body.style-contrast .section:has(.why-grid) .why-row { border-color: hsl(222 22% 18%); }
body.style-contrast .section:has(.why-grid) .eyebrow,
body.style-contrast .section:has(.why-grid) .why-num { color: hsl(218 80% 70%); }

/* Testimonials — DARK with big stats */
body.style-contrast .section:has(.testimonials-grid) {
  background: hsl(222 25% 8%) !important;
  color: #fff;
}
body.style-contrast .section:has(.testimonials-grid) .lede { color: hsl(220 9% 65%); }
body.style-contrast .section:has(.testimonials-grid) .testimonial {
  background: hsl(222 18% 13%);
  border-color: hsl(222 22% 22%);
}
body.style-contrast .section:has(.testimonials-grid) .testimonial-stat {
  color: hsl(218 80% 70%);
  font-size: 56px;
}
body.style-contrast .section:has(.testimonials-grid) .testimonial-meta { border-top-color: hsl(222 22% 22%); }
body.style-contrast .section:has(.testimonials-grid) .testimonial-role { color: hsl(220 9% 60%); }
body.style-contrast .section:has(.testimonials-grid) .eyebrow { color: hsl(218 80% 70%); }


/* ============================================================
   BOLD ACCENT — keep blue, add coral accent
   ============================================================ */
body.style-accent {
  --accent-warm: 12 88% 60%;        /* coral */
  --accent-warm-soft: 12 88% 95%;
}

body.style-accent .eyebrow { color: hsl(var(--accent-warm)); }
body.style-accent .hero-eyebrow-pill {
  background: hsl(var(--accent-warm) / .12);
  color: hsl(var(--accent-warm));
}
body.style-accent .hero-eyebrow-pill .dot { background: hsl(var(--accent-warm)); }

body.style-accent .btn-primary {
  background: hsl(var(--accent-warm));
  color: #fff;
}
body.style-accent .btn-primary:hover { background: hsl(12 88% 52%); }

body.style-accent .benefit-num {
  background: hsl(var(--accent-warm) / .12);
  color: hsl(var(--accent-warm));
}

body.style-accent .help-num,
body.style-accent .step-num,
body.style-accent .why-num {
  color: hsl(var(--accent-warm));
}
body.style-accent .step { border-top-color: hsl(var(--accent-warm)); }

body.style-accent .testimonial-stat { color: hsl(var(--accent-warm)); }

body.style-accent .plan-featured {
  border-color: hsl(var(--accent-warm));
  box-shadow: 0 0 0 4px hsl(var(--accent-warm) / .08), 0 20px 40px -20px hsl(var(--accent-warm) / .25);
}
body.style-accent .plan-badge { background: hsl(var(--accent-warm)); }
body.style-accent .plan-feature .check {
  background: hsl(var(--accent-warm) / .14);
  color: hsl(var(--accent-warm));
}

body.style-accent .final-cta { background: hsl(222 25% 10%); }
body.style-accent .final-cta .btn-primary {
  background: hsl(var(--accent-warm));
  color: #fff;
}
body.style-accent .final-cta .btn-primary:hover { background: hsl(12 88% 52%); }
body.style-accent .final-cta::before { background: hsl(var(--accent-warm) / .18); }
body.style-accent .final-cta-list .check {
  background: hsl(var(--accent-warm) / .25);
  color: hsl(var(--accent-warm));
}
body.style-accent .final-cta-side .eyebrow { color: hsl(12 88% 70%); }
body.style-accent .nav-links a:hover { color: hsl(var(--accent-warm)); }
body.style-accent .nav-cta .btn-primary { background: hsl(var(--accent-warm)); color: #fff; }
body.style-accent .nav-cta .btn-primary:hover { background: hsl(12 88% 52%); }
body.style-accent .btn-link { color: hsl(var(--accent-warm)); }
body.style-accent .faq-item.open .faq-icon { background: hsl(var(--accent-warm)); }
body.style-accent ::selection { background: hsl(var(--accent-warm) / .25); }

body.style-accent .plans-table thead th.featured-col::before { background: hsl(var(--accent-warm)); }
body.style-accent .plans-table thead th.featured-col,
body.style-accent .plans-table tbody td.featured-col { background: hsl(var(--accent-warm) / .04); }
body.style-accent .plans-table .check-icon { color: hsl(var(--accent-warm)); }


/* ============================================================
   REMIX — editorial type + dark/light rhythm + accent
   ============================================================ */
body.style-remix { font-family: 'Roboto', system-ui, sans-serif; }

/* editorial type — heavy but breathing */
body.style-remix .h-display {
  font-size: clamp(56px, 10vw, 144px);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 0.98;
}
body.style-remix .h-section {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.04;
}
body.style-remix .help-title { font-size: 32px; font-weight: 700; letter-spacing: -.008em; }
body.style-remix .step-title,
body.style-remix .why-title { font-size: 28px; font-weight: 700; letter-spacing: -.006em; }
body.style-remix .testimonial-stat { font-size: 72px; font-weight: 800; letter-spacing: -.012em; }
body.style-remix .benefit-num {
  background: transparent;
  font-size: 36px; font-weight: 800;
  letter-spacing: -.008em;
  width: auto; height: auto;
  font-family: 'Roboto', sans-serif;
}
body.style-remix .benefit-title { letter-spacing: 0; }

/* dark hero & dark testimonials */
body.style-remix .nav { background: hsl(222 25% 10% / .92); border-bottom-color: hsl(222 22% 18%); }
body.style-remix .nav-row, body.style-remix .nav-links a, body.style-remix .nav-brand { color: #fff; }
body.style-remix .nav-brand-sub { color: hsl(220 9% 60%); }
body.style-remix .nav-logo-full { filter: brightness(0) invert(1); }
body.style-remix .nav-cta .btn-secondary {
  background: transparent; color: #fff; border-color: rgb(255 255 255 / .2);
}

body.style-remix .hero { background: hsl(222 25% 10%); color: #fff; }
body.style-remix .hero .lede,
body.style-remix .hero-trust-item .lbl,
body.style-remix .meta-lbl,
body.style-remix .hero-floating-card .card-lbl,
body.style-remix .hero-frame-url { color: hsl(220 9% 65%); }
body.style-remix .hero-trust { border-top-color: hsl(222 22% 18%); }
body.style-remix .hero-bg-grid {
  background-image:
    linear-gradient(hsl(218 80% 62% / .12) 1px, transparent 1px),
    linear-gradient(90deg, hsl(218 80% 62% / .12) 1px, transparent 1px);
}
body.style-remix .hero-eyebrow-pill {
  background: hsl(12 88% 60% / .18); color: hsl(12 88% 72%);
}
body.style-remix .hero-eyebrow-pill .dot { background: hsl(12 88% 65%); }
body.style-remix .hero .btn-primary { background: hsl(12 88% 60%); color: #fff; }
body.style-remix .hero .btn-primary:hover { background: hsl(12 88% 52%); }
body.style-remix .hero .btn-secondary {
  background: transparent; color: #fff; border-color: rgb(255 255 255 / .25);
}
body.style-remix .hero-floating-card { background: hsl(222 18% 14%); border-color: hsl(222 22% 22%); color: #fff; }
body.style-remix .hero-frame { background: hsl(222 18% 14%); border-color: hsl(222 22% 22%); }
body.style-remix .hero-frame-bar { background: hsl(222 18% 12%); border-color: hsl(222 22% 22%); }

/* coral accent throughout */
body.style-remix .eyebrow { color: hsl(12 80% 38%); }
body.style-remix .benefit-num { color: hsl(12 80% 38%); }
body.style-remix .help-num,
body.style-remix .step-num,
body.style-remix .why-num { color: hsl(12 80% 38%); }
body.style-remix .step { border-top-color: hsl(12 88% 60%); }
body.style-remix .testimonial-stat { color: hsl(12 88% 60%); }
body.style-remix .plan-featured {
  border-color: hsl(12 88% 60%);
  box-shadow: 0 0 0 4px hsl(12 88% 60% / .08), 0 20px 40px -20px hsl(12 88% 60% / .25);
}
body.style-remix .plan-badge { background: hsl(12 88% 60%); }
body.style-remix .plan-feature .check {
  background: hsl(12 88% 60% / .18); color: hsl(12 80% 32%);
}
body.style-remix .btn-primary { background: hsl(12 88% 60%); color: #fff; }
body.style-remix .btn-primary:hover { background: hsl(12 88% 52%); }

/* dark testimonials */
body.style-remix .section:has(.testimonials-grid) {
  background: hsl(222 25% 8%) !important; color: #fff;
}
body.style-remix .section:has(.testimonials-grid) .lede { color: hsl(220 9% 65%); }
body.style-remix .section:has(.testimonials-grid) .testimonial {
  background: hsl(222 18% 13%); border-color: hsl(222 22% 22%);
}
body.style-remix .section:has(.testimonials-grid) .testimonial-meta { border-top-color: hsl(222 22% 22%); }
body.style-remix .section:has(.testimonials-grid) .testimonial-role { color: hsl(220 9% 60%); }

/* dark style — logo strip stays LIGHT (industry-standard treatment).
   Override dark recolors to keep it bright + readable. */
body.style-remix .logo-strip,
body.style-contrast .logo-strip {
  background: hsl(0 0% 100%);
  border-color: hsl(var(--border));
}
body.style-remix .logo-strip-label,
body.style-contrast .logo-strip-label,
body.style-remix .logo-row-meta,
body.style-contrast .logo-row-meta { color: hsl(var(--muted-foreground)); }
body.style-remix .logo-row-2,
body.style-contrast .logo-row-2 { border-top-color: hsl(var(--border) / .6); }
body.style-remix .logo-row-name,
body.style-contrast .logo-row-name { color: hsl(var(--foreground)); }
body.style-remix .logo-mark,
body.style-contrast .logo-mark { color: hsl(var(--muted-foreground)); }
body.style-remix .logo-mark:hover,
body.style-contrast .logo-mark:hover { color: hsl(var(--foreground)); }