/*
 * SplitLayer Marketing Site — Components
 * Nav, hero, sections, feature cards, pricing, footer, forms
 */
@import 'tokens.css';

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAVIGATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sl-border-subtle);
  box-shadow: var(--sl-shadow-xs);
}

.sl-nav__inner {
  display: flex;
  align-items: center;
  height: var(--sl-nav-height);
  gap: 8px;
}

.sl-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 16px;
}
.sl-nav__brand:hover { text-decoration: none; }

.sl-nav__logo {
  width: 32px;
  height: 32px;
  background: var(--sl-accent);
  border-radius: var(--sl-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.05em;
  flex-shrink: 0;
}

.sl-nav__brand-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--sl-text-heading);
  letter-spacing: -0.02em;
}

.sl-nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.sl-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sl-text-secondary);
  border-radius: var(--sl-radius-sm);
  transition: color var(--sl-transition), background var(--sl-transition);
  white-space: nowrap;
  text-decoration: none;
}
.sl-nav__link:hover { color: var(--sl-text-primary); background: var(--sl-bg-surface-hover); text-decoration: none; }
.sl-nav__link--active { color: var(--sl-accent); font-weight: 600; }
.sl-nav__link--active:hover { background: var(--sl-accent-subtle); }

.sl-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.sl-nav__mobile-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  color: var(--sl-text-secondary);
  border-radius: var(--sl-radius-sm);
  margin-left: auto;
}
.sl-nav__mobile-toggle:hover { background: var(--sl-bg-surface-hover); }

.sl-nav__mobile-menu {
  display: none;
  padding: 12px 0 16px;
  border-top: 1px solid var(--sl-border-subtle);
}
.sl-nav__mobile-menu.is-open { display: block; }
.sl-nav__mobile-menu .sl-nav__link { display: flex; padding: 10px 16px; border-radius: 0; }
.sl-nav__mobile-menu .sl-btn { margin: 12px 16px 0; display: block; text-align: center; }

@media (max-width: 768px) {
  .sl-nav__links { display: none; }
  .sl-nav__actions { display: none; }
  .sl-nav__mobile-toggle { display: flex; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--sl-radius-md);
  border: 1px solid transparent;
  transition: all var(--sl-transition);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
}
.sl-btn:hover { text-decoration: none; }

.sl-btn--primary {
  background: var(--sl-accent);
  color: #fff;
  border-color: var(--sl-accent);
  box-shadow: 0 1px 2px rgba(37,99,235,0.2);
}
.sl-btn--primary:hover { background: var(--sl-accent-hover); border-color: var(--sl-accent-hover); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }

.sl-btn--outline {
  background: transparent;
  color: var(--sl-text-primary);
  border-color: var(--sl-border-default);
}
.sl-btn--outline:hover { background: var(--sl-bg-surface-hover); border-color: var(--sl-border-default); }

.sl-btn--ghost {
  background: transparent;
  color: var(--sl-text-secondary);
  border-color: transparent;
}
.sl-btn--ghost:hover { background: var(--sl-bg-surface-hover); color: var(--sl-text-primary); }

.sl-btn--lg {
  padding: 13px 28px;
  font-size: 16px;
  border-radius: var(--sl-radius-lg);
}

.sl-btn--sm {
  padding: 7px 14px;
  font-size: 13px;
}

.sl-btn--shopify {
  background: #008060;
  color: #fff;
  border-color: #008060;
}
.sl-btn--shopify:hover { background: #006e52; border-color: #006e52; box-shadow: 0 4px 12px rgba(0,128,96,0.3); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BADGE / PILL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sl-badge--blue { background: var(--sl-accent-subtle); color: var(--sl-accent); }
.sl-badge--purple { background: var(--sl-purple-subtle); color: var(--sl-purple); }
.sl-badge--green { background: rgba(22,163,74,0.08); color: #15803d; }
.sl-badge--shopify { background: rgba(0,128,96,0.08); color: #006e52; }

.sl-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: var(--sl-accent-subtle);
  color: var(--sl-accent);
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-section {
  padding: var(--sl-section-v) 0;
}
.sl-section--sm { padding: var(--sl-section-v-sm) 0; }
.sl-section--gray { background: var(--sl-bg-app); }
.sl-section--dark {
  background: #0f1117;
  color: #fff;
}
.sl-section--dark .sl-heading-2,
.sl-section--dark .sl-heading-1 { color: #fff; }
.sl-section--dark .sl-body-lg,
.sl-section--dark .sl-body { color: rgba(255,255,255,0.65); }

.sl-section__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
}
.sl-section__header .sl-heading-2 { margin-bottom: 16px; }
.sl-section__header .sl-body-lg { margin-top: 0; }

@media (max-width: 640px) {
  .sl-section { padding: var(--sl-section-v-sm) 0; }
  .sl-section__header { margin-bottom: 40px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-hero {
  padding: 80px 0 96px;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.sl-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(124,58,237,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.sl-hero::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.sl-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.sl-hero__content { max-width: 580px; }

.sl-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--sl-accent-subtle);
  border: 1px solid var(--sl-accent-light);
  color: var(--sl-accent);
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  margin-bottom: 24px;
}

.sl-hero__headline {
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--sl-text-heading);
  margin-bottom: 24px;
}

.sl-hero__subline {
  font-size: 18px;
  line-height: 1.7;
  color: var(--sl-text-secondary);
  margin-bottom: 36px;
  max-width: 520px;
}

.sl-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.sl-hero__trust {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.sl-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--sl-text-muted);
  font-weight: 500;
}

.sl-hero__trust-item svg { color: var(--sl-success); }

/* App mockup */
.sl-hero__visual {
  position: relative;
}

.sl-mockup {
  background: var(--sl-bg-surface);
  border: 1px solid var(--sl-border-card);
  border-radius: var(--sl-radius-xl);
  box-shadow: var(--sl-shadow-xl), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.4s ease;
}
.sl-mockup:hover { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }

.sl-mockup__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--sl-bg-app);
  border-bottom: 1px solid var(--sl-border-subtle);
}
.sl-mockup__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.sl-mockup__dot--red { background: #ff5f57; }
.sl-mockup__dot--yellow { background: #febc2e; }
.sl-mockup__dot--green { background: #28c840; }
.sl-mockup__url {
  flex: 1;
  background: #fff;
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-sm);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--sl-text-muted);
  text-align: center;
}

.sl-mockup__content { padding: 20px; }

.sl-mockup__stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.sl-mockup__stat {
  background: var(--sl-bg-app);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-md);
  padding: 12px;
}
.sl-mockup__stat-label { font-size: 11px; color: var(--sl-text-muted); font-weight: 500; margin-bottom: 4px; }
.sl-mockup__stat-value { font-size: 18px; font-weight: 700; color: var(--sl-text-heading); }
.sl-mockup__stat-value--blue { color: var(--sl-accent); }
.sl-mockup__stat-value--green { color: var(--sl-success); }
.sl-mockup__stat-value--purple { color: var(--sl-purple); }

.sl-mockup__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--sl-bg-app);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-md);
  margin-bottom: 8px;
}
.sl-mockup__row-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sl-mockup__row-label { font-size: 12px; font-weight: 500; color: var(--sl-text-secondary); flex: 1; }
.sl-mockup__row-value { font-size: 12px; font-weight: 600; color: var(--sl-text-heading); }
.sl-mockup__row-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 100px; background: rgba(22,163,74,0.1); color: #15803d;
}

@media (max-width: 900px) {
  .sl-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .sl-hero__visual { display: none; }
  .sl-hero { padding: 60px 0 72px; }
}
@media (max-width: 640px) {
  .sl-hero { padding: 48px 0 60px; }
  .sl-hero__actions { flex-direction: column; align-items: flex-start; }
  .sl-hero__actions .sl-btn { width: 100%; justify-content: center; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAIN STRIP
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-pain-strip {
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  border-bottom: 1px solid #fecaca;
  padding: 20px 0;
}

.sl-pain-strip__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sl-pain-strip__label {
  font-size: 13px;
  font-weight: 700;
  color: #b91c1c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 8px;
  flex-shrink: 0;
}

.sl-pain-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(185,28,28,0.07);
  border: 1px solid #fca5a5;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: #b91c1c;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARD GRID
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sl-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .sl-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sl-grid-3, .sl-grid-2 { grid-template-columns: 1fr; }
}

/* Feature card */
.sl-feature-card {
  background: var(--sl-bg-card);
  border: 1px solid var(--sl-border-card);
  border-radius: var(--sl-radius-xl);
  padding: 28px;
  transition: box-shadow var(--sl-transition-slow), transform var(--sl-transition-slow), border-color var(--sl-transition-slow);
}
.sl-feature-card:hover {
  box-shadow: var(--sl-shadow-lg);
  transform: translateY(-2px);
  border-color: var(--sl-border-default);
}

.sl-feature-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--sl-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 22px;
}

.sl-feature-card__icon--blue { background: var(--sl-accent-subtle); }
.sl-feature-card__icon--purple { background: var(--sl-purple-subtle); }
.sl-feature-card__icon--green { background: rgba(22,163,74,0.08); }
.sl-feature-card__icon--orange { background: rgba(234,88,12,0.08); }
.sl-feature-card__icon--teal { background: rgba(13,148,136,0.08); }
.sl-feature-card__icon--yellow { background: rgba(202,138,4,0.08); }

.sl-feature-card__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--sl-text-heading);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.sl-feature-card__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--sl-text-secondary);
  margin-bottom: 16px;
}

.sl-feature-card__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sl-feature-card__list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--sl-text-secondary);
}

.sl-feature-card__list-item::before {
  content: '✓';
  font-size: 12px;
  font-weight: 700;
  color: var(--sl-success);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOW IT WORKS — STEPS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 780px;
  margin: 0 auto;
}

.sl-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 36px 0;
  border-bottom: 1px solid var(--sl-border-subtle);
  position: relative;
}
.sl-step:last-child { border-bottom: none; }

.sl-step__number-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sl-step__number {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sl-accent);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.sl-step__line {
  width: 2px;
  flex: 1;
  background: var(--sl-border-subtle);
  margin-top: 8px;
}
.sl-step:last-child .sl-step__line { display: none; }

.sl-step__content { padding-top: 8px; }
.sl-step__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--sl-text-heading);
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.sl-step__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--sl-text-secondary);
}
.sl-step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.sl-step__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--sl-bg-app);
  border: 1px solid var(--sl-border-subtle);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sl-text-secondary);
}

@media (max-width: 640px) {
  .sl-step { grid-template-columns: 40px 1fr; gap: 16px; }
  .sl-step__number { width: 40px; height: 40px; font-size: 16px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATS BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sl-border-subtle);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-xl);
  overflow: hidden;
}

.sl-stats-bar__item {
  background: var(--sl-bg-surface);
  padding: 32px 24px;
  text-align: center;
}

.sl-stats-bar__value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--sl-text-heading);
  margin-bottom: 6px;
  line-height: 1;
}
.sl-stats-bar__value--blue { color: var(--sl-accent); }
.sl-stats-bar__value--purple { color: var(--sl-purple); }

.sl-stats-bar__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--sl-text-secondary);
}

@media (max-width: 900px) { .sl-stats-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sl-stats-bar { grid-template-columns: 1fr; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROBLEM / SOLUTION SPLIT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.sl-split--reverse > *:first-child { order: 2; }
.sl-split--reverse > *:last-child { order: 1; }

@media (max-width: 860px) {
  .sl-split { grid-template-columns: 1fr; gap: 40px; }
  .sl-split--reverse > * { order: unset !important; }
}

.sl-visual-card {
  background: var(--sl-bg-card);
  border: 1px solid var(--sl-border-card);
  border-radius: var(--sl-radius-xl);
  padding: 28px;
  box-shadow: var(--sl-shadow-lg);
}

.sl-problem-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sl-problem-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--sl-radius-md);
}
.sl-problem-item__icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.sl-problem-item__text { font-size: 14px; font-weight: 500; color: #b91c1c; line-height: 1.4; }

.sl-solution-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sl-solution-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(22,163,74,0.04);
  border: 1px solid rgba(22,163,74,0.2);
  border-radius: var(--sl-radius-md);
}
.sl-solution-item__icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.sl-solution-item__text { font-size: 14px; font-weight: 500; color: #15803d; line-height: 1.4; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRICING CARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 900px) { .sl-pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

.sl-pricing-card {
  background: var(--sl-bg-card);
  border: 1px solid var(--sl-border-card);
  border-radius: var(--sl-radius-xl);
  padding: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--sl-transition-slow), transform var(--sl-transition-slow);
}
.sl-pricing-card:hover { box-shadow: var(--sl-shadow-lg); transform: translateY(-3px); }

.sl-pricing-card--featured {
  border-color: var(--sl-accent);
  border-width: 2px;
  box-shadow: 0 0 0 4px var(--sl-accent-subtle), var(--sl-shadow-lg);
}
.sl-pricing-card--featured:hover { box-shadow: 0 0 0 4px var(--sl-accent-subtle), var(--sl-shadow-xl); }

.sl-pricing-card__popular {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sl-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 100px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.sl-pricing-card__name {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sl-text-secondary);
  margin-bottom: 16px;
}

.sl-pricing-card--featured .sl-pricing-card__name { color: var(--sl-accent); }
.sl-pricing-card--scale .sl-pricing-card__name { color: var(--sl-purple); }

.sl-pricing-card__price {
  margin-bottom: 8px;
}
.sl-pricing-card__amount {
  font-size: 44px;
  font-weight: 800;
  color: var(--sl-text-heading);
  letter-spacing: -0.04em;
  line-height: 1;
}
.sl-pricing-card__period {
  font-size: 15px;
  color: var(--sl-text-secondary);
  font-weight: 500;
}
.sl-pricing-card__trial {
  font-size: 13px;
  color: var(--sl-text-muted);
  margin-bottom: 24px;
}

.sl-pricing-card__divider {
  height: 1px;
  background: var(--sl-border-subtle);
  margin: 20px 0;
}

.sl-pricing-card__features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.sl-pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--sl-text-secondary);
  line-height: 1.4;
}
.sl-pricing-feature__check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(22,163,74,0.1);
  color: var(--sl-success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}
.sl-pricing-feature__check--no {
  background: var(--sl-bg-app);
  color: var(--sl-text-muted);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FAQ ACCORDION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-faq { max-width: 720px; margin: 0 auto; }

.sl-faq-item {
  border-bottom: 1px solid var(--sl-border-subtle);
}

.sl-faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 16px;
}

.sl-faq-item__question {
  font-size: 16px;
  font-weight: 600;
  color: var(--sl-text-heading);
  line-height: 1.4;
}

.sl-faq-item__icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sl-bg-app);
  border: 1px solid var(--sl-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--sl-text-secondary);
  transition: transform 0.2s ease, background 0.2s ease;
}

.sl-faq-item.is-open .sl-faq-item__icon {
  transform: rotate(45deg);
  background: var(--sl-accent-subtle);
  border-color: var(--sl-accent);
  color: var(--sl-accent);
}

.sl-faq-item__answer {
  display: none;
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sl-text-secondary);
}
.sl-faq-item.is-open .sl-faq-item__answer { display: block; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT FORM
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-form-card {
  background: var(--sl-bg-card);
  border: 1px solid var(--sl-border-card);
  border-radius: var(--sl-radius-xl);
  padding: 40px;
  box-shadow: var(--sl-shadow-md);
  max-width: 640px;
}

.sl-form-group { margin-bottom: 20px; }

.sl-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sl-text-primary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.sl-label span { color: #dc2626; margin-left: 2px; }

.sl-input,
.sl-textarea,
.sl-select {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--sl-text-primary);
  background: var(--sl-bg-input, #fff);
  border: 1px solid var(--sl-border-default);
  border-radius: var(--sl-radius-md);
  outline: none;
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition);
  appearance: none;
}

.sl-input:focus,
.sl-textarea:focus,
.sl-select:focus {
  border-color: var(--sl-accent);
  box-shadow: 0 0 0 3px var(--sl-accent-subtle);
}

.sl-input::placeholder,
.sl-textarea::placeholder { color: var(--sl-text-muted); }

.sl-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.sl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) { .sl-form-row { grid-template-columns: 1fr; } }

.sl-form-success {
  display: none;
  text-align: center;
  padding: 40px 24px;
}
.sl-form-success.is-visible { display: block; }
.sl-form-success__icon { font-size: 48px; margin-bottom: 16px; }
.sl-form-success__title { font-size: 22px; font-weight: 700; color: var(--sl-text-heading); margin-bottom: 8px; }
.sl-form-success__body { font-size: 15px; color: var(--sl-text-secondary); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CTA BANNER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-cta-banner {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e1b4b 50%, #4c1d95 100%);
  padding: var(--sl-section-v) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sl-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(37,99,235,0.25) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(124,58,237,0.2) 0%, transparent 60%);
}

.sl-cta-banner__inner { position: relative; z-index: 1; }

.sl-cta-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
}

.sl-cta-banner__headline {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.sl-cta-banner__subline {
  font-size: 18px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 36px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.sl-cta-banner__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.sl-cta-banner__trust {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-footer {
  background: #0f1117;
  color: rgba(255,255,255,0.5);
  padding: 64px 0 32px;
}

.sl-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

@media (max-width: 860px) {
  .sl-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .sl-footer__grid { grid-template-columns: 1fr; }
}

.sl-footer__brand { margin-bottom: 16px; }
.sl-footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.sl-footer__logo-icon {
  width: 32px; height: 32px;
  background: var(--sl-accent);
  border-radius: var(--sl-radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 800;
  letter-spacing: -0.05em; flex-shrink: 0;
}
.sl-footer__logo-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.sl-footer__tagline {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.sl-footer__shopify-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(0,128,96,0.15);
  border: 1px solid rgba(0,128,96,0.3);
  border-radius: var(--sl-radius-md);
  font-size: 13px;
  font-weight: 600;
  color: #34d399;
  text-decoration: none;
}
.sl-footer__shopify-badge:hover { background: rgba(0,128,96,0.25); text-decoration: none; }

.sl-footer__col-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.sl-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sl-footer__link {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color var(--sl-transition);
}
.sl-footer__link:hover { color: rgba(255,255,255,0.85); text-decoration: none; }

.sl-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
  gap: 12px;
}

.sl-footer__copy { font-size: 13px; color: rgba(255,255,255,0.3); }

.sl-footer__bottom-links {
  display: flex;
  gap: 20px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE HERO (inner pages)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-page-hero {
  background: var(--sl-bg-app);
  border-bottom: 1px solid var(--sl-border-subtle);
  padding: 72px 0 64px;
  text-align: center;
}

.sl-page-hero__headline {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sl-text-heading);
  margin-bottom: 16px;
  line-height: 1.1;
}

.sl-page-hero__subline {
  font-size: 18px;
  color: var(--sl-text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPARISON TABLE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-comparison-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-xl);
  overflow: hidden;
}

.sl-comparison-table th {
  background: var(--sl-bg-app);
  padding: 16px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--sl-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--sl-border-subtle);
}

.sl-comparison-table th.sl-th--featured { background: var(--sl-accent-subtle); color: var(--sl-accent); }
.sl-comparison-table th.sl-th--scale { background: var(--sl-purple-subtle); color: var(--sl-purple); }

.sl-comparison-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--sl-border-subtle);
  font-size: 14px;
  color: var(--sl-text-secondary);
  vertical-align: middle;
}

.sl-comparison-table tr:last-child td { border-bottom: none; }
.sl-comparison-table tr:hover td { background: var(--sl-bg-surface-hover); }

.sl-comparison-table td.sl-td--feature { font-weight: 500; color: var(--sl-text-primary); }
.sl-check { color: var(--sl-success); font-weight: 700; font-size: 16px; }
.sl-dash { color: var(--sl-text-muted); }

@media (max-width: 640px) {
  .sl-comparison-table { font-size: 13px; }
  .sl-comparison-table th, .sl-comparison-table td { padding: 12px 12px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SUPPLEMENTARY — aliases and additions for inner pages
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Scale CTA button (purple) */
.sl-btn--scale {
  background: var(--sl-purple);
  color: #fff;
  border-color: var(--sl-purple);
}
.sl-btn--scale:hover {
  background: #6d28d9;
  border-color: #6d28d9;
  box-shadow: 0 4px 12px rgba(124,58,237,0.35);
  color: #fff;
  text-decoration: none;
}

/* ── Pricing card element aliases ── */
/* .sl-pricing-card__plan = same as .sl-pricing-card__name */
.sl-pricing-card__plan {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sl-text-secondary);
  margin-bottom: 16px;
}
.sl-pricing-card--featured .sl-pricing-card__plan { color: var(--sl-accent); }
.sl-pricing-card--scale    .sl-pricing-card__plan { color: var(--sl-purple); }

/* .sl-pricing-card__badge = same as .sl-pricing-card__popular */
.sl-pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sl-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 100px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.sl-pricing-card__header { margin-bottom: 8px; }

.sl-pricing-card__tagline {
  font-size: 13px;
  color: var(--sl-text-secondary);
  line-height: 1.5;
  margin: 8px 0 24px;
}

.sl-pricing-card__cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 24px;
}

.sl-pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--sl-text-secondary);
  line-height: 1.4;
}
.sl-pricing-card__feature::before { flex-shrink: 0; font-size: 14px; font-weight: 700; margin-top: 1px; }
.sl-pricing-card__feature--included::before { content: '✓'; color: var(--sl-success); }
.sl-pricing-card__feature--excluded { color: var(--sl-text-muted); }
.sl-pricing-card__feature--excluded::before { content: '—'; color: var(--sl-text-muted); }
.sl-pricing-card__feature--scale { font-weight: 600; color: var(--sl-text-primary); }

.sl-pricing-note {
  text-align: center;
  font-size: 14px;
  color: var(--sl-text-muted);
  margin-top: 40px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ── Comparison table column aliases ── */
.sl-comparison-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sl-comparison-table__feature-col { font-weight: 500; color: var(--sl-text-primary); text-align: left; }

.sl-comparison-table__featured-col {
  background: var(--sl-accent-subtle) !important;
  color: var(--sl-accent);
  text-align: center;
}
.sl-comparison-table thead .sl-comparison-table__featured-col {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sl-comparison-table tbody .sl-comparison-table__featured-col {
  font-weight: 600;
  color: var(--sl-text-primary);
}

.sl-comparison-table__scale-col {
  background: var(--sl-purple-subtle) !important;
  color: var(--sl-purple);
  text-align: center;
}
.sl-comparison-table thead .sl-comparison-table__scale-col {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sl-comparison-table tbody .sl-comparison-table__scale-col {
  font-weight: 600;
  color: var(--sl-text-primary);
}

.sl-comparison-table__group-row td {
  background: var(--sl-bg-app);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sl-text-muted);
  padding-top: 20px;
  padding-bottom: 8px;
  border-bottom: none;
}

/* ── Contact page layout ── */
.sl-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 860px) {
  .sl-contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

.sl-contact-info { display: flex; flex-direction: column; gap: 36px; }

.sl-contact-info__block {}

.sl-contact-info__icon {
  font-size: 28px;
  margin-bottom: 12px;
  display: block;
}

.sl-contact-info__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--sl-text-heading);
  margin-bottom: 6px;
}

.sl-contact-info__link {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--sl-accent);
  margin-bottom: 8px;
  text-decoration: none;
}
.sl-contact-info__link:hover { text-decoration: underline; }

.sl-contact-info__body {
  font-size: 14px;
  color: var(--sl-text-secondary);
  line-height: 1.6;
}

/* ── Form BEM aliases ── */
/* .sl-form__group = .sl-form-group */
.sl-form__group { margin-bottom: 20px; }

/* .sl-form__label = .sl-label */
.sl-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sl-text-primary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.sl-form__optional {
  font-weight: 400;
  color: var(--sl-text-muted);
  font-size: 12px;
}

/* .sl-form__input / .sl-form__select / .sl-form__textarea = .sl-input etc. */
.sl-form__input,
.sl-form__select,
.sl-form__textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--sl-text-primary);
  background: #fff;
  border: 1px solid var(--sl-border-default);
  border-radius: var(--sl-radius-md);
  outline: none;
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition);
  appearance: none;
  -webkit-appearance: none;
}
.sl-form__input:focus,
.sl-form__select:focus,
.sl-form__textarea:focus {
  border-color: var(--sl-accent);
  box-shadow: 0 0 0 3px var(--sl-accent-subtle);
}
.sl-form__input::placeholder,
.sl-form__textarea::placeholder { color: var(--sl-text-muted); }
.sl-form__textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.sl-form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23636c76' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }

.sl-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) { .sl-form__row { grid-template-columns: 1fr; } }

/* Honeypot — kept in CSS for safety but no longer rendered in HTML */
.sl-form__honeypot {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.sl-form__submit { width: 100%; justify-content: center; }

/* Form success / error states */
.sl-form__success {
  text-align: center;
  padding: 40px 24px;
}
.sl-form__success[hidden] { display: none; }
.sl-form__success-icon { margin-bottom: 16px; display: flex; justify-content: center; line-height: 1; }
.sl-form__success-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--sl-text-heading);
  margin-bottom: 8px;
}
.sl-form__success-body { font-size: 15px; color: var(--sl-text-secondary); }

.sl-form__error {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: var(--sl-radius-md);
  font-size: 14px;
  color: #dc2626;
}
.sl-form__error[hidden] { display: none; }
.sl-form__error a { color: #dc2626; font-weight: 600; }

/* ── FAQ <details> / <summary> styling ── */
.sl-faq__item {
  border-bottom: 1px solid var(--sl-border-subtle);
}
.sl-faq__item:first-child { border-top: 1px solid var(--sl-border-subtle); }

.sl-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--sl-text-heading);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  gap: 16px;
}
.sl-faq__question::-webkit-details-marker { display: none; }
.sl-faq__question::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: var(--sl-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
  line-height: 1;
}
.sl-faq__item[open] > .sl-faq__question::after {
  transform: rotate(45deg);
  color: var(--sl-accent);
}

.sl-faq__answer {
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sl-text-secondary);
}
.sl-faq__answer p { margin-bottom: 0; }

/* ── Step tag colour variant ── */
.sl-step__tag--blue {
  background: var(--sl-accent-subtle);
  color: var(--sl-accent);
  border-color: rgba(37,99,235,0.2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEGAL PROSE (Privacy & Terms pages)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sl-legal {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 0 64px;
}

.sl-legal__meta {
  display: inline-block;
  font-size: 13px;
  color: var(--sl-text-secondary);
  background: var(--sl-bg-app);
  border: 1px solid var(--sl-border-subtle);
  border-radius: 6px;
  padding: 4px 12px;
  margin-bottom: 40px;
}

.sl-legal h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--sl-text-heading);
  margin: 48px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sl-border-subtle);
  letter-spacing: -0.01em;
}

.sl-legal h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--sl-text-heading);
  margin: 28px 0 8px;
}

.sl-legal p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--sl-text-body);
  margin-bottom: 14px;
}

.sl-legal ul,
.sl-legal ol {
  font-size: 15px;
  line-height: 1.75;
  color: var(--sl-text-body);
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.sl-legal li { margin-bottom: 6px; }

.sl-legal a {
  color: var(--sl-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sl-legal a:hover { color: var(--sl-accent-hover, #1d4ed8); }

.sl-legal strong { color: var(--sl-text-heading); font-weight: 600; }

.sl-legal__callout {
  background: var(--sl-accent-subtle);
  border-left: 3px solid var(--sl-accent);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 24px 0;
  font-size: 14px;
  color: var(--sl-text-body);
  line-height: 1.6;
}