:root{
    --bg:#06100E;
    --bg-2:#08150F;
    --panel:rgba(255,255,255,.026);
    --panel-2:rgba(255,255,255,.042);
    --glass:rgba(10,24,21,.66);
    --bright:#00E5D4;
    --bright-2:#3CF2FF;
    --bright-ink:#04211D;
    --bright-rgb:0,229,212;
    --ink:#EAF7F4;
    --ink-2:#C3D8D3;
    --muted:#87A19C;
    --faint:#5D7570;
    --hair:rgba(0,229,212,.14);
    --hair-2:rgba(255,255,255,.07);
    --warn:#F0B860;
    --neg:#E08878;
    --r:16px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:hidden}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
       overflow-x:hidden;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  img{max-width:100%;display:block}
  a{color:inherit}
  ::selection{background:var(--bright);color:var(--bright-ink)}

  /* ---------- type system ----------
     Instrument Serif for display, Archivo for interface, Inter for reading,
     IBM Plex Mono for anything that is data: grades, dates, SKUs, prices. */
  .display{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.012em;line-height:1.02}
  .display em{font-style:italic;color:var(--bright);background:linear-gradient(104deg,var(--bright) 8%,#9CFFF4 48%,var(--bright-2) 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .ui{font-family:'Archivo',system-ui,sans-serif}
  .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

  .wrap{max-width:1280px;margin:0 auto;padding:0 30px}

  /* ---------- ambient ground. static, nothing reacts to scroll. ---------- */
  .ground{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .ground .g1{position:absolute;width:70vw;height:70vw;left:-22vw;top:-30vw;border-radius:50%;
    background:radial-gradient(circle,rgba(var(--bright-rgb),.11),transparent 62%);filter:blur(40px)}
  .ground .g2{position:absolute;width:52vw;height:52vw;right:-18vw;top:8vh;border-radius:50%;
    background:radial-gradient(circle,rgba(60,242,255,.055),transparent 64%);filter:blur(50px)}
  .ground .grid{position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:76px 76px;
    -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000,transparent 72%);
    mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000,transparent 72%)}
  .shell{position:relative;z-index:2}

  /* ---------- sections ---------- */
  section{padding:104px 0;position:relative}
  section+section{border-top:1px solid var(--hair-2)}
  h2.sec{font-size:clamp(2.1rem,4.2vw,3.3rem);margin-bottom:22px;max-width:19ch}
  .lead{color:var(--muted);max-width:640px;font-size:1.04rem;margin-bottom:52px}
  .lead b{color:var(--ink);font-weight:600}

  .panel{border:1px solid var(--hair-2);border-radius:var(--r);background:var(--panel);
    transition:border-color .22s ease,background .22s ease,transform .22s ease}
  .panel:hover{border-color:var(--hair);background:var(--panel-2);transform:translateY(-2px)}

  /* condition tiers */
  .tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  @media(max-width:860px){.tiers{grid-template-columns:1fr}}
  .tier{padding:32px 30px}
  .chip{display:inline-block;font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.13em;
    text-transform:uppercase;padding:6px 12px;border-radius:6px;margin-bottom:18px}
  .chip.c1{background:var(--bright);color:var(--bright-ink)}
  .chip.c2{background:rgba(var(--bright-rgb),.13);color:var(--bright);border:1px solid var(--hair)}
  .chip.c3{background:rgba(240,184,96,.11);color:var(--warn);border:1px solid rgba(240,184,96,.3)}
  .chip.c4{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--hair-2)}
  .tier h3{font-family:'Instrument Serif',serif;font-size:1.4rem;line-height:1.2;margin-bottom:11px}
  .tier p{color:var(--muted);font-size:.94rem}
  .tier ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:9px}
  .tier li{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--muted)}
  .tier li .m{color:var(--bright);flex-shrink:0;font-weight:700;line-height:1.5}
  .pricepoint{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair-2);
    font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
  .pricepoint b{color:var(--bright);font-weight:600}

  .callout{margin-top:26px;border:1px solid var(--hair-2);border-left:2px solid var(--bright);
    background:rgba(var(--bright-rgb),.045);padding:22px 26px;border-radius:0 var(--r) var(--r) 0}
  .callout p{color:var(--ink-2);font-size:.98rem}
  .callout p b{color:var(--bright);font-weight:600}

  /* process */
  .timeline{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hair-2)}
  @media(max-width:900px){.timeline{grid-template-columns:1fr}}
  .tl-step{padding:30px 26px 30px 0;position:relative}
  .tl-step+.tl-step{padding-left:26px;border-left:1px solid var(--hair-2)}
  @media(max-width:900px){.tl-step+.tl-step{padding-left:0;border-left:0;border-top:1px solid var(--hair-2)}}
  .tl-step::before{content:'';position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--bright)}
  @media(max-width:900px){.tl-step+.tl-step::before{top:-1px}}
  .tl-num{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--faint);margin-bottom:14px}
  .tl-step h3{font-family:'Archivo',sans-serif;font-size:1.02rem;font-weight:700;margin-bottom:9px}
  .tl-step p{color:var(--muted);font-size:.89rem}

  /* reserve comparison */
  .split{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:start}
  @media(max-width:960px){.split{grid-template-columns:1fr;gap:40px}}
  .vs{border:1px solid var(--hair-2);border-radius:var(--r);overflow:hidden;background:var(--panel)}
  .vs-row{display:grid;grid-template-columns:1fr 1fr}
  .vs-row+.vs-row{border-top:1px solid var(--hair-2)}
  .vs-cell{padding:17px 20px;font-size:.9rem;color:var(--muted);line-height:1.5}
  .vs-cell:first-child{border-right:1px solid var(--hair-2)}
  .vs-head{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--faint);padding:14px 20px;background:rgba(255,255,255,.02)}
  .vs-head.ours{background:var(--bright);color:var(--bright-ink);font-weight:600}
  .vs-cell.ours{color:var(--ink-2)}
  .vs-cell .x{color:var(--neg);font-weight:700;margin-right:9px}
  .vs-cell .c{color:var(--bright);font-weight:700;margin-right:9px}

  /* delivery zones */
  .zones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px}
  @media(max-width:860px){.zones{grid-template-columns:1fr}}
  .zone{padding:30px 28px}
  .zone .zt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--bright);margin-bottom:16px}
  .zone .zp{font-family:'Instrument Serif',serif;font-size:3.1rem;line-height:1;margin-bottom:6px;color:var(--ink)}
  .zone .zf{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);margin-bottom:18px}
  .zone p{color:var(--muted);font-size:.9rem}
  .zone .free{margin-top:16px;display:inline-block;font-family:'Archivo',sans-serif;font-size:.74rem;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;color:var(--bright-ink);background:var(--bright);padding:6px 12px;border-radius:5px}

  /* forms */
  .form-card{border:1px solid var(--hair);border-radius:20px;padding:36px;
    background:linear-gradient(165deg,rgba(16,36,32,.9),rgba(8,20,17,.95));
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 26px 60px rgba(0,0,0,.5)}
  .form-card h3{font-family:'Instrument Serif',serif;font-size:1.68rem;margin-bottom:9px}
  .form-card .fs{color:var(--muted);font-size:.92rem;margin-bottom:26px}
  .field{margin-bottom:16px}
  .field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  .field input,.field select,.field textarea{width:100%;background:rgba(0,0,0,.34);border:1px solid var(--hair-2);
    border-radius:10px;padding:13px 15px;color:var(--ink);font-family:'Inter',sans-serif;font-size:.95rem;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
  .field input::placeholder,.field textarea::placeholder{color:var(--faint)}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bright);
    background:rgba(0,0,0,.42);box-shadow:0 0 0 3px rgba(var(--bright-rgb),.12)}
  .field textarea{resize:vertical;min-height:86px}
  .field select{appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387A19C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px}
  .field select option{background:#0C1C19;color:var(--ink)}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:580px){.field-row{grid-template-columns:1fr}}
  .checks{display:flex;flex-wrap:wrap;gap:8px}
  .checks label{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:.85rem;
    font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);border:1px solid var(--hair-2);
    border-radius:9px;padding:9px 13px;cursor:pointer;margin-bottom:0;transition:all .18s ease}
  .checks label:has(input:checked){border-color:var(--bright);background:rgba(var(--bright-rgb),.12);color:var(--bright)}
  .checks input{width:auto;accent-color:var(--bright);margin:0}
  .form-card .btn{width:100%;margin-top:8px}
  .consent{margin-top:15px;color:var(--faint);font-size:.74rem;line-height:1.55}
  .form-msg{margin-top:16px;padding:14px 16px;border-radius:10px;font-size:.9rem;display:none}
  .form-msg.ok{display:block;background:rgba(var(--bright-rgb),.11);border:1px solid var(--bright);color:var(--bright)}
  .form-msg.err{display:block;background:rgba(224,136,120,.11);border:1px solid rgba(224,136,120,.4);color:var(--neg)}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* drops */
  .drop-wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  @media(max-width:960px){.drop-wrap{grid-template-columns:1fr;gap:40px}}
  .drop-facts{display:flex;flex-direction:column;gap:0;margin-top:34px;border-top:1px solid var(--hair-2)}
  .df{display:flex;gap:20px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--hair-2)}
  .df .n{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--bright);
    flex:0 0 26px;padding-top:3px}
  .df h3{font-family:'Archivo',sans-serif;font-size:1rem;font-weight:700;margin-bottom:5px}
  .df p{color:var(--muted);font-size:.9rem}

  /* reviews empty state */
  .rev-empty{border:1px solid var(--hair-2);border-radius:20px;background:var(--panel);
    padding:52px 44px;text-align:center;max-width:740px;margin:0 auto}
  .rev-empty .rs{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--faint);margin-bottom:22px}
  .rev-empty h3{font-family:'Instrument Serif',serif;font-size:1.85rem;line-height:1.2;margin-bottom:16px}
  .rev-empty p{color:var(--muted);font-size:.97rem;max-width:54ch;margin:0 auto 18px}

  /* faq */
  .faq-list{margin-top:44px;max-width:860px;border-top:1px solid var(--hair-2)}
  .faq-list details{border-bottom:1px solid var(--hair-2)}
  .faq-list summary{cursor:pointer;list-style:none;padding:24px 4px;font-family:'Archivo',sans-serif;
    font-weight:700;font-size:1.02rem;display:flex;justify-content:space-between;align-items:center;gap:18px;
    transition:color .18s ease}
  .faq-list summary::-webkit-details-marker{display:none}
  .faq-list summary:hover{color:var(--bright)}
  .faq-list summary::after{content:'+';color:var(--bright);font-size:1.4rem;line-height:1;flex-shrink:0;font-weight:300}
  .faq-list details[open] summary::after{content:'\2212'}
  .faq-list details p{color:var(--muted);padding:0 4px 26px;font-size:.95rem;max-width:74ch}
  .faq-list details p+p{padding-top:0;margin-top:-14px}

  /* footer */
  footer{background:#040B0A;border-top:1px solid var(--hair-2);padding:64px 0 40px;position:relative;z-index:2}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;margin-bottom:44px}
  @media(max-width:800px){.foot-grid{grid-template-columns:1fr;gap:34px}}
  .foot-grid h3{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--faint);margin-bottom:18px}
  .foot-grid a{color:var(--muted);text-decoration:none;font-size:.9rem;display:block;margin-bottom:10px;transition:color .18s}
  .foot-grid a:hover{color:var(--bright)}
  .foot-grid p{color:var(--muted);font-size:.9rem;margin-bottom:9px}
  .foot-bottom{border-top:1px solid var(--hair-2);padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .foot-bottom p{font-family:'IBM Plex Mono',monospace;color:var(--faint);font-size:10.5px;letter-spacing:.1em}
  .nap{color:var(--muted);font-size:.9rem;line-height:1.85}
  .nap b{color:var(--ink);font-weight:600}
  footer .brand{color:var(--ink)}

  /* mobile action bar */
  .actionbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
    background:rgba(6,16,14,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--hair-2)}
  .actionbar .ab-in{display:flex;gap:10px;max-width:1200px;margin:0 auto;padding:11px 14px}
  .actionbar a{font-family:'Archivo',sans-serif;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;
    gap:8px;padding:13px 10px;border-radius:11px;font-size:13.5px;font-weight:700;text-decoration:none;
    border:1px solid var(--hair-2);color:var(--ink);background:var(--panel)}
  .actionbar a.is-primary{background:linear-gradient(100deg,var(--bright),var(--bright-2));
    color:var(--bright-ink);border-color:transparent}
  .actionbar svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  @media(max-width:940px){ .actionbar{display:block} body{padding-bottom:76px} }

  @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }
  /* ================================================================
     UTILITY BAR
     ================================================================ */
  .util{background:#040A09;border-bottom:1px solid var(--hair-2);position:relative;z-index:41}
  .util .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:11px;padding-bottom:11px}
  .util span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
  .util svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--bright);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .util .mid{color:var(--bright)}
  @media(max-width:1080px){ .util .mid{display:none} }
  @media(max-width:720px){
    .util .wrap{justify-content:center}
    .util span:last-child{display:none}
  }

  /* ================================================================
     NAV
     ================================================================ */
  nav{position:sticky;top:0;z-index:40;background:rgba(6,16,14,.82);
      backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
      border-bottom:1px solid var(--hair-2)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto;padding:16px 30px;gap:26px}
  .brand{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:14px;flex:0 0 auto}
  .brand .mk{width:auto;height:34px;flex:0 0 auto}
  .brand .bt{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;letter-spacing:.2em;
    line-height:1.1;padding-left:14px;border-left:1px solid var(--hair-2);display:block}
  .brand .t{display:block;color:var(--bright);letter-spacing:.42em;font-size:12.5px;font-weight:700}
  .nav-links{display:flex;gap:32px;align-items:center;margin-left:auto}
  .nav-links a{font-family:'Archivo',sans-serif;color:var(--muted);text-decoration:none;font-size:12px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:color .2s ease}
  .nav-links a:hover{color:var(--ink)}
  .nav-act{display:flex;align-items:center;gap:12px;flex:0 0 auto}
  .nav-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--hair-2);
    color:var(--muted);transition:all .2s ease}
  .nav-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .nav-icon:hover{color:var(--bright);border-color:var(--hair)}
  .nav-cta{font-family:'Archivo',sans-serif;padding:12px 22px;border-radius:9px;color:var(--bright-ink);
    background:linear-gradient(100deg,var(--bright),var(--bright-2));font-size:12px;font-weight:800;
    letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset}
  .nav-cta:hover{filter:brightness(1.07)}
  .burger{display:none;width:40px;height:40px;border:1px solid var(--hair-2);border-radius:10px;
    background:transparent;color:var(--ink);cursor:pointer;place-items:center}
  .burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
  @media(max-width:1080px){ .nav-links{display:none} .burger{display:grid} }
  @media(max-width:560px){ .nav-cta{display:none} .brand .bt{font-size:13px} }


  /* ---------- mobile menu ---------- */
  .mobile-menu{position:fixed;inset:0;z-index:45;background:rgba(5,13,11,.985);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  .mobile-menu.open{opacity:1;pointer-events:auto}
  .mobile-menu a{font-family:'Instrument Serif',serif;color:var(--ink);text-decoration:none;
    font-size:2.1rem;line-height:1.25;padding:11px 20px}
  .mobile-menu a:hover{color:var(--bright)}
  .mobile-menu a.mm-cta{font-family:'Archivo',sans-serif;font-weight:800;font-size:.95rem;letter-spacing:.1em;
    text-transform:uppercase;margin-top:24px;padding:16px 34px;border-radius:11px;
    background:linear-gradient(100deg,var(--bright),var(--bright-2));color:var(--bright-ink)}
  .mobile-menu a.mm-cta:hover{color:var(--bright-ink)}

  /* ================================================================
     HERO  |  the teardown
     One pallet on the right unpacks itself into priced items. Runs once
     on load, then the items idle. Nothing is coupled to scroll.
     ================================================================ */
  header.hero{position:relative;min-height:min(calc(100svh - 122px),920px);display:flex;align-items:center;overflow:hidden;
    border-bottom:1px solid var(--hair-2);
    background:
      radial-gradient(ellipse 46% 62% at 76% 52%,rgba(var(--bright-rgb),.13),transparent 70%),
      radial-gradient(ellipse 60% 80% at 6% 40%,rgba(var(--bright-rgb),.07),transparent 70%),
      linear-gradient(180deg,#07130F 0%,#06100E 100%)}
  .hero-floor{position:absolute;inset:auto 0 0 0;height:46%;z-index:1;pointer-events:none;
    background:
      linear-gradient(180deg,transparent,rgba(0,0,0,.34)),
      repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 120px),
      repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 120px);
    transform:perspective(900px) rotateX(58deg);transform-origin:50% 100%;
    mask-image:linear-gradient(180deg,transparent,#000 40%,#000);-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000)}
  .hero-in{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(480px,560px);gap:48px;
    align-items:center;padding-top:70px;padding-bottom:150px;width:100%}
  .hero-copy{max-width:680px}

  .kicker{display:flex;align-items:center;gap:15px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--bright);margin-bottom:26px}
  .kicker .rule{width:34px;height:1px;background:var(--bright);flex:0 0 34px}

  h1.display{font-size:clamp(3.1rem,6vw,5.6rem);margin:0 0 24px;letter-spacing:-.028em;line-height:.99}
  .lede{max-width:47ch;color:var(--ink-2);font-size:clamp(1.02rem,1.3vw,1.15rem);margin:0 0 34px}
  .lede b{color:var(--ink);font-weight:600}

  .cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
  .btn{font-family:'Archivo',sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:16px 28px;border-radius:11px;font-weight:800;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
    text-decoration:none;cursor:pointer;border:1px solid transparent;
    transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}
  .btn-primary{background:linear-gradient(100deg,var(--bright),var(--bright-2));color:var(--bright-ink);
    box-shadow:0 1px 0 rgba(255,255,255,.38) inset,0 8px 30px rgba(var(--bright-rgb),.26)}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 12px 38px rgba(var(--bright-rgb),.38)}
  .btn-ghost{border-color:rgba(255,255,255,.16);color:var(--ink);background:rgba(255,255,255,.05);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .btn-ghost:hover{border-color:var(--bright);color:var(--bright)}

  /* the weekly rhythm strip pinned to the hero's bottom edge */
  .hero-strip{position:absolute;left:0;right:0;bottom:0;z-index:4;border-top:1px solid rgba(255,255,255,.09);
    background:rgba(4,11,9,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .hs-in{max-width:1280px;margin:0 auto;padding:0 30px;display:grid;grid-template-columns:repeat(4,1fr)}
  .hs-cell{padding:18px 22px 17px 0;display:flex;flex-direction:column;gap:6px}
  .hs-cell+.hs-cell{padding-left:22px;border-left:1px solid rgba(255,255,255,.08)}
  .hs-k{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
  .hs-v{font-family:'Archivo',sans-serif;font-size:.92rem;font-weight:700;color:var(--ink);letter-spacing:.01em}
  .hs-live .hs-k{color:var(--bright)}
  .hs-live .hs-v{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--bright);font-variant-numeric:tabular-nums}
  .hs-live .hs-k::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bright);
    margin-right:8px;vertical-align:middle;box-shadow:0 0 0 0 rgba(var(--bright-rgb),.6);animation:pulseDot 2.2s ease-out infinite}
  @keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(var(--bright-rgb),.55)}70%{box-shadow:0 0 0 9px rgba(var(--bright-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--bright-rgb),0)}}
  @media(max-width:960px){
    .hs-in{grid-template-columns:1fr 1fr}
    .hs-cell:nth-child(3){border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.08)}
    .hs-cell:nth-child(4){border-top:1px solid rgba(255,255,255,.08)}
  }
  @media(max-width:640px){
    .hs-in{grid-template-columns:1fr 1fr;padding:0 22px}
    .hs-cell{padding-top:13px;padding-bottom:12px}
  }

  /* the honest replacement for a star rating */
  .verified{display:flex;gap:15px;align-items:flex-start;margin-top:30px;padding-top:24px;
    border-top:1px solid rgba(255,255,255,.1);max-width:520px}
  .vshield{width:26px;height:26px;flex:0 0 26px;color:var(--bright);margin-top:1px}
  .vshield svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .vhead{font-family:'Archivo',sans-serif;font-size:.93rem;font-weight:700;color:var(--ink);margin-bottom:9px;line-height:1.35}
  .vrow{display:flex;flex-wrap:wrap;gap:5px 18px}
  .vrow span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--faint);display:inline-flex;align-items:center;gap:8px}
  .vrow span::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--bright);opacity:.8}

  /* ---------- the teardown scene ----------
     Designed at 560 x 500. Scaled to its container with --s (set by JS). */
  .tear-wrap{position:relative;width:100%;aspect-ratio:560/500;--s:1}
  .tear{position:absolute;left:0;top:0;width:560px;height:500px;transform:scale(var(--s));transform-origin:0 0}

  .tear-tally{position:absolute;left:0;top:0;display:flex;gap:26px;align-items:flex-end;z-index:5}
  .tt{display:flex;flex-direction:column;gap:5px}
  .tt-k{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
  .tt-v{font-family:'IBM Plex Mono',monospace;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .tt-v.was{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35);color:var(--muted)}
  .tt-v.now{color:var(--bright);font-size:1.7rem}
  .tt-tag{align-self:flex-end;margin-bottom:6px;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--faint);border:1px solid var(--hair-2);padding:4px 8px;border-radius:4px}

  /* pallet: a plain SVG, sits at the bottom */
  .pallet{position:absolute;left:10px;bottom:-40px;width:540px;height:auto;z-index:2}
  .pallet-glow{position:absolute;left:60px;bottom:-10px;width:440px;height:90px;border-radius:50%;z-index:1;
    background:radial-gradient(ellipse,rgba(var(--bright-rgb),.28),transparent 70%);filter:blur(10px)}

  /* the boxes, stacked on the pallet. --x --y in scene px, --i is the lift order */
  .bx{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:3;border-radius:3px;
    background:#9C7247 center/cover no-repeat;
    box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -18px 26px rgba(0,0,0,.32) inset,0 18px 30px rgba(0,0,0,.5)}
  .bx::after{content:'';position:absolute;inset:0;border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.28));pointer-events:none}

  /* shrink wrap over the stack */
  .film{position:absolute;left:80px;top:163px;width:402px;height:205px;z-index:4;border-radius:14px 14px 4px 4px;
    background:linear-gradient(115deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.22) 28%,rgba(255,255,255,.04) 46%,rgba(255,255,255,.16) 72%,rgba(255,255,255,.03) 100%);
    border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}

  /* the item cards the boxes become */
  .pc{position:absolute;left:var(--x);top:var(--y);width:262px;z-index:6;border-radius:13px;overflow:hidden;
    background:rgba(8,20,17,.9);border:1px solid rgba(0,229,212,.26);
    backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 26px 54px rgba(0,0,0,.6);
    display:grid;grid-template-columns:84px 1fr;gap:0}
  .pc-th{width:84px;height:100%;min-height:86px;display:grid;place-items:center;background:#0A1815;border-right:1px solid var(--hair-2);overflow:hidden}
  .pc-th svg{width:30px;height:30px;stroke:var(--bright);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .pc-th img{width:100%;height:100%;object-fit:cover;display:block}
  .pc-b{padding:10px 12px 10px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
  .pc-chip{align-self:flex-start;font-family:'Archivo',sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
    padding:3px 7px;border-radius:4px;background:rgba(0,229,212,.16);color:var(--bright);white-space:nowrap}
  .pc.c-new .pc-chip{background:var(--bright);color:var(--bright-ink)}
  .pc.c-parts .pc-chip{background:rgba(240,184,96,.16);color:var(--warn)}
  .pc.c-asis .pc-chip{background:rgba(224,136,120,.16);color:var(--neg)}
  .pc-t{font-family:'Instrument Serif',serif;font-size:.98rem;line-height:1.14;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pc-p{display:flex;align-items:baseline;gap:8px}
  .pc-p .p{font-family:'IBM Plex Mono',monospace;font-size:1.12rem;font-weight:600;color:var(--bright);letter-spacing:-.02em}
  .pc-p .w{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--faint);text-decoration:line-through}
  .pc-p .o{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

  /* price tag that swings off the last card */
  .tag{position:absolute;left:var(--x);top:var(--y);z-index:7;transform-origin:50% 0}
  .tag svg{width:46px;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}

  /* ---------- the choreography ---------- */
  /* Default (no preference / reduced motion): show the finished state. */
  .film,.bx{opacity:0}
  .tear .pc{opacity:1}
  .tear .tag{opacity:1}

  @media(prefers-reduced-motion:no-preference){
    .hero-copy>.kicker,.hero-copy>h1,.hero-copy>.lede,.hero-copy>.cta-row,.hero-copy>.verified{
      opacity:0;transform:translateY(26px);animation:riseIn 1.1s cubic-bezier(.16,1,.3,1) forwards}
    .hero-copy>h1{animation-delay:.14s}
    .hero-copy>.lede{animation-delay:.26s}
    .hero-copy>.cta-row{animation-delay:.38s}
    .hero-copy>.verified{animation-delay:.5s}
    @keyframes riseIn{to{opacity:1;transform:translateY(0)}}
    .hero-strip{opacity:0;animation:stripIn 1s ease .9s forwards}
    @keyframes stripIn{to{opacity:1}}

    /* the scene waits for .play (added by JS once fonts and layout settle) */
    .tear-wrap:not(.play) .pallet,.tear-wrap:not(.play) .pallet-glow,.tear-wrap:not(.play) .tear-tally{opacity:0}
    .tear-wrap:not(.play) .pc,.tear-wrap:not(.play) .tag{opacity:0}
    .tear-wrap:not(.play) .bx,.tear-wrap:not(.play) .film{opacity:0}

    .play .pallet{opacity:0;transform:translateY(40px);animation:palletIn 1.1s cubic-bezier(.16,1,.3,1) .35s forwards}
    .play .pallet-glow{opacity:0;animation:fadeIn 1.4s ease .6s forwards}
    .play .tear-tally{opacity:0;animation:fadeIn .9s ease 1.4s forwards}
    @keyframes palletIn{to{opacity:1;transform:translateY(0)}}
    @keyframes fadeIn{to{opacity:1}}

    /* boxes land on the pallet in a quick stagger, then the film wraps */
    .play .bx{opacity:0;transform:translateY(-70px);
      animation:boxLand .55s cubic-bezier(.2,.9,.3,1.15) calc(.55s + var(--i)*.09s) forwards,
                boxLift .9s cubic-bezier(.4,0,.2,1) calc(2.35s + var(--i)*.5s) forwards}
    @keyframes boxLand{to{opacity:1;transform:translateY(0)}}
    @keyframes boxLift{
      0%{opacity:1;transform:translateY(0) rotate(0)}
      55%{opacity:1;transform:translateY(-48px) rotate(-4deg) scale(1.03)}
      100%{opacity:0;transform:translateY(-92px) rotate(-6deg) scale(.92)}
    }
    .play .film{opacity:0;
      animation:filmOn .6s ease 1.15s forwards, filmOff .8s cubic-bezier(.4,0,.2,1) 1.75s forwards}
    @keyframes filmOn{to{opacity:1}}
    @keyframes filmOff{
      0%{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 14px)}
      100%{opacity:0;transform:translateY(-60px) skewY(-6deg);clip-path:inset(0 0 100% 0 round 14px)}
    }

    /* each card is born where its box was (--dx --dy), then slides to its slot */
    .play .pc{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.5);
      animation:cardOut 1.05s cubic-bezier(.16,1,.3,1) calc(2.75s + var(--i)*.5s) forwards,
                cardIdle 6.5s ease-in-out calc(5.2s + var(--i)*.7s) infinite alternate}
    @keyframes cardOut{to{opacity:1;transform:translate(0,0) scale(1)}}
    @keyframes cardIdle{from{transform:translateY(0)}to{transform:translateY(-7px)}}

    .play .tag{opacity:0;transform:rotate(-14deg) translateY(-10px);
      animation:tagIn .7s cubic-bezier(.2,.9,.3,1.2) 5.1s forwards, tagSwing 4.2s ease-in-out 5.8s infinite alternate}
    @keyframes tagIn{to{opacity:1;transform:rotate(0) translateY(0)}}
    @keyframes tagSwing{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
  }

  @media(max-width:1180px){
    .hero-in{grid-template-columns:1fr;gap:30px;padding-bottom:170px}
    .tear-wrap{max-width:560px;margin:0 auto}
  }
  @media(max-width:640px){
    header.hero{min-height:auto}
    .hero-in{padding-top:56px;padding-bottom:210px;gap:24px}
    .hero-floor{display:none}
  }

  /* live inventory section on the home page */
  .inv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
  .inv-head .sec{margin-bottom:0}
  .inv-chips{margin-bottom:22px}
  .pcard.sk{min-height:340px;background:linear-gradient(100deg,var(--panel) 30%,var(--panel-2) 50%,var(--panel) 70%);background-size:200% 100%;animation:sk 1.4s linear infinite}
  @keyframes sk{to{background-position:-200% 0}}

  /* ================================================================
     PROOF STRIP. the light break that gives the page structure.
     ================================================================ */
  section.proof{background:#F3F6F5;padding:0;border-bottom:1px solid #E2E9E7}
  .proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  @media(max-width:980px){.proof-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.proof-grid{grid-template-columns:1fr}}
  .pf{padding:40px 30px 40px 0}
  .pf+.pf{padding-left:30px;border-left:1px solid #E2E9E7}
  @media(max-width:980px){
    .pf{padding:34px 26px 34px 0}
    .pf:nth-child(3){padding-left:0;border-left:0}
    .pf:nth-child(n+3){border-top:1px solid #E2E9E7;padding-top:34px}
    .pf:nth-child(2),.pf:nth-child(4){padding-left:26px;border-left:1px solid #E2E9E7}
  }
  @media(max-width:560px){
    .pf,.pf+.pf{padding:28px 0;border-left:0;border-top:1px solid #E2E9E7}
    .pf:first-child{border-top:0}
  }
  .pf-ic{display:block;width:26px;height:26px;color:#0A4C40;margin-bottom:18px}
  .pf-ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .pf h3{font-family:'Archivo',sans-serif;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:#0B1512;margin-bottom:10px}
  .pf p{color:#576763;font-size:.9rem;line-height:1.6}