/* Shared typography only. Manrope is bundled for offline use. */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --font-body: "Manrope", Arial, sans-serif;
  --weight-body: 500;
  --weight-action: 600;
  --weight-heading: 700;
}
body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .005em;
  font-synthesis: none;
}
button, input, select, textarea { font-family: var(--font-body); }
button, .button, .copy-button, .text-link, .mobile-call, .product-link {
  font-weight: var(--weight-action);
  letter-spacing: .005em;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
input, select, textarea { font-weight: var(--weight-body); line-height: 1.5; letter-spacing: .005em; }
input::placeholder, textarea::placeholder { font-weight: 500; }
h1, h2, h3, .product h3, .benefit-list h3, .space-note h3, .steps h3,
.zip-screen-top h3, #zip-dialog h3 {
  font-weight: var(--weight-heading);
  line-height: 1.23;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(42px, 4.4vw, 74px); font-weight: 750; line-height: 1.12; letter-spacing: -.045em; }
h2, .zip-heading h2 { line-height: 1.2; letter-spacing: -.035em; }
h1 em, h2 em, h3 em { font-weight: inherit; }
.brand { font-weight: 750; letter-spacing: -.055em; }
.brand-caption { font-weight: 600; letter-spacing: .2em; line-height: 1.4; }
.header nav, .header-phone, .menu-toggle { font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.header .brand { font-size: 28px; }
.header nav { font-size: 16.1px; white-space: nowrap; gap: clamp(14px, 1.5vw, 24px); }
.header-phone { font-size: 16px; }
.header-phone, .contact-number, .footer a[href^="tel:"] { font-variant-numeric: tabular-nums; }
.hero-description { font-size: 16px; line-height: 1.75; letter-spacing: .005em; }
.eyebrow { font-weight: 700; letter-spacing: .14em; line-height: 1.6; }
.hero-bottom, .principle-strip { font-weight: 500; line-height: 1.65; }
.section-heading>p:last-child:not(.eyebrow), .product p, .product li,
.benefit-list p, .steps p, .faq-list p, .space-note>p { line-height: 1.75; }
.product h3 { font-size: 23px; line-height: 1.3; letter-spacing: -.025em; }
.product-top, .visual-label, .visual-note { font-weight: 600; letter-spacing: .06em; line-height: 1.5; }
summary { font-weight: 600; line-height: 1.55; letter-spacing: -.01em; }
.fineprint, .form-notice, .zip-small, .zip-disclaimer { font-weight: 500; line-height: 1.75; letter-spacing: .01em; }
form label, .admin-main label, .zip-screen label, #zip-lead label { font-weight: 600; line-height: 1.55; letter-spacing: .01em; }
.contact-number { font-weight: 600; letter-spacing: -.025em; line-height: 1.5; }
.footer p { line-height: 1.75; }
.zip-heading>p { line-height: 1.75; }
.zip-step legend { font-weight: 700; line-height: 1.4; letter-spacing: -.015em; }
.zip-step-number, .zip-demo, .zip-live, .zip-limits { font-weight: 600; line-height: 1.6; }
.zip-material-copy { font-weight: 500; line-height: 1.65; letter-spacing: .005em; }
.zip-material-copy strong { font-weight: 700; line-height: 1.4; letter-spacing: -.015em; overflow-wrap: anywhere; }
.zip-material-copy small, .zip-profile small { font-weight: 500; line-height: 1.6; letter-spacing: .005em; }
.zip-dimension-fields input, .zip-counter input { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.025em; line-height: 1.25; }
.zip-area { font-weight: 600; line-height: 1.6; }
.zip-result-item { line-height: 1.6; }
.zip-result-item strong, .zip-totals strong { font-weight: 600; }
.zip-result-item small, .zip-unit { font-weight: 500; line-height: 1.6; }
.zip-price>span { font-weight: 600; line-height: 1.5; }
.zip-price strong { font-weight: 700; line-height: 1.2; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.zip-price strong.zip-individual-price { font-weight: 700; line-height: 1.3; letter-spacing: -.025em; }
.zip-result .button { font-size: 12px; line-height: 1.5; }
.zip-error, #zip-status, #zip-lead-status, #admin-status { font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
.admin-main h1 { font-weight: 750; line-height: 1.2; letter-spacing: -.035em; }
.admin-section legend { font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.admin-fields input { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 761px) and (max-width: 1100px) {
  h1 { font-size: clamp(38px, 4.4vw, 49px); }
  .product h3 { font-size: 20px; }
  .header .brand { font-size: 23px; }
  .header nav { font-size: 13.8px; }
  .header-phone { font-size: 12px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .header .brand { font-size: 19px; }
  .header .brand-caption { font-size: 6px; letter-spacing: .16em; }
  .header nav { font-size: 12.075px; }
  .header-phone { font-size: 10.5px; }
}
@media (max-width: 760px) {
  h1 { font-size: clamp(38px, 9.6vw, 64px); line-height: 1.14; letter-spacing: -.045em; }
  h2 { line-height: 1.22; }
  .hero-description { font-size: 15px; line-height: 1.75; }
  .product h3 { font-size: 24px; }
  .header .brand { font-size: 25px; }
  .header .menu-toggle { font-size: 13px; }
  .header nav { font-size: 17.25px; line-height: 1.5; }
  .brand-caption { font-size: 7px; letter-spacing: .16em; }
  .zip-heading h2 { font-size: 35px; }
  .zip-material-copy strong { font-size: 13px; }
  .zip-profile { letter-spacing: -.015em; }
  #zip-dialog h3 { font-size: 28px; }
  .zip-result>.button { font-size: 13px; }
  .admin-header .brand { font-size: 22px; }
}
/* Visible navigation on computers and tablets; icon-only control on phones. */
@media (min-width: 761px) and (max-width: 1240px) {
  .header { gap: 14px; }
  .header nav { gap: 6px; }
  .header .brand { font-size: 23px; }
  .header-phone { font-size: 12px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .header .brand { font-size: 21px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .header { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 0; }
  .header .brand { font-size: 19px; }
  .header-phone { grid-column: 2; grid-row: 1; }
  .header nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 8px; }
}
@media (max-width: 340px) {
  .header .brand { font-size: 22px; }
}

/* Header identity: supplied canopy emblem and the site's native Manrope wordmark. */
.header .brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-logo-mark { display: block; width: 60px; height: 48px; object-fit: contain; flex-shrink: 0; }
.header-logo-wordmark { display: block; }
.header .brand-caption { margin: 9px 0 0; text-align: center; }
@media (min-width: 961px) and (max-width: 1240px) {
  .header .brand { font-size: 21px; gap: 8px; }
  .header-logo-mark { width: 44px; height: 40px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .header-logo-mark { width: 42px; height: 34px; }
  .header .brand-caption { margin-top: 6px; }
}
@media (max-width: 760px) {
  .header .brand { font-size: 22px; gap: 8px; }
  .header-logo-mark { width: 48px; height: 40px; }
  .header .brand-caption { margin-top: 7px; }
}
@media (max-width: 340px) {
  .header .brand { font-size: 20px; gap: 7px; }
  .header-logo-mark { width: 40px; height: 34px; }
}

/* Use the supplied transparent artwork directly, cropping out its old lettering.
   A CSS mask recolors the original pixels without redrawing the emblem. */
.header-logo-mark {
  position: relative;
  background: var(--green);
  -webkit-mask: url("assets/logo-canopy-sage.png") 52.878% 38.522% / 176.796% 245.211% no-repeat;
  mask: url("assets/logo-canopy-sage.png") 52.878% 38.522% / 176.796% 245.211% no-repeat;
}
.header-logo-mark::after {
  content: ""; position: absolute; inset: 0; background: #d6b261;
  clip-path: polygon(60% 0,100% 0,100% 54%,88% 54%,64% 43%,60% 36%);
}
.header-logo-mark { height: auto; aspect-ratio: 724 / 522; }