/* ============================================================================
   Build-Your-Door — "Champion-neon" theme (matches the dealer website)
   Anton display · IBM Plex Sans/Mono · dark base, amber primary, green/cyan neon
   Mobile-first, WCAG 2.2 AA, reduced-motion aware. Class names unchanged.
   ============================================================================ */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Anton-400.woff2') format('woff2')}
@font-face{font-family:'Plex';font-weight:400;font-display:swap;src:url('assets/fonts/IBMPlexSans-400.woff2') format('woff2')}
@font-face{font-family:'Plex';font-weight:500;font-display:swap;src:url('assets/fonts/IBMPlexSans-500.woff2') format('woff2')}
@font-face{font-family:'Plex';font-weight:600;font-display:swap;src:url('assets/fonts/IBMPlexSans-600.woff2') format('woff2')}
@font-face{font-family:'Plex';font-weight:700;font-display:swap;src:url('assets/fonts/IBMPlexSans-700.woff2') format('woff2')}
@font-face{font-family:'Mono';font-weight:400;font-display:swap;src:url('assets/fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'Mono';font-weight:500;font-display:swap;src:url('assets/fonts/IBMPlexMono-500.woff2') format('woff2')}

:root{
  /* champion-neon palette */
  --bg:#0C0A0D; --bg-2:#131017; --surf:#181420; --surf-2:#211B2B;
  --bone:#F2ECDF; --ink-2:#D8D2DE; --mut:#A59EAE; --mut-2:#7E7789;
  --line:rgba(255,179,92,.16); --line-2:rgba(255,179,92,.30); --line-cool:rgba(87,199,230,.20);
  --amber:#FF9E2C; --amber-bright:#FFB35C; --amber-deep:#E07F12; --ink-on-amber:#1A1208;
  --green:#2FD083; --green-bright:#5BE8A6; --cyan:#57C7E6;
  --accent-soft:rgba(255,158,44,.13);
  --glow-amber:0 0 0 4px rgba(255,158,44,.16),0 0 16px rgba(255,158,44,.5);
  --glow-cyan:0 8px 28px -12px rgba(87,199,230,.5);
  --shadow-1:0 2px 10px rgba(0,0,0,.4); --shadow-2:0 40px 80px -40px #000;
  --r-sm:8px; --r-md:13px; --r-lg:18px; --r-xl:24px;
  --tap:48px; --ease:cubic-bezier(.22,.61,.36,1); --t-fast:.16s; --t-mid:.28s; --maxw:1240px;
  /* aliases used across the app */
  --c-ink:var(--bone); --c-ink-2:var(--ink-2); --c-mut:var(--mut); --c-line:var(--line); --c-line-2:var(--line-2);
  --c-bg:var(--bg); --c-bg-2:var(--bg-2); --c-bg-3:var(--surf-2); --c-surf:var(--surf);
  --c-accent:var(--amber); --c-accent-ink:var(--amber-bright); --c-accent-soft:var(--accent-soft);
  --c-good:var(--green); --c-focus:var(--amber);
}
*{box-sizing:border-box}
html,body{margin:0}
.dbx{font-family:'Plex',system-ui,Segoe UI,Arial,sans-serif;color:var(--bone);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
.dbx *{box-sizing:border-box}
.dbx button{font:inherit;color:inherit}
.dbx img{display:block;max-width:100%}
.dbx :focus-visible{outline:none;box-shadow:var(--glow-amber);border-radius:8px}
.dbx .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.dbx .skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--ink-on-amber);padding:8px 14px;border-radius:8px;z-index:60;font-weight:700}
.dbx .skip:focus{left:8px}

/* headings = Anton, uppercase athletic */
.db-h1,.db-hero h2,.db-railhdr h3,.db-modal .phd h2,.db-quiz-q h3{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:.02em;line-height:1.04}
.db-brand{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em}
/* mono eyebrows / labels */
.db-step .lbl,.db-railhdr .hint,.bsum .ln,.db-foot,.db-help,.db-tag,.db-pill,.db-meta{font-family:'Mono',monospace}

/* shell */
.db-shell{max-width:var(--maxw);margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.db-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:11px 16px;
  background:rgba(12,10,13,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.db-brand{font-size:18px;white-space:nowrap}
.db-brand b{color:var(--amber)}
.db-stepper{display:flex;gap:6px;margin-left:auto;align-items:center}
.db-step{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--mut);font-weight:600}
.db-step .dot{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  background:var(--surf-2);color:var(--mut);border:1.5px solid var(--line)}
.db-step.on{color:var(--bone)} .db-step.on .dot{background:linear-gradient(180deg,var(--amber-bright),var(--amber));color:var(--ink-on-amber);border-color:var(--amber);box-shadow:0 0 14px rgba(255,158,44,.5)}
.db-step.done .dot{background:var(--green);color:#06210f;border-color:var(--green)}
.db-step .lbl{display:none;text-transform:uppercase;letter-spacing:.12em;font-size:10px}
@media(min-width:760px){.db-step .lbl{display:inline}}
.db-iconbtn{height:var(--tap);min-width:var(--tap);border:1.5px solid var(--line-2);background:rgba(255,255,255,.03);
  border-radius:12px;display:inline-flex;align-items:center;gap:6px;padding:0 13px;cursor:pointer;font-weight:600;font-size:13px;color:var(--bone);transition:border-color var(--t-fast),transform var(--t-fast)}
.db-iconbtn:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan);transform:translateY(-2px)}
.db-badgewrap{position:relative}
.db-badge{position:absolute;top:-6px;right:-6px;background:var(--amber);color:var(--ink-on-amber);border-radius:20px;font-size:11px;font-weight:800;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px}

.db-main{flex:1;display:flex;flex-direction:column}
.db-pad{padding:18px 16px}
.db-h1{font-size:clamp(1.7rem,4.4vw,2.5rem);margin:6px 0 4px}
.db-sub{color:var(--mut);font-size:13.5px;margin:0 0 16px;max-width:62ch}

/* preview stage */
.db-stage{position:relative;background:linear-gradient(180deg,var(--surf-2),var(--surf));border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;box-shadow:var(--shadow-2)}
.db-stage img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity var(--t-mid) var(--ease)}
.db-stage img.show{opacity:1}
.db-note{position:absolute;left:10px;bottom:10px;z-index:3;background:rgba(10,8,12,.82);color:var(--bone);
  font-family:'Mono',monospace;font-size:10.5px;letter-spacing:.02em;padding:6px 10px;border-radius:20px;backdrop-filter:blur(4px);max-width:70%;border:1px solid var(--line)}
.db-stage .chipline{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;gap:6px}
.db-pill{background:rgba(10,8,12,.82);color:var(--bone);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:20px;backdrop-filter:blur(4px);border:1px solid var(--line)}

/* grids / tiles */
.db-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.db-grid.big{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.db-grid.dense{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.db-tile{position:relative;border:1.5px solid var(--line);background:var(--surf);border-radius:var(--r-md);
  overflow:hidden;cursor:pointer;text-align:left;padding:0;color:var(--bone);transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.db-tile:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow-1)}
.db-tile[aria-checked="true"],.db-tile.sel{border-color:var(--amber);box-shadow:var(--glow-amber)}
.db-tile[aria-checked="true"]::after,.db-tile.sel::after{content:"✓";position:absolute;top:7px;right:7px;z-index:3;
  background:var(--green);color:#06210f;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800}
.db-tile img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--surf-2)}
.db-tile .cap{padding:9px 11px}
.db-tile .cap b{font-size:14px;font-weight:700;display:block;letter-spacing:-.01em}
.db-tile .cap small{color:var(--mut);font-size:11.5px;display:block;margin-top:2px}
.db-tag{position:absolute;top:7px;left:7px;z-index:2;background:var(--amber);color:var(--ink-on-amber);font-size:9.5px;font-weight:600;
  padding:4px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.1em}
.db-tag.pop{background:linear-gradient(180deg,var(--amber-bright),var(--amber))}
.db-tag.cool{background:var(--cyan);color:#06222e}
.db-tag.prem{background:transparent;border:1px solid var(--line-2);color:var(--amber-bright)}

/* featured band */
.db-feat-wrap{margin:4px 0 8px}
.db-featgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.db-tile.feat img{aspect-ratio:16/11}
.db-tile.feat .cap{padding:12px 13px}
.db-tile.feat .cap b{font-size:16px}
.db-tier{display:inline-block;font-family:'Mono',monospace;font-size:11px;letter-spacing:.1em;margin-left:6px}
.db-tier.t1{color:var(--green)} .db-tier.t2{color:var(--amber-bright)} .db-tier.t3{color:var(--mut)}

/* section divider / filter chips */
.db-divider{display:flex;align-items:center;gap:12px;margin:22px 0 12px}
.db-divider .ttl{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.04em}
.db-divider .ln{flex:1;height:1px;background:var(--line)}
.db-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* horizontal rails */
.db-railhdr{display:flex;align-items:center;justify-content:space-between;margin:20px 0 9px}
.db-railhdr h3{font-size:15px;margin:0;letter-spacing:.03em}
.db-railhdr .hint{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em}
.db-rail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 9px;scroll-snap-type:x mandatory}
.db-rail::-webkit-scrollbar{height:7px}.db-rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
.db-opt{flex:0 0 auto;scroll-snap-align:start;border:1.5px solid var(--line);background:var(--surf);border-radius:12px;
  cursor:pointer;padding:6px;min-width:86px;text-align:center;color:var(--bone);transition:border-color var(--t-fast),transform var(--t-fast)}
.db-opt[aria-checked="true"]{border-color:var(--amber);box-shadow:var(--glow-amber)}
.db-opt:hover{border-color:var(--line-2);transform:translateY(-2px)}
.db-opt .sw{width:100%;height:54px;border-radius:8px;background-size:cover;background-position:center;border:1px solid rgba(0,0,0,.3)}
.db-opt img{width:100%;height:46px;object-fit:cover;border-radius:8px;background:var(--surf-2)}
.db-opt .nm{font-size:11px;font-weight:500;margin-top:5px;display:block;color:var(--ink-2);line-height:1.25}

/* chips */
.db-seg{display:flex;flex-wrap:wrap;gap:8px}
.db-chip{border:1.5px solid var(--line);background:rgba(255,255,255,.03);color:var(--bone);border-radius:99px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;min-height:44px;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.db-chip[aria-checked="true"],.db-chip.sel{border-color:var(--amber);background:var(--accent-soft);color:var(--amber-bright)}
.db-chip:hover{border-color:var(--line-2)}

/* buttons */
.db-btn{appearance:none;border:0;border-radius:var(--r-md);padding:14px 22px;font-weight:700;font-size:15px;cursor:pointer;min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform var(--t-fast),box-shadow var(--t-fast),filter var(--t-fast)}
.db-btn.primary{background:linear-gradient(180deg,var(--amber-bright),var(--amber));color:var(--ink-on-amber);box-shadow:0 10px 30px -14px rgba(255,158,44,.8)}
.db-btn.primary:hover{transform:translateY(-3px);box-shadow:0 16px 38px -14px rgba(255,158,44,.9)}
.db-btn.primary:active{transform:translateY(0)}
.db-btn.ghost{background:rgba(255,255,255,.04);border:1.5px solid var(--line-2);color:var(--bone)}
.db-btn.ghost:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.db-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.db-btn.block{width:100%}
.db-link{background:none;border:0;color:var(--cyan);text-decoration:none;cursor:pointer;font-weight:700;font-size:13px;padding:6px;border-bottom:1px solid transparent}
.db-link:hover{border-bottom-color:var(--cyan)}

/* sticky bottom bar */
.db-bottom{position:sticky;bottom:0;z-index:25;background:rgba(12,10,13,.9);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:11px 16px;display:flex;align-items:center;gap:12px}
.db-bsum{min-width:0;flex:1}
.db-bsum .ln{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.08em}
.db-bsum .pr{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--bone)}
.db-bsum .pr small{font-weight:500;color:var(--mut);font-size:11px}

/* entry hero */
.db-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:440px;display:flex;align-items:flex-end;border:1px solid var(--line);background:var(--surf)}
.db-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.db-hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,7,10,.15) 25%,rgba(8,7,10,.86) 100%)}
.db-hero .inner{position:relative;z-index:2;color:#fff;padding:28px;max-width:600px}
.db-hero h2{font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.02;margin:0 0 10px;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.db-hero h2 em{font-style:normal;color:var(--amber)}
.db-hero p{font-size:15px;margin:0 0 20px;color:#ECE7DF;text-shadow:0 1px 8px rgba(0,0,0,.7);font-family:'Plex'}
.db-hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.db-svc{position:absolute;top:14px;right:14px;z-index:3}
.db-svc .db-iconbtn{background:rgba(10,8,12,.55);color:var(--bone);border-color:rgba(242,236,223,.25)}

/* modal */
.db-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:14px;background:rgba(6,5,8,.66);backdrop-filter:blur(3px)}
.db-modal .panel{background:var(--bg-2);border-radius:var(--r-lg);max-width:560px;width:100%;max-height:92vh;overflow:auto;box-shadow:var(--shadow-2);border:1px solid var(--line-2)}
.db-modal .phd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-2);z-index:1}
.db-modal .phd h2{font-size:17px;margin:0;letter-spacing:.03em}
.db-modal .pbody{padding:18px}
.db-x{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line-2);background:rgba(255,255,255,.03);cursor:pointer;font-size:16px;color:var(--bone)}

/* forms */
.db-field{margin-bottom:14px}
.db-field label{display:block;font-size:11px;font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.1em;font-family:'Mono',monospace;color:var(--mut)}
.db-field input,.db-field select,.db-field textarea{width:100%;padding:12px 13px;border:1.5px solid var(--line-2);border-radius:11px;font:inherit;background:var(--surf);color:var(--bone);min-height:var(--tap)}
.db-field input:focus,.db-field select:focus,.db-field textarea:focus{border-color:var(--amber);outline:none;box-shadow:var(--glow-amber)}
.db-field .err{color:#ff7a66;font-size:12px;margin-top:5px}
.db-field input[aria-invalid="true"]{border-color:#ff7a66}
.db-help{font-size:11px;color:var(--mut);margin-top:5px;letter-spacing:.02em}
.db-hp{position:absolute;left:-9999px}

/* trust */
.db-trust{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;margin-top:14px}
.db-trust .stars{color:var(--amber);font-weight:800;letter-spacing:2px}
.db-trust b{font-size:13.5px}
.db-trust small{color:var(--mut);font-size:12px;display:block}
.db-trust .rev{flex-basis:100%;font-size:12.5px;color:var(--ink-2);font-style:italic;border-top:1px dashed var(--line);padding-top:9px;margin-top:3px}

/* spec list */
.db-spec{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:12px 0;background:var(--surf)}
.db-spec .row{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.db-spec .row:last-child{border-bottom:0}
.db-spec .row span:first-child{color:var(--mut);font-family:'Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.db-spec .row span:last-child{font-weight:700;text-align:right}
.db-rvbar{height:9px;border-radius:6px;background:linear-gradient(90deg,#57C7E6,#2FD083,#FF9E2C);position:relative;margin:8px 0}
.db-rvbar .mk{position:absolute;top:-4px;width:3px;height:17px;background:var(--bone);border-radius:2px}

.db-pricebox{background:var(--accent-soft);border:1px solid var(--line-2);border-radius:var(--r-md);padding:15px 16px;margin:12px 0}
.db-pricebox .big{font-family:'Anton',Impact;font-size:30px;letter-spacing:.01em;color:var(--amber-bright)}
.db-pricebox .mo{font-size:13px;color:var(--ink-2);font-weight:600;margin-top:2px}
.db-pricebox .inc{font-size:11.5px;color:var(--mut);margin-top:6px}
.db-est{background:var(--surf);border:1px dashed var(--line-2);border-radius:var(--r-md);padding:14px 15px;margin:12px 0;font-size:13px;color:var(--ink-2)}

/* compare */
.db-cmp{width:100%;border-collapse:collapse;font-size:13px}
.db-cmp th,.db-cmp td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.db-cmp th{background:var(--surf);font-weight:700}
.db-cmp img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px}

.db-info{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);color:var(--mut);font-size:12px;font-weight:800;cursor:pointer;background:transparent}
.db-info:hover{border-color:var(--cyan);color:var(--cyan)}
.db-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--amber);color:var(--ink-on-amber);padding:11px 18px;border-radius:30px;font-size:13px;font-weight:700;z-index:90;box-shadow:0 16px 40px -16px rgba(255,158,44,.8)}
.db-foot{padding:18px 16px;color:var(--mut-2);font-size:10.5px;text-align:center;border-top:1px solid var(--line);letter-spacing:.04em}
.db-cols{display:grid;gap:18px}
@media(min-width:880px){.db-cols.split{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
.db-cols.split>*{min-width:0}
.db-sticky-preview{position:sticky;top:66px}

/* live-render loader */
.db-shimmer{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(12,10,13,.6);backdrop-filter:blur(3px);color:var(--bone);font-family:'Mono',monospace;font-size:12px;letter-spacing:.06em}
.db-shimmer.on{display:flex}
.db-spin{width:42px;height:42px;border:4px solid rgba(255,158,44,.25);border-top-color:var(--amber);border-radius:50%;animation:db-spin 1s linear infinite}
@keyframes db-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .dbx *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .db-stage img{transition:none!important}
  .db-btn.primary:hover,.db-tile:hover,.db-iconbtn:hover,.db-opt:hover{transform:none!important}
}