:root{
  --ink:#14171a; --mut:#6b7280; --line:#e4e6ea; --bg:#fff; --soft:#f7f8f9;
  --orange:#F0733A; --dark:#1b1e21; --ok:#1e7d4f;
  --r:10px; --sh:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .4em}
h1{font-size:2.1rem;letter-spacing:-.02em}
h2{font-size:1.5rem;letter-spacing:-.01em}
h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:1.6rem 0 .6rem}
small{font-size:.8em;color:var(--mut);font-weight:400}
.lede{color:var(--mut);margin:0 0 1.4rem;max-width:60ch}
.fine{font-size:.78rem;color:var(--mut);line-height:1.5}
.center{text-align:center}
.muted{color:var(--mut)}
.err{color:#c2331f;font-size:.85rem}
.warn{background:#fff6e8;border:1px solid #f0d9b0;color:#8a5a13;padding:.5rem .7rem;border-radius:8px;font-size:.85rem;margin:.4rem 0 1rem}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:20}
.brand{display:block;line-height:0}
.brand img{height:34px;width:auto;display:block}
@media(max-width:600px){.brand img{height:27px}}
.topRight{display:flex;align-items:center;gap:14px}
.phone{color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem}
.badge{font-size:.65rem;letter-spacing:.1em;padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--mut)}
.badge.trade{background:var(--dark);color:#fff}
.badge.homeowner{background:#fdece3;color:#a8471c}

/* gate */
.gate{max-width:860px;margin:0 auto;padding:70px 22px 60px;text-align:center}
.gate .lede{margin:0 auto 2.6rem}
.gateCards{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left}
.gateCard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;cursor:pointer;font:inherit;text-align:left;transition:.15s}
.gateCard:hover{border-color:var(--orange);box-shadow:var(--sh);transform:translateY(-2px)}
.gateCard p{color:var(--mut);font-size:.92rem;margin:.4rem 0 1.1rem}
.go{color:var(--orange);font-weight:600;font-size:.9rem}
.pw{margin:26px auto 0;max-width:340px;display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;justify-content:center}
.pw label{flex:1;text-align:left;font-size:.8rem;color:var(--mut)}
.pw input{width:100%;margin-top:4px}

/* layout */
#app{max-width:960px;margin:0 auto;padding:26px 22px 130px}
#rail{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 32px;font-size:.78rem;flex-wrap:wrap}
#rail li{display:flex;align-items:center;gap:6px;color:var(--mut);padding:5px 11px;border-radius:999px;background:var(--soft)}
#rail li b{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#d6d9dd;color:#fff;font-size:.66rem}
#rail li.on{background:var(--dark);color:#fff}
#rail li.on b{background:var(--orange)}
#rail li.done{color:var(--ok);cursor:pointer;background:#eef7f2}
#rail li.done b{background:var(--ok)}

/* area tabs */
.areaTabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.areaTab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:9px 30px 9px 13px;
  cursor:pointer;font:inherit;text-align:left;min-width:132px;transition:.12s}
.areaTab b{font-size:.9rem;font-weight:600}
.areaTab span{font-size:.74rem;color:var(--mut)}
.areaTab:hover{border-color:#cfd3d8}
.areaTab.on{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,115,58,.12)}
.areaTab.ok span{color:var(--ok)}
.areaTab.add{justify-content:center;align-items:center;color:var(--mut);border-style:dashed;padding:9px 15px;min-width:0}
.axe{position:absolute;top:6px;right:8px;font-style:normal;font-size:.72rem;color:#c3c7cc;padding:2px}
.axe:hover{color:#c2331f}
.areaNameRow{margin:0 0 18px}
.areaNameRow label{display:block;font-size:.78rem;font-weight:600;color:var(--mut);max-width:320px}
.areaNameRow input{width:100%;margin-top:4px;font-size:1rem;font-weight:600}
.areaNameRow .fine{margin:.35rem 0 0}
.measureHead{font-size:1rem;color:var(--mut);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.measureHead b{color:var(--ink)}
.customColor{margin-top:22px;padding:16px 18px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r)}
.customColor.on{border-color:#c8892f;background:#fdf7ec}
.customColor h4{margin:0 0 4px}
.customColor input{width:100%;margin-top:8px;font-size:1rem;padding:10px 12px}
.customColor .ccWarn{margin:10px 0 0;font-size:.85rem;color:#8a5a12}
.ccUpload{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ccUpload h4{margin:0 0 4px}
.ccUpload input[type=file]{margin-top:8px;font-size:.9rem}
.ccFileList{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ccFile{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:.88rem}
.ccFile small{color:var(--mut);margin-left:6px}
.ccFile .rm{border:0;background:none;cursor:pointer;color:var(--mut);font-size:1rem}
.navWhy{margin:6px 0 0;width:100%;text-align:right;color:#8a5a12}
/* project ZIP on the Measure step */
.zipField{display:block;max-width:320px;margin:0 0 22px;font-weight:600}
.zipField input{width:100%;margin-top:6px;font-size:1.05rem;padding:10px 12px}
.zipField small{display:block;margin-top:6px;font-weight:400;font-size:.82rem;color:var(--mut);line-height:1.4}
.zipField small.zipOk{color:#2f6b3f}
/* required row on the Extras step */
.reqTag{display:inline-block;margin-left:8px;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:#8a5a12;background:#f6ecd9;border-radius:3px;padding:2px 6px;vertical-align:middle}
.qtyRow.needsValue{background:#fdf8ef;border-radius:6px;box-shadow:inset 0 0 0 1px #e8d5b0}
form.contact input.ro{background:#f4f2ef;color:var(--mut);cursor:default}
/* partner application */
.signupWrap{margin-top:48px;max-width:640px;margin-left:auto;margin-right:auto}
.signupSplit{display:flex;align-items:center;gap:14px;margin:0 0 26px;color:var(--mut);font-size:.9rem}
.signupSplit>span{flex:0 0 auto}
.signupSplit:before,.signupSplit:after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.signupIntro{margin:0 0 24px;text-align:center}
.signupIntro h2{margin:0 0 6px}
/* Bullets must not inherit the centered text of .signupIntro, and the
   custom check mark replaces the marker entirely. */
.perks{list-style:none;padding:0;margin:18px 0;text-align:left;display:grid;gap:10px}
.perks li{padding-left:24px;position:relative;font-size:.94rem;list-style:none}
.perks li::marker{content:""}
.perks li:before{content:"✓";position:absolute;left:0;top:0;color:#c8892f;font-weight:700}
form.contact.partner{max-width:640px;margin:0 auto}
form.contact.partner textarea{width:100%;font-family:inherit;font-size:1rem;padding:10px 12px}
form.contact.partner select{width:100%;font-size:1rem;padding:10px 12px}
form.contact.partner label small{color:var(--mut);font-weight:400;margin-left:4px}
.partnerMsg{margin:10px 0;font-size:.9rem}
.partnerMsg.err{color:#a3341f}
.lines tfoot tr.subt td,.lines tfoot tr.taxRow td{font-weight:400;color:var(--mut)}
.lines tfoot tr.taxRow .lineSub{font-size:.78rem}
.qtyRight em.tbd{color:var(--mut);font-style:normal;font-size:.8rem;white-space:nowrap}
.sfTally{display:flex;flex-direction:column;gap:5px;background:var(--soft);border-radius:var(--r);padding:13px 15px;font-size:.85rem}
.sfTally span{display:flex;justify-content:space-between;color:var(--mut)}
.sfTally .tot{border-top:1px solid var(--line);padding-top:6px;margin-top:2px;color:var(--ink);font-weight:600}

/* edge profiles */
.edgeTierHead{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);
  border-bottom:2px solid var(--dark);padding-bottom:6px;margin:26px 0 14px;font-weight:700}
.edgeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.edgeCard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:#fff;
  border:2px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;font:inherit;
  text-align:left;transition:.12s}
.edgeCard img{width:100%;height:66px;object-fit:contain;object-position:left center;margin-bottom:6px}
.edgeCard b{font-size:.92rem}
.edesc{font-size:.76rem;color:var(--mut);line-height:1.4}
.ethick{font-size:.7rem;color:#9aa0a6;margin-top:2px}
.etag{margin-top:8px;font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;
  background:var(--soft);color:var(--mut)}
.etag.inc{background:#eef7f2;color:var(--ok)}
.etag.ask{background:#fff6e8;color:#8a5a13}
.edgeCard:hover{border-color:#cfd3d8}
.edgeCard.sel{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,115,58,.12)}
.edgeLF{display:block;font-size:.82rem;font-weight:600;margin:14px 0 4px;max-width:260px}
.edgeLF input{width:100%;margin-top:5px;font-size:1.3rem;font-weight:600;padding:9px 11px}
#edgeFoot{margin-top:18px;font-size:.85rem;color:var(--mut)}

/* colors */
.lvlHead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--dark);padding-bottom:6px;margin:26px 0 14px}
.lvlHead span:first-child{font-weight:700;letter-spacing:.02em}
.lvlPrice{font-size:1.15rem;font-weight:700;color:var(--orange)}
.lvlPrice small{color:var(--mut);font-weight:400;margin-left:3px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.sw{padding:0;border:2px solid transparent;background:none;border-radius:var(--r);cursor:pointer;overflow:hidden;font:inherit;text-align:left;transition:.12s}
.sw img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:8px;background:var(--soft)}
.noimg{display:grid;place-items:center;aspect-ratio:1/1;background:var(--soft);border:1px dashed var(--line);border-radius:8px;color:var(--mut);font-size:.72rem;text-align:center}
.swName{display:block;padding:7px 3px 4px;font-size:.82rem;font-weight:500;line-height:1.25}
.sw:hover{border-color:#cfd3d8}
.sw.sel{border-color:var(--orange)}
.sw.sel .swName{color:var(--orange);font-weight:700}

/* measure */
.measureWrap{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.bigField{display:block;font-weight:600;font-size:.88rem;margin-bottom:1.1rem}
.bigField input{width:100%;font-size:1.7rem;font-weight:600;padding:11px 13px;margin-top:6px}
input,select{border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--orange);outline-offset:-1px;border-color:transparent}
.howto{background:var(--soft);border-radius:var(--r);padding:20px}
/* Desktop: force the <details> open and hide its marker so it renders exactly
   as the static sidebar it replaced. Only phones get the collapsed version. */
.howto > summary{list-style:none;cursor:default}
.howto > summary::-webkit-details-marker{display:none}
.howto > summary h4{margin-top:0}
@media(min-width:761px){ .howto > summary{pointer-events:none} }
.howto ol{margin:0 0 .8rem;padding-left:1.1rem;font-size:.9rem}
.howto li{margin-bottom:.45rem}
.ex{background:#fff;border-left:3px solid var(--orange);padding:8px 11px;font-size:.85rem;margin:.6rem 0}

/* sinks */
.sinkRow{display:grid;grid-template-columns:88px 1fr 76px 30px;gap:13px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r);padding:11px;margin-bottom:10px}
.sinkThumb{width:88px;height:62px;object-fit:contain;background:var(--soft);border-radius:6px}
.sinkSel{width:100%;font-weight:600}
.sinkSpec{font-size:.76rem;color:var(--mut);margin-top:4px}
.sinkInc{font-size:.78rem;color:var(--orange);font-weight:600;margin-top:2px}
.sinkQty{width:100%;text-align:center}
.rm{border:none;background:none;color:var(--mut);cursor:pointer;font-size:1rem}
.rm:hover{color:#c2331f}
.chk{display:flex;align-items:center;gap:8px;font-size:.92rem;margin:.35rem 0}
.chk.own{margin:16px 0 6px;font-weight:600}
#cutoutBlock{background:var(--soft);border-radius:var(--r);padding:6px 18px 16px;margin-top:12px}

/* qty rows */
.qtyRow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.qtyRow span:first-child{display:flex;flex-direction:column}
.qtyRow small{font-size:.74rem}
.qtyRight{display:flex;align-items:center;gap:11px;white-space:nowrap}
.qtyRight em{font-style:normal;color:var(--mut);font-size:.85rem}
.qtyRow input[type=number]{width:66px;text-align:center}
.kickWrap{margin-top:34px;background:#fffaf6;border:1px solid #f2ddd0;border-radius:var(--r);padding:18px}
#kickGrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;margin-top:10px}

/* result */
.quoteCard{border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--sh)}
.big{font-size:3.1rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.sub{color:var(--mut);margin:.5rem 0 1.6rem}
table.lines{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:1rem}
table.lines th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);border-bottom:1px solid var(--line);padding:6px 0}
table.lines td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.lines .num{text-align:right;white-space:nowrap;padding-left:14px}
table.lines tfoot td{border:none;font-size:1rem;padding-top:13px}
tr.inc td{color:var(--ok);font-size:.82rem;border-bottom:1px solid var(--line)}
tr.auto td{color:var(--mut);font-size:.85rem}
.pill.auto{background:#fdece3;color:#a8471c}
.tierDots{font-size:1.1rem;font-weight:700;color:var(--orange);letter-spacing:.05em}

/* homeowner lock gate */
.lockCard{border:1px solid var(--line);border-radius:var(--r);padding:34px;box-shadow:var(--sh);
  background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);text-align:center}
.lockIcon{font-size:2rem;display:block;margin-bottom:.4rem}
.lockTop h2{font-size:1.8rem}
.lockTop p{color:var(--mut);max-width:52ch;margin:.5rem auto 0}
.specList{list-style:none;padding:0;margin:24px auto 0;max-width:440px;text-align:left;
  border-top:1px solid var(--line)}
.specList li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.9rem}
.contact.unlock{border-color:var(--orange);background:#fff}
.contact.unlock h3{font-size:1.25rem;color:var(--ink)}
.lineNote{font-size:.75rem;color:#8a5a13}
.lineSub{font-size:.75rem;color:var(--mut);margin-top:2px}

/* backsplash block */
.bsBlock{background:var(--soft);border-radius:var(--r);padding:4px 16px 16px;margin-bottom:16px}
.bsBlock h4{margin:14px 0 10px}
.bsRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bsRow label{display:block;font-size:.78rem;font-weight:600;color:var(--mut)}
.bsRow input{width:100%;margin-top:4px;font-size:1.25rem;font-weight:600;padding:8px 11px}
.bsCalc{font-size:.84rem;color:var(--mut);margin:10px 0 0}
.bsCalc b{color:var(--ink)}
#bsMillRow{align-items:flex-start;gap:9px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
#bsMillRow span{display:flex;flex-direction:column;font-size:.86rem}
#bsMillRow small{font-size:.74rem;color:var(--mut);margin-top:2px;font-weight:400}
#bsMillRow em{font-style:normal;color:var(--orange);font-weight:700;font-size:.8rem}

/* job spec block */
.specBlock{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px}
.specBlock h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin-bottom:12px}
.specTable{width:100%;border-collapse:collapse;font-size:.87rem}
.specTable th{text-align:left;font-weight:600;color:var(--mut);padding:7px 16px 7px 0;
  white-space:nowrap;vertical-align:top;width:1%;font-size:.82rem}
.specTable td{padding:7px 0;border-bottom:1px solid var(--line)}
.specTable tr:last-child td,.specTable tr:last-child th{border:none}
.pill{background:var(--soft);border-radius:4px;padding:1px 6px;font-size:.68rem;color:var(--mut)}
.kickout{border:1px solid #f2ddd0;background:#fffaf6;border-radius:var(--r);padding:30px}
.kickActions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

/* contact */
.contact{margin-top:24px;border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--soft)}
.contact label{display:block;font-size:.78rem;font-weight:600;color:var(--mut);margin-bottom:12px}
.contact input{width:100%;margin-top:4px;font-size:1rem;background:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{margin-top:24px;background:#eef7f2;border:1px solid #cfe6da;border-radius:var(--r);padding:26px}

/* buttons + nav */
.btn{background:var(--orange);color:#fff;border:none;border-radius:8px;padding:11px 20px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;transition:.12s}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.wide{width:100%;margin-top:6px}
.navbar{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding:13px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;z-index:15}
.navbar #runningTotal{font-size:.9rem;color:var(--mut)}
.navbar b{color:var(--ink);font-size:1.05rem}
.navbar .btn{min-width:150px;text-align:center}

/* homeowner orientation block (step 1, homeowner host only)
   See the comment on #hoIntro in index.html for why this exists.
   DESIGN CONSTRAINT: it must NOT push the colour swatches off a phone screen.
   The whole point is that the visitor sees they are already inside a tool, so
   the block is deliberately short, has no CTA button, and tightens further
   under 760px. If you add a line here, delete one. */
.hoIntro{max-width:62ch;margin:0 0 26px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.hoIntro h1{font-size:1.75rem;margin:0 0 .5rem}
.hoLede{color:var(--ink);margin:0 0 .9rem;font-size:1rem}
.hoBullets{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 .9rem}
.hoBullets li{font-size:.8rem;font-weight:600;color:#1e7d4f;background:#eef7f2;
  padding:4px 11px;border-radius:999px}
.hoWhy{font-size:.85rem;color:var(--mut);margin:0 0 .8rem;max-width:58ch}
.hoStart{font-size:.9rem;color:var(--ink);margin:0}
.hoStart b{color:var(--orange)}
@media(max-width:760px){
  /* PHONE BUDGET IS THE BINDING CONSTRAINT HERE, measured not guessed.
     At 390x844 step 1 stacked 691px of furniture before the first swatch, so
     no stone was visible on an iPhone without scrolling. This intro is kept to
     ~150px on a phone: heading, one sentence, three chips. The "why free" trust
     line and the "start below" pointer are both DESKTOP ONLY — on a phone the
     swatch grid sits immediately under the chips and is its own pointer, so
     those two lines would cost a screen to say nothing new.
     Do not re-enable them at this width. */
  .hoIntro{margin-bottom:16px;padding-bottom:14px}
  .hoIntro h1{font-size:1.35rem;margin-bottom:.35rem}
  .hoLede{font-size:.92rem;margin-bottom:.7rem}
  .hoBullets{gap:6px;margin-bottom:0}
  .hoBullets li{font-size:.74rem;padding:3px 9px}
  .hoWhy,.hoStart{display:none}

  /* "How to measure in 2 minutes" is a right-hand sidebar on desktop, sitting
     beside the square-footage field. On a phone the grid collapses to one
     column and it landed at 1175px — BELOW the very input it explains, which
     is useless to someone staring at an empty box wondering what to type.
     Flexbox order pulls it above the field on narrow screens only. */
  .measureWrap{display:flex;flex-direction:column}
  .measureWrap > .howto{order:-1;margin-bottom:18px;padding:0}
  .howto > summary{cursor:pointer;padding:13px 16px;list-style:none;display:flex;
    align-items:center;justify-content:space-between}
  .howto > summary h4{margin:0;color:var(--ink);text-transform:none;letter-spacing:0;font-size:.92rem}
  .howto > summary::after{content:"＋";color:var(--orange);font-weight:600;font-size:1rem}
  .howto[open] > summary::after{content:"−"}
  .howto[open] > *:not(summary){padding-left:16px;padding-right:16px}
  .howto[open]{padding-bottom:14px}
}

@media(max-width:760px){
  .gateCards,.measureWrap,.row2,#kickGrid{grid-template-columns:1fr}
  .big{font-size:2.4rem}
  .sinkRow{grid-template-columns:64px 1fr 58px 26px;gap:9px}
  .sinkThumb{width:64px;height:50px}
  #app{padding-bottom:150px}
}
@media print{
  .top,#rail,.navbar,.contact,.kickActions,.sent{display:none!important}
  .quoteCard{border:none;box-shadow:none;padding:0}
  .specBlock{page-break-inside:avoid;margin-top:16px}
}

/* ================= FIELD SALES MODE ================= */

.fieldGate { max-width: 620px; margin: 0 auto 18px; text-align: center; }
.fieldGate h2 { margin: 0 0 4px; }

.repGrid {
  display: grid; gap: 10px; margin: 18px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.repBtn {
  padding: 20px 14px; font-size: 17px; font-weight: 600;
  border: 2px solid #e0d9d0; border-radius: 10px; background: #fff;
  color: #2c2723; cursor: pointer; min-height: 64px;
  transition: border-color .12s, background .12s;
}
.repBtn:active { transform: scale(.985); }
.repBtn.on { border-color: #b08d57; background: #fbf6ee; }

.badge.field { background: #b08d57; color: #fff; }
.repStamp {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #7a736b; margin-bottom: 6px;
}

/* --- signature --- */
.signWrap {
  margin-top: 18px; padding: 20px; border: 1px solid #e6e0d8;
  border-radius: 10px; background: #fff;
}
.signWrap h3 { margin: 0 0 10px; }

.proposalTerms {
  font-size: 13.5px; line-height: 1.55; color: #4d4640;
  background: #faf8f5; border-left: 3px solid #b08d57;
  padding: 12px 14px; border-radius: 4px; margin-bottom: 16px;
}
.proposalTerms p { margin: 0 0 8px; }
.proposalTerms p:last-child { margin-bottom: 0; }

.sigLabel {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #7a736b; margin: 14px 0 6px;
}
.sigPad {
  width: 100%; height: 190px; display: block;
  border: 2px dashed #cfc6ba; border-radius: 8px; background: #fffdfa;
  /* stop iOS from scrolling/zooming the page while a finger is signing */
  touch-action: none; -ms-touch-action: none; cursor: crosshair;
}
.sigActions {
  display: flex; align-items: center; gap: 12px; margin: 8px 0 16px;
  flex-wrap: wrap;
}
.btn.small { padding: 7px 14px; font-size: 14px; }

.signed {
  margin-top: 18px; padding: 22px; border: 1px solid #cfe3cf;
  border-radius: 10px; background: #f6fbf6;
}
.signed h3 { margin: 0 0 8px; color: #2f6b34; }
.sigImg {
  display: block; max-width: 320px; width: 100%; margin: 12px 0;
  border-bottom: 1px solid #2c2723; background: #fff;
}

/* iPad portrait: give the signature box more room and bigger tap targets */
@media (max-width: 900px) {
  .sigPad { height: 220px; }
  .repBtn { min-height: 72px; font-size: 18px; }
}

@media print {
  .signWrap, .repGrid, .sigActions { display: none !important; }
  .signed { border: none; background: none; }
}


/* ---------- field closing discount (internal control) ----------
   Visually distinct from the customer-facing quote card on purpose: the rep
   is often holding the iPad where the customer can see it, and this must
   never read as part of the customer's quote. */
.discountBox{border:1px solid #d9d3ca;background:#faf8f5;border-radius:8px;
  padding:14px 16px;margin:14px 0}
.discHead{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.discHead .fine{color:#6b6259;font-size:12px}
.discRowUI{display:flex;align-items:center;gap:14px}
.discRowUI input[type=range]{flex:1;accent-color:#8a6d3b}
.discVal{display:flex;align-items:center;gap:4px}
.discVal input{width:72px;text-align:right;padding:6px 8px;
  border:1px solid #d9d3ca;border-radius:6px;font-size:15px}
.discReason{display:block;margin-top:12px;font-size:13px;color:#6b6259}
.discReason select{display:block;width:100%;margin-top:4px;padding:8px;
  border:1px solid #d9d3ca;border-radius:6px;background:#fff}
.discWarn{margin:10px 0 0;font-size:12px;color:#9a4b16}

/* The discount LINE on the quote itself stays visible in print — the
   customer's copy must show what they saved. Only the rep's CONTROL is
   hidden, never the number. */
tr.discRow td{color:#2f6b3a;font-weight:600}

@media print{
  .discountBox{display:none !important}
  tr.discRow td{color:#000}
}