.quote-page { min-height: 100vh; background: radial-gradient(circle at 15% 10%,rgba(17,136,211,.11),transparent 28%),#06101c; }
.secure-header { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #afbed0; font-size: 13px; font-weight: 700; }
.secure-header span { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink); background: var(--lime); border-radius: 50%; }
.header-help { color: white; font-size: 13px; font-weight: 700; }
.quote-main { max-width: 1500px; margin: 0 auto; padding: 38px 40px 100px; }
.progress-bar { max-width: 650px; margin: 0 auto 38px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 12px; }
.progress-bar div { display: flex; align-items: center; gap: 8px; color: #687c92; font-size: 12px; font-weight: 700; white-space: nowrap; }
.progress-bar div b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #30445a; border-radius: 50%; }
.progress-bar div.active { color: #e9f4ff; }
.progress-bar div.active b { border-color: var(--lime); color: var(--ink); background: var(--lime); }
.progress-bar i { height: 1px; background: #26394e; }
.back-link { display: inline-block; margin-bottom: 25px; color: #9caec2; font-size: 13px; font-weight: 700; }
.back-link:hover { color: var(--lime); }
.quote-layout { display: grid; grid-template-columns: 300px minmax(420px,1fr) 330px; gap: 34px; align-items: start; }

.product-column { position: sticky; top: 110px; }
.product-visual { position: relative; height: 300px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle,#183550,#091725 70%); }
.product-visual::after { content:""; position:absolute; width:65%; height:24px; bottom:31px; border-radius:50%; background:rgba(0,0,0,.55); filter:blur(13px); }
.product-visual { --photo-inset:14px; --photo-radius:14px; } .product-visual img { z-index:1; }
.product-visual > span { position: absolute; z-index: 2; left: 18px; top: 18px; padding: 7px 10px; color: var(--lime); background: rgba(4,13,23,.82); border: 1px solid rgba(142,229,46,.25); border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.product-column > .mini-label { margin: 23px 0 7px; }
.product-column h1 { margin: 0; font: 800 29px/1.05 Outfit,sans-serif; letter-spacing: -.7px; }
.product-specs { margin:14px 0 12px; display:flex; flex-wrap:wrap; gap:7px; }
.product-specs span { padding:6px 9px; border:1px solid #294057; border-radius:999px; color:#aec0d2; background:#091725; font-size:9px; font-weight:800; letter-spacing:.25px; }
.illustration-note { margin:0 0 13px; display:grid; gap:2px; color:#70869c; font-size:9px; }
.illustration-note b { color:#8fa5b9; text-transform:uppercase; letter-spacing:.7px; }
.change-device { margin: 13px 0 18px; padding: 0; border: 0; border-bottom: 1px solid #38536d; color: #a9bdd0; background: transparent; cursor: pointer; font-weight: 700; font-size: 12px; }
.model-picker { margin-bottom: 18px; }
.model-picker label,.condition-card label { display: block; margin-bottom: 8px; color: #a9bdd0; font-size: 11px; font-weight: 800; }
.condition-card { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #0b1a29; }
.condition-card select { background:#07131f; }
.condition-card p { margin: 10px 0 0; color: #7f94a9; font-size: 11px; line-height: 1.5; }

.quote-content { min-width: 0; }
.quote-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.quote-section-heading h2 { margin: 0; font: 800 clamp(30px,3vw,42px)/1 Outfit,sans-serif; letter-spacing: -1.2px; }
.quote-section-heading > span { color: #6f859c; font-size: 11px; }
.section-intro { max-width: 720px; color: #91a4b8; line-height: 1.7; font-size: 14px; }
.accessory-list { display: grid; gap: 10px; margin: 25px 0; }
.accessory-item { position: relative; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 13px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 15px; background: #0b1a29; cursor: pointer; transition: border-color .2s,background .2s; }
.accessory-item:hover,.accessory-item:has(input:checked) { border-color: rgba(142,229,46,.38); background: #0d2030; }
.accessory-item input { width: 20px; height: 20px; min-height: auto; accent-color: var(--lime-dark); }
.accessory-copy { display: grid; gap: 2px; }
.accessory-copy strong { color:#edf6ff; font-size: 14px; }
.accessory-copy small { color:#7e92a7; font-size: 11px; }
.accessory-tag { padding: 5px 8px; border-radius: 999px; color:#9db0c4; background:#07131f; font-size: 9px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; }
.accessory-tag.needed { color:#ffbd82; background:rgba(255,150,64,.1); }
.accessory-item.locked { cursor: default; opacity: .85; }

.extras-card { margin: 28px 0; padding: 22px; display: grid; grid-template-columns: 45px 1fr; gap: 16px; border: 1px solid rgba(17,136,211,.3); border-radius: 19px; background: linear-gradient(130deg,rgba(17,136,211,.12),rgba(13,29,46,.3)); }
.extras-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:14px; color:#07111f; background:#78c7f3; font-size:24px; }
.extras-card h3 { margin:0 0 6px; font:700 18px Outfit; }
.extras-card p { margin:0 0 10px; color:#9bb0c4; font-size:13px; line-height:1.65; }
.extras-card strong { color:#cde8f8; font-size:11px; }
.send-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.send-grid article { padding:23px; border:1px solid var(--line); border-radius:19px; background:#0b1a29; }
.send-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:var(--lime); background:rgba(142,229,46,.09); font-size:22px; }
.send-grid h3 { margin:15px 0 8px; font:700 18px Outfit; }
.send-grid p,.send-grid li { color:#8fa3b8; font-size:12px; line-height:1.6; }
.send-grid ul { margin:12px 0 0; padding-left:18px; }
.data-check { margin-top:15px; padding:20px; border:1px solid var(--line); border-radius:16px; background:#091725; }
.data-check summary { cursor:pointer; font-weight:700; font-size:13px; }
.data-check p { color:#91a5ba; line-height:1.65; font-size:12px; }

.offer-column { position:sticky; top:110px; }
.offer-card { padding:26px; border:1px solid rgba(142,229,46,.22); border-radius:24px; background:linear-gradient(160deg,#10283c,#091725); box-shadow:0 24px 60px rgba(0,0,0,.2); }
.offer-price { display:flex; align-items:end; justify-content:space-between; }
.offer-price small { color:#8195aa; margin-bottom:8px; }
.offer-price strong { color:var(--lime); font:800 54px/1 Outfit; letter-spacing:-2px; }
.offer-card > p:not(.mini-label,.form-fineprint) { color:#93a6bb; font-size:12px; line-height:1.55; }
.founder-line { margin:18px 0; padding:12px; display:grid; gap:3px; border-radius:12px; background:rgba(142,229,46,.08); }
.founder-line span { color:var(--lime); font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.founder-line strong { font-size:11px; }
.offer-divider { height:1px; margin:18px 0; background:var(--line); }
.offer-benefits { display:grid; gap:12px; margin:0 0 22px; padding:0; list-style:none; color:#b7c7d7; font-size:12px; }
.offer-benefits b { display:inline-grid; place-items:center; width:19px; height:19px; margin-right:7px; border-radius:50%; color:var(--ink); background:var(--lime); font-size:10px; }
.offer-basket-button { width:100%; min-height:45px; margin-top:9px; border:1px solid #294058; border-radius:12px; color:#c7d6e4; background:#0a1b2b; cursor:pointer; font-size:11px; font-weight:800; }
.offer-basket-button:hover,.offer-basket-button.added { border-color:#78c7f3; color:#78c7f3; }
.price-promise { margin-top:12px; padding:17px; display:grid; grid-template-columns:28px 1fr; gap:10px; border:1px solid var(--line); border-radius:15px; background:#0a1826; }
.price-promise > span { color:#78c7f3; font-size:22px; }
.price-promise strong { font-size:12px; }
.price-promise p { margin:5px 0 0; color:#758ba2; font-size:10px; line-height:1.5; }

.order-dialog { width:min(620px,calc(100% - 26px)); max-height:calc(100vh - 26px); }
.order-dialog-head { padding:30px 30px 20px; }
.order-dialog-head h2,.order-success h2 { margin:0 0 7px; font:800 34px/1.05 Outfit; letter-spacing:-.8px; }
.order-dialog-head > p:last-child { color:#8fa4b9; font-size:12px; }
#order-form { padding:0 30px 30px; }
#order-form label { display:grid; gap:7px; margin-bottom:14px; color:#b5c4d4; font-size:11px; font-weight:700; }
.order-summary { margin:0 0 20px; padding:12px; display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:14px; background:#081522; }
.order-summary > .item-photo { width:72px; height:60px; }
.order-summary div { display:grid; gap:5px; }
.order-summary strong { font-size:13px; }
.order-summary span { color:var(--lime); font:700 14px Outfit; }
.checkout-account { margin-bottom:14px; padding:13px 15px; display:flex; align-items:center; gap:12px; border:1px solid rgba(120,199,243,.2); border-radius:13px; color:#8298ac; background:rgba(17,136,211,.07); font-size:10px; line-height:1.5; }
.checkout-account b { display:block; color:#ddebfa; font-size:11px; }
.checkout-account a { margin-left:auto; color:#78c7f3; font-weight:800; white-space:nowrap; }
.checkout-account.signed-in { border-color:rgba(142,229,46,.22); background:rgba(142,229,46,.06); }
.checkout-account.signed-in::before { content:"✓"; display:grid; place-items:center; flex:0 0 30px; height:30px; border-radius:50%; color:#07111f; background:var(--lime); font-weight:900; }
#order-form fieldset { margin:7px 0 16px; padding:0; border:0; }
#order-form legend { margin-bottom:10px; font-size:11px; font-weight:700; color:#b5c4d4; }
.delivery-choice { grid-template-columns:20px 1fr!important; align-items:center; padding:13px; border:1px solid var(--line); border-radius:12px; background:#081522; }
.delivery-choice input { width:17px; height:17px; min-height:auto; accent-color:var(--lime-dark); }
.delivery-choice span { display:grid; gap:3px; }
.delivery-choice small { color:#7d92a7; font-weight:500; }
.order-consent { margin:17px 0!important; }
.order-success { padding:50px 35px; text-align:center; }
.success-tick { display:grid; place-items:center; width:66px; height:66px; margin:0 auto 20px; border-radius:50%; color:var(--ink); background:var(--lime); font-size:30px; }
.order-success > p:not(.mini-label) { color:#91a5b9; }
.next-steps { margin:24px 0; padding:20px; display:grid; gap:9px; text-align:left; border:1px solid var(--line); border-radius:14px; background:#081522; }
.next-steps span { color:#91a5b9; font-size:12px; }
.compact-footer { padding:30px max(25px,calc((100vw - 1420px)/2)); display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:#6f8499; background:#050d17; }
.compact-footer p { margin:0; }
.compact-footer div { display:flex; gap:20px; }
.compact-footer a { font-size:12px; }

@media (max-width:1100px) {
  .quote-layout { grid-template-columns:260px 1fr; }
  .offer-column { position:static; grid-column:2; }
  .offer-card { display:grid; grid-template-columns:1fr 1fr; column-gap:25px; }
  .offer-card .button,.offer-card .offer-basket-button,.offer-card .form-fineprint { grid-column:1/-1; }
  .price-promise { display:none; }
}
@media (max-width:760px) {
  .quote-page .page-header { position:sticky; }
  .secure-header { display:none; }
  .quote-page .basket-header-link { margin-left:auto; }
  .quote-page .header-help { display:none; }
  .quote-main { padding:25px 18px 70px; }
  .progress-bar div span { display:none; }
  .quote-layout { grid-template-columns:1fr; }
  .product-column,.offer-column { position:static; }
  .product-visual { height:260px; }
  .quote-content { grid-row:2; }
  .offer-column { grid-column:1; grid-row:3; }
  .quote-section-heading { align-items:start; flex-direction:column; }
  .send-grid { grid-template-columns:1fr; }
  .offer-card { display:block; }
  .offer-price { justify-content:flex-start; gap:16px; }
  .compact-footer { align-items:flex-start; flex-direction:column; }
}
@media (max-width:480px) {
  .quote-page .brand small { display:none; }
  .header-help { font-size:11px; }
  .accessory-item { grid-template-columns:23px 1fr; }
  .accessory-tag { grid-column:2; justify-self:start; }
  .field-pair { grid-template-columns:1fr; }
}