/* KREWALT type scale: Visby CF for display, Sora for text. Every text size on the page comes
   from these tokens: change a token here, never a pixel value in a rule.
   Logo wordmarks keep their own size. */
@font-face {
  font-family: "Visby CF";
  src: url("../assets/fonts/visby-cf-extrabold.woff2") format("woff2"),
       url("../assets/fonts/visby-cf-extrabold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --orange: #ff6a00;
  --black: #0b0f14;
  --line: #dce1e4;
  --font-body: Sora, Arial, Helvetica, sans-serif;
  --font-display: "Visby CF", Sora, Arial, Helvetica, sans-serif;

  /* Text, 12 px minimum */
  --fs-meta: 12px;   /* fine print, captions, uppercase labels */
  --fs-small: 14px;  /* secondary text, table rows, card copy */
  --fs-ui: 15px;     /* buttons, tabs, links that act */
  --fs-body: 16px;   /* running text and form fields (no zoom on iOS) */
  --fs-lead: 18px;   /* intros, FAQ questions, small titles */

  /* Headings */
  --fs-card: 20px;
  --fs-sub: 24px;
  --fs-panel: clamp(26px, 2.4vw, 32px);
  --fs-section: clamp(30px, 3.3vw, 44px);
  --fs-title: clamp(32px, 3.5vw, 48px);
  --fs-display: clamp(34px, 4vw, 56px);
  --fs-price: clamp(32px, 3vw, 40px);
}

body { font: 400 var(--fs-body)/1.55 var(--font-body); color: var(--black); }
button, input, select, textarea { font-family: var(--font-body); }

/* Visby CF only exists in Extra Bold: titles, prices, actions and labels. Running text stays in Sora. */
h1, h2, h3,
.price, .price-product strong, .price-action > strong, .roi-result strong, .quote-selection strong,
.cart-summary .cart-total, .mobilebuy b, .cart-product b,
.orangebtn, .outlinebtn, .outline-action, .secondary-mini, .final-secondary, .closing-quote, .textlink, .tab,
.eyebrow, .final-cta > div > span, .orangebadge,
.benefit .num, .situations-grid span, .steps-grid article > span, .document-type, .process-list li:before,
.feature b, .demo-list b, .about-points b, .process-list b,
.faq-layout summary, .closing-accordion summary {
  font-family: var(--font-display);
  font-weight: 800;
}

/* Header and product purchase */
.crumb { font-size: var(--fs-meta); line-height: 1.5; padding-block: 26px; }
.purchase .productlabel { font-size: var(--fs-sub); line-height: 1.1; letter-spacing: -.04em; }
.purchase .productlabel em { color: var(--orange); }
.purchase h1 {
  font-size: var(--fs-title);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: .2em 0 .32em;
}
.purchase .sub { font-size: var(--fs-lead); line-height: 1.45; margin-bottom: .85em; }
.orangebadge { font-size: var(--fs-meta); font-weight: 800; letter-spacing: .08em; }
.price { font-size: var(--fs-price); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; }
.price small { font-size: var(--fs-body); letter-spacing: 0; vertical-align: 12px; }
.pricehint, .volume-hint, .avail, .selection-total, .miniassurance { font-size: var(--fs-small); line-height: 1.5; }
.avail { font-weight: 700; }
.prototype-note, .subtle-note, .fineprint { font-size: var(--fs-meta); line-height: 1.5; }
.qty { height: 48px; font-size: var(--fs-body); }
.orangebtn, .outlinebtn, .outline-action, .secondary-mini, .final-secondary {
  font-size: var(--fs-ui);
  line-height: 1.35;
  font-weight: 800;
  border-radius: 9px;
  min-height: 46px;
  padding: 12px 20px;
}
.orangebtn, .outlinebtn { height: auto; min-height: 48px; }
.feature b { font-size: var(--fs-small); font-weight: 700; line-height: 1.3; }
.feature small { font-size: var(--fs-meta); line-height: 1.4; }
.tab { font-size: var(--fs-ui); font-weight: 700; line-height: 1.4; padding-block: 18px; }

/* Section labels. The skew belongs to the background, keeping every label upright. */
.eyebrow, .final-cta > div > span {
  display: inline-block;
  position: relative;
  isolation: isolate;
  max-width: calc(100% - 20px);
  margin: 0 10px 18px;
  padding: 8px 18px;
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}
.eyebrow::before, .final-cta > div > span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--orange);
  border-radius: 3px;
  transform: skew(-24deg);
}

/* Sections and tab panels */
.section { padding-block: 94px; }
.section-head { gap: 28px; margin-bottom: 38px; }
.section h2, .section-head h2 {
  font-size: var(--fs-section);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 12px 0 18px;
}
.section p, .section-head p, .description p { font-size: var(--fs-body); line-height: 1.55; }
.section-head p { max-width: 560px; }
.product-information h2, .description h2 {
  font-size: var(--fs-panel);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0 0 16px;
}
.checks { font-size: var(--fs-body); line-height: 1.6; font-weight: 400; }
.checks li { margin-block: 9px; }
.spec h3, .tech-table h3 { font-size: var(--fs-card); line-height: 1.2; letter-spacing: -.025em; font-weight: 700; }
.spec .row, .tech-table > div, .equipment-list > div { font-size: var(--fs-small); line-height: 1.5; }
.spec .row, .tech-table > div { padding-block: 12px; }
.spec .row strong, .tech-table strong { font-weight: 700; }
.spec .tiny, .section .tiny { font-size: var(--fs-meta); line-height: 1.5; }

/* Cards */
.situations-grid h3, .applications-grid h3, .delivery-grid h3, .document-list h3,
.compat-grid h3, .fit-heading h3, .benefit h3 {
  font-size: var(--fs-card);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 700;
  margin-block: 8px 10px;
}
.steps-grid h3, .demo-list b, .about-points b, .process-list b {
  font-size: var(--fs-lead);
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 700;
}
.situations-grid p, .delivery-grid p, .compat-grid p, .applications-grid p,
.benefit p, .steps-grid p, .about-points span, .process-list p, .document-list p, .fit-heading p {
  font-size: var(--fs-small);
  line-height: 1.5;
}
.benefit .num, .situations-grid span, .steps-grid article > span, .document-type {
  font-size: var(--fs-meta);
  font-weight: 800;
  line-height: 1.4;
}
.process-list li:before { font-size: var(--fs-panel); }
.textlink { font-size: var(--fs-ui); font-weight: 800; line-height: 1.4; }
.document-list a { font-size: var(--fs-small); }
.demo-list small, .demo-caption, .demo-tag, .photo-stamp, .capsule,
.zoom-hint, .equipment-photo small, .image-dialog p { font-size: var(--fs-meta); line-height: 1.45; }
.compat-callout { font-size: var(--fs-small); line-height: 1.5; font-weight: 700; }

/* Savings simulator and volume pricing */
.roi-tool label { font-size: var(--fs-small); font-weight: 700; line-height: 1.5; }
.roi-result strong { font-size: var(--fs-section); line-height: 1.1; letter-spacing: -.04em; }
.roi-result p { font-size: var(--fs-meta); line-height: 1.5; }
.roi-result small, .roi-result > span { font-size: var(--fs-small); line-height: 1.5; }
.price-product span { font-size: var(--fs-small); font-weight: 800; }
.price-product strong, .price-action > strong { font-size: var(--fs-price); line-height: 1.1; letter-spacing: -.035em; }
.price-product strong small { font-size: var(--fs-small); letter-spacing: 0; }
.price-product p, .price-action > span, .price-action > small, .pricing-row span, .pricing-row strong { font-size: var(--fs-small); line-height: 1.5; }
.pricing-row em { font-size: var(--fs-meta); line-height: 1.5; }
.about-body small, .service-list { font-size: var(--fs-meta); line-height: 1.65; }

/* FAQ and forms */
.faq-layout summary { font-size: var(--fs-body); line-height: 1.45; font-weight: 700; padding: 17px 20px; }
.faq-layout details p { font-size: var(--fs-small); line-height: 1.55; padding: 0 20px 18px; }
.fit-form label, .quoteform label, .search-dialog label { font-size: var(--fs-small); font-weight: 700; line-height: 1.5; }
.fit-form input, .fit-form select, .fit-form textarea, .quoteform input, .quoteform select, .quoteform textarea, .search-dialog input {
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  padding: 11px;
}
.quoteform small { font-size: var(--fs-meta); line-height: 1.5; }
#fitStatus, .form-error { font-size: var(--fs-small); line-height: 1.5; }
.quote-selection { font-size: var(--fs-small); }
.quote-selection > b { font-size: var(--fs-small); font-weight: 700; }
.quote-selection strong { font-size: var(--fs-panel); line-height: 1.1; letter-spacing: -.035em; }
.quote-success p, .quote-success button { font-size: var(--fs-small); line-height: 1.5; }
.quote-success pre { font: var(--fs-meta)/1.7 var(--font-body); }

/* Dialogs, cart and search */
.dialog-header h2, .cart-empty h3 { font-size: var(--fs-panel); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; }
.cart-product b { font-size: var(--fs-card); line-height: 1.2; letter-spacing: -.025em; }
.cart-product p, .cart-product small, .cart-summary > div, .cart-empty p, #searchResults a, #searchEmpty { font-size: var(--fs-small); line-height: 1.5; }
.cart-summary .cart-total { font-size: var(--fs-sub); line-height: 1.3; letter-spacing: -.025em; }
.text-button, .image-controls button { font-size: var(--fs-small); line-height: 1.5; }
.toast { font-size: var(--fs-small); line-height: 1.5; }

/* Final call to action and footer */
.final-cta h2 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; margin: 10px 0 22px; }
.final-cta p { font-size: var(--fs-lead); line-height: 1.5; }
footer { padding-top: 44px; }
footer a, footer span, footer strong { font-size: var(--fs-small); line-height: 1.5; }
.footer-brand b { font-size: 30px; line-height: 1; letter-spacing: -.07em; }
footer .footer-brand small, footer > p { font-size: var(--fs-meta); line-height: 1.5; }
.mobilebuy b { font-size: var(--fs-sub); line-height: 1.1; letter-spacing: -.04em; }
.mobilebuy button { font-size: var(--fs-ui); line-height: 1.35; font-weight: 800; }

@media (max-width: 1050px) {
  .feature b { font-size: var(--fs-meta); }
  /* Only text under 12 px: five columns must fit side by side. */
  .feature small { font-size: 11px; }
}
@media (max-width: 760px) {
  .section { padding-block: 67px; }
  .section-head { margin-bottom: 26px; }
}
@media (max-width: 600px) {
  .purchase .sub { font-size: var(--fs-body); }
  .price small { font-size: var(--fs-small); vertical-align: 8px; }
  .miniassurance { font-size: var(--fs-meta); }
}