/* RestWarm quiz — loads /styles.css first, then this.
 *
 * The room, not a form.
 *
 * Theming is done with warmth, air and pace rather than decoration. The ground
 * is the same blush field the product photographs sit on, so the quiz reads as
 * part of the objects rather than a survey bolted to the front of them. No
 * candles, no steam, no stones. The restraint is the luxury.
 */

/* ---------- the ground ---------- */
/* Warm at the top, clearing to white lower down, like light from one window.
   Exactly the three tints already used by .stage, so nothing new enters the
   palette. Fixed, so the warmth stays put while the questions move. */
body.quizbody{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:radial-gradient(125% 78% at 50% -12%,
    #FBEDEA 0%, #F8F3F2 38%, #FCFAFA 66%, #FFFFFF 88%) fixed;
}

.quizmain{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(36px,7vw,88px) 0}
.quizwrap{width:100%;max-width:760px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.quizwrap{padding:0 22px}}

/* The chrome recedes: on a page whose whole job is three questions, a solid
   header competes with them. */
body.quizbody header{background:transparent;backdrop-filter:none;
  border-bottom-color:transparent;box-shadow:none}

/* ---------- progress: a quiet line, not a loading bar ---------- */
.progress{max-width:760px;margin:0 auto;padding:26px 28px 0;width:100%}
@media(max-width:640px){.progress{padding:20px 22px 0}}
.progress__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);margin-bottom:12px;opacity:.75}
.progress__track{height:2px;background:rgba(23,17,19,.09);border-radius:2px;overflow:hidden}
.progress__fill{height:100%;background:var(--ir);width:0;border-radius:2px;
  transition:width .55s cubic-bezier(.2,.7,.3,1)}

/* ---------- screens ---------- */
.screen{display:none}
.screen.is-active{display:block;animation:screenIn .52s cubic-bezier(.2,.7,.3,1) both}
/* slow enough to feel unhurried, short enough that nobody waits for it */
@keyframes screenIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

.screen__head{margin-bottom:clamp(30px,4.4vw,44px)}
.screen__head .eyebrow{display:block;margin-bottom:16px;opacity:.9}
.qhead{font-family:var(--display);font-weight:700;line-height:1.02;
  letter-spacing:-.035em;font-size:clamp(31px,5vw,50px);text-wrap:balance}
.qhelp{color:var(--ink-2);font-size:16.5px;line-height:1.6;margin-top:18px;
  max-width:38em;text-wrap:pretty}

/* ---------- the answers ---------- */
.options{display:grid;gap:14px}
@media(min-width:660px){.options{grid-template-columns:1fr 1fr;gap:16px}}

.option{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(23,17,19,.10);
  border-radius:18px;
  padding:22px 24px;cursor:pointer;
  backdrop-filter:blur(6px);
  transition:border-color .24s ease,background .24s ease,
             transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease;
}
.option:hover{background:#fff;border-color:rgba(23,17,19,.2);
  box-shadow:0 6px 26px rgba(23,17,19,.05)}
.option:active{transform:scale(.994);transition-duration:.06s}
.option.is-picked{border-color:var(--jade);background:#fff;
  box-shadow:0 6px 26px rgba(11,107,85,.10)}
.option b{display:block;font-size:17px;font-weight:600;letter-spacing:-.012em;
  line-height:1.32}
.option small{display:block;color:var(--ink-2);font-size:14.5px;margin-top:6px;
  line-height:1.5}

.qnav{margin-top:34px}
.back{background:none;border:0;font:inherit;font-size:14.5px;color:var(--ink-2);
  cursor:pointer;padding:10px 2px;transition:color .18s ease;position:relative}
.back::after{content:'';position:absolute;left:2px;right:2px;bottom:6px;height:1px;
  background:currentColor;opacity:.4;transform-origin:left center;
  transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.back:hover{color:var(--ink)}
.back:hover::after{transform:scaleX(0)}

/* ---------- intro ---------- */
.intro{text-align:center;max-width:34ch;margin:0 auto}
.intro .eyebrow{display:block;margin-bottom:20px}
.intro .qhead{font-size:clamp(36px,6.4vw,64px);margin-bottom:22px}
.intro .lede{margin:0 auto 36px;text-align:center}
.intro .btn{min-width:270px}

/* ---------- the gate ---------- */
.gate__form{display:grid;gap:18px;margin-top:34px;max-width:32em}
.field label{display:block;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-bottom:10px}
.field input[type=email]{
  font:inherit;font-size:17px;width:100%;padding:20px 22px;
  border:1px solid rgba(23,17,19,.14);border-radius:16px;
  background:rgba(255,255,255,.78);color:var(--ink);
  transition:border-color .24s ease,background .24s ease,box-shadow .24s ease;
}
.field input[type=email]:hover{border-color:rgba(23,17,19,.24);background:#fff}
.field input[type=email]:focus{border-color:var(--jade);background:#fff;
  box-shadow:0 6px 26px rgba(11,107,85,.10);outline:none}
.field input[aria-invalid=true]{border-color:var(--ir)}
.err{color:var(--ir);font-size:14px;font-weight:600;min-height:1.3em;margin-top:10px}
.consent{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;
  color:var(--ink-2);line-height:1.55;cursor:pointer}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--jade)}
.fineprint{font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* ---------- the result: arriving somewhere ---------- */
.result-grid{display:grid;gap:38px;align-items:start}
@media(min-width:760px){.result-grid{grid-template-columns:.92fr 1.08fr;gap:48px}}
.result-grid>*{min-width:0}
.result-grid .stage{border-radius:24px}

.offer{border:1px dashed rgba(192,57,47,.45);border-radius:18px;
  padding:26px 28px;margin:30px 0 0;background:rgba(255,255,255,.6)}
.offer .eyebrow{display:block;margin-bottom:12px}
.offer b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(23px,3.2vw,31px);letter-spacing:-.03em;line-height:1.08;
  color:var(--ir);margin-bottom:12px}
/* Stacked, always. These sit inside the narrow right-hand column of
   .result-grid, so a viewport-width media query cannot tell whether two pills
   fit — and at 1280px they did not: the primary CTA wrapped to three lines. */
.result-actions{display:grid;gap:12px;margin-top:30px}
.result-actions .btn{width:100%}

/* ---------- footer ---------- */
.quizfoot{background:transparent;border-top:1px solid rgba(23,17,19,.07);
  padding:28px 0 36px;margin-top:auto}
.quizfoot .wrap{font-size:12.5px;color:var(--ink-2);line-height:1.65;opacity:.8}

@media(prefers-reduced-motion:reduce){
  .screen.is-active{animation:none}
  .progress__fill{transition:none}
}