/* Recreation of the Tailwind-rendered quiz UI as plain CSS.
   Palette and spacing mirror the utility classes used in the source Home.tsx. */

:root{
  /* ---------- The Island Report / Primary Care brand ----------
     Three colours carry the whole quiz: crimson-maroon for anything the reader
     acts on, deep sea teal for anything that reports state, and a cream ground
     under all of it. Green appears only where something is confirmed. The greys
     are warm-tinted toward the paper, so nothing on the page reads blue-cold. */
  --maroon:#9E1B2F;          /* CTAs, headlines, selected answers */
  --maroon-dk:#7A1424;       /* hover / pressed */
  --maroon-lt2:#C9566A;      /* the one lighter step, used sparingly */
  --maroon-tint:#FBF0F1;     /* selected-answer wash */
  --maroon-deep:#6D101F;     /* label colour on a tinted wash */
  /* Every primary button takes this, so they read as one control at any size. */
  --maroon-grad:linear-gradient(180deg,#B12539 0%,#8E1527 100%);
  --maroon-grad-hover:linear-gradient(180deg,#9A1B2D 0%,#75121F 100%);
  --teal:#17505E;            /* progress, eyebrows, structural accents */
  --teal-lt3:#7CC5D6;        /* the light end of the progress gradient */
  --teal-dk:#0E3945;
  --teal-lt:#D3E2E4;         /* progress track */
  --teal-tint:#EDF4F4;
  --green-500:#15803D;       /* proof ticks, confirmations */
  --green-tint:#E9F3EC;
  --red-500:#C4271C;         /* validation and the emergency notice only */

  /* paper: the page ground is cream, cards sit a shade lighter than it */
  --paper:#FDFAF2;
  --card:#FFFDF8;
  --paper-3:#F4EFE3;

  --gray-50:#FAF6ED;
  --gray-100:#F2ECE0;
  --gray-200:#E4DCCC;
  --gray-300:#CFC6B5;
  --gray-400:#9A9184;
  --gray-500:#6A635A;
  --gray-700:#3A342D;
  --gray-800:#262119;
  --gray-900:#17130F;
  --slate-900:#14110E;

  --sans:"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--gray-900);line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
button:not(:disabled),a[href],select:not(:disabled),input[type=checkbox]:not(:disabled){cursor:pointer}
img{display:block;max-width:100%}
::selection{background:rgba(23,80,94,.16);color:var(--gray-900)}
/* one visible focus ring for the whole quiz; mouse users never see it */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* ---------- quiz shell ---------- */
.screen{position:relative;min-height:100vh;background:var(--paper);display:flex;flex-direction:column;align-items:center;padding:48px 16px}
.shell{width:100%;max-width:56rem;display:flex;flex-direction:column;align-items:center;gap:48px}

.progress{width:100%;max-width:28rem;height:9px;background:var(--teal-lt);border-radius:9999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(to right,var(--teal-lt3),var(--teal));border-radius:9999px;width:0;
  transition:width .6s cubic-bezier(.22,1,.36,1)}

.qwrap{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px;position:relative}
.back{position:absolute;left:0;top:-48px;color:var(--gray-400);background:none;border:0;display:flex;align-items:center;gap:4px;font-size:14px;font-weight:500;transition:color .15s}
.back:hover{color:var(--teal)}

.step{width:100%;display:flex;flex-direction:column;align-items:center;animation:stepIn .3s ease both}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.eyebrow{display:inline-block;margin-bottom:26px;padding:8px 20px;
  border:1.5px solid var(--teal);border-radius:9999px;color:var(--teal);
  font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}

/* A question step is a form, not a pitch, so its headline takes the brand's sans in near
   black and gets out of the way. The crimson serif is kept for the two screens that are
   actually selling, the landing headline and the results verdict, which also stops crimson
   from appearing on the question at the same time as it appears on the answer. */
h1.q{font-family:var(--sans);font-weight:700;color:var(--gray-900);margin-bottom:24px;
  line-height:1.2;letter-spacing:-.016em;font-size:30px;padding-left:100px;padding-right:100px}
h1.q.landing{font-family:var(--serif);color:var(--maroon);
  line-height:1.13;letter-spacing:-.012em;font-size:38px}
.sub{color:var(--gray-800);font-size:17px;max-width:48rem;font-weight:400;line-height:1.6;margin-top:-2px;margin-bottom:20px}
.sub b{font-weight:700;color:var(--gray-900)}
/* Headline, sub-headline, photograph and footer rule share one measure, 40rem, which is
   the width the photograph ran at originally. Centred type never fills its box on its own,
   so the type is sized up to the measure rather than the measure being cut down to the
   type: at 672px the headline's long line inks 649 and the sub-headline's 666, both within
   a hair of the photograph's edge. Playfair sets narrower per em than the sans this screen
   used to run, which is why the headline needs 52px here to do what 48px did before.
   Changing either size means re-checking that both still break to exactly two lines. */
:root{--landing-measure:42rem}     /* 672px */
.sub.sub-narrow{max-width:var(--landing-measure);font-size:19px}
h1.q.landing{max-width:var(--landing-measure);padding-left:0;padding-right:0;margin-left:auto;margin-right:auto}
/* Registered mark: smaller and raised, so it reads as a mark rather than a character. */
.reg{font-size:.55em;vertical-align:.42em;line-height:0}

.options{width:100%;max-width:28rem;display:flex;flex-direction:column;gap:16px}
.options.wide{max-width:56rem}
.grid1{display:grid;grid-template-columns:1fr;gap:16px}
.grid2{display:grid;grid-template-columns:1fr;gap:16px}

.opt{padding:24px;font-size:18px;font-weight:500;border:2px solid var(--gray-200);border-radius:10px;background:var(--card);color:var(--gray-700);text-align:left;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:transform .12s,border-color .15s,background .15s,color .15s}
.opt:hover{transform:translateY(-1px);border-color:var(--maroon);background:var(--maroon-tint);color:var(--maroon-deep)}
.opt:active{transform:scale(.98)}
.opt.selected{border-color:var(--maroon);background:var(--maroon);color:#fff;
  box-shadow:0 10px 22px -12px rgba(158,27,47,.6)}

/* two-up radio options; padding matches h1.q so the block tracks the headline */
/* one column until the cards are wide enough to keep every label at two lines or fewer */
.grid-radio{display:grid;grid-template-columns:1fr;gap:16px 20px;width:100%;align-items:stretch}
@media(min-width:940px){
  .grid-radio{grid-template-columns:1fr 1fr;padding-left:24px;padding-right:24px}
  .other-wrap.other-radio{padding-left:24px;padding-right:24px}
}
.opt-radio{display:flex;align-items:center;gap:14px;padding:18px 20px;border:2px solid var(--gray-200);border-radius:10px;background:var(--card);text-align:left;box-shadow:0 4px 10px -6px rgba(23,80,94,.22);transition:transform .12s,border-color .15s,box-shadow .15s}
.opt-radio:hover{transform:translateY(-1px);border-color:var(--maroon)}
.opt-radio:active{transform:scale(.98)}
.opt-radio.selected{border-color:var(--maroon);background:var(--maroon-tint)}
.dial{flex:none;width:22px;height:22px;border-radius:9999px;border:3px solid var(--maroon);background:var(--card);position:relative}
.opt-radio.selected .dial{background:var(--maroon);box-shadow:inset 0 0 0 3px #fff}
/* labels are written to fit two lines at this measure; never let one run to three */
.opt-radio-label{font-size:16px;font-weight:500;color:var(--gray-700);line-height:1.35}
/* the parenthetical: its own line, one notch quieter than the answer */
.opt-note{display:block;font-size:.87em;font-weight:400;color:var(--gray-500)}
.opt-radio.selected .opt-note{color:var(--maroon)}
.opt-radio.selected .opt-radio-label{color:var(--maroon-deep)}

/* likert scale: a face per stop over a colour bar reading green (easy) to red (urgent).
   One stop width drives the faces, the bar and the captions so all three stay aligned. */
/* the block spans the same 42rem as the avatar + speech bubble below it, so every
   stop gets a full column to name itself in */
:root{--likert-stop:72px;--likert-w:42rem}
.likert-faces{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:var(--likert-w);margin:0 auto;justify-items:center}
.likert-face{padding:0;border:0;background:none;line-height:0;border-radius:9999px;opacity:.55;transition:opacity .15s,transform .12s,filter .15s}
.likert-face svg{width:var(--likert-stop);height:var(--likert-stop);display:block}
.likert-face:hover{opacity:1;transform:scale(1.08)}
.likert-face:active{transform:scale(.96)}
.likert-face.selected{opacity:1;transform:scale(1.08);filter:drop-shadow(0 6px 10px rgba(15,23,42,.25))}
.likert-bar{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:var(--likert-w);margin:20px auto 0;height:14px;border-radius:9999px;overflow:hidden}
.likert-bar span{display:block}
/* caption cells track the stop columns; the text itself is taken out of flow so it can
   sit wider than its column and stay centred under the face */
.likert-captions{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:var(--likert-w);margin:12px auto 0;min-height:44px}
.likert-captions span{position:relative;display:block;height:0}
/* Captions read black so they carry the same weight as the faces they label; the
   "(Choose One)" prompt above stays grey as ordinary sub-copy. */
.likert-captions i{position:absolute;top:0;left:50%;transform:translateX(-50%);width:max-content;max-width:8.25rem;font-style:normal;text-align:center;white-space:pre-line;font-size:13px;font-weight:500;line-height:1.3;color:var(--gray-900)}

/* icon tiles: line-art mark above, word beneath */
.grid-icon{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%;max-width:30rem;margin:0 auto}
.opt-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:36px 16px;border:2px solid var(--gray-200);border-radius:12px;background:var(--card);box-shadow:0 6px 16px -10px rgba(23,80,94,.3);transition:transform .12s,border-color .15s,box-shadow .15s}
.opt-icon:hover{transform:translateY(-2px);border-color:var(--maroon);box-shadow:0 14px 24px -14px rgba(158,27,47,.5)}
.opt-icon:active{transform:scale(.98)}
.opt-icon.selected{border-color:var(--maroon);background:var(--maroon-tint)}
.opt-icon-art{display:block;color:var(--maroon)}
.opt-icon-art svg{width:64px;height:64px;display:block}
.opt-icon-label{font-size:18px;font-weight:600;color:var(--gray-800)}
.opt-icon.selected .opt-icon-label{color:var(--maroon-deep)}

/* picture-matrix options: photo on top, label along the bottom */
/* padding matches h1.q, so the matrix lines up edge-for-edge with the headline */
.grid-img{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;padding-left:100px;padding-right:100px}
.other-wrap.other-wide{padding-left:100px;padding-right:100px}
.opt-img{display:flex;flex-direction:column;padding:0;overflow:hidden;border:2px solid var(--gray-200);border-radius:10px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.05);transition:transform .12s,border-color .15s,box-shadow .15s}
.opt-img:hover{transform:translateY(-2px);border-color:var(--maroon);box-shadow:0 14px 22px -12px rgba(158,27,47,.45)}
.opt-img:active{transform:scale(.98)}
.opt-img.selected{border-color:var(--maroon);box-shadow:0 0 0 2px var(--maroon)}
.opt-img-photo{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--gray-100)}
.opt-img-photo img{width:100%;height:100%;object-fit:cover;display:block}
.opt-img-label{display:block;padding:10px 8px;font-size:16px;font-weight:600;color:var(--gray-700);text-align:center;transition:background .15s,color .15s}
.opt-img:hover .opt-img-label{background:var(--maroon);color:#fff}
.opt-img.selected .opt-img-label{background:var(--maroon);color:#fff}

/* free-text box revealed by the "Other" choice */
.other-wrap{display:flex;flex-direction:column;gap:16px;margin-top:16px}
input.other-input{width:100%;padding:16px;font-size:18px;border:2px solid var(--gray-200);border-radius:12px;background:var(--card);color:var(--gray-700)}
input.other-input::placeholder{color:var(--gray-400)}
input.other-input:focus{outline:0;border-color:var(--teal)}

.opt-multi{display:flex;align-items:center;justify-content:space-between;gap:12px}
.opt-multi:hover{background:var(--card);color:var(--maroon);border-color:var(--maroon)}
.opt-multi.selected{border-color:var(--maroon);background:var(--maroon-tint);color:var(--maroon)}
.opt-multi .check{flex-shrink:0}

.btn-primary{width:100%;padding:18px;background:var(--maroon-grad);color:#fff;font-weight:700;font-size:18px;letter-spacing:.09em;text-transform:uppercase;border:0;border-radius:8px;box-shadow:0 14px 30px -16px rgba(158,27,47,.65);transition:background .15s,transform .12s;display:flex;align-items:center;justify-content:center;gap:12px}
/* icon inside a primary button inherits the white label colour */
.btn-primary svg{width:22px;height:22px;flex:none}
.btn-primary:hover{background:var(--maroon-grad-hover);transform:scale(1.02)}
.btn-primary:active{transform:scale(.98)}

.seemore{width:100%;background:none;border:0;color:var(--teal);font-weight:400;text-transform:uppercase;font-size:14px;margin-top:16px}
.seemore:hover{text-decoration:underline}

/* dropdown / text / slider */
.field-wrap{width:100%;max-width:28rem;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.select-wrap{position:relative}
select.q{width:100%;padding:16px;font-size:18px;border:2px solid var(--gray-200);border-radius:12px;appearance:none;background:var(--card);color:var(--gray-700)}
select.q:focus{outline:0;border-color:var(--teal)}
.select-caret{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--gray-400)}

textarea.q{width:100%;padding:16px;font-size:18px;border:2px solid var(--gray-200);border-radius:12px;background:var(--card);color:var(--gray-700);min-height:150px;resize:none;font-family:inherit}
textarea.q:focus{outline:0;border-color:var(--teal)}

.slider-wrap{width:100%;max-width:28rem;margin:0 auto;display:flex;flex-direction:column;gap:32px;padding:32px 0}
.slider-value{font-size:36px;font-weight:700;color:var(--maroon);text-align:center}
input[type=range].q{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:9999px;background:var(--teal-lt);outline:0}
input[type=range].q::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:9999px;background:var(--card);border:2px solid var(--maroon);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer}
input[type=range].q::-moz-range-thumb{width:20px;height:20px;border-radius:9999px;background:var(--card);border:2px solid var(--maroon);cursor:pointer}
.slider-labels{display:flex;justify-content:space-between;font-size:14px;color:var(--gray-400);font-weight:500}
/* banded slider: one tick per range, plus the opt-out beneath */
.slider-wrap{gap:20px}
/* tick buttons are 20px wide so their centres line up with the slider thumb's travel */
.slider-ticks{display:flex;justify-content:space-between;align-items:center;margin-top:-10px}
.slider-ticks .tick{width:20px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer}
.slider-ticks .tick span{width:8px;height:8px;border-radius:9999px;background:var(--gray-300);transition:background .15s,transform .15s}
.slider-ticks .tick:hover span{background:var(--maroon-lt2);transform:scale(1.35)}
.slider-ticks .tick.on span{background:var(--maroon);transform:scale(1.35)}
.skip-link{background:none;border:0;color:var(--gray-500);font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:3px;padding:4px}
.skip-link:hover{color:var(--teal)}
.skip-link.on{color:var(--teal);font-weight:600}

/* landing: hero photo, centred start button + proof stack */
.landing-photo{width:100%;max-width:var(--landing-measure);margin:6px auto 34px;border-radius:14px;overflow:hidden;
  box-shadow:0 1px 0 rgba(23,80,94,.09),0 18px 38px -26px rgba(23,80,94,.45)}
.landing-photo img{width:100%;height:auto;display:block}


.start-wrap{display:flex;flex-direction:column;align-items:center;gap:26px;margin-top:30px;width:100%}
.start-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 56px;background:var(--maroon-grad);color:#fff;
  font-weight:700;font-size:18px;letter-spacing:.05em;text-transform:uppercase;border:0;border-radius:8px;
  box-shadow:0 14px 30px -14px rgba(158,27,47,.65);
  transition:background .18s,transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s}
.start-btn:hover{background:var(--maroon-grad-hover);transform:translateY(-2px);
  box-shadow:0 20px 36px -14px rgba(122,20,36,.6)}
.start-btn:active{transform:translateY(0)}
/* drawn arrow rather than a › glyph: no font baseline offset, so flex centring lands it
   on the label's optical centre */
.start-arrow{display:block;flex:none}

.proof{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:12px 0;padding:0;margin:0;max-width:52rem}
.proof li{display:inline-flex;align-items:center;gap:9px;padding:0 18px;
  color:var(--gray-900);font-size:14px;font-weight:600;white-space:nowrap;
  border-left:1px solid var(--gray-200)}
.proof li:first-child{border-left:0;padding-left:0}
.proof li:last-child{padding-right:0}
.proof-tick{flex:none;width:19px;height:19px;border-radius:9999px;border:1.6px solid var(--green-500);
  color:var(--green-500);display:flex;align-items:center;justify-content:center}
.proof-tick svg{width:11px;height:11px;stroke-width:3.2}

/* ---------- landing footer ----------
   The line that says who vouches for the quiz, and the seal behind it. The seal is
   decoration, so it is pinned to the screen's bottom-right corner at low opacity and
   takes no space; the attribution line is real content and sits in flow above it. */
.landing-foot{width:100%;max-width:var(--landing-measure);margin:38px auto 0;padding-top:22px;
  border-top:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:14px;color:var(--gray-500)}
.landing-foot b{font-weight:700;color:var(--gray-900)}
.landing-foot .seal-mini{flex:none;width:26px;height:26px;display:block}
.landing-foot .foot-logo{flex:none;width:28px;height:28px;display:block;object-fit:contain}
.landing-watermark{position:absolute;right:18px;bottom:14px;width:118px;height:118px;
  color:var(--teal);opacity:.09;pointer-events:none;z-index:0}
.landing-watermark svg{width:100%;height:100%;display:block}
@media(max-width:900px){.landing-watermark{width:88px;height:88px;right:8px;bottom:8px}}
@media(max-width:560px){
  .landing-watermark{display:none}
  .landing-foot{font-size:13px;margin-top:30px}
  /* four claims across is two rows on a phone, so the rules between them would
     land mid-air; the tick alone carries the separation there */
  .proof li{border-left:0;padding:0 12px}
}

/* landing zip gate (retained for reference; the gate is no longer rendered) */
.zip-row{display:flex;flex-direction:column;gap:16px;width:100%;justify-content:center;align-items:center;margin-top:32px}
.zip-inputs{display:flex;flex-direction:column;gap:16px;width:100%;justify-content:center;align-items:center}
.zip-field{position:relative;flex:1;width:100%}
input.zip{width:100%;padding:16px 25px;font-size:18px;border:1px solid var(--gray-300);border-radius:6px;color:var(--gray-500)}
input.zip::placeholder{color:var(--gray-400)}
input.zip:focus{outline:0;border-color:var(--maroon)}
input.zip.valid{border-color:var(--green-500)}
input.zip.invalid{border-color:var(--red-500)}
.zip-ok{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--green-500)}
.zip-next{padding:16px 75px;font-weight:700;font-size:18px;letter-spacing:.05em;text-transform:uppercase;border-radius:12px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);border:2px solid var(--maroon);background:var(--card);color:var(--maroon);transition:background .15s,color .15s,transform .12s;width:100%}
.zip-next:hover{transform:scale(1.02)}
.zip-next.ready{background:var(--maroon-grad);color:#fff}
.zip-next.ready:hover{background:var(--maroon-dk);border-color:var(--maroon-dk)}
.zip-error{color:var(--red-500);font-size:14px;font-weight:500}

.confirm{width:100%;max-width:36rem;background:var(--card);padding:32px;border-radius:16px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);border:1px solid var(--gray-100);text-align:center;animation:stepIn .3s ease both}
.confirm h3{font-family:var(--serif);font-size:25px;font-weight:700;color:var(--maroon);margin-bottom:16px}
.confirm p{font-size:18px;color:var(--gray-500);margin-bottom:32px}
.confirm p b{color:var(--maroon);font-weight:700}
.confirm-btns{display:flex;gap:16px;justify-content:center}
.btn-outline{height:48px;padding:0 32px;font-size:18px;color:var(--gray-500);background:var(--card);border:1px solid var(--gray-300);border-radius:6px}
.btn-outline:hover{background:var(--gray-50)}
.btn-solid{height:48px;padding:0 32px;font-size:18px;font-weight:700;color:#fff;background:var(--maroon-grad);border:0;border-radius:6px}
.btn-solid:hover{background:var(--maroon-grad-hover)}

/* summary */
.summary{width:100%;max-width:42rem;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.summary-card{background:var(--card);border-radius:16px;border:1px solid var(--gray-100);box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden}
.summary-row{padding:16px;border-bottom:1px solid var(--gray-100);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;text-align:left;transition:background .15s}
.summary-row:last-child{border-bottom:0}
.summary-row:hover{background:var(--gray-50)}
.summary-q{font-size:14px;font-weight:500;color:var(--gray-500);margin-bottom:4px}
.summary-a{color:var(--gray-900);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;background:var(--teal-tint);color:var(--teal);border-radius:5px;font-size:14px;font-weight:600}
.edit{font-size:14px;font-weight:700;color:var(--teal);background:none;border:0;padding:4px 12px;border-radius:6px;flex-shrink:0}
.edit:hover{color:var(--teal-dk);background:var(--teal-tint)}

/* avatar speech bubble */
.avatar-row{width:100%;max-width:46rem;display:flex;align-items:center;justify-content:center;gap:24px;margin-top:20px}
.avatar{flex-shrink:0;width:80px;height:80px;border-radius:9999px;overflow:hidden;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover}
.bubble{background:var(--teal-tint);padding:12px 26px;border-radius:12px;position:relative;text-align:left;margin-right:-20px}
.bubble p{color:var(--gray-800);font-size:19px;font-weight:400;line-height:1.6}
.bubble-tail{position:absolute;top:50%;left:-8px;transform:translateY(-50%) rotate(45deg);width:16px;height:16px;background:var(--teal-tint)}
/* On a phone the bubble ran the full width at desktop type size, so the negative
   margin pushed it past the page padding. Drop the overhang, shrink the avatar and
   step the quote down so the text has room inside the 16px gutter. */
@media(max-width:560px){
  .avatar-row{gap:12px;margin-top:24px}
  .avatar{width:52px;height:52px}
  .bubble{margin-right:0;padding:12px 14px}
  /* starting size only — fitBubble() in index.html settles it per viewport width */
  .bubble p{font-size:16px;line-height:1.45}
}


/* ---------- contact form screen ---------- */
.form-screen{min-height:100vh;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:16px}
.form-card{width:100%;max-width:33rem;background:var(--card);border:1px solid var(--gray-200);border-radius:18px;
  box-shadow:0 24px 50px -30px rgba(23,80,94,.5);padding:32px}
.form-icon{display:flex;justify-content:center;margin-bottom:24px}
.form-icon div{width:72px;height:72px;background:var(--teal-tint);border-radius:9999px;display:flex;align-items:center;justify-content:center;color:var(--teal);overflow:hidden}
.form-icon img{width:100%;height:100%;object-fit:cover;display:block}
.form-head{text-align:center;margin-bottom:32px}
.form-head h2{font-family:var(--serif);font-size:31px;font-weight:700;color:var(--maroon);
  line-height:1.15;letter-spacing:-.012em;margin-bottom:12px}
.form-head p{color:var(--gray-500);line-height:1.625}
.form-fields{display:flex;flex-direction:column;gap:24px}
.fld{display:flex;flex-direction:column;gap:8px;text-align:left}
.fld label{font-size:14px;font-weight:700;color:var(--gray-800)}
.fld input{width:100%;padding:13px 16px;background:var(--gray-50);border:1px solid var(--gray-300);border-radius:8px;color:var(--gray-900)}
.fld input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(23,80,94,.14)}
.fld input.err{border-color:var(--red-500)}
.fld .msg{font-size:12px;color:var(--red-500);margin-top:4px}
.label-row{display:flex;align-items:center;gap:4px}
.tip{position:relative;display:inline-flex;color:var(--gray-400);background:none;border:0;padding:0;line-height:0}
.tip:hover{color:var(--teal)}
.tip-body{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:20rem;background:var(--gray-900);color:#fff;font-size:12px;font-weight:400;padding:8px 12px;border-radius:6px;opacity:0;visibility:hidden;transition:opacity .15s;z-index:20;white-space:normal;text-align:left}
.tip:hover .tip-body,.tip:focus-visible .tip-body{opacity:1;visibility:visible}
.consent{display:flex;align-items:flex-start;gap:12px;padding-top:8px;text-align:left}
.consent input{width:20px;height:20px;accent-color:var(--teal);margin-top:4px;flex-shrink:0}
.consent label{font-size:14px;color:var(--gray-500);line-height:1.375}
.consent label.err{color:var(--red-500)}
.submit{width:100%;padding:18px;background:var(--maroon-grad);color:#fff;font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;border:0;border-radius:8px;box-shadow:0 14px 30px -16px rgba(158,27,47,.65);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;transition:background .15s,transform .12s}
.submit:hover{background:var(--maroon-grad-hover);transform:scale(1.02)}
.submit:disabled{opacity:.7;cursor:not-allowed;transform:none}
.spinner{width:20px;height:20px;border:2px solid #fff;border-top-color:transparent;border-radius:9999px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;color:var(--gray-400)}
.secure p{font-size:12px}

/* ---------- success screen ---------- */
.success-screen{min-height:100vh;background:var(--paper);display:flex;flex-direction:column}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background:var(--teal-dk)}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:rgba(11,45,55,.9);z-index:10}
.hero-in{position:relative;z-index:20;width:100%;max-width:56rem;padding:48px 0;display:flex;flex-direction:column;gap:32px}
.hero-in h1{font-family:var(--serif);font-size:38px;font-weight:700;color:#fff;line-height:1.14;letter-spacing:-.012em}
/* the verdict itself, set in script so it reads as a flourish rather than a label */
.script{font-family:'Great Vibes',cursive;color:#F0C878;font-weight:400;font-size:1.44em;line-height:1;white-space:nowrap}
.hero-in>p{font-size:20px;color:#DCE7E9;max-width:44rem;margin:0 auto;line-height:1.625}
/* emphasis inside the hero copy: brighter than the body grey so it lifts off the photo */
.hero-in>p strong{color:#fff;font-weight:700}
/* ruled label between the verdict and the explanation; shares the paragraph measure */
.hero-eyebrow{max-width:44rem;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:16px}
.hero-eyebrow span{height:1px;background:rgba(255,255,255,.42)}
.hero-eyebrow p{text-align:center;color:#fff;font-size:15px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.2}
.hero-in>p a{color:#F0C878;font-weight:700;margin-left:8px;text-decoration:none}
.hero-in>p a:hover{color:#fff}
.hero-btns{display:flex;flex-direction:column;gap:16px;justify-content:center;padding-top:16px}
.hero-btn{padding:17px 34px;font-weight:700;font-size:18px;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);text-transform:uppercase;letter-spacing:.025em;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;border:0}
.hero-btn.crimson{background:var(--maroon-grad);color:#fff}
.hero-btn.crimson:hover{background:var(--maroon-grad-hover)}
.hero-btn.white{background:var(--card);color:var(--maroon)}
.hero-btn.white:hover{background:var(--gray-100)}
.view-link{background:none;border:0;color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:4px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.view-link:hover{color:#fff}

.trust{background:var(--paper);padding:32px 0;border-top:1px solid var(--gray-200)}
.trust-in{max-width:72rem;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:1fr;gap:32px}
.trust-item{display:flex;align-items:center;gap:16px}
.trust-ico{width:48px;height:48px;background:var(--teal);border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.trust-item h3{font-weight:700;color:var(--slate-900);text-transform:uppercase;line-height:1.2;font-size:15px}

/* what pre-qualification means: a white card floating on a pale blue field, copy left,
   clinic photo right. Blobs and dot grids sit behind the card, clipped by the section. */
.prequal{--pq-navy:#17505E;--pq-blue:#17505E;--pq-dot:rgba(23,80,94,.42);
  position:relative;isolation:isolate;overflow:hidden;padding:28px 32px 48px;
  background:linear-gradient(135deg,var(--card) 0%,#FBF6EC 42%,#E5EFF0 100%)}
.prequal-deco{position:absolute;inset:0;pointer-events:none}
.prequal-deco span{position:absolute;display:block}
/* the two washes: a disc tucked into the top-right corner and a wider one sweeping the bottom */
.deco-blob-tr{z-index:-1;width:460px;height:460px;top:-250px;right:-110px;border-radius:9999px;background:#D9E8E9}
.deco-wave-br{z-index:-1;width:1200px;height:1200px;bottom:-760px;right:-300px;border-radius:9999px;background:#E5EFF0}
/* dot grids, 17px pitch. These sit ABOVE the card so the grid carries on over its corner,
   masked so it fades out as it travels inward. The dots are semi-transparent, so the run
   over white reads lighter than the run over the blue field. */
.deco-dots-tr,.deco-dots-bl{z-index:2;background-image:radial-gradient(var(--pq-dot) 1.6px,transparent 1.7px);background-size:17px 17px}
.deco-dots-tr{top:20px;right:24px;width:112px;height:112px;
  -webkit-mask-image:linear-gradient(225deg,#000 26%,transparent 84%);mask-image:linear-gradient(225deg,#000 26%,transparent 84%)}
.deco-dots-bl{bottom:24px;left:20px;width:112px;height:102px;
  -webkit-mask-image:linear-gradient(45deg,#000 24%,transparent 84%);mask-image:linear-gradient(45deg,#000 24%,transparent 84%)}
.prequal-in{position:relative;max-width:1280px;margin:0 auto}
.prequal-card{background:var(--card);border-radius:24px;padding:48px 20px 40px 44px;
  display:grid;grid-template-columns:532px 1fr;gap:61px;align-items:stretch;
  box-shadow:0 26px 60px -26px rgba(23,80,94,.28),0 4px 14px rgba(23,80,94,.06)}
.prequal-copy{display:flex;flex-direction:column;align-items:flex-start}
.prequal-badge{width:56px;height:56px;border-radius:9999px;background:#DCE9EA;color:var(--pq-blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.prequal-badge svg{width:26px;height:26px}
.prequal-card h2{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--maroon);line-height:1.16;letter-spacing:-.012em}
/* rule with the plus riding its centre */
.prequal-rule{position:relative;width:100%;height:1px;background:var(--gray-200);margin:14px 0 10px}
.prequal-rule-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:9999px;background:#DCE9EA;color:var(--teal);
  display:flex;align-items:center;justify-content:center}
.prequal-rule-dot svg{width:11px;height:11px}
.prequal-card ul{list-style:none;width:100%;margin:0 0 18px;padding:0}
/* set at the hero paragraph size so the two blocks of body copy read as one voice */
.prequal-card li{display:flex;align-items:flex-start;gap:16px;padding:7px 0 9px;
  font-size:18px;line-height:1.58;color:var(--gray-700);border-bottom:1px solid var(--gray-100)}
.prequal-card li:last-child{border-bottom:0}
.prequal-card li strong{font-weight:700;color:var(--gray-900)}
.prequal-tick{flex:none;width:22px;height:22px;border-radius:9999px;background:var(--green-500);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.prequal-tick svg{width:12px;height:12px;stroke-width:3}
/* lifted clear of the dot layer: the grid may cross the card, but not the button */
.prequal-cta{position:relative;z-index:3;width:396px;height:54px;border:0;border-radius:8px;color:#fff;
  background:var(--maroon-grad);
  box-shadow:0 12px 26px -12px rgba(158,27,47,.65);
  display:flex;align-items:center;justify-content:space-between;padding:0 30px 0 54px;
  font-size:15px;font-weight:700;letter-spacing:.055em;text-transform:uppercase}
.prequal-cta:hover{background:var(--maroon-grad-hover)}
.prequal-cta svg{width:22px;height:22px;flex:none}
/* the frame starts a little below the badge and stretches to land level with the button.
   The file is pre-cropped to that ratio, so cover has nothing to trim at the desktop width;
   it only absorbs drift, and it trims from the left so the nurse stays at the frame edge. */
.prequal-photo{align-self:stretch;margin-top:14px;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 40px -22px rgba(23,80,94,.5)}
.prequal-photo img{width:100%;height:100%;object-fit:cover;object-position:100% center}
@media(max-width:1279px){
  .prequal-card{grid-template-columns:1fr 1fr;gap:40px;padding:40px 20px 40px 36px}
  .prequal-card h2{font-size:30px}
  .prequal-cta{width:100%;max-width:396px}
}
@media(max-width:900px){
  /* one column: photo first is the wrong order for the argument, so it stays beneath */
  .prequal{padding:24px 16px 40px}
  .prequal-card{grid-template-columns:1fr;gap:32px;padding:32px 24px}
  .prequal-card h2{font-size:26px;max-width:none}
  .prequal-cta{width:100%;max-width:none;padding:0 22px 0 24px;justify-content:center;gap:14px}
  .prequal-photo{margin-top:0;aspect-ratio:1071/896}
  .deco-blob-tr{width:260px;height:260px;top:-150px;right:-70px}
  .deco-dots-tr,.deco-dots-bl{width:76px;height:76px}
}

/* ---------- closing block ----------
   Cloned from the supplied comp: navy panel on the left, clinic photograph on the right
   cut by a crimson arc, floating reassurance badge across the seam. Geometry is kept in
   percentages of the section so the composition holds as the viewport changes. */
.closer{--cl-navy:#0B2D37;--cl-panel:#123F4C;--cl-blue:#1B5A6B;--cl-accent:#9E1B2F;--cl-ice:#7FC0CE;
  --cl-live:#FF3B30;   /* the eyebrow's pulsing dot only: brighter than the brand crimson so it signals rather than sells */
  position:relative;isolation:isolate;overflow:hidden;padding:40px 0;
  background:linear-gradient(100deg,#1A5464 0%,#103B47 16%,#0B2D37 55%,#103B47 100%);
  color:#fff}
/* soft blue bloom bleeding off the left edge */
.closer-orb-l{position:absolute;z-index:0;left:-210px;top:-120px;width:420px;height:420px;
  border-radius:9999px;background:radial-gradient(circle,#1E6376 0%,rgba(30,99,118,0) 70%)}

/* the photograph, cut by an ellipse. rx at ~100% puts the ellipse's left tip on the box edge
   at mid-height, so the boundary bulges left through the middle and pulls back at the corners;
   ry under 100% sets how far it pulls back. The rim is the same ellipse ~1.5% wider, sitting
   behind, so the crimson reads as a stroke along the curve only. */
/* above the panel, so the arc cuts the panel's edge cleanly rather than veiling the photo */
.closer-photo{position:absolute;z-index:4;top:0;right:0;bottom:0;width:34%}
.closer-photo-rim,.closer-photo-img{position:absolute;inset:0;display:block}
.closer-photo-rim{background:var(--cl-accent);
  -webkit-clip-path:ellipse(100% 77% at 100% 50%);clip-path:ellipse(100% 77% at 100% 50%)}
.closer-photo-img{background:url('images/cta-clinic-team.webp') 46% 30%/cover no-repeat;
  -webkit-clip-path:ellipse(98.5% 76% at 100% 50%);clip-path:ellipse(98.5% 76% at 100% 50%)}
/* the deep blue disc, dropped past the section's bottom edge so only a shallow cap shows */
.closer-orb-b{position:absolute;z-index:5;right:10%;bottom:-136px;width:216px;height:216px;
  border-radius:9999px;background:#17505E}

.closer-in{position:relative;z-index:3;max-width:1560px;margin:0 auto;padding:0 28px}
.closer-panel{position:relative;width:78%;min-height:404px;padding:46px 56px 44px;
  border-radius:60px;display:flex;gap:34px;
  background:linear-gradient(126deg,rgba(24,80,95,.93) 0%,rgba(13,49,60,.91) 58%,rgba(10,42,52,.93) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
/* dot field in the panel's top-right corner */
.closer-dots{position:absolute;top:44px;right:104px;width:92px;height:78px;
  background-image:radial-gradient(#2A6577 2.4px,transparent 2.5px);background-size:15.5px 15.5px}

/* mark column: ringed heart with a rule dropped beneath it */
.closer-mark{flex:none;display:flex;flex-direction:column;align-items:center;padding-top:4px}
.closer-mark-ring{width:46px;height:46px;border-radius:9999px;border:2px solid #F0C878;
  color:#F0C878;display:flex;align-items:center;justify-content:center}
.closer-mark-ring svg{width:22px;height:22px}
.closer-mark-line{width:46px;height:2px;margin-top:16px;background:#F0C878}

/* The panel runs on under the photograph by design, so the copy has to stop before the
   photo's edge rather than at the panel's edge, or the text disappears behind it. The
   ellipse's leftmost point is at mid-height and pulls back toward the bottom, so the action
   row is allowed to run wider than the text above it. Measured from the copy column's start. */
.closer-copy{min-width:0}
.closer h2{max-width:calc(60vw - 160px)}
.closer-actions{max-width:calc(65vw - 160px)}
/* eyebrow: bare warm-sand caps with a pulsing dot, carried over from the first closing
   block. No tab or rule behind it; the tracking does the work. */
/* two classes deep so it outranks `.closer-copy p` below, which would otherwise take the
   body size and colour. */
.closer-copy .closer-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 20px;
  font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#F0C878}
.closer-eyebrow-dot{flex:none;width:7px;height:7px;border-radius:9999px;background:var(--cl-live);
  animation:closerPing 2.6s ease-out infinite}
@keyframes closerPing{
  0%{box-shadow:0 0 0 0 rgba(255,59,48,.85)}
  70%{box-shadow:0 0 0 11px rgba(255,59,48,0)}
  100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
.closer h2{font-family:var(--serif);font-size:48px;font-weight:700;
  line-height:1.18;letter-spacing:-.005em;color:#fff}
.closer h2 em{font-style:normal;color:#F0C878}
.closer-rule{display:block;width:112px;height:3px;margin:22px 0 20px;border-radius:2px;background:var(--cl-accent)}
.closer-copy p{max-width:min(74ch,calc(60vw - 160px));font-size:17px;line-height:1.72;color:rgba(255,255,255,.85)}

/* action row: the call button, then three quiet proof items behind hairlines */
.closer-actions{margin-top:30px;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.closer-call{flex:none;display:inline-flex;align-items:center;gap:16px;padding:13px 30px 13px 14px;
  border-radius:12px;text-decoration:none;color:#fff;font-size:27px;font-weight:700;
  letter-spacing:.005em;font-variant-numeric:tabular-nums;
  background:var(--maroon-grad);
  box-shadow:0 6px 14px -10px rgba(4,20,26,.7),
    inset 0 1px 0 rgba(255,255,255,.16);
  transition:background .15s}
/* darkens on hover like every other CTA on the page */
.closer-call:hover{background:var(--maroon-grad-hover)}
.closer-call-ico{width:44px;height:44px;flex:none;border-radius:9999px;
  border:2px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center}
.closer-call-ico svg{width:21px;height:21px}

.closer-feats{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:22px}
.closer-feats li{display:flex;align-items:center;gap:11px;padding-left:22px;
  font-size:15px;font-weight:700;line-height:1.28;color:#fff;border-left:1px solid rgba(255,255,255,.16)}
.closer-feats li:first-child{padding-left:0;border-left:0}
.closer-feat-ico{flex:none;width:26px;height:26px;color:var(--cl-ice);display:flex;align-items:center;justify-content:center}
.closer-feat-ico svg{width:26px;height:26px}

/* the badge straddles the panel edge and the photograph */
.closer-badge{position:absolute;z-index:6;right:4.5%;bottom:21%;
  display:flex;align-items:center;gap:16px;padding:14px 26px 14px 16px;
  border-radius:12px;background:var(--card);box-shadow:0 26px 50px -22px rgba(4,28,36,.75)}
.closer-badge-ico{flex:none;width:44px;height:44px;border-radius:9999px;background:var(--maroon-tint);
  color:var(--cl-accent);display:flex;align-items:center;justify-content:center;
  animation:closerHalo 2.4s cubic-bezier(.16,1,.3,1) infinite}
/* two beats then a rest, so it reads as a pulse rather than a throb */
.closer-badge-ico svg{width:22px;height:22px;animation:closerBeat 2.4s ease-in-out infinite}
@keyframes closerBeat{
  0%,42%,100%{transform:scale(1)}
  12%{transform:scale(1.2)}
  22%{transform:scale(1)}
  32%{transform:scale(1.11)}}
@keyframes closerHalo{
  0%{box-shadow:0 0 0 0 rgba(158,27,47,.38)}
  38%{box-shadow:0 0 0 13px rgba(158,27,47,0)}
  100%{box-shadow:0 0 0 0 rgba(158,27,47,0)}}
.closer-badge b{display:block;font-size:17px;font-weight:700;color:var(--teal);line-height:1.3}
.closer-badge i{display:block;font-style:normal;font-size:17px;font-weight:700;color:var(--cl-accent);line-height:1.3}

@media(max-width:1200px){
  .closer-panel{width:78%;padding:40px 42px;border-radius:48px}
  .closer h2{font-size:38px;max-width:calc(60vw - 130px)}
  .closer-copy p{max-width:min(74ch,calc(60vw - 130px))}
  .closer-actions{max-width:calc(62vw - 130px)}
  .closer-badge{right:4%;bottom:20%}
  .closer-orb-b{right:6%;bottom:-116px;width:184px;height:184px}
}
@media(max-width:1040px){
  /* the action row no longer fits beside the button at this measure, so it drops under it */
  .closer-panel{padding:36px 32px}
  .closer h2{font-size:33px;max-width:calc(60vw - 110px)}
  .closer-copy p{max-width:min(74ch,calc(60vw - 110px))}
  .closer-actions{max-width:calc(62vw - 110px)}
  .closer-actions{gap:20px}
  .closer-feats{gap:16px}
  .closer-feats li{font-size:14px;padding-left:16px}
  .closer-call{font-size:24px;padding:12px 24px 12px 12px}
  .closer-call-ico{width:40px;height:40px}
}
@media(max-width:960px){
  .closer h2,.closer-copy p,.closer-actions{max-width:none}
  /* the badge is the last thing on the page here, so it needs room under it */
  .closer{padding:0 0 28px}
  /* the arc reads as a band across the top once the columns stack */
  .closer-photo{position:relative;width:100%;height:238px}
  .closer-photo-rim{-webkit-clip-path:ellipse(150% 92% at 50% 0%);clip-path:ellipse(150% 92% at 50% 0%)}
  .closer-photo-img{-webkit-clip-path:ellipse(150% 89% at 50% 0%);clip-path:ellipse(150% 89% at 50% 0%);
    background-position:50% 24%}
  /* kept over the photo band so it never laps the headline */
  .closer-orb-b{right:-96px;bottom:auto;top:34px;width:178px;height:178px}
  .closer-in{padding:0 16px 44px}
  .closer-panel{width:100%;min-height:0;padding:34px 26px 32px;border-radius:32px;gap:20px;margin-top:-26px}
  .closer h2{font-size:31px}
  .closer h2 br{display:none}
  .closer-dots{top:26px;right:24px;width:62px;height:62px}
  .closer-actions{gap:24px}
  .closer-call{width:100%;justify-content:center;font-size:24px}
  .closer-feats{width:100%;justify-content:space-between;gap:12px}
  .closer-feats li{font-size:13px;gap:8px;padding-left:12px}
  .closer-badge{position:static;margin:22px 16px 0;width:auto}
}
@media(max-width:520px){
  .closer-mark{display:none}
  .closer h2{font-size:27px}
  .closer-feats{flex-direction:column;align-items:flex-start;gap:14px}
  .closer-feats li{border-left:0;padding-left:0;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .closer-call{transition:none}
  .closer-eyebrow-dot,.closer-badge-ico,.closer-badge-ico svg{animation:none}
}


/* ---------- bridge screen ----------
   The six seconds between the contact form and the verdict. Light like the quiz it
   follows, so the dark results hero still arrives as a change of scene. Stage rows hold
   their own space from the start — pending rows are dimmed rather than absent, so nothing
   reflows as they complete. */
.load{width:100%;max-width:34rem;margin:0 auto;padding:56px 24px 64px;text-align:center}
.load h1{font-family:var(--serif);font-size:31px;font-weight:700;color:var(--maroon);letter-spacing:-.012em}
.load-sub{margin-top:10px;font-size:16px;color:var(--gray-500)}

/* three dots breathing in sequence, the only motion above the fold */
.load-dots{display:flex;justify-content:center;gap:9px;margin-bottom:26px}
.load-dots i{width:10px;height:10px;border-radius:9999px;background:var(--teal);
  animation:loadPulse 1.4s ease-in-out infinite}
.load-dots i:nth-child(2){animation-delay:.18s}
.load-dots i:nth-child(3){animation-delay:.36s}
@keyframes loadPulse{
  0%,100%{opacity:.28;transform:scale(.82)}
  50%{opacity:1;transform:scale(1)}}

.load-steps{list-style:none;margin:34px auto 0;padding:0;max-width:26rem;text-align:left}
.load-step{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:16px;
  color:var(--gray-500);transition:color .35s ease,opacity .35s ease}
.load-step.pending{opacity:.42}
.load-step.active{color:var(--gray-900);font-weight:600}
.load-step.done{color:var(--gray-900)}
/* one 22px well per row: empty when pending, a ring while working, a filled check when done */
.load-tick{flex:none;width:22px;height:22px;border-radius:9999px;display:flex;
  align-items:center;justify-content:center;border:2px solid var(--gray-300);
  color:transparent;transition:background .3s ease,border-color .3s ease,color .3s ease}
.load-tick svg{width:12px;height:12px;stroke-width:3.4}
.load-step.active .load-tick{border-color:var(--teal);border-right-color:transparent;
  animation:loadSpin .9s linear infinite}
.load-step.done .load-tick{background:var(--green-500);border-color:var(--green-500);color:#fff;animation:none}
@keyframes loadSpin{to{transform:rotate(360deg)}}

.load-bar{height:6px;margin-top:34px;border-radius:9999px;background:var(--teal-lt);overflow:hidden}
.load-bar-fill{display:block;height:100%;border-radius:9999px;background:var(--teal);
  transition:width .15s linear}

@media(max-width:520px){
  .load{padding:40px 16px 48px}
  .load h1{font-size:24px}
  .load-step{font-size:15px}
}
/* The hold still runs and the bar still fills; only the looping motion stops. */
@media(prefers-reduced-motion:reduce){
  .load-dots i,.load-step.active .load-tick{animation:none}
  .load-dots i{opacity:1}
}

/* ---------- emergency notice ----------
   Rendered above the hero when the urgency answer is 5, and nowhere else. Red is used
   here and nowhere else on the results page, so it cannot be read as decoration. */
.emerg{background:var(--red-500);color:#fff;padding:16px 20px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.emerg-in{max-width:1100px;margin:0 auto;display:flex;align-items:flex-start;gap:13px}
.emerg-ico{flex:none;width:26px;height:26px;margin-top:1px}
.emerg-ico svg{width:26px;height:26px}
.emerg p{font-size:17px;line-height:1.5}
.emerg a{color:#fff;font-weight:700;text-underline-offset:3px}
@media(max-width:520px){
  .emerg{padding:14px 16px}
  .emerg p{font-size:15px}
}

.responses{background:var(--paper);padding:64px 16px}
.responses-card{max-width:48rem;margin:0 auto;background:var(--card);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);border:1px solid var(--gray-200);overflow:hidden}
.responses-head{padding:32px;border-bottom:1px solid var(--gray-100)}
.responses-head h2{font-family:var(--serif);font-size:25px;font-weight:700;color:var(--maroon)}
.responses-head p{color:var(--gray-500);margin-top:4px}
/* the prompt sits opposite the heading, set like the answers in the right-hand column */
.responses-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px}
.responses-head .resp-note{margin-top:0;margin-left:auto;text-align:right;font-weight:700;font-size:18px;color:var(--gray-900)}
.resp-row{padding:24px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--gray-100)}
.resp-q{font-weight:500;color:var(--gray-500);font-size:14px;text-transform:uppercase;letter-spacing:.025em}
.resp-a{font-weight:700;color:var(--gray-900);font-size:18px;word-break:break-word}
.resp-contact{padding:24px;background:var(--gray-50)}
.resp-contact h3{font-weight:700;color:var(--gray-900);margin-bottom:16px}
.resp-grid{display:grid;grid-template-columns:1fr;gap:16px}
.resp-grid .k{font-size:12px;color:var(--gray-500);text-transform:uppercase}
.resp-grid .v{font-weight:500;color:var(--gray-900)}
/* download closes the contact block, centred beneath the three fields */
.resp-actions{display:flex;justify-content:center;margin-top:28px}
.resp-download{width:auto;padding:14px 28px;font-size:16px}
.resp-download svg{width:19px;height:19px}

/* ---------- responsive ---------- */
@media(min-width:640px){
  .hero-btns{flex-direction:row}
  /* name, email and phone read as one row */
  .resp-grid{grid-template-columns:repeat(3,1fr)}
  .resp-row{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:16px}
  .resp-row .resp-q{width:33%;flex-shrink:0}
  .resp-row .resp-a{width:66%;text-align:right}
}
@media(min-width:768px){
  h1.q{font-size:36px}
  h1.q.landing{font-size:52px}
  .sub{font-size:19px}
  .grid2{grid-template-columns:1fr 1fr}
  .form-card{padding:48px 40px}
  .hero-in h1{font-size:60px}
  .trust-in{grid-template-columns:1fr 1fr}
  .zip-inputs{flex-direction:row}
  .zip-field{min-width:400px}
  .zip-next{width:auto}
}
@media(min-width:1200px){
  .trust-in{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:479px){
  :root{--likert-stop:52px}
  .likert-captions i{font-size:11px;max-width:5.5rem}
  /* buy the label a little more measure on small phones */
  .opt-radio{padding:16px;gap:12px}
  .opt{padding:18px}
}
@media(max-width:767px){
  h1.q{padding-left:0;padding-right:0}
  .grid-img,.other-wrap.other-wide{padding-left:0;padding-right:0}
}

/* ---------- print: responses only ---------- */
@media print{
  @page{margin:1cm;size:auto}
  body{background:#fff;color:#000}
  body *{visibility:hidden}
  #responses-section,#responses-section *{visibility:visible}
  .resp-actions{display:none!important}   /* the button itself has no place on the printout */
  #responses-section{position:absolute;top:0;left:0;width:100%;margin:0;padding:0;background:#fff;box-shadow:none;border:none}
  .responses-card{max-width:100%!important;box-shadow:none!important;border:none!important}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}