/* AIMT Readiness Prompt — Head Spa sales landing only
   (assets/js/aimt-readiness-prompt.js). A small focused dialog over a
   translucent, blurred backdrop: centered editorial card on desktop,
   bottom sheet on mobile. Reuses the landing's dark card surface, the
   AIMT metric ring (assets/css/aimt-metric-ring.css — the same ring the
   Readiness result reveals) and the secondary .lp-enroll-btn pill, so it
   stays visually quieter than the primary white enroll CTA. */

/* ── Backdrop ── */
.aimt-rp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1001; /* above #landingPage (999) and the public nav (1000) */
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(26,24,20,0.38) 0%, rgba(10,8,8,0.70) 100%);
  -webkit-backdrop-filter: blur(7px) saturate(0.85);
  backdrop-filter: blur(7px) saturate(0.85);
  opacity: 0;
  transition: opacity 0.4s ease;
  cursor: pointer;
}
.aimt-rp-backdrop.is-open { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .aimt-rp-backdrop { background: rgba(10,8,8,0.76); }
}

/* ── Card (desktop: centered modal) ── */
.aimt-rp {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1002;
  box-sizing: border-box;
  width: min(432px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 2.35rem 2.1rem 1.45rem;
  text-align: center;
  background:
    radial-gradient(440px 240px at 50% -8%, rgba(163,150,141,0.16) 0%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 42%),
    var(--hero-bg2, #1a1814);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: var(--aimt-radius-lg, 20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 32px 90px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.92);
  opacity: 0;
  transform: translate(-50%, calc(-50% + 16px)) scale(0.985);
  transition: opacity 0.42s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.aimt-rp.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.aimt-rp:focus { outline: none; }
.aimt-rp:focus-visible { outline: 1px solid rgba(255,255,255,0.32); outline-offset: 3px; }

.aimt-rp-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--aimt-font-sans);
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(255,255,255,0.42);
  transition: color 0.2s, background 0.2s;
}
.aimt-rp-close:hover,
.aimt-rp-close:focus-visible { color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.06); outline: none; }

/* ── Readiness ring preview ("?" — never a score) ── */
.aimt-rp-ring {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 1.5rem;
}
.aimt-rp-ring::before { /* soft halo behind the ring, same taupe as the arc */
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin: -104px 0 0 -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163,150,141,0.14) 0%, transparent 66%);
  pointer-events: none;
}
.aimt-rp-ring .aimt-metric-ring { width: 116px; height: 116px; }
.aimt-rp-ring .aimt-metric-ring-track { stroke: rgba(255,255,255,0.09); }
/* The short arc is a "not yet measured" sweep that keeps turning, so it
   can never be read as a partial score. */
.aimt-rp-ring .aimt-metric-ring-svg { animation: aimtRpSweep 7s linear infinite; }
@keyframes aimtRpSweep {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}
.aimt-rp-ring .aimt-metric-ring-value {
  font-size: 2.15rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.aimt-rp-ring .aimt-metric-ring-label:empty { display: none; }
.aimt-rp-ring .aimt-metric-ring-status { margin-top: 0.85rem; letter-spacing: 0.18em; }

/* ── Copy + actions ── */
.aimt-rp-title {
  max-width: 22ch;
  margin: 0 auto 0.7rem;
  font-family: var(--aimt-font-mont);
  font-size: clamp(1.16rem, 1.9vw, 1.36rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.18;
  color: rgba(255,255,255,0.95);
}
.aimt-rp-body {
  max-width: 36ch;
  margin: 0 auto 1.5rem;
  font-family: var(--aimt-font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.64;
  color: rgba(255,255,255,0.58);
}

.aimt-rp-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; }
.aimt-rp-cta.lp-enroll-btn {
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
  color: rgba(255,255,255,0.82);
  border-color: rgba(255,255,255,0.2);
}
.aimt-rp-cta.lp-enroll-btn:hover,
.aimt-rp-cta.lp-enroll-btn:focus-visible { color: #fff; border-color: rgba(255,255,255,0.36); }
.aimt-rp-later {
  align-self: center;
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--aimt-font-sans);
  font-size: 0.76rem;
  color: rgba(255,255,255,0.42);
  transition: color 0.2s;
}
.aimt-rp-later:hover,
.aimt-rp-later:focus-visible { color: rgba(255,255,255,0.82); outline: none; text-decoration: underline; text-underline-offset: 3px; }

/* ── Mobile: compact bottom sheet, full width, above the sticky enroll
   bar (--aimt-rp-offset is that bar's height, set by the script; 0 when
   the bar is hidden). ── */
@media (max-width: 640px) {
  .aimt-rp {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--aimt-rp-offset, 0px));
    width: auto;
    max-height: calc(100vh - var(--aimt-nav-height, 56px) - var(--aimt-rp-offset, 0px) - 24px);
    max-height: calc(100dvh - var(--aimt-nav-height, 56px) - var(--aimt-rp-offset, 0px) - 24px);
    padding: 1.5rem 1.15rem 0.85rem;
    border-radius: var(--aimt-radius-panel, 16px);
    transform: translateY(20px);
  }
  .aimt-rp.is-open { transform: translateY(0); }
  .aimt-rp-ring { margin-bottom: 1rem; }
  .aimt-rp-ring::before { width: 140px; height: 140px; margin: -82px 0 0 -70px; }
  .aimt-rp-ring .aimt-metric-ring { width: 84px; height: 84px; }
  .aimt-rp-ring .aimt-metric-ring-value { font-size: 1.6rem; }
  .aimt-rp-ring .aimt-metric-ring-status { margin-top: 0.6rem; }
  .aimt-rp-title { font-size: 1.06rem; margin-bottom: 0.5rem; }
  .aimt-rp-body { font-size: 0.84rem; line-height: 1.55; margin-bottom: 1rem; }
  .aimt-rp-cta.lp-enroll-btn { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .aimt-rp { transition: none; transform: none; }
  .aimt-rp.is-open { transform: translate(-50%, -50%); }
  .aimt-rp-backdrop { transition: none; }
  /* No moving sweep → no arc at all, so nothing reads as a partial score. */
  .aimt-rp-ring .aimt-metric-ring-svg { animation: none; }
  .aimt-rp-ring .aimt-metric-ring-fill { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .aimt-rp.is-open { transform: none; }
}