/* quote-preview.css : the quote intake, sibling of the pricing page.
   Loads AFTER px-toggle-v2.css and reuses its tokens (--cc-navy, --cc-gold, --font-display, --font-main)
   and its hero (.px-hero, .k). Stage colours match the pricing toggle exactly:
   Decide #2F5FB3 · Build #d4902a · Run #3fa37a. Nothing here edits the pricing page. */

@property --ph{syntax:'<color>';inherits:true;initial-value:#B6BCC7}

/* ---------- hero: the navy seam the card straddles, same as pricing ---------- */
.q-hero{padding:76px 24px 150px}
.q-hero h1{max-width:20ch;margin:16px auto 16px}
.q-hero p{max-width:50ch}
@media(max-width:600px){
  .q-hero{padding:56px 20px 108px}
  .q-hero h1{font-size:2.05rem;max-width:14ch}
  .q-hero p{font-size:1rem}
}

/* ---------- the paper section and the card ---------- */
.q-section{display:flow-root;background:var(--cc-offwhite);padding:0 24px 88px} /* flow-root: stops the card's negative margin collapsing through the section */
.q-wrap{max-width:820px;margin:0 auto}
.q-card.lead-inline{--ph:#B6BCC7;position:relative;z-index:2;max-width:none;margin:-104px 0 0;padding:0;
  border:1px solid rgba(2,4,45,.08);border-top:3px solid var(--ph);border-radius:20px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ph) 7%,#fff) 0,#fff 230px);
  box-shadow:0 1px 2px rgba(2,4,45,.04),0 30px 60px -32px rgba(2,4,45,.28);
  transition:--ph .45s ease;text-align:left}
.q-form{margin:0}

/* ---------- the stage choice: three tiles, the pricing toggle's vocabulary ---------- */
.q-stage{margin:0;padding:30px 44px 28px;border:0;border-bottom:1px solid rgba(2,4,45,.07);min-width:0}
.q-legend{float:left;width:100%;padding:0;margin:0 0 16px;font:600 1.3rem/1.2 var(--font-display);
  letter-spacing:-.01em;color:var(--cc-navy)}
.q-opts{clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.q-opt{--c:#2F5FB3;position:relative;display:flex;flex-direction:column;gap:7px;margin:0;padding:15px 16px 16px;
  border:1px solid rgba(2,4,45,.11);border-radius:12px;background:#fff;cursor:pointer;
  transition:border-color .2s,box-shadow .2s,background-color .2s}
.q-opt:hover{border-color:color-mix(in srgb,var(--c) 45%,rgba(2,4,45,.11))}
.q-card .q-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0;pointer-events:none}
.q-opt-k{display:flex;align-items:center;gap:8px;font:700 11px/1 var(--font-main);letter-spacing:.16em;
  text-transform:uppercase;color:#5B6472;transition:color .2s}
.q-opt-k::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c);opacity:.5;transition:opacity .2s,transform .2s}
.q-opt-t{font:500 .92rem/1.35 var(--font-main);color:var(--cc-navy)}
.q-opt:has(input:checked){border-color:var(--c);background:color-mix(in srgb,var(--c) 5%,#fff);
  box-shadow:0 0 0 1px var(--c),0 10px 22px -16px color-mix(in srgb,var(--c) 70%,transparent)}
.q-opt:has(input:checked) .q-opt-k{color:var(--cc-navy)}
.q-opt:has(input:checked) .q-opt-k::before{opacity:1;transform:scale(1.15)}
.q-opt:has(input:focus-visible){outline:2px solid var(--c);outline-offset:3px}

/* ---------- the fields ---------- */
.q-body{padding:30px 44px 8px}
.q-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 20px}
.q-field{display:flex;flex-direction:column;min-width:0}
.q-full{grid-column:1 / -1}
.q-field label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 7px;
  font:600 .82rem/1.3 var(--font-main);color:var(--cc-navy);letter-spacing:.005em}
.q-tag{font:500 .72rem/1 var(--font-main);color:#8A8F9B;letter-spacing:.02em}
.q-tag[hidden]{display:none}
.q-card input:not([type="radio"]),.q-card select,.q-card textarea{width:100%;box-sizing:border-box;margin:0;
  height:46px;padding:0 14px;border:1px solid #D8D5CC;border-radius:9px;background:#fff;color:#111;
  font:400 .95rem/1.2 var(--font-main);transition:border-color .2s,box-shadow .2s}
.q-card select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center}
.q-card select:invalid,.q-card select:has(option[value=""]:checked){color:#8A8F9B}
.q-card select option{color:#111}
.q-card textarea{height:auto;min-height:104px;padding:12px 14px;line-height:1.5;resize:vertical}
.q-card input::placeholder,.q-card textarea::placeholder{color:#9A9EA8}
.q-card input:not([type="radio"]):focus,.q-card select:focus,.q-card textarea:focus{outline:none;
  border-color:var(--ph);box-shadow:0 0 0 3px color-mix(in srgb,var(--ph) 22%,transparent)}
.q-help{margin:7px 0 0;font:400 .76rem/1.4 var(--font-main);color:#7B8190}

/* stage-specific rows: only the active stage's group renders (inactive groups are also disabled, so they never post) */
.q-extra{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  padding:18px 0 0;border-top:1px dashed rgba(2,4,45,.1)}
.q-extra[hidden]{display:none}
.q-extra:not([hidden]){animation:qIn .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes qIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- the submit ---------- */
.q-submit{padding:26px 44px 34px}
.q-nocall{margin:0 0 12px;text-align:center;font:400 .8rem/1.4 var(--font-main);color:#6B6F7A;letter-spacing:.02em;text-wrap:balance}
.q-card .q-btn{display:block;width:100%;margin:0;padding:15px 20px;border:0;border-radius:10px;cursor:pointer;
  background:var(--cc-navy);color:#fff;font:700 .98rem/1.2 var(--font-main);letter-spacing:.01em;text-align:center;
  box-shadow:0 10px 22px -12px rgba(2,4,45,.6);transition:transform .2s,box-shadow .2s,background-color .3s}
.q-card .q-btn::after{content:"\2192";display:inline-block;margin-left:10px;transition:transform .2s}
.q-card .q-btn:hover{transform:none;filter:none;background:color-mix(in srgb,var(--cc-navy) 86%,var(--ph));box-shadow:0 14px 28px -12px rgba(2,4,45,.7)}
.q-card .q-btn:hover::after{transform:translateX(3px)}
.q-card .q-btn:active{transform:translateY(1px)}
.q-card .q-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px color-mix(in srgb,var(--ph) 60%,transparent)}
.q-card .q-btn:disabled{opacity:.7;cursor:default}
.q-card .lead-msg:empty{display:none}

.q-alt{margin:22px 0 0;text-align:center;font:400 .86rem/1.5 var(--font-main);color:#7B8190}
.q-alt a{color:var(--cc-navy);font-weight:600;text-decoration:underline;text-decoration-color:rgba(2,4,45,.25);text-underline-offset:3px}
.q-alt a:hover{text-decoration-color:currentColor}
.lead-inline--done + .q-alt{display:none}

/* ---------- the success state (what lead-form.js swaps the card into at ship) ---------- */
.q-card.lead-inline--done{padding:56px 44px 60px;text-align:center}
.q-card .lead-done{display:flex;flex-direction:column;align-items:center}
.q-done-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;margin:0 0 20px;
  background:color-mix(in srgb,var(--ph) 12%,#fff);box-shadow:0 0 0 1px color-mix(in srgb,var(--ph) 40%,transparent)}
.q-done-mark::after{content:"";width:16px;height:9px;border-left:2.5px solid var(--ph);border-bottom:2.5px solid var(--ph);transform:translateY(-2px) rotate(-45deg)}
.q-done-h{margin:0 0 10px;font:600 1.7rem/1.15 var(--font-display);letter-spacing:-.015em;color:var(--cc-navy);text-wrap:balance}
.q-done-p{margin:0 auto;max-width:44ch;font:400 .98rem/1.6 var(--font-main);color:#555A66;text-wrap:pretty}
.q-done-ref{margin:18px 0 0;font:500 .74rem/1 var(--font-main);letter-spacing:.12em;text-transform:uppercase;color:#8A8F9B}

/* ---------- small screens ---------- */
@media(max-width:760px){
  .q-opts{grid-template-columns:1fr;gap:8px}
  .q-opt{flex-direction:row;align-items:center;justify-content:space-between;padding:13px 16px}
  .q-opt-k{min-width:0}
  .q-opt-t{font-size:.88rem;text-align:right}
}
@media(max-width:600px){
  .q-section{padding:0 16px 64px}
  .q-card.lead-inline{margin-top:-64px;border-radius:16px}
  .q-stage{padding:24px 20px 22px}
  .q-legend{font-size:1.15rem;margin-bottom:14px}
  .q-body{padding:24px 20px 4px}
  .q-grid,.q-extra{grid-template-columns:1fr;gap:18px}
  .q-submit{padding:22px 20px 26px}
  .q-card.lead-inline--done{padding:44px 22px 48px}
  .q-done-h{font-size:1.45rem}
}
@media(prefers-reduced-motion:reduce){
  .q-card.lead-inline,.q-opt,.q-opt-k,.q-opt-k::before,.q-card .q-btn{transition:none}
  .q-extra:not([hidden]){animation:none}
}