/* FitterMate — plain, light, one accent. No gradients, glows or decoration. */
:root{
  color-scheme:light;
  --bg:#f5f6f8; --surface:#fff; --surface2:#f0f2f5; --line:#dde1e7; --line2:#eceef2;
  --ink:#161b26; --ink2:#454d5e; --ink3:#69717f;
  --accent:#2f3a45; --accent-dk:#1f2830; --accent-bg:#e9ecef;  /* charcoal, plain like tools and gripper */
  --ok:#137a4b; --ok-bg:#e6f4ec; --warn:#9a5b00; --warn-bg:#fdf3e2; --crit:#b42318; --crit-bg:#fdecea;
  /* cut-plan piece colours + names used by planner.js cutSvg */
  --p1:#2f6fd6; --p2:#d0612a; --p3:#1d9a6c; --p4:#b8860b; --p5:#c2477a; --p6:#2e7d32; --p7:#6b5fd3; --p8:#d14d4d;
  --text:var(--ink); --muted:var(--ink3);
  --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --r:8px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.25}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{width:100%;min-width:0;background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:14px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-bg);border-color:var(--accent)}
textarea{min-height:90px;resize:vertical}
label{display:block;font-size:13px;font-weight:500;color:var(--ink2);margin:0 0 4px}
.hint{font-size:12px;color:var(--ink3);margin-top:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:6px;padding:8px 14px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface2);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dk)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.link{border:0;background:none;color:var(--accent);padding:4px 6px}
.btn.danger{color:var(--crit)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.muted{color:var(--ink3)} .small{font-size:13px} .num{font-variant-numeric:tabular-nums} .right{text-align:right}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card + .card{margin-top:16px}
.card h2{font-size:17px;margin-bottom:14px}
.card h3{font-size:15px;margin-bottom:8px}
.badge{display:inline-block;font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px;background:var(--surface2);color:var(--ink2)}
.badge.ok{background:var(--ok-bg);color:var(--ok)} .badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.info{background:var(--accent-bg);color:var(--accent)} .badge.crit{background:var(--crit-bg);color:var(--crit)}
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:#fff;border-radius:6px;padding:10px 14px;font-size:14px}
.note.warn{border-left-color:var(--warn)} .note.crit{border-left-color:var(--crit)}
.error{color:var(--crit);font-size:14px;min-height:1.4em}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-weight:500;color:var(--ink3);text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
th,td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer} tbody tr.click:hover td{background:var(--surface2)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;border-radius:6px;font-size:14px;display:none;z-index:50}

/* ── public site ── */
.site-top{background:#fff;border-bottom:1px solid var(--line)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.site-top .wrap{display:flex;align-items:center;gap:16px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:30px;border-radius:6px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.logo .mark svg{width:24px;height:24px}
.site-top nav{display:flex;gap:20px;margin-left:24px}
.site-top nav a{color:var(--ink2);font-size:14.5px}
.hero{background:#fff;border-bottom:1px solid var(--line);padding:72px 0 64px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:40px;line-height:1.15;letter-spacing:-.02em}
.hero p.lead{font-size:18px;color:var(--ink2);margin:18px 0 28px;max-width:520px}
.hero .shot{border:1px solid var(--line);border-radius:var(--r);background:var(--surface2);padding:14px}
.hero .shot svg{width:100%;height:auto;display:block;background:#fff;border-radius:4px}
.section{padding:64px 0}
.section h2.title{font-size:28px;margin-bottom:8px}
.section p.sub{color:var(--ink2);margin:0 0 32px;max-width:640px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.feature h3{font-size:16px;margin-bottom:6px}
.feature p{margin:0;color:var(--ink2);font-size:14.5px}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column}
.price.featured{border:2px solid var(--accent)}
.price h3{font-size:17px}
.price .amt{font-size:34px;font-weight:600;margin:10px 0 2px;letter-spacing:-.02em}
.price .amt span{font-size:15px;font-weight:400;color:var(--ink3)}
.price ul{list-style:none;padding:0;margin:16px 0 22px;flex:1}
.price li{padding:6px 0 6px 22px;position:relative;font-size:14.5px;color:var(--ink2);border-top:1px solid var(--line2)}
.price li::before{content:"";position:absolute;left:2px;top:13px;width:9px;height:5px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.site-foot{border-top:1px solid var(--line);padding:28px 0;color:var(--ink3);font-size:13.5px;background:#fff}
.auth{max-width:420px;margin:56px auto;padding:0 20px}
.auth .card{padding:28px}
.auth h1{font-size:24px;margin-bottom:6px}
.auth form > div{margin-top:14px}
.auth .btn.primary{width:100%;margin-top:18px;padding:10px}

/* ── app shell ── */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:#fff;border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}
.side .logo{padding:4px 8px 18px}
.side a.nav{display:block;padding:8px 10px;border-radius:6px;color:var(--ink2);font-size:14.5px}
.side a.nav:hover{background:var(--surface2);text-decoration:none}
.side a.nav.on{background:var(--accent-bg);color:var(--accent);font-weight:500}
.side .group{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);padding:16px 10px 6px}
.side .who{margin-top:auto;border-top:1px solid var(--line);padding:12px 10px 0;font-size:13px}
.main{padding:24px 32px 48px;min-width:0}
.page-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.page-h h1{font-size:22px}
.trialbar{background:var(--accent-bg);color:var(--ink);border:1px solid #cfdcfa;border-radius:6px;padding:9px 14px;font-size:14px;margin-bottom:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.areas .area{border:1px solid var(--line);border-radius:6px;padding:12px;margin-bottom:10px;background:#fff}
.area-h{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.area-h input.name{font-weight:500;max-width:240px}
.area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs a{padding:9px 14px;color:var(--ink2);font-size:14.5px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.cutplan svg{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
.stat{border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:#fff}
.stat .k{font-size:12.5px;color:var(--ink3)} .stat .v{font-size:22px;font-weight:600;margin-top:2px}
.empty{padding:40px 20px;text-align:center;color:var(--ink3)}

/* ── printed quote ── */
.quote-doc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:40px;max-width:820px;font-size:14px}
.quote-doc .qh{display:flex;justify-content:space-between;gap:24px;border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:20px}
.quote-doc .qh h1{font-size:22px}
.quote-doc table td.num,.quote-doc table th.num{text-align:right}
.quote-doc .totals{margin-left:auto;width:280px;margin-top:12px}
.quote-doc .totals td{border:0;padding:4px 10px}
.quote-doc .totals tr.grand td{border-top:2px solid var(--ink);font-weight:600;font-size:16px;padding-top:8px}
.quote-doc .foot{margin-top:28px;color:var(--ink2);font-size:13px;white-space:pre-wrap}

@media print{
  body{background:#fff}
  .side,.page-h,.tabs,.trialbar,.noprint{display:none!important}
  .shell{display:block}.main{padding:0}
  .quote-doc{border:0;padding:0;max-width:none}
}
@media (max-width:900px){
  .hero .wrap,.split,.features,.pricing{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .site-top nav{display:none}
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:10px 12px}
  .side .logo{padding:4px 8px;width:100%}
  .side .group,.side .who{display:none}
  .main{padding:20px 16px 40px}
  .area-grid,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:1fr}
}
.area-body{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:14px;align-items:start}
.diagram{text-align:center}
.diagram svg{display:block;margin:0 auto;max-width:100%;height:auto}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;font-size:13px;font-weight:500}
.seg button{border:0;background:#fff;padding:5px 12px;cursor:pointer;color:var(--ink2)}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent);color:#fff}
@media (max-width:900px){.area-body{grid-template-columns:1fr}}
.hero .shot svg{max-height:460px;width:auto;max-width:100%;margin:0 auto}
.area-h{flex-wrap:wrap}
.area-h select{width:auto}
[data-area]{white-space:nowrap}
.side{align-self:start}
.area-h{flex-wrap:nowrap}
.area-h input.name{flex:1 1 120px;max-width:220px}
.area-h select{flex:0 0 auto;max-width:180px}
@media (max-width:900px){.area-h{flex-wrap:wrap}}
.side{position:static;height:auto;min-height:100vh;align-self:stretch}
@media (max-width:900px){.side{min-height:0}}
.help{border:1px solid var(--line);border-radius:6px;background:var(--surface2);padding:8px 12px;margin:0 0 14px;font-size:14px}
.help summary{cursor:pointer;font-weight:500;color:var(--accent)}
.help ul{margin:8px 0 2px;padding-left:20px;color:var(--ink2)}
.help li{margin:4px 0}
.pricing.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.order{border-top:1px solid var(--line2);padding:16px 0}
.order:first-of-type{border-top:0;padding-top:4px}
.order pre.details{white-space:pre-wrap;font:13px/1.5 var(--mono);background:var(--surface2);padding:10px;border-radius:6px;margin:10px 0 0}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs img{width:96px;height:96px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
@media (max-width:900px){.pricing.two{grid-template-columns:1fr}}
.badge{white-space:nowrap}

/* ── settings, price list, job prices ── */
.side .navs{display:flex;flex-direction:column;gap:2px}
.narrow{max-width:680px}
.pl-row{display:grid;gap:10px;align-items:end;margin-bottom:8px}
.pl-row.c2{grid-template-columns:minmax(0,2fr) minmax(0,1fr) 70px}
.pl-row.c3{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 70px}
.pl-row.c4{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) 70px}
.pl-row + .pl-row label{display:none}
.pl-x{padding-bottom:6px;text-align:right}
.card .pl-row + .btn{margin-top:4px}
.savebar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin-top:16px;box-shadow:0 -2px 8px rgba(22,27,38,.06)}
.carpet-row{grid-template-columns:1.6fr 1fr 1fr auto}
details.jobprices > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
details.jobprices > summary::-webkit-details-marker{display:none}
details.jobprices > summary h2{margin:0}
details.jobprices > summary::after{content:"Show";margin-left:auto;color:var(--accent);font-size:13.5px;font-weight:500}
details.jobprices[open] > summary::after{content:"Hide"}
details.jobprices[open] > summary{margin-bottom:12px}
.acts{white-space:nowrap}
.mbar{display:none}
.comp-form{margin-top:14px;background:var(--surface2)}

/* ── phones and small tablets ── */
@media (max-width:900px){
  input,select,textarea{font-size:16px}              /* stops iPhone zooming into a field */
  .side{position:sticky;top:0;z-index:20;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;padding:8px 12px}
  .side .logo{width:auto;padding:2px 4px;font-size:16px;margin-right:auto}
  .side .logo .mark{width:26px;height:26px}
  .side .navs{flex-direction:row;gap:4px}
  .side .navs .group{display:none}
  .side a.nav{padding:7px 12px}
  .main{padding:16px 14px 40px}
  .page-h{margin-bottom:14px;gap:8px}
  .page-h h1{font-size:19px;flex-basis:100%}
  .trialbar{font-size:13.5px;padding:8px 12px}
  .tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{white-space:nowrap;padding:9px 12px}
  .card{padding:16px}
  .area-h input.name{max-width:none;flex:1 1 100%}
  .area-h select{max-width:none;flex:1 1 auto}
  .carpet-row{grid-template-columns:1fr 1fr}
  .carpet-row > div:first-child{grid-column:1 / -1}
  .carpet-row label{display:block!important}
  .carpet-row{border-top:1px solid var(--line2);padding-top:10px}
  .pl-row.c2,.pl-row.c3,.pl-row.c4{grid-template-columns:1fr 1fr;border-top:1px solid var(--line2);padding-top:10px}
  .pl-row > div:first-child{grid-column:1 / -1}
  .pl-row + .pl-row label{display:block}
  .pl-x{grid-column:1 / -1;padding:0;text-align:left}
  .pl-x:empty{display:none}
  .g2.grid > div > label{white-space:normal}
  /* tables become one card per row */
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{border-bottom:1px solid var(--line2);padding:10px 2px}
  table.stack tr:last-child{border-bottom:0}
  table.stack td{border:0;padding:2px 0;text-align:left}
  table.stack td.lead{font-weight:500;font-size:15.5px;padding-bottom:4px}
  table.stack td[data-l]{display:flex;gap:10px;font-size:14px}
  table.stack td[data-l]::before{content:attr(data-l);color:var(--ink3);min-width:84px;flex-shrink:0}
  table.stack td.acts{white-space:normal;display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}
  table.stack td.acts:empty{display:none}
  table.stack select{width:auto}
  /* running total on a job */
  .mbar:not(:empty){display:flex;align-items:center;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -2px 10px rgba(22,27,38,.08)}
  .mbar b{font-size:17px}
  .main:has(.mbar:not(:empty)){padding-bottom:84px}
  .toast{bottom:84px}
  .quote-doc{padding:18px;font-size:13px}
  .quote-doc .qh{flex-direction:column;gap:10px}
  .quote-doc .totals{width:100%}
  .order .grid{grid-template-columns:1fr 1fr!important}
  .order .grid > div:last-child{grid-column:1 / -1}
  .savebar{border-radius:0;margin:16px -14px -40px;border-left:0;border-right:0}
  .auth{margin:28px auto}
  .site-top .wrap{gap:8px}
  .hero{padding:40px 0}
  .hero h1{font-size:28px}
}
@media (max-width:420px){
  .side .logo{font-size:0;gap:0}                   /* just the mark on narrow phones */
  .g2.grid:not(.keep){gap:10px}
}
@media print{.mbar,.savebar{display:none!important}}
@media (max-width:900px){
  .pl-row{position:relative}
  .pl-row.c4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl-x{position:absolute;top:6px;right:0;grid-column:auto}
  .pl-x .btn{padding:0 2px;font-size:13px}
  .area-h .swatch{margin-right:2px}
  .area-h input.name{flex:1 1 calc(100% - 24px)}
}
@media (max-width:900px){table.stack td[data-l]{overflow-wrap:anywhere;min-width:0}}
.trialbar.warn{background:var(--warn-bg);border-color:#f1d9ad}
input:disabled,select:disabled,textarea:disabled{background:var(--surface2);color:var(--ink2);cursor:not-allowed}
.area-h input.name{min-width:110px}
.area-h select{max-width:200px;text-overflow:ellipsis}
@media (max-width:900px){.area-h select{max-width:none}}
td{overflow-wrap:anywhere}
.logrow{padding:8px 0;border-bottom:1px solid var(--line2)}
.logrow:last-child{border-bottom:0}
select.actmenu{width:auto;min-width:190px;font-size:13.5px;padding:6px 8px}
@media (max-width:900px){select.actmenu{width:100%;font-size:16px}}
.supcode{font:600 26px/1.2 var(--mono);letter-spacing:.12em;background:var(--surface2);border:1px dashed var(--line);border-radius:6px;padding:12px 16px;display:inline-block}
.site-foot .wrap a{color:var(--ink2)}.site-foot .wrap{gap:16px}
@media (max-width:520px){.auth .grid.g2{grid-template-columns:1fr}}
.card[hidden]{display:none}

/* ── printed cut sheet: black and white, hairlines ── */
.cutsheet{display:none}
@media print{
  @page{size:A4;margin:12mm}
  .cutsheet{display:block;color:#000;font-size:11pt}
  .cs-head{display:flex;justify-content:space-between;gap:20px;border-bottom:1pt solid #000;padding-bottom:6pt;margin-bottom:10pt}
  .cs-head h1{font-size:16pt;margin:0 0 2pt}
  .cs-meta{text-align:right;font-size:10pt}
  .cs-roll{break-inside:avoid;margin-bottom:14pt}
  .cs-roll h2{font-size:12.5pt;margin:0 0 2pt}
  .cs-order{margin:0 0 8pt;font-size:10.5pt}
  .cs-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14pt;align-items:start}
  .cs-plan svg{width:100%;height:auto;max-height:235mm;display:block}
  .cutsheet table{font-size:9.5pt;border-collapse:collapse}
  .cutsheet th{color:#000;font-size:8.5pt;border-bottom:.75pt solid #000;padding:3pt 5pt}
  .cutsheet td{border-bottom:.25pt solid #999;padding:3pt 5pt;color:#000}
  .cs-foot{font-size:9pt;margin-top:10pt;border-top:.5pt solid #000;padding-top:4pt}
  /* the drawing: no fills or colour, thin black lines */
  .cs-plan svg rect{fill:none!important;stroke:#000!important;stroke-width:.6!important}
  .cs-plan svg rect[stroke-dasharray]{stroke-dasharray:1 2!important;stroke-width:.5!important}
  .cs-plan svg line{stroke:#000!important;stroke-width:.5!important}
  .cs-plan svg line[stroke="var(--crit)"]{stroke-width:.9!important;stroke-dasharray:5 3}
  .cs-plan svg path{fill:#000!important}
  .cs-plan svg text{fill:#000!important}
  .main:has(.cutsheet) .card,.main:has(.cutsheet) .stat{display:none}
}
@media print{
  .cs-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .cutsheet .cs-cut{break-inside:avoid}
  .cutsheet .cs-cut tr:last-child td{border-bottom:.75pt solid #000}
  .cutsheet td.cs-n{white-space:nowrap;vertical-align:top}
  .cutsheet td.cs-size{white-space:nowrap}
  .cs-key{font-size:8.5pt;margin:4pt 0 0}
}
@media print{.cs-plan svg{max-height:115mm;width:auto;max-width:100%}}
@media print{.cs-plan svg{max-height:100mm}.cs-roll{margin-bottom:10pt}}
@media print{.cs-foot{margin:-4pt 0 10pt;border:0;padding:0;font-style:italic}}
/* cut sheet v2: details on top, big full-width drawing underneath; long jobs run onto more pages */
@media print{
  .cs-roll{break-inside:auto}
  .cs-roll + .cs-roll{break-before:page}
  .cs-roll h2,.cs-order{break-after:avoid}
  .cs-body{display:block}
  .cutsheet table{width:100%}
  .cs-plan{break-inside:avoid;margin-top:8pt;text-align:center}
  .cs-plan svg{width:100%;max-width:100%;height:auto;max-height:245mm;margin:0 auto}
}
@media print{.cs-plan svg{max-height:var(--cs-h,245mm)}}
@media print{.cutsheet table.cs-supplier{margin:0 0 10pt;width:auto;min-width:60%}}
td.ref,.page-h .ref{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.page-h .ref{color:var(--accent)}
td.jobname{font-weight:500}
@media (max-width:900px){table.stack td.jobname{font-weight:500}.findbox{max-width:none!important}.findbox label{display:none}}

/* ── job statuses: one colour each, same as the Bensons quotes tool ── */
:root{--st-draft:#5f6773;--st-quoted:#1d4ed8;--st-accepted:#7c3aed;--st-booked:#0f766e;--st-completed:#137a4b;--st-lost:#b42318;--st-open:#161b26;--st-all:#454d5e}
.st-draft{--c:var(--st-draft)}.st-quoted{--c:var(--st-quoted)}.st-accepted{--c:var(--st-accepted)}.st-booked{--c:var(--st-booked)}
.st-completed{--c:var(--st-completed)}.st-lost{--c:var(--st-lost)}.st-open{--c:var(--st-open)}.st-all{--c:var(--st-all)}
.badge[class*="st-"]{color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.chip{border:1px solid var(--line);background:#fff;color:var(--c);border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:500;cursor:pointer}
.chip .n{color:var(--ink3);font-weight:400;margin-left:2px}
.chip.on{background:color-mix(in srgb,var(--c) 12%,#fff);border-color:color-mix(in srgb,var(--c) 55%,#fff)}
.chip:hover{border-color:color-mix(in srgb,var(--c) 40%,#fff)}
select.stsel{width:auto;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);border-color:color-mix(in srgb,var(--c) 40%,#fff)}
@media (max-width:900px){.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-14px;padding-right:14px}.chips::-webkit-scrollbar{display:none}.chip{white-space:nowrap}}
@media print{.badge[class*="st-"]{background:none;border:.5pt solid #000;color:#000}}
/* roll width picker (cut plan) */
.wpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.wopt{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit;color:inherit;cursor:pointer}
.wopt:hover{border-color:var(--ink3)}
.wopt.on{border:2px solid var(--accent);padding:9px 11px;background:var(--accent-bg)}
.wopt.off{cursor:default;color:var(--ink3);background:var(--bg)}
.wopt .small{color:var(--ink2)}
/* profit check (summary card, bosses only) */
.profit{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.profit table{margin-top:8px}
.profit tr.grand td{font-weight:600;border-top:1px solid var(--line)}
.pl-row.c5{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr)) 70px}
@media (max-width:900px){.pl-row.c5{grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2);padding-top:10px}}
@media print{.wpick,.profit{display:none!important}}

/* landing: the cut planner is the main feature, the rest are small */
.feat-main{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;margin-bottom:16px}
.feat-main:not(:has(figure)){grid-template-columns:1fr}
.feat-main:not(:has(figure)) .ticks{columns:2;column-gap:32px}
.feat-main h3{font-size:22px;margin-bottom:6px}
.feat-main p{color:var(--ink2);margin:0 0 14px;max-width:620px}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{padding:6px 0 6px 22px;position:relative;color:var(--ink2);break-inside:avoid}
.ticks li::before{content:"";position:absolute;left:2px;top:13px;width:9px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.feat-main figure{margin:0}
.feat-main figure img{width:100%;height:100%;max-height:380px;object-fit:cover;border-radius:6px;display:block}
.feat-main figcaption{font-size:13px;color:var(--ink3);margin-top:6px}
.feat-small{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.feat-small div{border-top:2px solid var(--line);padding-top:10px}
.feat-small h4{font-size:14.5px;margin:0 0 4px}
.feat-small p{margin:0;font-size:13.5px;color:var(--ink2)}
.builtby{margin-top:22px;padding-top:16px;border-top:1px solid var(--line2);font-size:14.5px;color:var(--ink2);max-width:520px}
#pricing .title,#pricing .sub{text-align:center;margin-left:auto;margin-right:auto}
#pricing .pricing.two{margin:0 auto}
#pricing .pricenote{text-align:center}
@media (max-width:900px){.feat-main{grid-template-columns:1fr;padding:20px}.feat-main:not(:has(figure)) .ticks{columns:1}.feat-small{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.feat-small{grid-template-columns:1fr}}

/* headings: Barlow, a plain trade/signage face, so the page isn't stock IBM Plex throughout */
h1,h2,h3,.hero h1,.section h2.title,.feat-main h3,.price h3{font-family:"Barlow",var(--sans,system-ui),sans-serif;letter-spacing:-.005em}
.hero h1{font-weight:700;font-size:44px;line-height:1.08}
.section h2.title{font-weight:700;font-size:32px}
.howto{margin:18px 0 0;color:var(--ink2);max-width:520px}
@media (max-width:900px){.hero h1{font-size:34px}}
.area-h select{flex:0 1 180px;min-width:110px} .area-h input.name{min-width:90px}

/* recent work: real jobs, plain row of photos */
.section.work{background:#fff;border-top:1px solid var(--line)}
.work-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.work-row figure{margin:0}
.work-row img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;display:block}
.work-row figcaption{font-size:13px;color:var(--ink2);margin-top:6px}
@media (max-width:900px){.work-row{grid-template-columns:repeat(5,62%);overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .work-row figure{scroll-snap-align:start}.work-row::-webkit-scrollbar{display:none}}

/* a real job's photo laid at an angle over the corner of the hero cut plan, like a print on the drawing */
.hero .shot{position:relative}
.shot-photo{position:absolute;width:36%;right:-28px;bottom:-34px;transform:rotate(4deg);border:7px solid #fff;border-bottom-width:22px;
  box-shadow:0 10px 24px rgba(20,25,35,.22),0 2px 5px rgba(20,25,35,.12);border-radius:2px;background:#fff}
@media (max-width:900px){.shot-photo{width:34%;right:-6px;bottom:-24px;border-width:5px;border-bottom-width:16px}.hero{padding-bottom:56px}}
.shot-photo{width:31%;bottom:-48px}
.hero .shot > p{text-align:left!important;padding-right:33%;min-height:48px}
@media (max-width:900px){.shot-photo{width:33%;bottom:-30px}.hero .shot > p{padding-right:36%}}

/* Terms and privacy pages */
.legal{max-width:760px;padding-top:36px;padding-bottom:48px}
.legal h2{font-size:19px;margin:26px 0 8px}
.legal p,.legal li{line-height:1.6}
.legal ul{padding-left:20px;margin:6px 0 10px}
.legal li{margin:4px 0}
mark.todo{background:#fff1a8;color:#5a4a00;padding:0 3px;border-radius:3px}

/* ── free carpet calculator (/carpet-calculator) ── */
.chk{display:inline-flex;align-items:center;gap:6px;font-size:14px;margin-right:14px;cursor:pointer}
.chk input{width:auto}
.calc-room{display:grid;grid-template-columns:1.3fr .8fr .8fr 1.3fr auto;gap:8px;align-items:end;margin-bottom:10px}
.calc-room label{font-size:12px}
.calc-room:not(:first-child) label{display:none}
.calc-answer{font-size:20px;margin:4px 0 10px}
.calc-answer b.num{font-size:28px}
.calc-cta{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-top:18px}
.calc-cta h3{margin:0 0 4px}.calc-cta p{margin:0}
.calc-cta .btn{flex-shrink:0}
.calc-guide{margin-top:34px;max-width:760px}
@media (max-width:640px){
  .calc-room{grid-template-columns:1fr 1fr;row-gap:4px}
  .calc-room>div:first-child{grid-column:1/-1}
  .calc-room label{display:block!important}
  .calc-room{border-bottom:1px solid var(--line2);padding-bottom:10px}
  .calc-cta{flex-direction:column;align-items:flex-start}
}
/* ── "Your customers' details are safe" on the front page ── */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 22px}
.trust div{border-top:2px solid var(--accent);padding-top:10px}
.trust h4{font-size:15px;margin:0 0 4px}
.trust p{margin:0;font-size:14px;color:var(--ink2)}
@media (max-width:900px){.trust{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.trust{grid-template-columns:1fr}}
.calc-fixed{font-size:14px;padding:8px 0;color:var(--ink2);white-space:nowrap}
/* join pieces: numbered badge on the cut plan + list under it */
.joins{margin:10px auto 0;max-width:520px;font-size:13px;color:var(--ink2)}
.joins b{display:block;color:var(--text);margin-bottom:4px}
.joins div{display:flex;align-items:center;gap:8px;margin:3px 0}
.jbadge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;border-radius:10px;background:var(--text);color:#fff;font-size:10px;font-weight:700;flex-shrink:0}
@media print{.jbadge{border:1px solid #000;background:#fff;color:#000}}
.calc-nudge{margin:14px 0 0;padding:10px 12px;border-radius:6px;background:var(--accent-bg);font-size:14px}
.calc-nudge a{font-weight:600;white-space:nowrap}