/* ========= DwellaScope v9.6 — FINAL HOTSPOT STYLES (calibrated for 1024px hero) ========= */
:root{
  --green:#017A57;
  --ink:#0C2430;
  --shadow:0 12px 36px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:#f7f7f6;
  color:var(--ink);
}

.page{max-width:1200px;margin:0 auto;padding:16px}

/* ----- HERO: full composite image ----- */
.hero-full{ position:relative; margin:8px 0 20px; }
.hero-full-img{
  width:100%; height:auto; display:block;
  border-radius:16px; box-shadow:var(--shadow); background:#fff;
}

/* ----- INVISIBLE HOTSPOTS (default responsive) ----- */
.hero-actions{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: clamp(20px, 6.5vw, 48px);
  width: min(860px, 86%);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
  z-index:2;
  pointer-events:none;
}
.hero-actions .btn{
  pointer-events:auto;
  display:block;
  height: clamp(62px, 8.5vw, 90px);
  background: transparent;
  border: none;
  box-shadow: none;
  color: transparent;
  text-indent: -9999px;
  border-radius: 14px;
  cursor: pointer;
}
.hero-actions .btn:focus-visible{
  outline: 3px solid rgba(1,122,87,.6);
  outline-offset: 2px;
  border-radius: 14px;
}

/* ----- DESKTOP CALIBRATION for 1024px hero image width ----- */
/* When the rendered hero image is ~1024px wide, these values align the hotspots
   with the printed buttons on the image exactly. */
@media (min-width: 980px){
  .hero-actions{
    bottom: 40px;       /* vertical position over the printed panel */
    width: 860px;       /* exact row width for the three buttons (≈84% of 1024) */
  }
  .hero-actions .btn{
    height: 92px;       /* hotspot height matching printed buttons */
  }
}

/* Mobile safety (keeps hotspots aligned on small screens) */
@media (max-width: 640px){
  .hero-actions{
    bottom: 36px;
    width: 90%;
  }
  .hero-actions .btn{
    height: 78px;
  }
}

/* === Precise alignment for a ~934px-wide hero image === */
@media (min-width: 920px) and (max-width: 950px){
  .hero-actions{
    width: 785px;     /* panel width */
    bottom: 230px;    /* was 37px — moved up by ~2" (≈192px) */
  }
  .hero-actions .btn{
    height: 85px;
  }
}
.section{max-width:900px;margin:56px auto;padding:0 12px}
.section h2{margin:0 0 16px;font-size:24px}
.steps{margin:0;padding-left:18px;line-height:1.6}
details{background:#fff;border-radius:10px;padding:12px 14px;margin:10px 0;box-shadow:0 6px 18px rgba(0,0,0,.06)}
details summary{cursor:pointer;font-weight:600}
/* ==== FORCE hotspot alignment (no media queries) ==== */
.hero-full{ position: relative !important; }

.hero-actions{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  /* adjust these two numbers only */
  bottom: 330px !important;   /* move row up/down */
  width: 830px !important;    /* widen/narrow to match printed panel */

  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  pointer-events: none !important;
  z-index: 3 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero-actions .btn{
  pointer-events: auto !important;
  display: block !important;
  height: 90px !important;    /* hotspot height */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
}