.material-symbols-outlined { font-family:'Material Symbols Outlined'; font-weight:400; font-size:20px; line-height:1; vertical-align:middle; user-select:none; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.onb-main { padding:var(--space-12) 0 var(--space-24); }
.onb-grid { display:grid; grid-template-columns:5fr 7fr; gap:var(--space-12); }
@media (max-width:1024px) { .onb-grid { grid-template-columns:1fr; gap:var(--space-8); } }

/* ── Left sticky hero ──────────────────────────────────────────────────── */
.hero-column { position:sticky; top:calc(var(--nav-height) + var(--space-8)); align-self:start; }
@media (max-width:1024px) { .hero-column { display:none; } }
.hero-card {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  aspect-ratio:4/5; background:var(--surface-low);
  isolation:isolate; box-shadow:var(--shadow-lg);
}
.hero-card::before {
  content:''; position:absolute; inset:-20%;
  background:radial-gradient(circle at 50% 50%, var(--brand-primary-glow) 0%, transparent 55%);
  z-index:0; pointer-events:none;
}
.hero-card img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; padding:var(--space-4); }
.hero-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 0%, transparent 45%);
  z-index:2; pointer-events:none;
}
.hero-card-text { position:absolute; bottom:var(--space-8); left:var(--space-8); right:var(--space-8); z-index:3; }
.hero-card-text .tagline { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--brand-primary); }
.hero-card-text h2 { font-family:var(--font-headline); font-weight:700; font-size:2.25rem; letter-spacing:-0.02em; line-height:0.95; text-transform:uppercase; margin-top:var(--space-3); }

/* ── Flow column ───────────────────────────────────────────────────────── */
.onb-flow { display:flex; flex-direction:column; gap:var(--space-12); }

.onb-section { }
.onb-section.hidden { display:none; }

.onb-section-head { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-6); }
.onb-step-num {
  font-family:var(--font-headline); font-weight:700;
  font-size:3.5rem; line-height:1; letter-spacing:-0.04em;
  color:var(--brand-primary); opacity:0.20;
  min-width:4ch;
}
.onb-section.done .onb-step-num { opacity:0.6; }
.onb-section-titles { flex:1; }
.onb-section-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-1); }
.onb-section-title { font-family:var(--font-headline); font-weight:700; font-size:1.75rem; letter-spacing:-0.02em; text-transform:uppercase; line-height:1; }
.onb-section-check {
  width:28px; height:28px; border-radius:50%;
  background:var(--brand-primary); color:#002109;
  display:none; align-items:center; justify-content:center;
  font-weight:700; flex-shrink:0;
}
.onb-section.done .onb-section-check { display:flex; }

/* ── In-Store Contract Warning Banner (Important Red) ──────────────────── */
.in-store-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 16px);
  padding: 16px 20px;
  background: #fef2f2;
  border: 1.5px solid #ef4444;
  border-left: 6px solid #dc2626;
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.08);
  margin: var(--space-2, 8px) 0 var(--space-6, 24px) 0;
}
.in-store-notice-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.in-store-notice-icon .material-symbols-outlined {
  font-size: 24px;
  color: #dc2626;
}
.in-store-notice-content {
  flex: 1;
  min-width: 0;
}
.in-store-notice-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #dc2626;
  margin-bottom: 4px;
}
.in-store-notice-title {
  font-family: var(--font-headline, sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: #991b1b;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.in-store-notice-desc {
  font-size: 13px;
  color: #7f1d1d;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 768px) {
  .in-store-notice-banner {
    padding: 12px 14px;
    gap: 12px;
  }
  .in-store-notice-icon {
    width: 36px;
    height: 36px;
  }
  .in-store-notice-icon .material-symbols-outlined {
    font-size: 20px;
  }
  .in-store-notice-title {
    font-size: 0.95rem;
  }
  .in-store-notice-desc {
    font-size: 12px;
  }
}

/* ── Option cards (branch + bike) ──────────────────────────────────────── */
.option-card {
  display:flex; align-items:flex-start; gap:var(--space-4);
  padding:var(--space-6); background:var(--surface);
  border:2px solid var(--border); border-radius:var(--radius-lg);
  text-align:left; width:100%; cursor:pointer;
  transition:all var(--dur) var(--ease);
  font-family:var(--font-body);
}
.option-card:hover { border-color:var(--border-strong); background:var(--surface-high); }
.option-card.selected { border-color:var(--brand-primary); background:var(--surface-high); box-shadow:0 0 0 1px var(--brand-primary-20); }
.option-card .material-symbols-outlined { font-size:26px; color:var(--text-muted); flex-shrink:0; margin-top:2px; transition:color var(--dur) var(--ease); }
.option-card.selected .material-symbols-outlined { color:var(--brand-primary); }
.option-card-body { flex:1; min-width:0; }
.option-card-title { font-family:var(--font-headline); font-weight:700; font-size:1rem; color:var(--text); letter-spacing:-0.01em; display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2); margin-bottom:4px; }
.option-card-price { font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--brand-primary); }
.option-card-sub { font-size:13px; color:var(--text-muted); line-height:1.4; }
.option-card-meta { display:inline-flex; align-items:center; gap:var(--space-2); margin-top:var(--space-2); font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); }

.branch-grid, .bike-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
@media (max-width:768px) { .branch-grid, .bike-grid { grid-template-columns:1fr; } }

.subsection-label { font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--brand-primary); margin-bottom:var(--space-3); margin-top:var(--space-6); }

/* ── Form ──────────────────────────────────────────────────────────────── */
.form-stack { display:flex; flex-direction:column; gap:var(--space-4); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:768px) { .form-row { grid-template-columns:1fr; } }

.field-wrap label { display:block; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-2); }
.field-wrap label .req { color:var(--brand-primary); margin-right:2px; }
.field-wrap .input,
.field-wrap .textarea {
  width:100%; padding:0.875rem 1rem; background:var(--surface);
  border:1.5px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-size:14px; font-family:var(--font-body);
  transition:all var(--dur) var(--ease);
}
.field-wrap .input::placeholder,
.field-wrap .textarea::placeholder { color:var(--text-dim); }
.field-wrap .input:focus,
.field-wrap .textarea:focus { outline:none; border-color:var(--brand-primary); background:var(--surface-high); box-shadow:0 0 0 4px var(--brand-primary-10); }
.field-wrap .input:disabled { opacity:0.4; cursor:not-allowed; }

/* ── Document upload cards ─────────────────────────────────────────────── */
.doc-upload-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-3); }
@media (max-width:768px) { .doc-upload-grid { grid-template-columns:1fr; } }
.doc-upload {
  position:relative; cursor:pointer;
  background:var(--surface); border:2px dashed var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6) var(--space-4);
  text-align:center; transition:all var(--dur) var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
}
.doc-upload:hover { border-color:var(--brand-primary); background:var(--surface-high); }
.doc-upload.uploaded { border-style:solid; border-color:var(--brand-primary); background:var(--brand-primary-10); }
.doc-upload-icon {
  width:52px; height:52px; border-radius:var(--radius-lg);
  background:var(--surface-highest); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--dur) var(--ease);
}
.doc-upload-icon .material-symbols-outlined { font-size:28px; }
.doc-upload:hover .doc-upload-icon,
.doc-upload.uploaded .doc-upload-icon { background:var(--brand-primary); color:#002109; }
.doc-upload-label { font-family:var(--font-headline); font-weight:600; font-size:13px; color:var(--text); text-transform:uppercase; letter-spacing:0.05em; }
.doc-upload-hint { font-size:11px; color:var(--text-dim); }
.doc-upload-filename { font-size:11px; color:var(--brand-primary); font-weight:600; display:none; word-break:break-all; }
.doc-upload.uploaded .doc-upload-filename { display:block; }
.doc-upload.uploaded .doc-upload-hint { display:none; }
.doc-upload input[type=file] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Contract ──────────────────────────────────────────────────────────── */
.contract-box {
  background:var(--surface-low); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6);
  max-height:360px; overflow-y:auto;
  font-size:13px; line-height:1.6; color:var(--text-muted);
}
.contract-box .clause {
  font-family:var(--font-headline); font-weight:700;
  font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--brand-primary);
  margin:var(--space-4) 0 var(--space-2); padding-top:var(--space-2);
  border-top:1px solid var(--border);
}
.contract-box .clause:first-child { border-top:none; padding-top:0; margin-top:0; }
.contract-box p { margin-bottom:var(--space-2); }
.contract-box strong { color:var(--text); }
.contract-box ul { margin: 0 0 var(--space-3) var(--space-4); padding-left: var(--space-2); }
.contract-box li { margin-bottom: 4px; }
.contract-box hr { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
.contract-lang-bar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--space-3); margin-bottom:var(--space-4); padding:var(--space-3) var(--space-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
}
.contract-lang-info { display:flex; align-items:center; gap:var(--space-3); }
.contract-lang-info .material-symbols-outlined { color:var(--brand-primary); font-size:22px; }
.contract-lang-title { font-family:var(--font-headline); font-weight:700; font-size:13px; color:var(--text); line-height:1.2; }
.contract-lang-sub { font-size:11.5px; color:var(--text-muted); line-height:1.3; }
.contract-lang-pills { display:flex; gap:6px; background:var(--surface-low); border:1px solid var(--border); border-radius:var(--radius-full); padding:3px; }
.contract-lang-btn {
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
  border-radius:var(--radius-full); border:none; background:transparent;
  color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.contract-lang-btn:hover { color:var(--text); }
.contract-lang-btn.on { background:var(--kinetic-gradient); color:#002109; font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,0.25); }

/* ── Signature ─────────────────────────────────────────────────────────── */
.sig-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-4);
}
.sig-tabs { display:flex; gap:var(--space-2); margin-bottom:var(--space-4); background:var(--bg); border-radius:var(--radius); padding:3px; }
.sig-tab {
  flex:1; padding:0.625rem; border-radius:calc(var(--radius) - 3px);
  font-family:var(--font-headline); font-size:12px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--text-muted); transition:all var(--dur) var(--ease);
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
}
.sig-tab.on { background:var(--surface-high); color:var(--text); }
.sig-panel { position:relative; }
.sig-canvas-wrap {
  position:relative; border:2px dashed var(--border);
  border-radius:var(--radius); background:#f8faf8;
  cursor:crosshair; touch-action:none;
}
canvas#sig-canvas { display:block; width:100%; height:140px; touch-action:none; }
.sig-clear {
  position:absolute; top:8px; right:8px;
  padding:4px 10px; background:rgba(0,0,0,0.65); color:#fff;
  border-radius:var(--radius-full); font-size:11px; font-weight:600;
  border:none; cursor:pointer;
}
.sig-typed {
  width:100%; padding:1rem; background:var(--surface-high);
  border:1.5px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-family:'Segoe Script','Brush Script MT',cursive;
  font-size:22px; text-align:center;
}
.sig-typed:focus { outline:none; border-color:var(--brand-primary); }
.sig-hint { font-size:11px; color:var(--text-dim); text-align:center; margin-top:var(--space-2); }

/* Agreement checkbox */
.agree-row {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4);
  background:var(--surface); border:2px solid var(--border);
  border-radius:var(--radius-lg); cursor:pointer; margin-top:var(--space-4);
  transition:all var(--dur) var(--ease);
}
.agree-row.on { border-color:var(--brand-primary); background:var(--brand-primary-10); }
.agree-box {
  width:24px; height:24px; border-radius:var(--radius-sm);
  background:var(--surface-high); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:#002109; flex-shrink:0; transition:all var(--dur) var(--ease);
}
.agree-row.on .agree-box { background:var(--brand-primary); border-color:var(--brand-primary); }
.agree-box .material-symbols-outlined { font-size:18px; display:none; }
.agree-row.on .agree-box .material-symbols-outlined { display:inline-block; }
.agree-label { flex:1; font-size:13px; color:var(--text); font-weight:500; }

/* ── Payment / price breakdown ─────────────────────────────────────────── */
.pay-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6); margin-top:var(--space-4);
}
.pay-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--space-2) 0; font-size:14px; color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.pay-row:last-child { border-bottom:none; padding-top:var(--space-4); margin-top:var(--space-2); border-top:1px solid var(--border); font-family:var(--font-headline); font-size:18px; font-weight:700; color:var(--text); }
.pay-row:last-child .amount { color:var(--brand-primary); }

/* ── Payment methods ───────────────────────────────────────────────────── */
.payment-methods { display:flex; flex-direction:column; gap:var(--space-3); }
.payment-method-card { text-align:left; width:100%; }
.payment-method-card:hover { border-color:var(--border-strong); background:var(--surface-high); }
.payment-method-card.selected { border-color:var(--brand-primary); background:var(--surface-high); box-shadow:0 0 0 1px var(--brand-primary-20); }
.payment-method-card .material-symbols-outlined { font-size:26px; color:var(--text-muted); flex-shrink:0; margin-top:2px; transition:color var(--dur) var(--ease); }
.payment-method-card.selected .material-symbols-outlined { color:var(--brand-primary); }

/* ── Video gate ────────────────────────────────────────────────────────── */
.vid-gate {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6); margin-top:var(--space-6);
}
.vid-gate-head { display:flex; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-4); }
.vid-gate-icon {
  width:44px; height:44px; border-radius:var(--radius);
  background:var(--brand-primary-10); color:var(--brand-primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.vid-gate-text-title { font-family:var(--font-headline); font-weight:700; font-size:15px; color:var(--text); margin-bottom:2px; }
.vid-gate-text-sub { font-size:12px; color:var(--text-muted); line-height:1.45; }
.vid-wrap {
  position:relative; width:100%; aspect-ratio:16/9;
  background:var(--bg); border-radius:var(--radius);
  overflow:hidden; margin-bottom:var(--space-4);
}
#vid-player, #vid-player iframe { width:100%; height:100%; border:0; }
.vid-progress-bar-bg {
  height:6px; background:var(--surface-highest);
  border-radius:var(--radius-full); overflow:hidden;
}
.vid-progress-bar { height:100%; width:0%; background:var(--kinetic-gradient); transition:width var(--dur) var(--ease); }
.vid-status { display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); margin-top:var(--space-2); }
.vid-locked { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-2); font-size:12px; color:var(--warn); }
.vid-unlocked { display:none; align-items:center; gap:var(--space-2); margin-top:var(--space-2); font-size:12px; color:var(--brand-primary); }
.vid-unlocked.show { display:flex; }

.btn-stripe {
  display:flex; align-items:center; justify-content:center; gap:var(--space-3);
  width:100%; padding:var(--space-5) var(--space-4);
  min-height:68px;
  background:var(--kinetic-gradient); color:#002109;
  border-radius:var(--radius-lg);
  font-family:var(--font-headline); font-weight:700; font-size:16px;
  letter-spacing:0.05em; text-transform:uppercase;
  transition:all var(--dur) var(--ease);
  margin-top:var(--space-6);
}
.btn-stripe:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 12px 32px var(--brand-primary-20), 0 0 40px var(--brand-primary-glow); }
.btn-stripe:disabled { opacity:0.4; cursor:not-allowed; }

/* ── Success ───────────────────────────────────────────────────────────── */
.success-wrap {
  text-align:center; padding:var(--space-16) var(--space-6);
  background:var(--surface); border:1px solid var(--brand-primary-20);
  border-radius:var(--radius-xl); position:relative; overflow:hidden; isolation:isolate;
}
.success-wrap::before {
  content:''; position:absolute; inset:-20%;
  background:radial-gradient(circle at 50% 40%, var(--brand-primary-glow) 0%, transparent 60%);
  z-index:0;
}
.success-wrap > * { position:relative; z-index:1; }
.success-icon {
  width:88px; height:88px; border-radius:50%;
  background:var(--brand-primary); color:#002109;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--space-6);
  box-shadow:0 0 40px var(--brand-primary-glow);
}
.success-icon .material-symbols-outlined { font-size:48px; font-variation-settings:'FILL' 1; }
.success-title { font-family:var(--font-headline); font-weight:700; font-size:2rem; letter-spacing:-0.02em; text-transform:uppercase; margin-bottom:var(--space-3); }
.success-sub { color:var(--text-muted); font-size:14px; max-width:480px; margin:0 auto var(--space-6); line-height:1.55; }
.success-ref {
  display:inline-block; padding:var(--space-3) var(--space-6);
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius);
  font-family:var(--font-mono); font-size:16px; font-weight:700;
  color:var(--brand-primary); letter-spacing:0.08em;
  margin-bottom:var(--space-6);
}
.success-summary {
  text-align:left; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-4);
  max-width:420px; margin:0 auto var(--space-6);
  font-size:13px; color:var(--text-muted); line-height:1.8;
}
.success-summary strong { color:var(--text); display:inline-block; min-width:80px; }
.success-actions { display:flex; flex-direction:column; gap:var(--space-3); max-width:320px; margin:0 auto; }
.wa-cta {
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-4); background:#25d366; color:#fff;
  border-radius:var(--radius-lg);
  font-family:var(--font-headline); font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em; font-size:13px;
  transition:all var(--dur) var(--ease);
}
.wa-cta:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(37,211,102,0.3); }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:var(--space-6); left:50%;
  transform:translateX(-50%) translateY(200%);
  background:var(--surface-high); color:var(--text);
  border:1px solid var(--border);
  padding:0.875rem 1.25rem; border-radius:var(--radius);
  font-size:13px; font-weight:500; z-index:300;
  transition:transform var(--dur-slow) var(--ease-spring);
  box-shadow:var(--shadow-lg); max-width:90vw;
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ── Continue buttons ──────────────────────────────────────────────────── */
.continue-row { margin-top:var(--space-6); }
.continue-row .btn { width:100%; }

.spin { display:inline-block; width:16px; height:16px; border:2px solid rgba(0,33,9,0.2); border-top-color:#002109; border-radius:50%; animation:sp 0.6s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }

/* ── Out of stock indicators ───────────────────────────────────────────── */
.option-card.is-out-of-stock { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.02); }
.option-card.is-out-of-stock.selected { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }

/* ── Mobile responsiveness ─────────────────────────────────────────────── */
@media (max-width:480px) {
  /* Layout */
  .onb-main { padding:var(--space-8) 0 var(--space-16); }
  .onb-flow { gap:var(--space-8); }

  /* Step number + header */
  .onb-step-num { font-size:2.5rem; min-width:3ch; }
  .onb-section-title { font-size:1.35rem; }
  .onb-section-head { gap:var(--space-3); margin-bottom:var(--space-4); }

  /* Option cards — tighter padding on small screens */
  .option-card { padding:var(--space-4); gap:var(--space-3); }
  .option-card .material-symbols-outlined { font-size:22px; }
  .option-card-title { flex-direction:column; align-items:flex-start; gap:2px; }
  .option-card-price { font-size:12px; }

  /* Payment summary rows — prevent overflow */
  .pay-card { padding:var(--space-4); }
  .pay-row { font-size:13px; flex-wrap:wrap; gap:var(--space-1); }
  .pay-row:last-child { font-size:15px; }

  /* Pay button — shrink text and icon so it fits single line */
  .btn-stripe { font-size:13px; padding:var(--space-4) var(--space-3); min-height:56px; gap:var(--space-2); }
  .btn-stripe .font-mono { font-size:14px; }

  /* Signature canvas */
  canvas#sig-canvas { height:110px; }

  /* Agreement checkbox */
  .agree-row { padding:var(--space-3); gap:var(--space-2); }
  .agree-label { font-size:12px; }

  /* Success screen */
  .success-wrap { padding:var(--space-10) var(--space-4); }
  .success-icon { width:68px; height:68px; }
  .success-icon .material-symbols-outlined { font-size:36px; }
  .success-title { font-size:1.5rem; }
  .success-ref { font-size:13px; padding:var(--space-2) var(--space-4); }
  .success-summary { font-size:12px; }

  /* Video gate */
  .vid-gate { padding:var(--space-4); }
  .vid-gate-head { gap:var(--space-2); }
  .vid-gate-icon { width:36px; height:36px; }
  .vid-gate-icon .material-symbols-outlined { font-size:20px; }
  .vid-gate-text-title { font-size:13px; }
  .vid-gate-text-sub { font-size:11px; }

  /* Section gap */
  .subsection-label { margin-top:var(--space-4); }

  /* Payment method cards */
  .option-card-sub { font-size:11px; }
  .option-card-meta { font-size:9px; }

  /* Lang switch — keep accessible on small screens */
  .lang-switch { display:flex; }
}

@media (max-width:380px) {
  .onb-step-num { display:none; } /* ultra-small: hide step number, keep heading */
  .btn-stripe { font-size:12px; }
  .branch-grid, .bike-grid { gap:var(--space-2); }
}