/* Shared styles for AO gear guides (/gear/<vehicle>).
   Extracted so ~40 near-identical guide pages don't each carry a copy.
   Visual output is identical to the original inlined version. */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg-deep:#201f1a; --bg-dark:#282620; --bg-card:#2d2b24; --bg-mid:#302e27;
  --orange:#d96d1f; --orange-lt:#f07a2a; --khaki:#c4a55a;
  --text-hi:#ede4d2; --text-md:#c5b99f; --text-lo:#9c9283;
  --border:rgba(200,175,130,.10); --border-o:rgba(217,109,31,.30);
}
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--bg-deep); color:var(--text-hi); line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { max-width:1080px; margin:0 auto; padding:0 2rem; }

nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1rem 2rem; background:rgba(19,19,16,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.nav-logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.nav-logo img { height:34px; width:auto; }
.nav-logo b { font-family:'Bebas Neue',sans-serif; font-size:1.15rem; letter-spacing:.1em; color:var(--text-hi); line-height:1; }
.nav-logo .sub { font-family:'Bebas Neue',sans-serif; font-size:.72rem; letter-spacing:.22em; color:var(--orange); line-height:1; }
.nav-links { display:flex; align-items:center; gap:1.8rem; }
.nav-links a { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-md); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:var(--orange); }
.nav-cta { color:var(--bg-deep)!important; background:var(--orange); padding:.6rem 1.2rem; border-radius:8px; font-weight:700!important; transition:background .2s, transform .2s; }
.nav-cta:hover { background:var(--orange-lt); transform:translateY(-1px); }
@media(max-width:820px){ .nav-links a:not(.nav-cta){ display:none; } }

.crumb { padding:1.4rem 0 0; font-family:'Rajdhani',sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-lo); }
.crumb a { color:var(--text-lo); text-decoration:none; }
.crumb a:hover { color:var(--orange); }

.hero { padding:2rem 0 3rem; }
.eyebrow { font-family:'Rajdhani',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--orange); }
h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.6rem,6vw,4.4rem); line-height:1; letter-spacing:.01em; color:var(--text-hi); margin:.8rem 0 1rem; }
.lead { font-size:1.08rem; color:var(--text-md); max-width:640px; }

/* Dark plate — guide.js strips the PNGs' baked-in white background at render time. */
.veh-photo { margin:2rem 0 0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--bg-dark); padding:.6rem; }
.veh-photo img { display:block; width:100%; height:auto; max-height:240px; object-fit:contain; }

.diagram-shell { position:relative; margin:1.2rem 0 1rem; border:1px solid var(--border); border-radius:16px; background:linear-gradient(160deg,var(--bg-dark),var(--bg-deep)); overflow:hidden; }
/* Real Kitchen Cube render, inset in the diagram so the to-scale silver box is tied to the actual unit */
.cube-real { position:absolute; right:14px; bottom:64px; width:132px; max-width:34%; margin:0; text-align:center; pointer-events:none; }
.cube-real img { display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:10px; background:var(--bg-deep); }
.cube-real figcaption { margin-top:.35rem; font-family:'Rajdhani',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-lo); }
@media(max-width:640px){ .cube-real { position:static; width:100%; max-width:none; margin:0 auto .6rem; padding:0 1.1rem; } }
.diagram-bar { display:flex; align-items:center; gap:.8rem; padding:.7rem 1.1rem; border-bottom:1px solid var(--border); background:var(--bg-mid); }
.diagram-bar .tag { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-lo); }
.diagram-bar .live { margin-left:auto; font-family:'Rajdhani',sans-serif; font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--khaki); }
#bed-svg { display:block; width:100%; height:auto; padding:1.2rem; }
.bed-toggle { display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1.1rem 1.1rem; }
.bed-toggle button { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-lo); background:transparent; border:1px solid var(--border); border-radius:8px; padding:.5rem .9rem; cursor:pointer; transition:all .18s; }
.bed-toggle button.active { color:var(--bg-deep); background:var(--khaki); border-color:var(--khaki); }
.caption { font-size:.82rem; color:var(--text-lo); text-align:center; margin-bottom:2.5rem; }

section { padding:3rem 0; border-top:1px solid var(--border); }
h2 { font-family:'Bebas Neue',sans-serif; font-size:clamp(1.9rem,4vw,2.8rem); letter-spacing:.02em; color:var(--text-hi); margin-bottom:.4rem; }
h2 + .sub { color:var(--text-md); margin-bottom:1.8rem; max-width:640px; }
h3 { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-hi); margin-bottom:.8rem; }

.spec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.spec-cell { background:var(--bg-card); padding:1.2rem 1.3rem; }
.spec-cell .k { font-family:'Rajdhani',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-lo); margin-bottom:.4rem; }
.spec-cell .v { font-family:'Bebas Neue',sans-serif; font-size:1.7rem; letter-spacing:.02em; color:var(--text-hi); line-height:1; }
.spec-cell .v small { font-family:'Inter',sans-serif; font-size:.72rem; color:var(--text-md); display:block; margin-top:.35rem; letter-spacing:0; font-weight:400; }

.budget { border:1px solid var(--border); border-radius:14px; background:var(--bg-card); padding:1.6rem; margin-bottom:1.6rem; }
.budget-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem; gap:1rem; }
.budget-head .total { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; color:var(--orange); white-space:nowrap; }
.bar { height:16px; border-radius:8px; background:var(--bg-mid); overflow:hidden; display:flex; }
.bar span { display:block; height:100%; }
.legend { display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; margin-top:1rem; font-size:.85rem; color:var(--text-md); }
.legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:.45rem; vertical-align:middle; }
.loadlist { list-style:none; margin-top:1.2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.2rem 1.6rem; }
.loadlist li { display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; color:var(--text-md); padding:.55rem 0; border-bottom:1px solid var(--border); }
.loadlist li b { color:var(--text-hi); font-weight:500; }

.insight { border-left:3px solid var(--orange); background:rgba(217,109,31,.05); padding:1.1rem 1.3rem; border-radius:0 10px 10px 0; font-size:.96rem; color:var(--text-md); margin-top:1.4rem; }
.insight b { color:var(--text-hi); font-weight:600; }

.kc { display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center; border:1px solid var(--border-o); border-radius:16px; overflow:hidden; background:linear-gradient(160deg,rgba(217,109,31,.06),transparent); }
.kc-media img { width:100%; height:100%; object-fit:cover; display:block; min-height:280px; }
.kc-body { padding:2rem 2rem 2rem 0; }
@media(max-width:760px){ .kc{ grid-template-columns:1fr; } .kc-body{ padding:1.6rem; } }
.kc-body .badge { display:inline-block; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--khaki); border:1px solid var(--border-o); border-radius:100px; padding:.3rem .8rem; margin-bottom:1rem; }
.kc-body p { color:var(--text-md); margin-bottom:1rem; }
.kc-cta { display:inline-flex; align-items:center; gap:.5rem; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bg-deep); background:var(--orange); padding:.85rem 1.6rem; border-radius:10px; text-decoration:none; transition:background .2s, transform .2s; }
.kc-cta:hover { background:var(--orange-lt); transform:translateY(-1px); }

.faq details { border-bottom:1px solid var(--border); padding:1.1rem 0; }
.faq summary { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.02rem; letter-spacing:.02em; color:var(--text-hi); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--orange); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:'\2013'; }
.faq p { color:var(--text-md); margin-top:.8rem; font-size:.95rem; }

footer { border-top:1px solid var(--border); padding:2.4rem 2rem; text-align:center; }
.foot-links { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem 1.6rem; list-style:none; margin-bottom:1rem; }
.foot-links a { font-family:'Rajdhani',sans-serif; font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-lo); text-decoration:none; white-space:nowrap; }
.foot-links a:hover { color:var(--orange); }
.foot-copy { font-size:.76rem; color:var(--text-lo); }
.disclaimer { font-size:.78rem; color:var(--text-lo); margin-top:1rem; font-style:italic; }