@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Cinzel:wght@500;600&display=swap');
  :root{
    /* dark surface ladder */
    --bg:#0d0f12; --panel:#15181c; --panel2:#1c2025; --s3:#23272d;
    --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.13);
    --ink:#eef0f2; --muted:#9aa1ab; --faint:#666d77;
    --gold:#c8a24c; --gold-lt:#e8d29a; --gold-dk:#a5791f;
    --accent:#c8a24c; --accent-soft:rgba(200,162,76,.18); --accent2:#e5b567;
    --full:#cbb896; --fullStroke:#8f7d5e; --cut:#8fb0d6; --cutStroke:#5f7fa6;
    --sliver:#e5674f; --grout:#23272d; --good:#4ec98a; --warn:#e5b567; --bad:#e5674f;
    /* radius + spacing scales */
    --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px;
    --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px;
    --shadow:0 6px 20px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  }
  *{box-sizing:border-box}
  body{margin:0;font:14px/1.5 Inter,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
       background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
  .tnum,table.mat,.stat b,.hero,input.frac,.decread{font-variant-numeric:tabular-nums}
  header{padding:12px 24px;background:linear-gradient(180deg,#0f1115,#0b0d10);
         border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:12px;margin:0}
  .brand-mark{width:40px;height:auto;flex:0 0 auto;display:block}
  .brand-word{font-family:Cinzel,serif;font-weight:600;font-size:23px;line-height:1;letter-spacing:.14em;
              background:linear-gradient(180deg,var(--gold-lt),var(--gold) 55%,var(--gold-dk));
              -webkit-background-clip:text;background-clip:text;color:transparent;padding-left:2px}
  .brand-tag{color:var(--gold);opacity:.72;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
             margin-top:3px;font-weight:500}
  header .tag{color:var(--muted);font-size:12.5px}
  header .spacer{flex:1}
  button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel2);
         color:var(--ink);padding:8px 14px;border-radius:var(--r-md);font-weight:500;
         transition:background-color 120ms ease,border-color 120ms ease,transform 120ms ease}
  button.primary{background:var(--accent);border-color:transparent;color:#06101f;font-weight:600}
  button.primary:hover{background:#d8b45f}
  button.ghost{background:transparent}
  button.ghost:hover{border-color:var(--line-strong);background:rgba(255,255,255,.03)}
  button:hover{border-color:var(--line-strong)}
  .layout{display:flex;gap:0;align-items:flex-start}
  .sidebar{width:336px;flex:0 0 336px;background:var(--panel);border-right:1px solid var(--line);
           height:calc(100vh - 55px);overflow:auto;padding:var(--sp4)}
  .main{flex:1;height:calc(100vh - 55px);overflow:auto;padding:var(--sp5) var(--sp5)}
  .grp{margin-bottom:var(--sp2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel2)}
  .grp>summary{padding:11px 14px;cursor:pointer;font-weight:500;list-style:none;font-size:13.5px;
               display:flex;align-items:center;gap:8px}
  .grp>summary::-webkit-details-marker{display:none}
  .grp>summary .chev{color:var(--faint);transition:transform .15s ease;margin-left:auto}
  .grp[open]>summary .chev{transform:rotate(90deg)}
  .grp .body{padding:4px 14px 14px}
  .row{display:flex;gap:8px;margin:8px 0;align-items:center}
  .row label{flex:1;color:var(--muted);font-size:12.5px}
  .row input,.row select{width:100px;background:var(--panel);border:1px solid var(--line);color:var(--ink);
        padding:7px 10px;border-radius:var(--r-xs);font:inherit;text-align:right;
        transition:border-color 120ms ease,box-shadow 120ms ease}
  .row select{width:124px;text-align:left}
  .row input:focus,.row select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .row.wide input,.row.wide select{width:144px}
  input.frac{width:124px;text-align:right}
  .subrow{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:-4px 0 10px}
  .chips{display:flex;gap:5px;flex-wrap:wrap}
  .chip{padding:4px 11px;font-size:11px;border-radius:999px;background:var(--panel2);
        border:1px solid var(--line);color:var(--muted);cursor:pointer;
        transition:background-color 120ms ease,color 120ms ease,border-color 120ms ease}
  .chip:hover{color:var(--ink);border-color:var(--line-strong)}
  .chip.on{color:#ecd9a3;background:var(--accent-soft);border-color:rgba(200,162,76,.55);font-weight:500}
  .decread{color:var(--faint);font-size:11px;white-space:nowrap}
  .hint{color:var(--muted);font-size:11.5px;line-height:1.5;margin:2px 0 10px}
  /* hover help icon + tooltip bubble */
  .hlp{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:5px;
       border-radius:50%;background:var(--gold,#c9a24b);color:#1b1e23;font-size:9.5px;font-weight:800;
       font-style:normal;font-family:Georgia,'Times New Roman',serif;cursor:help;position:relative;vertical-align:middle;
       transform:translateY(-1px);user-select:none}
  .hlp::after{content:attr(data-tip);position:absolute;left:50%;bottom:150%;transform:translateX(-50%);
       min-width:170px;max-width:240px;background:#14171c;color:#e9e6dd;border:1px solid var(--gold,#c9a24b);
       border-radius:8px;padding:8px 10px;font-size:11px;font-weight:500;line-height:1.45;text-align:left;
       box-shadow:0 8px 22px rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .12s;z-index:50;pointer-events:none}
  .hlp:hover::after,.hlp:focus::after{opacity:1;visibility:visible}
  .chk{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:13px}
  .chk input{width:auto;accent-color:var(--accent)}
  /* option cards */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp3);margin-bottom:var(--sp2)}
  .card{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp5);background:var(--panel2);
        position:relative;overflow:hidden;
        transition:border-color 120ms ease,transform 120ms ease,box-shadow 120ms ease}
  .card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:transparent}
  .card:hover{transform:translateY(-1px);border-color:var(--line-strong);box-shadow:var(--shadow)}
  .card.sel{border-color:var(--line-strong)}
  .card.sel::before{background:var(--accent)}
  .card .eyebrow{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .card h3{margin:2px 0 6px;font-size:16px;font-weight:600;letter-spacing:-.01em}
  .card .note{color:var(--muted);font-size:12.5px;line-height:1.45;min-height:34px}
  .card .hero{font-size:27px;font-weight:600;letter-spacing:-.02em;margin:8px 0 2px;color:var(--gold-lt)}
  .stat{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0;font-size:13px;color:var(--muted)}
  .stat b{font-weight:500;color:var(--ink)}
  .pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500}
  .pill.g{background:rgba(78,201,138,.14);color:var(--good)}
  .pill.w{background:rgba(229,181,103,.15);color:var(--warn)}
  .pill.b{background:rgba(229,103,79,.15);color:var(--bad)}
  .card button{width:100%;margin-top:var(--sp4)}
  .tabs{display:flex;gap:6px;margin:var(--sp4) 0 var(--sp3);flex-wrap:wrap}
  .tabs button{padding:7px 14px;border-radius:999px;font-size:12.5px}
  .tabs button.on{background:var(--accent-soft);border-color:rgba(200,162,76,.55);color:#ecd9a3;font-weight:500}
  .section-title{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
                 margin:var(--sp6) 0 var(--sp3);padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:600}
  .surfaces{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp4)}
  .surf{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp4);background:var(--panel2)}
  .surf h4{margin:0 0 10px;font-size:13.5px;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:8px}
  .surf h4 span{color:var(--muted);font-weight:400;font-size:11.5px}
  .surf svg{display:block;width:100%;height:auto;background:#ffffff;border-radius:var(--r-md);border:1px solid var(--line)}
  .legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:11.5px;margin-top:10px}
  .legend i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:5px;border:1px solid}
  table.mat{width:100%;border-collapse:collapse;margin-top:var(--sp2);font-size:13px}
  table.mat th,table.mat td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line)}
  table.mat th:first-child,table.mat td:first-child{text-align:left;color:var(--muted)}
  table.mat td{color:var(--ink)}
  table.mat thead th{background:transparent;color:var(--muted);font-weight:600;font-size:11px;
                     text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}
  table.mat tbody tr{transition:background-color 120ms ease}
  table.mat tbody tr:hover{background:rgba(255,255,255,.03)}
  table.mat tr.total td{font-weight:600;color:var(--ink);border-top:1px solid var(--line-strong)}
  #c3d{width:100%;height:440px;background:radial-gradient(circle at 50% 32%,#171b21,#0b0e12);
       border-radius:var(--r-lg);border:1px solid var(--line);touch-action:none;cursor:grab}
  .view3dwrap{display:flex;gap:var(--sp4);flex-wrap:wrap;align-items:flex-start}
  .view3dwrap .panel{flex:1;min-width:420px}
  .kv{color:var(--muted);font-size:12px;margin:4px 0;line-height:1.5}
  .banner{background:rgba(229,103,79,.12);border:1px solid rgba(229,103,79,.5);color:#ffd9d0;
          padding:10px 13px;border-radius:var(--r-md);margin:var(--sp2) 0;font-size:12.5px;display:none}
  /* Work / Client mode toggle + client preview */
  .modeswitch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel2)}
  .modebtn{border:none;background:transparent;color:var(--muted);padding:7px 15px;border-radius:0;font-size:12.5px;font-weight:500}
  .modebtn.on{background:var(--accent);color:#06101f;font-weight:600}
  .client{max-width:1180px}
  .client-head{margin-bottom:var(--sp5)}
  .client-head .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.85}
  .client-head h2{font-family:Cinzel,serif;font-weight:600;font-size:25px;margin:5px 0 0;letter-spacing:.02em;
    background:linear-gradient(180deg,var(--gold-lt),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
  .client-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
  @media(max-width:860px){.client-grid{grid-template-columns:1fr}}
  .client-3d{position:relative}
  .client-3d canvas{width:100%;height:470px;background:radial-gradient(circle at 50% 34%,#171b21,#0b0e12);
    border-radius:var(--r-lg);border:1px solid var(--line);touch-action:none;cursor:grab;display:block}
  .client-3d .cap{color:var(--faint);font-size:11px;margin-top:9px;text-align:center}
  .zoomctl{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px}
  .zoomctl button{width:32px;height:32px;border-radius:var(--r-md);border:1px solid var(--line);
    background:rgba(15,17,21,.82);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;
    backdrop-filter:blur(4px);transition:border-color 120ms ease}
  .zoomctl button:hover{border-color:var(--accent)}
  .swatch-block{margin-bottom:var(--sp5)}
  .swatch-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:9px;font-weight:600}
  .swatches{display:flex;flex-wrap:wrap;gap:8px}
  .sw{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.16);cursor:pointer;padding:0;
    transition:transform 120ms ease,box-shadow 120ms ease}
  .sw:hover{transform:translateY(-1px)}
  .sw.on{box-shadow:0 0 0 2px var(--accent),0 0 0 4px rgba(0,0,0,.45);border-color:transparent}
  .sw.custom{display:inline-flex;align-items:center;justify-content:center;position:relative;background:var(--panel2);color:var(--muted)}
  .sw.custom input{position:absolute;inset:0;opacity:0;cursor:pointer}
  .sw.custom span{font-size:16px;line-height:1}
  .client-sum{margin-top:var(--sp2);border-top:1px solid var(--line);padding-top:var(--sp4)}
  .client-sum .sum-row{display:flex;justify-content:space-between;font-size:13.5px;margin:9px 0;color:var(--muted)}
  .client-sum .sum-row b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
  .client-sum .sum-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold,#c9a24b);font-weight:700;margin-bottom:2px}
  /* ===================== PRINT / PDF (client handout) ===================== */
  @page{margin:0.75in}
  @media print{
    :root{
      --bg:#fff; --panel:#fff; --panel2:#fff; --s3:#fff;
      --line:#cbd0d6; --line-strong:#9aa1ab;
      --ink:#12151a; --muted:#3d434b; --faint:#6b7280; --accent:#8a6a1f; --accent-soft:#f3ead0;
      --full:#e9dec9; --fullStroke:#b09a78; --cut:#cfe0f0; --cutStroke:#5f7fa6; --sliver:#f0b3a6;
    }
    .sidebar,header .noprint,.tabs,.banner{display:none!important}
    header{border-bottom:2px solid var(--gold-dk);padding:0 0 10px;margin-bottom:14px;background:#fff}
    header h1{font-size:18px;color:#12151a}
    .brand-word{-webkit-text-fill-color:var(--gold-dk);color:var(--gold-dk)}
    .brand-tag{color:var(--gold-dk);opacity:.85}
    .layout{display:block}
    .main{height:auto;overflow:visible;padding:0}
    body{background:#fff;color:#12151a}
    .card,.surf,.grp,table.mat tr,.view3dwrap{break-inside:avoid}
    .card{box-shadow:none;border:1px solid #cbd0d6}
    .card:hover{transform:none}
    .surf svg{background:#fff;border:1px solid #cbd0d6}
    #c3d{border:1px solid #cbd0d6}
    .section-title{break-after:avoid}
  }

  /* ===== STILE splash / intro ===== */
  #splash{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
    background:#0a0b0d;background-size:cover;background-position:center;overflow:hidden;cursor:pointer;
    transition:opacity .9s ease,visibility .9s ease}
  #splash.hide{opacity:0;visibility:hidden}
  #splash::before{content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,.05),rgba(0,0,0,.72) 80%)}
  #splash .wrap{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
  #splash .glow{position:absolute;top:-46px;left:50%;width:340px;height:340px;transform:translateX(-50%);
    background:radial-gradient(circle,rgba(200,162,76,.30),transparent 66%);filter:blur(12px);
    opacity:0;animation:spGlow 1.7s ease .2s forwards;pointer-events:none}
  #splash .s{width:152px;height:auto;position:relative;filter:drop-shadow(0 8px 32px rgba(200,162,76,.34));
    opacity:0;transform:translateY(10px) scale(.9);animation:spS 1.25s cubic-bezier(.2,.75,.2,1) .15s forwards}
  #splash .word{font-family:Cinzel,serif;font-weight:600;font-size:47px;margin:30px 0 0;padding-left:.46em;
    background:linear-gradient(180deg,#efdca6,#c8a24c 52%,#9a6f1b);-webkit-background-clip:text;background-clip:text;
    color:transparent;opacity:0;letter-spacing:.7em;animation:spWord 1.35s cubic-bezier(.2,.7,.2,1) .6s forwards}
  #splash .tag{color:#c8a24c;font-size:12.5px;letter-spacing:.44em;text-transform:uppercase;margin-top:15px;
    opacity:0;animation:spFade 1.1s ease 1.1s forwards}
  #splash .enter{position:absolute;bottom:38px;left:0;right:0;color:rgba(200,162,76,.5);font-size:10px;
    letter-spacing:.34em;text-transform:uppercase;opacity:0;animation:spFade 1.2s ease 1.9s forwards}
  @keyframes spS{to{opacity:1;transform:none}}
  @keyframes spGlow{to{opacity:1}}
  @keyframes spWord{from{opacity:0;letter-spacing:.72em;transform:translateY(8px)}to{opacity:1;letter-spacing:.46em;transform:none}}
  @keyframes spFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){#splash *{animation-duration:.01ms!important}}
  @media print{#splash{display:none!important}}

  /* ===================== MOBILE / PHONE-FIRST RESPONSIVE ===================== */
  #menuBtn{display:none}
  #scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1400;opacity:0;visibility:hidden;transition:opacity .2s ease}
  #scrim.on{opacity:1;visibility:visible}
  .hlp.tip-on::after{opacity:1;visibility:visible}
  @media (max-width:900px){
    html{-webkit-text-size-adjust:100%}
    header{position:sticky;top:0;z-index:1300;padding:10px 12px;gap:10px;background:linear-gradient(180deg,#0f1115,#0b0d10)}
    .brand-mark{width:30px}
    .brand-word{font-size:19px}
    .brand-tag{display:none}
    #menuBtn{display:inline-flex;align-items:center;gap:7px;padding:9px 12px}
    .layout{display:block}
    .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);z-index:1500;
      height:100vh;height:100dvh;transform:translateX(-103%);transition:transform .25s ease;
      box-shadow:0 0 44px rgba(0,0,0,.65);border-right:1px solid var(--line-strong)}
    .sidebar.open{transform:none}
    .main{height:auto;min-height:60vh;overflow:visible;padding:14px 12px 48px}
    .view3dwrap{flex-direction:column}
    .view3dwrap .panel{min-width:0;width:100%}
    .client{max-width:none}
    .client-grid{grid-template-columns:1fr}
    #c3d{height:46vh;height:46dvh}
    .client-3d #c3d{height:56vh;height:56dvh}
    .cards{grid-template-columns:1fr}
    .surfaces{grid-template-columns:1fr}
    /* bigger touch targets; 16px inputs stop iOS auto-zoom on focus */
    .row input,.row select,input.frac{font-size:16px;padding:10px 12px}
    .row input{width:108px}
    .row select{width:136px}
    .row.wide input,.row.wide select{width:152px}
    input.frac{width:136px}
    button{padding:10px 14px}
    .tabs button{padding:9px 15px;font-size:13px}
    .chip{padding:8px 14px;font-size:12.5px}
    .modebtn{padding:9px 13px}
    .zoomctl button{width:42px;height:42px;font-size:20px}
    .grp>summary{padding:14px}
    .hlp{width:18px;height:18px;font-size:11px}
    .hlp::after{min-width:150px;max-width:62vw}
    .client-head h2{font-size:20px}
    #splash .word{font-size:32px;letter-spacing:.5em}
    #splash .s{width:110px}
  }

  /* ===================== v9a — ROLE GATE + CONSUMER MODE ===================== */
  #rolegate{position:fixed;inset:0;z-index:1900;display:none;align-items:center;justify-content:center;
    background:radial-gradient(120% 90% at 50% 16%,#15181d,#08090b 82%);padding:26px;text-align:center}
  #rolegate.on{display:flex}
  #rolegate .gwrap{max-width:580px;display:flex;flex-direction:column;align-items:center;gap:14px}
  #rolegate .glg{font-family:Cinzel,serif;font-weight:600;font-size:34px;letter-spacing:.2em;padding-left:.2em;
    background:linear-gradient(180deg,var(--gold-lt),var(--gold) 55%,var(--gold-dk));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  #rolegate p{margin:0;color:var(--muted);font-size:14px;max-width:410px;line-height:1.55}
  #rolegate .gopts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px;width:100%}
  #rolegate .gopt{flex:1 1 215px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;
    padding:18px 16px;text-align:left;cursor:pointer;transition:.18s;color:var(--ink);font:inherit}
  #rolegate .gopt:hover{border-color:var(--gold);background:var(--s3)}
  #rolegate .gopt b{display:block;font-size:15.5px;margin-bottom:5px}
  #rolegate .gopt small{color:var(--muted);font-size:12.5px;line-height:1.5;display:block}
  #rolegate .gfoot{font-size:11.5px;color:var(--faint);margin-top:2px}
  .rolechip{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:100px;
    padding:6px 11px;cursor:pointer;background:transparent}
  .rolechip b{color:var(--gold-lt);font-weight:600}
  .rolechip:hover{border-color:var(--gold)}

  /* consumer chrome: hide the installer-only header controls */
  body.role-consumer .modeswitch,
  body.role-consumer header .ghost,
  body.role-consumer header .primary{display:none!important}

  body.role-consumer .sidebar{padding:0;display:flex;flex-direction:column;overflow:hidden}
  .cons-grab{display:none;place-items:center;padding:9px 0 3px;cursor:pointer;flex:0 0 auto}
  .cons-grab i{display:block;width:44px;height:4px;border-radius:4px;background:#3b4048}
  .cons-steps{display:flex;gap:6px;overflow:auto;padding:12px 12px 11px;flex:0 0 auto;
    border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
  .cons-step{flex:0 0 auto;border-radius:100px;padding:8px 14px;font-size:12.5px;min-height:44px;
    border:1px solid var(--line);background:transparent;color:var(--muted)}
  .cons-step.on{background:var(--accent-soft);border-color:var(--gold);color:var(--gold-lt);font-weight:600}
  .cons-step.done{color:var(--good);border-color:rgba(78,201,138,.35)}
  .cons-body{flex:1;min-height:0;overflow:auto;padding:14px 12px 14px;-webkit-overflow-scrolling:touch}
  .cons-cta{flex:0 0 auto;padding:12px;border-top:1px solid var(--line);background:var(--panel)}
  .cons-cta button{width:100%;padding:14px;font-size:15px;border-radius:11px}
  .cons-h{margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold);font-weight:600}
  .cons-sec{margin-bottom:18px}
  .cons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
  .cons-opt{border:1px solid var(--line);border-radius:10px;padding:11px 8px;background:var(--s3);
    color:var(--ink);font-size:12.5px;text-align:center;cursor:pointer;font-family:inherit;min-height:46px}
  .cons-opt.on{border-color:var(--gold);background:var(--accent-soft);color:var(--gold-lt);font-weight:600}
  .cons-tile{border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;
    background:var(--s3);padding:0;font-family:inherit}
  .cons-tile.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(200,162,76,.2)}
  .cons-tile .sq{height:46px;display:block}
  .cons-tile span{display:block;padding:6px 4px;font-size:11px;color:var(--muted)}
  .cons-tile.on span{color:var(--gold-lt)}
  .cons-sw{width:46px;height:46px;border-radius:10px;border:2px solid transparent;cursor:pointer;
    display:inline-block;margin:0 7px 7px 0;padding:0}
  .cons-sw.on{border-color:var(--gold-lt);box-shadow:0 0 0 3px rgba(200,162,76,.18)}
  .cons-sw.custom{position:relative;overflow:hidden;background:
    conic-gradient(from .25turn,#e8564f,#e8c14f,#5fc46b,#4fb9e8,#7a5fe8,#e04fa8,#e8564f);
    display:inline-flex;align-items:center;justify-content:center}
  .cons-sw.custom input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);
    opacity:0;cursor:pointer;border:0;padding:0}
  .cons-sw.custom span{position:relative;pointer-events:none;font:600 20px/1 Inter,sans-serif;
    color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.75)}
  .cons-swrow{display:flex;flex-wrap:wrap;align-items:center}
  .cons-opt small{display:block;opacity:.6;font-size:11px;margin-top:2px;font-weight:400}
  .cons-dims{display:flex;gap:8px}
  .cons-dims .fld{flex:1;min-width:0}
  .cons-dims label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px}
  .cons-dims input{width:100%;background:var(--s3);border:1px solid var(--line);color:var(--ink);
    border-radius:8px;padding:12px 6px;text-align:center;
    font-family:inherit;font-size:19px;font-weight:600;line-height:1.2}
  .cons-note{font-size:11.5px;color:var(--faint);margin:9px 0 0;line-height:1.5}
  .cons-add{border:1px dashed var(--line-strong);background:transparent;color:var(--muted);
    border-radius:100px;padding:9px 16px;font-size:13px;margin:0 7px 8px 0;font-family:inherit;min-height:46px}
  .cons-add.on{border-style:solid;border-color:var(--gold);background:var(--accent-soft);color:var(--gold-lt)}
  .cons-sum{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:4px}
  .cons-sum .r{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px}
  .cons-sum .r span{color:var(--muted)}
  .cons-view{max-width:1180px;margin:0 auto}
  .cons-view .client-3d{position:relative}
  body.role-consumer #c3d{height:66vh;height:66dvh;min-height:380px}
  body.role-consumer .main{padding:16px 18px}
  .cons-view .cap{color:var(--faint);font-size:11.5px;margin-top:9px;text-align:center}
  /* ---- watermark: sit close under the shower, not off in the corner ---- */
  .wm{position:absolute;left:0;right:0;bottom:16px;text-align:center;
    font-family:Cinzel,serif;font-weight:600;font-size:13px;letter-spacing:.34em;
    padding-left:.34em;color:rgba(232,210,154,.5);pointer-events:none;
    text-shadow:0 1px 6px rgba(0,0,0,.6);z-index:2}

  /* ---- lead capture on the Save step ---- */
  .cons-field{margin-bottom:11px}
  .cons-field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
  .cons-field input{width:100%;background:var(--s3);border:1px solid var(--line);color:var(--ink);
    border-radius:9px;padding:13px 11px;
    font-family:inherit;font-size:16px;line-height:1.2}
  .cons-field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--accent-soft)}
  .cons-field.bad input{border-color:#e5674f}
  .cons-field .err{display:none;font-size:11.5px;color:#e5674f;margin-top:5px}
  .cons-field.bad .err{display:block}
  .cons-actions{display:flex;flex-direction:column;gap:9px;margin-top:14px}
  .cons-actions button{width:100%;padding:14px;font-size:15px;border-radius:11px}

  /* ---- the printable design sheet (hidden on screen, the only thing on paper) ---- */
  #stilesheet{display:none;background:#fff;color:#1a1a1a;
    font-family:Inter,-apple-system,Segoe UI,Helvetica,Arial,sans-serif}
  #stilesheet .sh-head{display:flex;align-items:center;gap:12px;
    border-bottom:2px solid #a5791f;padding-bottom:10px;margin-bottom:16px}
  #stilesheet .sh-mark{width:38px;height:auto}
  #stilesheet .sh-word{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:23px;
    letter-spacing:.15em;color:#8a6a1f;line-height:1}
  #stilesheet .sh-tag{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;
    color:#a5791f;margin-top:4px}
  #stilesheet .sh-sp{flex:1}
  #stilesheet .sh-date{font-size:10.5px;color:#666;text-align:right;line-height:1.5}
  #stilesheet h1{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:21px;
    margin:0 0 14px;color:#1a1a1a;letter-spacing:.02em}
  /* natural aspect, centred — forcing width:100% letterboxed a tall crop with black bars */
  #stilesheet .sh-img{display:block;max-width:100%;width:auto;max-height:108mm;
    margin:0 auto;border:1px solid #d8d4cc;border-radius:5px}
  #stilesheet .sh-cols{display:flex;gap:18px;margin-top:16px;page-break-inside:avoid}
  #stilesheet .sh-block{flex:1;min-width:0}
  #stilesheet .sh-block h3{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
    color:#8a6a1f;margin:0 0 7px;font-weight:600;border-bottom:1px solid #e2ded6;padding-bottom:5px}
  #stilesheet .sh-r{display:flex;justify-content:space-between;gap:12px;
    padding:4.5px 0;font-size:11.5px;border-bottom:1px solid #f0eee9}
  #stilesheet .sh-r span{color:#5a5a5a}
  #stilesheet .sh-r b{font-weight:600;text-align:right}
  #stilesheet .sh-chip{display:inline-block;width:11px;height:11px;border-radius:3px;
    border:1px solid #b9b5ac;vertical-align:-1px;margin-right:6px}
  #stilesheet .sh-foot{margin-top:18px;padding-top:10px;border-top:1px solid #e2ded6;
    font-size:10px;color:#777;display:flex;justify-content:space-between;gap:12px}
  @media print{
    body.role-consumer>*:not(#stilesheet){display:none!important}
    body.role-consumer #stilesheet{display:block}
    body.role-consumer{background:#fff!important}
  }

  @media (max-width:900px){
    body.role-consumer #menuBtn{display:none!important}
    body.role-consumer .main{padding:0;min-height:0}
    body.role-consumer .cons-grab{display:grid}
    body.role-consumer .sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;
      height:146px;transform:none;border-right:0;border-top:1px solid var(--line-strong);
      border-radius:18px 18px 0 0;box-shadow:0 -14px 40px rgba(0,0,0,.6);
      transition:height .3s cubic-bezier(.22,.61,.36,1);z-index:1500}
    body.role-consumer .sidebar[data-snap="half"]{height:58%}
    body.role-consumer .sidebar[data-snap="full"]{height:88%}
    body.role-consumer #c3d{min-height:0}
    /* The 3D fills whatever the sheet isn't using. Without this the canvas is a fixed
       height and a tall tablet shows a big dead band above the sheet. */
    body.role-consumer[data-csnap="peek"] #c3d{height:calc(100vh - 210px);height:calc(100dvh - 210px)}
    body.role-consumer[data-csnap="half"] #c3d{height:calc(42vh - 62px);height:calc(42dvh - 62px)}
    body.role-consumer[data-csnap="full"] #c3d{height:110px}
    /* At peek only the step chips and the CTA show — otherwise the first heading is
       clipped in half under the button and reads as broken. */
    body.role-consumer[data-csnap="peek"] .cons-body{display:none}
    body.role-consumer .cons-view{padding:8px 8px 0}
    body.role-consumer .cons-view .cap{display:none}
    body.role-consumer .cons-steps{padding:10px 10px 9px}
    body.role-consumer .cons-step{padding:8px 12px;font-size:12px}
    #rolegate .glg{font-size:27px}
  }

  /* ---- PHONE IN LANDSCAPE (short + wide) ----
     A bottom sheet is the wrong shape here: 58% of a 390px-tall screen leaves ~100px of
     shower. Flip to a side panel so the render keeps the full height. */
  @media (max-width:900px) and (max-height:500px) and (orientation:landscape){
    body.role-consumer .sidebar{position:fixed;top:0;bottom:0;left:auto;right:0;
      width:min(58vw,360px);height:100vh;height:100dvh;border-radius:0;
      border-top:0;border-left:1px solid var(--line-strong);
      box-shadow:-14px 0 40px rgba(0,0,0,.6);transform:none}
    body.role-consumer .sidebar[data-snap="peek"],
    body.role-consumer .sidebar[data-snap="half"],
    body.role-consumer .sidebar[data-snap="full"]{height:100vh;height:100dvh}
    body.role-consumer .cons-grab{display:none}
    body.role-consumer .cons-body{display:block!important}
    body.role-consumer .view,body.role-consumer .main{margin-right:min(58vw,360px)}
    body.role-consumer[data-csnap] #c3d{height:calc(100vh - 74px);height:calc(100dvh - 74px)}
    body.role-consumer .cons-steps{padding:8px 10px}
    body.role-consumer .cons-step{min-height:44px;padding:6px 13px;font-size:12px}
    body.role-consumer .cons-cta{padding:9px 10px}
    body.role-consumer .cons-cta button{padding:11px;font-size:14px}
    body.role-consumer .cons-sec{margin-bottom:13px}
  }

  /* ---- TABLET (portrait iPads and up, still sheet layout) ----
     Most traffic is tablets, so this band gets its own sizing rather than inheriting
     the phone's. Bigger peek, shallower half (a tall screen doesn't need 58% of it for
     four chips), roomier controls. */
  @media (min-width:601px) and (max-width:900px) and (min-height:501px){
    body.role-consumer .sidebar{height:168px;border-radius:22px 22px 0 0}
    body.role-consumer .sidebar[data-snap="half"]{height:46%}
    body.role-consumer .sidebar[data-snap="full"]{height:82%}
    body.role-consumer[data-csnap="peek"] #c3d{height:calc(100vh - 232px);height:calc(100dvh - 232px)}
    body.role-consumer[data-csnap="half"] #c3d{height:calc(54vh - 66px);height:calc(54dvh - 66px)}
    body.role-consumer[data-csnap="full"] #c3d{height:150px}
    body.role-consumer .cons-view{padding:12px 16px 0}
    body.role-consumer .cons-steps{padding:12px 18px 12px;gap:9px}
    body.role-consumer .cons-step{padding:11px 18px;font-size:14.5px}
    body.role-consumer .cons-body{padding:18px 18px 18px}
    body.role-consumer .cons-h{font-size:13px}
    body.role-consumer .cons-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:11px}
    body.role-consumer .cons-opt{padding:15px 10px;font-size:14.5px}
    body.role-consumer .cons-sw{width:56px;height:56px;margin:0 10px 10px 0}
    body.role-consumer .cons-add{padding:12px 19px;font-size:14.5px}
    body.role-consumer .cons-dims input{padding:15px 8px;font-size:21px}
    body.role-consumer .cons-dims label{font-size:12.5px}
    body.role-consumer .cons-cta{padding:14px 18px}
    body.role-consumer .cons-cta button{padding:16px;font-size:16.5px}
    body.role-consumer .cons-note{font-size:12.5px}
  }



/* ===================== SHOP REAL TILE ===================== */
.sku-cta{position:absolute;left:12px;right:12px;bottom:12px;z-index:6;display:flex;
  align-items:center;gap:10px;text-align:left;cursor:pointer;
  background:rgba(17,18,20,.90);backdrop-filter:blur(10px);
  border:1px solid rgba(200,168,96,.55);border-radius:12px;padding:11px 13px;
  color:#efece6;font:inherit;box-shadow:0 8px 26px rgba(0,0,0,.34)}
.sku-cta:hover{border-color:#c8a860}
.sku-cta-k{font-size:13px;font-weight:600;color:#c8a860;letter-spacing:.02em;white-space:nowrap}
.sku-cta-t{flex:1;min-width:0;font-size:11.5px;color:#a9a49b;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis}
.sku-cta-a{font-size:11.5px;color:#efece6;border:1px solid rgba(255,255,255,.22);
  border-radius:7px;padding:5px 10px;white-space:nowrap}
.sku-cta.picked .sku-cta-t{color:#efece6}
@media(max-width:620px){
  .sku-cta{flex-wrap:wrap;gap:5px 10px;padding:10px 12px}
  .sku-cta-t{flex-basis:100%;order:3}
}

.sku-sheet{position:fixed;inset:0;z-index:80;display:none}
.sku-sheet.on{display:block}
.sku-scrim{position:absolute;inset:0;background:rgba(6,6,7,.6)}
.sku-panel{position:absolute;right:0;top:0;bottom:0;width:min(430px,100%);
  background:#141416;border-left:1px solid #26262a;color:#e8e6e1;
  display:flex;flex-direction:column;padding:16px 16px 12px;overflow-y:auto;
  font:400 13px/1.45 ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif}
@media(max-width:620px){
  .sku-panel{right:0;left:0;top:auto;height:86%;width:auto;border-left:none;
    border-top:1px solid #26262a;border-radius:16px 16px 0 0}
}
.sku-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.sku-head h3{margin:0;font-size:14px;letter-spacing:.14em;color:#c8a860;font-weight:600;text-transform:uppercase}
.sku-head p{margin:5px 0 0;font-size:11.5px;color:#8b8985;line-height:1.4}
.sku-x{margin-left:auto;background:none;border:none;color:#8b8985;font-size:22px;
  line-height:1;cursor:pointer;padding:0 4px}
.sku-tabs{display:flex;gap:6px;margin-bottom:8px}
.sku-tab{flex:1;background:#0e0e10;color:#8b8985;border:1px solid #26262a;border-radius:7px;
  padding:9px 6px;font:inherit;font-size:12.5px;cursor:pointer}
.sku-tab.on{background:#1b1710;color:#c8a860;border-color:#8a7440}
.sku-hint{margin:0 0 8px;font-size:11px;color:#8b8985}
.sku-search{width:100%;background:#0e0e10;color:#e8e6e1;border:1px solid #26262a;
  border-radius:7px;padding:9px 10px;font:inherit;font-size:12.5px;margin-bottom:10px;outline:none}
.sku-search:focus{border-color:#8a7440}
.sku-spec{border:1px solid #26262a;border-radius:8px;background:#0e0e10;padding:10px;margin-bottom:10px}
.sku-spec div{display:flex;justify-content:space-between;gap:8px;padding:2px 0;
  font-size:11.5px;color:#8b8985}
.sku-spec div b{color:#e8e6e1;font-weight:500;text-align:right}
.sku-warn{border-radius:7px;background:#3a1d1d;color:#f0b4b4;padding:9px 10px;
  font-size:11.5px;line-height:1.45;margin-bottom:10px}
.sku-clear{width:100%;background:none;border:1px solid #26262a;color:#8b8985;border-radius:7px;
  padding:8px;font:inherit;font-size:11.5px;cursor:pointer;margin-bottom:12px}
.sku-list{display:flex;flex-direction:column;gap:7px;flex:1}
.sku-card{display:flex;gap:10px;align-items:flex-start;text-align:left;cursor:pointer;
  background:#0e0e10;border:1px solid #1f1f23;border-radius:9px;padding:9px;
  color:#e8e6e1;font:inherit;width:100%}
.sku-card:hover{border-color:#3a3a3e}
.sku-card.on{background:#1b1710;border-color:#c8a860}
.sku-chip{flex:none;width:42px;height:42px;border-radius:6px;border:1px solid #3a3a3e}
.sku-body{min-width:0;display:block}
.sku-name{display:block;font-size:12px;line-height:1.3}
.sku-num{display:block;font-size:10.5px;color:#8b8985;margin-top:2px}
.sku-pills{display:block;margin-top:4px}
.sku-pill{display:inline-block;padding:1px 5px;border-radius:3px;background:#232327;
  color:#b9b6b0;font-size:9.5px;margin:2px 4px 0 0}
.sku-pill.bad{background:#3a1d1d;color:#e08b8b}
.sku-done{margin-top:12px;background:#c8a860;color:#141416;border:none;border-radius:8px;
  padding:12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}

.sku-lock{margin:0 0 12px;padding:11px 12px;border-radius:9px;background:#1b1710;
  border:1px solid #8a7440;color:#e8e6e1;font-size:12px;line-height:1.45}
.sku-lock b{display:block;color:#c8a860;font-size:12.5px;margin-bottom:3px}
.sku-lock span{display:block;color:#a9a49b;font-size:11px}
.sku-lock button{margin-top:8px;background:none;border:1px solid #3a3a3e;color:#a9a49b;
  border-radius:6px;padding:6px 9px;font:inherit;font-size:11px;cursor:pointer}

/* ===================== ORDER SHEET ===================== */
.sh-order{margin:18px 0 0;page-break-inside:auto}
.sh-order h2{margin:0 0 4px;font-size:15px;letter-spacing:.10em;text-transform:uppercase}
.sh-order h3{margin:14px 0 5px;font-size:11.5px;letter-spacing:.10em;text-transform:uppercase;color:#6b6b6b}
.os-lead{margin:0 0 10px;font-size:11.5px;color:#444}
.os-tbl{width:100%;border-collapse:collapse;font-size:10.5px;margin:0 0 4px}
.os-tbl th{text-align:left;font-weight:600;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:#777;border-bottom:1px solid #d5d5d5;padding:4px 6px 4px 0}
.os-tbl td{padding:5px 6px 5px 0;border-bottom:1px solid #ececec;vertical-align:top;line-height:1.35}
.os-tbl tr.os-hi td{background:#faf6ea}
.os-role{font-weight:600;white-space:nowrap}
.os-sku{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;white-space:nowrap}
.os-sub{color:#777;font-size:9.5px}
.os-note{margin:7px 0 0;font-size:10.5px;color:#444;line-height:1.45}
.os-none{margin:0 0 8px;font-size:11px;color:#666}
.os-fine{margin:10px 0 0;font-size:9.5px;color:#888;line-height:1.5}
@media print{ .sh-order{break-inside:auto} .os-tbl tr{break-inside:avoid} }