/* ===========================================================================
   The four step customer flow, plus the life safety interstitial.
   Tokens come from hyper.css.
   =========================================================================== */

.flow{padding-top:2.5rem}
@media(min-width:768px){.flow{padding-top:4rem}}
.flow__narrow{max-width:42rem}
.flow__steps{margin-bottom:2rem}
.flow__pill{margin-bottom:1rem}
.flow__pill--muted{background:var(--secondary);color:var(--muted-foreground)}
.flow__title{margin-bottom:1rem}
.flow__note{display:flex;align-items:flex-start;gap:.45rem;margin-top:1rem}
.flow__note a{text-decoration:underline;text-underline-offset:2px}
.flow__cta{margin-top:2rem}
.flow__card{margin-top:1.5rem;display:grid;gap:.75rem}

.flow__inline{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.flow__inline .field{flex:1;min-width:12rem}
.flow__retry{margin-top:1.5rem}

/* --- service picker ------------------------------------------------------- */

.picker{display:grid;gap:.5rem;margin-top:1.5rem}
.picker__item{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.25rem;min-height:44px;
  border:1px solid var(--border);border-radius:var(--r-card);
  background:#fff;transition:border-color .15s,background .15s,transform .15s;
}
.picker__item:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateX(2px)}
.picker__name{font-weight:500;flex:1}
.picker__item .ico{color:var(--muted-foreground);flex:none}
.picker__item:hover .ico{color:var(--accent-ink)}

/* --- quiz ----------------------------------------------------------------- */

.quiz{display:grid;gap:1.5rem;margin-top:2rem}
.quiz__q{border:0;padding:0;margin:0}
.quiz__prompt{
  font-family:var(--font-display);font-weight:600;font-size:1.125rem;
  letter-spacing:-.02em;padding:0;margin-bottom:.5rem;display:block;
}
.quiz__optional{font-family:var(--font-body);font-weight:400;letter-spacing:normal;margin-left:.4rem}
.quiz__help{margin-bottom:.75rem}
.quiz__field{max-width:16rem}
textarea.quiz__field{max-width:none}

.quiz__choices{display:grid;gap:.5rem}
@media(min-width:560px){
  .quiz__choices{grid-template-columns:repeat(2,1fr)}
  .quiz__choices--pair{grid-template-columns:repeat(2,minmax(0,10rem))}
}

.choice{
  display:flex;align-items:center;gap:.625rem;
  padding:.875rem 1rem;min-height:48px;
  border:1px solid var(--border);border-radius:var(--r-base);
  background:#fff;cursor:pointer;transition:border-color .15s,background .15s;
}
.choice:hover{border-color:var(--ring)}
.choice input{accent-color:var(--accent);width:1.125rem;height:1.125rem;flex:none}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

.quiz__actions{display:grid;gap:.75rem;justify-items:start;padding-top:.5rem}
.quiz__actions .small{display:flex;align-items:center;gap:.4rem}

/* --- life safety interstitial --------------------------------------------
   Brief 2.4: a BLOCKING screen, not a toast and not a banner. It is styled to
   stop somebody who is scrolling fast, because that is the person it is for.  */

.safety{padding-block:3rem}
.safety__inner{max-width:34rem}
.safety__card{
  border:2px solid var(--danger);
  border-radius:var(--r-slab);
  background:#fff5f5;
  padding:2rem 1.5rem;
  text-align:center;
}
@media(min-width:640px){.safety__card{padding:2.5rem}}

.safety__icon{
  display:grid;place-items:center;width:3.5rem;height:3.5rem;
  margin:0 auto 1.25rem;border-radius:var(--r-full);
  background:var(--danger);color:#fff;
}
.safety__lead{color:#5a1b1b;margin-top:.75rem}

.safety__call{
  display:inline-flex;align-items:center;gap:.875rem;
  margin:1.5rem 0 .5rem;padding:1rem 1.5rem;min-height:44px;
  border-radius:var(--r-full);background:var(--danger);color:#fff;
  transition:transform .15s;
}
.safety__call:hover{transform:translateY(-1px)}
.safety__call>span{display:flex;flex-direction:column;text-align:left;gap:.1rem}
.safety__label{font-size:.75rem;opacity:.85}
.safety__number{font-family:var(--font-display);font-size:1.375rem;font-weight:600;letter-spacing:-.02em}

.safety__steps{display:grid;gap:.5rem;margin:1.5rem auto 0;text-align:left;max-width:24rem;font-size:.9375rem}
.safety__steps li{display:flex;gap:.5rem;align-items:flex-start;color:#5a1b1b}
.safety__steps .ico{color:var(--danger);flex:none;margin-top:.15rem}
.safety__note{margin-top:1rem;color:#5a1b1b}
.safety__rule{border:0;border-top:1px solid #ffd9d9;margin:1.75rem 0 1.25rem}

/* Inline restatement, if the flow is resumed with a trigger already answered. */
.safety__inline{
  display:flex;gap:.625rem;align-items:flex-start;
  border:1px solid #ffd9d9;background:#fff5f5;
  border-radius:var(--r-card);padding:1rem;margin:1.5rem 0;
  font-size:.875rem;color:#5a1b1b;
}
.safety__inline .ico{color:var(--danger);flex:none;margin-top:.1rem}
.safety__inline a{font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}