:root{
  /* Heading scale */
  --h1-desktop: 76px;
  --h1-mobile: 56px;
}

:root{ --container:1080px; --radius:16px;
  --s1:6px; --s2:10px; --s3:16px; --s4:20px; --s5:24px; --s6:32px; --s7:40px; --s8:56px; --s9:72px; }

html[data-theme="light"]{
  --bg:#ffffff; --surface:#ffffff; --card:#ffffff; --border:rgba(0,0,0,.10);
  --text:#060606; --muted:#596273; --brand:#11c353; --tint:rgba(34,197,94,.10);
}
html[data-theme="dark"]{
  --bg:#0b0c0f; --surface:#0b0c0f; --card:#111319; --border:rgba(255,255,255,.12);
  --text:#e6e8ef; --muted:#a6adbb; --brand:#11c353; --tint:rgba(34,197,94,.14);
}

*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
.section{padding-block:var(--s3)}
.center{text-align:center}.muted{color:var(--muted)}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid var(--border);margin:10px;text-decoration:none;color:var(--text);background:var(--surface)}
.btn-primary{background:var(--brand);border-color:var(--muted);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px var(--tint)}
.btn + .btn-row.center{display:flex;justify-content:center;gap:10px}

/* Header: centered, no border, solid bg */
.site-header{background:var(--bg);position:sticky;top:0;z-index:10}
.site-header .brand{display:flex;align-items:center;justify-content:center;flex-direction:column;padding-top:var(--s4)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;text-decoration:none;color:var(--text)}
.logo-mark{font-size:22px}.tagline{color:var(--muted);font-size:14px;margin-top:6px}
.primary-nav{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:var(--s3) 0 var(--s4)}
.nav-link{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px}
.nav-link.active,.nav-link:hover{background:var(--tint);color:var(--brand)}

/* Hero */
.hero .title{font-size:var(--fs-3xl);margin:0 0 10px}.hero .lead{color:var(--muted);max-width:720px;margin:0 auto var(--s4)}
.hero .cta-row{display:flex;justify-content:center;gap:12px}

/* Grids & cards */
.programs-grid{display:grid;gap:30px}.programs-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.programs-grid.three{grid-template-columns:1fr}}
.program-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.program-card .body{padding:30px 20px 30px;text-align:left}

/* 4-col features */
.features-grid.four{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.features-grid.four{grid-template-columns:1fr}}
.feature{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}

/* 2-col blocks */
.grid.two{display:grid;gap:20px;grid-template-columns:1fr 1fr}
@media (max-width:980px){.grid.two{grid-template-columns:1fr}}

/* CTA */
.cta{background:linear-gradient(0deg,var(--tint),rgba(0,0,0,0))}
.lead{font-size:18px;color:var(--muted)}

/* Footer: centered, solid bg, no border */
.site-footer{background:var(--bg);padding:var(--s6) 0;color:var(--text)}
.site-footer .foot-grid{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;text-align:center}
.logo-row{display:flex;align-items:center;gap:8px}
.fineprint{width:100%}.fineprint a{color:var(--text);text-decoration:none;opacity:.8}.fineprint a:hover{opacity:1;text-decoration:underline}

/* Custom icon list */
.custom-icon-list{list-style:none;padding:0;margin:0}
.custom-icon-list li{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:16px}
.custom-icon-list .status-green{color:#151617}
.custom-icon-list .status-green::before{content:'\2714';background:#029739;color:#fff;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;font-size:8px;flex-shrink:0;margin-top:2px}
.custom-icon-list .status-orange{color:#151617}
.custom-icon-list .status-orange::before{content:'\2212';background:#ff5e14;color:#fff;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;font-size:8px;flex-shrink:0;margin-top:2px}
.custom-icon-list .status-red{color:#151617}
.custom-icon-list .status-red::before{content:'\2716';background:#e93737;color:#fff;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;font-size:8px;flex-shrink:0;margin-top:2px}

/* Ensure premium cards are white for contrast */
.premium .program-card{background:#fff;color:#060606;border-color:var(--muted)}
.premium .program-card .muted{color:#11c353}


/* Vertical gap for stacked cards in 3-column grids */
.grid.three > .card{
  margin-block: var(--s3);
}
/* Home custom grids */
.grid.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

.grid.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card.center .h2{font-size:28px;font-weight:700}
@media (max-width: 900px){ .grid.four{grid-template-columns:repeat(2,1fr)} .grid.three{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .grid.four{grid-template-columns:repeat(2,1fr)} .grid.two{grid-template-columns:1fr} .grid.three{grid-template-columns:1fr} }


/* Utility: section titles */
.section-title{font-size:22px;font-weight:700;margin:0 0 16px}
.section-title.center{text-align:center}

/* === Disable sticky header (requested) === */
.site-header{ position:static; top:auto; }
.site-header.is-sticky{ position:static; top:auto; }
.site-main{ padding-top:0; } /* in case space was reserved for sticky */


/* === Light/Dark Theme Polish === */
html[data-theme="light"]{
  --bg:#ffffff; --surface:#ffffff; --card:#ffffff; --border:rgba(0,0,0,.10);
  --text:#060606; --muted:#596273; --brand:#22c55e; --tint:color-mix(in srgb, var(--brand) 10%, #ffffff);
}
html[data-theme="dark"]{
  --bg:#0b0c0f; --surface:#0b0c0f; --card:#111319; --border:rgba(255,255,255,.12);
  --text:#e6e8ef; --muted:#a6adbb; --brand:#22c55e; --tint:color-mix(in srgb, var(--brand) 14%, #000000);
}
.program-card,
.premium-programs .program-card,
.premium-programs .plan-box{
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border));
  border-radius: var(--radius);
}
.theme-toggle{
  position:fixed; right:14px; top:14px; z-index:1000;
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.08); cursor:pointer;
}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .moon{display:block}

/* Hero section background using theme-aware brand tint */
.hero {
  background:
    radial-gradient(
      60% 100% at 50% 45%,
      color-mix(in srgb, var(--brand) 15%, var(--bg)) 0%,
      var(--bg) 45%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand) 18%, var(--bg)) 0%,
      rgba(0, 0, 0, 0) 65%
    );
}


/* === Size System & Variants ================================
   Uses existing spacing scale (--s1..--s9) and adds radius tiers.
   Provides: Typography sizes (h1-h4, p), Card/Chip/Button size variants.
============================================================= */

/* Radius tiers */
:root{
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: var(--radius);
  --radius-lg: 20px;
  --radius-xl: 24px;
}

/* Typography scale */
:root{
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 76px;
}

h1{ font-size: var(--fs-3xl); line-height: 1.15; letter-spacing:-0.01em; }
h2{ font-size: var(--fs-2xl); line-height: 1.2; }
h3{ font-size: var(--fs-md); line-height: 1.25; }
h4{ font-size: var(--fs-lg); line-height: 1.3; }
p{  font-size: var(--fs-base); line-height: 1.7; }

/* Card sizes */
.card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius-md); }
.card--xs{ padding: var(--s2); border-radius: var(--radius-xs); }
.card--sm{ padding: var(--s3); border-radius: var(--radius-sm); }
.card--md{ padding: var(--s4); border-radius: var(--radius-md); }
.card--lg{ padding: var(--s5); border-radius: var(--radius-lg); }
.card--xl{ padding: var(--s6); border-radius: var(--radius-xl); }

/* Chip sizes */
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--chip, color-mix(in srgb, var(--brand) 12%, var(--bg)));
  color: var(--chip-fg, var(--text));
  border:1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
  border-radius: 999px; white-space: nowrap; gap: 8px;
  font-weight: 500;
}
.chip--xs{ height: 26px; padding: 0 var(--s2); font-size: var(--fs-xs); }
.chip--sm{ height: 30px; padding: 0 var(--s3); font-size: var(--fs-sm); }
.chip--md{ height: 36px; padding: 0 var(--s3); font-size: var(--fs-base); }
.chip--lg{ height: 42px; padding: 0 var(--s4); font-size: var(--fs-md); }
.chip--xl{ height: 48px; padding: 0 var(--s4); font-size: var(--fs-lg); }

/* Button sizes */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height: 50px; padding: 0 var(--s4);
  border-radius: var(--radius-md);
  background: var(--brand); color:#fff; border:0; text-decoration:none;
  font-weight:600; line-height:1; cursor:pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.btn--outline{ background: transparent; color: var(--text); border:1px solid var(--border); }
.btn--ghost{ background: transparent; color: var(--text); border:0; }

.btn--xs{ height: 40px; padding: 0 var(--s2); border-radius: var(--radius-xs); font-size: var(--fs-xs); }
.btn--sm{ height: 46px; padding: 0 var(--s3); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.btn--md{ height: 50px; padding: 0 var(--s4); border-radius: var(--radius-md); font-size: var(--fs-base); }
.btn--lg{ height: 56px; padding: 0 var(--s5); border-radius: var(--radius-lg); font-size: var(--fs-md); }
.btn--xl{ height: 64px; padding: 0 var(--s6); border-radius: var(--radius-xl); font-size: var(--fs-lg); }

/* Text utilities */
.text-xs{ font-size: var(--fs-xs); }
.text-sm{ font-size: var(--fs-sm); }
.text-base{ font-size: var(--fs-base); }
.text-md{ font-size: var(--fs-md); }
.text-lg{ font-size: var(--fs-lg); }
.text-xl{ font-size: var(--fs-xl); }
.text-2xl{ font-size: var(--fs-2xl); }
.text-3xl{ font-size: var(--fs-3xl); }



/* === Button Motion (animation-only, theme-safe) ===
   Ported from styles v3.2 button behavior (translate + elevation)
   – No background, border, or color overrides.
   – Works with existing classes: .btn, .button, .cta, .primary-btn, .outline-btn
   – Uses neutral shadows + color-mix() glow from currentColor when supported.
*/
:root{
  --btn-shadow: 0 10px 30px rgba(17,24,39,.08);
  --btn-shadow-hover: 0 14px 34px rgba(17,24,39,.10);
}

/* Base */
.btn, .button, .cta, .primary-btn, .outline-btn,
a.btn, a.button, a.cta, button.btn, button.button, .btn-primary, .btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1rem; /* do not change height tokens elsewhere */
  border-radius: 999px;
  border: 1px solid transparent; /* keep site’s own border colors via specificity */
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: var(--btn-shadow);
  will-change: transform;
}

/* Size helper (optional, non-destructive) */
.btn.small, .button.small, .cta.small { padding: .55rem .9rem; font-size: .9rem; }

/* Hover/active motion only */
.btn:hover, .button:hover, .cta:hover,
.primary-btn:hover, .outline-btn:hover,
a.btn:hover, a.button:hover, a.cta:hover,
button.btn:hover, button.button:hover,
.btn-primary:hover, .btn-outline:hover {
  transform: translateY(-1px);
  /* Soft elevation */
  box-shadow: var(--btn-shadow-hover);
  /* Subtle glow based on current text color when supported */
  box-shadow:
    var(--btn-shadow-hover),
    0 0 0 0 color-mix(in srgb, currentColor 40%, transparent);
}

/* Active press */
.btn:active, .button:active, .cta:active,
.primary-btn:active, .outline-btn:active,
a.btn:active, a.button:active, a.cta:active,
button.btn:active, button.button:active {
  transform: translateY(0);
  filter: saturate(0.98);
}

/* Keyboard focus – visible ring that respects theme colors */
.btn:focus-visible, .button:focus-visible, .cta:focus-visible,
.primary-btn:focus-visible, .outline-btn:focus-visible,
a.btn:focus-visible, a.button:focus-visible, a.cta:focus-visible,
button.btn:focus-visible, button.button:focus-visible {
  outline: none;
  box-shadow:
    var(--btn-shadow-hover),
    0 0 0 3px color-mix(in srgb, currentColor 35%, transparent);
  transform: translateY(-1px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, .button, .cta, .primary-btn, .outline-btn { transition: none; }
  .btn:hover, .button:hover, .cta:hover,
  .primary-btn:hover, .outline-btn:hover { transform: none; }
}


/* Responsive H1 using variables */
.hero h1{
  font-size: clamp(var(--h1-mobile), 6.5vw, var(--h1-desktop)) !important;
}


/* Mobile CTA vertical stack + spacing */
@media (max-width: 640px){
  .cta-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .cta-row .btn, .cta-row a.btn, .cta-row .button{
    width: 100% !important;
  }
}


/* Mobile CTA refined (centered + spacing + no edge touch) */
@media (max-width: 640px){
  .cta-row{
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }
  .cta-row .btn, .cta-row a.btn, .cta-row button.btn{
    width: 90% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
}



/* Soft card shadow */
.card{
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.card:hover{
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}


/* Premium Program Card Upgrade */
.program-card{
  background: linear-gradient(180deg, var(--surface) 0%, var(--card) 100%);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  transition: box-shadow .2s ease, transform .2s ease;
}
.program-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}



/* ==========================================================
   Programs Section — Icon Rendering Fix (data-URI SVGs)
   Avoids Unicode \2714 issues by drawing icons via background SVGs.
   Works in both light/dark using --ok/--warn/--bad from earlier patch.
   Paste AFTER your main stylesheet (or load after).
   ========================================================== */

html[data-theme="light"]{
  --ok:   var(--brand);
  --warn: #ff5e14;
  --bad:  #e93737;
  --icon-fg: #ffffff;
}
html[data-theme="dark"]{
  --ok:   color-mix(in srgb, var(--brand) 90%, #22c55e);
  --warn: #f59e0b;
  --bad:  #ef4444;
  --icon-fg: #ffffff;
}

/* Base chip */
.custom-icon-list .status-green::before,
.custom-icon-list .status-orange::before,
.custom-icon-list .status-red::before{
  content:"";
  display:inline-block;
  width:16px;height:16px;flex-shrink:0;margin-top:2px;
  border-radius:50%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:10px 10px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent) inset;
}

/* ✓ */
.custom-icon-list .status-green{ color: var(--text); }
.custom-icon-list .status-green::before{
  background-color: var(--ok);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M9.2 16.2L5.5 12.4l-1.4 1.4 5.1 5.1L20 8.8 18.6 7.4z'/></svg>");
}

/* − */
.custom-icon-list .status-orange{ color: var(--text); }
.custom-icon-list .status-orange::before{
  background-color: var(--warn);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='11' width='14' height='2' fill='%23ffffff'/></svg>");
}

/* ✕ */
.custom-icon-list .status-red{ color: var(--text); }
.custom-icon-list .status-red::before{
  background-color: var(--bad);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M7.8 7.8l8.4 8.4-1.4 1.4-8.4-8.4zM16.2 7.8l1.4 1.4-8.4 8.4-1.4-1.4z'/></svg>");
}

/* Optional: premium card theme-safe contrast */
html[data-theme="light"] .premium .program-card{
  background:#ffffff;color:#060606;border-color:var(--border);
}
html[data-theme="dark"] .premium .program-card{
  background:#111319;color:var(--text);border-color:var(--border);
}
.premium .program-card .muted{ color: var(--brand); }

/* FAQ styling */
.faq-list{
  margin-top: var(--s3);
  display:grid;
  /* 2-column FAQ layout (desktop/tablet), 1 column on small screens */
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  justify-items:stretch;
}
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  padding:14px 16px;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{
  display:none;
}
.faq-item summary::after{
  content:'+ ';
  float:right;
  font-weight:600;
}
.faq-item[open] summary::after{
  content:'− ';
}

.stars{
  margin-bottom:8px;
  color:var(--brand);
  font-size:18px;
}

body.has-modal{
  overflow:hidden;
}
.demo-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1200;
}
.demo-modal{
  background:var(--card);
  border-radius:var(--radius);
  padding:24px 20px;
  max-width:420px;
  width:100%;
  box-shadow:0 18px 45px rgba(15,23,42,0.55);
}
.demo-modal h2{
  margin:0 0 10px;
  font-size:22px;
}
.demo-modal p.muted{
  font-size:14px;
  margin-bottom:14px;
}
.demo-modal-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}
.demo-modal-form label{
  display:block;
  font-size:13px;
  margin-bottom:2px;
}
.demo-modal-form input,
.demo-modal-form select,
.demo-modal-form textarea{
  width:100%;
  border-radius:10px;
  border:1px solid var(--border);
  padding:8px 10px;
  background:var(--surface);
  color:var(--text);
  font-size:14px;
}
.demo-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}
.demo-modal-close{
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:20px;
  line-height:1;
  position:absolute;
  top:10px;
  right:12px;
}
.demo-modal-inner{
  position:relative;
}

.demo-modal-backdrop[hidden]{
  display:none !important;
}

.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.cta-step-card{
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.cta-step-icon{
  width:32px;
  height:32px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cta-step-icon svg{
  width:32px;
  height:32px;
  display:block;
}

.review-card{
  position:relative;
  padding:24px 20px;
}
.review-card-inner{
  position:relative;
}
.review-quote-icon{
  position:relative;
  margin-bottom:12px;
}
.review-quote-icon svg{
  width:64px;
  height:64px;
  display:block;
}
.review-meta{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}


/* Media row: image + video */
.media-grid{
  display:grid;
  grid-template-columns:1.2fr 1.4fr;
  gap:24px;
  margin-top:24px;
}
.media-grid .media-item img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius);
}
.video-embed{
  position:relative;
  padding-top:56.25%;
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
}
.video-embed iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}
@media (max-width:980px){
  .media-grid{
    grid-template-columns:1fr;
  }
}


/* Media section: image + video */
.media-grid{
  display:grid;
  grid-template-columns:1.2fr 1.4fr;
  gap:24px;
  margin-top:24px;
}
.media-grid .media-item img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius);
}
.video-embed{
  position:relative;
  padding-top:56.25%;
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
}
.video-embed iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}
@media (max-width:980px){
  .media-grid{
    grid-template-columns:1fr;
  }
}

/* Image gallery grid (6 images) */
.image-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:24px;
}
.image-gallery .gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--card);
}
.image-gallery .gallery-item::before{
  content:'';
  display:block;
  padding-top:100%; /* 1:1 aspect ratio */
}
.image-gallery .gallery-item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:640px){
  .image-gallery{
    gap:10px;
  }
}


/* Media slider (left) */
.media-slider{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
}
.media-slides{
  position:relative;
  width:100%;
  height:100%;
}
.media-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .3s ease;
}
.media-slide.is-active{
  opacity:1;
}
.media-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-slider-nav{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.media-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  padding:0;
  background:rgba(255,255,255,.4);
  cursor:pointer;
}
.media-dot.is-active{
  width:16px;
  background:#ffffff;
}

/* Slider fix */

.media-slider{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
}
.media-slider::before{
  content:'';
  display:block;
  padding-top:56.25%; /* 16:9 aspect ratio */
}
.media-slides{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.media-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .3s ease;
}
.media-slide.is-active{
  opacity:1;
}
.media-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-slider-nav{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.media-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  padding:0;
  background:rgba(255,255,255,.4);
  cursor:pointer;
}
.media-dot.is-active{
  width:16px;
  background:#ffffff;
}


/* Slider layout override */
.media-slider{
  display:flex;
  flex-direction:column;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
}
.media-slider::before{
  content:none;
}
.media-slides{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
}
.media-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .3s ease;
}
.media-slide.is-active{
  opacity:1;
}
.media-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-slider-nav{
  position:static;
  margin-top:12px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.media-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  padding:0;
  background:rgba(0,0,0,.15);
  cursor:pointer;
}
.media-dot.is-active{
  width:18px;
  background:#11c353;
}


/* Media layout: 2x1 slider + video, equal height */
.media-grid{
  display:grid;
  grid-template-columns:1.2fr 1.4fr;
  gap:24px;
  margin-top:24px;
  align-items:stretch;
}

/* Left image slider */
.media-slider{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
}
.media-slides{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
}
.media-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .3s ease;
}
.media-slide.is-active{
  opacity:1;
}
.media-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Dots inside image, bottom-center */
.media-slider-nav{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.media-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  padding:0;
  background:rgba(0,0,0,.35);
  cursor:pointer;
}
.media-dot.is-active{
  width:18px;
  background:#11c353;
}

/* Right video, own hosted */
.video-embed{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
}
.video-embed video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:16/9;
}

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


/* === Slider + video auto-height override === */
.media-slides{
  position:relative;
  width:100%;
  height:auto;
}
.media-slide{
  display:none;
  opacity:1;
  position:relative;
}
.media-slide.is-active{
  display:block;
}
.media-slide img{
  width:100%;
  height:auto;
  object-fit:contain;
}

/* dots below image, centered */
.media-slider-nav{
  position:static;
  margin-top:12px;
  display:flex;
  justify-content:center;
  gap:8px;
}

/* video auto height */
.video-embed{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
}
.video-embed video{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}


/* === FINAL: 2x1 equal-height media layout (slider + video) === */
.media-grid{
  display:grid;
  grid-template-columns:1.2fr 1.4fr;
  gap:24px;
  margin-top:24px;
  align-items:stretch;
}

/* Slider: fixed aspect, image fills, dots inside bottom-center */
.media-slider{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
  aspect-ratio:16/9;
}
.media-slides{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.media-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .3s ease;
}
.media-slide.is-active{
  opacity:1;
}
.media-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.media-slider-nav{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.media-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  padding:0;
  background:rgba(0,0,0,.35);
  cursor:pointer;
}
.media-dot.is-active{
  width:18px;
  background:#11c353;
}

/* Video: same height as slider */
.video-embed{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
  aspect-ratio:16/9;
}
.video-embed video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

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


/* enforce equal width columns for media grid */
.media-grid{
  grid-template-columns:repeat(2, 1fr);
}


@media (max-width: 980px){
  .faq-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .faq-list{
    grid-template-columns:1fr;
  }
}