/* ============================================================
   JuaraPKSK — homepage premium dark theme + hero slider (2026-08)
   Loaded ONLY by index.html, after styles.css. Every rule is scoped
   under body.home-dark (or .hs, which only exists on the homepage),
   so inner pages can never be affected.

   Contrast law (CLAUDE.md rule 8): never white text on a gold field.
   Gold is the accent on navy; navy/dark-ink type sits on gold.
   ============================================================ */

/* the stale-CSS guard read by hero-slider.js — see gallery.js for the story */
.hs { --hs-ready: 1; }

/* ---------- dark canvas ---------- */
body.home-dark {
  background:
    radial-gradient(1400px 700px at 85% -4%, rgba(20,125,122,.16), transparent 60%),
    var(--dark-1);
  color: var(--ink-inv);
}
body.home-dark .section { padding: 108px 0; }
body.home-dark .section--cream { background: var(--dark-0); }
body.home-dark .section--mist {
  background:
    radial-gradient(1000px 480px at 12% 0%, rgba(20,125,122,.14), transparent 55%),
    #0d2440;
}
body.home-dark .section h2 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.1rem); letter-spacing: -.02em; }
body.home-dark .lead { color: var(--ink-inv-soft); font-size: 1.15rem; }
body.home-dark .eyebrow { color: var(--teal-lt); letter-spacing: .22em; }
body.home-dark .eyebrow--gold { color: var(--gold-lt); }

/* ---------- generic cards / stats ---------- */
body.home-dark .card {
  background: rgba(255,255,255,.045); border-color: var(--line-inv);
  box-shadow: none; backdrop-filter: blur(4px);
}
body.home-dark .card:hover { box-shadow: 0 18px 50px rgba(0,0,0,.35); border-color: rgba(201,162,39,.4); }
body.home-dark .card h3 { color: #fff; }
body.home-dark .card p { color: var(--ink-inv-soft); }
body.home-dark .card .ico { background: rgba(143,211,206,.10); color: var(--teal-lt); }
body.home-dark .stat b { color: var(--gold-lt); }
body.home-dark .stat span { color: var(--ink-inv-soft); }

/* ---------- vision / story ---------- */
body.home-dark .vm__card { background: rgba(255,255,255,.045); border-color: var(--line-inv); }
body.home-dark .vm__card h3 { color: var(--gold-lt); }
body.home-dark .vm__card p { color: var(--ink-inv-soft); }
body.home-dark .story { background: rgba(255,255,255,.045); border: 1px solid var(--line-inv); }

/* ---------- demo launch ---------- */
body.home-dark .demo-launch { background: rgba(255,255,255,.045); border-color: var(--line-inv); box-shadow: none; }
body.home-dark .demo-launch__body h3 { color: #fff; }
body.home-dark .demo-launch__body p { color: var(--ink-inv-soft); }
body.home-dark .demo-launch__fine { color: #8fa2b8; }
body.home-dark .badge-live { background: rgba(143,211,206,.10); border-color: rgba(143,211,206,.3); color: var(--teal-lt); }
body.home-dark .badge-live .dot { background: var(--teal-lt); }

/* ---------- pricing cards ---------- */
body.home-dark .price { background: rgba(255,255,255,.045); border-color: var(--line-inv); }
body.home-dark .price:hover { box-shadow: 0 18px 50px rgba(0,0,0,.35); }
body.home-dark .price--flag { background: linear-gradient(180deg, rgba(201,162,39,.10), rgba(255,255,255,.03)); border-color: var(--gold); }
body.home-dark .price__tier { color: #fff; }
body.home-dark .price__name { color: var(--teal-lt); }
body.home-dark .price__amt .cur, body.home-dark .price__amt .num { color: #fff; }
body.home-dark .price--flag .price__amt .num { color: var(--gold-lt); }
body.home-dark .price__note { color: var(--ink-inv-soft); }
body.home-dark .price li { color: var(--ink-inv); border-bottom-color: var(--line-inv); }
body.home-dark .price li::before { color: var(--teal-lt); }
body.home-dark .price li.no { color: #7f92a8; } body.home-dark .price li.no::before { color: #58697d; }
body.home-dark .price .btn-outline { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
body.home-dark .price .btn-outline:hover { border-color: var(--teal-lt); }

/* coupon line flips to its gold-on-navy form everywhere on the dark page */
body.home-dark .coupon-line { color: var(--gold-lt); background: rgba(201,162,39,.14); border-color: rgba(201,162,39,.55); }
body.home-dark .coupon-line code { color: var(--navy); background: var(--gold-lt); border-color: var(--gold-lt); }
body.home-dark .coupon-line .net { color: #fff; }

/* ---------- product detail ---------- */
body.home-dark .pd--flag { background: rgba(255,255,255,.04); border-color: var(--gold); box-shadow: none; }
body.home-dark .pd__info h3 { color: #fff; }
body.home-dark .pd__lede, body.home-dark .pd__why { color: var(--ink-inv-soft); }
body.home-dark .pd__why b { color: #fff; }
body.home-dark .pd__list li { color: var(--ink-inv); }
body.home-dark .pd__list li::before { color: var(--teal-lt); }
body.home-dark .pd__tier.good { background: rgba(255,255,255,.08); color: var(--ink-inv-soft); }
body.home-dark .pd__tier.better { background: rgba(143,211,206,.12); color: var(--teal-lt); }
body.home-dark .pd__note { background: rgba(201,162,39,.10); border-color: rgba(201,162,39,.35); color: #e8d9a8; }
body.home-dark .pd__price { color: #fff; }
body.home-dark .pd__demo a { color: var(--teal-lt); }
body.home-dark .pd .btn-outline { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
body.home-dark .pd .btn-outline:hover { border-color: var(--teal-lt); }
body.home-dark .nilai { background: rgba(255,255,255,.045); border-color: var(--line-inv); }
body.home-dark .nilai__row { color: var(--ink-inv-soft); }
body.home-dark .nilai__row b { color: #fff; }
body.home-dark .nilai__sum { border-top-color: var(--line-inv); color: #fff; }
body.home-dark .nilai__pay, body.home-dark .nilai__pay b { color: var(--gold-lt); }
body.home-dark .gal__thumb { border-color: rgba(255,255,255,.14); }
body.home-dark .gal__thumb[aria-current="true"] { border-color: var(--teal-lt); }

/* ---------- PKSK / format / schools ---------- */
body.home-dark .school { background: rgba(255,255,255,.045); border-color: var(--line-inv); box-shadow: none; }
body.home-dark .school b { color: var(--gold-lt); }
body.home-dark .school span { color: var(--ink-inv-soft); }
body.home-dark .fmt__c { background: rgba(255,255,255,.045); border-color: var(--line-inv); }
body.home-dark .fmt__c h3 { color: #fff; }
body.home-dark .fmt__c ul { color: var(--ink-inv-soft); }
body.home-dark .fmt__c .pill.a { background: rgba(143,211,206,.12); color: var(--teal-lt); }
body.home-dark .fmt__c .pill.b { background: rgba(201,162,39,.16); color: var(--gold-lt); }
body.home-dark .pksk__note { background: rgba(255,255,255,.045); border-color: var(--line-inv); }
body.home-dark .pksk__note p { color: var(--ink-inv-soft); }
body.home-dark .pksk__apply h3 { color: #fff; }
body.home-dark .pksk__apply p { color: var(--ink-inv-soft); }

/* ---------- FAQ / urgency ---------- */
body.home-dark .faq details { border-bottom-color: var(--line-inv); }
body.home-dark .faq summary { color: #fff; }
body.home-dark .faq summary::after { color: var(--teal-lt); }
body.home-dark .faq .a { color: var(--ink-inv-soft); }
body.home-dark .urg { background: rgba(255,255,255,.045); border: 1px solid var(--line-inv); }

/* generic buttons on dark body */
body.home-dark .btn-outline { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
body.home-dark .btn-outline:hover { border-color: var(--teal-lt); }

/* inline soft-ink text written with var(--ink-soft) in markup */
body.home-dark [style*="--ink-soft"] { color: var(--ink-inv-soft) !important; }
body.home-dark a[style*="--teal"] { color: var(--teal-lt) !important; }

/* ============================================================
   HERO SLIDER (.hs) — layered, auto-advancing product showcase.
   Slide 1 ships .is-active in the markup, so first paint is
   complete HTML+CSS before any JavaScript runs.
   ============================================================ */
.hs {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(20,125,122,.50), transparent 60%),
    radial-gradient(900px 480px at 8% 108%, rgba(201,162,39,.18), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.hs__viewport {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  /* Floor generous enough for slide 1 on short laptops (1366×768); hero-slider.js
     additionally measures the tallest slide and raises this if content would clip. */
  min-height: clamp(640px, 88vh, 900px);
}
.hs__slide {
  position: absolute; inset: 0; padding: 56px 22px 96px;
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 48px; align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .65s var(--ease), visibility 0s linear .65s;
}
.hs__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* layered entrance — each element rises in sequence when its slide activates */
.hs__eyebrow, .hs__title, .hs__sub, .hs__pricebar, .hs__cta, .hs__trust, .hs__art {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.hs__art { transform: translateY(18px) scale(.955); }
.is-active .hs__eyebrow  { opacity: 1; transform: none; transition-delay: .08s; }
.is-active .hs__title    { opacity: 1; transform: none; transition-delay: .16s; }
.is-active .hs__sub      { opacity: 1; transform: none; transition-delay: .26s; }
.is-active .hs__pricebar { opacity: 1; transform: none; transition-delay: .34s; }
.is-active .hs__cta      { opacity: 1; transform: none; transition-delay: .42s; }
.is-active .hs__trust    { opacity: 1; transform: none; transition-delay: .52s; }
.is-active .hs__art      { opacity: 1; transform: none; transition-delay: .22s; }

.hs__eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-lt); margin-bottom: 18px;
}
.hs__eyebrow--teal { color: var(--teal-lt); }
.hs__title {
  font-size: clamp(2.1rem, 4.9vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em;
  color: #fff; margin: 0 0 18px; font-weight: 800;
}
.hs__title .g { color: var(--gold-lt); }
.hs__title .t { color: var(--teal-lt); }
.hs__sub { font-size: 1.14rem; color: #cfdae6; max-width: 540px; margin: 0 0 22px; }
.hs__pricebar { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; }
.hs__pricebar .now { font-size: 2.1rem; font-weight: 900; color: var(--gold-lt); }
.hs__pricebar .lbl { font-size: .86rem; font-weight: 700; color: #9fb0c4; }
.hs__cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; }
.hs__trust { display: flex; gap: 22px; flex-wrap: wrap; color: #b9c6d6; font-size: .9rem; }
.hs__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hs__trust .tick { color: var(--gold-lt); font-weight: 900; }

.hs__art { position: relative; }
.hs__art img {
  width: 100%; max-width: 560px; height: auto; margin: 0 auto;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
}

/* ---------- slider chrome (arrows / dots / progress) ----------
   Always in the markup, absolutely positioned (zero CLS), hidden until
   hero-slider.js confirms the stylesheet is live and adds .is-ready. */
.hs__ui { pointer-events: none; }
.hs__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
  background: rgba(10,30,55,.5); color: #fff; font-size: 1.5rem; line-height: 1;
  display: none; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(6px); transition: background .2s var(--ease), border-color .2s;
  pointer-events: auto;
}
.hs.is-ready .hs__arrow { display: flex; }
.hs__arrow:hover { background: rgba(201,162,39,.85); border-color: var(--gold-lt); color: #1d1704; }
.hs__arrow--prev { left: 18px; }
.hs__arrow--next { right: 18px; }
.hs__dots {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 5;
  display: none; gap: 10px; pointer-events: auto;
}
.hs.is-ready .hs__dots { display: flex; }
.hs__dots button {
  width: 34px; height: 5px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(255,255,255,.25); cursor: pointer; transition: background .25s var(--ease);
}
.hs__dots button[aria-selected="true"] { background: var(--gold-lt); }
.hs__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 5;
  background: rgba(255,255,255,.10); display: none;
}
.hs.is-ready .hs__progress { display: block; }
.hs__progress i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  transform: scaleX(0); transform-origin: left;
}
.hs__progress i.is-run { animation: hs-run var(--hs-dur, 6.5s) linear forwards; }
@keyframes hs-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hs__viewport { min-height: 0; }
  .hs__slide {
    position: absolute; grid-template-columns: 1fr; gap: 24px;
    padding: 38px 22px 92px; align-content: start; text-align: left;
  }
  /* the viewport cannot derive height from absolute children — give it one */
  .hs__viewport { height: 920px; }
  .hs__art { order: -1; }
  .hs__art img { max-width: min(300px, 56vw); margin: 0; }
  .hs__slide > * { min-width: 0; }
}
@media (max-width: 620px) {
  .hs__viewport { height: 880px; }
  .hs__title { font-size: clamp(1.7rem, 7.2vw, 2.2rem); }
  .hs__sub { font-size: 1.02rem; }
  .hs__art img { max-width: min(250px, 52vw); }
  .hs__trust { display: none; }              /* secondary — space is scarce here */
  .hs__cta .btn { flex: 1; }
  .hs__arrow { display: none !important; }   /* swipe + dots on phones */
}

/* ============================================================
   "Kenapa JuaraPKSK" — editorial alternating rows
   ============================================================ */
.wed { display: grid; gap: 72px; margin-top: 64px; }
.wed__row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.wed__row:nth-child(even) .wed__media { order: 2; }
.wed__num {
  display: block; font-size: .84rem; font-weight: 800; letter-spacing: .3em;
  color: var(--gold-lt); margin-bottom: 12px;
}
.wed__row h3 { font-size: clamp(1.45rem, 2.7vw, 2.1rem); color: #fff; letter-spacing: -.015em; margin-bottom: 12px; }
.wed__row p { color: var(--ink-inv-soft); font-size: 1.05rem; max-width: 480px; }
.wed__points { list-style: none; padding: 0; margin: 16px 0 0; }
.wed__points li { position: relative; padding-left: 26px; margin-bottom: 8px; color: var(--ink-inv); font-size: .97rem; }
.wed__points li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-lt); font-weight: 900; }
.wed__media img {
  width: 100%; height: auto; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10); box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
@media (max-width: 940px) {
  .wed { gap: 52px; }
  .wed__row { grid-template-columns: 1fr; gap: 22px; }
  .wed__row:nth-child(even) .wed__media { order: 0; }
}

/* ============================================================
   SCROLL-PINNED "DECK" SECTIONS — Produk Terperinci & Kenapa.
   The section holds on screen while its panels crossfade+rise in
   sequence, then the page releases to the next section.

   Three rendering modes:
   1. Native — CSS scroll-driven animations (Chrome/Edge 115+, Safari 26),
      gated by @supports; invisible full-height "driver" strips supply
      view-timelines, the stage is sticky, panels stack in one grid cell.
   2. JS fallback (Firefox) — deck.js adds .deck--js and drives .is-on /
      .is-past classes from scroll progress; transitions do the rest.
   3. Flow — mobile (<941px), prefers-reduced-motion, or no support + no JS:
      none of the rules below apply and the deck renders as the normal
      stacked layout it always was.
   ============================================================ */

/* stale-CSS guard read by deck.js (same story as gallery.js) */
[data-deck] { --deck-ready: 1; }

@keyframes dk-in {
  from { opacity: 0; transform: translateY(64px); visibility: hidden; }
  to   { opacity: 1; transform: none;             visibility: visible; }
}
@keyframes dk-out {
  to   { opacity: 0; transform: translateY(-44px); visibility: hidden; }
}

@media (min-width: 941px) and (prefers-reduced-motion: no-preference) {

  /* ---- 1 · native scroll-driven path ----
     ONE view-timeline on the deck itself; panels animate on aligned slices of
     its `contain` phase (deck fully covering the scrollport = the pinned span),
     so each fade-out shares its exact scroll window with the next fade-in. */
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    .deck { position: relative; height: calc(var(--deck-n, 3) * 115vh); view-timeline: --dk block; timeline-scope: --dk; }

    .deck__stage { position: sticky; top: 68px; height: calc(100vh - 68px); overflow: hidden; }
    .deck__stage > .wrap { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: center; }
    .deck__panels { display: grid; align-items: center; min-height: 0; margin-top: 0; }
    .deck__panels > * { grid-area: 1 / 1; margin: 0; align-self: center; }
    /* the deck owns visibility now — neutralise the generic scroll-reveal */
    .deck__panels > .reveal, .deck .deck__head.reveal { opacity: 1; transform: none; transition: none; }

    /* timeline/range AFTER the animation shorthand (it would reset them).
       3-panel deck: boundaries at 1/3 and 2/3 of the pinned span. */
    .deck--n3 .deck__panels > :nth-child(1) {
      animation: dk-out auto linear forwards;
      animation-timeline: --dk;
      animation-range: contain 28% contain 38%;
    }
    .deck--n3 .deck__panels > :nth-child(2) {
      animation: dk-in auto linear both, dk-out auto linear forwards;
      animation-timeline: --dk, --dk;
      animation-range: contain 28% contain 38%, contain 61% contain 71%;
    }
    .deck--n3 .deck__panels > :nth-child(3) {
      animation: dk-in auto linear both;
      animation-timeline: --dk;
      animation-range: contain 61% contain 71%;
    }

    /* 4-panel deck: boundaries at 25 / 50 / 75%. */
    .deck--n4 .deck__panels > :nth-child(1) {
      animation: dk-out auto linear forwards;
      animation-timeline: --dk;
      animation-range: contain 20% contain 29%;
    }
    .deck--n4 .deck__panels > :nth-child(2) {
      animation: dk-in auto linear both, dk-out auto linear forwards;
      animation-timeline: --dk, --dk;
      animation-range: contain 20% contain 29%, contain 46% contain 55%;
    }
    .deck--n4 .deck__panels > :nth-child(3) {
      animation: dk-in auto linear both, dk-out auto linear forwards;
      animation-timeline: --dk, --dk;
      animation-range: contain 46% contain 55%, contain 72% contain 81%;
    }
    .deck--n4 .deck__panels > :nth-child(4) {
      animation: dk-in auto linear both;
      animation-timeline: --dk;
      animation-range: contain 72% contain 81%;
    }

    /* panel fit — keep one panel + header inside one viewport */
    .deck .deck__head { margin-bottom: 10px; }
    .deck .deck__head h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
    .deck .pd { margin-top: 0; gap: 34px; }
    .deck .pd--flag { padding: 22px 26px; }
    .deck .gal__slide img { width: min(100%, calc(100vh - 300px)); height: auto; margin-inline: auto; }
    .deck .pd__lede { font-size: .98rem; }
    .deck .wed__row { gap: 48px; }
    .deck .wed__media img { max-height: calc(100vh - 300px); width: auto; max-width: 100%; margin-inline: auto; }
    @media (max-height: 840px) {
      .deck .deck__head .lead { display: none; }
    }
    /* squat laptops: compact the info column so the tallest panel fits the stage */
    @media (max-height: 800px) {
      .deck .pd { gap: 24px; }
      .deck .pd__info h3 { font-size: 1.35rem; }
      .deck .pd__lede { font-size: .92rem; margin-bottom: 8px; }
      .deck .pd__list { margin: 10px 0; }
      .deck .pd__list li { margin-bottom: 4px; font-size: .92rem; }
      .deck .pd__why { margin-bottom: 10px; font-size: .9rem; }
      .deck .coupon-line { margin-bottom: 8px; }
      .deck .pd__demo { display: none; }
      .deck .deck__head h2 { font-size: 1.35rem; }
      /* 20-image gallery: one slim thumb row instead of two tall ones */
      .deck .gal--20 .gal__thumbs { grid-template-columns: repeat(20, 1fr); gap: 4px; }
      .deck .wed__media img { max-height: calc(100vh - 370px); }
      .deck .wed__row h3 { font-size: 1.35rem; }
      .deck .wed__row p { font-size: .95rem; }
    }
  }

  /* ---- 2 · JS fallback path (deck.js adds .deck--js when native is absent) ---- */
  .deck--js { position: relative; height: calc(var(--deck-n, 3) * 115vh); }
  .deck--js .deck__stage { position: sticky; top: 68px; height: calc(100vh - 68px); overflow: hidden; }
  .deck--js .deck__stage > .wrap { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: center; }
  .deck--js .deck__panels { display: grid; align-items: center; min-height: 0; margin-top: 0; }
  .deck--js .deck__panels > * {
    grid-area: 1 / 1; margin: 0; align-self: center;
    opacity: 0; visibility: hidden; transform: translateY(64px);
    transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s linear .55s;
  }
  .deck--js .deck__panels > .is-past { transform: translateY(-44px); }
  .deck--js .deck__panels > .is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .deck--js .deck__head.reveal { opacity: 1; transform: none; transition: none; }
  .deck--js .deck__head { margin-bottom: 10px; }
  .deck--js .deck__head h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
  .deck--js .pd { margin-top: 0; gap: 34px; }
  .deck--js .pd--flag { padding: 22px 26px; }
  .deck--js .gal__slide img { width: min(100%, calc(100vh - 300px)); height: auto; margin-inline: auto; }
  .deck--js .pd__lede { font-size: .98rem; }
  .deck--js .wed__row { gap: 48px; }
  .deck--js .wed__media img { max-height: calc(100vh - 300px); width: auto; max-width: 100%; margin-inline: auto; }
  @media (max-height: 840px) {
    .deck--js .deck__head .lead { display: none; }
  }
  @media (max-height: 800px) {
    .deck--js .pd { gap: 24px; }
    .deck--js .pd__info h3 { font-size: 1.35rem; }
    .deck--js .pd__lede { font-size: .92rem; margin-bottom: 8px; }
    .deck--js .pd__list { margin: 10px 0; }
    .deck--js .pd__list li { margin-bottom: 4px; font-size: .92rem; }
    .deck--js .pd__why { margin-bottom: 10px; font-size: .9rem; }
    .deck--js .coupon-line { margin-bottom: 8px; }
    .deck--js .pd__demo { display: none; }
    .deck--js .deck__head h2 { font-size: 1.35rem; }
    .deck--js .gal--20 .gal__thumbs { grid-template-columns: repeat(20, 1fr); gap: 4px; }
    .deck--js .wed__media img { max-height: calc(100vh - 370px); }
    .deck--js .wed__row h3 { font-size: 1.35rem; }
    .deck--js .wed__row p { font-size: .95rem; }
  }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .hs__slide { transition: opacity .3s linear, visibility 0s linear .3s; }
  .hs__eyebrow, .hs__title, .hs__sub, .hs__pricebar, .hs__cta, .hs__trust, .hs__art {
    opacity: 1; transform: none; transition: none;
  }
  .hs__slide:not(.is-active) .hs__eyebrow, .hs__slide:not(.is-active) .hs__title,
  .hs__slide:not(.is-active) .hs__sub, .hs__slide:not(.is-active) .hs__pricebar,
  .hs__slide:not(.is-active) .hs__cta, .hs__slide:not(.is-active) .hs__trust,
  .hs__slide:not(.is-active) .hs__art { opacity: 0; }
  .hs__progress { display: none !important; }
}