/* 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;
  /* brand list bullet — the wireframe cube mark (see BRAND.md §5 "Cube bullet") */
  --cube-bullet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FE4023' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpolygon points='50,6 90,29 90,73 50,96 10,73 10,29'/%3E%3Cpath d='M50 52L10 29M50 52L90 29M50 52L50 96'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
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 ---------- */
/* max-width matches --maxw so the hero shares the same left/right content
   edge as every .section below it (was 1280px — 40px wider per side). */
.hero{max-width:var(--maxw); margin:0 auto; padding:48px 48px 80px;
  display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center}
.hero>div{min-width:0} /* grid children default to min-width:auto — a long one-line eyebrow otherwise forces the column past narrow viewports */
.eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:24px; flex-wrap:wrap}
.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; flex-wrap:wrap}
.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; flex-wrap:wrap; 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 19px; 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:64px 48px}
.section.tight{padding-top:28px}
.section.tight-top{padding-top:12px}
.section.tight-bottom{padding-bottom:12px}
.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>div{min-width:0} /* same grid min-width:auto gotcha as .hero — long words otherwise force the column wide */
.detail:first-of-type{margin-top:48px}
.detail.flip .detail-media{order:2}
.detail-media{aspect-ratio:4/3; border:1px solid var(--border); border-radius:8px; overflow:hidden}
.detail-media.video{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; border-radius:8px}
.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:4px; width:14px; height:14px; background:var(--cube-bullet) center/contain no-repeat}

/* Full-width figure — a single image (default 16:9) spanning the whole
   column width. Set the ratio per section with `aspect:` (e.g. 16/9, 4/3). */
.figure-media{width:100%; aspect-ratio:16/9; margin-top:44px; border:1px solid var(--border); border-radius:8px; overflow:hidden}
.figure-list{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:14px 44px}
.figure-list li{display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--text2); line-height:1.5; flex:1 1 260px}
.figure-list li .tick{flex:0 0 auto; margin-top:4px; width:14px; height:14px; background:var(--cube-bullet) center/contain no-repeat}

/* 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)}
.footer a.totop{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text2); text-decoration:none; transition:color .2s}
.footer a.totop: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}
}

/* ============================================================
   SECTIONS-MODE ADDITIONS (v6 section catalog — pilot: kit-ops)
   Everything below only styles classes emitted by the `sections:`
   dispatch in landing.liquid; legacy pages never reference them.
   ============================================================ */

/* proof strip (social-proof stats + pills under the hero) */
.proof{border-top:1px solid var(--surface); background:var(--bg2)}
.proof .inner{max-width:var(--maxw); margin:0 auto; padding:26px 48px;
  display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap}
.proof .pills{display:flex; gap:10px; flex-wrap:wrap}
.proof .pill{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
.proof .pill.orange{color:var(--orange); border:1px solid rgba(254,64,35,.45)}
.proof .pill.teal{color:var(--teal); border:1px solid rgba(63,187,169,.55)}
.proof .pill.mono{color:var(--muted); border:1px solid var(--border)}
.proof .cells{display:flex; flex-wrap:wrap; border:1px solid var(--border); border-radius:8px; overflow:hidden}
.proof .cell{padding:14px 20px; border-right:1px solid var(--border); text-align:center}
.proof .cell:last-child{border-right:none}
.proof .num{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:20px; color:var(--text)}
.proof .num.accent{color:var(--orange)}
.proof .cap{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.proof .note{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; color:var(--muted); width:100%; text-align:center}

/* prose block */
.prose{max-width:70ch; margin-top:22px}
.prose p{font-size:16px; line-height:1.65; color:var(--text2); margin:0 0 16px}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--orange)}
.prose strong,.prose b{color:var(--text); font-weight:600}

/* prose + looping clip — set `mp4:` on a prose section to park a self-hosted
   silent loop beside the copy. `mp4_aspect:` overrides the tall default. */
.prose-split{display:grid; grid-template-columns:1fr minmax(0,260px); gap:56px; align-items:center; margin-top:22px}
.prose-split>div{min-width:0} /* grid min-width:auto gotcha — long words otherwise force the column wide */
.prose-split .prose{max-width:none; margin-top:0}
.prose-list{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px}
.prose-list li{display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--text2); line-height:1.5}
.prose-list li .tick{flex:0 0 auto; margin-top:4px; width:14px; height:14px; background:var(--cube-bullet) center/contain no-repeat}
.clip-media{position:relative; margin:0; aspect-ratio:1/3; border:1px solid var(--border);
  border-radius:8px; overflow:hidden; background:#0B0D0F}
.clip-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1}
.clip-media .corner{z-index:2}
.clip-media .img-label{z-index:2; text-shadow:0 1px 4px rgba(0,0,0,.6)}
@media (max-width:900px){
  .prose-split{grid-template-columns:1fr; gap:32px}
  .clip-media{max-width:240px; margin:0 auto}
}

/* feature-card PRO pill — own line under the title, never breaks mid-pill */
.fpill-row{margin:7px 0 0}
.fpill{display:inline-block; white-space:nowrap; font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:10px; letter-spacing:.1em;
  color:var(--orange); border:1px solid rgba(254,64,35,.45); border-radius:999px; padding:2px 7px; vertical-align:middle}

/* single-video caption */
.vcaption{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em; color:var(--muted); margin:14px 0 0}

/* video-list ("see it in motion" link rows) */
.vlist{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:44px}
.vrow{display:flex; align-items:center; gap:12px; background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:14px 16px; text-decoration:none; transition:border-color .2s}
.vrow:hover{border-color:var(--orange)}
.vtag{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--orange)}
.vlabel{font-size:14.5px; font-weight:600; color:var(--text)}
.varrow{margin-left:auto; color:var(--orange)}

/* gallery */
.gallery{display:grid; gap:22px 12px; margin-top:44px}
.gallery.cols-2{grid-template-columns:repeat(2,1fr)}
.gallery.cols-3{grid-template-columns:repeat(3,1fr)}
.gallery figure{margin:0}
.gallery img{display:block; width:100%; object-fit:cover; border:1px solid var(--border); border-radius:6px}
.gallery figcaption{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--muted); margin-top:8px}

/* comparison table (vs Asset Browser, Free vs Pro, ...) */
.cmp{border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-top:44px}
.cmp-head,.cmp-group,.cmp-row{display:grid; grid-template-columns:1fr 120px 120px}
.cmp-head{background:var(--surface2); border-bottom:1px solid var(--divider)}
.cmp-head .cmp-col{padding:12px 8px; text-align:center; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; line-height:1.2; color:var(--text2)}
.cmp-head .cmp-col.a.teal{color:var(--teal)}
.cmp-head .cmp-col.b{color:var(--orange); background:rgba(254,64,35,.06)}
.cmp-group{background:#10131A; border-bottom:1px solid var(--divider)}
.cmp-group>div:first-child{padding:9px 16px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.cmp-group .bshade{background:rgba(254,64,35,.03)}
.cmp-row{border-bottom:1px solid var(--divider)}
.cmp-row:last-child{border-bottom:none}
.cmp-feat{padding:12px 16px; font-size:14px; line-height:1.45; color:var(--text2)}
.cmp-feat.strong{color:var(--text)}
.cmp-feat strong{color:var(--text); font-weight:600}
.cmp-mark{padding:12px 8px; text-align:center; font-size:15px; color:#4B525B}
.cmp-mark.yes{color:#8A929C}
.cmp-mark.yes.a-teal{color:var(--teal)}
.cmp-mark.b{background:rgba(254,64,35,.045)}
.cmp-mark.b.yes{color:var(--orange)}
.cmp-caption{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--muted); margin:14px 0 0}

/* deal / stats recessed box — negative margins bleed the box chrome outward
   so the TEXT inside aligns with the shared section content edge (the box
   border sits 40px outside it, not the copy 40px inside it). */
.deal{background:var(--bg2); border:1px solid var(--surface); border-radius:8px; padding:40px; margin-left:-40px; margin-right:-40px}
.deal h2{margin:12px 0 14px}
.deal .dbody{font-size:16px; line-height:1.65; color:var(--text2); margin:0 0 22px; max-width:80ch}
.deal .dbody strong,.deal .dbody b{color:var(--text); font-weight:600}
.dpill{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); border:1px solid rgba(63,187,169,.55); border-radius:999px; padding:3px 8px}
.ditems{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px 24px}
.ditem{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.55; color:var(--text2)}
.ditem .dash{flex:0 0 14px; width:14px; height:14px; margin-top:4px; background:var(--cube-bullet) center/contain no-repeat}
.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px; margin-top:26px}
.statgrid .num{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:34px; letter-spacing:-.02em; color:var(--text)}
.statgrid .cap{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px}

/* link cards (docs / catalog / discord) */
.lcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:44px}
.lcard{display:flex; align-items:center; gap:12px; background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:14px 16px; text-decoration:none; transition:border-color .2s}
.lcard:hover{border-color:var(--orange)}
.ltag{font-family:'IBM Plex Mono',monospace; font-size:11px}
.ltag.teal{color:var(--teal)}
.ltag.orange{color:var(--orange)}
.ltext{font-size:14.5px; font-weight:600; color:var(--text)}
.larrow{margin-left:auto; color:var(--orange)}

/* requirements key/value table */
.req{border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-top:44px}
.rrow{display:flex; justify-content:space-between; gap:16px; padding:12px 18px; border-bottom:1px solid var(--divider)}
.rrow:last-child{border-bottom:none}
.rkey{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.rval{font-size:14px; color:var(--text); text-align:right}

@media (max-width:720px){
  .gallery.cols-2,.gallery.cols-3{grid-template-columns:1fr}
  .cmp-head,.cmp-group,.cmp-row{grid-template-columns:1fr 76px 76px}
  .deal{padding:28px 22px; margin-left:-22px; margin-right:-22px}
}

/* lightbox — click-to-zoom for content images (see landing.liquid script) */
.gallery img,.detail-media img,.hero-media img{cursor:zoom-in}
.lb{position:fixed; inset:0; z-index:999; display:none; align-items:center; justify-content:center;
  background:rgba(14,16,19,.96); cursor:zoom-out; padding:28px}
.lb.on{display:flex}
.lb figure{margin:0; text-align:center}
.lb img{display:block; max-width:min(94vw,1800px); max-height:88vh; margin:0 auto;
  border:1px solid var(--border); border-radius:6px; box-shadow:0 14px 60px rgba(0,0,0,.65)}
.lb-cap{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em; color:var(--muted); margin-top:12px}