:root {
  --primary-red: #ff3e3e;
  --dark-blue: #1a1a2e;
  --hdmi-gold: #ffcf40;
  --road-grey: #2d3436;
  --sky-blue: #00cec9;
  --bg: #0f0c29;
  --text: #e9eef2;
  --grey: #6b6b7b;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Poppins', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: var(--hdmi-gold); }
.site-header { display:flex; align-items:center; justify-content:space-between; padding: 16px 32px; background: var(--dark-blue); border-bottom: 1px solid #333; }
.site-header .logo { color: var(--hdmi-gold); font-weight: 700; font-size: 1.4rem; text-decoration: none; }
.site-header .logo span { color: var(--primary-red); }
.site-header nav a { color: var(--text); text-decoration: none; margin-left: 24px; font-weight: 500; }
.site-header nav a:hover { color: var(--hdmi-gold); }
main { max-width: 960px; margin: 0 auto; padding: 32px 24px; }
.hero { text-align: center; padding: 48px 0; }
.hero h1 { font-size: 2.4rem; margin-bottom: 8px; color: var(--hdmi-gold); }
.hero.grey h1 { color: var(--grey); }
h1, h2, h3 { color: var(--hdmi-gold); }
fieldset { border: 1px solid #333; border-radius: 8px; padding: 16px; margin: 16px 0; background: rgba(255,255,255,0.02); }
legend { padding: 0 8px; color: var(--sky-blue); font-weight: 600; }
input, textarea, select { width: 100%; padding: 10px 12px; margin: 6px 0; background: #1a1a2e; color: var(--text); border: 1px solid #333; border-radius: 4px; font: inherit; }
input:focus { outline: 2px solid var(--sky-blue); border-color: var(--sky-blue); }
.tier, .addon, label { display: block; padding: 8px 0; cursor: pointer; }
.tier strong { color: var(--hdmi-gold); }
.tier small { display: block; color: var(--grey); }
.grey { color: var(--grey) !important; }
.grey small { color: var(--grey); }
.cta { display: inline-block; background: var(--primary-red); color: #fff !important; padding: 14px 28px; border: none; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.cta:hover { background: #e63535; }
button.cta { font-family: inherit; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 24px; }
.device-card { display: block; padding: 16px; background: #1a1a2e; border: 1px solid #333; border-radius: 6px; color: var(--text); text-decoration: none; }
.device-card:hover { border-color: var(--hdmi-gold); transform: translateY(-2px); transition: all 0.15s; }
.device-card small { display: block; color: var(--grey); font-size: 0.85em; }
.checkout-form .cta { width: 100%; padding: 18px; font-size: 1.1rem; margin-top: 16px; }
.order-summary { background: rgba(255,255,255,0.04); padding: 24px; border-radius: 8px; margin: 24px 0; }
.order-summary hr { border: 0; border-top: 1px solid #333; }
.payment-options { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.payment-options form { flex: 1; min-width: 200px; }
.payment-options .cta { width: 100%; }
.payment-options .paypal { background: #0070ba; }
.payment-options .paypal:hover { background: #005e9c; }
.error { background: #4a1a1a; border: 1px solid var(--primary-red); color: #fff; padding: 12px; border-radius: 4px; margin: 12px 0; }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; }
.site-footer { text-align: center; padding: 32px; color: var(--grey); border-top: 1px solid #333; margin-top: 64px; }
.agent-widget { position: fixed; bottom: 24px; right: 24px; z-index: 9999; }
.agent-bubble { background: var(--primary-red); color: #fff; border: none; border-radius: 999px; padding: 14px 22px; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.agent-bubble:hover { transform: translateY(-2px); }
.agent-panel { position: absolute; bottom: 70px; right: 0; width: 340px; max-width: 90vw; background: var(--dark-blue); border: 1px solid #333; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.agent-panel header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #111; border-radius: 8px 8px 0 0; border-bottom: 1px solid #333; }
.agent-panel header button { background: none; border: none; color: var(--text); font-size: 1.4rem; cursor: pointer; }
#agent-log { max-height: 320px; overflow-y: auto; padding: 12px; }
.msg { margin: 6px 0; padding: 8px 12px; border-radius: 6px; font-size: 0.92rem; }
.msg-assistant { background: rgba(0, 206, 201, 0.1); }
.msg-user { background: rgba(255, 62, 62, 0.1); text-align: right; }
#agent-form { display: flex; border-top: 1px solid #333; }
#agent-input { flex: 1; border: none; border-radius: 0; margin: 0; }
#agent-form button { display: none; }

/* ============ HERO ============ */
.hero { position: relative; height: 100vh; min-height: 640px; width: 100%; overflow: hidden; background: linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%); }
.hero-overlay { position: relative; z-index: 100; text-align: center; padding: 100px 24px 0; pointer-events: none; }
.hero-title { font-family: 'Orbitron', sans-serif; font-size: 4.5rem; margin: 0; color: white; text-shadow: 0 0 20px rgba(255, 62, 62, 0.5); letter-spacing: 2px; font-weight: 700; }
.hero-title span { color: var(--primary-red); }
.tagline { font-size: 1.4rem; font-weight: 300; margin: 12px 0 18px; opacity: 0.95; }
.device-ticker { display: inline-block; background: rgba(0,0,0,0.35); border: 1px solid rgba(255, 207, 64, 0.4); border-radius: 999px; padding: 8px 18px; font-size: 0.92rem; color: white; margin: 0 0 28px; pointer-events: all; }
.device-ticker .dot { display: inline-block; width: 8px; height: 8px; background: #00cec9; border-radius: 50%; margin-right: 6px; animation: pulse 1.5s infinite; }
.device-ticker strong { color: var(--hdmi-gold); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.cta-group { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; pointer-events: all; }
.btn { padding: 16px 36px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: 0.3s; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 1px; border: 2px solid transparent; display: inline-block; }
.btn-mail { background: var(--primary-red); color: white; box-shadow: 0 6px 24px rgba(255, 62, 62, 0.5); }
.btn-mail:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(255, 62, 62, 0.7); }
.btn-local { background: transparent; border-color: white; color: white; }
.btn-local:hover { background: white; color: var(--dark-blue); transform: translateY(-3px); }
.hero-micro { color: rgba(255,255,255,0.7); font-size: 0.85rem; margin-top: 18px; }

/* City layers (parallax) */
.city-layer { position: absolute; bottom: 100px; width: 200%; height: 400px; background-repeat: repeat-x; background-position: bottom; }
.city-back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400'%3E%3Cpath fill='%2316213e' d='M0 400h100v-80h40v-120h60v200h80v-150h50v-50h80v200h100v-250h60v250h100v-100h40v100z'/%3E%3C/svg%3E");
  animation: moveCity 60s linear infinite;
  z-index: 1; opacity: 0.6;
}
.city-front {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400'%3E%3Cpath fill='%231a1a2e' d='M0 400h150v-120h50v-40h70v160h100v-200h60v200h120v-150h80v150h100v-180h50v180h100v-100h50v100z'/%3E%3C/svg%3E");
  animation: moveCity 30s linear infinite;
  z-index: 2;
}
@keyframes moveCity { from { background-position: 0 bottom; } to { background-position: -1000px bottom; } }

/* Road */
.road { position: absolute; bottom: 0; width: 100%; height: 120px; background: var(--road-grey); z-index: 10; border-top: 4px solid #444; }
.road-lines { position: absolute; top: 50%; width: 200%; height: 6px; background-image: linear-gradient(to right, #ffcf40 50%, transparent 50%); background-size: 80px 100%; animation: moveRoad 0.8s linear infinite; }
@keyframes moveRoad { from { transform: translateX(0); } to { transform: translateX(-80px); } }

/* Service van */
.truck-wrap { position: absolute; bottom: 50px; left: 15%; z-index: 20; width: 320px; height: 150px; animation: bounce 0.4s infinite alternate; }
.truck-body { width: 260px; height: 110px; background: white; border-radius: 10px 30px 5px 5px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.truck-body::before { content: ""; position: absolute; right: -50px; bottom: 0; width: 60px; height: 80px; background: #f1f1f1; border-radius: 0 40px 10px 0; }
.van-window { position: absolute; right: -35px; top: 45px; width: 30px; height: 25px; background: var(--dark-blue); border-radius: 0 15px 0 0; }
.truck-logo { text-align: center; pointer-events: none; }
.truck-logo svg { width: 140px; fill: var(--primary-red); }
.truck-label { color: #333; font-weight: 800; font-size: 12px; margin-top: -5px; }
.wheel { position: absolute; bottom: -15px; width: 50px; height: 50px; background: #111; border-radius: 50%; border: 4px solid #333; }
.wheel::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 4px; background: #444; transform: translate(-50%, -50%); animation: spin 0.3s linear infinite; }
.w-back { left: 30px; } .w-front { right: -20px; }
@keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.exhaust { position: absolute; left: -20px; bottom: 10px; display: flex; }
.puff { width: 10px; height: 10px; background: rgba(255,255,255,0.4); border-radius: 50%; margin-right: 5px; animation: smoke 0.8s infinite; }
@keyframes smoke { 0% { transform: scale(1) translateY(0); opacity: 0.8; } 100% { transform: scale(3) translateY(-20px); opacity: 0; } }

/* Flying parcels */
.parcel { position: absolute; width: 50px; height: 40px; background: #e67e22; border: 2px solid #d35400; z-index: 5; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: bold; box-shadow: 5px 5px 15px rgba(0,0,0,0.3); }
.parcel::after { content: "PRIORITY"; }
.p1 { animation: fly 6s linear infinite; top: 30%; } .p2 { animation: fly 9s linear infinite; top: 15%; animation-delay: 2s; } .p3 { animation: fly 7s linear infinite; top: 45%; animation-delay: 4s; }
@keyframes fly { 0% { left: 110%; transform: rotate(0deg); } 100% { left: -20%; transform: rotate(-20deg); } }

/* ============ FAST-FLOW (3 steps) ============ */
.fastflow { padding: 80px 24px; background: linear-gradient(180deg, #24243e 0%, #0f0c29 100%); text-align: center; }
.fastflow h2 { font-size: 2.4rem; margin-bottom: 8px; }
.fastflow h2 .accent { color: var(--primary-red); }
.fastflow-sub { color: rgba(255,255,255,0.7); font-size: 1.05rem; margin-bottom: 48px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; max-width: 1100px; margin: 0 auto; }
.step { background: rgba(255,255,255,0.04); border: 1px solid rgba(255, 207, 64, 0.2); border-radius: 12px; padding: 32px 24px; transition: 0.3s; }
.step:hover { border-color: var(--hdmi-gold); transform: translateY(-4px); }
.step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-red); color: white; font-family: 'Orbitron', sans-serif; font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 4px 16px rgba(255, 62, 62, 0.4); }
.step h3 { color: white; font-size: 1.2rem; margin: 0 0 8px; }
.step p { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin: 0 0 16px; }
.step-cta { color: var(--hdmi-gold); text-decoration: none; font-weight: 600; }
.step-cta:hover { text-decoration: underline; }

/* ============ POPULAR DEVICES ============ */
.popular { padding: 80px 24px; background: var(--bg); text-align: center; }
.popular h2 { font-size: 2.2rem; }
.popular-sub { color: rgba(255,255,255,0.7); margin-bottom: 32px; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; }
.device-card { display: flex; flex-direction: column; padding: 18px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: var(--text); text-decoration: none; transition: 0.2s; position: relative; }
.device-card:hover { border-color: var(--hdmi-gold); background: rgba(255, 207, 64, 0.08); transform: translateY(-2px); }
.device-card strong { color: white; }
.device-card small { color: rgba(255,255,255,0.6); font-size: 0.85rem; margin-top: 2px; }
.device-pill { display: inline-block; margin-top: 10px; padding: 3px 8px; font-size: 0.7rem; background: rgba(0, 206, 201, 0.2); color: var(--sky-blue); border-radius: 4px; align-self: flex-start; }
.popular-more { margin-top: 32px; }
.cta-inline { color: var(--hdmi-gold); font-weight: 600; text-decoration: none; }
.cta-inline:hover { text-decoration: underline; }

/* ============ TRUST ============ */
.trust { padding: 80px 24px; background: linear-gradient(180deg, var(--bg) 0%, #1a1a2e 100%); }
.trust h2 { text-align: center; font-size: 2.2rem; margin-bottom: 48px; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }
.trust-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 24px; }
.trust-card h3 { color: var(--hdmi-gold); font-size: 1.1rem; margin: 0 0 8px; }
.trust-card p { color: rgba(255,255,255,0.8); font-size: 0.92rem; margin: 0; line-height: 1.5; }
.trust-card a { color: var(--sky-blue); }

/* ============ FINAL CTA ============ */
.final-cta { padding: 100px 24px; text-align: center; background: linear-gradient(180deg, #1a1a2e 0%, #ff3e3e 200%); }
.final-cta h2 { font-size: 2.6rem; margin-bottom: 8px; }
.final-cta p { color: rgba(255,255,255,0.85); font-size: 1.05rem; margin-bottom: 32px; }
.cta-big { font-size: 1.2rem; padding: 20px 48px; }
.micro { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-top: 18px; }
.micro a { color: var(--hdmi-gold); text-decoration: underline; }

/* ============ MOBILE ============ */
@media (max-width: 768px) {
  .hero-title { font-size: 2.4rem; }
  .tagline { font-size: 1rem; }
  .device-ticker { font-size: 0.78rem; padding: 6px 12px; }
  .cta-group { flex-direction: column; align-items: center; }
  .btn { padding: 14px 24px; font-size: 0.85rem; }
  .truck-wrap { transform: scale(0.5); left: 0; }
  .steps { grid-template-columns: 1fr; }
  .final-cta h2 { font-size: 1.8rem; }
}

/* ============ EMAIL CAPTURE BAR ============ */
.email-capture {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
  background: linear-gradient(90deg, #ff3e3e 0%, #1a1a2e 100%);
  border-top: 3px solid var(--hdmi-gold);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
  animation: slideUp 0.4s ease-out;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.email-capture-inner { max-width: 1100px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; color: white; }
.email-capture-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: white; font-size: 1.6rem; cursor: pointer; opacity: 0.7; padding: 4px 8px; }
.email-capture-close:hover { opacity: 1; }
.email-capture-text { flex: 1; font-size: 0.95rem; }
.email-capture-text strong { color: var(--hdmi-gold); }
.ec-form { display: flex; gap: 8px; }
.ec-form input { width: 220px; padding: 10px 14px; border-radius: 50px; border: none; }
.ec-form .cta { padding: 10px 20px; font-size: 0.9rem; background: var(--hdmi-gold); color: var(--dark-blue); }
.ec-form .cta:hover { background: #ffd766; }
@media (max-width: 768px) {
  .email-capture-inner { flex-direction: column; align-items: stretch; padding: 12px; }
  .ec-form { flex-direction: column; }
  .ec-form input { width: 100%; }
}
/* ============ FOOTER TDR + MTI ============ */
.site-footer { text-align: center; padding: 32px 24px; color: #6b6b7b; border-top: 1px solid #222; margin-top: 64px; font-size: 0.9rem; }
.site-footer a { color: #00cec9; text-decoration: none; }
.site-footer a:hover { color: #ffcf40; }
.site-footer .footer-badges { display: inline-flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.site-footer .footer-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 0.78rem; }
.site-footer .footer-badge--tdr { background: rgba(255, 207, 64, 0.1); color: #ffcf40; }
.site-footer .footer-badge--mti { background: rgba(0, 206, 201, 0.1); color: #00cec9; }
.site-footer .footer-mailto { margin-top: 6px; font-size: 0.82rem; color: #6b6b7b; }

/* ============ TRUST BANNER (above form pages) ============ */
.trust-banner { background: linear-gradient(90deg, rgba(255,62,62,0.15), rgba(0,206,201,0.15)); padding: 10px 24px; text-align: center; font-size: 0.95rem; color: #e9eef2; border-bottom: 1px solid #333; }
.trust-banner strong { color: #ffcf40; }

/* ============ BOOKING PAGE (fix unstyled) ============ */
.booking-page { max-width: 720px; margin: 0 auto; }
.booking-summary { background: rgba(255,255,255,0.04); border: 1px solid #333; border-radius: 12px; padding: 28px 24px; margin-bottom: 24px; }
.booking-summary h1 { color: #ffcf40; font-size: 1.6rem; margin: 0 0 8px; }
.booking-tag { color: #aaa; margin: 0 0 16px; font-size: 0.95rem; }
.booking-desc { color: #d9d9d9; line-height: 1.7; }
.booking-desc p { margin: 0 0 8px; }
.booking-list { padding-left: 20px; }
.booking-list li { margin: 6px 0; }
.price-summary { margin-top: 20px; padding-top: 16px; border-top: 1px solid #333; }
.price-line { display: flex; justify-content: space-between; padding: 4px 0; font-size: 1.05rem; }
.price-line strong { color: #ffcf40; }
.price-line--small { font-size: 0.85rem; color: #aaa; }
.step-num-inline { display: inline-block; background: #ff3e3e; color: white; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; margin-right: 6px; font-weight: 700; font-size: 0.85rem; }
.pay-option { display: block; padding: 16px; margin: 8px 0; border: 2px solid #333; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.pay-option:hover { border-color: #00cec9; }
.pay-option input[type="radio"] { margin-right: 12px; transform: scale(1.2); }
.pay-option--recommended { border-color: #ffcf40; background: rgba(255, 207, 64, 0.05); position: relative; }
.pay-option--recommended:hover { border-color: #ff3e3e; }
.pay-option-title { font-weight: 600; color: white; font-size: 1.05rem; }
.pay-option-badge { display: inline-block; background: #ff3e3e; color: white; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.pay-option-desc { color: #aaa; font-size: 0.9rem; margin-top: 4px; }
.pay-option-price { color: #ffcf40; font-weight: 600; font-size: 1.05rem; margin-top: 8px; }
.addon { display: block; padding: 16px; margin: 8px 0; border: 2px solid #333; border-radius: 8px; cursor: pointer; }
.addon--checkbox:hover { border-color: #00cec9; }
.addon input[type="checkbox"] { margin-right: 12px; transform: scale(1.2); }
.addon-title { font-weight: 600; color: white; display: flex; justify-content: space-between; align-items: center; }
.addon-price { color: #ffcf40; font-weight: 700; }
.addon-desc { color: #aaa; font-size: 0.9rem; margin-top: 4px; }
.form-row { display: block; }
.form-row input { width: 100%; }
.form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-row--3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.cta--block { display: block; width: 100%; }
.cta-secondary { display: block; width: 100%; background: transparent; color: #00cec9; border: 1px solid #00cec9; padding: 12px 24px; border-radius: 6px; font-size: 0.95rem; cursor: pointer; margin-bottom: 16px; }
.cta-secondary:hover { background: rgba(0,206,201,0.1); }
.form-footer-link { text-align: center; margin-top: 24px; font-size: 0.9rem; color: #aaa; }
.form-footer-link a { color: #00cec9; }
@media (max-width: 600px) { .form-row--2, .form-row--3 { grid-template-columns: 1fr; } }

/* ============ CHECKOUT PAGE (fix unstyled) ============ */
.checkout-page { max-width: 1100px; margin: 0 auto; }
.checkout-locked-banner { background: linear-gradient(90deg, rgba(0,206,201,0.15), rgba(255,207,64,0.15)); border: 1px solid #00cec9; padding: 14px 20px; border-radius: 8px; text-align: center; font-size: 1.1rem; color: #ffcf40; margin-bottom: 24px; }
.checkout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }
.order-summary { background: rgba(255,255,255,0.04); border: 1px solid #333; border-radius: 12px; padding: 28px; }
.order-summary h1 { color: #ffcf40; margin-top: 0; }
.line-item { display: flex; justify-content: space-between; padding: 4px 0; }
.line-item strong { color: #ffcf40; }
.checkout-total { color: #ffcf40; font-size: 1.4rem; margin-top: 16px; }
.payment-path-explainer { background: rgba(0,206,201,0.05); border-left: 3px solid #00cec9; padding: 12px 16px; margin: 16px 0; border-radius: 0 6px 6px 0; }
.payment-path-explainer p { margin: 4px 0; }
.payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
@media (max-width: 600px) { .payment-options { grid-template-columns: 1fr; } }
.pay-gateway { display: block; padding: 16px; border: 2px solid #333; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.pay-gateway:hover { border-color: #00cec9; }
.pay-gateway--selected { border-color: #ff3e3e; background: rgba(255,62,62,0.05); }
.pay-gateway input[type="radio"] { margin-right: 8px; transform: scale(1.2); }
.pay-gateway-name { font-weight: 700; color: white; font-size: 1.1rem; }
.pay-gateway-sub { color: #aaa; font-size: 0.85rem; margin-top: 2px; }
.pay-gateway-tag { display: inline-block; background: #ff3e3e; color: white; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.payment-secure { text-align: center; margin-top: 12px; }
.checkout-sidecar { background: rgba(255,255,255,0.04); border: 1px solid #333; border-radius: 12px; padding: 24px; height: fit-content; }
.checkout-sidecar h3 { color: #ffcf40; font-size: 1rem; margin-top: 16px; }
.checkout-sidecar h3:first-child { margin-top: 0; }
.checkout-sidecar .next-steps { padding-left: 20px; }
.checkout-sidecar .next-steps li { margin: 8px 0; }
.checkout-sidecar .mailin-address { background: rgba(255,207,64,0.05); padding: 12px; border-left: 3px solid #ffcf40; border-radius: 0 6px 6px 0; font-family: monospace; }

/* ============ SUCCESS PAGE (fix unstyled) ============ */
.success-page { max-width: 720px; margin: 0 auto; }
.success-banner { text-align: center; margin-bottom: 24px; }
.success-banner h1 { color: #55efc4; font-size: 2.4rem; }
.success-locked { background: rgba(85,239,196,0.1); border: 1px solid #55efc4; padding: 12px 20px; border-radius: 8px; text-align: center; color: #55efc4; font-size: 1.05rem; margin-bottom: 24px; }
.success-balance { background: rgba(0,206,201,0.1); border: 1px solid #00cec9; padding: 16px 20px; border-radius: 8px; margin: 16px 0; }
.success-label { background: rgba(255,255,255,0.04); border: 1px solid #333; border-radius: 8px; padding: 20px; margin: 16px 0; }
.success-label h2 { color: #ffcf40; margin-top: 0; }
.success-ship-to { background: rgba(255,207,64,0.05); border-left: 3px solid #ffcf40; padding: 12px 16px; border-radius: 0 6px 6px 0; }
.success-cta { text-align: center; margin: 24px 0; }

/* ============ HOW-IT-WORKS (fix unstyled) ============ */
.howit-hero { text-align: center; padding: 48px 0; }
.howit-hero h1 { font-size: 2.2rem; color: #ffcf40; margin-bottom: 8px; }
.howit-sub { color: #aaa; font-size: 1.1rem; }
.howit-steps { max-width: 800px; margin: 32px auto; }
.howit-steps h2 { color: #ffcf40; text-align: center; }
.howit-step { display: grid; grid-template-columns: 60px 1fr; gap: 24px; margin: 24px 0; }
.howit-num { width: 50px; height: 50px; background: #ff3e3e; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; }
.howit-content { background: rgba(255,255,255,0.04); border: 1px solid #333; border-radius: 8px; padding: 20px; }
.howit-content h3 { color: #ffcf40; margin-top: 0; }
.howit-mailto { max-width: 600px; margin: 32px auto; text-align: center; }
.mailto-card { background: rgba(255,207,64,0.05); border: 1px solid #ffcf40; padding: 24px; border-radius: 8px; }
.mailto-address { font-family: monospace; font-size: 1.05rem; line-height: 1.7; }
.howit-faq { max-width: 1000px; margin: 32px auto; }
.howit-faq h2 { color: #ffcf40; text-align: center; }
.howit-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.howit-faq-card { background: rgba(255,255,255,0.04); border: 1px solid #333; border-radius: 8px; padding: 20px; }
.howit-faq-card h4 { color: #ffcf40; margin-top: 0; }
.howit-final-cta { text-align: center; padding: 60px 0; }
.cta--big { font-size: 1.2rem; padding: 16px 32px; }

/* ============ BOOKING INDEX (popular devices) ============ */
.booking-index { max-width: 1100px; margin: 0 auto; }
.booking-index h1 { color: #ffcf40; text-align: center; margin-bottom: 32px; }
.booking-category { margin: 24px 0; }
.booking-category h2 { color: #00cec9; font-size: 1.3rem; margin-bottom: 12px; }

/* ============ TRACK PAGE (order lookup) ============ */
.track-page { max-width: 1100px; margin: 0 auto; }
.track-page h1 { color: #ffcf40; text-align: center; margin-bottom: 12px; }
.track-sub { text-align: center; color: #b2bec3; margin-bottom: 32px; font-size: 1.05rem; }

.track-lookup-form { max-width: 700px; margin: 0 auto 48px; }
.track-lookup-row { display: flex; gap: 12px; align-items: stretch; }
.track-input {
  flex: 1; padding: 18px 20px; font-size: 1.2rem; font-family: 'JetBrains Mono', 'Courier New', monospace;
  background: #16213e; color: #ffcf40; border: 2px solid #0f3460; border-radius: 6px;
  text-align: center; letter-spacing: 1px; transition: border-color 0.2s;
}
.track-input:focus { outline: none; border-color: #ffcf40; box-shadow: 0 0 0 3px rgba(255,207,64,0.2); }
.track-input::placeholder { color: #636e72; }
.track-submit { white-space: nowrap; padding: 18px 32px; }
.track-lookup-form .muted { text-align: center; margin-top: 8px; }

.track-explainer { margin: 48px 0; padding: 32px 24px; background: #16213e; border-radius: 12px; }
.track-explainer h2 { color: #00cec9; text-align: center; margin-bottom: 24px; }
.track-explainer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.track-explainer-card { background: #0f3460; padding: 20px; border-radius: 8px; text-align: center; }
.track-explainer-emoji { font-size: 2.5rem; margin-bottom: 8px; }
.track-explainer-card h4 { color: #ffcf40; margin-bottom: 8px; font-size: 1.05rem; }
.track-explainer-card p { color: #b2bec3; font-size: 0.92rem; line-height: 1.5; margin: 0; }

.track-faq { margin: 48px auto; max-width: 800px; }
.track-faq h2 { color: #00cec9; margin-bottom: 16px; text-align: center; }
.track-faq details {
  background: #16213e; padding: 16px 20px; border-radius: 6px; margin-bottom: 10px;
  border-left: 3px solid #ffcf40; cursor: pointer;
}
.track-faq details[open] { background: #1a2747; }
.track-faq summary { color: #ffcf40; font-weight: 600; font-size: 1.05rem; padding: 4px 0; }
.track-faq summary:hover { color: #ffd860; }
.track-faq details p { color: #dfe6e9; line-height: 1.6; margin-top: 12px; }

/* ============ STATUS TIMELINE (animated) ============ */
.status-timeline {
  background: #16213e;
  border-radius: 12px;
  padding: 32px 24px;
  margin: 32px 0;
  overflow-x: auto;
}
.status-timeline-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 700px;
  position: relative;
}
.status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  min-width: 90px;
}
.status-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: #0f3460;
  border: 3px solid #2d3436;
  position: relative;
  transition: all 0.3s;
}
.status-step--done .status-step-icon {
  background: #00cec9;
  border-color: #00cec9;
  color: #1a1a2e;
  box-shadow: 0 0 12px rgba(0,206,201,0.4);
}
.status-check { font-size: 1.6rem; font-weight: 700; }
.status-step-emoji { display: block; }
.status-step--current .status-step-icon {
  background: #ffcf40;
  border-color: #ffcf40;
  color: #1a1a2e;
  box-shadow: 0 0 20px rgba(255,207,64,0.6);
  animation: pulse-glow 2s ease-in-out infinite;
}
.status-step--pending .status-step-icon {
  background: #2d3436;
  border-color: #2d3436;
  color: #636e72;
  opacity: 0.6;
}
.status-step-label {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #dfe6e9;
  max-width: 110px;
  line-height: 1.3;
}
.status-step--done .status-step-label { color: #00cec9; }
.status-step--current .status-step-label { color: #ffcf40; }
.status-step--pending .status-step-label { color: #636e72; }

.status-step-pulse {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,207,64,0.4);
  z-index: -1;
  animation: ripple 1.8s ease-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255,207,64,0.6); }
  50% { box-shadow: 0 0 32px rgba(255,207,64,0.9); }
}
@keyframes ripple {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.status-connector {
  flex: 1 1 auto;
  height: 3px;
  background: #2d3436;
  margin-top: 28px;
  position: relative;
  min-width: 30px;
}
.status-connector--done {
  background: linear-gradient(90deg, #00cec9 0%, #00cec9 100%);
  box-shadow: 0 0 8px rgba(0,206,201,0.3);
}
.status-connector--pending { background: #2d3436; }

/* ============ BALANCE-DUE BANNER ============ */
.balance-due-banner {
  display: flex;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, #ff3e3e 0%, #d63031 100%);
  border: 2px solid #ffcf40;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 24px 0;
  box-shadow: 0 0 32px rgba(255,62,62,0.3);
  animation: attention-pulse 3s ease-in-out infinite;
}
@keyframes attention-pulse {
  0%, 100% { box-shadow: 0 0 32px rgba(255,62,62,0.3); }
  50% { box-shadow: 0 0 48px rgba(255,62,62,0.5); }
}
.balance-due-icon { font-size: 3.5rem; flex-shrink: 0; }
.balance-due-content { flex: 1; color: #fff; }
.balance-due-content h2 {
  color: #fff; margin: 0 0 8px; font-size: 1.5rem; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.balance-due-content p { color: rgba(255,255,255,0.95); line-height: 1.5; margin: 0 0 16px; }
.balance-due-content .cta {
  background: #ffcf40; color: #1a1a2e; font-weight: 700;
  border: none; padding: 14px 28px; border-radius: 6px;
  font-size: 1.1rem; cursor: pointer; transition: transform 0.2s;
  text-decoration: none; display: inline-block;
}
.balance-due-content .cta:hover { transform: translateY(-2px); background: #ffd860; }

.balance-paid-banner {
  display: flex;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, #00cec9 0%, #019875 100%);
  border-radius: 12px;
  padding: 20px 28px;
  margin: 24px 0;
}
.balance-paid-icon { font-size: 2.5rem; }
.balance-paid-content h2 { color: #fff; margin: 0 0 4px; font-size: 1.25rem; }
.balance-paid-content p { color: rgba(255,255,255,0.95); margin: 0; }

/* ============ CURRENT STATUS BADGE ============ */
.current-status-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #16213e;
  border: 2px solid #2d3436;
  border-left: 6px solid;
  border-radius: 6px;
  padding: 14px 20px;
  margin: 16px 0 32px;
  font-size: 1.05rem;
  color: #dfe6e9;
}
.current-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  animation: dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============ ORDER DETAIL (account/show.blade.php) ============ */
.order-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin-top: 24px;
}
@media (max-width: 768px) {
  .order-detail-grid { grid-template-columns: 1fr; }
  .status-timeline-steps { min-width: 600px; }
  .balance-due-banner { flex-direction: column; text-align: center; }
  .balance-due-content .cta { width: 100%; }
  .track-lookup-row { flex-direction: column; }
  .track-submit { width: 100%; }
}
.order-detail-main h2 { color: #ffcf40; margin-top: 0; }
.order-detail-main h3 { color: #00cec9; margin-top: 24px; }
.order-detail-main hr { border: none; border-top: 1px solid #2d3436; margin: 20px 0; }
.line-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  font-size: 0.98rem;
  color: #dfe6e9;
  flex-wrap: wrap;
  gap: 8px;
}
.line-item--total {
  border-top: 2px solid #ffcf40;
  margin-top: 8px;
  padding-top: 12px;
  font-size: 1.1rem;
  color: #ffcf40;
}
.line-item .balance-amount {
  color: #ff3e3e;
  font-size: 1.3rem;
  font-weight: 700;
}
.shipment-card {
  background: #16213e;
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 12px;
  border-left: 3px solid #00cec9;
}
.shipment-card-header {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;
}
.shipment-card p { margin: 4px 0; color: #b2bec3; font-size: 0.92rem; }
.shipment-card code { background: #0f3460; padding: 2px 8px; border-radius: 3px; color: #00cec9; }

.order-detail-sidecar {
  background: #16213e;
  border-radius: 8px;
  padding: 24px;
  height: fit-content;
}
.order-detail-sidecar h3 {
  color: #ffcf40;
  font-size: 1rem;
  margin: 0 0 8px;
  margin-top: 20px;
}
.order-detail-sidecar h3:first-child { margin-top: 0; }
.order-detail-sidecar p { color: #b2bec3; font-size: 0.92rem; line-height: 1.5; margin: 0 0 12px; }
.order-detail-sidecar .cta--block { width: 100%; text-align: center; }

.link-underline { color: #00cec9; text-decoration: underline; text-decoration-color: rgba(0,206,201,0.4); }
.link-underline:hover { text-decoration-color: #00cec9; }

.mailin-address {
  background: #0f3460;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #dfe6e9;
  border-left: 3px solid #ffcf40;
}

.line-item .micro { margin-left: 8px; font-weight: 400; font-size: 0.85rem; }

/* ============ BALANCE PAGE (checkout/balance.blade.php) ============ */
.checkout-page .balance-amount { color: #ff3e3e; }

/* ============ TDR GO COMING SOON (home hero Local CTA) ============ */
.btn-local--coming-soon {
  display: inline-block;
  cursor: help;
  position: relative;
  opacity: 0.85;
  border-style: dashed !important;
}
.btn-local--coming-soon small {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 2px;
  opacity: 0.85;
  text-transform: uppercase;
  color: var(--hdmi-gold, #ffcf40);
}
.btn-local--coming-soon:hover { opacity: 1; }

/* ============ CHANNEL TEASER (home hero, TDR Go context) ============ */
.channel-teaser {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.92rem;
}
.channel-tag {
  background: rgba(15, 52, 96, 0.6);
  border: 1px solid rgba(0, 206, 201, 0.3);
  padding: 6px 12px;
  border-radius: 20px;
  color: #dfe6e9;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.channel-tag small {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffcf40;
  margin-left: 4px;
  font-weight: 700;
}
.channel-tag--active { border-color: #00cec9; box-shadow: 0 0 8px rgba(0, 206, 201, 0.2); }
.channel-tag--soon {
  border-style: dashed;
  border-color: rgba(255, 207, 64, 0.4);
  opacity: 0.8;
}
.channel-sep { color: #636e72; font-weight: 700; }

/* ============================================================
 *  HDMIPORTS — SHIPPING CARRIERS BLOCK (carriers/shipping-locations)
 * ============================================================ */

.carriers {
  --carrier-pad: 20px;
  --carrier-radius: 10px;
}

/* ============ FULL VARIANT (shipping-locations page) ============ */
.carriers--full {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.carriers--full .carriers-title {
  text-align: center;
  margin: 0 0 12px;
  font-size: 2rem;
  color: #00cec9;
}
.carriers--full .carriers-sub {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
  color: #dfe6e9;
  font-size: 1.05rem;
}
.carriers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}
.carrier-card {
  background: rgba(15, 52, 96, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--carrier-radius);
  padding: 18px var(--carrier-pad);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.carrier-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 206, 201, 0.5);
  box-shadow: 0 6px 20px rgba(0, 206, 201, 0.1);
}
.carrier-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.carrier-logo {
  font-size: 1.4rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}
.carrier-card h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #ffcf40;
}
.carrier-card p {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #dfe6e9;
}
.carrier-locator {
  display: inline-block;
  font-size: 0.88rem;
  color: #00cec9;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 206, 201, 0.4);
  padding-bottom: 1px;
  margin-right: 8px;
  margin-top: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.carrier-locator:hover {
  color: #ffcf40;
  border-bottom-color: rgba(255, 207, 64, 0.6);
}

/* ============ COMPACT VARIANT (track / checkout success / how-it-works) ============ */
.carriers--compact {
  background: rgba(15, 52, 96, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0;
}
.carriers--compact h3 {
  margin: 0 0 8px;
  color: #ffcf40;
}
.carriers--compact p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.carriers-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.carriers-inline-list li {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 206, 201, 0.2);
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 0.85rem;
  color: #dfe6e9;
}
.carriers-find-cta { margin-bottom: 0; }
.carriers-find-cta .cta-inline {
  color: #00cec9;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed rgba(0, 206, 201, 0.4);
}
.carriers-find-cta .cta-inline:hover { color: #ffcf40; }

/* ============ INLINE VARIANT (emails) ============ */
.carriers--inline {
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 12px 0;
}
.carriers--inline p { margin: 0; }

/* ============================================================
 *  INDEPENDENT-CARRIER DISCLAIMER
 *  Used everywhere shipping is mentioned.
 *  Big yellow warning border. Impossible to miss.
 * ============================================================ */
.carrier-disclaimer {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255, 207, 64, 0.06);
  border-left: 4px solid #ffcf40;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 32px 0;
}
.carrier-disclaimer-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}
.carrier-disclaimer-body {
  flex: 1;
  min-width: 0;
}
.carrier-disclaimer-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: #ffcf40;
}
.carrier-disclaimer-body p {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #dfe6e9;
}
.carrier-disclaimer-body p:last-child { margin-bottom: 0; }
.carrier-disclaimer-list {
  margin: 6px 0 12px;
  padding-left: 22px;
}
.carrier-disclaimer-list li {
  margin: 4px 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #b2bec3;
}
.carrier-disclaimer-footer {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 207, 64, 0.25);
  font-size: 0.85rem !important;
}
.carrier-disclaimer-footer.muted { color: #95a5a6; }
.carrier-disclaimer-footer a { color: #ffcf40; }

/* Compact-mode adjustments */
.carriers--compact .carrier-disclaimer {
  padding: 16px 18px;
  margin: 16px 0 0;
}
.carriers--compact .carrier-disclaimer-title { font-size: 0.98rem; }
.carriers--compact .carrier-disclaimer-body p { font-size: 0.88rem; }

/* Inline-mode adjustments */
.carriers--inline .carrier-disclaimer {
  padding: 14px 18px;
  margin: 14px 0 0;
}
.carriers--inline .carrier-disclaimer-title { font-size: 0.92rem; }
.carriers--inline .carrier-disclaimer-body p,
.carriers--inline .carrier-disclaimer-list li { font-size: 0.85rem; }
.carriers--inline .carrier-disclaimer-list { display: none; } /* hide the long list in inline/email */
/* SEO sprint styles (King 2026-07-08 20:07 UTC).
   Mobile-first. Scales up at 768px / 1024px. */
.seo-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}
.seo-hero {
  margin-bottom: 24px;
}
.seo-hero .breadcrumbs {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
  line-height: 1.4;
}
.seo-hero h1 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--dark-blue);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
}
.seo-hero .lead {
  font-size: 16px;
  line-height: 1.5;
  color: #444;
  margin: 0 0 20px;
}
.seo-hero .cta {
  display: inline-block;
  padding: 14px 20px;
  background: var(--primary-red);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.seo-body {
  font-size: 16px;
  line-height: 1.6;
  color: #222;
}
.seo-body h2 {
  font-size: 22px;
  line-height: 1.2;
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--dark-blue);
}
.seo-body h3 {
  font-size: 18px;
  line-height: 1.3;
  margin-top: 24px;
  margin-bottom: 8px;
}
.seo-body p {
  margin: 0 0 16px;
}
.seo-body ol,
.seo-body ul {
  margin: 0 0 16px;
  padding-left: 24px;
}
.seo-body ol li,
.seo-body ul li {
  margin-bottom: 8px;
  line-height: 1.5;
}
.seo-body strong {
  color: var(--dark-blue);
}
.seo-body .muted {
  color: #666;
  font-size: 14px;
  margin-top: 12px;
}

.seo-faqs {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}
.seo-faqs h2 {
  font-size: 22px;
  margin: 0 0 16px;
  color: var(--dark-blue);
}
.seo-faq {
  border-bottom: 1px solid #eee;
  padding: 14px 0;
}
.seo-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: var(--dark-blue);
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.seo-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}
.seo-faq[open] summary::after {
  content: '−';
}
.seo-faq p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

.seo-cta-band {
  margin-top: 40px;
  padding: 24px 16px;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: #fff;
  border-radius: 8px;
  text-align: center;
}
.seo-cta-band h2 {
  font-size: 22px;
  margin: 0 0 8px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
}
.seo-cta-band p {
  margin: 0 0 16px;
  color: #ccc;
}
.seo-cta-band .cta {
  display: inline-block;
  padding: 14px 24px;
  background: var(--primary-red);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}

.seo-related {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}
.seo-related h2 {
  font-size: 18px;
  margin: 0 0 12px;
  color: var(--dark-blue);
}
.related-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.related-grid li a {
  display: block;
  padding: 10px 12px;
  background: #f8f8f8;
  border-radius: 4px;
  color: var(--dark-blue);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}
.related-grid li a:hover {
  background: #ffefef;
}

.seo-hub {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}
.seo-hub header {
  margin-bottom: 24px;
}
.seo-hub h1 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--dark-blue);
  font-family: 'Orbitron', sans-serif;
}
.seo-hub header p {
  font-size: 16px;
  line-height: 1.5;
  color: #444;
  margin: 0;
}
.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.guide-list li {
  border-bottom: 1px solid #eee;
}
.guide-list li a {
  display: block;
  padding: 14px 0;
  color: var(--dark-blue);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}
.guide-list li a:hover {
  color: var(--primary-red);
}
.seo-cta-line {
  margin-top: 32px;
  text-align: center;
}

/* Tablet */
@media (min-width: 768px) {
  .seo-page,
  .seo-hub {
    padding: 24px;
  }
  .seo-hero h1,
  .seo-hub h1 {
    font-size: 36px;
  }
  .seo-hero .cta {
    width: auto;
    display: inline-block;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .seo-page,
  .seo-hub {
    padding: 32px 24px;
  }
  .seo-hero h1,
  .seo-hub h1 {
    font-size: 44px;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* SEO sprint styles (King 2026-07-08 20:07 UTC).
   Mobile-first. Scales up at 768px / 1024px. */
.seo-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}
.seo-hero {
  margin-bottom: 24px;
}
.seo-hero .breadcrumbs {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
  line-height: 1.4;
}
.seo-hero h1 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--dark-blue);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
}
.seo-hero .lead {
  font-size: 16px;
  line-height: 1.5;
  color: #444;
  margin: 0 0 20px;
}
.seo-hero .cta {
  display: inline-block;
  padding: 14px 20px;
  background: var(--primary-red);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.seo-body {
  font-size: 16px;
  line-height: 1.6;
  color: #222;
}
.seo-body h2 {
  font-size: 22px;
  line-height: 1.2;
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--dark-blue);
}
.seo-body h3 {
  font-size: 18px;
  line-height: 1.3;
  margin-top: 24px;
  margin-bottom: 8px;
}
.seo-body p {
  margin: 0 0 16px;
}
.seo-body ol,
.seo-body ul {
  margin: 0 0 16px;
  padding-left: 24px;
}
.seo-body ol li,
.seo-body ul li {
  margin-bottom: 8px;
  line-height: 1.5;
}
.seo-body strong {
  color: var(--dark-blue);
}
.seo-body .muted {
  color: #666;
  font-size: 14px;
  margin-top: 12px;
}

.seo-faqs {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}
.seo-faqs h2 {
  font-size: 22px;
  margin: 0 0 16px;
  color: var(--dark-blue);
}
.seo-faq {
  border-bottom: 1px solid #eee;
  padding: 14px 0;
}
.seo-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: var(--dark-blue);
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.seo-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}
.seo-faq[open] summary::after {
  content: '−';
}
.seo-faq p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

.seo-cta-band {
  margin-top: 40px;
  padding: 24px 16px;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: #fff;
  border-radius: 8px;
  text-align: center;
}
.seo-cta-band h2 {
  font-size: 22px;
  margin: 0 0 8px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
}
.seo-cta-band p {
  margin: 0 0 16px;
  color: #ccc;
}
.seo-cta-band .cta {
  display: inline-block;
  padding: 14px 24px;
  background: var(--primary-red);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}

.seo-related {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}
.seo-related h2 {
  font-size: 18px;
  margin: 0 0 12px;
  color: var(--dark-blue);
}
.related-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.related-grid li a {
  display: block;
  padding: 10px 12px;
  background: #f8f8f8;
  border-radius: 4px;
  color: var(--dark-blue);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}
.related-grid li a:hover {
  background: #ffefef;
}

.seo-hub {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}
.seo-hub header {
  margin-bottom: 24px;
}
.seo-hub h1 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--dark-blue);
  font-family: 'Orbitron', sans-serif;
}
.seo-hub header p {
  font-size: 16px;
  line-height: 1.5;
  color: #444;
  margin: 0;
}
.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.guide-list li {
  border-bottom: 1px solid #eee;
}
.guide-list li a {
  display: block;
  padding: 14px 0;
  color: var(--dark-blue);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}
.guide-list li a:hover {
  color: var(--primary-red);
}
.seo-cta-line {
  margin-top: 32px;
  text-align: center;
}

/* Tablet */
@media (min-width: 768px) {
  .seo-page,
  .seo-hub {
    padding: 24px;
  }
  .seo-hero h1,
  .seo-hub h1 {
    font-size: 36px;
  }
  .seo-hero .cta {
    width: auto;
    display: inline-block;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .seo-page,
  .seo-hub {
    padding: 32px 24px;
  }
  .seo-hero h1,
  .seo-hub h1 {
    font-size: 44px;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* =====================================================
   MOBILE RESPONSIVENESS PATCH (King 2026-07-08 20:07 UTC)
   Appended to public/css/app.css

   Three breakpoints:
     - 1024px max  (small tablet)
     - 768px max   (large tablet / small laptop)
     - 480px max   (mobile landscape)
     - 380px max   (mobile portrait)
   ===================================================== */

/* Generic container guard for all pages */
@media (max-width: 1024px) {
  main { max-width: 100%; }
  .container,
  .checkout-page,
  .admin-row,
  .device-grid-popular,
  .account-page .device-cards { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Tablet / phablet */
@media (max-width: 768px) {
  /* Site header — stack & shrink */
  .site-header {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
    gap: 8px;
  }
  .site-header .logo { text-align: center; font-size: 1.2rem; }
  .site-header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
  }
  .site-header nav a {
    margin-left: 0 !important;
    font-size: 0.95rem;
    padding: 6px 4px;
  }

  /* Main content padding */
  main { padding: 16px !important; }

  /* Hero — scale down */
  .hero,
  body > section.hero,
  section.hero {
    min-height: 480px !important;
    height: auto !important;
  }
  .hero-title {
    font-size: 2rem !important;
    letter-spacing: 1px !important;
    line-height: 1.1 !important;
  }
  .hero h1 { font-size: 1.8rem !important; }
  .hero-sub, .popular-sub { font-size: 0.95rem !important; padding: 0 8px; }
  .hero-overlay { padding: 60px 16px 32px !important; }
  .hero-actions { flex-direction: column !important; gap: 12px !important; }
  .hero-actions .cta { width: 100% !important; }

  /* Trust-card row → single column */
  .trust-row,
  .trust-cards,
  .info-row { grid-template-columns: 1fr !important; }

  /* Device cards → single column */
  .device-grid,
  .device-grid-popular {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .device-card { padding: 14px !important; }

  /* Forms — single column */
  .form-row--2, .form-row--3 { grid-template-columns: 1fr !important; gap: 4px !important; }
  .form-row { padding: 0 0 12px !important; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
    width: 100% !important; box-sizing: border-box;
  }

  /* Button spans full width */
  .cta, .cta--block, button.cta { width: 100% !important; box-sizing: border-box; }

  /* Status pills stay visible */
  .status-pill { font-size: 0.85rem !important; padding: 4px 10px !important; }

  /* Account timeline — single column */
  .timeline { padding-left: 0 !important; }
  .timeline li { padding-left: 16px !important; }

  /* Admin panel — single column */
  .admin-row { flex-direction: column !important; }
  .admin-card { margin: 0 0 12px !important; }

  /* FAQ details — stack */
  details summary { font-size: 1rem !important; }

  /* Carrier cards — single column */
  .carrier-cards { grid-template-columns: 1fr !important; }
  .carrier-card { padding: 12px !important; }

  /* Footer stack */
  .site-footer { padding: 16px 12px !important; font-size: 0.9rem; }
  .footer-badges { flex-direction: column !important; align-items: center !important; }

  /* Hide non-essential nav on mobile */
  .nav-fancy { display: none !important; }

  /* Booking page category headers — smaller */
  .device-category { padding: 14px !important; margin-top: 16px !important; }
  .device-category h2 { font-size: 1.2rem !important; margin-bottom: 8px !important; }
}

/* Phone landscape */
@media (max-width: 480px) {
  .hero { min-height: 380px !important; }
  .hero-title { font-size: 1.6rem !important; }
  .hero h1 { font-size: 1.6rem !important; }
  .hero-sub { font-size: 0.85rem !important; line-height: 1.4; }
  .cta { font-size: 0.95rem !important; padding: 14px 16px !important; }
  h1 { font-size: 1.6rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.3rem !important; line-height: 1.2 !important; }
  h3 { font-size: 1.1rem !important; }

  /* .booking form: drop step indicators to vertical */
  .step-indicator { gap: 4px !important; }
  .step-indicator .step { font-size: 0.8rem; padding: 4px 8px !important; }

  /* Map / large images */
  iframe, .embedded-pdf, .map { max-width: 100% !important; height: auto !important; }

  /* Tracking timeline → uses vertical stack only */
  .timeline-arrow { display: none !important; }

  /* Drop-off locations grid */
  .drop-off-list { grid-template-columns: 1fr !important; }
}

/* Phone portrait — keep readable, no horizontal scroll */
@media (max-width: 380px) {
  body { font-size: 15px; }
  .hero-title { font-size: 1.4rem !important; }
  .hero-overlay { padding: 40px 12px 24px !important; }
  .cta { padding: 12px !important; }
}

/* Image / media constraints on all sizes — never overflow horizontally */
img, video, iframe, embed, object { max-width: 100%; height: auto; }
.shipping-box, .device-pic, .hero svg, .agent-widget, .agent-bubble { max-width: 100%; }

/* Fix any fixed-width overflows */
html, body { overflow-x: hidden; }

/* ============ SEO HERO FIGURE ============ */
.seo-hero-figure { margin: 0; padding: 0; width: 100%; }
.seo-hero-figure img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  margin-top: 16px;
}