/* =========================================================
   DIALed In — CSS (clean responsive build)
   - Grid layout fits all screens without clipping
   - Title kept; instructions 1" above phone
   - Form closer to phone
   - Hotspots retuned (discipline/everyday/dial)
   ========================================================= */

/* 0) Tokens */
:root{
  /* type & spacing */
  --base: clamp(16px, 1.9vw, 18px);
  --h1: clamp(28px, 5.4vw, 40px);
  --h2: clamp(20px, 3.2vw, 26px);
  --pad-x: clamp(14px, 3vw, 24px);

  /* layout */
  --maxw: 960px;

  /* colors */
  --bg-grad-top: #fdf6e3;
  --bg-grad-bot: #fff8f0;
  --text: #333;
  --brand: #d62828;

  /* fonts */
  --font-head: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* special gaps */
  --instr-gap: 72pt;  /* exactly 1 inch above the phone */
}

/* 1) Base */
html, body{
  height: 100%;
  margin: 0;
  min-height: 100svh;
  /* allow scroll as a safety valve on very short screens (prevents clipping) */
  overflow: auto;
  background: linear-gradient(180deg, var(--bg-grad-top), var(--bg-grad-bot));
  font-family: var(--font-body);
  color: var(--text);
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

/* 2) Main stack uses GRID so the phone can flex between title and form */
.page, .main-container{
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* title | instruction | PHONE | form */
  justify-items: center;
  align-items: center;        /* center when there’s extra vertical space */
  height: 100svh;
  max-width: var(--maxw);
  margin: 0 auto;

  /* dynamic top/bottom bands that adapt to screen height (no clipping) */
  padding-block: clamp(24px, 6vh, 96px);
  padding-inline: var(--pad-x);

  gap: clamp(8px, 1.8vh, 16px);
}

/* 3) Headline & copy */
#main-headline, #form-headline{
  font-family: var(--font-head);
  color: var(--brand);
  font-weight: 700;
}
#main-headline{
  font-size: var(--h1);
  margin: 0 0 .25em 0; /* keep title; just a tidy gap below */
  line-height: 1.1;
}
#instruction-text{
  font-style: italic;
  color: #7f8c8d;
  font-size: clamp(15px, 2.2vw, 18px);
  margin: 0 0 var(--instr-gap) 0; /* lock 1" above the phone */
}

/* 4) Phone container + image
   - Fills the flexible middle row and never exceeds available space */
#phone-container{
  position: relative;
  width: min(92vw, 520px);
  max-height: 100%;       /* critical: do not exceed the grid slot */
  aspect-ratio: 9 / 16;   /* adjust if your phone art differs */
  margin: 0;
}
#phone-image{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(214, 40, 40, 0.6));
  transition: transform 0.2s ease;
}

/* 5) Hotspots: bigger, easier to tap (44px+) */
#dial-hotspot, .sticker-hotspot{
  position: absolute;
  cursor: pointer;
  border-radius: 15px;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  min-width: 44px; min-height: 44px;
  outline: none;
}
#dial-hotspot:hover, .sticker-hotspot:hover,
#dial-hotspot:focus-visible, .sticker-hotspot:focus-visible{
  box-shadow: 0 0 20px 6px rgba(214, 40, 40, 0.6);
  transform: scale(1.05);
}

/* Dial hotspot — centered on dial (shifted left & up per request) */
#dial-hotspot{
  left: 48.5%;     /* was 51% */
  bottom: 51%;     /* was 47.8% */
  width: clamp(44px, 11%, 120px);
  height: clamp(44px, 11%, 120px);
  border-radius: 50%;
  z-index: 6;
}

/* Sticker hotspots — tuned percentages with min size safety */
.sticker-hotspot{ border-radius: 15px; }

/* Love (unchanged from your base) */
#hotspot-love{
  top: 23%;
  left: 13%;
  width: clamp(56px, 20%, 160px);
  height: clamp(44px, 18%, 140px);
}

/* Intention (unchanged from your base) */
#hotspot-intention{
  top: 23.2%;
  left: 68.2%;
  width: clamp(64px, 22%, 180px);
  height: clamp(44px, 18%, 140px);
}

/* Action (unchanged from your base) */
#hotspot-action{
  bottom: 25.5%;
  left: 19.5%;
  width: clamp(52px, 19%, 160px);
  height: clamp(44px, 15%, 120px);
}

/* Discipline — ~1/3 shorter, moved up & right */
#hotspot-discipline{
  bottom: 27.5%;                      /* up */
  left: 46.0%;                        /* right */
  width: clamp(52px, 17%, 140px);     /* shorter than 25.5% */
  height: clamp(44px, 10.2%, 100px);
}

/* Every Day — moved up */
#hotspot-everyday{
  bottom: 28.5%;                      /* was 22.2% */
  right: 12%;
  width: clamp(52px, 18%, 160px);
  height: clamp(44px, 10%, 100px);
}

/* 6) Form — closer to the phone */
#form-container{
  margin-top: 10px;  /* snug to phone */
  transform: none;
}
#form-headline{ font-size: var(--h2); margin: 0 0 .25em 0; }
#form-container p{
  font-size: clamp(14px, 2vw, 16px);
  color: #7f8c8d;
  margin: 0 0 .5em 0;
}
#form-container input{
  width: min(82vw, 350px);
  padding: 12px 14px;
  margin-top: 10px;
  border: 2px solid #ccc; border-radius: 10px;
  font-size: clamp(15px, 2vw, 16px);
}
#form-container button{
  background-color: #27ae60; color: #fff;
  padding: 12px 22px; border: none; border-radius: 10px;
  margin-top: 10px; cursor: pointer;
  font-size: clamp(16px, 2.2vw, 18px); font-weight: 700;
  min-height: 44px; min-width: 44px;
  transition: background-color .3s;
}
#form-container button:hover{ background-color: #2ecc71; }

/* 7) Popups (unchanged) */
#popup-wrapper{
  position: fixed; inset: 0;
  background-color: rgba(0,0,0,0.6);
  display: flex; justify-content: center; align-items: center;
  z-index: 1000;
}
.popup-bubble{
  background: #fff;
  padding: 24px; border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  width: 90%; max-width: 500px;
  position: relative; text-align: left;
}
.popup-content{ font-size: clamp(15px, 2.1vw, 17px); line-height: 1.55; }
.close-btn{
  position: absolute; top: 10px; right: 15px;
  background: none; border: none;
  font-size: 2em; color: #aaa; cursor: pointer;
}
.close-btn:hover{ color: #333; }
.hidden{ display: none !important; }

/* 8) Motion (unchanged) */
@keyframes phone-shake{
  0%{ transform: rotate(0deg); }
  20%{ transform: rotate(-5deg); }
  40%{ transform: rotate(5deg); }
  60%{ transform: rotate(-5deg); }
  80%{ transform: rotate(5deg); }
  100%{ transform: rotate(0deg); }
}
.ringing{ animation: phone-shake .4s infinite; }

/* 9) Short viewports: trim top/bottom padding a bit more to avoid scroll */
@media (max-height: 700px){
  .main-container{
    padding-block: clamp(16px, 4vh, 64px);
    gap: 10px;
  }
}

/* 10) Very small phones: slight phone scale via container width */
@media (max-width: 480px){
  #phone-container{
    width: min(90vw, 460px);
  }
}
/* === Minimal, universal fit — 3 knobs only === */
/* Knob A: top/bottom bands; Knob B: gap above phone; Knob C: phone height */

html, body { overflow: auto; }  /* prevents clipping on any device */

:root{
  /* A) Bands (top/bottom spacing) */
  --band-top: 96px;    /* try 72–120px */
  --band-bot: 96px;    /* try 72–120px */

  /* B) Instruction gap ABOVE the phone */
  --gap-above-phone: 72px;  /* ~1" ≈ 72px. Try 56–88px */

  /* C) Max phone height (relative to viewport) */
  --phone-max: 48vh;   /* try 44–52vh on laptops; 42–46vh on phones */
}

/* apply the dials */
.main-container{
  padding-top: var(--band-top);
  padding-bottom: var(--band-bot);
}

#instruction-text{
  margin-bottom: var(--gap-above-phone);
}

#phone-container{
  max-height: var(--phone-max);
}

/* Phone-specific defaults (keeps desktop intact) */
@media (max-width: 600px){
  :root{
    --band-top: 80px;
    --band-bot: 80px;
    --gap-above-phone: 56px;
    --phone-max: 44vh;
  }
}

/* Laptop sweet spot (13–14") */
@media (min-width: 1024px) and (max-width: 1440px){
  :root{
    --band-top: 100px;
    --band-bot: 100px;
    --gap-above-phone: 60px;
    --phone-max: 46vh;
  }
}