:root {
  --green: #173f35;
  --green-deep: #102e28;
  --lime: #c7f000;
  --charcoal: #202624;
  --warm: #f3f1e8;
  --steel: #7b8582;
  --line: rgba(32, 38, 36, .14);
  --shadow: 0 24px 70px rgba(16, 46, 40, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--charcoal); background: var(--warm); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.section-shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.site-header { height: 78px; padding: 0 max(24px, calc((100vw - 1160px) / 2)); display: flex; align-items: center; justify-content: space-between; background: var(--green); color: var(--warm); }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 760; letter-spacing: -.04em; }
.brand-light { font-weight: 400; }
.brand-mark { width: 29px; height: 29px; display: inline-grid; place-items: center; color: var(--lime); }
.brand-mark svg { width: 100%; height: 100%; }
.header-link { color: var(--lime); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.header-link span { margin-left: 5px; font-size: 16px; }
.hero { min-height: 620px; padding-top: 92px; padding-bottom: 90px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 76px; }
.eyebrow { margin: 0 0 20px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(199,240,0,.18); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 680px; margin-bottom: 25px; color: var(--green); font-size: clamp(44px, 5vw, 74px); line-height: .98; letter-spacing: -.075em; }
.hero-lede { max-width: 560px; margin-bottom: 30px; color: #53615d; font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 15px 20px; border-radius: 2px; font-size: 13px; font-weight: 800; letter-spacing: .01em; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,46,40,.15); }
.button-primary { color: var(--green-deep); background: var(--lime); }
.button-light { color: var(--green); background: var(--warm); }
.text-link { color: var(--green); font-size: 13px; font-weight: 800; }
.text-link span { margin-left: 8px; color: #78920b; }
.microcopy { margin: 28px 0 0; color: #78837f; font-size: 11px; letter-spacing: .04em; }
.hero-card { position: relative; padding: 24px 26px 20px; color: var(--warm); background: var(--green); box-shadow: var(--shadow); overflow: hidden; }
.hero-card::after { content: ""; position: absolute; width: 280px; height: 280px; right: -120px; top: -130px; border: 1px solid rgba(199,240,0,.18); border-radius: 50%; box-shadow: 0 0 0 36px rgba(199,240,0,.03), 0 0 0 72px rgba(199,240,0,.03); }
.card-topline, .card-bottomline { display: flex; justify-content: space-between; color: rgba(243,241,232,.58); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.kit-illustration { position: relative; min-height: 342px; padding: 38px 16px 24px; display: grid; place-items: center; }
.case-body { position: relative; width: 84%; aspect-ratio: 1.25; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--warm); background: #252c2a; border: 5px solid #343c39; border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.3), 0 20px 28px rgba(0,0,0,.28); }
.case-body::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(243,241,232,.18); border-radius: 10px; }
.case-handle { position: absolute; z-index: 1; top: 12px; width: 110px; height: 34px; border: 8px solid #303936; border-bottom: 0; border-radius: 12px 12px 0 0; }
.case-latch { position: absolute; bottom: 28px; width: 16px; height: 27px; background: #303936; border-radius: 0 0 4px 4px; }
.case-latch.left { left: 13%; }.case-latch.right { right: 13%; }
.case-label { z-index: 1; display: flex; align-items: center; gap: 8px; color: var(--warm); font-size: 32px; font-weight: 760; letter-spacing: -.06em; }
.case-label span span { font-weight: 400; }.mini-mark { color: var(--lime); font-size: 22px; }
.case-subtitle { z-index: 1; margin-top: 8px; color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .22em; }
.case-rule { z-index: 1; width: 62px; height: 3px; margin: 19px 0 16px; background: var(--lime); }
.case-note { z-index: 1; align-self: flex-start; margin-left: 14%; color: rgba(243,241,232,.65); font-size: 10px; line-height: 1.35; letter-spacing: .16em; }.case-note strong { color: var(--warm); font-weight: 800; }
.card-bottomline { color: var(--lime); }
.proof-strip { border-block: 1px solid var(--line); background: rgba(255,255,255,.28); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 27px 0; gap: 30px; }.proof-grid div { display: flex; flex-direction: column; gap: 4px; }.proof-grid strong { color: var(--green); font-size: 13px; }.proof-grid span { color: #77817d; font-size: 11px; }
.two-column { display: grid; grid-template-columns: .95fr 1fr; gap: 100px; padding-top: 128px; padding-bottom: 128px; }.two-column h2, .section-heading h2, .interview-panel h2 { max-width: 610px; color: var(--green); font-size: clamp(32px, 3.2vw, 48px); line-height: 1.02; letter-spacing: -.065em; }.body-copy { max-width: 490px; padding-top: 27px; color: #5d6965; font-size: 16px; line-height: 1.75; }.body-copy p + p { margin-top: 22px; }
.diagram-section { padding-bottom: 128px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 75px; }.diagram-copy h2 { max-width: 500px; margin-bottom: 22px; color: var(--green); font-size: clamp(32px, 3.1vw, 46px); line-height: 1.03; letter-spacing: -.065em; }.diagram-copy > p:not(.eyebrow) { max-width: 480px; color: #63706b; font-size: 15px; line-height: 1.75; }.diagram-note { max-width: 390px; margin-top: 28px; padding: 14px 16px; display: flex; gap: 11px; color: #6d7874; background: rgba(255,255,255,.45); border: 1px solid var(--line); font-size: 11px; line-height: 1.45; }.diagram-note strong { color: var(--green); font-size: 12px; }.note-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--lime); }.product-diagram { padding: 22px 23px 19px; color: var(--warm); background: var(--green); box-shadow: var(--shadow); }.diagram-caption { display: flex; justify-content: space-between; color: rgba(243,241,232,.58); font-size: 9px; font-weight: 800; letter-spacing: .17em; }.open-case { margin: 18px 0 20px; }.case-lid { min-height: 96px; padding: 22px 25px; display: flex; align-items: center; justify-content: space-between; color: var(--warm); background: #2c3733; border: 1px solid rgba(243,241,232,.18); border-bottom: 5px solid #111a17; border-radius: 12px 12px 4px 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }.lid-brand { font-size: 25px; font-weight: 760; letter-spacing: -.065em; }.lid-brand span:not(.lid-spark) { font-weight: 400; }.lid-spark { margin-right: 7px; color: var(--lime); font-size: 17px; }.lid-label { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .16em; }.case-base { position: relative; margin-top: -1px; padding: 23px 16px 19px; background: #252c2a; border: 5px solid #343c39; border-top: 0; border-radius: 4px 4px 14px 14px; box-shadow: 0 18px 22px rgba(0,0,0,.28); }.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.module { min-height: 96px; padding: 12px 11px; display: flex; flex-direction: column; justify-content: space-between; color: var(--warm); background: #34403b; border: 1px solid rgba(243,241,232,.12); border-radius: 5px; }.module-lime { color: var(--green-deep); background: var(--lime); border-color: var(--lime); }.module-guide { background: #e9e7dd; color: var(--green); }.module-refill { border-style: dashed; background: transparent; }.module-icon { min-height: 17px; color: var(--lime); font-size: 17px; line-height: 1; }.module-lime .module-icon { color: var(--green); }.module-guide .module-icon { color: #77857f; }.module-refill .module-icon { color: #a9b5b0; }.module-title { font-size: 9px; font-weight: 800; letter-spacing: .08em; }.module-text { color: rgba(243,241,232,.62); font-size: 8px; line-height: 1.35; }.module-lime .module-text { color: rgba(16,46,40,.72); }.module-guide .module-text { color: #718079; }.module-refill .module-text { color: #a9b5b0; }.case-base-edge { width: 75%; height: 4px; margin: 17px auto 0; background: #111a17; border-radius: 6px; }.diagram-key { display: flex; flex-wrap: wrap; gap: 15px; color: rgba(243,241,232,.55); font-size: 9px; letter-spacing: .03em; }.diagram-key span { display: inline-flex; align-items: center; gap: 5px; }.key-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }.key-swatch.lime { background: var(--lime); }.key-swatch.white { background: #e9e7dd; }.key-swatch.line { border: 1px dashed #a9b5b0; }
.feature-section { padding-bottom: 128px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 46px; }.section-heading .eyebrow { margin-bottom: 11px; }.section-heading h2 { margin-bottom: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.feature-card { min-height: 270px; padding: 27px; background: rgba(255,255,255,.56); border: 1px solid var(--line); }.feature-card h3 { margin: 48px 0 12px; color: var(--green); font-size: 20px; letter-spacing: -.03em; }.feature-card p { margin-bottom: 0; color: #66716d; font-size: 14px; line-height: 1.65; }.feature-number { color: #84928d; font-size: 11px; font-weight: 800; letter-spacing: .1em; }.accent-card { color: var(--green); background: var(--lime); border-color: var(--lime); }.accent-card h3, .accent-card p { color: var(--green-deep); }.accent-card .feature-number { color: #5c7102; }
.interview-panel { margin-bottom: 100px; color: var(--warm); background: var(--green); }.interview-inner { min-height: 315px; padding: 53px 62px; display: flex; align-items: center; justify-content: space-between; gap: 60px; background: linear-gradient(115deg, rgba(23,63,53,.95), rgba(16,46,40,.98)); }.eyebrow-dark { color: var(--lime); }.interview-panel h2 { max-width: 600px; margin-bottom: 20px; color: var(--warm); }.interview-panel p:not(.eyebrow) { max-width: 590px; margin-bottom: 0; color: rgba(243,241,232,.72); font-size: 15px; line-height: 1.7; }.interview-cta { display: flex; min-width: 185px; flex-direction: column; align-items: flex-start; gap: 14px; }.interview-cta > span { color: rgba(243,241,232,.54); font-size: 11px; }
.site-footer { padding: 0 0 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--green); }.brand-mark.small { width: 19px; height: 19px; font-size: 18px; }.footer-right { display: flex; align-items: center; gap: 24px; color: #7c8783; font-size: 11px; }.footer-right a { color: var(--green); font-weight: 800; }
@media (max-width: 820px) { .hero, .two-column, .diagram-section { grid-template-columns: 1fr; gap: 50px; }.hero { padding-top: 66px; }.hero-card { max-width: 620px; }.proof-grid, .feature-grid { grid-template-columns: 1fr; }.proof-grid { gap: 18px; }.two-column { padding-top: 85px; padding-bottom: 85px; gap: 5px; }.body-copy { padding-top: 0; }.diagram-section { padding-bottom: 85px; }.product-diagram { max-width: 680px; }.section-heading { display: block; }.section-heading h2 { margin-top: 0; }.interview-inner { display: block; padding: 43px 34px; }.interview-cta { margin-top: 30px; }.feature-section { padding-bottom: 85px; }.interview-panel { margin-bottom: 70px; } }
@media (max-width: 520px) { .section-shell { width: min(100% - 34px, 1160px); }.site-header { padding-inline: 17px; }.header-link { font-size: 11px; }.hero { min-height: auto; padding-top: 57px; padding-bottom: 64px; }.hero-lede { font-size: 16px; }.hero-actions { gap: 19px; }.button { width: 100%; }.text-link { margin-left: 3px; }.hero-card { padding-inline: 15px; }.kit-illustration { min-height: 280px; }.case-label { font-size: 25px; }.case-subtitle { font-size: 8px; }.case-note { font-size: 8px; }.product-diagram { padding-inline: 12px; }.case-lid { padding-inline: 15px; }.lid-brand { font-size: 20px; }.lid-label { font-size: 7px; }.case-base { padding-inline: 9px; }.case-grid { gap: 5px; }.module { min-height: 85px; padding: 8px; }.module-title { font-size: 7px; }.module-text { font-size: 7px; }.diagram-key { gap: 8px; font-size: 8px; }.footer-right { flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; } }

/* Exploded-view scrollytelling product section */
.exploded-section { position: relative; padding: 120px 0 150px; background: var(--warm); border-top: 1px solid var(--line); }
.exploded-layout { display: grid; grid-template-columns: .78fr 1.22fr; align-items: start; gap: 70px; }
.exploded-copy { padding-top: 13px; }
.exploded-copy h2 { max-width: 510px; margin: 0 0 23px; color: var(--green); font-size: clamp(34px, 3.5vw, 52px); line-height: 1.01; letter-spacing: -.07em; }
.exploded-intro { max-width: 455px; margin: 0; color: #66736e; font-size: 15px; line-height: 1.75; }
.exploded-steps { margin-top: 36px; }
.exploded-step { min-height: 69vh; max-width: 475px; padding: 20px 0 80px; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .35s ease; }
.exploded-step.is-active { opacity: 1; }
.step-index { color: #83908b; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.exploded-step h3 { max-width: 450px; margin: 30px 0 14px; color: var(--green); font-size: clamp(26px, 2.4vw, 38px); line-height: 1.04; letter-spacing: -.06em; }
.exploded-step p { max-width: 410px; margin: 0; color: #6b7772; font-size: 14px; line-height: 1.7; }
.exploded-visual { --diagram-progress: 0; position: sticky; top: 88px; height: min(720px, calc(100vh - 118px)); min-height: 560px; padding: 21px 24px 18px; overflow: hidden; color: var(--warm); background: var(--green); box-shadow: var(--shadow); }
.exploded-visual::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 82% 12%, rgba(199,240,0,.13), transparent 26%), linear-gradient(135deg, rgba(255,255,255,.03), transparent 42%); }
.visual-meta, .visual-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; color: rgba(243,241,232,.58); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.visual-grid { position: absolute; inset: 55px 24px 53px; opacity: .22; background-image: linear-gradient(rgba(243,241,232,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(243,241,232,.08) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent); }
.exploded-svg { position: relative; z-index: 1; width: 100%; height: calc(100% - 28px); min-height: 445px; display: block; }
.svg-shadow { fill: #0d1613; opacity: .7; }
.visual-footer { align-items: center; gap: 15px; color: rgba(243,241,232,.56); font-size: 8px; letter-spacing: .1em; }
.visual-footer span { display: inline-flex; align-items: center; gap: 6px; }
.footer-dot { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }.footer-dot.lime { background: var(--lime); }.footer-dot.pale { background: #e7e5da; }.footer-dot.dash { border: 1px dashed #aab4af; }

@media (max-width: 930px) {
  .exploded-section { padding-top: 90px; }
  .exploded-layout { grid-template-columns: 1fr; gap: 0; }
  .exploded-visual { order: -1; top: 68px; height: min(620px, calc(100vh - 100px)); min-height: 480px; margin-bottom: 28px; }
  .exploded-copy { padding-top: 16px; }
  .exploded-intro { max-width: 620px; }
  .exploded-steps { margin-top: 20px; }
  .exploded-step { min-height: 58vh; max-width: 620px; }
}
@media (max-width: 560px) {
  .exploded-section { padding: 70px 0 90px; }
  .exploded-visual { top: 58px; height: min(520px, calc(100vh - 78px)); min-height: 390px; padding: 15px 12px 13px; }
  .visual-grid { inset: 44px 12px 43px; background-size: 27px 27px; }
  .exploded-svg { min-height: 330px; }
  .visual-meta, .visual-footer { font-size: 7px; letter-spacing: .1em; }
  .visual-footer { gap: 7px; flex-wrap: wrap; }
  .exploded-step { min-height: 62vh; padding-bottom: 60px; }
  .exploded-step h3 { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .exploded-step { transition: none; }
}