/* ===== UsedWell — shared stylesheet ===== */
:root{
  --ink:#111; --paper:#fff; --line:#111; --mid:#666; --faint:#ccc; --hair:rgba(17,17,17,.12);
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --max: 1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--mono); line-height:1.6; -webkit-font-smoothing:antialiased;
  font-size:15px;
}
a{color:inherit}
img,svg{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}

h1,h2,h3,h4{font-family:var(--mono); font-weight:500; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:500}
h2{font-size:clamp(1.1rem,2vw,1.35rem); text-transform:lowercase}
h3{font-size:1rem}
p{max-width:56ch; color:var(--mid); margin:0 0 1em}
.lede{font-size:1rem; color:var(--ink); max-width:48ch}

.eyebrow{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mid);
  display:block; margin-bottom:.8em;
}
.label{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mid)}

/* skip link */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:1000}
.skip-link:focus{left:12px; top:12px}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* header */
header.site{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hair);
}
header.site .bar{display:flex; align-items:center; justify-content:space-between; padding:18px var(--pad); max-width:var(--max); margin:0 auto}
.wordmark{font-size:.85rem; font-weight:600; letter-spacing:.06em; text-decoration:none; text-transform:uppercase}
.brand-heart{display:inline-block; width:.75em; height:.75em; vertical-align:-.08em}
.brand-heart svg{width:100%; height:100%; display:block}
.brand-heart path{animation:brandHeartColor 4s linear infinite}
@keyframes brandHeartColor{
  0%{fill:#e0393e}
  25%{fill:#e8b923}
  50%{fill:#3f9142}
  75%{fill:#3468c9}
  100%{fill:#e0393e}
}
@media (prefers-reduced-motion:reduce){ .brand-heart path{animation:none; fill:#e0393e} }
nav.primary ul{display:flex; gap:24px; list-style:none; margin:0; padding:0; font-size:.8rem}
nav.primary a{text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px}
nav.primary a:hover, nav.primary a[aria-current="page"]{border-bottom-color:var(--ink)}
nav.primary .ext{color:var(--mid)}
.nav-toggle{display:none; background:none; border:0; font-family:var(--mono); font-size:.8rem; cursor:pointer}
@media (max-width:820px){
  nav.primary{display:none}
  .nav-toggle{display:inline-block}
  nav.primary.open{display:block; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--hair); padding:18px var(--pad)}
  nav.primary.open ul{flex-direction:column; gap:14px}
}

/* buttons */
.btn{
  display:inline-block; font-family:var(--mono); font-size:.8rem; letter-spacing:.02em;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  padding:12px 22px; text-decoration:none; cursor:pointer; text-align:center;
}
.btn:hover{background:#333}
.btn.outline{background:transparent; color:var(--ink)}
.btn.outline:hover{background:var(--ink); color:var(--paper)}
.btn.small{padding:8px 14px; font-size:.72rem}
.btn:disabled{opacity:.4; cursor:not-allowed}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.6em}

/* room / section rhythm */
.room{padding:clamp(3rem,8vw,6.5rem) 0; border-bottom:1px solid var(--hair)}
.room:last-of-type{border-bottom:0}
.room.tight{padding:clamp(1.8rem,4vw,3rem) 0}

/* hero */
.hero .wordmark-big{font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mid); margin-bottom:1.2em}
.hero .wordmark-big .brand-heart{width:.8em; height:.8em; vertical-align:-.1em}
.hero h1{max-width:16ch; margin-bottom:.5em}
.hero .lede{margin-bottom:1.6em; max-width:520px}
.hero .geo{margin-top:2em; font-size:.78rem; color:var(--mid)}
.legal-note{
  margin:1.4em 0 0; font-family:var(--mono); font-weight:400; font-size:.66rem; line-height:1.5;
  color:var(--mid); max-width:520px;
}
.legal-note a{color:inherit; text-decoration:underline; text-underline-offset:2px}

.hero-grid{display:flex; align-items:center; gap:clamp(2rem,6vw,5rem)}
.hero-copy{flex:1; min-width:0}
.hero-showcase{
  flex:0 0 auto; width:180px; display:flex; flex-direction:column; align-items:center; gap:1em;
  opacity:1; transition:opacity 1.1s ease-in-out;
}
.hero-showcase.fading{opacity:0}
.hero-showcase svg{width:100%; height:auto; stroke:var(--ink); stroke-width:5; stroke-linecap:round; stroke-linejoin:round}
.hero-showcase-label{font-size:.75rem; letter-spacing:.04em; color:var(--mid)}
@media (prefers-reduced-motion:reduce){ .hero-showcase{transition:none} }
@media (max-width:900px){
  .hero-grid{flex-direction:column; align-items:flex-start; gap:2.4em}
  .hero-showcase{align-self:center}
}

/* icon grid */
.grid{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:2em}
.flow-layout{display:flex; align-items:flex-start; gap:1.6em}
.flow-col{flex:1; min-width:0}
.flow-col .grid{max-width:420px}
.flow-arrow{flex:0 0 auto; width:120px; padding-top:2.6em; align-self:center}
.flow-track{position:relative; width:100%; height:26px; border-bottom:1px solid var(--hair)}
.flow-truck{position:absolute; bottom:1px; left:0; width:52px; height:26px; animation:truckDrive 3.6s ease-in-out infinite}
.flow-truck svg{width:100%; height:100%; stroke:var(--ink); stroke-width:1.15}
.flow-truck .flow-heart{animation:brandHeartColor 4s linear infinite}
@keyframes truckDrive{
  0%{left:0; opacity:0}
  8%{opacity:1}
  46%{left:calc(100% - 52px); opacity:1}
  56%{opacity:0}
  57%{left:0}
  100%{left:0; opacity:0}
}
@media (prefers-reduced-motion:reduce){ .flow-truck{animation:none; opacity:1; left:calc(50% - 26px)} }
@media (max-width:760px){
  .flow-layout{flex-direction:column; align-items:center; gap:.4em}
  .flow-arrow{width:120px; padding:0; margin:.6em 0; transform:rotate(90deg)}
}
.grid.cols-1{grid-template-columns:1fr; max-width:360px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:820px){ .grid.cols-3,.grid.cols-4,.grid.cols-5{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .grid.cols-3,.grid.cols-4,.grid.cols-5{grid-template-columns:1fr} }
.cell{background:var(--paper); padding:2em 1.6em; display:flex; flex-direction:column; gap:1em}
.cell svg{width:34px; height:34px; stroke:var(--ink); stroke-width:1.15}
.cell h3{margin:0}
.cell ul{list-style:none; margin:0; padding:0; font-size:.82rem; color:var(--mid)}
.cell ul li{padding:2px 0}
.cell.center{align-items:center; text-align:center}

/* steps */
.steps{position:relative; margin-top:3em; padding-top:2em}
.steps::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--hair)}
.steps ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair)}
.steps li{background:var(--paper); padding:1.6em 1.4em 0}
.steps .n{font-size:.75rem; color:var(--mid); display:block; margin-bottom:.6em}
@media (max-width:760px){ .steps ol{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .steps ol{grid-template-columns:1fr} }

/* need cards */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin:1.8em 0; font-size:.78rem}
.filters button{
  font-family:var(--mono); background:none; border:1px solid var(--faint); color:var(--mid);
  padding:7px 14px; cursor:pointer;
}
.filters button.active{border-color:var(--ink); color:var(--ink)}
.needs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair)}
@media (max-width:900px){ .needs-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .needs-grid{grid-template-columns:1fr} }
.need-card{background:var(--paper); padding:1.6em; display:flex; flex-direction:column; gap:.5em}
.need-card svg{width:26px; height:26px; stroke:var(--ink); stroke-width:1.15; margin-bottom:.4em}
.need-card .title{font-weight:600; text-transform:uppercase; font-size:.85rem; letter-spacing:.02em}
.need-card .meta{font-size:.78rem; color:var(--mid)}
.need-card .qty{font-size:.78rem; margin-top:.3em}
.need-card .price{font-size:.9rem; margin-top:.4em}
.need-card .remaining{font-size:.78rem; color:var(--mid)}
.need-card .btn{margin-top:.9em; align-self:flex-start}
.empty{padding:3em 0; color:var(--mid); font-size:.85rem}

/* forms */
form.staged{margin-top:2em; max-width:640px}
fieldset{border:0; padding:0; margin:0 0 2.4em; border-top:1px solid var(--hair); padding-top:1.6em}
fieldset legend{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); padding:0; margin-bottom:1.2em}
.field{margin-bottom:1.2em}
.field label{display:block; font-size:.78rem; color:var(--mid); margin-bottom:.5em}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field select,.field textarea{
  width:100%; font-family:var(--mono); font-size:.9rem; padding:10px 12px; border:1px solid var(--faint); background:var(--paper); color:var(--ink);
}
.field textarea{min-height:90px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.choice-row{display:flex; gap:10px; flex-wrap:wrap}
.choice{
  border:1px solid var(--faint); padding:12px 16px; cursor:pointer; font-size:.82rem; display:flex; align-items:center; gap:8px;
}
.choice input{margin:0}
.choice.selected{border-color:var(--ink); background:var(--ink); color:var(--paper)}
.choice svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.2}
.item-qty-row{
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding:12px 0; border-bottom:1px solid var(--hair);
}
.item-qty-row:first-child{border-top:1px solid var(--hair); margin-top:1.4em}
.item-qty-row .item-qty-label{font-size:.85rem; display:flex; align-items:center; gap:8px}
.item-qty-row .item-qty-label svg{width:18px; height:18px; stroke:var(--ink); stroke-width:1.2}
.item-qty-row select{
  font-family:var(--mono); font-size:.82rem; padding:8px 10px; border:1px solid var(--faint);
  background:var(--paper); color:var(--ink); min-width:140px;
}
.item-qty-row select:invalid{color:var(--mid)}
.dropzone{
  border:1px dashed var(--faint); padding:2.4em 1.2em; text-align:center; font-size:.82rem; color:var(--mid); cursor:pointer;
}
.dropzone.drag{border-color:var(--ink); color:var(--ink)}
.dropzone input{display:none}
.file-list{list-style:none; margin:.8em 0 0; padding:0; font-size:.78rem; color:var(--mid)}
.confirm{padding:4em 0; text-align:center}
.confirm .ok{font-size:1.3rem; margin-bottom:.4em}

/* corp closeout / placement */
.placement{border:1px solid var(--hair); padding:2em; max-width:520px; margin-top:2em}
.placement .id{font-size:.75rem; color:var(--mid); margin-bottom:1em}
.placement .num{font-size:1.6rem; margin-bottom:.2em}
.placement dl{display:grid; grid-template-columns:auto 1fr; gap:.3em 1em; font-size:.85rem; margin-top:1em}
.placement dt{color:var(--mid)}

/* admin */
.admin-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:1.6em}
.admin-stats .stat{background:var(--paper); padding:1.6em; text-align:left}
.admin-stats .num{font-size:2rem; display:block}
.admin-stats .lbl{font-size:.75rem; color:var(--mid); text-transform:uppercase; letter-spacing:.08em}
.tabs{display:flex; gap:2px; margin-top:2.4em; border-bottom:1px solid var(--hair); flex-wrap:wrap}
.tabs button{font-family:var(--mono); background:none; border:0; padding:10px 16px; font-size:.8rem; color:var(--mid); cursor:pointer; border-bottom:2px solid transparent}
.tabs button.active{color:var(--ink); border-bottom-color:var(--ink)}
table.data{width:100%; border-collapse:collapse; margin-top:1.6em; font-size:.82rem}
table.data th{text-align:left; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); border-bottom:1px solid var(--hair); padding:8px 10px}
table.data td{border-bottom:1px solid var(--hair); padding:10px 10px; vertical-align:top}
table.data tr:last-child td{border-bottom:0}
.gate{max-width:340px; margin:6em auto; text-align:center}
.gate input{width:100%; font-family:var(--mono); padding:10px 12px; border:1px solid var(--faint); margin:1em 0}
.pill{font-size:.68rem; padding:2px 8px; border:1px solid var(--faint); text-transform:uppercase; letter-spacing:.05em}

/* footer */
footer.site{padding:3em var(--pad); border-top:1px solid var(--hair); font-size:.78rem; color:var(--mid)}
footer.site .wrap{max-width:var(--max); margin:0 auto; padding:0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.6em}
footer.site a{text-decoration:none; margin-right:16px}
footer.site .mark{color:var(--ink); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4em; display:block}

.divider{border:0; border-top:1px solid var(--hair); margin:0}
.msg{font-size:.85rem; padding:10px 0; color:var(--mid)}
.msg.error{color:#a11}