/* Type and metrics measured off figure.ai, 2026-08-25:
       nav bar        98 px tall, fixed, transparent
       nav link       14 px, uppercase, letter-spacing 0.28 px, weight 400
       panel heading  28 px, uppercase, line-height 31.08 px, tracking normal
       panel body     17 px / 27.2 px, block width 452 px
       media          object-fit: cover across a 100 vh section
     Their display face is PP Neue Machina and their text face is Neue Haas
     Grot. Space Grotesk is the nearest free stand-in for the first; the second
     is a Helvetica-class grotesk, so the system stack is the closest match. */
  :root{
    --ink:#1c1612;
    --green:#0e9f62;
    --sun:#ff7a3c;
    --dim:rgba(28,22,18,.64);
    --line:rgba(28,22,18,.14);
    --paper:#ffe4cc;
    --page:#fff6ee;
    --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
    --text:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
    --sans:var(--text);
    --mut:rgba(28,22,18,.68);
    --line2:rgba(28,22,18,.22);
    --pad:30px;
  }
  @media(min-width:1200px){:root{--pad:63px}}

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-snap-type:y proximity}
  body{margin:0;background:var(--page);color:var(--ink);
       font-family:var(--text);font-size:17px;line-height:1.6;
       -webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--green);color:#fff}

  h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;
           text-transform:uppercase;letter-spacing:.01em;line-height:1.11}
  .h-panel{font-size:28px}
  @media(max-width:640px){.h-panel{font-size:23px}}
  p{margin:0}

  /* ---------------------------------------------------------------- nav */
  .topnav{position:fixed;top:0;left:0;right:0;z-index:30;height:98px;
      display:flex;align-items:center;justify-content:space-between;
      padding:0 var(--pad);color:var(--ink);transition:color .25s}
  .topnav.onpaper{color:#0a0a0a}
  .mark{display:flex;align-items:center;gap:11px}
  .mark svg{display:block}
  .wordmark{font-family:var(--display);font-size:14px;letter-spacing:.28em;
            text-transform:uppercase}
  .navlinks{display:flex;gap:38px;font-family:var(--display);font-size:14px;
            letter-spacing:.02em;text-transform:uppercase}
  .navlinks a{opacity:.9;transition:opacity .15s}
  .navlinks a:hover,.navlinks a:focus-visible{opacity:1}
  /* Six links plus the wordmark need the whole bar. Tighten before hiding. */
  @media(max-width:1140px){.navlinks{gap:22px}.navlinks a{white-space:nowrap}}
  @media(max-width:1080px){.navlinks a:not(.nav-cta){display:none}.navlinks{gap:0}}
  /* Language switcher: one small control, current code + chevron, with a
     native select laid over it so phones get their own picker. */
  .langs{position:relative;display:inline-flex;align-items:center;gap:6px;
         font-family:var(--display);font-size:12px;letter-spacing:.12em;
         text-transform:uppercase;color:var(--dim);cursor:pointer}
  .langs:hover{color:currentColor}
  .langs select{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;font-size:16px}
  @media(max-width:1080px){.navlinks .langs{margin-right:18px}}
  .footlangs .langs{color:rgba(0,0,0,.55)}

  /* --------------------------------------------------------------- stage */
  /* One canvas behind the whole scroll, framed tight so the machine fills the
     frame the way an object-fit:cover video does. */
  /* Same warm ground as the page, with a little sun behind the robot. */
  #stage{position:fixed;inset:0;z-index:0;
    background:radial-gradient(ellipse 68% 58% at 50% 42%,
      #ffe0c4 0%, #fff0e2 46%, var(--page) 78%)}
  #stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
  body.turning #stage canvas,body.turning{cursor:grabbing}

  /* The page reads before the model does. The label sits under the hero copy
     and fades; there is no black screen in front of the words. */
  #boot{position:fixed;left:0;right:0;top:calc(98px + 12px);z-index:2;display:grid;
        place-items:center;transition:opacity .8s ease .2s;pointer-events:none}
  body.loaded #boot,body.nomodel #boot{opacity:0}
  #boot .b{font-family:var(--display);font-size:12px;letter-spacing:.28em;
           text-transform:uppercase;color:var(--dim)}
  body.nomodel #stage::after{content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 55% at 50% 55%,#ffe7d2 0%,var(--page) 72%)}

  /* The page sits over the robot. The empty hero lets the drag through so the
     model can be turned. Bars, sections and the footer take the pointer back. */
  main{position:relative;z-index:1}
  /* Only the homepage sits over the robot. Its empty hero lets a drag through.
     Controls always take the click, even inside that hero. */
  main.stage{pointer-events:none}
  a,button,input,select,textarea,summary,label,
  .bar,.sec,footer,nav,.topnav,.choice,.card,.sheet,#reserve-pay{pointer-events:auto}
  #reserve-pay{margin-top:22px;min-height:280px}
  #reserve-pay[hidden]{display:none}

  /* -------------------------------------------------------------- panels */
  .panel{height:100vh;height:100svh;display:flex;flex-direction:column;
         justify-content:flex-end;pointer-events:none;
         scroll-snap-align:start;scroll-snap-stop:always}
  .bar{position:relative;z-index:1;background:rgba(255,246,238,.92);
       border-top:1px solid var(--line);padding:30px 0;pointer-events:auto}
  .barin{display:flex;align-items:flex-start;justify-content:space-between;
         gap:40px;padding:0 var(--pad)}
  .barin.right{flex-direction:row-reverse}
  .cap{width:452px;max-width:100%}
  .cap h2{margin-bottom:14px}
  .cap p{color:var(--dim);font-size:17px}
  .barin.right .cap{text-align:right}

  .btn{display:inline-flex;align-items:center;gap:16px;flex:none;align-self:center;
       border:1px solid var(--green);border-radius:100px;
       padding:13px 22px;font-family:var(--text);font-size:16px;
       background:transparent;color:var(--green);transition:background .18s,color .18s}
  .btn:hover,.btn:focus-visible{background:var(--green);color:#fff}
  .btn.solid{background:var(--green);color:#fff;border-color:var(--green)}
  .btn.solid:hover,.btn.solid:focus-visible{background:#0b7d4d;color:#fff;border-color:#0b7d4d}
  .btn svg{flex:none}

  @media(max-width:760px){
    .barin,.barin.right{flex-direction:column;align-items:stretch;gap:22px}
    .barin.right .cap{text-align:left}
    .btn{align-self:flex-start}
  }

  /* ------------------------------------------------------------ content */
  /* Figure's page is media all the way down. These sections are ours, so they
     use the same type, the same hairlines and the same rhythm. */
  .sec{position:relative;background:var(--page);border-top:1px solid var(--line);
       padding:110px var(--pad)}
  .sechead{display:grid;gap:16px;max-width:452px;margin-bottom:70px}
  .eyebrow{font-family:var(--display);font-size:14px;letter-spacing:.02em;
           text-transform:uppercase;color:var(--dim)}
  .sechead h2{font-size:28px}

  /* 01–05 is a real sequence: pick up, carry, take input, learn, run. */
  .rows{display:grid;border-top:1px solid var(--line)}
  .row{display:grid;gap:8px;grid-template-columns:1fr;
       padding:28px 0;border-bottom:1px solid var(--line)}
  @media(min-width:900px){
    .row{grid-template-columns:120px 340px 1fr;gap:40px;align-items:baseline}
  }
  .row .k{font-family:var(--display);font-size:14px;letter-spacing:.02em;
          text-transform:uppercase;color:var(--dim)}
  .row h3{font-size:22px}
  .row p{color:var(--dim);font-size:17px;max-width:56ch}

  /* --------------------------------------------------------------- buy */
  .buy{display:grid;gap:44px}
  @media(min-width:900px){.buy{grid-template-columns:1fr 1fr;gap:80px;align-items:start}}
  .pricebig{font-family:var(--display);font-size:clamp(64px,9vw,132px);
            letter-spacing:.01em;line-height:1}
  .priceline{font-family:var(--display);font-size:14px;letter-spacing:.02em;
             text-transform:uppercase;color:var(--dim);margin-top:18px}
  .payline{font-family:var(--display);font-size:13px;letter-spacing:.02em;
           text-transform:uppercase;color:var(--sun);margin-top:8px}
  .buycta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
  .buycta[hidden]{display:none}
  .resform{display:grid;gap:16px;margin-top:32px;max-width:520px}
  .rcta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px}
  .rnote{font-size:13px;color:var(--dim);max-width:26ch}
  .rerr{color:#c43232;font-size:14px}
  .rinvoice{font-size:13px;color:var(--dim);margin:0}
  .rinvoice a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  .speclist{display:grid;gap:30px 40px;margin:0}
  @media(min-width:620px){.speclist{grid-template-columns:1fr 1fr}}
  .speclist div{display:grid;gap:8px;align-content:start;
       padding-top:14px;border-top:1px solid var(--line)}
  .speclist dt{font-family:var(--display);font-size:12px;letter-spacing:.16em;
       text-transform:uppercase;color:var(--dim);margin:0}
  .speclist dd{margin:0;font-size:16px;line-height:1.45;color:var(--ink);max-width:34ch}
  .buynote{margin-top:30px;font-size:15px;color:var(--dim);max-width:60ch}
  .buynote b{color:var(--ink);font-weight:400}

  /* ------------------------------------------------------------- forms */
  /* One form style for the whole site: underlined fields on black, the same
     hairline the panels use. parts.html repeats it -- the two pages are
     served as static files and share no stylesheet. */
  .form{display:grid;gap:22px;max-width:640px}
  .form .pair{display:grid;gap:22px}
  @media(min-width:620px){.form .pair{grid-template-columns:1fr 1fr}}
  .field{display:grid;gap:7px;min-width:0}
  .field label{font-family:var(--display);font-size:12px;letter-spacing:.16em;
       text-transform:uppercase;color:var(--dim)}
  .field input,.field select,.field textarea{
       width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
       border-radius:0;color:var(--ink);font-family:var(--text);font-size:16px;
       padding:9px 0;transition:border-color .15s}
  .field textarea{min-height:92px;resize:vertical;line-height:1.5}
  .field select{appearance:none;cursor:pointer}
  .field select option{background:var(--page);color:var(--ink)}
  .field input:focus,.field select:focus,.field textarea:focus{
       outline:none;border-bottom-color:var(--ink)}
  .field input::placeholder,.field textarea::placeholder{color:rgba(28,22,18,.35)}
  .field .opt{color:rgba(28,22,18,.45);letter-spacing:.02em;text-transform:none;
       font-size:11px}
  .formfoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .formnote{font-size:14px;color:var(--dim);max-width:44ch}
  .formmsg{font-size:15px;margin:0}
  .formmsg.bad{color:#c43232}
  .formmsg.good{color:var(--green)}
  .lead{color:var(--dim);font-size:17px;max-width:56ch;margin:0 0 54px}
  .lead b{color:var(--ink);font-weight:400}

  /* --------------------------------------------------------------- faq */
  .faq{display:grid;border-top:1px solid var(--line);max-width:760px}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;padding:24px 0;display:flex;
       justify-content:space-between;gap:20px;align-items:baseline;
       font-family:var(--display);font-size:20px;text-transform:uppercase}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";flex:none;color:var(--dim);font-size:22px}
  .faq details[open] summary::after{content:"–"}
  .faq details p{color:var(--dim);font-size:17px;max-width:56ch;padding:0 0 26px}
  .status{max-width:640px}
  .status p{color:var(--dim);font-size:19px;line-height:1.55;margin:0 0 22px}
  .status p b{color:var(--ink);font-weight:400}
  .status p:last-child{margin:0}
  .hero-sub{display:block;margin-top:10px;font-size:13px;color:var(--dim)}
  .secfoot{margin-top:60px}
  .secfoot .lead{margin:0 0 22px}

  /* ------------------------------------------------------------- footer */
  footer{position:relative;background:var(--paper);color:#0a0a0a;
         padding:100px var(--pad) 36px}
  .footin{display:grid;gap:60px}
  @media(min-width:940px){.footin{grid-template-columns:1fr 1.1fr;gap:90px}}
  .footmark{margin-bottom:22px}
  .footmark svg{display:block}
  .bigmark{font-family:var(--display);font-size:clamp(48px,8vw,104px);
           letter-spacing:.16em;line-height:1;margin:0 0 44px;text-transform:uppercase}
  .sign{font-size:17px;margin:0 0 4px}
  .sign+p{margin:0 0 18px;color:rgba(0,0,0,.6);font-size:15px}
  .signrow{display:flex;background:#fff;border-radius:100px;padding:5px;max-width:360px}
  .signrow input{flex:1;min-width:0;border:0;background:none;outline:none;
                 padding:0 18px;font:inherit;font-size:15px}
  .signrow button{border:0;border-radius:100px;background:var(--green);color:#fff;
                  padding:11px 22px;font:inherit;font-size:15px;cursor:pointer}
  .also{margin-top:18px;font-size:14px;color:rgba(0,0,0,.55)}
  .also a{text-decoration:underline;text-underline-offset:3px;color:#0a0a0a}
  .sitemap{display:grid}
  .sitemap a{display:flex;align-items:baseline;gap:30px;padding:17px 0;
             border-bottom:1px solid rgba(0,0,0,.18)}
  .sitemap a:first-child{border-top:1px solid rgba(0,0,0,.18)}
  .sitemap .n{font-family:var(--display);font-size:14px;letter-spacing:.02em;
              color:#4f9b74;flex:none;width:30px}
  .sitemap .t{font-family:var(--display);font-size:clamp(23px,2.6vw,34px);
              text-transform:uppercase;letter-spacing:.01em}
  .legal{margin-top:70px;display:flex;justify-content:space-between;gap:20px;
         flex-wrap:wrap;font-size:14px;color:rgba(0,0,0,.55)}
  .legal a{text-decoration:underline;text-underline-offset:3px}

  :focus-visible{outline:2px solid currentColor;outline-offset:3px}
  @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* Interior pages (shop, parts, terms) use the same nav, type and colour.
   The homepage nav is transparent over the robot. These are not. */
.topnav.solid{position:sticky;background:var(--page);border-bottom:1px solid var(--line)}
@media(max-width:900px){
  .topnav.solid{height:auto;min-height:72px;padding:12px 0}
  .topnav.solid .navlinks{gap:12px 16px;flex-wrap:wrap;justify-content:flex-end}
  .topnav.solid .navlinks a{display:inline}
}
.sheet{max-width:1040px;margin:0 auto;padding:48px 24px 80px}
.sheet h1{font-size:clamp(36px,5vw,64px)}
.sub{font-size:17px;color:var(--dim);max-width:62ch;margin:0}