/* ==========================================================================
   Strategy Call — lead capture and one-question-per-screen flow.
   --------------------------------------------------------------------------
   The mechanic is a modern funnel: a single question fills the screen, options
   are large tap targets, single-choice advances by itself, a slim progress bar
   sits at the top. The visual language is unchanged from the rest of the site
   — the same off-white ground, cobalt accent, Inter, hairline rules. Nothing
   here is bright, gamified or illustrated: a hospital owner weighing a
   ₹1,00,000/month engagement should not feel handled by a consumer funnel.

   Loaded only by strategy-call.php. style.css is untouched.
   ========================================================================== */

/* ------------------------------------------------------------ honeypot ---- */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ============================ 1. SHELL ================================== */
.quiz {
  min-height: calc(100dvh - 82px);
  display: flex;
  flex-direction: column;
}

/* Slim progress rail, pinned under the site header. */
.qbar {
  position: sticky;
  top: 82px;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  padding-block: 14px 13px;
}
.qbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.qbar__track {
  flex: 1 1 auto;
  height: 3px;
  background: var(--line-soft);
  border-radius: 3px;
  overflow: hidden;
}
.qbar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 3px;
  transition: width .5s var(--ease);
}
.qbar__count {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
  white-space: nowrap;
  letter-spacing: .01em;
}
.qbar__back {
  background: none;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  font-size: 0.86rem;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.qbar__back::before {
  content: "";
  width: 7px; height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.qbar__back:hover { color: var(--ink); }
.qbar__back[hidden] { display: none; }

/* ============================ 2. STAGE ================================== */
.qstage {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  padding-block: clamp(38px, 6vw, 76px) clamp(60px, 8vw, 110px);
}
.qstage > .shell { width: 100%; }

.screen { max-width: 680px; }
.js .quiz[data-mode="stepped"] .screen[hidden] { display: none; }

/* Without JS every screen is shown in one long form, separated properly. */
.quiz:not([data-mode="stepped"]) .screen + .screen {
  margin-top: clamp(52px, 6vw, 76px);
  padding-top: clamp(40px, 5vw, 58px);
  border-top: 1px solid var(--line);
}

/* The per-screen Continue and Skip buttons only do anything once the script is
   driving the flow. With JS off they would be fourteen buttons that visibly do
   nothing, so they are hidden and the single submit at the bottom carries the
   whole form — which is what the server expects anyway. */
html:not(.js) [data-nav="step"] { display: none; }
html:not(.js) [data-skip]       { display: none; }

/* Entrance — one small movement, not a performance. */
.js .quiz[data-mode="stepped"] .screen.is-entering {
  animation: qIn .34s var(--ease) both;
}
@keyframes qIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================ 3. QUESTION =============================== */
.screen__section {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted-2);
  margin-bottom: 18px;
}
.screen__section::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  flex: none;
}

.screen__q {
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.15;
  text-wrap: balance;
  margin-bottom: 14px;
}
/* The script gives each question tabindex="-1" and focuses it so screen readers
   announce the new screen. That is deliberate, but it must not draw a focus
   ring: a 2px outline around the question reads as an error state rather than
   as navigation, and it would appear on all fifteen screens.

   The outline is removed outright rather than via :focus:not(:focus-visible),
   because Chromium does match :focus-visible on a heading focused by script.
   Nothing is lost — tabindex="-1" keeps the heading out of the tab order, so it
   can never take real keyboard focus, and every control on the screen keeps its
   own visible ring. */
.screen__q:focus { outline: none; }

.screen__hint {
  font-size: 1.02rem;
  color: var(--muted);
  max-width: 56ch;
  margin-bottom: 30px;
}
.screen__q + .qoptions,
.screen__q + .qtext,
.screen__q + .qconsent { margin-top: 30px; }

/* ============================ 4. OPTIONS ================================ */
.qoptions { display: grid; gap: 10px; }
@media (min-width: 720px) {
  .qoptions--two { grid-template-columns: 1fr 1fr; }
}

.qopt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;                 /* comfortable thumb target */
  padding: 15px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: -.012em;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              transform .18s var(--ease);
}
.qopt input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.qopt__mark {
  position: relative;
  flex: none;
  width: 21px; height: 21px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.qopt--multi .qopt__mark { border-radius: 5px; }

@media (hover: hover) {
  .qopt:hover { border-color: var(--muted-2); transform: translateY(-1px); }
}
.qopt:active { transform: translateY(0); }

.qopt input:checked ~ .qopt__mark {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 4px #fff;
}
/* A checkmark, drawn the same way as the autosave toast's tick. Two crossed
   gradients would give an ✕, which reads as "excluded" rather than "chosen". */
.qopt--multi input:checked ~ .qopt__mark { box-shadow: none; }
.qopt--multi input:checked ~ .qopt__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.qopt:has(input:checked) {
  border-color: var(--accent);
  background: rgba(40, 87, 255, .05);
}
.qopt input:focus-visible ~ .qopt__mark {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Brief confirmation flash before an auto-advance, so the tap is acknowledged. */
.qopt.is-confirming {
  border-color: var(--accent);
  background: rgba(40, 87, 255, .1);
}

/* ============================ 5. TEXT =================================== */
.qtext { display: grid; gap: 18px; }

.qtext label {
  display: block;
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 7px;
}
.qtext input,
.qtext textarea {
  width: 100%;
  font: inherit;
  font-size: 1.08rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 16px 17px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.qtext textarea { min-height: 168px; resize: vertical; line-height: 1.55; }
.qtext input:focus,
.qtext textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(40, 87, 255, .13);
}
.qtext input[aria-invalid="true"],
.qtext textarea[aria-invalid="true"] { border-color: #C4441F; }

.qcount {
  font-size: 0.86rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.qcount.is-ready { color: var(--accent); }

/* ============================ 6. CONSENT ================================ */
.qconsent { display: grid; gap: 12px; }
.qconsent .qopt { align-items: flex-start; font-size: 0.99rem; min-height: 0; }
.qconsent .qopt__mark { margin-top: 2px; }

/* ============================ 7. CONTROLS =============================== */
.qnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(30px, 4vw, 42px);
}
.qnav__skip {
  background: none;
  border: 0;
  padding: 8px 2px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.qnav__skip:hover { color: var(--ink); }

.qerror {
  display: block;
  margin-top: 14px;
  font-size: 0.94rem;
  color: #8E2F13;
}

/* Autosave acknowledgement — deliberately quiet. */
.qsaved {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 14px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.86rem;
  letter-spacing: -.005em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.qsaved::before {
  content: "";
  width: 9px; height: 5px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}
.qsaved.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ============================ 8. LEAD SCREEN ============================ */
.lead { max-width: 560px; }
.lead__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 22px;
}
.lead__eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--accent); }

.lead h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 18px;
}
.lead__lede {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 12px;
}
.lead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 24px;
  margin: 26px 0 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--muted-2);
  max-width: none;
}
.lead__meta span { display: flex; align-items: baseline; gap: 9px; }
.lead__meta span::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--accent);
  flex: none;
  transform: translateY(-3px);
}

.lead__fields { display: grid; gap: 18px; }
/* Grid items default to min-width:auto, so the phone row — a flex pair whose
   min-content is the button plus a 20-character input — would push past its
   track on a narrow screen. */
.lead__fields > * { min-width: 0; }

/* ---------------------------------------------------------- phone field ---
   One control made of two: the country picker and the number. They share a
   single border so it reads as one field, and the focus ring is drawn on the
   wrapper rather than on either half. */
.phone {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.phone:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(40, 87, 255, .13);
}
/* The halves sit inside the shared border, so they drop their own. */
.phone .phone__number,
.phone .phone__country {
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-size: 1.08rem;
  color: var(--ink);
  padding: 16px 17px;
  min-width: 0;
}
.phone .phone__number { flex: 1 1 auto; width: auto; padding-left: 12px; }
.phone .phone__number:focus,
.phone .phone__country:focus { outline: none; box-shadow: none; }

/* Native <select> — this is what shows with JavaScript off. */
.phone__country {
  flex: 0 0 auto;
  max-width: 42%;
  border-right: 1px solid var(--line) !important;
  cursor: pointer;
  appearance: none;
  padding-right: 34px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 19px top 55%, right 14px top 55%;
  background-repeat: no-repeat;
}

/* --- the JS upgrade: a searchable dropdown ------------------------------ */
.js .phone--enhanced .phone__country { display: none; }

.phone__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 1.08rem;
  color: var(--ink);
  background: none;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 9px 0 0 9px;
  padding: 16px 15px 16px 17px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s var(--ease);
}
.phone__button:hover { background: rgba(17, 17, 17, .03); }
.phone__button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.phone__flag { font-size: 1.2em; line-height: 1; }
/* Windows ships no flag glyphs, so the pair renders as two letters. When the
   probe in quiz.js finds that, the flag is dropped rather than shown as
   stray text — the dial code alone still identifies the country. */
.phone--noflag .phone__flag { display: none; }
.phone__caret {
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s var(--ease);
}
.phone__button[aria-expanded="true"] .phone__caret {
  transform: translateY(1px) rotate(-135deg);
}

.phone__panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  width: min(360px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(17,17,17,.05), 0 16px 44px rgba(17,17,17,.13);
  overflow: hidden;
}
.phone__panel[hidden] { display: none; }

/* Scoped to .phone so it outranks `.qtext input` — the lead fields carry the
   qtext class, and its generic border, radius and focus ring would otherwise
   draw a second blue box around the search field inside the panel. */
.phone .phone__search {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 16px;
}
.phone .phone__search:focus {
  outline: none;
  border-color: var(--line);
  box-shadow: none;
}

.phone__list {
  list-style: none;
  margin: 0;
  padding: 5px;
  max-height: 292px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.phone__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
}
.phone__opt:hover,
.phone__opt.is-active { background: rgba(40, 87, 255, .07); }
.phone__opt[aria-selected="true"] { font-weight: 500; }
.phone__opt-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone__opt-dial {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.phone__group {
  padding: 11px 12px 5px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.phone__empty { padding: 18px 12px; color: var(--muted); font-size: .95rem; }
.lead__reassure {
  margin-top: 22px;
  font-size: var(--fs-small);
  color: var(--muted-2);
  max-width: 46ch;
}

/* ============================ 9. RESUME BANNER ========================== */
.resumed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 15px 19px;
  margin-bottom: 30px;
  border: 1px solid rgba(40, 87, 255, .3);
  background: rgba(40, 87, 255, .05);
  border-radius: 9px;
  font-size: 0.98rem;
  color: var(--ink-soft);
  max-width: 680px;
}
.resumed strong { font-weight: 500; }

/* ============================ 10. ALERTS ================================ */
.qalert {
  padding: 17px 20px;
  border-radius: 9px;
  border: 1px solid rgba(196, 68, 31, .35);
  background: rgba(196, 68, 31, .06);
  color: #8E2F13;
  margin-bottom: 30px;
  font-size: 0.99rem;
  max-width: 680px;
}
.qalert ul { margin: 9px 0 0; display: grid; gap: 5px; }
.qalert li { padding-left: 15px; position: relative; }
.qalert li::before { content: "·"; position: absolute; left: 4px; }

/* ============================ 11. RESPONSIVE ============================ */
@media (max-width: 900px) {
  .qbar { top: 68px; }
  .quiz { min-height: calc(100dvh - 68px); }
}

@media (max-width: 660px) {
  .qstage { padding-block: 28px 90px; align-items: flex-start; }
  .screen__q { font-size: 1.5rem; }
  .qopt { min-height: 58px; padding: 14px 16px; font-size: 1.02rem; }
  .qoptions { gap: 9px; }

  /* The primary action stays reachable without scrolling back. */
  .qnav {
    position: sticky;
    bottom: 0;
    margin-inline: calc(var(--gutter) * -1);
    /* The generous top padding is what makes the scrim legible: with only a
       few pixels the gradient has no room to fade and the button looks like it
       has sliced an option in half. */
    padding: 34px var(--gutter) calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(247, 247, 244, 0), var(--bg) 62%);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Room for the last option to scroll clear of the sticky bar. */
  .quiz[data-mode="stepped"] .screen { padding-bottom: 8px; }
  .qnav .btn { width: 100%; }
  .qnav__skip { order: 2; }

  /* Clear the sticky action bar — at its default position the toast lands on
     top of Continue and hides the primary action at the exact moment someone
     is reaching for it. */
  .qsaved { bottom: calc(112px + env(safe-area-inset-bottom)); }

  .lead__fields input { font-size: 16px; }  /* stops iOS zooming on focus */
  .qtext input, .qtext textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .quiz[data-mode="stepped"] .screen.is-entering { animation: none; }
  .qbar__fill, .qopt, .qsaved { transition: none; }
}