body{ margin:0; padding:0; font:14px -apple-system,BlinkMacSystemFont,sans-serif; }
img{ max-width:100%; }

:root{
    --bg:#FFFFFF; --surface:#F4F5F0; --surface-2:#E8EAE2;
    --ink:#17181A; --ink-soft:#585C56;
    --accent:#1F4B3A; --accent-strong:#163A2C;
    --flap:#FFFFFF;
    --line: rgba(23,24,26,0.14); --line-strong: rgba(23,24,26,0.30);
    --cell-bg:#181916; --cell-case:#0A0A09; --cell-ink:#F7F7F4; --cell-edge: rgba(247,247,244,.07);
    --cell-hinge: rgba(66,150,116,.6);
    --clr-black:#2C2B28; --clr-green:#2FAE62; --clr-purple:#9B4FD1;
    --focus: #1F4B3A;
    --shadow: 0 1px 0 rgba(23,24,26,0.06);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#111310; --surface:#191B16; --surface-2:#212319;
      --ink:#F5F5F1; --ink-soft:#B7BBAF;
      --accent:#4FCB86; --accent-strong:#6FE0A0;
      --line: rgba(245,245,241,0.14); --line-strong: rgba(245,245,241,0.28);
      --focus:#4FCB86;
      --shadow: 0 1px 0 rgba(0,0,0,0.4);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#111310; --surface:#191B16; --surface-2:#212319;
    --ink:#F5F5F1; --ink-soft:#B7BBAF;
    --accent:#4FCB86; --accent-strong:#6FE0A0;
    --line: rgba(245,245,241,0.14); --line-strong: rgba(245,245,241,0.28);
    --focus:#4FCB86;
    --shadow: 0 1px 0 rgba(0,0,0,0.4);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  html{ background:var(--bg); }
  body{ margin:0; background:var(--bg); min-height:100vh; }
  #page-root{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
    font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  }
  #page-root h1,#page-root h2,#page-root h3{
    font-family:'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-weight:700; letter-spacing:-0.01em; text-wrap:balance; margin:0;
  }
  #page-root p{ margin:0; max-width:38rem; }
  #page-root a{ color:inherit; }
  #page-root img,#page-root svg{ max-width:100%; display:block; }
  #page-root .mono{ font-family:'Martian Mono', ui-monospace, monospace; }
  #page-root .eyebrow{
    font-family:'Martian Mono', ui-monospace, monospace; font-weight:500;
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  }
  #page-root .wrap{ max-width:68rem; margin:0 auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
  #page-root section{ padding-block: clamp(3.5rem, 8vw, 6.5rem); border-top:1px solid var(--line); }
  #page-root section:first-of-type{ border-top:none; }
  #page-root .overflow-x{ overflow-x:auto; }

  #page-root a:focus-visible, #page-root button:focus-visible, #page-root input:focus-visible, #page-root select:focus-visible, #page-root textarea:focus-visible{
    outline: 2px solid var(--focus); outline-offset: 3px; border-radius:1px;
  }

  /* nav */
  #page-root .nav{ position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line); }
  #page-root .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.9rem; }
  #page-root .brand{ display:flex; align-items:center; gap:.6rem; font-family:'Martian Mono',monospace; font-weight:800; font-size:1rem; letter-spacing:.02em; text-decoration:none; }
  #page-root .nav-badge{ width:1.9rem; height:1.9rem; border-radius:50%; overflow:hidden; flex:0 0 auto; box-shadow:inset 0 0 0 1px var(--line-strong); }
  #page-root .nav-badge img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
  #page-root .nav-links{ display:flex; align-items:center; gap:clamp(1rem,3vw,2rem); list-style:none; margin:0; padding:0; }
  #page-root .nav-links a{ font-family:'Martian Mono',monospace; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); }
  #page-root .nav-links a:hover{ color:var(--ink); }
  #page-root .nav-links .btn{ color:var(--flap); }
  @media (max-width: 640px){ #page-root .nav-links{ gap:.9rem; } #page-root .nav-links .hide-sm{ display:none; } }

  /* buttons */
  #page-root .btn{
    display:inline-flex; align-items:center; gap:.5rem; font-family:'Martian Mono',monospace;
    font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; text-decoration:none;
    padding:.75rem 1.15rem; border-radius:2px; border:1px solid transparent; cursor:pointer;
    background:var(--accent); color:var(--flap); font-weight:700; transition:background .15s ease, transform .1s ease;
  }
  #page-root .btn:hover{ background:var(--accent-strong); }
  #page-root .btn:active{ transform:translateY(1px); }
  #page-root .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
  #page-root .btn.ghost:hover{ border-color:var(--ink); }
  #page-root .btn:disabled{ opacity:.5; cursor:not-allowed; }
  #page-root .btn.full{ width:100%; justify-content:center; }
  #page-root .link-arrow{ font-family:'Martian Mono',monospace; font-size:.82rem; text-decoration:none; color:var(--ink-soft); border-bottom:1px solid var(--line-strong); padding-bottom:2px; }
  #page-root .link-arrow:hover{ color:var(--ink); border-color:var(--ink); }

  /* flap cell component */
  #page-root .flap-row{ display:flex; gap:4px; flex-wrap:nowrap; }
  #page-root .cell{ display:block; --cs:2.4rem; width:var(--cs); height:calc(var(--cs)*1.18); flex:0 0 auto; perspective:calc(var(--cs)*5); position:relative; }
  #page-root .cell::after{ content:""; position:absolute; left:1px; right:1px; top:50%; height:1px; margin-top:-.5px; background:var(--cell-hinge); z-index:3; pointer-events:none; }
  #page-root .cell-half, #page-root .leaf{ display:block; position:absolute; left:0; right:0; height:50%; overflow:hidden; background:var(--cell-bg); color:var(--cell-ink); box-shadow: inset 0 0 0 1px var(--cell-edge); }
  #page-root .cell-half.top, #page-root .leaf-top{ top:0; border-radius:3px 3px 0 0; }
  #page-root .cell-half.bot, #page-root .leaf-bot{ bottom:0; border-radius:0 0 3px 3px; }
  #page-root .leaf{ backface-visibility:hidden; transform-style:preserve-3d; will-change:transform; }
  #page-root .leaf-top{ transform-origin:bottom; transform:rotateX(0deg); }
  #page-root .leaf-bot{ transform-origin:top; transform:rotateX(90deg); }
  #page-root .leaf-top.flip{ transition:transform .17s cubic-bezier(.6,.04,.98,.34); transform:rotateX(-90deg); }
  #page-root .leaf-bot.flip{ transition:transform .17s cubic-bezier(.13,.66,.4,1) .17s; transform:rotateX(0deg); }
  #page-root .glyph-box{ position:absolute; left:0; right:0; width:100%; height:200%; display:flex; align-items:center; justify-content:center; }
  #page-root .cell-half.top .glyph-box, #page-root .leaf-top .glyph-box{ top:0; }
  #page-root .cell-half.bot .glyph-box, #page-root .leaf-bot .glyph-box{ bottom:0; }
  #page-root .glyph{ font-weight:700; font-size:calc(var(--cs)*.6); line-height:1; }

  /* hero */
  #page-root .hero{ padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem,6vw,4rem); }
  #page-root .hero-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; }
  #page-root .hero-board{ background:var(--cell-case); padding:clamp(.5rem,1.4vw,.85rem); border-radius:3px; box-shadow: var(--shadow), 0 18px 50px -24px rgba(0,0,0,.5); margin-bottom:.6rem; width:fit-content; max-width:100%; overflow-x:auto; transition:background .2s ease; }
  #page-root .hero-board .flap-row{ gap:.28rem; }
  #page-root .case-picker{ display:flex; align-items:center; gap:.5rem; margin:0 0 1.65rem; }
  #page-root .case-picker-label{ font-family:'Martian Mono',monospace; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
  #page-root .case-dot{ width:1rem; height:1rem; border-radius:50%; border:none; padding:0; cursor:pointer; display:block; -webkit-appearance:none; appearance:none; }
  #page-root .case-dot.black{ background:var(--clr-black); }
  #page-root .case-dot.green{ background:var(--clr-green); }
  #page-root .case-dot.purple{ background:var(--clr-purple); }
  #page-root .case-dot:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
  #page-root .case-dot[aria-pressed="true"]{ box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
  #page-root .hero-sub{ font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--ink-soft); max-width:34rem; }
  #page-root .hero-cta{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:2rem; }

  /* batch strip */
  #page-root .batch-strip{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; padding-block:.9rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  #page-root .slots{ display:flex; gap:.3rem; }
  #page-root .slot{ width:1rem; height:1rem; border:1px solid var(--line-strong); position:relative; border-radius:1px; }
  #page-root .slot::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line-strong); }
  #page-root .slot.filled{ background:var(--accent); border-color:var(--accent); }
  #page-root .slot.filled::after{ background:rgba(0,0,0,.25); }
  #page-root .batch-strip .label{ font-family:'Martian Mono',monospace; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }

  /* generic section heading */
  #page-root .section-head{ display:grid; gap:1rem; grid-template-columns: minmax(0,1fr); margin-bottom:2.5rem; max-width:40rem; }
  #page-root .section-head h2{ font-size:clamp(1.5rem,3.4vw,2.15rem); }
  #page-root .section-head p{ color:var(--ink-soft); }

  /* meet */
  #page-root .meet-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
  #page-root .meet-board{ background:var(--cell-case); padding:.7rem; border-radius:3px; width:fit-content; max-width:100%; overflow-x:auto; }
  #page-root .meet-board .flap-row{ justify-content:center; }
  @media (max-width: 800px){ #page-root .meet-grid{ grid-template-columns:1fr; } #page-root .meet-board{ order:-1; } }

  /* products */
  #page-root .product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
  #page-root .product-card{ border:1px solid var(--line); padding:clamp(1.5rem,3vw,2.25rem); display:flex; flex-direction:column; gap:1.25rem; background:var(--surface); }
  #page-root .product-card .pname{ font-size:1.35rem; }
  #page-root .product-card .pchars{ color:var(--ink-soft); font-size:.95rem; }
  #page-root .product-card .board{ background:var(--cell-case); padding:.5rem; border-radius:3px; align-self:flex-start; max-width:100%; overflow-x:auto; height:3.3rem; display:flex; align-items:center; transition:background .2s ease; }
  #page-root .spec-list{ display:flex; flex-direction:column; gap:.55rem; margin:0; padding:0; border-top:1px solid var(--line); padding-top:1rem; }
  #page-root .spec-row{ display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; }
  #page-root .spec-row dt{ font-family:'Martian Mono',monospace; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; font-size:.72rem; }
  #page-root .spec-row dd{ margin:0; text-align:right; }
  #page-root .spec-row .price{ font-family:'Martian Mono',monospace; font-weight:700; font-size:.95rem; color:var(--ink); }
  #page-root .swatches{ display:inline-flex; gap:.35rem; vertical-align:middle; }
  #page-root .swatch{ width:.85rem; height:.85rem; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.06); display:inline-block; }
  #page-root .swatch.black{ background:var(--clr-black); }
  #page-root .swatch.green{ background:var(--clr-green); }
  #page-root .swatch.purple{ background:var(--clr-purple); }
  @media (max-width: 720px){ #page-root .product-grid{ grid-template-columns:1fr; } }

  /* how it works */
  #page-root .inside-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:clamp(2rem,5vw,4rem); }
  #page-root .chip-list{ display:flex; flex-direction:column; gap:1.5rem; margin-top:1.5rem; }
  #page-root .chip-item{ display:grid; grid-template-columns: 2.75rem 1fr; gap:1rem; }
  #page-root .chip-mark{ width:2.75rem; height:2.75rem; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:'Martian Mono',monospace; font-weight:700; font-size:.85rem; color:var(--accent); }
  #page-root .chip-item h3{ font-size:.95rem; margin-bottom:.35rem; text-transform:uppercase; letter-spacing:.03em; }
  #page-root .chip-item p{ color:var(--ink-soft); font-size:.94rem; }
  @media (max-width: 800px){ #page-root .inside-grid{ grid-template-columns:1fr; } }

  /* tech drawer */
  #page-root .tech-drawer{ margin-top:2rem; border-top:1px solid var(--line); padding-top:1.25rem; }
  #page-root .tech-drawer summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:'Martian Mono',monospace; font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); }
  #page-root .tech-drawer summary::-webkit-details-marker{ display:none; }
  #page-root .tech-drawer summary:hover{ color:var(--ink); }
  #page-root .tech-drawer .drawer-icon{ font-family:'Martian Mono',monospace; font-size:1rem; color:var(--accent); transition:transform .2s ease; flex:0 0 auto; }
  #page-root .tech-drawer[open] .drawer-icon{ transform:rotate(45deg); }
  #page-root .tech-drawer .drawer-body{ padding-top:1rem; max-width:36rem; }
  #page-root .tech-drawer .drawer-body p{ color:var(--ink-soft); font-size:.92rem; }
  #page-root .tech-drawer .drawer-body p + p{ margin-top:.75rem; }

  /* shop strip */
  #page-root .shop-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
  #page-root .shop-photo{ border:1px solid var(--line); overflow:hidden; }
  #page-root .shop-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; filter:saturate(.94) contrast(1.02); }
  #page-root .shop-photo figcaption{ padding:.75rem .9rem; font-size:.82rem; color:var(--ink-soft); border-top:1px solid var(--line); }
  @media (max-width: 720px){ #page-root .shop-grid{ grid-template-columns:1fr; } }

  /* use cases */
  #page-root .case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  #page-root .case-card{ display:flex; flex-direction:column; gap:1rem; }
  #page-root .case-card .board{ background:var(--cell-case); padding:.5rem; border-radius:3px; align-self:flex-start; max-width:100%; overflow-x:auto; }
  #page-root .case-card .board .flap-row{ gap:.22rem; }
  #page-root .case-card p{ color:var(--ink-soft); font-size:.92rem; }
  @media (max-width: 860px){ #page-root .case-grid{ grid-template-columns:1fr; } #page-root .case-card .board{ align-self:flex-start; } }

  /* about */
  #page-root .about-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
  #page-root .about-mark{ width:clamp(7rem,16vw,9.5rem); aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow); }
  #page-root .about-mark img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; transform:scale(1.06); }
  #page-root .about-grid p + p{ margin-top:1rem; }
  #page-root .team-strip{ display:flex; align-items:center; gap:1.1rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); }
  #page-root .team-photo{ width:4.25rem; height:4.25rem; border-radius:50%; overflow:hidden; flex:0 0 auto; box-shadow:inset 0 0 0 1px var(--line-strong); }
  #page-root .team-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
  #page-root .team-strip p{ font-size:.92rem; color:var(--ink-soft); }
  #page-root .team-strip strong{ color:var(--ink); }
  @media (max-width: 800px){ #page-root .about-grid{ grid-template-columns:1fr; } }

  /* reserve */
  #page-root .reserve-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
  #page-root .reserve-card{ border:1px solid var(--line); background:var(--surface); padding:clamp(1.5rem,3vw,2rem); }
  #page-root .field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
  #page-root .field label{ font-family:'Martian Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
  #page-root .field input[type="text"], #page-root .field input[type="email"], #page-root .field select, #page-root .field textarea{
    font-family:'Work Sans', sans-serif; font-size:.95rem; padding:.65rem .75rem; border:1px solid var(--line-strong);
    background:var(--bg); color:var(--ink); border-radius:2px; width:100%;
  }
  #page-root .field textarea{ resize:vertical; min-height:4.5rem; }
  #page-root .price-note{ font-family:'Martian Mono',monospace; font-size:.78rem; color:var(--ink-soft); margin-top:.35rem; }
  #page-root .price-note strong{ color:var(--accent); }
  #page-root .color-picker{ display:flex; gap:.6rem; flex-wrap:wrap; }
  #page-root .swatch-option{ position:relative; display:flex; align-items:center; gap:.4rem; padding:.4rem .65rem .4rem .5rem; border:1px solid var(--line-strong); border-radius:2px; cursor:pointer; font-size:.82rem; }
  #page-root .swatch-option input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
  #page-root .swatch-option .swatch{ width:.95rem; height:.95rem; }
  #page-root .swatch-option:has(input:checked){ border-color:var(--ink); }
  #page-root .swatch-option .swatch{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
  #page-root .swatch-option:has(input:checked) .swatch{ box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
  #page-root .swatch-option:has(input:focus-visible){ outline:2px solid var(--focus); outline-offset:2px; }
  #page-root .unit-preview{ margin-top:.75rem; }
  #page-root .unit-preview-case{ display:inline-flex; gap:3px; padding:.5rem; border-radius:5px; background:var(--clr-black); transition:background .25s ease; }
  #page-root .unit-preview-flap{ display:block; width:1rem; height:1.3rem; border-radius:2px; background:var(--cell-bg); box-shadow: inset 0 0 0 1px var(--cell-edge); }
  #page-root .check-row{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1.25rem; font-size:.88rem; color:var(--ink-soft); }
  #page-root .check-row input{ margin-top:.25rem; }
  #page-root .form-msg{ font-size:.85rem; margin-top:.85rem; }
  #page-root .form-msg.error{ color:#B3402E; }
  #page-root .form-msg.ok{ color:var(--accent); }
  #page-root .success-banner{ border:1px solid var(--accent); padding:1.1rem 1.25rem; margin-bottom:1.5rem; }
  #page-root .success-banner .eyebrow{ margin-bottom:.35rem; display:block; }
  @media (max-width: 800px){ #page-root .reserve-grid{ grid-template-columns:1fr; } }

  /* kids strip */
  #page-root .kids-strip{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; background:var(--surface); padding:clamp(1.75rem,4vw,2.5rem); border:1px solid var(--line); }
  #page-root .kids-form{ display:flex; gap:.6rem; flex-wrap:wrap; }
  #page-root .kids-form input{ flex:1 1 12rem; font-family:'Work Sans',sans-serif; font-size:.9rem; padding:.65rem .75rem; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); border-radius:2px; }
  @media (max-width: 760px){ #page-root .kids-strip{ grid-template-columns:1fr; } }

  /* footer */
  #page-root footer{ padding-block: clamp(2.5rem,5vw,3.5rem); border-top:1px solid var(--line); }
  #page-root .footer-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; }
  #page-root .footer-note{ color:var(--ink-soft); font-size:.85rem; max-width:26rem; }
  #page-root .foot-mono{ font-family:'Martian Mono',monospace; font-size:.75rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
  #page-root .speech-bubble{ width:6.25rem; height:auto; flex:0 0 auto; transform:rotate(-5deg); filter:drop-shadow(0 2px 3px rgba(0,0,0,.14)); }
  #page-root .pcard-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }