/* Layout: dark prototype rail on top; each product renders as its own site below it, sharing one concrete-and-ink palette with a per-brand accent. */
:root{
  --paper:#f2f3ef; --surface:#ffffff; --sunk:#e8eae4; --ink:#16211e; --muted:#5b6964; --line:#d6dad3;
  --o:#0d6a55; --o-soft:#dcefe8; --h:#bf4e28; --h-soft:#f8e4da;
  --ok:#2c7a4b; --warn:#a8700f; --bad:#b23535; --ok-soft:#e1f1e6; --warn-soft:#f7ecd5; --bad-soft:#f6dddd;
  --chrome:#0f1b18; --chrome-ink:#dfe7e3; --chrome-muted:#8fa29b;
  --acc:var(--o); --acc-soft:var(--o-soft);
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --r:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0f1513; --surface:#171f1c; --sunk:#1e2824; --ink:#e6ece9; --muted:#97a6a0; --line:#2a3632;
  --o:#3fb595; --o-soft:#16352c; --h:#e8805a; --h-soft:#3a2219;
  --ok:#5cc48a; --warn:#e2ad4a; --bad:#ec7a7a; --ok-soft:#173323; --warn-soft:#352a12; --bad-soft:#3a1c1c;
  --chrome:#08100d; --chrome-ink:#dfe7e3; --chrome-muted:#7f948c; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0f1513; --surface:#171f1c; --sunk:#1e2824; --ink:#e6ece9; --muted:#97a6a0; --line:#2a3632;
  --o:#3fb595; --o-soft:#16352c; --h:#e8805a; --h-soft:#3a2219;
  --ok:#5cc48a; --warn:#e2ad4a; --bad:#ec7a7a; --ok-soft:#173323; --warn-soft:#352a12; --bad-soft:#3a1c1c;
  --chrome:#08100d; --chrome-ink:#dfe7e3; --chrome-muted:#7f948c; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome)}
.hh{--acc:var(--h);--acc-soft:var(--h-soft)}
h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.1}
h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.15rem;font-weight:700}
p{margin:0}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* prototype rail */
.rail{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--chrome);color:var(--chrome-ink)}
.rail .wrap{display:flex;align-items:center;gap:12px;padding-block:8px;flex-wrap:wrap}
.rail .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-muted)}
.rail nav{display:flex;gap:4px;flex-wrap:wrap}
.rail button{background:transparent;border:1px solid transparent;color:var(--chrome-muted);padding:5px 10px;border-radius:6px;cursor:pointer;font-size:13px}
.rail button[aria-current="true"]{color:var(--chrome-ink);border-color:#ffffff30;background:#ffffff12}
.rail .domain{margin-left:auto;font-family:var(--f-mono);font-size:12px;color:var(--chrome-muted)}

/* site header */
.site-head{border-bottom:1px solid var(--line);background:var(--surface)}
.site-head .wrap{display:flex;align-items:center;gap:16px;padding-block:14px;flex-wrap:wrap}
.logo{font-family:var(--f-display);font-weight:800;font-size:1.45rem;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.logo i{display:inline-block;width:22px;height:22px;border-radius:5px;background:var(--acc);position:relative}
.logo i::after{content:"";position:absolute;left:5px;right:5px;top:9px;height:4px;border-radius:2px;background:var(--surface)}
.hh .logo i{border-radius:50% 50% 4px 4px}
.site-head nav{display:flex;gap:18px;font-size:14px;color:var(--muted)}
.site-head nav a{color:inherit;text-decoration:none;cursor:pointer}
.head-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.locale{display:flex;gap:4px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:2px 4px;background:var(--paper)}
.locale select{border:0;background:transparent;padding:4px;font-size:13px;cursor:pointer}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;padding:9px 16px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
:root[data-theme="dark"] .btn.primary{color:#0b1210}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{color:#0b1210}}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.danger{color:var(--bad)}

/* landing */
.hero{padding-block:56px 40px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:52ch;margin-top:16px}
.hero .ctas{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.trust{margin-top:14px;font-size:13px;color:var(--muted);font-family:var(--f-mono)}
.section{padding-block:48px;border-top:1px solid var(--line)}
.section > .wrap > h2{margin-bottom:24px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step b{display:block;font-family:var(--f-mono);font-size:12px;color:var(--acc);margin-bottom:6px}
.step h3{margin-bottom:6px}
.step p{color:var(--muted)}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.feat{background:var(--surface);padding:22px}
.feat h3{font-size:1rem;margin-bottom:6px}
.feat p{color:var(--muted);font-size:14px}
.price-card{max-width:440px;background:var(--surface);border:2px solid var(--acc);border-radius:14px;padding:28px}
.price-card .amt{font-family:var(--f-display);font-size:3.2rem;font-weight:800;letter-spacing:-.03em}
.price-card ul{padding-left:18px;margin:16px 0;color:var(--muted)}
.foot{padding-block:28px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.foot .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* sample quote sheet */
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 18px 40px -24px #0b1a1566}
.sheet .sh-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:10px;margin-bottom:10px;gap:8px}
.sheet .row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0}
.sheet .row span:first-child{color:var(--muted)}
.sheet .tot{border-top:1px solid var(--ink);margin-top:8px;padding-top:8px;font-weight:600}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--acc-soft);color:var(--acc);font-weight:600;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)} .chip.warn{background:var(--warn-soft);color:var(--warn)} .chip.bad{background:var(--bad-soft);color:var(--bad)} .chip.mute{background:var(--sunk);color:var(--muted)}

/* app shell */
.app{display:grid;grid-template-columns:220px 1fr;min-height:70vh}
.side{border-right:1px solid var(--line);background:var(--surface);padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.side button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;background:transparent;border:0;padding:9px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:500}
.side button[aria-current="true"]{background:var(--acc-soft);color:var(--acc);font-weight:600}
.side .who{padding:10px 12px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.side .who b{display:block;font-size:14px}
.side .who span{font-size:12px;color:var(--muted)}
.badge{font-family:var(--f-mono);font-size:11px;background:var(--acc);color:#fff;border-radius:999px;padding:0 7px}
.main{padding:24px max(16px,env(safe-area-inset-right,0px)) 40px 24px;min-width:0}
.main > h2{margin-bottom:4px}
.sub{color:var(--muted);margin-bottom:20px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kpi b{display:block;font-family:var(--f-display);font-size:1.8rem;font-weight:700;margin-top:2px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.panel + .panel{margin-top:16px}
.panel h3{margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.split{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
td.r,th.r{text-align:right}
tr.group td{background:var(--sunk);font-weight:600;font-size:13px}
input[type=text],input[type=email],input[type=number],input[type=tel],select,textarea{border:1px solid var(--line);background:var(--paper);border-radius:7px;padding:7px 10px;width:100%}
input[type=number]{font-family:var(--f-mono);text-align:right}
td input[type=number]{max-width:110px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
label.f small{font-weight:400;color:var(--muted)}
.form{display:grid;gap:12px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:13px;color:var(--muted)}
.callout{background:var(--acc-soft);border-radius:8px;padding:12px 14px;font-size:14px}
.req-card{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer;margin-bottom:8px}
.req-card[aria-current="true"]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.req-card .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.req-card small{color:var(--muted)}
.totals{margin-left:auto;max-width:340px;display:grid;gap:4px;margin-top:12px}
.totals div{display:flex;justify-content:space-between}
.totals .grand{font-family:var(--f-display);font-size:1.4rem;font-weight:700;border-top:1px solid var(--ink);padding-top:6px;margin-top:4px}
.toggle{position:relative;width:44px;height:24px;flex:none}
.toggle input{opacity:0;position:absolute;inset:0;cursor:pointer;z-index:1;margin:0}
.toggle span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:.2s}
.toggle span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);transition:.2s;box-shadow:0 1px 2px #0003}
.toggle input:checked + span{background:var(--acc)}
.toggle input:checked + span::after{transform:translateX(20px)}
.setrow{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow p{color:var(--muted);font-size:13px}
.pipeline{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}
.pipeline span{font-size:11px;font-family:var(--f-mono);padding:2px 8px;border-radius:4px;background:var(--sunk);color:var(--muted)}
.pipeline span.done{background:var(--ok-soft);color:var(--ok)}
.pipeline span.now{background:var(--warn-soft);color:var(--warn)}
pre.diff{font-family:var(--f-mono);font-size:12px;background:var(--sunk);border-radius:8px;padding:10px;overflow-x:auto;margin:8px 0;line-height:1.45}
pre.diff .a{color:var(--ok)} pre.diff .d{color:var(--bad)}
.item{border-bottom:1px solid var(--line);padding:14px 0}
.item:last-child{border-bottom:0}
.item .hd{display:flex;justify-content:space-between;gap:10px;align-items:start;flex-wrap:wrap}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* login + wizard */
.center{display:grid;place-items:center;padding-block:56px}
.login{width:100%;max-width:400px}
.login .panel{padding:28px}
.wizard{max-width:820px;margin:0 auto;padding-block:32px}
.progress{display:flex;gap:4px;margin:18px 0 6px}
.progress i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.progress i.done{background:var(--acc)}
.progress i.now{background:var(--acc);opacity:.5}
.wz-steps{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:22px}
.wz-steps span.now{color:var(--acc);font-weight:600}
.conn{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.conn .c{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--paper)}
.conn .c .ic{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;background:var(--sunk);flex:none}
.conn .c div{flex:1;min-width:0}
.conn .c small{display:block;color:var(--muted);font-size:12px}
.conn .c.on{border-color:var(--ok);background:var(--ok-soft)}
.wz-nav{display:flex;justify-content:space-between;gap:10px;margin-top:24px;flex-wrap:wrap}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:14px;background:var(--paper)}
.checks label:has(input:checked){border-color:var(--acc);background:var(--acc-soft);color:var(--acc);font-weight:600}
.checks input{accent-color:var(--acc)}

/* handyhood */
.hh-hero{background:var(--h-soft);padding-block:56px 48px}
.search{display:flex;gap:8px;margin-top:24px;max-width:520px;background:var(--surface);padding:6px;border-radius:12px;border:1px solid var(--line)}
.search input{border:0;background:transparent;font-size:1.05rem;padding:10px}
.pros{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pro{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.pro .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;background:var(--h-soft);color:var(--h)}
.pro .top{display:flex;gap:12px;align-items:center}
.pro small{color:var(--muted)}
.pro .meta{display:flex;gap:6px;flex-wrap:wrap}
.pro .btn{margin-top:auto}
.roomrow{display:grid;grid-template-columns:1fr 120px 36px;gap:8px;align-items:center}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;font-size:14px;z-index:50;max-width:calc(100% - 32px)}
.note{font-size:12px;font-family:var(--f-mono);color:var(--muted)}

@media (max-width:900px){
  .hero-grid,.grid2,.split{grid-template-columns:1fr}
  .steps,.feats{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .app{grid-template-columns:1fr}
  .side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .side .who{display:none}
  .side button{width:auto;white-space:nowrap;gap:6px}
  .main{padding-left:max(16px,env(safe-area-inset-left,0px))}
  .site-head nav{display:none}
  .conn{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
}

/* ---------- additions for the real app ---------- */
a{color:var(--acc)}
.rail{display:none}
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:15}
.err{color:var(--bad);font-size:13px}
.ok-text{color:var(--ok)}
.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 14px;border-radius:8px;background:var(--warn-soft);color:var(--ink);margin-bottom:16px;font-size:14px}
.banner.info{background:var(--acc-soft)}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
.photos{display:flex;gap:6px;flex-wrap:wrap}
.photos button,.photos .ph{position:relative;padding:0;border:0;background:var(--sunk);border-radius:8px;overflow:hidden;cursor:zoom-in;width:84px;height:84px;flex:none}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.photos .rm{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:#000a;color:#fff;cursor:pointer;font-size:12px;line-height:22px;text-align:center}
.photos.big button{width:140px;height:105px}
.lightbox{position:fixed;inset:0;background:#0b1210e6;z-index:60;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px}
.lightbox img{max-width:100%;max-height:86vh;border-radius:6px}
.lightbox .x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:16px;background:#fff2;color:#fff;border:0;border-radius:8px;padding:8px 12px;cursor:pointer}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);background:#fff2;color:#fff;border:0;border-radius:8px;padding:12px 14px;cursor:pointer;font-size:20px}
.lightbox .prev{left:12px}.lightbox .next{right:12px}
.modal-bg{position:fixed;inset:0;background:#0b121099;z-index:50;display:grid;place-items:center;padding:16px}
.modal{background:var(--surface);border-radius:14px;max-width:720px;width:100%;max-height:90vh;overflow:auto;padding:22px;border:1px solid var(--line)}
.modal .hd{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-bottom:12px}
.lines td{vertical-align:top}
.lines input,.lines select,.lines textarea{padding:6px 8px}
.lines td.desc{min-width:220px}
.lines tr.section td{background:var(--sunk);font-weight:600}
.lines tr.review td{background:var(--warn-soft)}
.lines .kind{font-size:11px;font-family:var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.lines .tools{white-space:nowrap}
.lines .tools button{padding:3px 7px}
.addbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lineform{display:grid;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--paper)}
.lineform .row3{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lineform .qty{display:flex;align-items:center;gap:6px}
.lineform .qty input{max-width:140px}
.pro .strip{height:120px;margin:-16px -16px 4px;border-radius:12px 12px 0 0;overflow:hidden;background:var(--h-soft);display:grid;place-items:center;color:var(--h);font-family:var(--f-display);font-weight:800;font-size:2rem}
.pro .strip img{width:100%;height:100%;object-fit:cover}
.pro .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 12px;cursor:pointer;color:var(--muted);font-weight:600}
.tabs button[aria-current="true"]{color:var(--acc);border-bottom-color:var(--acc)}
.trade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.trade-grid label{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--paper)}
.trade-grid label:has(input:checked){border-color:var(--acc);background:var(--acc-soft);font-weight:600}
.trade-grid input{accent-color:var(--acc)}
.doc-sheet{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;max-width:860px;margin:0 auto}
.doc-sheet .top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.doc-sheet .logo-img{max-height:56px;max-width:180px}
.muted{color:var(--muted)}
.right{text-align:right}
.mt{margin-top:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.code-input{font-family:var(--f-mono);font-size:1.6rem;letter-spacing:.3em;text-align:center;max-width:220px}
.qr{width:150px;height:150px;image-rendering:pixelated;background:#fff;padding:6px;border-radius:8px}
.phone-frame{width:280px;border:10px solid #111;border-radius:34px;overflow:hidden;background:#111;box-shadow:0 20px 40px -20px #0008;flex:none}
.phone-frame img{display:block;width:100%}
@media print{
  .site-head,.no-print,.toast{display:none!important}
  body{background:#fff}
  .doc-sheet{border:0;padding:0}
}
@media (max-width:900px){.lineform .row3{grid-template-columns:1fr}}

.tabs{flex-wrap:nowrap;overflow-x:auto}
.tabs button{white-space:nowrap;flex:none}