/* CHIPPWALTERS product-page theme — extracted from site/kit-ops-pro.html.
   Design owns the look; content is driven by the .md frontmatter.
   Fonts are self-hosted (see fonts.css): Hanken Grotesk, Space Grotesk, IBM Plex Mono. */

:root{
  --bg:#0E1013; --bg2:#0C0E11; --surface:#1B1F25; --surface2:#171B20;
  --border:#2B3037; --divider:#23282E;
  --text:#F3F4F5; --text2:#A7ADB6; --muted:#737B86;
  --orange:#FE4023; --teal:#3FBBA9;
  --maxw:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--text);
  font-family:'Hanken Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
::selection{background:var(--orange); color:var(--bg)}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:48px; padding-right:48px}
.label{display:flex; align-items:center; gap:10px; margin-bottom:26px}
.label .rule{width:24px; height:2px; background:var(--orange)}
.label span.t{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text2)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:80; display:flex; align-items:center; justify-content:space-between;
  padding:18px 48px; border-bottom:1px solid var(--surface); background:rgba(14,16,19,.82); backdrop-filter:blur(10px)}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand .word{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; letter-spacing:.02em; color:var(--text)}
.brand .word .dot{color:var(--orange)}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a{font-size:14px; color:var(--text2); text-decoration:none; transition:color .2s}
.nav-links a:hover{color:var(--text)}
.btn-ghost{font-size:13.5px; color:var(--text); text-decoration:none; padding:8px 16px;
  border:1px solid var(--border); border-radius:5px; transition:border-color .2s}
.btn-ghost:hover{border-color:var(--orange)}

/* shared placeholder image treatment */
.ph{position:relative; background:
  radial-gradient(110% 90% at 65% 25%,rgba(254,64,35,.16),transparent 55%),
  radial-gradient(120% 120% at 20% 95%,rgba(255,255,255,.06),transparent 60%),#10131A;}
.ph::before{content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 32px);}
.ph .corner{position:absolute; top:16px; right:16px; width:14px; height:14px; border-top:2px solid var(--orange); border-right:2px solid var(--orange)}
.ph .corner.tl{top:16px; left:16px; right:auto; border:0; border-top:2px solid var(--teal); border-left:2px solid var(--teal)}
.ph .img-label{position:absolute; left:18px; bottom:16px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted)}

/* buttons */
.btn-primary{display:inline-flex; align-items:center; gap:9px; background:var(--orange); color:var(--bg);
  font-weight:600; font-size:15px; padding:14px 24px; border-radius:6px; text-decoration:none; transition:filter .2s}
.btn-primary:hover{filter:brightness(1.08)}
.btn-secondary{display:inline-flex; align-items:center; font-size:15px; color:var(--text);
  padding:14px 22px; border:1px solid var(--border); border-radius:6px; text-decoration:none; transition:border-color .2s, background .2s, color .2s}
.btn-secondary:hover{border-color:var(--orange)}
/* teal (secondary-accent) variant — used by the 2nd buy button */
.btn-secondary.teal{color:var(--teal); border-color:rgba(63,187,169,.55); background:rgba(14,16,19,.4)}
.btn-secondary.teal:hover{border-color:var(--teal); background:rgba(63,187,169,.12)}

/* ---------- breadcrumb ---------- */
.crumb{max-width:var(--maxw); margin:0 auto; padding:28px 48px 0; font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.05em; color:var(--muted)}
.crumb a{color:var(--muted); text-decoration:none; transition:color .2s}
.crumb a:hover{color:var(--orange)}
.crumb .sep{margin:0 8px; color:var(--border)}
.crumb .here{color:var(--text2)}

/* ---------- hero ---------- */
.hero{max-width:1280px; margin:0 auto; padding:48px 48px 80px;
  display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center}
.eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:24px}
.eyebrow .cat{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.eyebrow .pill{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; border:1px solid rgba(254,64,35,.45); color:var(--orange)}
.hero h1{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(44px,5.6vw,76px);
  line-height:1.02; letter-spacing:-.025em; margin:0; color:var(--text)}
.hero .tagline{font-size:19px; line-height:1.6; color:var(--text2); max-width:46ch; margin:26px 0 0}
.hero-cta{display:flex; align-items:center; gap:14px; margin-top:34px}
.hero-cta .price{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted)}
.hero-media{aspect-ratio:4/3; border:1px solid var(--border); border-radius:8px; overflow:hidden}
.specbar{display:flex; gap:0; margin-top:40px; border:1px solid var(--border); border-radius:8px; overflow:hidden; width:max-content; max-width:100%}
.specbar .cell{padding:16px 26px; border-right:1px solid var(--border)}
.specbar .cell:last-child{border-right:none}
.specbar .num{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:22px; color:var(--text)}
.specbar .num.accent{color:var(--orange)}
.specbar .cap{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:3px}

/* ---------- section scaffolding ---------- */
.section{max-width:var(--maxw); margin:0 auto; padding:90px 48px}
.section.tight{padding-top:40px}
.section h2{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(28px,3.4vw,42px);
  letter-spacing:-.02em; margin:0; color:var(--text)}
.section .sub{font-size:17px; line-height:1.6; color:var(--text2); max-width:54ch; margin:18px 0 0}
.divider-top{border-top:1px solid var(--surface)}

/* features */
.feature-video{position:relative; width:100%; aspect-ratio:16/9; margin-top:44px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#000}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px}
.feature{background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:26px; transition:border-color .25s}
.feature:hover{border-color:var(--orange)}
.feature .ix{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--orange); margin-bottom:18px}
.feature h3{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; line-height:1.2; color:var(--text); margin:0 0 10px}
.feature p{font-size:14.5px; line-height:1.6; color:var(--text2); margin:0}

/* alternating detail rows */
.detail{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:64px}
.detail:first-of-type{margin-top:48px}
.detail.flip .detail-media{order:2}
.detail-media{aspect-ratio:16/11; border:1px solid var(--border); border-radius:8px; overflow:hidden}
.detail-media.video{aspect-ratio:16/9; background:#000}
.detail h3{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(24px,2.8vw,32px); letter-spacing:-.01em; margin:0 0 16px; color:var(--text)}
.detail p{font-size:16px; line-height:1.65; color:var(--text2); margin:0}
.detail ul{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px}
.detail li{display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--text2); line-height:1.5}
.detail li .tick{flex:0 0 auto; margin-top:7px; width:7px; height:7px; background:var(--orange); border-radius:1px; transform:rotate(45deg)}

/* CTA banner */
.cta{border-top:1px solid var(--surface); border-bottom:1px solid var(--surface); background:var(--bg2)}
.cta .inner{max-width:var(--maxw); margin:0 auto; padding:80px 48px; text-align:center; display:flex; flex-direction:column; align-items:center}
.cta h2{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(30px,4vw,48px); letter-spacing:-.02em; margin:0; color:var(--text)}
.cta p{font-size:17px; line-height:1.6; color:var(--text2); max-width:50ch; margin:20px 0 0}
.cta .hero-cta{justify-content:center; margin-top:34px}

/* footer */
.footer{border-top:1px solid var(--surface); background:var(--bg2)}
.footer .inner{max-width:var(--maxw); margin:0 auto; padding:48px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px}
.footer .word{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--text)}
.footer .word .dot{color:var(--orange)}
.footer .copy{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted)}
.footer a.back{font-size:13.5px; color:var(--text2); text-decoration:none; transition:color .2s}
.footer a.back:hover{color:var(--orange)}

/* optional markdown body (only renders if the .md has body text) */
.extra{max-width:760px; margin:0 auto; padding:24px 48px 72px; font-size:16px; line-height:1.7; color:var(--text2)}
.extra h2,.extra h3{font-family:'Space Grotesk',sans-serif; color:var(--text); letter-spacing:-.01em}
.extra a{color:var(--orange)}
.extra img{max-width:100%; height:auto; border-radius:8px; border:1px solid var(--border)}
.extra iframe{width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:8px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; gap:36px}
  .features{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr; gap:32px}
  .detail.flip .detail-media{order:0}
  .nav-links a:not(.btn-ghost){display:none}
}