/* Modern accordion icons (FAQ + calculator categories), replacing the plain "+" / "−" text.
   One-colour SVG masks, so the icon follows the brand colour set in Appearance. */
html .faq-item summary::after,
html .pcat summary::after{
  content:"";flex:none;margin-left:auto;width:30px;height:30px;border-radius:0;font-size:0;
  background:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.75'/%3E%3Cpath d='M7.75 10.25 12 14.5l4.25-4.25' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.75'/%3E%3Cpath d='M7.75 10.25 12 14.5l4.25-4.25' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s ease,background-color .2s ease;opacity:.9
}
/* open: solid circle with the chevron cut out, turned upward */
html .faq-item[open] summary::after,
html .pcat[open] summary::after{
  content:"";transform:rotate(180deg);opacity:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm-3.72 8.72a.9.9 0 0 0-1.27 1.27l4.36 4.36a.9.9 0 0 0 1.27 0l4.36-4.36a.9.9 0 0 0-1.27-1.27L12 13.44 8.28 9.72Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm-3.72 8.72a.9.9 0 0 0-1.27 1.27l4.36 4.36a.9.9 0 0 0 1.27 0l4.36-4.36a.9.9 0 0 0-1.27-1.27L12 13.44 8.28 9.72Z'/%3E%3C/svg%3E") center/contain no-repeat
}
html .faq-item summary:hover::after,
html .pcat summary:hover::after{background:var(--blue-d);opacity:1}
html .pcat summary::after{width:26px;height:26px}

/* rows: subtle hover + brand-coloured open state (was a fixed green) */
html .faq-item{transition:border-color .2s,box-shadow .2s}
html .faq-item:hover{border-color:var(--blue-soft)}
html .faq-item[open]{border-color:color-mix(in srgb,var(--blue) 30%,transparent)}
html .faq-item summary,html .pcat summary{transition:color .2s}
html .faq-item summary:hover{color:var(--blue)}
html .faq-item summary:focus-visible,html .pcat summary:focus-visible{outline:3px solid var(--blue-soft);outline-offset:-3px;border-radius:inherit}
@media (prefers-reduced-motion:reduce){html .faq-item summary::after,html .pcat summary::after{transition:none}}

/* Dark brand footer: logo + tagline row (added by build.js), then the site's links.
   The logo image comes from Appearance → Footer logo (theme_css); text is editable on the site. */
html footer{background:var(--navy,#1d2c2e);color:rgba(255,255,255,.75);border-top:0}
html footer .foot-links a{color:#fff}
html footer .foot-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
html footer .foot-head,
html footer .foot-disc,
html footer .foot-disc summary{color:rgba(255,255,255,.68)}
html footer .foot-disc summary:hover{color:#fff}
html footer a:focus-visible,html footer summary:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.foot-brand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding:4px 0 22px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-logo{display:flex;align-items:center;gap:10px;min-height:44px;color:#fff;text-decoration:none;font-weight:700;font-size:20px;letter-spacing:-.02em;white-space:nowrap}
.foot-logo i{width:28px;height:28px;border-radius:8px;background:var(--blue);display:grid;place-items:center;flex:none}
.foot-tag{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.75);max-width:520px}

/* Phones: the top bar keeps the logo, "Book a Demo" and the menu button; the CAD/USD toggle
   moves into the slide-down menu (.mnav-cur, added by build.js). Before this the top bar was
   wider than a 390px screen and every page scrolled sideways. */
.mnav-cur{display:none}
@media (max-width:480px){
  html nav.top .wrap{gap:8px}
  html nav.top .seg{display:none}
  html .navr{gap:8px;min-width:0}
  html .navr .btn.nav-cta{padding:0 14px;font-size:14px;white-space:nowrap}
  html .logo{min-width:0}
  html .logo::before{max-width:40vw}
  .mnav-cur{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 0 0;border-top:1px solid #ececf0}
  .mnav-cur>span{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
  .mnav-cur .seg button{min-width:72px;font-size:15px}
}

/* Chart labels drawn as SVG text use the site font (Montserrat), not the system font. */
html svg text{font-family:inherit}

/* Cookie consent banner (assets/sr-track.js) */
#sr-consent{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:120;max-width:560px;margin:0 auto;
  background:#fff;color:var(--text);border-radius:18px;padding:16px 18px;box-shadow:0 18px 50px -12px rgba(25,68,73,.35),0 0 0 1px rgba(25,68,73,.08);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;font-size:14px;line-height:1.45}
#sr-consent p{margin:0;flex:1 1 260px}
#sr-consent a{color:var(--blue)}
#sr-consent div{display:flex;gap:8px;flex:1 1 auto;justify-content:flex-end}
#sr-consent button{min-height:44px;padding:0 18px;border-radius:999px;font:inherit;font-weight:700;cursor:pointer;border:0;flex:1 1 0}
#sr-consent [data-c=no]{background:var(--bg2);color:var(--text)}
#sr-consent [data-c=yes]{background:var(--blue);color:#fff}
/* Turnstile shows itself only if it needs the visitor to click */
#sr-turnstile{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:130}

/* Forms (Book a demo, Talk to sales, quotes, savings report) open smoothly: the backdrop fades in and
   the form rises and settles into place. The site shows them by adding .open, which starts these. */
@keyframes sr-fade-in{from{opacity:0}to{opacity:1}}
@keyframes sr-form-in{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
html .modal-bg.open{animation:sr-fade-in .28s ease-out both}
html .modal-bg.open .modal{animation:sr-form-in .42s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){html .modal-bg.open,html .modal-bg.open .modal{animation:none}}
/* …and close smoothly: a short fade-out and drop before the form is removed (assets/sr-forms.js). */
@keyframes sr-fade-out{from{opacity:1}to{opacity:0}}
@keyframes sr-form-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(16px) scale(.97)}}
html .modal-bg.sr-closing{animation:sr-fade-out .2s ease-in both;pointer-events:none}
html .modal-bg.sr-closing .modal{animation:sr-form-out .2s ease-in both}
@media (prefers-reduced-motion:reduce){html .modal-bg.sr-closing,html .modal-bg.sr-closing .modal{animation:none}}