/* Layout: warm full-bleed bands; cream page, yellow hero, brown agreement. Brand palette from the QuickEVend identity. */
:root{
  --brown:#390E05; --coral:#FF6D32; --yellow:#FFEA94; --cream:#F9F6F1;
  --ink:#390E05; --ink-soft:#6B4A3E; --line:#E6DCCD; --panel:#FFFFFF; --page:#F9F6F1;
  --shelf:#FFD966;
  --display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:14px; --gut:max(18px, env(safe-area-inset-left,0px));
  --gutr:max(18px, env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ink:#F6EFE6; --ink-soft:#C8B6A8; --line:#4A3328; --panel:#2A1A12; --page:#1E120C;
  --cream:#2A1A12; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ink:#F6EFE6; --ink-soft:#C8B6A8; --line:#4A3328; --panel:#2A1A12; --page:#1E120C;
  --cream:#2A1A12; color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin-inline:auto;padding-left:var(--gut);padding-right:var(--gutr)}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.12}
h1{font-size:clamp(2.1rem,6vw,3.9rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.12rem;font-weight:700}
p{margin:0 0 1rem}
a{color:inherit}
.eyebrow{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin:0 0 .5rem}

/* ---- nav ---- */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--yellow);border-bottom:2px solid var(--brown)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--yellow);z-index:41}
.nav .wrap{display:flex;align-items:center;gap:14px;padding-block:10px;flex-wrap:wrap}
.nav nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav nav a{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--brown);text-decoration:none;padding:7px 11px;border-radius:999px}
.nav nav a:hover,.nav nav a:focus-visible{background:rgba(57,14,5,.1)}

/* ---- logo mark ---- */
.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.logo svg{display:block;height:30px;width:auto}
.logo .sub{font-family:var(--display);font-weight:600;font-size:.6rem;letter-spacing:.07em;color:var(--coral);text-transform:uppercase}

/* ---- hero ---- */
.hero{background:var(--yellow);color:var(--brown);position:relative;overflow:hidden}
.hero .wrap{padding-block:clamp(2.6rem,7vw,5rem);position:relative;z-index:2}
.hero h1{max-width:16ch}
.hero .lede{font-size:clamp(1rem,2vw,1.18rem);max-width:52ch;color:#5A2A18}
.shelves{position:absolute;right:-60px;top:50%;transform:translateY(-50%);display:grid;gap:14px;opacity:.5;z-index:1}
.shelves i{display:block;width:clamp(120px,22vw,260px);height:12px;border-radius:99px;background:var(--brown)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4rem}
.btn{font-family:var(--display);font-weight:700;font-size:.92rem;border:2px solid var(--brown);background:var(--brown);color:var(--yellow);
  padding:13px 22px;border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn.alt{background:transparent;color:var(--brown)}
.btn.alt:hover{background:rgba(57,14,5,.08)}
.btn.coral{background:var(--coral);border-color:var(--coral);color:#fff}

/* ---- sections ---- */
section{scroll-margin-top:90px}
.band{padding-block:clamp(2.4rem,5vw,4rem)}
.band.cream{background:var(--cream)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.1rem,2.4vw,1.8rem)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:16px}
.muted{color:var(--ink-soft)}
.small{font-size:.86rem}

/* ---- forms ---- */
label{display:block;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 5px}
input,select,textarea{width:100%;font-family:var(--body);font-size:.95rem;color:var(--ink);background:var(--page);
  border:1.5px solid var(--line);border-radius:10px;padding:11px 13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,109,50,.18)}
textarea{min-height:104px;resize:vertical}
.field{margin-bottom:14px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:14px}
.err{color:#B3261E;font-size:.8rem;margin-top:5px;display:none}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#B3261E}
.field.bad .err{display:block}
.note{background:rgba(255,109,50,.09);border-left:3px solid var(--coral);border-radius:0 8px 8px 0;padding:11px 14px;font-size:.87rem}
.ok{background:rgba(31,122,66,.1);border-left:3px solid #1F7A42;border-radius:0 8px 8px 0;padding:14px 16px;font-size:.9rem}

/* ---- machine chips ---- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-family:var(--display);font-weight:600;font-size:.78rem;border:1.5px solid var(--line);background:var(--panel);
  color:var(--ink);padding:7px 13px;border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:var(--yellow)}

/* ---- steps ---- */
.steps{counter-reset:s;display:grid;gap:12px;padding:0;margin:0;list-style:none}
.steps li{counter-increment:s;display:flex;gap:13px;align-items:flex-start}
.steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--coral);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.85rem;display:grid;place-items:center}

/* ---- agreement ---- */
.agree{background:var(--brown);color:#F4E6D7}
.agree h2,.agree h3{color:var(--yellow)}
.agree .eyebrow{color:var(--shelf)}
.doc{background:#FFFDF7;color:#2B1A12;border-radius:var(--r);padding:clamp(1.1rem,3vw,2.2rem);max-height:30rem;overflow:auto;border:1px solid #E8DCC8}
.doc h3{color:#390E05;margin:1.5rem 0 .4rem;font-size:1rem}
.doc h3:first-child{margin-top:0}
.doc p,.doc li{font-size:.88rem;line-height:1.6}
.doc ol{padding-left:1.1rem}
.doc .cl{font-family:var(--display);font-weight:700;color:var(--coral)}
.legal{background:#FFF3CD;border:1px solid #E0C97A;color:#5A4208;border-radius:10px;padding:13px 16px;font-size:.85rem;margin-bottom:1rem}

/* ---- qr ---- */
.qrcard{text-align:center}
.qrbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;place-items:center;margin-bottom:10px}
.qrbox svg,.qrbox img{width:100%;height:auto;max-width:190px;display:block}

footer{background:var(--brown);color:#D9C4B4;padding-block:2rem;font-size:.86rem}
footer a{color:var(--yellow)}
/* ---- instagram ---- */
.iggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:1.4rem}
@media (max-width:760px){.iggrid{grid-template-columns:repeat(2,1fr);gap:10px}}
.igtile{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--brown);text-decoration:none}
.igtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.igtile:hover img{transform:scale(1.04)}
.igtile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(57,14,5,0) 55%,rgba(57,14,5,.86) 100%);z-index:1}
.igtile::after{content:"";position:absolute;top:10px;right:10px;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));z-index:2}
.igtile span{position:absolute;left:11px;right:11px;bottom:10px;z-index:2;color:#fff;font-family:var(--display);font-weight:700;
  font-size:.8rem;line-height:1.25}
.igtile em{display:block;font-style:normal;font-weight:600;font-size:.68rem;color:var(--yellow);margin-top:3px}
.ighead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ighead .av{width:64px;height:64px;border-radius:50%;background:var(--yellow);border:2px solid var(--brown);display:grid;place-items:center;flex:none}
.ighead .av svg{width:40px;height:40px}
.igstats{display:flex;gap:18px;font-size:.86rem;color:var(--ink-soft)}
.igstats b{font-family:var(--display);color:var(--ink)}
#social .btn{background:var(--coral);border-color:var(--coral);color:#fff}
#social .btn.alt{background:transparent;border-color:var(--ink);color:var(--ink)}
/* ---- 3D hero ---- */
.hero3d{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
@media (max-width:860px){.hero3d{grid-template-columns:1fr}.stage{order:-1}}
.stage{position:relative;width:100%;aspect-ratio:1/1.05;max-height:70vh;min-height:300px;
  border-radius:20px;background:radial-gradient(120% 100% at 50% 18%,#FFF3BE 0%,#FFEA94 46%,#F4D878 100%);
  overflow:hidden;cursor:grab;touch-action:pan-y}
.stage.drag{cursor:grabbing}
.stage canvas{display:block;width:100%;height:100%}
.stage .hint{position:absolute;left:12px;bottom:11px;font-family:var(--display);font-weight:600;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:#8A5A33;background:rgba(255,255,255,.72);
  padding:6px 11px;border-radius:999px;pointer-events:none}
.pick{position:absolute;right:12px;top:12px;max-width:62%;background:var(--brown);color:var(--yellow);
  border-radius:12px;padding:10px 13px;font-size:.82rem;opacity:0;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.pick.on{opacity:1;transform:none}
.pick b{font-family:var(--display);display:block;font-size:.95rem}
.stage .fallback{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;
  font-size:.86rem;color:#8A5A33}
/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.stat b{font-family:var(--display);font-size:1.75rem;font-weight:800;color:var(--coral);display:block;line-height:1.05}
.stat span{font-size:.8rem;color:var(--ink-soft)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:fade .55s ease both}
  @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---- multi-page additions ---- */
.nav nav a.cta{background:var(--brown);color:var(--yellow)}
.nav nav a.cta:hover{background:#5A1C0C}
.pagehead{background:var(--yellow);color:var(--brown);border-bottom:2px solid var(--brown)}
.pagehead .wrap{padding-block:clamp(1.8rem,5vw,3rem)}
.pagehead h1{font-size:clamp(1.8rem,5vw,2.8rem)}
.pagehead .lede{max-width:56ch;color:#5A2A18;margin:.6rem 0 0}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 1.2rem}
.tab{font-family:var(--display);font-weight:700;font-size:.9rem;border:2px solid var(--brown);background:transparent;color:var(--ink);
  padding:11px 20px;border-radius:999px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--brown);color:var(--yellow)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tab{border-color:var(--ink)}
  :root:not([data-theme="light"]) .tab[aria-selected="true"]{background:var(--ink);color:var(--page)}}
.perfect{display:flex;gap:8px;flex-wrap:wrap;margin-top:1rem}
.perfect span{font-family:var(--display);font-weight:600;font-size:.8rem;background:var(--panel);border:1px solid var(--line);
  padding:7px 13px;border-radius:999px}
.howgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:14px;margin-top:1.4rem;counter-reset:h}
.howgrid .card{position:relative;padding-top:2.6rem}
.howgrid .card::before{counter-increment:h;content:counter(h);position:absolute;top:14px;left:18px;width:30px;height:30px;border-radius:50%;
  background:var(--coral);color:#fff;font-family:var(--display);font-weight:800;display:grid;place-items:center;font-size:.9rem}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.faq summary{font-family:var(--display);font-weight:700;cursor:pointer}
.faq details p{margin:.6rem 0 0;color:var(--ink-soft)}
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 1.4rem;padding:0;list-style:none;counter-reset:st}
.stepper li{counter-increment:st;font-family:var(--display);font-weight:600;font-size:.78rem;color:var(--ink-soft);
  border-top:4px solid var(--line);padding-top:8px}
.stepper li::before{content:counter(st) ". "}
.stepper li.on{color:var(--ink);border-color:var(--coral)}
.stepper li.done{color:var(--ink);border-color:var(--brown)}
@media (max-width:560px){.stepper li span{display:none}}
.pane[hidden]{display:none}
.navrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-top:1.2rem}
.check{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:.92rem;font-family:var(--body);font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--ink)}
.check input{width:auto;margin-top:4px;flex:none}
.sigwrap{position:relative}
.sigpad{display:block;width:100%;height:190px;border:1.5px dashed var(--line);border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}
.sigwrap .clear{position:absolute;top:8px;right:8px;font-size:.75rem;padding:6px 11px}
.sigline{position:absolute;left:16px;right:16px;bottom:38px;border-bottom:1px solid #CDBFAE;pointer-events:none}
.kv{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:6px 14px;font-size:.9rem}
.kv dt{font-weight:600;color:var(--ink-soft)}
.kv dd{margin:0}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}