@font-face { font-family: "BN Bolt Bold"; src: url('/fonts/registration/bolt-bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "BN Bauer"; src: url('/fonts/registration/bauer.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BN Sea-Dog"; src: url('/fonts/marine/sea-dog.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BN Sea-Dog Semi-Italic"; src: url('/fonts/marine/sea-dog-semi-italic.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BN Sea-Dog Compact"; src: url('/fonts/marine/sea-dog-compact.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BN Sea-Dog Condensed"; src: url('/fonts/marine/sea-dog-condensed.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BN Sea-Dog 3D"; src: url('/fonts/marine/sea-dog-3d.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BN Marino"; src: url('/fonts/marine/marino.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BN NFS"; src: url('/fonts/racing/nfs.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BN Megahertz"; src: url('/fonts/racing/megahertz.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BN Marlboro"; src: url('/fonts/racing/marlboro.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BN Gunship"; src: url('/fonts/racing/gunship.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --bg: #030711;
  --panel: rgba(12, 24, 42, .86);
  --panel-2: rgba(255, 255, 255, .055);
  --line: rgba(158, 213, 255, .16);
  --text: #f6fbff;
  --muted: #9eb1c6;
  --cyan: #00e5ff;
  --green: #31ff9c;
  --orange: #ff6b2c;
  --yellow: #ffd84d;
  --danger: #ff5b7d;
  --shadow: 0 24px 80px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 229, 255, .14), transparent 29rem),
    radial-gradient(circle at 92% 14%, rgba(49, 255, 156, .09), transparent 25rem),
    linear-gradient(160deg, #07111f 0%, var(--bg) 46%, #02050b 100%);
}
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.app-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(3, 7, 17, .78);
  backdrop-filter: blur(18px);
}
.topbar-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #00111f;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: 0 0 24px rgba(0,229,255,.28);
}
.brand-copy strong { display: block; font-size: 18px; line-height: 1; }
.brand-copy span { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.phone-link, .ghost-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255,255,255,.045);
  text-decoration: none;
  font-weight: 800;
}
.ghost-button { cursor: pointer; }

.page {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 92px;
}
.hero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(0,229,255,.28);
  border-radius: 999px;
  color: #82f1ff;
  background: rgba(0,229,255,.075);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 850px;
  margin: 13px 0 10px;
  font-size: clamp(34px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.045em;
}
.hero p { max-width: 760px; margin: 0; color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.6; }
.hero-trust { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.trust-pill {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: #c9d8e7;
  font-size: 13px;
  font-weight: 800;
}

.customizer-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); gap: 22px; align-items: start; }
.preview-column { position: sticky; top: 91px; display: grid; gap: 16px; }
.card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.preview-card { overflow: hidden; }
.preview-toolbar {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}
.preview-toolbar strong { font-size: 14px; }
.hull-select-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hull-current-dot { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; border: 1px solid rgba(255,255,255,.38); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.hull-select { max-width: 210px; min-height: 36px; border: 1px solid var(--line); border-radius: 10px; background: #07111f; color: var(--text); padding: 0 30px 0 10px; font-size: 12px; font-weight: 800; cursor: pointer; }
.preview-stage {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 30px;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%),
    #050b14;
  background-size: 26px 26px;
}
.preview-stage::after {
  content: '';
  position: absolute;
  inset: auto 5% 7% 5%;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  filter: blur(13px);
}
.preview-svg { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 20px 35px rgba(0,0,0,.38)); }
.preview-meta {
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
}
.metric {
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
}
.metric span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.metric strong { display: block; margin-top: 5px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.compliance-card { padding: 18px; }
.compliance-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compliance-status { display: flex; align-items: center; gap: 10px; font-weight: 900; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 16px currentColor; }
.status-good .status-dot { background: var(--green); }
.status-warn .status-dot { background: var(--yellow); }
.status-bad .status-dot { background: var(--danger); }
.compliance-list { list-style: none; padding: 0; margin: 15px 0 0; display: grid; gap: 8px; }
.compliance-list li { display: flex; gap: 9px; color: #c5d4e2; font-size: 13px; line-height: 1.45; }
.compliance-list .pass::before { content: '✓'; color: var(--green); font-weight: 1000; }
.compliance-list .warn::before { content: '!'; color: var(--yellow); font-weight: 1000; }
.compliance-list .fail::before { content: '×'; color: var(--danger); font-weight: 1000; }
.legal-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.legal-note a { color: #8beeff; }

.control-card { overflow: hidden; }
.step-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.12);
}
.step-tab {
  position: relative;
  min-height: 58px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.step-tab:last-child { border-right: 0; }
.step-tab.active { color: var(--text); background: rgba(0,229,255,.07); }
.step-tab.active::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--cyan), var(--green)); }
.step-panel { display: none; padding: 22px; }
.step-panel.active { display: block; }
.step-kicker { color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.step-panel h2 { margin: 7px 0 7px; font-size: 26px; }
.step-panel > p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
.field { display: grid; gap: 8px; margin-top: 16px; }
.field:first-of-type { margin-top: 0; }
.field-label { display: flex; justify-content: space-between; gap: 12px; color: #dcecff; font-size: 13px; font-weight: 900; }
.field-hint { color: var(--muted); font-size: 11px; font-weight: 700; }
.text-input, .select-input, .notes-input {
  width: 100%;
  border: 1px solid rgba(127, 197, 255, .22);
  border-radius: 14px;
  background: rgba(0, 7, 18, .65);
  color: var(--text);
  padding: 14px 15px;
  outline: 0;
  font-size: 17px;
}
.text-input:focus, .select-input:focus, .notes-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.11); }
.registration-input { text-transform: uppercase; letter-spacing: .12em; font-weight: 1000; font-size: 24px; }
.input-message { min-height: 18px; color: var(--muted); font-size: 12px; }
.input-message.good { color: var(--green); }
.input-message.warn { color: var(--yellow); }

.segmented { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.size-grid { grid-template-columns: repeat(3, 1fr); }
.option-button {
  min-height: 64px;
  padding: 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: rgba(255,255,255,.045);
  cursor: pointer;
}
.option-button strong, .option-button span { display: block; }
.option-button span { color: var(--muted); margin-top: 4px; font-size: 12px; }
.option-button.active { border-color: var(--cyan); background: linear-gradient(135deg, rgba(0,229,255,.13), rgba(49,255,156,.07)); box-shadow: 0 0 0 2px rgba(0,229,255,.06); }

.font-groups { display: grid; gap: 22px; }
.font-group { display: grid; gap: 10px; }
.font-group-heading {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.font-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.font-option {
  min-height: 74px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: rgba(255,255,255,.045);
  cursor: pointer;
  text-align: left;
}
.font-option b { display: block; font-size: 22px; letter-spacing: .02em; }
.font-option small { display: block; margin-top: 4px; color: var(--muted); font-family: Inter, sans-serif; }
.font-option.active { border-color: var(--cyan); background: rgba(0,229,255,.09); }

.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.color-option {
  min-width: 0;
  padding: 9px 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.color-chip { width: 100%; height: 36px; border-radius: 9px; border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.color-option span { display: block; margin-top: 7px; font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.color-option.active { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,229,255,.07); }

.hull-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hull-color-option { min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: rgba(255,255,255,.035); cursor: pointer; text-align: left; }
.hull-color-option:hover { background: rgba(255,255,255,.065); }
.hull-color-option.active { border-color: var(--cyan); background: rgba(0,229,255,.09); box-shadow: 0 0 0 2px rgba(0,229,255,.055); }
.hull-color-chip { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; border: 1px solid rgba(255,255,255,.34); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.hull-color-option > span:last-child { min-width: 0; font-size: 10px; font-weight: 850; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.palette-note { color: var(--muted); font-size: 11px; line-height: 1.45; }

.finish-grid { display: grid; gap: 10px; }
.finish-option, .upgrade-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.finish-option input, .upgrade-card input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--cyan); }
.finish-copy { flex: 1; min-width: 0; }
.finish-copy strong { display: flex; justify-content: space-between; gap: 12px; }
.finish-copy small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.45; }
.finish-option.active { border-color: var(--cyan); background: rgba(0,229,255,.075); }

.toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.upgrade-card { margin: 0; }
.upgrade-card:has(input:checked) { border-color: rgba(49,255,156,.65); background: rgba(49,255,156,.06); }
.notes-input { min-height: 104px; resize: vertical; }
.range-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.range-input { width: 100%; accent-color: var(--cyan); }
.range-value { min-width: 48px; color: var(--cyan); font-weight: 900; text-align: right; }

.order-summary { padding: 18px 22px 22px; border-top: 1px solid var(--line); background: rgba(0,0,0,.16); }
.summary-row { display: flex; justify-content: space-between; gap: 16px; color: #c9d8e7; font-size: 13px; margin: 8px 0; }
.summary-row.total { align-items: end; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.summary-row.total span { font-size: 16px; font-weight: 900; }
.summary-row.total strong { font-size: 38px; line-height: 1; color: var(--green); }
.shipping-meter { margin-top: 14px; }
.shipping-copy { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.meter { height: 9px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }
.meter-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width .25s ease; }
.primary-button {
  width: 100%;
  min-height: 56px;
  margin-top: 18px;
  border: 0;
  border-radius: 15px;
  color: #00111f;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  font-size: 18px;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(0,229,255,.23);
}
.primary-button:hover { transform: translateY(-1px); }
.primary-button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.summary-trust { margin: 10px 0 0; color: var(--muted); text-align: center; font-size: 11px; }

.mobile-summary { display: none; }

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}
.dialog-backdrop.open { display: grid; }
.dialog {
  width: min(620px, 100%);
  max-height: min(740px, calc(100vh - 36px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #0a1424;
  box-shadow: 0 35px 100px rgba(0,0,0,.55);
}
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; font-size: 24px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; color: #fff; background: rgba(255,255,255,.05); cursor: pointer; }
.dialog-body { padding: 22px; }
.order-preview-list { display: grid; gap: 10px; }
.order-preview-item { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #c7d7e5; }
.order-preview-item span:first-child { color: var(--muted); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.secondary-button { min-height: 50px; border: 1px solid var(--line); border-radius: 14px; color: #fff; background: rgba(255,255,255,.05); cursor: pointer; font-weight: 900; }
.dialog-note { margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 150;
  transform: translate(-50%, 20px);
  padding: 12px 16px;
  border: 1px solid rgba(49,255,156,.35);
  border-radius: 12px;
  color: #dcffef;
  background: rgba(7,31,26,.95);
  opacity: 0;
  pointer-events: none;
  transition: .22s ease;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
  font-weight: 800;
  font-size: 13px;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1050px) {
  .customizer-grid { grid-template-columns: 1fr; }
  .preview-column { position: static; }
  .preview-stage { min-height: 360px; }
  .hero { align-items: flex-start; flex-direction: column; }
  .hero-trust { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .topbar-inner { padding: 11px 14px; }
  .brand-copy strong { font-size: 15px; }
  .brand-copy span, .phone-link { display: none; }
  .page { width: min(100% - 20px, 1480px); padding-top: 18px; }
  .hero { margin-bottom: 16px; }
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 15px; }
  .hero-trust { display: none; }
  .card { border-radius: 19px; }
  .preview-column { position: sticky; top: 68px; z-index: 30; }
  .preview-card { box-shadow: 0 15px 50px rgba(0,0,0,.42); }
  .preview-toolbar { padding: 10px 12px; }
  .preview-toolbar strong { font-size: 12px; }
  .hull-swatch { width: 25px; height: 25px; border-radius: 7px; }
  .preview-stage { min-height: 220px; padding: 12px; }
  .preview-meta { padding: 10px 11px 11px; gap: 6px; }
  .metric { padding: 8px; }
  .metric span { font-size: 9px; }
  .metric strong { font-size: 12px; }
  .compliance-card { display: none; }
  .customizer-grid { gap: 13px; }
  .step-tabs { position: sticky; top: 0; z-index: 5; }
  .step-tab { min-height: 52px; font-size: 10px; }
  .step-panel { padding: 18px 14px; }
  .step-panel h2 { font-size: 23px; }
  .registration-input { font-size: 21px; }
  .font-grid { grid-template-columns: 1fr 1fr; }
  .font-option b { font-size: 18px; }
  .size-grid { grid-template-columns: repeat(2, 1fr); }
  .color-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .color-option { padding: 7px 5px; }
  .color-chip { height: 31px; }
  .toggle-grid { grid-template-columns: 1fr; }
  .order-summary { padding-bottom: 90px; }
  .order-summary .primary-button { display: none; }
  .mobile-summary {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(3,7,17,.94);
    backdrop-filter: blur(18px);
  }
  .mobile-total { min-width: 92px; }
  .mobile-total span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 900; }
  .mobile-total strong { display: block; color: var(--green); font-size: 24px; line-height: 1.1; }
  .mobile-summary .primary-button { margin: 0; min-height: 48px; font-size: 15px; }
  .dialog-actions { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .preview-meta { grid-template-columns: 1fr 1fr; }
  .preview-meta .metric:last-child { display: none; }
  .font-grid { grid-template-columns: 1fr; }
  .color-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .hull-select { max-width: 155px; }
  .hull-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .font-grid { grid-template-columns: 1fr; }
}

/* Production proof-request and Same Day Vinyl branding */
.brand-logo {
  width: 104px;
  height: 58px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.dialog { width: min(760px, 100%); max-height: calc(100vh - 30px); }
.dialog-preview {
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #07111f;
}
.dialog-preview .preview-svg { display: block; width: 100%; height: auto; }
.customer-section {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.customer-section h3 { margin: 0; font-size: 19px; }
.customer-section > p { margin: 6px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.customer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.customer-phone-field { grid-column: 1 / -1; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.proof-actions .primary-button { margin-top: 0; }
.submit-status { min-height: 21px; margin-top: 12px; color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1.45; }
.submit-status.success { color: #67f2b0; }
.submit-status.error { color: #ff8f9a; }
.dialog-note strong { color: #fff; }

@media (max-width: 700px) {
  .brand-logo { width: 70px; height: 40px; border-radius: 8px; }
  .brand-copy { display: none; }
  .dialog-backdrop { padding: 8px; }
  .dialog { max-height: calc(100vh - 16px); border-radius: 18px; }
  .dialog-head { padding: 16px; align-items: flex-start; }
  .dialog-head h2 { font-size: 21px; }
  .dialog-body { padding: 14px; }
  .customer-grid { grid-template-columns: 1fr; }
  .customer-phone-field { grid-column: auto; }
  .order-preview-item { align-items: flex-start; font-size: 12px; }
  .order-preview-item strong { max-width: 58%; text-align: right; }
}

/* Same Day Vinyl brand refresh — keeps all uploaded pricing and proof-request behavior intact. */
:root {
  --bg: #02060b;
  --panel: rgba(5, 19, 35, .94);
  --panel-2: rgba(255,255,255,.055);
  --line: rgba(12, 143, 231, .28);
  --text: #f7fbff;
  --muted: #a9bdd0;
  --cyan: #0C8FE7;
  --green: #F9CC0A;
  --orange: #ff6b1a;
  --yellow: #F9CC0A;
  --danger: #ff5b7d;
  --shadow: 0 22px 65px rgba(0,0,0,.34);
}
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(12,143,231,.24), transparent 31rem),
    radial-gradient(circle at 91% 10%, rgba(249,204,10,.10), transparent 26rem),
    linear-gradient(160deg,#06162A 0%,#02060b 50%,#010307 100%);
}
.topbar { background: rgba(2,6,11,.88); border-bottom-color: rgba(12,143,231,.24); }
.brand-logo { width: 178px; max-height: 70px; object-fit: contain; }
.brand-copy strong { color: #fff; }
.brand-copy span { color: #8fcaf4; }
.phone-link { border-color: #0C8FE7; background:#fff; color:#030405; }
.ghost-button { border-color:#F9CC0A; background:#F9CC0A; color:#030405; }
.eyebrow { border-color:#0C8FE7; color:#8fd2ff; background:rgba(12,143,231,.12); }
.hero h1 { font-weight: 950; text-transform: uppercase; letter-spacing: -.035em; }
.hero h1::first-line { color:#fff; }
.trust-pill { border-color:rgba(249,204,10,.30); background:rgba(249,204,10,.08); color:#fff1a6; }
.card { border-color:rgba(12,143,231,.26); background:linear-gradient(145deg,rgba(5,24,44,.96),rgba(2,9,17,.98)); }
.preview-stage { background:linear-gradient(160deg,#071a2e,#02070d); }
.step-tab.active { background:rgba(12,143,231,.14); }
.step-tab.active::after { background:linear-gradient(90deg,#0C8FE7,#F9CC0A); }
.step-kicker,.font-group-heading,.range-value { color:#66c6ff; }
.option-button.active,.font-option.active,.finish-option.active { border-color:#0C8FE7; background:rgba(12,143,231,.12); }
.color-option.active,.hull-color-option.active { border-color:#F9CC0A; box-shadow:0 0 0 2px rgba(249,204,10,.10); }
.primary-button { background:linear-gradient(180deg,#ffe768,#F9CC0A); color:#030405; border:1px solid #fff; box-shadow:0 0 0 3px #0C8FE7,0 8px 24px rgba(0,0,0,.2); }
.primary-button:hover { filter:brightness(1.06); transform:translateY(-1px); }
.summary-row.total strong,.mobile-total strong { color:#F9CC0A; }
.meter-fill { background:linear-gradient(90deg,#0C8FE7,#F9CC0A); }

.boat-name-section { margin-top: 64px; padding-top: 56px; border-top:1px solid rgba(12,143,231,.24); }
.boat-name-section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px; }
.boat-name-section-head h2 { margin:12px 0 9px; font-size:clamp(34px,4.6vw,62px); line-height:.95; text-transform:uppercase; letter-spacing:-.035em; }
.boat-name-section-head h2 span { color:#F9CC0A; }
.boat-name-section-head p { max-width:760px; margin:0; color:var(--muted); line-height:1.55; }
.boat-name-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.boat-name-badges span { padding:8px 11px; border-radius:999px; color:#fff; border:1px solid rgba(12,143,231,.35); background:rgba(12,143,231,.10); font-size:12px; font-weight:850; }
.boat-name-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr); gap:22px; align-items:start; }
.boat-name-preview-card { overflow:hidden; position:sticky; top:91px; }
.boat-name-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.contrast-chip { padding:6px 9px; border-radius:999px; color:#06120b; background:#76f3ac; font-size:11px; font-weight:900; }
.contrast-chip.mid { color:#302500; background:#F9CC0A; }
.contrast-chip.low { color:#fff; background:#c92a47; }
.boat-name-stage { min-height:400px; display:grid; place-items:center; padding:28px; background:linear-gradient(160deg,#071a2e,#02070d); }
.boat-name-preview-svg { width:100%; height:auto; filter:drop-shadow(0 20px 35px rgba(0,0,0,.35)); }
.boat-name-preview-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:15px 18px 18px; border-top:1px solid var(--line); }
.boat-name-preview-meta span { padding:10px; border-radius:12px; background:rgba(255,255,255,.045); color:var(--muted); font-size:11px; }
.boat-name-preview-meta b { display:block; margin-bottom:3px; color:#fff; font-size:13px; }
.boat-name-controls { overflow:hidden; }
.boat-name-control-head { padding:20px 22px 0; }
.boat-name-control-head h3 { margin:7px 0 6px; font-size:28px; }
.boat-name-control-head p { margin:0; color:var(--muted); line-height:1.5; }
.boat-name-fields { padding:0 22px 22px; }
.boat-name-input { font-size:22px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.boat-name-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.boat-name-size-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:16px; }
.boat-name-size { min-height:62px; padding:10px; border:2px solid #0C8FE7; border-radius:13px; background:#fff; color:#030405; cursor:pointer; text-align:center; }
.boat-name-size strong,.boat-name-size span { display:block; }
.boat-name-size strong { font-size:20px; }
.boat-name-size span { margin-top:4px; color:#095AAC; font-size:10px; font-weight:850; text-transform:uppercase; }
.boat-name-size.active { background:#F9CC0A; border-color:#fff; box-shadow:0 0 0 3px #0C8FE7; }
.boat-name-toggle-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.boat-name-presets { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px; }
.boat-name-presets button { min-height:46px; padding:10px; border:1px solid #fff; border-radius:11px; color:#fff; background:linear-gradient(90deg,#075A9C,#0C8FE7); font-weight:900; cursor:pointer; }
.boat-name-presets button:hover { color:#030405; background:#F9CC0A; border-color:#0C8FE7; }
.boat-name-actions { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:10px; margin-top:16px; }
.boat-name-contact { text-decoration:none; display:flex; align-items:center; justify-content:center; margin:0; }

@media (max-width: 980px) {
  .boat-name-layout { grid-template-columns:1fr; }
  .boat-name-preview-card { position:relative; top:auto; }
  .boat-name-section-head { align-items:flex-start; flex-direction:column; }
  .boat-name-badges { justify-content:flex-start; }
}
@media (max-width: 640px) {
  .brand-logo { width:130px; }
  .boat-name-section { margin-top:42px; padding-top:40px; }
  .boat-name-stage { min-height:250px; padding:12px; }
  .boat-name-preview-meta { grid-template-columns:1fr; }
  .boat-name-two,.boat-name-toggle-row,.boat-name-actions { grid-template-columns:1fr; }
  .boat-name-size-grid { grid-template-columns:repeat(3,1fr); }
  .boat-name-presets { grid-template-columns:1fr; }
  .boat-name-section-head h2 { font-size:38px; }
}

/* Boat Name font library — grouped 47-font production selector */
.boat-name-font-select { min-height: 52px; }
.boat-name-font-select optgroup { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-weight: 800; color: #8fdcff; background: #07111f; }
.boat-name-font-select option { color: #ffffff; background: #07111f; }