:root {
  color-scheme: light;
  --paper: #f6f5ee;
  --ink: #1a241c;
  --muted: #555f52;
  --line: #d7dacf;
  --forest: #192b21;
  --lime: #d9f170;
  --body: Arial, Helvetica, sans-serif;
  --mono: Consolas, 'Courier New', monospace;
  --display: Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--body); }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
figure, h1, h2, h3, p { margin: 0; }
img { display: block; width: 100%; height: auto; }
:focus-visible { outline: 2px solid #527225; outline-offset: 4px; }

.wrap { width: min(100% - 88px, 1400px); margin-inline: auto; }
.preview-strip { display: flex; justify-content: center; gap: 14px; padding: 8px 16px; background: var(--forest); color: var(--lime); font: 700 10px/1.2 var(--mono); letter-spacing: .16em; }
.preview-strip span { color: #91a284; }
.site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 72px; padding: 0 max(44px, calc((100vw - 1400px) / 2)); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; justify-self: start; gap: 7px; font-size: 23px; font-weight: 900; letter-spacing: -.08em; white-space: nowrap; }
.wordmark span { margin-left: 5px; padding-left: 10px; border-left: 1px solid var(--line); font: 700 10px var(--mono); letter-spacing: .13em; }
.site-header nav { display: flex; gap: 34px; font-size: 13px; font-weight: 700; }
.site-header nav a:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.bag-button { display: inline-flex; justify-self: end; align-items: center; gap: 8px; padding: 6px 0 6px 9px; border: 0; background: transparent; color: inherit; font-size: 13px; font-weight: 700; }
.bag-count { display: grid; place-items: center; min-width: 23px; height: 23px; padding-inline: 4px; border-radius: 50%; background: var(--lime); font: 700 11px var(--mono); }

.product-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; gap: clamp(28px, 5vw, 80px); padding-block: 29px 55px; }
.hero-media { position: relative; min-width: 0; min-height: 540px; overflow: hidden; isolation: isolate; border-radius: 10px; background: #202921; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-media::after { position: absolute; z-index: 0; inset: 66% 0 0; background: linear-gradient(transparent, #121b16d9); content: ''; pointer-events: none; }
.hero-media figcaption { position: absolute; z-index: 1; inset: auto 0 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 25px; color: #f5f6e9; font: 11px var(--mono); }
.media-index { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .12em; }
.media-index span { width: 24px; height: 1px; background: var(--lime); }
.product-info { align-self: center; min-width: 0; padding-block: 8px; }
.eyebrow { display: flex; align-items: center; gap: 9px; font: 700 11px/1.4 var(--mono); letter-spacing: .14em; }
.status-dot { display: inline-block; flex: 0 0 8px; height: 8px; border-radius: 50%; background: #729136; }
h1 { margin-top: 14px; font: 500 clamp(34px, 3.55vw, 57px)/1.02 var(--display); letter-spacing: -.065em; }
h1 em { color: #53694b; font-weight: 400; }
.intro { margin-top: 16px; max-width: 52ch; color: var(--muted); font-size: 15px; }
.product-specs { display: flex; flex-wrap: wrap; gap: 6px 13px; margin: 17px 0 21px; padding: 0 0 16px; border-bottom: 1px solid var(--line); list-style: none; }
.product-specs li { display: inline-flex; align-items: center; gap: 6px; color: #364637; font-size: 11px; font-weight: 700; }
.product-specs li::before { color: #557239; content: '✓'; }
fieldset { min-width: 0; margin: 0 0 15px; padding: 0; border: 0; }
legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 800; }
.step-label { margin-right: 6px; color: #53694b; font: 700 11px var(--mono); }
.strength-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.strength-options label, .pack { cursor: pointer; }
.strength-options label { position: relative; }
.strength-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.strength-options span { display: block; padding: 10px 6px; border: 1px solid var(--line); border-radius: 5px; background: #fcfcf5; text-align: center; font: 700 15px/1.3 var(--mono); }
.strength-options input:checked + span { border-color: #516b3a; background: #ebf4ce; box-shadow: inset 0 0 0 1px #516b3a; }
.strength-options input:focus-visible + span { outline: 2px solid #527225; outline-offset: 2px; }
.field-note { margin-top: 6px; color: var(--muted); font-size: 11px; }
.centered { text-align: center; }
.pack-options { display: grid; gap: 6px; }
.pack { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fcfcf5; }
.pack:has(input:checked) { border-color: #516b3a; background: #edf2e1; box-shadow: inset 0 0 0 1px #516b3a; }
.pack input { width: 15px; height: 15px; margin: 0; accent-color: #3e6330; }
.pack-copy { display: flex; flex-direction: column; gap: 1px; }
.pack-copy strong, .price { font-size: 13px; }
.pack-copy small { color: var(--muted); font-size: 10px; }
.savings { margin-left: 5px; padding: 3px 5px; border-radius: 3px; background: var(--lime); font: 700 9px var(--mono); white-space: nowrap; }
.primary-button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 49px; padding: 10px 17px; border: 1px solid var(--forest); border-radius: 6px; background: var(--forest); color: white; font-weight: 800; text-align: left; }
.primary-button span[aria-hidden='true'] { color: var(--lime); }
.primary-button:hover { background: #2c4637; }

.demo { padding-block: 55px; background: var(--forest); color: var(--paper); }
.demo-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(24px, 6vw, 100px); }
.demo .eyebrow, .demo .status-dot { color: var(--lime); }
.demo .status-dot { background: currentColor; }
h2 { margin-top: 10px; font: 500 clamp(37px, 4.4vw, 68px)/.98 var(--display); letter-spacing: -.065em; }
.demo-copy > p:not(.eyebrow, .demo-disclaimer) { max-width: 40ch; margin-top: 16px; color: #d6e0d3; }
.demo-controls { display: inline-flex; gap: 4px; margin-top: 20px; padding: 4px; border: 1px solid #6b7e70; border-radius: 6px; }
.demo-controls button { padding: 6px 11px; border: 0; border-radius: 3px; background: transparent; color: var(--paper); font-size: 12px; font-weight: 700; }
.demo-controls button[aria-pressed='true'] { background: var(--lime); color: var(--ink); }
.demo-controls button:focus-visible { outline-color: var(--lime); }
.demo-disclaimer { margin-top: 10px; color: #b5c5b7; font-size: 11px; }
.computer-scene { position: relative; display: grid; place-items: center; isolation: isolate; min-height: 304px; overflow: hidden; border: 1px solid #546557; border-radius: 9px; background: repeating-linear-gradient(38deg, #b6c3b00b 0 1px, transparent 1px 5px), radial-gradient(ellipse at 35% 15%, #677765, #36463d 57%, #252f2a); }
.road-line { position: absolute; top: -65%; left: 65%; width: 17px; height: 210%; transform: rotate(39deg); border-radius: 20px; background: #dee6ca65; filter: blur(4px); }
.handlebar { position: absolute; bottom: 9%; width: 100%; height: 22%; transform: rotate(-7deg); border: 14px solid #17211d; border-bottom: 0; border-radius: 35% 35% 0 0; box-shadow: 0 -2px 3px #b0bcaa45; }
.computer { position: relative; width: min(190px, 57%); padding: 13px; transform: rotate(-7deg); border: 2px solid #76816f; border-radius: 18px; background: #1a211d; box-shadow: 0 18px 34px #0007; }
.computer-screen { min-height: 150px; padding: 10px 9px; border: 2px solid #c2c9a3; border-radius: 7px; background: #cfd7ab; color: #18251c; text-align: center; font: 700 10px var(--mono); }
.computer-content { transition: filter .25s ease; }
.computer-scene[data-view='before'] .computer-content { filter: blur(4px); }
.computer-label { margin-top: 7px; font-size: 9px; letter-spacing: .09em; }
.computer-speed { margin-top: 5px; font-size: clamp(25px, 4.5vw, 38px); letter-spacing: -.10em; line-height: 1; white-space: nowrap; }
.computer-speed span { font-size: 10px; letter-spacing: 0; }
.computer-data { display: flex; justify-content: space-around; margin-top: 12px; padding-top: 7px; border-top: 1px solid #7b8a62; font-size: 8px; }
.computer-data strong { display: inline-block; margin-top: 4px; font-size: 11px; }
.computer-scene figcaption { position: absolute; right: 13px; bottom: 12px; padding: 6px 8px; border-radius: 3px; background: #17241be0; color: var(--lime); font: 700 9px var(--mono); letter-spacing: .1em; }

.fit-section { padding-block: 70px; }
.fit-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 29px 0 0; padding: 0; list-style: none; }
.fit-steps li { padding: 17px 10px 0 0; border-top: 1px solid #9ca997; }
.fit-number { display: inline-grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #e9eddc; font: 700 12px var(--mono); }
.fit-steps h3 { margin: 10px 0 4px; font-size: 16px; }
.fit-steps p { max-width: 37ch; color: var(--muted); font-size: 14px; }
.faq-section { padding-block: 52px 67px; border-top: 1px solid var(--line); background: #eeeee4; }
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 38px; }
.faq-list { border-top: 1px solid #bac1b1; }
details { border-bottom: 1px solid #bac1b1; }
summary { padding: 15px 0; font-size: 14px; font-weight: 800; cursor: pointer; }
details p { max-width: 64ch; padding: 0 0 15px 17px; color: var(--muted); font-size: 14px; }
.site-footer { padding-block: 19px; background: var(--forest); color: var(--paper); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.site-footer span, .site-footer a { font-size: 12px; }
.site-footer a { color: var(--lime); }

.bag-dialog { width: min(100% - 30px, 460px); max-height: 90vh; padding: 24px; border: 1px solid #859680; border-radius: 9px; background: var(--paper); color: var(--ink); }
.bag-dialog::backdrop { background: #101c15a0; }
.bag-heading, .bag-total, .bag-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bag-heading h2 { margin: 0; font-size: 39px; }
.close-bag { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: inherit; font-size: 24px; line-height: 1; }
.bag-items { margin: 14px 0 0; padding: 0; list-style: none; }
.bag-item { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.bag-item small { display: block; color: var(--muted); }
.bag-item button { display: block; margin: 3px 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-decoration: underline; }
.empty-bag { margin-top: 16px; color: var(--muted); }
.bag-total { margin-top: 15px; }
.bag-dialog .primary-button { margin-top: 17px; }

@media (max-width: 1050px) {
  .wrap { width: min(100% - 56px, 1400px); }
  .site-header { padding-inline: 28px; }
  .hero-media { min-height: 550px; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 34px); }
  .site-header { grid-template-columns: 1fr auto; min-height: 59px; padding-inline: 17px; }
  .site-header nav { display: none; }
  .product-layout, .demo-layout, .faq-layout { grid-template-columns: 1fr; }
  .product-layout { gap: 20px; padding-block: 15px 33px; }
  .hero-media { min-height: 0; aspect-ratio: 1.23; }
  .hero-media figcaption { padding: 13px; font-size: 10px; }
  .product-info { padding-block: 0; }
  h1 { font-size: clamp(35px, 7.8vw, 57px); }
  .intro { margin-top: 13px; }
  .demo, .faq-section { padding-block: 38px; }
  .demo-layout, .faq-layout { gap: 22px; }
  .computer-scene { min-height: 260px; }
  .fit-section { padding-block: 40px; }
  .fit-steps { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .fit-steps li { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
}