/* thank-you.css — page-specific styling for the post-quote confirmation Page.
 * Layers on top of global.css (chrome, buttons, garland, sections, footer) and
 * inner.css (shared inner-page hero/final). Only the components unique to the
 * thank-you mockup live here: the confirmation hero, success seal, response
 * pill, "what happens next" steps already come from global (.step/.steps),
 * the large button modifier, and the "while you wait" link cards + reassure band. */

/* ── Large button modifier ────────────────────────────────────────────── */
.btn-lg{padding:16px 30px; font-size:16px;}

/* ── Confirmation hero ────────────────────────────────────────────────── */
.confirm{position:relative; overflow:hidden; text-align:center; color:#F6EFDD;
  background:radial-gradient(900px 460px at 50% -8%,rgba(201,154,59,.2),transparent 60%),
    radial-gradient(700px 460px at 50% 120%,rgba(16,74,44,.28),transparent 62%),
    linear-gradient(180deg,#181B24,#14161E 60%,#0E1016);}
.confirm .inner{position:relative; z-index:3; padding:30px 0 78px; max-width:680px; margin:0 auto;}
.seal{width:84px; height:84px; border-radius:50%; margin:8px auto 26px; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 30%,#1c7a47,var(--green-base)); color:#fff; font-size:38px;
  box-shadow:0 0 0 10px rgba(16,74,44,.22),0 0 38px rgba(127,207,154,.4);}
.confirm h1{font-size:clamp(33px,4.8vw,56px); letter-spacing:-.01em; color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.5);}
.confirm .lede{font-size:clamp(16px,1.6vw,19px); color:#E7DCC6; margin:20px auto 0; max-width:560px;}
.resp-pill{display:inline-flex; align-items:center; gap:9px; margin-top:26px; padding:9px 18px; border-radius:999px;
  background:rgba(201,154,59,.12); border:1px solid rgba(230,207,150,.38); color:var(--gold-soft); font-weight:600; font-size:14px;}
.resp-pill .pulse{width:9px; height:9px; border-radius:50%; background:#7FCF9A; box-shadow:0 0 0 0 rgba(127,207,154,.6); animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,207,154,.5);}70%{box-shadow:0 0 0 10px rgba(127,207,154,0);}100%{box-shadow:0 0 0 0 rgba(127,207,154,0);}}
.confirm-call{margin-top:24px; font-size:15px; color:#CDBF9F;}
.confirm-call a{color:var(--gold-soft); font-weight:600;}

/* ── While you wait — link cards ──────────────────────────────────────── */
/* Three steps, centered (global .steps is a 4-col grid). Each step's number
 * and copy are centered in its column (#231), so the connecting rule that
 * global.css draws from the left-seated number is dropped here. */
.steps{grid-template-columns:repeat(3,1fr); max-width:920px; margin:0 auto;}
.steps .step{text-align:center;}
.steps .step::before{display:none;}
.links{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.lcard{display:block; background:rgba(255,247,230,.04); border:1px solid rgba(230,207,150,.2);
  border-radius:16px; padding:26px 22px; transition:border-color .18s,transform .18s,background .18s;}
.lcard:hover{border-color:rgba(230,207,150,.5); transform:translateY(-3px); background:rgba(255,247,230,.07);}
.lcard .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:14px;
  background:rgba(201,154,59,.16); color:var(--gold-soft);}
.lcard h3{font-size:18px; color:#F6EFDD; margin-bottom:6px;}
.lcard p{font-size:13.5px; color:#C9BCA1;}
.lcard .go{display:inline-block; margin-top:12px; color:var(--gold-soft); font-weight:600; font-size:13.5px;}

/* ── Contact reassurance band ─────────────────────────────────────────── */
.reassure{text-align:center; max-width:640px; margin:54px auto 0;}
.reassure h3{color:#F6EFDD; font-size:24px;}
.reassure p{color:#C9BCA1; margin-top:8px; font-size:15px;}
.reassure-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px;}

@media(max-width:980px){
  .links{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .links{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .pulse{animation:none!important;}
}