/* ============================================================
   Crown Care — Purge — design system
   Matched to the "Shredding Container Options" sheet:
   blue angular composition, thin white product names, spec lines
   (label · teal rule · value), teal accents, hexagon logo.
   ============================================================ */
:root{
  --navy:#0A2540;
  --navy-2:#0d2c50;
  --blue:#123a63;
  --blue-2:#1b4f86;
  --blue-3:#2f6fb0;
  --steel:#3a6ea0;
  --teal:#27b7c6;
  --teal-2:#3fd0dd;
  --ink:#0c1b2a;
  --slate:#5b6b7d;
  --line:#e3e9f0;
  --paper:#eef2f6;
  --card:#ffffff;
  --ok:#1f9d57;
  --warn:#d98a1f;
  --danger:#cf3b3b;
  --radius:16px;
  --radius-lg:22px;
  /* ONE column width for the whole page — the hero, the form, the progress bar and the
     estimate bar must all line up, or the page visibly changes width halfway down. */
  --col:720px;
  --shadow:0 18px 50px rgba(10,37,64,.16), 0 3px 10px rgba(10,37,64,.08);
  --shadow-sm:0 6px 20px rgba(10,37,64,.10);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font); color:var(--ink); background:var(--paper); line-height:1.5; overflow-x:hidden; overscroll-behavior-y:contain;}
img{max-width:100%;display:block}
button{font-family:inherit}
a{color:var(--blue-3)}

/* ---------- shared teal "bars" motif (from the sheet header) ---------- */
.bars{display:inline-flex; flex-direction:column; gap:3px}
.bars i{display:block; height:3px; background:var(--teal-2); border-radius:3px}
.bars i:nth-child(1){width:22px}
.bars i:nth-child(2){width:15px}
.bars i:nth-child(3){width:9px}

/* (logo removed entirely — no brand mark anywhere, Nechemia 2026-07-24) */

/* ============================================================
   ORDER PICKER — light section (top image + blue band removed, Nechemia 2026-07-17)
   ============================================================ */
/* full-page shell + two-pane layout: form on the left, sticky order summary on the right (desktop) */
.shell{max-width:1120px; margin:0 auto; padding:18px 22px 44px}
.grid{display:flex; flex-direction:column; gap:6px}
.main-col{display:flex; flex-direction:column; min-width:0}
.block{margin:0}
.side-col{margin-top:10px}
.side-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 18px 20px; box-shadow:var(--shadow-sm)}
.side-title{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-weight:600; color:var(--navy); font-size:17px; margin-bottom:8px}
/* the one what-happens-next line, at the bottom of the cart (Nechemia 2026-07-24) */
.side-next{font-size:11.5px; color:var(--slate); line-height:1.5; margin-top:12px}

/* sticky top header: brand + phone + progress, stays in view while scrolling */
.site-header{position:sticky; top:0; z-index:9; background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); box-shadow:0 2px 14px rgba(10,37,64,.05)}
.site-header-inner{max-width:1120px; margin:0 auto; padding:11px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* the contact fields sit on a white card, not floating on the background */
.panel{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 18px 20px; box-shadow:var(--shadow-sm)}
.panel .field input{background:#f7fafd}

@media (min-width:900px){
  /* NB: no align-items:start — the side column must stretch to full height so the sticky card has room to travel */
  .grid{display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:32px}
  .side-col{margin-top:0}
  .side-card{position:sticky; top:84px}                  /* sit below the sticky header */
  #estimate{display:none}                                /* the total lives in the sidebar on desktop */
  .main-col .qna{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start}
  .main-col .qna .tote-card{grid-column:1 / -1}          /* the convert card spans both columns */
}
.callus{font-size:12.5px; color:var(--blue-2); text-decoration:none; border:1px solid var(--line); background:#fff;
  padding:7px 13px; border-radius:999px; white-space:nowrap; box-shadow:var(--shadow-sm)}
.callus:hover{border-color:var(--teal); color:var(--blue-3)}

/* "chat instead" — a real option at the top, not a buried link */
.chat-switch{display:flex; align-items:center; gap:12px; text-decoration:none; margin:0 0 20px;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:14px; padding:13px 15px;
  box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .15s ease}
.chat-switch:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(39,183,198,.16)}
.chat-switch-ic{font-size:20px; line-height:1}
.chat-switch b{display:block; color:var(--navy); font-size:14.5px; font-weight:600}
.chat-switch small{display:block; color:var(--slate); font-size:12px; margin-top:2px}
.chat-switch-go{margin-left:auto; color:var(--teal); font-size:20px; font-weight:700}

/* order lead-in — heading only (the sub-line was removed 2026-07-24) */
.order-lead{margin:6px 0 14px}
.order-lead h2{margin:0; font-weight:300; font-size:clamp(22px,5vw,30px); color:var(--navy); letter-spacing:-.005em}
.order-lead h2 b{font-weight:700}

/* the priced product cards — light */
.products{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.pcard{
  border-radius:16px; padding:14px 15px 13px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:8px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.pcard.on{border-color:var(--teal); background:#f3fbfc; box-shadow:0 0 0 1px rgba(39,183,198,.4), var(--shadow-sm)}
/* picture + name/spec + price */
.pcard-head{display:flex; align-items:center; gap:11px}
.pcard-pic{width:52px; height:52px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:#eef5fb; border:1px solid var(--line)}
.pcard-pic svg{filter:drop-shadow(0 2px 3px rgba(10,37,64,.14))}
.pcard-id{display:flex; flex-direction:column; gap:2px; min-width:0}
.pcard-name{font-weight:600; font-size:clamp(14.5px,3.4vw,16px); color:var(--navy); letter-spacing:.01em}
.pcard-price{margin-left:auto; font-weight:700; font-size:clamp(14.5px,3.4vw,16px); color:var(--blue-3); white-space:nowrap}
.pcard-price small{font-weight:500; font-size:10.5px; color:var(--slate); margin-left:4px; letter-spacing:.04em}
.pcard-spec{font-size:11.5px; color:var(--slate)}

/* qty stepper — light; the number is TYPEABLE (nobody clicks + a hundred times) */
.stepper{display:inline-flex; align-items:center; align-self:flex-start; border-radius:999px; overflow:hidden;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.stepper button{width:38px; height:38px; border:0; background:transparent; color:var(--blue-2);
  font-size:20px; font-weight:700; cursor:pointer; line-height:1; display:grid; place-items:center}
.stepper button:hover{background:#eef6f8}
.stepper .qty-in{width:56px; height:38px; border:0; background:transparent; text-align:center; font-family:inherit;
  font-weight:800; font-size:16px; color:var(--navy); outline:none; padding:0}
.stepper .qty-in:focus{background:#f4f8fc}

.min-note{margin-top:16px; border-radius:12px; padding:11px 15px; font-size:12.5px; color:#0f5a63;
  background:#eaf6f8; border:1px solid #cbe9ed}

@media (max-width:520px){ .products{grid-template-columns:1fr} }

/* (step indicator removed — no "Step 1 of 4" anywhere, Nechemia 2026-07-24) */

/* ============================================================
   LIGHT SECTION (details / contact) — matches the sheet palette
   ============================================================ */
.wrap{max-width:var(--col); margin:0 auto; padding:24px 22px 130px}
.section-title{display:flex; align-items:baseline; gap:10px; margin:28px 2px 14px}
.section-title h2{margin:0; font-weight:300; font-size:clamp(20px,4.6vw,28px); color:var(--navy)}
.section-title h2 b{font-weight:600}
.section-title .hint{font-size:12.5px; color:var(--slate)}

/* form fields */
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13px; font-weight:600; color:var(--navy)}
.field .req{color:var(--danger)}
.field input,.field select,.field textarea{font-family:inherit; font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:none; width:100%; transition:border-color .18s ease, box-shadow .18s ease}
.field textarea{min-height:70px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(39,183,198,.18)}
.field .err{font-size:12px; color:var(--danger); display:none}
.field.invalid input,.field.invalid select{border-color:var(--danger)}
.field.invalid .err{display:block}

/* yes/no condition questions */
.qna{display:flex; flex-direction:column; gap:12px}
.q{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.q .qlabel{font-size:14px; font-weight:600; color:var(--navy); margin-bottom:4px}
/* plain-English helper for the jargon (tote / pallet jack / loading dock) */
.qhelp{font-size:12.5px; color:var(--slate); margin:0 0 10px; line-height:1.45}
.fhelp{font-size:12px; color:var(--slate); line-height:1.4}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.seg button{border:0; background:#fff; color:var(--slate); font-size:14px; font-weight:600; padding:8px 22px; cursor:pointer}
.seg button.on[data-v="yes"]{background:var(--ok); color:#fff}
.seg button.on[data-v="no"]{background:var(--blue-2); color:#fff}
.q.hidden{display:none}

/* buttons */
.btn{font-size:15px; font-weight:600; border:0; border-radius:999px; padding:14px 26px; cursor:pointer; background:linear-gradient(135deg,var(--teal),var(--blue-3)); color:#fff; box-shadow:var(--shadow-sm); transition:transform .12s ease, opacity .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45; cursor:default; transform:none}
.btn.ghost{background:#fff; color:var(--blue-2); border:1px solid var(--line); box-shadow:none}
.btn.block{width:100%}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

/* photos: a small pill in the header opens the picker; this strip shows what was added */
.photo-strip{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 16px; margin:0 0 12px; box-shadow:var(--shadow-sm)}
.photo-strip .note{font-size:12px; color:var(--slate); margin-top:8px; line-height:1.5}
.thumbs{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.photo-strip .thumbs{margin-top:0}
.thumb{width:64px; height:64px; border-radius:10px; object-fit:cover; border:1px solid var(--line); position:relative}
.thumb-wrap{position:relative}
.thumb-x{position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:var(--danger); color:#fff; border:0; font-size:12px; cursor:pointer; line-height:1}

/* signature pad */
.sigpad{border:1px solid var(--line); border-radius:12px; background:#fff; touch-action:none; width:100%; height:150px; display:block}
/* validation points at the pad (it has no text label by request) — clears on the first stroke */
.sigpad.sig-needed{border-color:var(--danger); box-shadow:0 0 0 3px rgba(207,59,59,.15)}
.sig-row{display:flex; align-items:center; justify-content:space-between; margin-top:6px}
.sig-clear{background:none;border:0;color:var(--blue-3);font-size:12.5px;cursor:pointer;font-weight:600}

/* under-$500 auto-signature: the approver's name rendered as a script signature */
.auto-sig{border:1px solid var(--line); border-radius:12px; background:#fff; min-height:84px; display:flex; align-items:center; padding:10px 22px}
.auto-sig span{font-family:'Brush Script MT','Segoe Script','Lucida Handwriting',cursive; font-style:italic; font-size:38px; color:#0c1b2a; line-height:1.1; overflow-wrap:anywhere}
.auto-sig-by{font-size:12px; color:var(--slate); margin-top:6px}

/* callouts */
.callout{border-radius:14px; padding:12px 16px; font-size:13.5px; display:flex; gap:10px; align-items:flex-start}
.callout.info{background:#eaf6f8; color:#0f5a63; border:1px solid #cbe9ed}
.btn.small{padding:9px 18px; font-size:13.5px}

/* ---- the "we'll bring totes instead" card (Mo's convert-to-totes) ---- */
.tote-card{background:#eef8f9; border:1px solid #c7e6ea; border-radius:16px; padding:16px}
.tote-card.hidden{display:none}
.tote-head{display:flex; gap:12px; align-items:flex-start}
.tote-head .tote-ic{flex:none; width:46px; height:46px; display:grid; place-items:center; background:#fff; border:1px solid #cbe9ed; border-radius:12px}
.tote-head .tote-ic svg{width:30px; height:30px}
.tote-head b{display:block; color:#0c3f47; font-size:15px; font-weight:700}
.tote-head > div > span{display:block; color:#3a6b71; font-size:12.5px; line-height:1.5; margin-top:3px}
.tote-calc{background:#fff; border:1px solid #d6ebee; border-radius:12px; padding:11px 14px; margin:13px 0 2px}
.tote-ratio{font-size:11px; color:#5b8b90; margin-bottom:9px; letter-spacing:.01em}
.tote-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13.5px; color:#123a45; padding:4px 0}
.tote-row .t-res{font-weight:600; white-space:nowrap; color:#1f7a84}
.tote-row.total{border-top:1px solid #e3eff1; margin-top:5px; padding-top:9px}
.tote-row.total .t-name{font-weight:700; color:#0c3f47}
.tote-row.total .t-res{font-weight:800; color:#0c3f47; font-size:14.5px}
.tote-row.total .t-res small{font-weight:600; color:#5b8b90}
.convert-btn{margin-top:13px; background:linear-gradient(135deg,var(--teal),var(--blue-3))}
.convert-hint{font-size:11.5px; color:#5b8b90; margin-top:9px; text-align:center}
.convert-done{margin-top:13px; font-weight:700; color:var(--ok); font-size:14px}
.callout.warn{background:#fdf3e3; color:#7a5411; border:1px solid #f4e2c2}

/* estimate bar */
.estimate{position:sticky; bottom:0; z-index:5; margin:0 auto; max-width:var(--col);
  background:#fff; color:var(--ink); border-top:2px solid var(--teal); border-radius:var(--radius) var(--radius) 0 0;
  padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 -10px 34px rgba(10,37,64,.12)}
.estimate .amt{font-size:22px; font-weight:700; color:var(--navy)}
.estimate .amt small{display:block; font-size:11px; font-weight:600; color:var(--blue-3); letter-spacing:.06em; text-transform:uppercase}
.estimate #estAmt{font-size:15.5px; font-weight:700; line-height:1.35; display:block; max-width:54ch; color:var(--navy)}

/* footer */
.foot{max-width:var(--col); margin:24px auto 40px; padding:0 22px; color:var(--slate); font-size:12.5px}
.foot .idline{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.foot a{color:var(--slate)}

/* chat */
.chat-shell{max-width:760px; margin:0 auto; padding:16px}
.chat-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; height:calc(100dvh - 32px)}
.chat-head{display:flex; align-items:center; gap:12px; padding:14px 18px; background:linear-gradient(135deg,var(--navy),var(--blue)); color:#fff}
.chat-status{font-size:12px; color:#cfe0ef; display:flex; align-items:center; gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:#54e6a0}
.dot.off{background:#f0b64d}
#chat{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; background:#f6f9fc}
.msg{max-width:86%; padding:11px 15px; border-radius:16px; font-size:14.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:break-word; animation:rise .22s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.bot{align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:6px; color:var(--ink)}
.msg.user{align-self:flex-end; background:linear-gradient(135deg,var(--blue-2),var(--blue-3)); color:#fff; border-bottom-right-radius:6px}
.msg.note{align-self:center; text-align:center; background:#fdf3e3; color:#7a5411; font-size:13px; max-width:94%}

/* clickable option cards the bot offers (its own message ends with a machine-read block) */
.chips{align-self:flex-start; display:flex; flex-direction:column; gap:8px; max-width:88%; margin-top:-2px; animation:rise .22s ease-out}
.chip{text-align:left; background:#fff; border:1px solid var(--line); border-radius:14px; padding:11px 14px; cursor:pointer;
  display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow-sm);
  transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease}
.chip:hover:not(:disabled){border-color:var(--teal); box-shadow:0 6px 18px rgba(39,183,198,.18); transform:translateY(-1px)}
.chip:disabled{cursor:default; opacity:.55}
.chip.picked{border-color:var(--teal); background:linear-gradient(135deg,rgba(39,183,198,.12),rgba(47,111,176,.08)); opacity:1}
.chip-label{font-size:14.5px; font-weight:600; color:var(--navy)}
.chip-detail{font-size:12.5px; color:var(--slate)}

.typing{align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:6px;padding:13px 16px;display:flex;gap:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:#9fb2c4;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.composer{display:flex; gap:10px; padding:12px; border-top:1px solid var(--line); background:#fff; align-items:center}
.composer input[type=text]{flex:1; min-width:0; border:1px solid var(--line); border-radius:999px; padding:12px 16px; font-size:15px; outline:none}
.composer input[type=text]:focus{border-color:var(--teal)}
.icon-btn{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:50%;background:#f4f8fc;color:var(--blue-2);font-size:18px;cursor:pointer;display:grid;place-items:center}
.chat-cta{padding:10px 12px; border-top:1px solid var(--line); background:#fff}

/* modal / review panel */
.modal-backdrop{position:fixed; inset:0; background:rgba(10,37,64,.5); display:none; align-items:flex-end; justify-content:center; z-index:50; padding:0}
.modal-backdrop.open{display:flex}
.modal{background:var(--paper); width:100%; max-width:760px; max-height:94dvh; overflow-y:auto; border-radius:22px 22px 0 0; padding:20px}
@media(min-width:720px){ .modal-backdrop{align-items:center;padding:20px} .modal{border-radius:22px} }
.modal h3{margin:2px 0 4px; font-weight:600; color:var(--navy)}
.modal .sub{color:var(--slate); font-size:13px; margin-bottom:14px}
.review-line{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.review-line .k{color:var(--slate)}
.review-line .v{color:var(--ink); font-weight:600; text-align:right}
.review-missing{color:var(--danger); font-weight:600}

/* itemised order summary — what's being bought, how many, at what each */
.order-summary{background:#fff; border:1px solid var(--line); border-radius:14px; padding:4px 16px 6px}
.order-summary .review-line:last-child{border-bottom:0}
.order-summary .review-line .k{color:var(--navy); font-weight:500}
.order-summary .review-line .k small{color:var(--slate); font-weight:400}
.order-summary .review-line.total{border-top:2px solid var(--line); border-bottom:0; margin-top:2px; padding-top:11px}
.order-summary .review-line.total .k{font-weight:700; color:var(--navy)}
.order-summary .review-line.total .v{font-weight:800; font-size:17px; color:var(--navy)}
/* the estimate card the CHAT prints under the bot's message (priced by us, never by the model) */
.chat-cart{align-self:flex-start; max-width:88%; margin-top:-2px; box-shadow:var(--shadow-sm); animation:rise .22s ease-out}
.chat-cart .cart-caveat{font-size:11.5px; color:var(--slate); line-height:1.45; padding:9px 0 4px}

/* utility */
.hidden{display:none !important}
.center{text-align:center}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ---------- responsive ---------- */
@media (max-width:520px){
  .wrap{padding:16px 16px 130px}
  .imghero{padding:14px 12px 20px}
  /* the sheet is a header on phones — shrink it so the order picker is reachable without a long scroll */
  .sheet-frame{max-width:76%; margin:0 auto}
  .products{gap:10px}
  .pcard{padding:13px 14px 12px}
  .estimate{flex-direction:column; align-items:flex-start; gap:6px; border-radius:0; padding:12px 18px}
  .estimate #estAmt{font-size:20px}
}

/* ============================================================
   BOLD-EVERYTHING on the form (Nechemia) — appended last so it wins over base rules
   ============================================================ */
.shell, #estimate, .side-card{font-weight:600}
.field label, .q .qlabel, .pcard-name, .pcard-price, .side-title,
.order-lead h2, .section-title h2, .callus, .chat-switch b, .estimate .amt{font-weight:800}
.field input, .stepper .qty-in, .seg button, .btn{font-weight:700}
.field input::placeholder{font-weight:600}
.qhelp, .fhelp, .hint, .note, .side-next, .min-note, .chat-switch small,
.pcard-spec, .pcard-price small{font-weight:600}
.order-summary .review-line .k, .order-summary .review-line .v{font-weight:700}

/* ============================================================
   CHAT PAGE — light header matched to the order form (Nechemia)
   No logo, no brand — just a plain "Document Purge" title (2026-07-24).
   ============================================================ */
.chat-head{background:#fff; color:var(--ink); border-bottom:1px solid var(--line); box-shadow:0 2px 14px rgba(10,37,64,.05)}
.chat-head .chat-title{font-weight:800; font-size:16px; color:var(--navy); letter-spacing:.01em}
.chat-head .chat-status{color:var(--slate); font-weight:600}

/* ============================================================
   LAYOUT CLEAN-UP (Nechemia 2026-07-20): fix header alignment, move
   "chat instead" into the sticky header on top of the steps, move the
   call-us line to the bottom, and stop the detail cards from going ragged.
   Appended last so these win over the base rules above.
   ============================================================ */

/* header row: logo on the left, a compact "chat instead" pill on the right,
   both above the steps — same 1120 content width, so nothing is off-centre */
.site-header-inner{max-width:1120px}
.chat-switch-mini{display:inline-flex; align-items:center; gap:8px; text-decoration:none; white-space:nowrap;
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:999px;
  padding:8px 14px; box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .15s ease}
.chat-switch-mini:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(39,183,198,.18); border-color:var(--teal)}
.chat-switch-mini .csm-ic{font-size:15px; line-height:1}
.chat-switch-mini b{color:var(--navy); font-size:13.5px; font-weight:800}
.chat-switch-mini .csm-go{color:var(--teal); font-size:16px; font-weight:800; line-height:1}
/* the photo pill is a BUTTON wearing the same pill style — one look for both controls */
button.chat-switch-mini{cursor:pointer; font-family:inherit}
.chat-switch-mini .csm-opt{color:var(--slate); font-weight:600; font-size:12px}

/* the progress steps: align the bar + label to the SAME left edge as the logo and the
   page content (they used to sit in a narrower centred band, which read as misaligned) */
.progress{padding:2px 0 10px}
.progress-inner{max-width:1120px; margin:0 auto; padding:0 22px}
.progress-track{max-width:none; margin:0}
.progress-label{max-width:none; margin:7px 0 0}

/* Detail question cards: STACKED one under another (never side by side), so when a
   follow-up appears or hides the list just slides down — nothing jumps to another spot.
   Thin rows, with the Yes/No toggle on the right of each row. */
.main-col .qna{display:flex; flex-direction:column; gap:10px; align-items:stretch}  /* beats the base 2-col grid; stretch = every card full width, Yes/No lines up on the right */
.q{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:11px 16px}
.q .q-text{flex:1; min-width:0}
.q .qlabel{margin-bottom:2px}
.q .qhelp{margin:0; line-height:1.45}
.q .seg{flex:none; align-self:center}
@media (max-width:520px){
  /* very narrow phones: let the toggle drop under the text instead of squeezing */
  .q{flex-wrap:wrap; gap:10px}
  .q .q-text{flex:1 1 100%}
}

/* call-us moved down here (was a pill in the header). One clean line at the very bottom. */
.foot{max-width:1120px}
.foot-call{display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:800;
  color:var(--blue-2); border:1px solid var(--line); background:#fff; padding:9px 16px; border-radius:999px;
  box-shadow:var(--shadow-sm); margin-bottom:14px}
.foot-call::before{content:"\260E"; font-size:13px}
.foot-call:hover{border-color:var(--teal); color:var(--blue-3)}

/* The order summary (cart) sticks to the top of its column and follows you down the page. */
@media (min-width:900px){
  .side-card{position:sticky; top:84px}   /* header is shorter now (no logo row, no steps) */
  .panel .fields{grid-template-columns:1fr 1fr; gap:16px}   /* tidy 2-col contact in the left column */
}