/* Inter and Manrope from our own folder (SIL Open Font License, texts next to
   the files). Latin only. */
@font-face{font-family:Inter; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/inter-regular.woff2) format("woff2")}
@font-face{font-family:Inter; font-weight:500; font-style:normal; font-display:swap; src:url(/assets/fonts/inter-medium.woff2) format("woff2")}
@font-face{font-family:Inter; font-weight:600; font-style:normal; font-display:swap; src:url(/assets/fonts/inter-semibold.woff2) format("woff2")}
@font-face{font-family:Manrope; font-weight:700; font-style:normal; font-display:swap; src:url(/assets/fonts/manrope-bold.woff2) format("woff2")}
@font-face{font-family:Manrope; font-weight:800; font-style:normal; font-display:swap; src:url(/assets/fonts/manrope-extrabold.woff2) format("woff2")}

/* ------------------------------------------------------------------
   OnsiteBoard: /estimate-maker/ (draft)
   Same tokens and components as the live site's pages (nav, buttons,
   dark band, FAQ, footer), copied here so this folder stands alone.
   Teal is the interface, amber is money and the one action that
   matters. No font files are loaded: the site's two typefaces are
   used when the device already has them, the system face otherwise.
   Adapted from the invoice maker's stylesheet: class names .inv-*
   became .est-*; new are the cross-link line, the deposit hint, the
   deposit rows under the total and the two lines to sign.
   ------------------------------------------------------------------ */
:root{
  --teal:#0F766E; --teal-800:#115E59; --teal-900:#134E4A;
  --teal-tint:#E7F2F0; --teal-tint-2:#D3E8E5; --mint:#5EEAD4;
  --amber:#F59E0B; --amber-tint:#FDF2DC; --amber-ink:#3A2705;
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#F3F5F7;
  --text:#1A1A1A; --text-2:#444444; --text-3:#5F6B76;
  --line:#E4E9ED; --line-2:#D5DDE3;
  --band-top:#10786F; --band-bottom:#083E3C;
  --red:#B91C1C;
  --shadow:0 1px 2px rgba(16,26,34,.05), 0 14px 32px -20px rgba(16,26,34,.35);
  --r:12px; --r-lg:16px;
  --nav-h:64px;
  --body-font:Inter,system-ui,sans-serif;
  --head-font:Manrope,Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body-font);
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--head-font); font-weight:800; letter-spacing:-.02em; line-height:1.12; margin:0}
h1{font-size:2.1rem} h2{font-size:1.75rem} h3{font-size:1.1rem; font-weight:700; letter-spacing:-.01em}
p{margin:0}
a{color:var(--teal)}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
ul{margin:0; padding:0; list-style:none}
strong{font-weight:600}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:6px}
.band :focus-visible{outline-color:var(--mint)}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--teal); color:#fff; padding:10px 14px; border-radius:8px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.sprite{position:absolute; width:0; height:0}
.wrap{width:100%; max-width:1140px; margin:0 auto; padding:0 16px}
section{scroll-margin-top:calc(var(--nav-h) + 8px)}
.sec{padding:56px 0}
.sec-head{max-width:640px; margin-bottom:28px}
.sec-head h2{margin-bottom:12px}
.sub{font-size:1.08rem; color:var(--text-2); line-height:1.5}
.small{font-size:.9rem; color:var(--text-3); line-height:1.5}
.ic{width:22px; height:22px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px; border-radius:12px; font-weight:600; font-size:1rem;
  text-decoration:none; white-space:nowrap; border:1.5px solid transparent;
  transition:background .15s, border-color .15s, transform .15s;
}
.btn:active{transform:translateY(1px)}
.btn-amber{background:var(--amber); color:var(--amber-ink)}
.btn-amber:hover{background:#F8AB2B}
.btn-teal{background:var(--teal); color:#fff}
.btn-teal:hover{background:var(--teal-800)}
.btn-outline{border-color:var(--teal); color:var(--teal); background:var(--surface)}
.btn-outline:hover{background:var(--teal-tint)}
.btn-quiet{border-color:var(--line-2); color:var(--text-2); background:var(--surface)}
.btn-quiet:hover{background:var(--surface-2)}
.btn-sm{min-height:44px; padding:0 14px; font-size:.95rem}
.stores{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; gap:12px; height:100%}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); min-height:44px}
.logo svg{width:32px; height:32px; border-radius:8px; flex:none}
.logo b{font-family:var(--head-font); font-weight:800; font-size:1.2rem; letter-spacing:-.02em}
.nav-links{display:none; align-items:center; gap:4px; margin-left:auto}
.nav-links a{color:var(--text-2); text-decoration:none; font-weight:500; font-size:.95rem; padding:0 10px; min-height:44px; display:inline-flex; align-items:center; border-radius:8px; white-space:nowrap}
.nav-links a:hover{color:var(--teal); background:var(--teal-tint)}
.burger{width:44px; height:44px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--text); margin-left:auto}
.burger:hover{background:var(--surface-2)}
.burger .x{display:none}
.nav.open .burger .x{display:block} .nav.open .burger .m{display:none}
.drawer{
  display:none; position:absolute; left:0; right:0; top:var(--nav-h);
  background:#fff; border-bottom:1px solid var(--line); box-shadow:0 20px 40px -24px rgba(16,26,34,.4);
  padding:8px 16px 16px;
}
.nav.open .drawer{display:block}
.drawer a{display:flex; align-items:center; min-height:48px; padding:0 8px; color:var(--text); text-decoration:none; font-weight:500; border-bottom:1px solid var(--line)}
.drawer a:last-child{border-bottom:0}

/* ---------- page head ---------- */
.tool-hero{background:linear-gradient(180deg,#F7FBFA 0%,#E9F3F1 100%); border-bottom:1px solid var(--line); padding:36px 0 28px}
.eyebrow{font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:12px}
.tool-hero h1{color:#0F2E2C; max-width:18ch}
.tool-hero .sub{max-width:600px; margin:14px 0 18px}
.points{display:grid; gap:6px}
.points li{display:flex; align-items:flex-start; gap:10px; color:var(--text-2); font-size:.95rem; line-height:1.4}
.points li svg{width:20px; height:20px; color:var(--teal); margin-top:1px}
.cross{margin-top:16px; font-size:.95rem; color:var(--text-2)}
.cross a{font-weight:600; display:inline-block; padding:10px 0}

/* ---------- the tool ---------- */
.tool-sec{padding:28px 0 56px}
.tool{display:grid; gap:28px; grid-template-columns:minmax(0,1fr)}
.form-col,.preview-col{min-width:0}
.jump{display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:600; text-decoration:none; margin-bottom:6px}
.jump:hover{text-decoration:underline}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 14px; margin:0 0 14px; min-width:0}
fieldset.card{min-inline-size:0}
.card > legend, .card > h2{font-family:var(--head-font); font-weight:800; font-size:1.08rem; letter-spacing:-.01em; padding:0; margin:0 0 4px; float:left; width:100%}
.card > legend + *{clear:both}
.card .hint{font-size:.88rem; color:var(--text-3); line-height:1.45; margin:0 0 12px}
.opt{font-family:var(--body-font); font-weight:500; font-size:.85rem; color:var(--text-3); letter-spacing:0}

.fld{display:block; margin:0 0 12px; min-width:0}
.fld:last-child{margin-bottom:0}
.fld > label, .lbl{display:block; font-size:.86rem; font-weight:600; color:var(--text-2); margin:0 0 5px; line-height:1.3}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{
  display:block; width:100%; min-width:0; min-height:48px; padding:10px 12px;
  font-family:inherit; font-size:1rem; line-height:1.4; color:var(--text);
  background:#fff; border:1.5px solid var(--line-2); border-radius:10px;
  -webkit-appearance:none; appearance:none;
}
textarea{resize:vertical; min-height:76px}
select{background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%); background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px; background-size:6px 6px; background-repeat:no-repeat; padding-right:36px}
input:hover,select:hover,textarea:hover{border-color:#B9C4CC}
input:focus,select:focus,textarea:focus{outline:3px solid var(--amber); outline-offset:1px; border-color:var(--teal)}
input[aria-invalid=true]{border-color:var(--red); background:#FEF6F6}
input[type=file]{display:block; width:100%; font-family:inherit; font-size:1rem; min-height:48px; padding:8px 0; color:var(--text-2)}
input[type=file]::file-selector-button{font:inherit; font-weight:600; min-height:40px; padding:0 14px; margin-right:12px; border-radius:10px; border:1.5px solid var(--teal); background:#fff; color:var(--teal); cursor:pointer}
.err{font-size:.86rem; color:var(--red); line-height:1.4; margin:6px 0 0}
.two{display:grid; gap:0 12px; grid-template-columns:minmax(0,1fr)}
.row-btns{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.logo-pick{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.check{display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color:var(--text); min-height:44px; padding:8px 0; cursor:pointer}
.check input{width:22px; height:22px; margin:1px 0 0; flex:none; accent-color:var(--teal)}

/* line items: description on its own row, then quantity, rate, amount, remove */
.li{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr) 44px; gap:8px; align-items:end; padding:12px 0; border-top:1px solid var(--line)}
.li:first-child{border-top:0; padding-top:0}
.li .fld{margin:0}
.li-desc{grid-column:1 / -1}
.li-desc textarea{min-height:48px}
.li input{padding-left:10px; padding-right:8px}
.li-amt{min-width:0}
.li-amt output{display:flex; align-items:center; justify-content:flex-end; min-height:48px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; text-align:right; font-size:.98rem}
.li-amt .lbl{text-align:right}
.li-rm{width:44px; height:48px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--text-3); font-size:1.5rem; line-height:1}
.li-rm:hover{background:var(--surface-2); color:var(--red)}
.li .err{grid-column:1 / -1; margin:0}
.add-row{margin-top:12px}
.tax-add{margin:8px 0 14px}
.disc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:8px}
.disc .lbl{grid-column:1 / -1; margin:0}
.dep{margin-top:12px}
.card .dep-hint{margin:8px 0 0}
.card .check + .hint{margin:0}

/* totals and actions at the foot of the form */
.sum{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:var(--r); padding:14px 16px; margin:0 0 14px}
.sum-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--head-font); font-weight:800; font-size:1.25rem}
.sum-row span:last-child{font-variant-numeric:tabular-nums; overflow-wrap:anywhere; text-align:right}
.sum-sub{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:6px; font-size:.95rem; color:var(--text-2)}
.sum-sub span:last-child{font-variant-numeric:tabular-nums; overflow-wrap:anywhere; text-align:right; font-weight:600}
.actions{display:grid; gap:10px; margin:0 0 6px}
.actions .btn{width:100%}
.keep{background:var(--surface-2); border-radius:var(--r); padding:8px 14px 12px; margin-top:14px}
.keep .small{margin:0 0 10px}

/* ---------- the estimate (preview on screen, the whole page in print) ---------- */
.pv-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.pv-head h2{font-size:1.25rem}
.pv-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.paper{background:#fff; border:1px solid var(--line-2); border-radius:10px; box-shadow:var(--shadow)}
.est{padding:18px 16px; font-size:13px; line-height:1.45; color:#1A1A1A; overflow-wrap:anywhere; word-break:break-word}
.est p{margin:0}
.est p:empty{display:none}
.est .ph:empty{display:block; color:#9AA5AE; font-style:italic}
.est .ph:empty::before{content:attr(data-ph)}
.est-top{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.est-from{display:flex; gap:12px; align-items:flex-start; min-width:0}
.est-from > div{min-width:0}
.est-logo{max-width:96px; max-height:72px; width:auto; height:auto; flex:none; object-fit:contain}
.est-biz{font-family:var(--head-font); font-weight:800; font-size:1.3em; line-height:1.2; margin-bottom:4px !important}
.est-pre{white-space:pre-line}
.est-title{font-family:var(--head-font); font-weight:800; font-size:1.7em; letter-spacing:.04em; text-transform:uppercase; color:var(--teal); line-height:1; margin-bottom:8px !important}
.est-meta dl{margin:0; display:grid; gap:2px}
.est-meta dl > div{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px}
.est-meta dt{color:#5F6B76; white-space:nowrap}
.est-meta dd{margin:0; font-weight:600}
.est-billto{margin-top:18px; padding-top:14px; border-top:1px solid var(--line-2)}
.est h3{font-family:var(--body-font); font-size:.78em; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5F6B76; margin:0 0 4px}
.est-name{font-weight:600}
.est-items{width:100%; table-layout:fixed; border-collapse:collapse; margin-top:18px}
.est-items th{font-size:.78em; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#5F6B76; text-align:left; padding:0 6px 6px 0; border-bottom:1.5px solid #1A1A1A; vertical-align:bottom}
.est-items td{padding:8px 6px 8px 0; border-bottom:1px solid var(--line-2); vertical-align:top}
.est-items .c-qty{width:15%} .est-items .c-rate{width:21%} .est-items .c-amt{width:24%}
.est-items .n{text-align:right; font-variant-numeric:tabular-nums}
.est-items th:last-child,.est-items td:last-child{padding-right:0}
.est-items td.d{white-space:pre-line}
.est-items td.none{color:#9AA5AE; font-style:italic}
.est-totals{margin:12px 0 0 auto; width:100%; max-width:300px}
.est-totals dl{margin:0}
.est-totals dl > div{display:flex; justify-content:space-between; gap:12px; padding:4px 0}
.est-totals dt{color:#444}
.est-totals dd{margin:0; font-variant-numeric:tabular-nums; text-align:right; min-width:0}
.est-totals .grand{margin-top:6px; padding:9px 0 0; border-top:1.5px solid #1A1A1A; font-family:var(--head-font); font-weight:800; font-size:1.2em}
.est-totals .grand dt{color:#1A1A1A}
/* the deposit to start and the balance after it sit under the total, in plain weight */
.est-totals .after{margin-top:6px}
.est-notes{margin-top:20px; padding-top:12px; border-top:1px solid var(--line-2)}
/* two blank lines for the customer to sign on paper; shown only when ticked */
.est-accept{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; margin-top:44px}
.est-sign{min-width:0}
.est-rule{display:block; height:30px; border-bottom:1px solid #1A1A1A}
.est-sign-lbl{display:block; margin-top:5px; font-size:.78em; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5F6B76}
.pv-foot{margin-top:12px}

/* ---------- dark band: the one call to action ---------- */
.band{background:linear-gradient(180deg,var(--band-top) 0%,var(--band-bottom) 100%); color:#fff}
.band h2{color:#fff}
.band .hl{color:var(--mint)}
.cta .wrap{padding:64px 16px; text-align:center; display:flex; flex-direction:column; align-items:center}
.cta p{color:#E3F1EF; max-width:600px; margin:16px 0 0; font-size:1.05rem}
.cta .stores{justify-content:center; margin-top:26px}
.cta .trial{font-weight:600; color:#fff; margin-top:14px; font-size:1rem}
.cta .cta-main{margin-top:24px}
.cta .or{font-size:.95rem; margin-top:22px}
.cta .or + .stores{margin-top:12px}
.cta .status{font-size:.86rem; color:#DCEEEB; margin-top:10px}

/* ---------- FAQ ---------- */
.faq{max-width:760px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; font-family:var(--head-font); font-weight:700; font-size:1.02rem; min-height:56px; border-radius:var(--r)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px; height:20px; color:var(--teal); flex:none; transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .ans{padding:0 18px 18px; color:var(--text-2); line-height:1.55}
.faq .ans p + p, .faq .ans ul + p{margin-top:10px}
.faq .ans ul{list-style:disc; padding-left:20px; margin-top:8px}
.faq .ans li{margin:3px 0}

/* ---------- footer ---------- */
.foot{background:#fff; border-top:1px solid var(--line); padding:36px 0}
.foot .wrap{display:grid; gap:20px}
.foot .tag{color:var(--text-2); font-size:.95rem; margin-top:8px}
.foot ul{display:flex; flex-wrap:wrap; gap:4px 20px}
.foot ul a{color:var(--text-2); text-decoration:none; font-weight:500; min-height:44px; display:inline-flex; align-items:center}
.foot ul a:hover{color:var(--teal); text-decoration:underline}
.foot .copy{color:var(--text-3); font-size:.88rem}

/* ---------- breakpoints ---------- */
@media (min-width:600px){
  .card{padding:20px 20px}
  .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .est{padding:28px 28px; font-size:14px}
  .est-top{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .est-meta{text-align:right}
  .est-meta dl > div{grid-template-columns:minmax(0,1fr) auto}
  .est-meta dd{min-width:88px; text-align:right}
  .est-items .c-qty{width:11%} .est-items .c-rate{width:17%} .est-items .c-amt{width:19%}
  .actions{grid-template-columns:1fr auto}
  .actions .btn{width:auto}
}
@media (min-width:768px){
  h1{font-size:2.9rem} h2{font-size:2.1rem}
  .wrap{padding:0 32px}
  .sec{padding:80px 0}
  .tool-hero{padding:56px 0 40px}
  .points{grid-template-columns:repeat(3,auto); justify-content:start; gap:8px 28px}
  .nav-links{display:flex}
  .burger{display:none}
  .cta .wrap{padding:80px 32px}
  .foot .wrap{grid-template-columns:1fr auto; align-items:start}
  .foot .copy{grid-column:1/-1}
}
@media (min-width:1024px){
  .tool-sec{padding:40px 0 80px}
  .tool{grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:32px; align-items:start}
  .jump{display:none}
  .preview-col{position:sticky; top:calc(var(--nav-h) + 16px)}
  /* the paper scrolls inside its column when the estimate is taller than the window */
  .paper{max-height:calc(100vh - var(--nav-h) - 150px); overflow:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* ---------- print: only the estimate, on US Letter ---------- */
@page{size:letter; margin:.5in}
@media print{
  html,body{background:#fff !important; overflow:visible !important}
  body{font-size:10.5pt}
  /* .sprite is NOT hidden here: with the icon sprite set to display:none, Safari on iPhone opens no
     print window at all (found by the developer on the simulator, 2026-10-06). It is 0 x 0 anyway. */
  .no-print,.nav,.foot,.skip{display:none !important}
  main,.tool-sec,.tool-sec .wrap,.tool,.preview-col,.paper{
    display:block !important; position:static !important; width:auto !important; max-width:none !important;
    max-height:none !important; overflow:visible !important; margin:0 !important; padding:0 !important;
    background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  }
  .est{padding:0; font-size:10.5pt; color:#000}
  .est .ph:empty,.est .screen-only,.est .is-empty{display:none !important}
  .est-logo{max-width:1.6in; max-height:1in}
  .est-items thead{display:table-header-group}
  .est-items tr,.est-totals,.est-totals dl > div,.est-billto,.est-accept{break-inside:avoid; page-break-inside:avoid}
  .est-rule{border-bottom-color:#000}
  .est-notes h3{break-after:avoid; page-break-after:avoid}
  .est-title{color:#0F766E; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* Templates by trade: plain links under the FAQ */
.tpl-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.tpl-grid a{display:flex; align-items:center; min-height:48px; padding:10px 14px; border:1px solid var(--line-2);
  border-radius:10px; background:var(--surface); color:var(--text); font-weight:600; font-size:.95rem; text-decoration:none}
.tpl-grid a:hover{border-color:var(--teal); color:var(--teal)}
.tpl-all{margin:18px 0 0}
.tpl-label{margin:22px 0 10px; font-weight:700; color:var(--text)}
@media (min-width:640px){ .tpl-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:960px){ .tpl-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }