:root { color-scheme:light dark; --bg:#e8ebed; --ink:#20262b; --muted:#56636d; --blue:#275fc2; --line:#cdd4d9; --surface:#fff; --hover:#f1f4f6; --selected:#f5f7f9; --header:#e8ebedf5; --chip:#fffffff0; --control-border:#aab6bf; --swatch-border:#0002; --button:#275fc2; --button-hover:#17499f; --font:'Arimo',Arial,sans-serif; --mono:'Cousine',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:86px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a,summary,input { -webkit-tap-highlight-color:transparent; }
button,summary { cursor:pointer; }
:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
h1,h2,p,figure,blockquote { margin:0; }
.skip-link { position:fixed; z-index:30; top:10px; left:10px; background:var(--surface); padding:14px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header { position:fixed; top:0; left:0; right:0; height:78px; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 4vw; border-bottom:1px solid var(--line); background:var(--header); }
.wordmark { display:inline-flex; align-items:center; gap:9px; font-size:22px; font-weight:700; letter-spacing:-1px; }
.wordmark-mark { display:block; height:40px; width:auto; }
.wordmark sup { font-size:9px; margin-left:2px; }
.eyebrow { font:10px/1.5 var(--mono); letter-spacing:1.4px; text-transform:uppercase; }
.header-note { color:var(--muted); }
.header-link { font-size:12px; min-height:44px; display:flex; align-items:center; gap:18px; }
main { padding-top:78px; }
.viewer { position:fixed; top:78px; bottom:0; right:0; width:55%; display:flex; flex-direction:column; padding:28px 4vw 24px 2vw; }
.viewer-top,.viewer-bottom { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.viewer-top { color:var(--muted); }

.insert-toggle { display:flex; gap:2px; align-self:flex-start; margin-top:0; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.insert-toggle button { background:transparent; border:0; padding:7px 14px; min-height:32px; font:9px/1 var(--mono); letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
.insert-toggle button.is-active { background:var(--ink); color:var(--bg); }
.insert-toggle button:hover:not(.is-active) { background:var(--hover); color:var(--ink); }
.assembly-canvas { flex:1; min-height:0; min-width:0; position:relative; }
.assembly-canvas canvas,.assembly-poster { display:block; width:100%; height:100%; max-width:100%; object-fit:contain; }
.assembly-poster { position:absolute; inset:0; }
.assembly-status { position:absolute; top:50%; left:0; width:100%; text-align:center; font:11px var(--mono); color:var(--muted); }
.part-labels { position:absolute; inset:0; pointer-events:none; z-index:2; }
.part-label { position:absolute; display:flex; align-items:center; transform:translate(-100%,-50%); white-space:nowrap; }
.part-label-chip { font:9px/1 var(--mono); letter-spacing:.9px; text-transform:uppercase; color:var(--ink); background:var(--chip); border:1px solid var(--line); border-radius:3px; padding:6px 9px; }
.part-label-stem { width:22px; height:1px; background:var(--blue); flex:none; margin:0 7px 0 8px; }
.part-label-dot { width:7px; height:7px; flex:none; border-radius:50%; background:var(--blue); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--blue); }
.viewer-bottom { border-top:1px solid var(--line); padding-top:15px; flex-wrap:wrap; }
#preview-caption { font:10px/1.6 var(--mono); color:var(--muted); }
.preview-actions { display:flex; gap:12px; }
.preview-actions button { background:transparent; border:0; border-bottom:1px solid var(--line); padding:10px 0; min-height:44px; font-size:11px; color:var(--ink); }
.preview-actions button:hover { color:var(--blue); border-color:var(--blue); }
.video-fallback { font-size:11px; text-decoration:underline; }
.story { width:45%; padding:0 3vw 0 4vw; }
.story-step { min-height:calc(100svh - 78px); display:flex; align-items:center; padding:64px 0; }
.story-step + .story-step { border-top:1px solid var(--line); }
.step-content { width:100%; max-width:480px; }
.step-number { color:var(--muted); margin-bottom:28px; }
h1 { font-size:clamp(42px,4.55vw,68px); letter-spacing:-.05em; line-height:1.03; font-weight:600; }
h1 span { color:var(--muted); }
h2 { font-size:clamp(38px,4.3vw,60px); letter-spacing:-.05em; line-height:1.05; font-weight:500; }
.lead { font-size:18px; line-height:1.4; letter-spacing:-.3px; margin-top:25px; }
.description { max-width:370px; font-size:14px; line-height:1.7; color:var(--muted); margin-top:16px; }
.review-proof { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:18px; font-size:12px; }
.review-proof strong { font-weight:600; }
.review-proof > span:last-child { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.stars { color:var(--blue); font-size:11px; letter-spacing:1px; }
blockquote { font-size:15px; line-height:1.5; margin:17px 0 25px; }
cite { display:block; font-style:normal; font:9px var(--mono); color:var(--muted); margin-top:7px; }
.button { display:flex; align-items:center; justify-content:space-between; gap:26px; width:fit-content; background:var(--button); color:white; padding:17px 21px; min-height:52px; border-radius:3px; font-size:12px; }
.button:hover { background:var(--button-hover); }
.micro { color:var(--muted); font-size:12px; line-height:1.65; margin-top:13px; }
.benefits { font:11px/1.6 var(--mono); }
.field-label { display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.8px; margin:28px 0 12px; }
.generation-picker { border:0; padding:0; margin:28px 0 0; min-width:0; }
.generation-picker .field-label { padding:0; margin:0 0 12px; }
.generation-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.generation-button { position:relative; display:flex; flex-direction:column; justify-content:center; gap:7px; padding:14px 8px; min-height:90px; border:1px solid var(--control-border); border-radius:3px; text-align:center; cursor:pointer; }
.generation-button input { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.generation-button:has(input:checked) { background:var(--selected); border-color:var(--blue); color:var(--blue); }
.generation-button:has(input:focus-visible) { outline:3px solid var(--blue); outline-offset:3px; }
.generation-button:hover { background:var(--hover); }
.generation-year { font:10px var(--mono); color:var(--muted); }
.generation-button strong { font-size:13px; font-weight:500; }
.generation-detail { font-size:9px; color:var(--muted); }
.color-picker { border:0; padding:0; margin:27px 0 0; min-width:0; }
.color-picker legend { padding:0; width:100%; display:flex; justify-content:space-between; font:10px var(--mono); text-transform:uppercase; letter-spacing:.5px; margin-bottom:13px; }
.color-picker legend span { font-family:var(--font); text-transform:none; letter-spacing:0; font-size:11px; }
.color-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.insert-grid { grid-template-columns:repeat(4,1fr); gap:8px; }
.swatch { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:12px 2px 10px; min-height:76px; font-size:10px; color:var(--muted); border:1px solid transparent; border-radius:3px; cursor:pointer; text-align:center; }
.swatch input { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.swatch-dot { width:27px; height:27px; border:1px solid var(--swatch-border); border-radius:50%; background:var(--swatch); }
.swatch:has(input:checked) { background:var(--selected); color:var(--ink); border-color:var(--blue); }
.swatch:has(input:focus-visible) { outline:3px solid var(--blue); outline-offset:2px; }
.swatch:hover { background:var(--hover); }
.text-link { display:flex; gap:20px; align-items:center; min-height:44px; margin-top:22px; font-size:12px; color:var(--blue); }
.order-summary { border-top:1px solid var(--line); padding-top:15px; margin-top:27px; }
.order-summary p { display:flex; justify-content:space-between; gap:12px; font-size:12px; line-height:1.6; padding:4px 0; }
.order-summary p span { color:var(--muted); }
.order-summary strong { font-weight:500; }
.checkout-button { width:100%; margin-top:19px; }
details { border-top:1px solid var(--line); }
summary { list-style:none; display:flex; justify-content:space-between; padding:17px 0; font-size:14px; gap:12px; min-height:48px; }
summary::-webkit-details-marker { display:none; }
details p { font-size:12px; line-height:1.7; padding-bottom:18px; color:var(--muted); }
details p a { text-decoration:underline; display:block; color:var(--blue); margin-top:7px; }
footer { border-top:1px solid var(--line); padding:26px 0 30px; }
footer a { font-size:11px; }
footer p { color:var(--muted); font-size:9px; line-height:1.6; margin-top:13px; max-width:360px; }
footer .data-date { font-size:8px; }
.noscript-note { padding:16px; background:var(--surface); position:fixed; z-index:15; bottom:0; width:100%; font-size:13px; }
@media (min-width:1500px) { .story { padding-left:6vw; } .viewer { padding-right:6vw; } }
@media (max-width:1000px) and (min-width:701px) { .story { width:47%; } .viewer { width:53%; } .header-note { display:none; } h1 { font-size:44px; } .viewer-top .eyebrow { font-size:8px; } .color-grid { grid-template-columns:repeat(3,1fr); } .insert-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:700px) {
  html { scroll-padding-top:calc(clamp(230px, 34svh, 300px) + 76px); }
  .site-header { height:60px; padding-inline:22px; }
  .wordmark { font-size:19px; } .wordmark-mark { height:32px; } .header-note { display:none; } .header-link { font-size:11px; gap:9px; }
  main { padding-top:calc(clamp(230px, 34svh, 300px) + 60px); }
  .viewer { top:60px; bottom:auto; left:0; width:100%; height:clamp(230px, 34svh, 300px); z-index:5; background:var(--bg); padding:12px 22px 10px; border-bottom:1px solid var(--line); }
  .viewer-top .eyebrow { font-size:8px; letter-spacing:.5px; }
  .insert-toggle { margin-top:6px; } .insert-toggle button { padding:5px 10px; min-height:36px; font-size:9px; }
  .viewer-bottom { gap:5px; padding-top:5px; flex-wrap:nowrap; }
  .viewer-bottom, .rotate-hint { display:none; }
  #preview-caption { font-size:8px; max-width:50%; } .preview-actions { gap:10px; } .preview-actions button { font-size:10px; min-height:40px; padding-block:6px; }
  .story { width:100%; padding-inline:24px; }
  .story-step { min-height:55svh; padding:32px 0 42px; align-items:flex-start; }
  .step-content { max-width:none; } .step-number { margin-bottom:19px; font-size:9px; }
  h1 { font-size:clamp(39px,10.5vw,58px); } h1 span br { display:none; }
  h2 { font-size:40px; } h2 br { display:none; }
  .lead { font-size:16px; margin-top:19px; } .description { font-size:15px; margin-top:14px; }
  .review-proof { margin-top:20px; } blockquote { font-size:14px; }
  .color-grid { gap:4px; } .swatch { font-size:9px; } .insert-grid { gap:6px; }
  footer { padding-bottom:25px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.assembly-canvas.is-interactive { cursor:grab; touch-action:none; }
.assembly-canvas.is-interactive:active { cursor:grabbing; }
.rotate-hint { text-align:center; color:var(--muted); font:9px/1.5 var(--mono); padding:7px 0; }
@media(max-width:700px) { .rotate-hint { font-size:8px; padding:3px 0; } .preview-actions { gap:8px; } #preview-caption { max-width:42%; } .part-label-chip { font-size:8px; padding:5px 7px; } .part-label-stem { width:16px; margin:0 5px 0 6px; } }

/* Purchase details stay readable and available before the Etsy handoff. */
.product-fit { margin-top:12px; font-size:13px; font-weight:600; }
.hero-purchase { margin-top:27px; }
.hero-price { font-size:25px; font-weight:600; letter-spacing:-.6px; }
.hero-price span { font-size:12px; color:var(--muted); font-weight:400; letter-spacing:0; margin-left:6px; }
.hero-purchase .micro { margin-top:13px; }
.hero-purchase .button { margin-top:19px; }
.micro a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.preview-link { margin-top:12px; }
.intro blockquote { margin-bottom:6px; }
.button { font-size:14px; }
.kit-photo { display:flex; align-items:center; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.kit-photo img { width:110px; height:140px; object-fit:cover; border-radius:4px; }
.kit-photo figcaption { font-size:13px; line-height:1.6; color:var(--muted); max-width:180px; }
.load-preview { border:1px solid var(--blue); border-radius:3px; background:transparent; color:var(--blue); padding:9px 12px; min-height:44px; font-size:12px; }
.load-preview:hover { background:var(--selected); }
details[open] summary span { transform:rotate(45deg); }
@media(max-width:700px) {
  .intro { padding-top:24px; }
  .comparison-step .step-content { padding:0; }
  .comparison-step h2 { font-size:36px; }
  .comparison-step .description { margin-top:10px; line-height:1.45; }
  .comparison-step .comparison-photo { margin-top:8px; }
  .comparison-step .comparison-photo figcaption { margin-top:6px; }
  .comparison-hint { margin-top:6px; }
  .intro .step-number { margin-bottom:12px; }
  .intro h1 { font-size:clamp(34px,9vw,48px); }
  .hero-purchase { margin-top:22px; }
  .hero-purchase .button { width:100%; }
  .hero-price { font-size:23px; }
  .viewer-top { position:absolute; top:8px; right:22px; z-index:3; display:flex; }
  .viewer-top .eyebrow { display:none; }
  .viewer-options { position:absolute; top:8px; left:22px; z-index:3; margin:0; }
  .viewer-bottom { min-height:49px; }
  .viewer .assembly-canvas { margin-top:34px; }
  .viewer:has(.insert-toggle:not([hidden])) .assembly-canvas { margin-top:40px; }
  .part-labels { display:none; }
  .swatch { font-size:11px; }
  .color-picker legend { font-size:11px; }
  .order-summary p { font-size:13px; }
  .header-link { font-size:12px; }
}
@media(max-width:700px) {
  body.model-fullscreen-open { position:fixed; left:0; right:0; width:100%; overflow:hidden; }
  .viewer.is-fullscreen { position:fixed; inset:0; top:0; bottom:0; left:0; right:0; z-index:40; width:100%; height:100vh; height:100dvh; max-height:100dvh; padding:calc(env(safe-area-inset-top) + 12px) 18px calc(env(safe-area-inset-bottom) + 12px); border:0; }
  .viewer.is-fullscreen .viewer-top { position:relative; inset:auto; min-height:38px; justify-content:flex-end; }
  .viewer-top-actions { display:flex; align-items:center; gap:10px; }
  .close-model-fullscreen { display:flex; align-items:center; gap:8px; min-height:40px; padding:7px 11px; border:1px solid var(--line); border-radius:3px; background:var(--surface); color:var(--ink); font-size:12px; }
  .close-model-fullscreen span { font-size:18px; line-height:1; }
  .viewer.is-fullscreen .viewer-options { top:calc(env(safe-area-inset-top) + 12px); left:18px; }
  .viewer.is-fullscreen .assembly-canvas { flex:1; min-height:0; margin:10px 0 0 !important; touch-action:none; }
  .viewer.is-fullscreen .viewer-bottom { flex-wrap:wrap; padding-bottom:4px; }
  .viewer.is-fullscreen .rotate-hint { font-size:10px; padding:5px 0; }
}
@media(max-width:700px) and (max-height:680px) {
  .comparison-step .step-number { margin-bottom:4px; }
  .comparison-step h2 { font-size:28px; }
  .comparison-step .description { margin-top:4px; font-size:12px; line-height:1.25; }
  .comparison-step .comparison-photo { margin-top:4px; }
  .comparison-step .photo-reveal { aspect-ratio:794 / 300; }
  .comparison-step .comparison-photo figcaption { margin-top:4px; font-size:8px; }
  .comparison-hint { margin-top:4px; font-size:10px; }
}
#shipping { scroll-margin-top:12px; }
#shipping p + p { padding-top:0; }
.faq-title { margin:8px 0 18px; font-size:15px; font-weight:600; }

#installation { scroll-margin-top:12px; }
.installation-link { margin-top:12px; }
.installation-video { display:block; width:100%; height:auto; max-height:440px; object-fit:contain; background:#151515; border-radius:4px; }
.video-download a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

.comparison-step { display:block; position:relative; min-height:0; padding:0; }
.comparison-step .step-content { position:sticky; top:var(--comparison-sticky-top,86px); padding:32px 0; }
.comparison-photo { margin-top:24px; }
.photo-reveal { position:relative; overflow:hidden; border-radius:4px; aspect-ratio:794 / 420; }
.photo-reveal img { display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.photo-after { position:absolute; inset:0; z-index:0; }
.photo-before { position:absolute; inset:0; z-index:1; clip-path:inset(0 0 0 var(--before-width)); }
.comparison-divider { position:absolute; top:0; bottom:0; left:var(--before-width); width:2px; background:white; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 3px #0006; }

.comparison-photo figcaption { display:flex; justify-content:space-between; gap:12px; margin-top:10px; font:10px/1.5 var(--mono); color:var(--muted); }

/* Honor the visitor's appearance setting without changing product colors. */
@media (prefers-color-scheme:dark) {
  :root { --bg:#151b22; --ink:#edf1f6; --muted:#aab7c6; --blue:#91b6ff; --line:#394655; --surface:#222d39; --hover:#293646; --selected:#233247; --header:#151b22f5; --chip:#222d39f0; --control-border:#718197; --swatch-border:#ffffff66; --button:#3568ca; --button-hover:#2858b6; }
}

.viewer { background:var(--bg); color:var(--ink); }
.viewer-options { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:12px; }
.background-toggle { display:flex; align-items:center; gap:3px; font:9px/1 var(--mono); color:var(--muted); }
.background-toggle button { min-height:32px; padding:7px 10px; border:1px solid var(--line); border-radius:3px; background:transparent; color:var(--muted); }
.background-toggle button[aria-pressed="true"] { border-color:var(--blue); background:var(--selected); color:var(--blue); }
.background-toggle button:hover { background:var(--hover); }
.viewer[data-background="light"] { color-scheme:light; --bg:#e8ebed; --ink:#20262b; --muted:#56636d; --blue:#275fc2; --line:#cdd4d9; --surface:#fff; --hover:#f1f4f6; --selected:#f5f7f9; --chip:#fffffff0; }
.viewer[data-background="dark"] { color-scheme:dark; --bg:#151b22; --ink:#edf1f6; --muted:#aab7c6; --blue:#91b6ff; --line:#394655; --surface:#222d39; --hover:#293646; --selected:#233247; --chip:#222d39f0; }
@media(max-width:700px) {
  .viewer-options { margin-top:0; gap:4px; }
  .background-toggle button { min-height:28px; padding:5px 9px; }
  .assembly-canvas.is-interactive { touch-action:pan-y; }
}