/* Benchside website. Brand: Ink #17191A, Charcoal #1E2120, Birch #F5F1E8, Shaving #EFE7D8, Walnut #6E4B2E, Oak #C9A47C.
   Archivo (wide) for display, Instrument Sans for everything else. */
@font-face{font-family:'Archivo';src:url(/assets/fonts/archivo.woff) format('woff');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(/assets/fonts/instrument-sans.woff) format('woff');font-weight:400 700;font-stretch:75% 100%;font-display:swap}
:root{
  --ink:#17191A;--ink2:#3A3D3F;--muted:#6B6E70;--line:#E2DCCF;--birch:#F5F1E8;--shaving:#EFE7D8;--paper:#FFFFFF;
  --char:#1E2120;--walnut:#6E4B2E;--oak:#C9A47C;--photo:#ECEAE4;
  --font:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--disp:'Archivo','Instrument Sans',sans-serif;
  --wrap:1200px;--gut:max(20px,env(safe-area-inset-left,0px));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--birch);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:600;font-stretch:112%;line-height:1.05;letter-spacing:-.01em;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font:600 12.5px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--walnut);margin:0 0 16px}
.lead{font-size:20px;line-height:1.5;color:var(--ink2);max-width:60ch}
.fine{font-size:14px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--birch);font:600 15.5px/1 var(--font);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.light{background:var(--birch);color:var(--ink);border-color:var(--birch)}
.btn.small{height:38px;padding:0 16px;font-size:14px}
.tm{font-size:.5em;vertical-align:super;margin-left:1px;letter-spacing:0}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(245,241,232,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:24px}
.brand span{font:600 15px/1 var(--disp);font-stretch:112%;letter-spacing:.22em}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-size:15px;color:var(--ink2)}.nav a:hover{color:var(--ink)}
.top .btn{height:40px;padding:0 18px;font-size:14.5px}
@media (max-width:820px){.nav{display:none}.top .btn{margin-left:auto}}

/* hero */
.hero{padding:56px 0 0;text-align:center;overflow:hidden}
.hero h1{font-size:clamp(40px,6.4vw,84px);max-width:16ch;margin:0 auto 20px}
.hero .lead{margin:0 auto 30px;text-align:center}
.hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .note{margin-top:14px}
.hero-img{margin:44px auto 0;max-width:1500px;padding:0 var(--gut)}
.hero-img img{width:100%;border-radius:20px;background:var(--photo)}

/* steps */
.steps{padding:72px 0 24px}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
.steps li::before{content:"0" counter(s);font:600 13px/1 var(--disp);letter-spacing:.12em;color:var(--walnut);display:block;margin-bottom:12px}
.steps b{display:block;font:600 21px/1.2 var(--disp);font-stretch:112%;margin-bottom:8px}
.steps span{color:var(--ink2)}
@media (max-width:820px){.steps ol{grid-template-columns:1fr;gap:28px}}

/* sections */
.section{padding:104px 0}
.section.tight{padding:72px 0}
.section h2{font-size:clamp(32px,4.2vw,54px);max-width:18ch;margin-bottom:20px}
.dark{background:var(--char);color:var(--shaving)}
.dark .lead,.dark .fine{color:#B9B3A6}.dark .eyebrow{color:var(--oak)}
.white{background:var(--paper)}

/* split feature: words beside a picture */
.split{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:center}
.split.flip{grid-template-columns:1.25fr 1fr}.split.flip .words{order:2}
.split .pic img{border-radius:16px;background:var(--photo);box-shadow:0 30px 60px -30px rgba(23,25,26,.35)}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ticks li{padding-left:28px;position:relative;color:var(--ink2)}
.dark .ticks li{color:#D6D0C3}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:6px;border-left:2px solid var(--walnut);border-bottom:2px solid var(--walnut);transform:rotate(-45deg) translateY(-3px)}
.dark .ticks li::before{border-color:var(--oak)}
@media (max-width:900px){.split,.split.flip{grid-template-columns:1fr;gap:36px}.split.flip .words{order:0}}

/* pieces gallery */
.pgroups{display:grid;gap:56px;margin-top:48px}
.pgroup h3{font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-stretch:100%;color:var(--muted);margin-bottom:16px}
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.pcard{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 24px 40px -24px rgba(23,25,26,.35)}
.pcard img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--photo)}
.pcard .pc-t{padding:16px 18px 18px;display:grid;gap:4px}
.pcard b{font:600 18px/1.2 var(--disp);font-stretch:108%}
.pcard small{color:var(--muted);font-size:14px}
.pcard .price{font:600 13px/1 var(--font);color:var(--walnut);margin-top:6px}

/* "everything to build it" tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.tile{background:var(--paper);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.tile img{aspect-ratio:16/11;object-fit:cover;object-position:top left;width:100%;background:var(--photo);border-bottom:1px solid var(--line)}
.tile div{padding:20px 22px 24px}
.tile b{display:block;font:600 19px/1.2 var(--disp);font-stretch:108%;margin-bottom:6px}
.tile p{margin:0;color:var(--ink2);font-size:15.5px}
@media (max-width:980px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tiles{grid-template-columns:1fr}}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.price-card{background:var(--paper);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.price-card.feat{background:var(--ink);color:var(--shaving)}
.price-card h3{font-size:22px}
.price-card .amt{font:600 44px/1 var(--disp);font-stretch:108%}
.price-card .amt small{font:500 15px/1 var(--font);color:var(--muted);margin-left:6px}
.price-card.feat .amt small,.price-card.feat .fine{color:#B9B3A6}
.price-card ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:15.5px}
.price-card li{padding-left:22px;position:relative}
.price-card li::before{content:"";position:absolute;left:2px;top:.6em;width:10px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px);opacity:.7}
.bands{width:100%;border-collapse:collapse;font-size:15px;margin-top:4px}
.bands td{padding:7px 0;border-top:1px solid var(--line);vertical-align:top}
.price-card.feat .bands td{border-top-color:#3A3D3F}
.bands td:last-child{text-align:right;font-weight:600;white-space:nowrap;padding-left:12px}
.bands small{display:block;color:var(--muted);font-size:13px}
.price-card.feat .bands small{color:#9C968A}
@media (max-width:980px){.prices{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:600 18px/1.35 var(--font);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:24px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;color:var(--ink2)}

/* early access */
.join{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.join form{background:var(--paper);color:var(--ink);border-radius:18px;padding:28px;display:grid;gap:14px}
.join label{font-size:14px;font-weight:600;display:grid;gap:6px}
.join input,.join select,.join textarea{font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);width:100%}
.join textarea{min-height:84px;resize:vertical}
.join .hp{position:absolute;left:-9999px}
.join .msg{min-height:1.2em;margin:0;font-size:14.5px}
.join .msg.ok{color:#2D6A3E}.join .msg.err{color:#8C2A1C}
@media (max-width:900px){.join{grid-template-columns:1fr}}

/* footer */
.foot{padding:56px 0 64px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-start}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin-left:auto}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}

/* plan pages */
.crumbs{font-size:14px;color:var(--muted);padding-top:28px}.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.phead{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center;padding:28px 0 72px}
.phead h1{font-size:clamp(36px,5vw,64px);margin-bottom:18px}
.phead .pic img{border-radius:18px;background:var(--photo)}
.phead .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:14px;overflow:hidden;margin:4px 0 28px}
.facts div{background:var(--paper);padding:14px 16px}
.facts span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.facts b{font-weight:600;font-size:15.5px}
@media (max-width:900px){.phead{grid-template-columns:1fr;gap:32px}.facts{grid-template-columns:1fr 1fr}}
.pbody{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;padding-bottom:96px}
.pbody h2{font-size:26px;margin:0 0 14px}
.pbody section{margin-bottom:40px}
.pbody ol{padding-left:22px;color:var(--ink2)}.pbody ol li{margin-bottom:8px}
.pbody table{width:100%;border-collapse:collapse;font-size:15px}
.pbody td{padding:8px 0;border-top:1px solid var(--line);vertical-align:top}
.pbody td:first-child{width:3.2em;font-variant-numeric:tabular-nums;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:14px}
.locked{background:var(--paper);border-radius:16px;padding:22px 24px}
.locked h2{font-size:21px}
@media (max-width:900px){.pbody{grid-template-columns:1fr;gap:8px}}
.more{padding:72px 0 96px;border-top:1px solid var(--line)}

/* legal pages */
.legal{max-width:760px;padding:56px 0 96px}
.legal h1{font-size:44px;margin-bottom:8px}
.legal h2{font-size:22px;margin:36px 0 10px;font-stretch:100%}
.legal p,.legal li{color:var(--ink2)}
.legal .updated{color:var(--muted);font-size:14.5px;margin-bottom:28px}
.tile{color:var(--ink)}
@media (max-width:640px){.hero-img img{aspect-ratio:4/3;object-fit:cover;object-position:42% 60%}.hero{padding-top:36px}}