:root {
  --ink: #111418;
  --ink-2: #3f4a53;
  --muted: #5d676d;
  --line: #e4ebee;
  --soft: #f3f7f9;
  --teal: #6ac1d2;
  --teal-ink: #1d7384;
  --blue: #3d83ef;
  --blue-2: #3679e5;
  --cyan: #8de1ff;
  --white: #ffffff;
  --card-w: 400px;
  --radius: 28px;
  --font: "Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--blue); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input { font: inherit; }
h2, h3 { margin: 0; letter-spacing: -0.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Stage (full bleed, Home 2 hero blue) ---------- */
.app { position: relative; height: 100%; }
.stage {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(circle at 42% 34%, rgba(141, 225, 255, .55) 0, rgba(141, 225, 255, 0) 40%),
    radial-gradient(circle at 40% 14%, rgba(86, 162, 255, .6) 0, rgba(86, 162, 255, 0) 32%),
    linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.topbar { position: absolute; top: 20px; left: 24px; right: calc(var(--card-w) + 44px); z-index: 4; display: flex; align-items: center; justify-content: space-between; pointer-events: none;
  /* same glass pill as the Home 2 header */
  min-height: 64px; padding: 12px 12px 12px 22px; border-radius: 100px; background: rgba(224, 244, 248, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.brand__logo { width: 153px; height: auto; filter: brightness(0) invert(1); opacity: .95; display: block; }   /* Home 2 logo treatment */
.brand__tool { font-weight: 600; font-size: 13px; opacity: .85; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.35); }

.stage__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; font-size: 14px; z-index: 5; transition: opacity .6s; }
.stage__loading.is-hidden { opacity: 0; pointer-events: none; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.stage__hints { position: absolute; top: 100px; left: 28px; z-index: 3; transition: opacity .6s; }
.stage__hints.is-faded { opacity: 0; pointer-events: none; }
.hint { display: none; align-items: center; gap: 8px; font-size: 13px; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(12px); padding: 8px 14px; border-radius: 999px; }
body[data-step="1"] .hint--s1, body[data-step="2"] .hint--s2 { display: inline-flex; }

/* one number */
.readout { position: absolute; left: 28px; bottom: 26px; z-index: 3; color: #fff; text-shadow: 0 2px 18px rgba(10, 40, 110, .35); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.readout__num { display: flex; align-items: baseline; gap: 10px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.readout__num span { font-size: 46px; line-height: 1; transition: font-size .5s var(--ease); }
.readout__num em { font-style: normal; font-size: 18px; font-weight: 600; opacity: .9; }
.readout__sub { font-size: 14px; margin-top: 6px; opacity: .92; }
.readout__pkg { display: none; margin-top: 12px; font-size: 14px; font-weight: 700; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(12px); padding: 8px 14px; border-radius: 999px; width: fit-content; text-shadow: none; }
body[data-step="1"] .readout { opacity: 0; transform: translateY(12px); pointer-events: none; }
body[data-step="3"] .readout__num span { font-size: 72px; }
body[data-step="3"] .readout__pkg { display: block; }

/* before / after wipe */
.wipe { position: absolute; top: 0; bottom: 0; left: var(--wipe, 0%); z-index: 3; width: 0; pointer-events: none; transition: opacity .4s; }
.wipe[hidden] { display: block; opacity: 0; }
.wipe__line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: rgba(255,255,255,.9); box-shadow: 0 0 12px rgba(255,255,255,.6); }
.wipe__knob { position: absolute; top: 50%; left: -26px; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 0; background: #fff; color: var(--blue-2); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(10, 40, 110, .3); cursor: ew-resize; pointer-events: auto; touch-action: none; transition: transform .2s var(--ease); }
.wipe__knob svg { width: 24px; height: 24px; }
.wipe__knob:hover { transform: scale(1.06); }
.wipe__tag { position: absolute; top: calc(50% + 40px); font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 20, 60, .28); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.wipe__tag--l { right: 10px; }
.wipe__tag--r { left: 10px; }
.wipe.is-parked .wipe__line, .wipe.is-parked .wipe__tag--l { opacity: 0; }
.wipe.is-nudge .wipe__knob { animation: nudge 1.6s var(--ease) 2; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(18px); } }

/* ---------- Card ---------- */
.card {
  position: absolute; top: 20px; right: 20px; bottom: 20px; width: var(--card-w); z-index: 4;
  display: flex; flex-direction: column; overflow-y: auto;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(12, 44, 110, .28);
  padding: 26px 26px 20px;
}
.card__top { display: flex; align-items: center; justify-content: space-between; }
.progress { display: flex; align-items: center; gap: 8px; }
.wdot { width: 8px; height: 8px; border-radius: 50%; background: #d3dde2; cursor: pointer; transition: .3s var(--ease); }
.wdot.is-active { width: 22px; border-radius: 999px; background: var(--blue); }
.wdot.is-done { background: var(--ink); }
.progress em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 6px; font-weight: 600; }

.wstep { display: none; margin-top: 22px; }
.wstep.is-active { display: block; animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.wstep h2 { font-size: 26px; line-height: 1.15; font-weight: 800; }
.step__hint { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.label { font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* step 1: loss slider */
.loss { display: flex; align-items: center; gap: 16px; margin: 24px 0 18px; padding: 14px; background: var(--soft); border-radius: 20px; }
.loss canvas { width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.loss__text b { display: block; font-size: 18px; letter-spacing: -.01em; }
.loss__text span { font-size: 13px; color: var(--muted); }

/* ranges */
.range { width: 100%; margin: 0; appearance: none; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--blue) var(--p, 50%), #e1e8ec var(--p, 50%)); outline: none; cursor: pointer; }
.range::-webkit-slider-thumb { appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.04); cursor: grab; transition: transform .15s; }
.range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.22); }
.range--loss { height: 8px; }
.slider__ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 10px; }
.slider { display: block; margin-top: 16px; }
.slider__row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.slider__row b { color: var(--teal-ink); }

/* step 2 */
.looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.look { border: 1.5px solid var(--line); background: #fff; border-radius: 18px; padding: 12px 8px 12px; cursor: pointer; text-align: center; transition: .2s var(--ease); }
.look:hover { border-color: #b9cfe9; transform: translateY(-1px); }
.look.is-active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61, 131, 239, .16); }
.look svg { width: 64px; height: 40px; display: block; margin: 0 auto 8px; }
.look b { font-size: 13px; }
.colors { margin-top: 22px; }
.swatches { display: flex; gap: 12px; margin-top: 10px; }
.swatch { border: 0; background: transparent; cursor: pointer; padding: 0; }
.swatch i { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--sw); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); transition: .2s var(--ease); }
.swatch:hover i { transform: scale(1.08); }
.swatch.is-active i { box-shadow: 0 0 0 2.5px var(--blue); }
.swatch span { display: none; }
.linkbtn { border: 0; background: transparent; color: var(--teal-ink); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; margin-top: 18px; }
.finetune { margin-top: 10px; padding: 14px; border-radius: 16px; background: var(--soft); }
.finetune[hidden] { display: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: 12px; color: var(--ink-2); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* step 3 */
.timeline { margin-top: 18px; }
.timeline__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.timeline__stage { font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: right; }
.reveal { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(16px); pointer-events: none; transition: max-height .8s var(--ease), opacity .7s var(--ease) .1s, transform .7s var(--ease) .1s; }
.reveal.is-on { max-height: 1000px; opacity: 1; transform: none; pointer-events: auto; }
.plan { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.plan img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: var(--blue); flex: 0 0 auto; }
.plan b { display: block; font-size: 16px; }
.plan span { font-size: 13px; color: var(--muted); }
.lead { margin-top: 16px; }
.lead__title { font-weight: 800; font-size: 18px; letter-spacing: -.01em; margin-bottom: 4px; }
.lead input[type=text], .lead input[type=tel] { width: 100%; margin-top: 10px; padding: 14px 16px; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; font-size: 15px; }
.lead input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61, 131, 239, .15); }
.lead input.is-invalid { border-color: #e0605a; }
.lead .btn--block { margin-top: 14px; }
.tiny { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.lead[hidden] { display: none; }
.lead--success { text-align: left; }
.success__icon { width: 44px; height: 44px; border-radius: 50%; background: #25d366; color: #fff; font-weight: 800; font-size: 22px; display: grid; place-items: center; margin-bottom: 10px; }
.lead--success h3 { font-size: 18px; }
.lead--success p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.lead--success details { font-size: 12px; margin-top: 10px; }
.lead--success pre { font-size: 11px; background: var(--soft); padding: 10px; border-radius: 10px; overflow: auto; max-height: 180px; }
.surgeon { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.surgeon img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--soft); }

/* nav + buttons */
.wizard__nav { display: flex; gap: 10px; margin-top: 26px; }
.wizard__nav .btn--primary { flex: 1; }
.wizard__nav--single { margin-top: 12px; }
.btn { border: 0; cursor: pointer; border-radius: 999px; padding: 14px 22px; font-weight: 700; font-size: 15px; transition: .2s var(--ease); }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #262c33; transform: translateY(-1px); }
.btn--ghost { background: var(--soft); color: var(--ink); }
.btn--ghost:hover { background: #e7eef2; }
.btn--text { background: transparent; padding: 10px 0; color: var(--muted); font-weight: 600; font-size: 14px; }
.btn--text:hover { background: transparent; color: var(--ink); }
.btn--small { padding: 9px 16px; font-size: 13px; background: var(--ink); color: #fff; }
.btn--block { width: 100%; }
.btn--glass { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(12px); padding: 10px 18px; font-size: 14px; }
.btn--glass:hover { background: rgba(255,255,255,.28); }

.about { margin-top: auto; padding-top: 22px; font-size: 12px; color: var(--muted); }
.about summary { cursor: pointer; font-weight: 600; list-style: none; }
.about summary::-webkit-details-marker { display: none; }
.about p { line-height: 1.5; margin: 8px 0 0; }
.about a { color: var(--teal-ink); }

/* ---------- Phone & small tablet: stage on top, bottom sheet below, no page scroll ---------- */
@media (max-width: 960px) {
  html, body { height: 100%; }
  body { overflow: hidden; }
  .app { height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .stage { position: relative; inset: auto; min-height: 0; }

  .topbar { top: 10px; left: 12px; right: 12px; min-height: 52px; padding: 8px 8px 8px 16px; }
  .brand__logo { width: 122px; }
  .brand__tool { display: none; }
  .btn--glass { padding: 8px 14px; font-size: 13px; }
  .stage__hints { top: 72px; left: 16px; }
  .hint { font-size: 12px; padding: 6px 12px; }

  .readout { left: 16px; bottom: 34px; }
  .readout__num span { font-size: 34px; }
  .readout__num em { font-size: 15px; }
  .readout__sub { font-size: 12px; margin-top: 4px; }
  .readout__pkg { font-size: 12px; padding: 6px 12px; margin-top: 8px; }
  /* on phones the sheet's plan line carries the number in step 3; keep the face clear */
  body[data-step="3"] .readout { opacity: 0; pointer-events: none; }
  body[data-step="3"] .card { max-height: 56dvh; }

  .wipe__knob { width: 44px; height: 44px; left: -22px; margin-top: -22px; }
  .wipe__tag { top: calc(50% + 32px); font-size: 11px; }

  .card {
    position: relative; inset: auto; width: auto; z-index: 4;
    margin-top: -22px; max-height: 60dvh;
    border-radius: 24px 24px 0 0; border-bottom: 0;
    padding: 16px 18px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(12, 44, 110, .22);
  }
  .card::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: #d3dde2; margin: -4px auto 10px; }
  .wstep { margin-top: 12px; }
  .wstep h2 { font-size: 21px; }
  .step__hint { font-size: 13px; margin-top: 4px; }
  .loss { margin: 14px 0 14px; padding: 10px; gap: 12px; border-radius: 16px; }
  .loss canvas { width: 52px; height: 52px; }
  .loss__text b { font-size: 16px; }
  .looks { margin-top: 12px; gap: 8px; }
  .look { padding: 8px 6px 10px; border-radius: 14px; }
  .look svg { width: 54px; height: 34px; margin-bottom: 4px; }
  .colors { margin-top: 12px; display: flex; align-items: center; gap: 14px; }
  .swatches { margin-top: 0; gap: 10px; }
  .swatch i { width: 28px; height: 28px; }
  .linkbtn { margin-top: 12px; }
  .wizard__nav { margin-top: 16px; }
  .btn { padding: 13px 20px; }
  .timeline { margin-top: 10px; }
  .timeline__top { margin-bottom: 10px; }
  .plan { margin-top: 14px; }
  .plan img { width: 52px; height: 52px; border-radius: 12px; }
  .lead__title { font-size: 16px; }
  .lead input[type=text], .lead input[type=tel] { font-size: 16px; padding: 12px 14px; }   /* 16px: no iOS zoom */
  .surgeon { margin-top: 12px; padding-top: 12px; font-size: 12px; }
  .surgeon img { width: 36px; height: 36px; }
  .about { padding-top: 14px; }
}

/* WordPress build: the lead goes through the site's smart form */
.lead__text { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.lead .btn--block { margin-top: 14px; }