/*! ORC Design System - Colors, Typography, Components */

:root {
  --navy: #0d1f3c;
  --navy-mid: #162d54;
  --navy-light: #1e3d70;
  --red: #e8372a;
  --red-dark: #c42c20;
  --white: #ffffff;
  --off: #f4f6fa;
  --off2: #eceef5;
  --border: #dde1ec;
  --border-light: #eaecf4;
  --text: #0d1f3c;
  --text2: #445070;
  --text3: #8896b0;
  --green: #16a34a;
  --amber: #f59e0b;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Figtree', system-ui, sans-serif;
  background: var(--white);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

a {
  color: var(--red);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--red-dark);
}

button {
  font-family: 'Figtree', sans-serif;
  cursor: pointer;
}


.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo img {
  height: 36px;
  width: auto;
  display: block;
}

/* ── HERO ── */
.hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: 5rem 2rem;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), 
                    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(232, 55, 42, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
}

/* White card, sits on dark hero bg */
.hero-card {
  background: #fff;
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.12);
}

/* Input is transparent — wrapper provides the visual bg/border */
.hero-serial-input {
  width: 100%;
  padding: 13px 16px;
  padding-right: 52px;
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-variant-numeric: slashed-zero;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: none;
  border-radius: 12px;
  outline: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

/* Animated cycling placeholder — behind the input */
.serial-fake-placeholder {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  font-size: 15px;
  color: var(--text3);
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  z-index: 1;
}
.serial-example-cycle {
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-variant-numeric: slashed-zero;
  letter-spacing: 0.08em;
  transition: opacity 0.26s ease;
}

.hero-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0.9rem;
  flex-wrap: wrap;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text2);
}

.hero-trust-sep {
  color: var(--border);
  font-size: 12px;
}

/* ── SECTIONS ── */
.section {
  padding: 5rem 2rem;
}

.section-alt {
  background: var(--off);
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sec-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--navy);
  margin-bottom: 3rem;
  text-align: center;
}

/* ── FORM ELEMENTS ── */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232, 55, 42, 0.1);
}

.form-group.error input,
.form-group.error select {
  border-color: var(--red);
  background: rgba(232, 55, 42, 0.02);
}

.form-error {
  color: var(--red);
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text2);
}

.form-checkbox input {
  width: auto;
  cursor: pointer;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--red);
  color: #fff;
}

.btn-primary:hover {
  background: var(--red-dark);
}

.btn-secondary {
  background: var(--off);
  color: var(--navy);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--off2);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: #fff;
}

.btn-large {
  width: 100%;
  padding: 14px;
  font-size: 15px;
}

/* ── CARDS ── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: all 0.15s;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(13, 31, 60, 0.08);
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.card-desc {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
}


/* ── CHECKOUT PAGE ── */
.checkout-page {
  background: var(--off);
  min-height: calc(100vh - 128px);
  padding: 3rem 2rem;
}
.checkout-inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2.5rem;
  align-items: start;
}
.checkout-tp-mobile-strip { display: none; }
@media(max-width:860px) {
  .checkout-inner { grid-template-columns: 1fr; }
  .checkout-tp-mobile-strip { display: flex; justify-content: center; padding: 1rem 0; }
  .checkout-trust-tp { display: none; }
  .checkout-trust-list { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
}
.checkout-left {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
}
.checkout-back { margin-bottom: 1.5rem; }
.checkout-back-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
  text-decoration: none;
  transition: color 0.15s;
}
.checkout-back-link:hover { color: var(--navy); }
.checkout-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}
.checkout-brand-icon {
  width: 60px; height: 44px;
  background: #f5f7fa;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 6px 8px;
}
.checkout-brand-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.checkout-brand-name { font-size: 15px; font-weight: 700; color: var(--navy); }
.checkout-brand-serial { font-size: 12px; color: var(--text3); margin-top: 2px; }
.checkout-brand-serial span { font-family: 'Menlo','Consolas','Courier New',monospace; font-variant-numeric: slashed-zero; font-weight: 600; color: var(--navy); }
.checkout-brand-right { display: flex; flex-direction: column; align-items: flex-end; padding-left: 12px; flex-shrink: 0; }
.checkout-brand-price { font-size: 18px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.checkout-brand-delivery { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text2); margin-top: 4px; white-space: nowrap; }

.checkout-h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  color: var(--navy);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.checkout-sub { font-size: 14px; color: var(--text3); margin-bottom: 1.75rem; }

/* SMS Upsell */
.sms-upsell-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.sms-upsell-card.active {
  border-color: var(--navy);
  background: rgba(13,31,60,0.02);
}
.sms-upsell-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.sms-checkbox { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.sms-upsell-content { flex: 1; }
.sms-upsell-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}
.sms-upsell-desc { font-size: 12.5px; color: var(--text2); }

/* Payment section */
.payment-section { margin-top: 0.5rem; }
.payment-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 0.75rem;
}
.btn-pay {
  width: 100%;
  padding: 14px;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0;
}
.btn-pay:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-pay-stripe { background: var(--red); color: #fff; }
.btn-pay-stripe:hover { background: var(--red-dark); }
.payment-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 12px;
  color: var(--text3);
}
.payment-divider::before, .payment-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-light);
}
.paypal-btn-wrap { min-height: 46px; }
.payment-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text3);
  margin-top: 1rem;
  text-align: center;
}

/* Checkout aside */
.checkout-aside { position: sticky; top: 80px; }
.checkout-trust-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  height: 100%;
  box-sizing: border-box;
}
.checkout-trust-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.checkout-trust-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-light);
}
.checkout-trust-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text2);
}
.checkout-trust-list strong { display: block; color: var(--navy); margin-bottom: 2px; font-size: 13px; }
.checkout-trust-list p { margin: 0; line-height: 1.5; }
.checkout-trust-icon {
  width: 28px; height: 28px;
  background: rgba(22,163,74,0.08);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.checkout-tp-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text3);
}
.checkout-tp-strip strong { color: var(--navy); }

.checkout-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 1.5rem 0 0.75rem;
}

/* Legacy container kept for old views */
.checkout-container {
  max-width: 600px;
  margin: 3rem auto;
  padding: 0 2rem;
}

.order-summary {
  background: var(--off);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 14px;
}

.summary-row.total {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  font-weight: 600;
  font-size: 16px;
}

/* ── ORDER PAGE ── */
.order-container {
  max-width: 600px;
  margin: 3rem auto;
  padding: 0 2rem;
}

.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.status-paid {
  background: rgba(22, 163, 74, 0.1);
  color: var(--green);
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-fulfilled {
  background: rgba(22, 163, 74, 0.1);
  color: var(--green);
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.code-box {
  background: var(--navy);
  color: #fff;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  margin: 2rem 0;
}

.code-box-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.code-value {
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace; font-variant-numeric: slashed-zero;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ── FOOTER ── */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.6);
  padding: 3rem 2rem 1rem;
  font-size: 12px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer-section a {
  display: block;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-section a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  text-align: center;
}

/* ── UTILITY ── */
.text-center {
  text-align: center;
}

.text-sm {
  font-size: 12px;
}

.text-muted {
  color: var(--text3);
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

/* ── HERO EXTRAS ── */
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}
.hero-label-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0;
}
.hero-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.hero-stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: #fff;
  line-height: 1;
}
.hero-stat-lbl {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 3px;
  font-weight: 500;
}
.hero-stat-sep {
  width: 1px; height: 36px; background: rgba(255,255,255,0.1); flex-shrink: 0;
}
.hero-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.hero-card-sub {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 1.25rem;
}
.hero-card-divider {
  height: 1px;
  background: var(--border-light);
  margin: 1.25rem 0;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── HOW IT WORKS ── */
.sec-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}
.sec-sub {
  font-size: 16px;
  color: var(--text2);
  max-width: 540px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media(max-width:768px) { .hiw-grid { grid-template-columns: 1fr; } }
.hiw-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
}
.hiw-num {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  color: var(--off2);
  line-height: 1;
  margin-bottom: 1rem;
}
.hiw-icon-wrap {
  margin-bottom: 1rem;
}
.hiw-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.hiw-desc {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.65;
}

/* ── BRANDS GRID ── */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.brand-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.15s;
  gap: 0.4rem;
}
.brand-card:hover {
  border-color: var(--red);
  box-shadow: 0 4px 16px rgba(232,55,42,0.1);
  transform: translateY(-2px);
}
.brand-card-icon {
  width: 48px; height: 48px;
  background: var(--off);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.25rem;
}
.brand-card-initial {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
}
.brand-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.brand-card-models {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.4;
}
.brand-card-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  margin-top: 4px;
}

/* ── WHY GRID ── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media(max-width:640px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
}
.why-icon {
  width: 44px; height: 44px;
  background: rgba(232,55,42,0.08);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.why-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.why-desc {
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.65;
}

/* ── TRUSTPILOT STRIP ── */
.tp-strip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.tp-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700; color: var(--navy);
}
.tp-name { font-size: 18px; font-weight: 700; color: var(--navy); }
.tp-rating {
  display: flex; align-items: center; gap: 10px;
}
.tp-stars { display: flex; gap: 3px; }

/* ── FAQ ── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.faq-list .faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-list .faq-item:last-child { border-bottom: none; }
.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.faq-toggle:hover { background: var(--off); }
.faq-chevron {
  flex-shrink: 0;
  color: var(--text3);
  transition: transform 0.25s;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 300px; }
.faq-answer p {
  padding: 0 1.5rem 1.25rem;
  font-size: 14px;
  color: var(--text2);
  line-height: 1.7;
}

.product-delivery-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  margin-bottom: 1rem;
}

/* ── PRODUCT PAGE LAYOUT ── */
.product-hero {
  background: var(--navy);
  padding: 3.5rem 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.product-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
}
.product-hero::after {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 60%; height: 120%;
  background: radial-gradient(ellipse,rgba(232,55,42,0.1) 0%,transparent 60%);
  z-index: 0;
}
/* Full-bleed hero background image — controlled size via object-fit */
.product-hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
  display: block;
}
.product-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3.5rem;
  align-items: center;
}
@media (max-width: 900px) {
  .product-hero-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .product-hero {
    padding: 2.25rem 1.25rem;
    align-items: flex-start;
  }
  /* Features duplicated by trust row in the form card below — hide on mobile */
  .product-hero-features { display: none; }
  .product-hero > .product-hero-inner > div:first-child p { margin-bottom: 0; }
  .product-form-card {
    padding: 1.5rem 1.25rem;
  }
  .product-form-header { margin-bottom: 1.1rem; }
}
@media (max-width: 480px) {
  .product-hero { padding: 2rem 1rem; }
  .product-form-card { padding: 1.25rem 1rem; border-radius: 16px; }
}

/* Offset anchor targets by sticky nav height (64px + small breathing room) */
#product-form,
#how-to-find,
#serial-examples,
#reviews {
  scroll-margin-top: 80px;
}
.product-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(26px,3.5vw,40px);
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 0.75rem;
}
.product-hero h1 em { font-style: italic; color: rgba(255,255,255,0.38); }
.product-hero p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  max-width: 480px;
  margin-bottom: 1.25rem;
}
.product-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 0.5rem;
}
.product-hero-features {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.product-hero-feature {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
}
.product-hero-price-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.product-hero-price {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  color: #fff;
  line-height: 1;
}
.product-hero-delivery {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.product-form-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  align-self: center;
}
.product-form-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}
.product-form-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 3px;
}
.product-form-sub {
  font-size: 13px;
  color: var(--text3);
}
.product-trust-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
}
@media (max-width: 480px) {
  .product-trust-row { flex-wrap: wrap; gap: 0.5rem; row-gap: 0.5rem; }
}
.product-trust-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
  white-space: nowrap;
}

/* ── SERIAL GUIDE ── */
.serial-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media(max-width:768px) { .serial-guide-grid { grid-template-columns: 1fr; } }

/* ── WHY STRIP ── */
.why-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media(max-width:900px) { .why-strip { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:480px) { .why-strip { grid-template-columns: 1fr; } }
.why-strip-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 0.35rem 0.85rem;
  align-items: start;
}
.why-strip-icon {
  width: 44px; height: 44px;
  background: var(--off);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  grid-row: 1; grid-column: 1;
}
.why-strip-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  grid-row: 1; grid-column: 2;
  align-self: center;
}
.why-strip-desc {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.5;
  grid-row: 2; grid-column: 1 / -1;
}

/* ── PRODUCT CTA BANNER ── */
.product-cta-banner {
  background: var(--navy);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  color: #fff;
}
.product-cta-banner h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  margin-bottom: 0.6rem;
}
.product-cta-banner p {
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.5rem;
  font-size: 15px;
}
.product-cta-banner .btn {
  background: var(--red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.product-cta-banner .btn:hover { background: var(--red-dark); }

/* ── BREADCRUMB ── */
.breadcrumb {
  font-size: 12px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb a {
  color: var(--text3);
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb span { color: var(--border); }

@media (max-width: 768px) {
  .section {
    padding: 3rem 1.5rem;
  }
  .hero-inner {
    padding: 3rem 0;
  }
  .brands-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════ */
.topbar {
  background: var(--navy);
  padding: 8px 0;
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
  overflow: hidden;
}
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.topbar-item strong { color: #fff; }

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
}
.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-right { justify-content: flex-end; }
.nav-logo:hover { opacity: 0.85; }

/* Burger button */
.nav-burger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}
.nav-burger:hover { background: var(--off); }
.nav-burger-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.nav-burger-icon span {
  display: block;
  height: 1.5px;
  background: var(--navy);
  border-radius: 2px;
  transition: all 0.2s;
}
.nav-burger-label { font-size: 13px; }

/* Contact beacons group */
.nav-contacts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.nav-action {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.nav-action:hover { background: var(--off); color: var(--navy); }
.nav-action-label { font-size: 12px; }

/* Status beacon dot */
.nav-beacon-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-beacon-dot--on {
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22,163,74,0.5);
  animation: nav-beacon-pulse 2.5s ease-in-out infinite;
}
.nav-beacon-dot--off { background: #ef4444; }
@keyframes nav-beacon-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
  60%  { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ═══════════════════════════════════════════════════════════
   SLIDE-OUT MENU
   ═══════════════════════════════════════════════════════════ */
.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 300;
  backdrop-filter: blur(2px);
}
.menu-overlay.open { display: block; }

.menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 90vw;
  background: #fff;
  z-index: 400;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 32px rgba(0,0,0,0.12);
}
.menu-panel.open { transform: translateX(0); }

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.menu-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text2);
  border-radius: 8px;
  transition: background 0.15s;
  display: flex;
  align-items: center;
}
.menu-close:hover { background: var(--off); }

.menu-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 0.75rem;
  color: var(--navy);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  border-radius: 10px;
  transition: background 0.15s;
}
.menu-link:hover { background: var(--off); }
.menu-link svg { flex-shrink: 0; color: var(--text2); }
.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 0.75rem;
}

.menu-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}
.menu-footer-tp {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text2);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.menu-footer-tp:hover { color: var(--navy); }
.menu-footer-info {
  font-size: 11px;
  color: var(--text3);
}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT LAYOUT (minimal header/footer)
   ═══════════════════════════════════════════════════════════ */
.checkout-body { background: var(--off); }

.checkout-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  height: 60px;
  display: flex;
  align-items: center;
}
.checkout-nav-inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkout-nav-logo img { display: block; }

.checkout-footer {
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 1.25rem 1.5rem;
  margin-top: 3rem;
}
.checkout-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.checkout-footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 12px;
  color: var(--text3);
}
.checkout-footer-trust span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.checkout-footer-legal {
  font-size: 11.5px;
  color: var(--text3);
}
.checkout-footer-legal a {
  color: var(--text3);
  text-decoration: none;
}
.checkout-footer-legal a:hover { color: var(--navy); }

/* ═══════════════════════════════════════════════════════════
   CHECKOUT PAGE
   ═══════════════════════════════════════════════════════════ */
.checkout-page {
  min-height: 60vh;
  padding: 2rem 1.5rem 4rem;
  background: var(--off);
}
.checkout-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}
.checkout-left {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 2rem;
}
.checkout-ready-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #16a34a;
  margin-bottom: 1.25rem;
}
.checkout-email-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--off);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  margin-bottom: 1.25rem;
}
.checkout-email-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkout-email-badge svg { flex-shrink: 0; color: var(--text3); }
.checkout-edit-btn {
  background: none;
  border: none;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 0;
  text-decoration: underline;
}
.checkout-edit-btn:hover { color: var(--red-dark); }

.checkout-back { margin-bottom: 1.25rem; }
.checkout-back-link {
  font-size: 13px;
  color: var(--text3);
  text-decoration: none;
  transition: color 0.15s;
}
.checkout-back-link:hover { color: var(--navy); }

.checkout-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.checkout-brand-icon {
  width: 56px;
  height: 44px;
  border-radius: 10px;
  background: #f5f7fa;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 6px 8px;
}
.checkout-brand-icon--fallback {
  background: var(--navy);
  color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: 15px;
  font-weight: 700;
  padding: 0;
}
.checkout-brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.checkout-brand-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 2px;
}
.checkout-brand-serial {
  font-size: 12.5px;
  color: var(--text2);
}
.checkout-brand-serial span {
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace; font-variant-numeric: slashed-zero;
  font-weight: 600;
  color: var(--navy);
}

.checkout-h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.checkout-sub {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 1.75rem;
}

.checkout-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}

/* SMS upsell */
.sms-upsell-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s;
  cursor: pointer;
}
.sms-upsell-card.active { border-color: var(--green); }
.sms-upsell-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  width: 100%;
}
.sms-checkbox {
  margin-top: 3px;
  width: 15px;
  height: 15px;
  accent-color: var(--green);
  flex-shrink: 0;
  cursor: pointer;
}
.sms-upsell-content { flex: 1; }
.sms-upsell-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}
.sms-upsell-desc { font-size: 12.5px; color: var(--text2); }

/* Phone input with prefix */
.phone-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s;
}
.phone-input-wrap:focus-within { border-color: var(--red); }
.phone-prefix {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  background: var(--off);
  border-right: 1.5px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.phone-input-wrap input[type="tel"] {
  flex: 1;
  padding: 11px 12px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--navy);
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-variant-numeric: slashed-zero;
  letter-spacing: 0.04em;
  min-width: 0;
}

/* Order summary */
.order-summary {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  font-size: 14px;
  color: var(--text2);
  border-bottom: 1px solid var(--off);
}
.summary-row:last-child { border-bottom: none; }
.summary-row.total {
  font-size: 15px;
  color: var(--navy);
  font-weight: 600;
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
}

/* Pay button */
.btn-pay {
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.01em;
}
.btn-pay:active { transform: scale(0.99); }
.btn-pay:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-pay-stripe {
  background: var(--red);
  color: #fff;
}
.btn-pay-stripe:hover:not(:disabled) { background: var(--red-dark); }

.payment-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1.25rem 0;
  color: var(--text3);
  font-size: 12px;
}
.payment-divider::before,
.payment-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.paypal-btn-wrap { margin-bottom: 1rem; }

.payment-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text3);
  margin-top: 0.75rem;
}

/* Checkout aside */
.checkout-aside { position: sticky; top: 80px; }
.checkout-trust-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  height: 100%;
  box-sizing: border-box;
}
.checkout-trust-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 1.1rem;
}
.checkout-trust-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.checkout-trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text2);
}
.checkout-trust-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.checkout-trust-list strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}
.checkout-trust-list p { margin: 0; line-height: 1.45; }
.checkout-tp-strip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.75rem;
  background: #f6fff9;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text2);
  border: 1px solid #bbf7d0;
}

.form-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--red);
}

/* ═══════════════════════════════════════════════════════════
   ORDER CONFIRMATION PAGE
   ═══════════════════════════════════════════════════════════ */
.order-page {
  min-height: 60vh;
  padding: 3rem 1.5rem 5rem;
  background: var(--off);
}
.order-inner {
  max-width: 560px;
  margin: 0 auto;
}
.order-success-header {
  text-align: center;
  margin-bottom: 2rem;
}
.order-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f0fdf4;
  border: 2px solid #86efac;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.order-success-title {
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.order-success-sub {
  font-size: 15px;
  color: var(--text2);
  line-height: 1.55;
}
.order-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.order-card-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text3);
  margin-bottom: 1rem;
}
.order-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0;
  font-size: 14px;
  border-bottom: 1px solid var(--off2);
}
.order-detail-row:last-child { border-bottom: none; }
.order-detail-label { color: var(--text2); }
.order-detail-value { font-weight: 600; color: var(--navy); }
.order-code-box {
  background: var(--navy);
  border-radius: 14px;
  padding: 1.75rem;
  text-align: center;
  margin-bottom: 1.25rem;
}
.order-code-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.6rem;
}
.order-code-value {
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace; font-variant-numeric: slashed-zero;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fff;
  word-break: break-all;
}
.order-processing-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #d97706;
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.25rem;
  text-align: center;
  margin-bottom: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.order-processing-title {
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
  margin-bottom: 0.35rem;
}
.order-processing-sub {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
}
.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.order-status-badge.paid {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.order-status-badge.pending {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

/* Order page — state pills */
.order-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.order-state-pill--ready {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #86efac;
}
.order-state-pill--decoding {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* Brand name display */
.order-brand-name {
  font-family: 'DM Serif Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

/* Serial shown inside the code box */
.order-code-serial {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 0.6rem;
  letter-spacing: 0.05em;
}

/* Screenshot / email notes */
.order-note {
  font-size: 13px;
  color: var(--text2);
  text-align: center;
  line-height: 1.55;
  margin-bottom: 0.75rem;
}
.order-note strong { color: var(--navy); }

/* Support card */
.order-support-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  margin-bottom: 1.25rem;
}
.order-support-card p {
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 0.85rem;
}
.order-support-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.order-support-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.order-support-links a:hover { text-decoration: underline; }
.order-support-sep { color: var(--border); }

/* Decoding spinner */
.order-decoding-spinner {
  width: 36px;
  height: 36px;
  border: 2.5px solid #fde68a;
  border-top-color: #d97706;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Checkout responsive */
@media (max-width: 768px) {
  .checkout-inner {
    grid-template-columns: 1fr;
  }
  .checkout-aside {
    position: static;
  }
  .checkout-left, .checkout-trust-card {
    border-radius: 16px;
    padding: 1.5rem;
  }
  .checkout-footer-trust { gap: 0.75rem; }
  .nav-action-label, .nav-burger-label { display: none; }
  .nav-contacts { display: none; }
  .nav-left, .nav-right { min-width: auto; }
  .order-code-value { font-size: 28px; }
}

/* ─────────────────────────────────────────
   SHARED UTILITY
───────────────────────────────────────── */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 600px) {
  .wrap { padding: 0 1.25rem; }
}
.sec-h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -0.5px;
  color: var(--navy);
  margin-bottom: 0.6rem;
  line-height: 1.12;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────
   HELP CENTRE PAGE
───────────────────────────────────────── */
.help-hero {
  background: var(--navy);
  padding: 4rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.help-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.help-hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(232,55,42,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.help-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.help-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(32px, 4vw, 52px);
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.08;
  margin-bottom: 0.75rem;
}
.help-hero p {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.help-search {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}
.help-search input {
  width: 100%;
  padding: 15px 18px 15px 48px;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  background: #fff;
  border: 2px solid transparent;
  border-radius: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.help-search input:focus { border-color: var(--red); }
.help-search input::placeholder { color: #aab; }
.help-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  pointer-events: none;
}
.help-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}
.help-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.help-stat strong { color: rgba(255,255,255,0.7); }

/* Category cards */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: -2.5rem;
  position: relative;
  z-index: 2;
  margin-bottom: 3rem;
}
.cat-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  text-decoration: none;
  transition: all 0.2s;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
}
.cat-card:hover {
  border-color: var(--navy);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(13,31,60,0.08);
}
.cat-card.active {
  border-color: var(--red);
  box-shadow: 0 4px 20px rgba(232,55,42,0.1);
}
.cat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--off2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-card.active .cat-icon {
  background: rgba(232,55,42,0.1);
  border-color: rgba(232,55,42,0.2);
}
.cat-title { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.cat-count { font-size: 12px; color: var(--text3); }

/* FAQ accordion */
.faq-section { margin-bottom: 3rem; }
.faq-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.faq-item:hover { box-shadow: 0 4px 16px rgba(13,31,60,0.05); }
.faq-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 1.15rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  text-align: left;
  font-family: 'Figtree', sans-serif;
}
.faq-toggle:hover { background: var(--off); }
.faq-q { font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.4; }
.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.25s;
  color: var(--text3);
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-a { padding: 0 1.5rem 1.25rem; font-size: 14px; color: var(--text2); line-height: 1.75; }
.faq-a ul { margin: 0.5rem 0 0 1.25rem; display: flex; flex-direction: column; gap: 4px; }
.faq-a li { line-height: 1.6; }
.faq-a strong { color: var(--navy); }

/* Help contact CTA */
.help-contact {
  background: var(--navy);
  border-radius: 24px;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  margin: 3rem 0;
}
.help-contact-text h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 0.5rem;
}
.help-contact-text p { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.7; }
.help-contact-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.help-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.help-contact-btn.primary { background: var(--red); color: #fff; }
.help-contact-btn.primary:hover { background: var(--red-dark); }
.help-contact-btn.secondary {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}
.help-contact-btn.secondary:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Help Centre responsive */
@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .help-contact { grid-template-columns: 1fr; text-align: center; }
  .help-contact-actions { justify-content: center; }
}
@media (max-width: 600px) {
  .help-hero { padding: 2.5rem 0 4rem; }
  .help-hero h1 { font-size: 28px; }
  .help-search input { padding: 13px 16px 13px 44px; font-size: 16px; }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: -2rem; }
  .cat-card { padding: 1rem; gap: 10px; }
  .cat-icon { width: 36px; height: 36px; border-radius: 9px; }
  .cat-title { font-size: 13px; }
  .cat-count { font-size: 11px; }
  .faq-toggle { padding: 1rem 1.25rem; }
  .faq-q { font-size: 14px; }
  .faq-a { padding: 0 1.25rem 1rem; font-size: 13px; }
  .help-contact { padding: 2rem 1.5rem; border-radius: 18px; margin: 2rem 0; }
  .help-contact-text h3 { font-size: 22px; }
  .help-contact-btn { padding: 11px 18px; font-size: 13px; }
}

/* ─────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────── */
.about-hero {
  background: var(--navy);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.about-hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(232,55,42,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.about-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.about-hero-text { max-width: 520px; }
.about-hero-text .sec-eyebrow { color: rgba(255,255,255,0.35); }
.about-hero-text h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(32px, 4vw, 52px);
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.08;
  margin-bottom: 1rem;
}
.about-hero-text h1 em { font-style: italic; color: rgba(255,255,255,0.4); }
.about-hero-text p { font-size: 17px; color: rgba(255,255,255,0.5); line-height: 1.75; margin-bottom: 1.5rem; }
.about-hero-stats { display: flex; gap: 2rem; flex-wrap: wrap; }
.about-hero-stat { text-align: center; }
.about-hero-stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: 32px;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
}
.about-hero-stat-lbl { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 3px; }
.about-hero-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.about-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.about-hero-img .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,31,60,0.3) 0%, rgba(13,31,60,0.1) 100%);
}

/* Story section */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.story-content p { font-size: 16px; color: var(--text2); line-height: 1.8; margin-bottom: 1.25rem; }
.story-pain { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
.story-pain-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.85rem 1.25rem;
  background: var(--off);
  border-radius: 12px;
  border: 1px solid var(--border-light);
}
.story-pain-item svg { flex-shrink: 0; color: var(--red); }
.story-pain-item span { font-size: 14px; font-weight: 600; color: var(--navy); }
.story-img { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.story-img img { width: 100%; height: 100%; object-fit: cover; }

/* Timeline */
.timeline { position: relative; max-width: 700px; margin: 0 auto; }
.timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.tl-item { position: relative; padding-left: 64px; padding-bottom: 2.5rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  left: 16px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.tl-dot-inner { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.tl-item:first-child .tl-dot { border-color: var(--red); }
.tl-year { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--red); margin-bottom: 0.25rem; }
.tl-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 0.35rem; }
.tl-desc { font-size: 14px; color: var(--text2); line-height: 1.7; }

/* Values grid */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.value-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(13,31,60,0.08); }
.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
}
.value-icon {
  width: 48px;
  height: 48px;
  background: var(--off2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.value-title { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; }
.value-desc { font-size: 14px; color: var(--text2); line-height: 1.7; }

/* Why locked section */
.locked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.locked-reasons { display: flex; flex-direction: column; gap: 1rem; }
.locked-reason { display: flex; gap: 1rem; align-items: flex-start; }
.locked-reason-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--off2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.locked-reason-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 0.15rem; }
.locked-reason-desc { font-size: 14px; color: var(--text2); line-height: 1.65; }
.locked-callout {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(232,55,42,0.06);
  border: 1px solid rgba(232,55,42,0.15);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* About CTA */
.about-cta {
  background: var(--navy);
  border-radius: 24px;
  padding: 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 0 3rem;
}
.about-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
}
.about-cta h3 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(24px, 3vw, 36px);
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 0.5rem;
  position: relative;
}
.about-cta p { font-size: 15px; color: rgba(255,255,255,0.45); margin-bottom: 2rem; position: relative; }
.about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--red);
  transition: all 0.15s;
  position: relative;
}
.about-cta-btn:hover { background: var(--red-dark); transform: translateY(-1px); }

/* ── Checkout loading screen ── */
@keyframes orc-spin {
  to { transform: rotate(360deg); }
}
.checkout-loading {
  padding: 3rem 0 2rem;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.checkout-searching {
  font-size: 16px;
  color: var(--text2);
  margin-bottom: 1.75rem;
  font-weight: 500;
}
.checkout-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: orc-spin 0.75s linear infinite;
  margin: 0 auto;
}
.checkout-step-fade {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.checkout-step-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* About responsive */
@media (max-width: 900px) {
  .about-hero-inner { grid-template-columns: 1fr; }
  .about-hero-img { display: none; }
  .story-grid { grid-template-columns: 1fr; }
  .story-img { order: -1; }
  .locked-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .about-hero { padding: 3rem 0; }
  .about-hero-text h1 { font-size: 28px; }
  .about-hero-stats { gap: 1.5rem; }
  .about-hero-stat-val { font-size: 26px; }
  .timeline::before { left: 16px; }
  .tl-item { padding-left: 48px; }
  .tl-dot { left: 8px; width: 16px; height: 16px; }
  .tl-dot-inner { width: 6px; height: 6px; }
  .about-cta { padding: 2rem 1.5rem; border-radius: 18px; }
}

/* ══════════════════════════════════════════════════
   HOMEPAGE v2 — new components
   ══════════════════════════════════════════════════ */

/* ── Hero left (replaces hero-content) ── */
.hero-bg { position:absolute;inset:0;z-index:0;overflow:hidden }
.hero-bg img { width:100%;height:100%;object-fit:cover;display:block }
.hero-bg-overlay { position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,31,60,0.55) 0%,rgba(13,31,60,0.35) 40%,rgba(13,31,60,0.2) 100%) }
.hero-left > * { animation: fadein-up 0.6s ease both }
.hero-left > *:nth-child(1){animation-delay:.05s}
.hero-left > *:nth-child(2){animation-delay:.12s}
.hero-left > *:nth-child(3){animation-delay:.19s}
.hero-left > *:nth-child(4){animation-delay:.26s}
.hero-left > *:nth-child(5){animation-delay:.33s}
@keyframes fadein-up { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* ── Hero how-links ── */
.hero-how-links { display:flex;align-items:center;gap:10px;margin-bottom:2.5rem }
.hero-how-link { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.15s }
.hero-how-link:hover { color:rgba(255,255,255,0.75) }
.hero-how-sep { color:rgba(255,255,255,0.15) }

/* ── Hero live bar (white card) ── */
.hero-live-bar { display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--text2);background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:8px 14px;margin-bottom:1.25rem }
.hero-live-bar strong { color:var(--green) }
.hero-live-dot { width:7px;height:7px;border-radius:50%;background:#16a34a;animation:pulse 2s ease-in-out infinite;flex-shrink:0 }

/* ── Hero serial help link ── */
.hero-serial-help { display:block;text-align:center;font-size:12.5px;font-weight:500;color:var(--text3);text-decoration:underline;text-underline-offset:2px;margin-top:0.75rem;transition:color 0.15s }
.hero-serial-help:hover { color:var(--navy) }

/* ── Brand scroll strip ── */
.brand-strip { background:var(--off);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);padding:1.1rem 0;overflow:hidden }
.brand-scroll { display:flex;animation:scroll-brands 35s linear infinite }
.brand-scroll:hover { animation-play-state:paused }
.brand-scroll-inner { display:flex;gap:2.5rem;align-items:center;padding:0 1.25rem;flex-shrink:0 }
@keyframes scroll-brands { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.brand-strip-item { display:flex;align-items:center;padding:4px 10px;text-decoration:none;border-radius:8px;transition:all 0.2s }
.brand-strip-item img { height:22px;width:auto;opacity:0.3;transition:all 0.2s;filter:grayscale(1) }
.brand-strip-item:hover img { opacity:0.65;transform:scale(1.05);filter:grayscale(0) }

/* ── HIW photo with code float ── */
.hiw-photo { position:relative;border-radius:20px;overflow:hidden;margin-bottom:2rem;height:280px }
.hiw-photo img { width:100%;height:100%;object-fit:cover;display:block }
.hiw-photo-overlay { position:absolute;inset:0;background:linear-gradient(to right,rgba(13,31,60,0.88) 0%,rgba(13,31,60,0.3) 60%,transparent 100%) }
.hiw-code-float { position:absolute;left:2rem;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.08);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.15);border-radius:16px;padding:1.25rem 1.5rem }
.hiw-code-label { font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:6px }
.hiw-code-digits { font-family:'Menlo','Consolas','Courier New',monospace;font-variant-numeric:slashed-zero;font-size:36px;font-weight:900;color:white;letter-spacing:8px;line-height:1 }
.hiw-code-status { display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#4ade80;margin-top:7px }

/* ── Brands section intro row ── */
.brands-intro { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2.5rem;gap:1rem;flex-wrap:wrap }
.brands-see-all { display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;border:1.5px solid var(--navy);padding:11px 22px;border-radius:100px;transition:background 0.15s,color 0.15s;white-space:nowrap;background:#fff }
.brands-see-all:hover { background:var(--navy);color:#fff }
.brands-see-all svg { transition:filter 0.15s }
.brands-see-all:hover svg { filter:brightness(0) invert(1) }
.brand-logo-wrap { width:56px;height:48px;display:flex;align-items:center;justify-content:center }
.brand-logo-wrap img { max-width:52px;max-height:38px;object-fit:contain }

/* ── Why choose us — 2-col ── */
.why-grid-v2 { display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center }
.why-visual { position:relative }
.why-tp-bar { display:flex;align-items:center;gap:1.25rem;background:var(--navy);border-radius:16px;padding:1.1rem 1.5rem;margin-bottom:1rem }
.why-tp-score { font-family:'DM Serif Display',serif;font-size:42px;color:white;line-height:1;letter-spacing:-2px;flex-shrink:0 }
.why-tp-meta { font-size:12.5px;color:rgba(255,255,255,0.5);font-weight:500 }
.why-tp-meta strong { color:rgba(255,255,255,0.85) }
.why-visual-img { position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3 }
.why-visual-img img { width:100%;height:100%;object-fit:cover;display:block }
.why-visual-img .overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(13,31,60,0.92) 0%,rgba(13,31,60,0.3) 55%,transparent 100%) }
.why-stats-grid { position:absolute;bottom:1.5rem;left:1.5rem;right:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:8px }
.why-stat-box { background:rgba(255,255,255,0.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:.9rem 1rem }
.why-stat-box-val { font-family:'DM Serif Display',serif;font-size:26px;color:white;line-height:1;letter-spacing:-0.5px }
.why-stat-box-lbl { font-size:11px;color:rgba(255,255,255,0.5);font-weight:500;margin-top:3px }
.why-float { position:absolute;top:1rem;left:1rem;z-index:2;background:#fff;border-radius:14px;padding:.85rem 1.1rem;box-shadow:0 6px 24px rgba(13,31,60,0.18);display:flex;align-items:center;gap:10px }
.why-float-icon { width:34px;height:34px;background:#f0fdf4;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.why-float-text { font-size:13px;font-weight:700;color:var(--navy) }
.why-float-sub { font-size:11px;color:var(--text3) }
.why-list { list-style:none;display:flex;flex-direction:column;gap:1.25rem }
.why-item { display:flex;gap:1rem;align-items:flex-start }
.why-item-icon { width:44px;height:44px;border-radius:12px;background:var(--off2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px }
.why-item-title { font-size:15px;font-weight:700;color:var(--navy);margin-bottom:.25rem }
.why-item-desc { font-size:14px;color:var(--text2);line-height:1.65 }


/* ── FAQ 2-col grid (homepage) ── */
.faq-grid { display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:960px }
.faq-grid .faq-item { align-self:start }

/* ── CTA section ── */
.cta-section { background:var(--navy);padding:6rem 0;position:relative;overflow:hidden }
.cta-section::before { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:48px 48px }
.cta-section::after { content:'';position:absolute;bottom:-30%;left:50%;transform:translateX(-50%);width:80%;height:100%;background:radial-gradient(ellipse,rgba(232,55,42,0.08) 0%,transparent 60%);pointer-events:none }
.cta-inner { position:relative;z-index:1;text-align:center;max-width:700px;margin:0 auto }
.cta-h2 { font-family:'DM Serif Display',serif;font-size:clamp(28px,4vw,52px);color:#fff;letter-spacing:-1px;line-height:1.08;margin-bottom:.75rem }
.cta-h2 em { font-style:italic;color:rgba(255,255,255,0.4) }
.cta-sub { font-size:16px;color:rgba(255,255,255,0.45);margin-bottom:2.5rem;line-height:1.7 }
.cta-note { font-size:12px;color:rgba(255,255,255,0.25) }

/* ── Trusted by strip ── */
.trusted { padding:2.5rem 0;background:var(--navy) }
.trusted-inner { display:flex;align-items:center;gap:3rem;flex-wrap:wrap;justify-content:center }
.trusted-lbl { font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.3);flex-shrink:0 }
.trusted-logos { display:flex;gap:2.5rem;align-items:center;flex-wrap:wrap;justify-content:center }
.trusted-logo { height:20px;width:auto;opacity:0.4;filter:brightness(0) invert(1);transition:opacity 0.2s }
.trusted-logo:hover { opacity:0.7 }

/* ── Mobile sticky CTA ── */
.mobile-cta-bar { position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);border-top:1px solid var(--border);padding:10px 1rem;display:none;gap:8px;align-items:center;transform:translateY(100%);transition:transform 0.3s ease }
.mobile-cta-bar.visible { transform:translateY(0) }
.mobile-cta-bar a.mobile-cta-link { flex:1;text-align:center;font-family:'Figtree',sans-serif;font-size:14px;font-weight:700;color:#fff;background:var(--red);padding:13px 16px;border-radius:10px;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px }
.mobile-cta-bar .mobile-cta-phone { flex:0 0 auto;width:46px;height:46px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;transition:background 0.15s }
.mobile-cta-bar .mobile-cta-phone:hover { background:var(--navy-mid) }

/* ── Homepage responsive ── */
@media (max-width:1000px) {
  .why-grid-v2 { grid-template-columns:1fr;gap:2.5rem }
  .why-visual { order:-1 }
  .faq-grid { grid-template-columns:1fr }
}
@media (max-width:768px) {
  .hiw-photo { height:200px;border-radius:14px }
  .hiw-code-float { left:1rem;padding:1rem;border-radius:12px }
  .hiw-code-digits { font-size:28px;letter-spacing:6px }
  .brand-search-grid { gap:6px }
  .brand-btn { padding:8px 4px }
  .brand-btn img { height:18px }
  .brand-name { font-size:10px }
  .hero-live-bar { font-size:11px;padding:7px 10px;border-radius:8px }
  .hero-how-links { display:none }
  .cta-section { padding:3.5rem 0 }
  .cta-h2 { font-size:28px }
  .cta-form { flex-direction:column;gap:8px }
  .cta-input { padding:14px 16px;font-size:16px;border-radius:10px }
  .cta-btn { padding:14px;font-size:15px;border-radius:10px }
  .trusted { padding:2rem 0 }
  .trusted-logos { gap:1.5rem }
  .why-tp-score { font-size:34px }
  .brands-grid { grid-template-columns:repeat(2,1fr) }
  .mobile-cta-bar { display:flex }
  body.has-sticky-cta { padding-bottom:72px }
}
@media (min-width:769px) {
  .mobile-cta-bar { display:none!important }
}

/* ── Serial input wrapper — provides border + bg, input is transparent ── */
.serial-input-wrap {
  position: relative;
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
}
.serial-input-wrap:focus-within {
  border-color: var(--red);
  background: #fff;
}
.serial-arrow-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--red);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s;
  color: #fff;
  box-shadow: 0 2px 8px rgba(232,55,42,0.35);
  z-index: 3;
}
.serial-arrow-btn:hover { background: var(--red-dark); box-shadow: 0 4px 14px rgba(232,55,42,0.45); }
.serial-arrow-btn:active { opacity: 0.9; }

/* ── Missing homepage helpers ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.hero-h1-text {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.12;
  letter-spacing: -1px;
  color: #fff;
  margin-bottom: 1.25rem;
}
.hero-h1-text em { font-style: italic; color: rgba(255,255,255,0.4); }
.hero-h1-text .accent { color: var(--red); }

.hero-desc-text {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1.5rem;
  max-width: 500px;
}

.brand-card-sub {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.4;
}

.brand-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  padding: 2px 8px;
  margin-top: 4px;
}


/* ── PRODUCT PAGE TRUSTPILOT STRIP ───────────────────────────── */
.product-tp-strip {
  background: #fff;
  padding: 25px 2rem;
  display: flex;
  justify-content: center;
}
.product-tp-desktop {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 700px;
}
.product-tp-fallback-desktop {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  color: #191919;
}
.product-tp-fallback-desktop:hover {
  color: #191919;
}
.tp-strip-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #191919;
  text-decoration: none;
}
.tp-strip-inline--center { justify-content: center; }
.tp-strip-inline:hover { color: #191919; }
.product-tp-stars { display: flex; gap: 2px; }
.product-tp-logo { display: flex; align-items: center; gap: 5px; }
.product-tp-mobile { display: none; }
.product-tp-fallback-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 1rem 0;
}
.product-tp-fallback-stars { display: flex; gap: 3px; }

@media (max-width: 640px) {
  .product-tp-desktop { display: none; }
  .product-tp-mobile { display: block; width: 100%; }
  .product-tp-fallback-mobile { display: flex; }
  .product-tp-strip { padding: 1.5rem 1rem; }
}

/* ── TRUSTPILOT REVIEW SLIDER ────────────────────────────────── */
.tp-slider-wrap { display:flex; align-items:center; gap:12px; position:relative; margin:2rem -4px 0; }
.tp-track-outer { flex:1; overflow:hidden; }
.tp-track { display:flex; gap:16px; transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94); will-change:transform; }
/* Desktop: each card takes 1/3 of the track, all equal height */
.tp-card-wrap { flex:0 0 calc(33.333% - 11px); display:flex; flex-direction:column; }
.tp-card-wrap .tp-card { flex:1; }
/* Mobile: CSS scroll-snap — no JS needed, native swipe feel */
@media(max-width:768px) {
  .tp-slider-wrap { overflow:hidden; gap:0; }
  .tp-track-outer { overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tp-track-outer::-webkit-scrollbar { display:none; }
  .tp-track { transform:none !important; transition:none !important; padding-right:16px; }
  .tp-card-wrap { flex:0 0 84%; scroll-snap-align:start; }
  .tp-arrow { display:none !important; }
  .tp-dots { display:none; }
}
.tp-card { background:#fff; border:1px solid #e8eaed; border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:10px; box-shadow:none; min-height:180px; transition:transform 0.2s ease, border-color 0.2s ease; }
.tp-card-top { display:flex; align-items:center; justify-content:space-between; }
.tp-stars { display:flex; }
.tp-stars-img { height:24px; width:auto; display:block; }
.tp-star-sm { height:20px; width:auto; display:inline-block; vertical-align:middle; }
.tp-date { font-size:12px; color:#6b7280; white-space:nowrap; }
.tp-title { margin:0; font-size:15px; font-weight:700; color:#111827; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tp-body { margin:0; font-size:13.5px; color:#374151; line-height:1.6; flex:1; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
/* Hover overlay — desktop only (no layout shift) */
.tp-card { position:relative; overflow:hidden; }
.tp-hover-overlay {
  position:absolute; bottom:0; left:0; right:0;
  height:52px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; font-weight:600; color:#00b67a !important; text-decoration:none;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.97) 38%);
  border-radius:0 0 14px 14px;
  opacity:0; transform:translateY(6px);
  transition:opacity 0.2s ease, transform 0.2s ease;
  pointer-events:none;
}
.tp-hover-overlay:hover { color:#00b67a !important; }
.tp-card:hover { border-color:rgba(0,182,122,0.55); }
.tp-card:hover .tp-hover-overlay { opacity:1; transform:translateY(0); pointer-events:auto; }
/* Mobile dot indicators */
.tp-mob-dots { display:none; }
@media (max-width:768px) {
  .tp-mob-dots {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    margin-top:1rem;
  }
  .tp-mob-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#d1d5db;
    transition:background 0.2s, width 0.2s, border-radius 0.2s;
    flex-shrink:0;
  }
  .tp-mob-dot.active {
    background:#00b67a;
    width:18px;
    border-radius:3px;
  }
}

/* Hover overlay hidden on touch devices (no hover support) */
.tp-mobile-icon { display:none; text-decoration:none; opacity:0.45; }
@media (hover:none) {
  .tp-hover-overlay { display:none; }
}
.tp-author { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:10px; border-top:1px solid #f3f4f6; }
.tp-author-name { font-size:12.5px; font-weight:700; color:#374151; }
.tp-author-country { font-size:11px; color:#9ca3af; background:#f3f4f6; padding:1px 6px; border-radius:4px; font-weight:600; }
.tp-author-sep { font-size:11px; color:#d1d5db; line-height:1; }
.tp-author-brand { font-size:12px; color:#374151; font-weight:700; }
.tp-verified-badge { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:6px 14px 6px 10px; margin-bottom:10px; }
.tp-verified-badge span { font-size:13px; font-weight:600; color:#374151; }
.tp-section-sub { font-size:15px; color:#6b7280; margin-top:4px; margin-bottom:0; }
.tp-arrow { width:36px; height:36px; border-radius:50%; border:1.5px solid #d1d5db; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#374151; flex-shrink:0; transition:border-color 0.15s,color 0.15s,box-shadow 0.15s; }
.tp-arrow:hover { border-color:#00b67a; color:#00b67a; box-shadow:0 0 0 3px rgba(0,182,122,0.12); }
.tp-arrow:disabled { opacity:0.35; cursor:default; }
.tp-arrow svg { width:18px; height:18px; }
.tp-dots { display:flex; justify-content:center; gap:8px; margin-top:20px; }
.tp-dot { width:8px; height:8px; border-radius:50%; border:none; background:#d1d5db; cursor:pointer; transition:background 0.2s,transform 0.2s; padding:0; }
.tp-dot.active { background:#00b67a; transform:scale(1.3); }
@media(max-width:768px) { .tp-dots { display:none !important; } }


/* ── LEGAL PAGES ─────────────────────────────────────────────── */
.legal-header {
  background: var(--navy);
  padding: 3rem 2rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.legal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.legal-header-inner { position: relative; z-index: 1; }
.legal-header-inner {
  max-width: 800px;
  margin: 0 auto;
}
.breadcrumb-light a { color: rgba(255,255,255,0.55); }
.breadcrumb-light span { color: rgba(255,255,255,0.35); }
.legal-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(26px, 4vw, 40px);
  color: #fff;
  margin: 0.75rem 0 0.5rem;
  line-height: 1.15;
}
.legal-updated { font-size: 13px; color: rgba(255,255,255,0.45); margin: 0; }
.legal-body {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}
.legal-prose h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 21px;
  color: var(--navy);
  margin: 2.5rem 0 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.legal-prose h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-prose h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 1.25rem 0 0.4rem;
  letter-spacing: 0.01em;
}
.legal-prose p {
  font-size: 14.5px;
  color: var(--text2);
  line-height: 1.8;
  margin: 0 0 1rem;
}
.legal-prose ul, .legal-prose ol {
  padding-left: 1.4rem;
  margin: 0 0 1rem;
}
.legal-prose li {
  font-size: 14.5px;
  color: var(--text2);
  line-height: 1.8;
  margin-bottom: 0.35rem;
}
.legal-prose a { color: var(--red); text-decoration: underline; }
.legal-prose a:hover { color: var(--navy); }
.legal-prose strong { color: var(--navy); font-weight: 600; }
@media (max-width: 640px) {
  .legal-header { padding: 2rem 1.25rem; }
  .legal-body { padding: 2rem 1.25rem 4rem; }
}

/* ── CONTACT PAGE ─────────────────────────────────────────────── */
.contact-top {
  background: var(--navy);
  position: relative;
  padding: 3.5rem 2rem 3rem;
  overflow: hidden;
}
.contact-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.contact-top-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.contact-hero-sub {
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  margin: 0 0 2.5rem;
  line-height: 1.65;
}
.contact-hc-nod {
  margin: 1.75rem 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.contact-hc-nod a { color: rgba(255,255,255,0.65); text-decoration: underline; }
.contact-hc-nod a:hover { color: #fff; }

/* Contact method cards */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.contact-method-card {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-method-card:hover {
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 12px 40px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.18);
}
.contact-method-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.contact-method-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.contact-method-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.contact-method-hours {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.6;
  flex: 1;
}
.contact-method-hours span { color: rgba(255,255,255,0.32); }
.contact-method-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.75rem;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.15s;
}
.contact-method-btn:hover { color: #fff; }
.contact-method-offline {
  display: block;
  margin-top: 0.75rem;
  font-size: 12px;
  color: rgba(255,255,255,0.32);
  font-style: italic;
}

/* Status badge */
.contact-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.02em;
}
.contact-status-badge--on  { background: rgba(22,163,74,0.25);  color: #4ade80; }
.contact-status-badge--off { background: rgba(239,68,68,0.2); color: #fca5a5; }

/* Animated beacon dot */
.contact-beacon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.contact-beacon--on {
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
  animation: beacon-pulse 2s infinite;
}
.contact-beacon--off { background: #f87171; }
@keyframes beacon-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  70%  { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* Live dot in hours table */
.hours-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  box-shadow: 0 0 0 0 rgba(22,163,74,0.5);
  animation: beacon-pulse 2s infinite;
}

/* Body layout */
.contact-body {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}
.contact-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
}
.contact-form-title {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.contact-form-sub {
  font-size: 13.5px;
  color: var(--text3);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
.contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.contact-form-note {
  font-size: 12px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.contact-form-note a { color: var(--text3); text-decoration: underline; }
.required-star { color: var(--red); }
.field-error { font-size: 12px; color: var(--red); display: block; margin-top: 3px; }
.contact-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #b91c1c;
  margin-bottom: 1rem;
}

/* Success state */
.contact-success {
  text-align: center;
  padding: 3rem 1.5rem;
}
.contact-success-icon { margin-bottom: 1rem; }
.contact-success h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.contact-success p { font-size: 14px; color: var(--text2); margin: 0; line-height: 1.7; }

/* Info sidebar */
.contact-info-wrap { display: flex; flex-direction: column; gap: 1rem; }
.contact-info-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
}
.contact-info-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.contact-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.contact-hours-table td {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}
.contact-hours-table td:last-child { text-align: right; font-weight: 600; color: var(--navy); }
.contact-hours-table tr:last-child td { border-bottom: none; }
.contact-hours-closed { color: var(--text3) !important; font-weight: 400 !important; }
.contact-hours-note {
  font-size: 12px;
  color: var(--text3);
  margin: 0.75rem 0 0;
  line-height: 1.5;
}
.contact-address {
  font-style: normal;
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.75;
  margin: 0 0 0.75rem;
}
.contact-map-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.contact-map-link:hover { color: var(--navy); }
.contact-response-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.contact-response-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}
.contact-response-list strong { color: var(--navy); }
.response-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.response-dot--green { background: #16a34a; }
.response-dot--amber { background: #f59e0b; }
.contact-hc-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.contact-hc-card svg { flex-shrink: 0; margin-top: 2px; }
.contact-company-card { border-style: dashed; }
.contact-company-card p {
  font-size: 12px;
  color: var(--text3);
  margin: 0;
  line-height: 1.8;
}

/* Responsive */
@media (max-width: 800px) {
  .contact-top { padding: 2.5rem 1.25rem 2rem; }
  .contact-body { grid-template-columns: 1fr; }
  .contact-info-wrap { order: -1; }
  .contact-methods { grid-template-columns: 1fr; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-form-footer { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 540px) and (max-width: 800px) {
  .contact-methods { grid-template-columns: 1fr 1fr; }
}

/* ── TOPBAR MOBILE ROTATION ──────────────────────────────────── */
@media (max-width: 640px) {
  .topbar { padding: 0; }
  .topbar-inner {
    position: relative;
    height: 34px;
    padding: 0;
    justify-content: center;
  }
  .topbar-item {
    position: absolute;
    left: 0;
    right: 0;
    justify-content: center;
    opacity: 0;
    animation: topbar-rotate 12s ease-in-out infinite;
  }
  .topbar-item:nth-child(1) { animation-delay: 0s; }
  .topbar-item:nth-child(2) { animation-delay: 4s; }
  .topbar-item:nth-child(3) { animation-delay: 8s; }
}
@keyframes topbar-rotate {
  0%    { opacity: 0; transform: translateY(5px); }
  6%    { opacity: 1; transform: translateY(0); }
  27%   { opacity: 1; transform: translateY(0); }
  33%   { opacity: 0; transform: translateY(-5px); }
  100%  { opacity: 0; }
}

/* ── ALL BRANDS PAGE ── */
[x-cloak] { display: none !important; }

.brands-page-hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 3.5rem 2rem 3rem;
}
.brands-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.brands-page-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.brands-page-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 2rem;
  line-height: 1.5;
}

/* Search bar */
.brands-search-input-wrap {
  position: relative;
}
.brands-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.brands-search-input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 14px 44px;
  font-size: 15px;
  color: #fff;
  font-family: 'Figtree', sans-serif;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}
.brands-search-input::placeholder { color: rgba(255,255,255,0.35); }
.brands-search-input:focus {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.12);
}
.brands-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  transition: background 0.15s;
}
.brands-search-clear:hover { background: rgba(255,255,255,0.28); }

/* Grid section */
.brands-page-grid-section {
  background: var(--off);
  padding: 2.5rem 2rem 3rem;
  border-bottom: 1px solid var(--border-light);
}
.brands-page-grid-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.brands-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}

/* White brand card */
.brands-page-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  gap: 0.35rem;
}
.brands-page-card:hover {
  border-color: var(--red);
  box-shadow: 0 6px 24px rgba(232,55,42,0.1);
  transform: translateY(-2px);
}
.brands-page-card-logo {
  width: 100%;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.brands-page-card-logo img {
  max-width: 110px;
  max-height: 60px;
  object-fit: contain;
}
.brands-page-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.brands-page-card-models {
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.4;
}
.brands-page-card-delivery {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  margin-top: 6px;
}

/* No results */
.brands-page-no-results {
  padding: 4rem 2rem;
  text-align: center;
  color: var(--text2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.brands-page-no-results p { margin: 0; font-size: 15px; }
.brands-page-no-results svg { opacity: 0.4; margin-bottom: 0.5rem; }

/* CTA section */
.brands-page-cta-section {
  background: var(--white);
  padding: 3.5rem 2rem;
  border-top: 1px solid var(--border-light);
}

@media (max-width: 640px) {
  .brands-page-hero { padding: 2.5rem 1.25rem 2.5rem; }
  .brands-page-grid-section { padding: 1.5rem 1rem 2rem; }
  .brands-page-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
  .brands-page-card { padding: 1.25rem 0.75rem 1rem; }
  .brands-page-card-logo { width: 64px; height: 48px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .brands-page-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===========================
   PRODUCT PAGE — NEW SECTIONS
   =========================== */

/* Hero overlay when bg image is set */
.product-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,31,60,0.88) 0%, rgba(13,31,60,0.72) 100%);
  z-index: 0;
}

/* Guide section */
.product-guide-section { background: var(--off); }
.serial-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 760px) { .serial-guide-grid { grid-template-columns: 1fr; } }

.guide-swipe-dots { display: none; }

.serial-guide-card {
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: 16px;
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.serial-guide-media {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  background: #f1f5f9;
}
.serial-guide-media img { width: 100%; height: 100%; object-fit: cover; }
.serial-guide-media iframe { width: 100%; height: 100%; border: none; }
.serial-guide-media--zoomable { position: relative; cursor: zoom-in; }
.guide-zoom-btn {
  position: absolute;
  bottom: 8px; right: 8px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  padding: 0;
}
.serial-guide-media--zoomable:hover .guide-zoom-btn,
.serial-guide-media--zoomable:focus-within .guide-zoom-btn { opacity: 1; }
@media (hover: none) { .guide-zoom-btn { opacity: 1; } }
.guide-zoom-btn svg { width: 16px; height: 16px; }

.guide-lightbox {
  display: flex;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.guide-lightbox[hidden] { display: none; }
.guide-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.88);
  cursor: pointer;
}
.guide-lightbox-img {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  object-fit: contain;
}
.guide-lightbox-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.guide-lightbox-close:hover { background: rgba(255,255,255,0.28); }
.guide-lightbox-close svg { width: 18px; height: 18px; }
.serial-guide-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 2px;
}
.serial-guide-title { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.serial-guide-desc { font-size: 13.5px; color: var(--text2); line-height: 1.65; }
.product-guide-cta {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text3);
}
.product-guide-cta a { color: var(--navy); font-weight: 600; text-decoration: underline; }

/* Popular variants grid */
.product-variants-section { background: var(--white); }
.product-variants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}
.product-variant-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 14px 16px;
  background: var(--off);
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.product-variant-card:hover {
  border-color: var(--red);
  background: var(--white);
  transform: translateY(-1px);
  color: var(--red);
}
.product-variant-name { flex: 1; }

/* FAQ section */
.product-faq-section { background: var(--off); }
.product-faq-list { display: flex; flex-direction: column; gap: 0; border: 1.5px solid var(--border-light); border-radius: 16px; overflow: hidden; }
.product-faq-item { border-bottom: 1px solid var(--border-light); }
.product-faq-item:last-child { border-bottom: none; }
.product-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  background: var(--white);
  user-select: none;
  transition: background 0.12s;
}
.product-faq-question::-webkit-details-marker { display: none; }
.product-faq-question:hover { background: var(--off); }
.product-faq-chevron { flex-shrink: 0; transition: transform 0.2s; color: var(--text3); }
details[open] .product-faq-chevron { transform: rotate(180deg); }
.product-faq-answer {
  padding: 0.25rem 1.25rem 1.1rem;
  font-size: 14.5px;
  color: var(--text2);
  line-height: 1.7;
  background: var(--white);
}

/* Disclaimer */
.product-disclaimer {
  background: var(--off);
  border-top: 1px solid var(--border-light);
  padding: 1.5rem 2rem;
}
.product-disclaimer-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.7;
}
.product-disclaimer-inner svg { flex-shrink: 0; margin-top: 2px; }

/* Spinner animation for form loading */
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================
   SERIAL EXAMPLES PANEL
   =========================== */
.serial-examples-panel {
  margin-top: 2rem;
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
}
.serial-examples-panel-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 0.85rem;
}
.serial-examples-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.serial-example-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  background: var(--off);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  min-width: 0;
}
.serial-chip-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.serial-chip-code {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.05em;
  word-break: break-all;
}
.serial-chip-extras {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--border-light);
}
.serial-chip-extra-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
}
.serial-chip-extra-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text3);
  min-width: 34px;
}
.serial-chip-extra-val {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.03em;
}
@media (max-width: 640px) {
  .serial-examples-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    gap: 0.5rem;
  }
  .serial-examples-chips::-webkit-scrollbar { display: none; }
  .serial-example-chip {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 7px 10px;
  }
  .serial-chip-code { font-size: 12px; }
}

/* Hero inner needs full width when acting as a flex child */
.product-hero-inner { width: 100%; }

/* ═══════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   ═══════════════════════════════════════════════════════════ */

/* ── Shared: flag image ── */
.lang-flag {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* Globe icon (English / default locale) */
.lang-globe {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  color: currentColor;
}
.lang-globe--sm { width: 16px; height: 16px; }

/* ── Nav dropdown (desktop) ── */
.lang-switcher--nav { position: relative; }

.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--text2);
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.lang-switcher-btn:hover { background: var(--off); color: var(--navy); }
.lang-chevron { flex-shrink: 0; color: var(--text3); }

.lang-switcher-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 172px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.11);
  padding: 6px;
  z-index: 400;
}

.lang-dd-enter           { transition: opacity 0.14s ease, transform 0.14s ease; }
.lang-dd-enter-start     { opacity: 0; transform: translateY(-4px); }
.lang-dd-enter-end       { opacity: 1; transform: translateY(0); }

.lang-switcher-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  transition: background 0.12s, color 0.12s;
}
.lang-switcher-option:hover { background: var(--off); color: var(--navy); }
.lang-switcher-option--active { color: var(--navy); font-weight: 600; }

@media (max-width: 768px) {
  .lang-switcher--nav { display: none; }
}

/* ── Select (mobile menu + footer) ── */
.lang-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px 5px 8px;
}
.lang-select-icon.lang-flag  { width: 16px; height: 12px; }
.lang-select-icon.lang-globe { width: 16px; height: 16px; }

.lang-select {
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text2);
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.lang-select:focus { color: var(--navy); }

.lang-select-wrap--footer {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
}
.lang-select-wrap--footer .lang-select { color: rgba(255,255,255,0.75); }
.lang-select-wrap--footer .lang-globe  { color: rgba(255,255,255,0.6); }

/* ── Legacy footer pill — kept for transition, remove after deploy ── */
.lang-switcher-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.75rem;
}
.lang-switcher-footer-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lang-switcher-footer-item:hover {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.3);
}
.lang-switcher-footer-item.active {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE REFINEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Hero: kill excessive vertical space on mobile ── */
@media (max-width: 768px) {
  .hero {
    padding: 2.5rem 1.25rem;
    min-height: auto;
  }
  .hero-inner {
    padding: 0;
    gap: 2rem;
  }
}

/* ── Section padding: tighter on small phones ── */
@media (max-width: 480px) {
  .section {
    padding: 2.25rem 1rem;
  }
}

/* ── Guide steps: swipe carousel on mobile for 3+ cards ── */
@media (max-width: 480px) {
  .serial-guide-grid--swipe {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
    margin-right: -1rem;
    padding-right: 1rem;
  }
  .serial-guide-grid--swipe::-webkit-scrollbar { display: none; }
  .serial-guide-grid--swipe .serial-guide-card {
    flex-shrink: 0;
    width: 82%;
    scroll-snap-align: start;
  }
  .guide-swipe-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 1rem;
  }
  .guide-swipe-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    transition: background 0.2s, width 0.2s, border-radius 0.2s;
  }
  .guide-swipe-dot.active {
    background: var(--red);
    width: 18px;
    border-radius: 3px;
  }
}

/* ── HIW cards: horizontal layout saves vertical space on mobile ── */
@media (max-width: 640px) {
  .hiw-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 0.875rem;
    padding: 1.125rem 1rem;
  }
  .hiw-num {
    grid-column: 1;
    grid-row: 1;
    font-size: 24px;
    margin-bottom: 0.5rem;
  }
  .hiw-icon-wrap {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }
  .hiw-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    margin-bottom: 0.35rem;
  }
  .hiw-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: 13.5px;
  }
}

/* ── Serial guide: 2-col at mid-tablet ── */
@media (min-width: 481px) and (max-width: 760px) {
  .serial-guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Product CTA banner: compact on mobile ── */
@media (max-width: 640px) {
  .product-cta-banner {
    padding: 1.75rem 1.25rem;
    border-radius: 14px;
  }
  .product-cta-banner h3 {
    font-size: 20px;
  }
  .product-cta-banner .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Footer: tighter on small phones ── */
@media (max-width: 640px) {
  .footer {
    padding: 2.5rem 1rem 1rem;
  }
  .footer-inner {
    gap: 1.25rem;
  }
}

/* ── Checkout: tighter on small phones ── */
@media (max-width: 480px) {
  .checkout-page {
    padding: 1.5rem 1rem;
  }
}

/* ── Product page mobile sticky CTA ── */
.product-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 10px 1rem;
  display: none;
  align-items: center;
  gap: 10px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.product-mobile-cta.visible {
  transform: translateY(0);
}
.product-mobile-cta-phone {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--navy);
  display: none;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  transition: background 0.15s;
}
.product-mobile-cta-phone.phone-visible { display: flex; }
.product-mobile-cta-phone:hover { background: var(--navy-mid); color: #fff; }
.product-mobile-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 auto;
  background: var(--red);
  color: #fff;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
}
.product-mobile-cta-btn:hover { background: var(--red-dark); color: #fff; }
@media (max-width: 768px) {
  .product-mobile-cta { display: flex; }
  body.has-product-cta { padding-bottom: 72px; }
}
@media (min-width: 769px) {
  .product-mobile-cta { display: none !important; }
}