/* Solea standout features — three static columns with on-brand graph visuals.
   The cards are deliberately not links; the only clickable thing is the
   "Learn more" affordance in each one. Reveal covers the sticky hero. */
.section.solea-standout{background-color:var(--_🎨-color---light--light-orange,#fafafa);padding-top:84px;padding-bottom:88px;}
.so-head{max-width:780px;margin:0 auto 58px;text-align:center;display:flex;flex-direction:column;align-items:center;grid-row-gap:18px;}
.so-head>*{margin:0;}
.so-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:26px;grid-row-gap:26px;width:100%;}
.so-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:20px;overflow:hidden;text-decoration:none;box-shadow:0 1px 3px rgba(26,19,15,.04);}
.so-media{height:208px;padding:30px 30px 22px;background:#fff;border-bottom:1px solid rgba(17,17,17,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.so-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.so-body{padding:30px 30px 34px;display:flex;flex-direction:column;flex:1;}
.so-eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--_🎨-color---other--orange,#ff4d00);margin-bottom:14px;}
.so-title{font-family:var(--_📕-fonts---main);font-weight:600;font-size:23px;line-height:1.25;letter-spacing:-.01em;color:#1a130f;margin:0 0 12px;}
.so-desc{color:#5f574f;font-size:14.5px;line-height:1.62;margin:0 0 24px;}
.so-more{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;color:#1a130f;font-weight:600;font-size:14.5px;text-decoration:none;transition:gap .25s;}
.so-more:hover{opacity:1;}
.so-more svg{color:var(--_🎨-color---other--orange,#ff4d00);}
.so-more:hover{gap:13px;}
.so-more:hover svg{transform:translateX(2px);}
.so-more svg{transition:transform .25s cubic-bezier(.4,0,.2,1);}
@media screen and (max-width:991px){.so-grid{grid-template-columns:1fr;}.section.solea-standout{padding-top:80px;padding-bottom:80px;}}


  
/* Solea customer story — enterprise spotlight: big image + ROI overlay */
.section.solea-story{background-color:#fafafa;padding-top:60px;padding-bottom:112px;}
.cs-head{max-width:820px;margin:0 auto 44px;text-align:center;display:flex;flex-direction:column;align-items:center;grid-row-gap:14px;}
.cs-head>*{margin:0;}
.cs-card{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid rgba(17,17,17,.09);border-radius:14px;box-shadow:0 6px 24px rgba(26,19,15,.05);overflow:hidden;}
.cs-media{position:relative;min-height:520px;background:#111;}
.cs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.cs-media-stat{position:absolute;left:0;right:0;bottom:0;padding:34px 36px;display:flex;flex-direction:column;gap:4px;background:linear-gradient(to top,rgba(12,9,7,.82),rgba(12,9,7,0));}
.cs-media-label{color:rgba(255,255,255,.82);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.cs-media-num{font-family:var(--_📕-fonts---main);font-weight:600;font-size:52px;line-height:1;color:#fff;letter-spacing:-.02em;}
.cs-media-unit{font-family:"Instrument Sans",sans-serif;font-size:20px;font-weight:600;color:rgba(255,255,255,.7);margin-left:4px;}
.cs-content{padding:50px 52px;display:flex;flex-direction:column;justify-content:center;}
.cs-logo{height:46px;width:auto;max-width:210px;object-fit:contain;display:block;margin:0 0 24px -6px;}
.cs-title{font-family:var(--_📕-fonts---main);font-weight:600;font-size:27px;line-height:1.2;letter-spacing:-.01em;color:#1a130f;margin:0 0 16px;}
.cs-quote{font-family:var(--_📕-fonts---main);font-size:20px;line-height:1.5;color:#3a312b;margin:0 0 26px;}
.cs-attrib{display:flex;align-items:center;gap:13px;margin-bottom:30px;}
.cs-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.cs-name{color:#1a130f;font-weight:600;font-size:15px;line-height:1.3;}
.cs-role{color:#6b625c;font-size:13.5px;line-height:1.3;margin-top:2px;}
.cs-metrics{display:flex;gap:30px;margin-bottom:32px;flex-wrap:wrap;}
.cs-m{display:flex;flex-direction:column;}
.cs-m-num{font-family:var(--_📕-fonts---main);font-weight:600;font-size:30px;line-height:1;color:var(--_🎨-color---other--orange,#ff4d00);letter-spacing:-.01em;}
.cs-m-lbl{color:#6b625c;font-size:12.5px;line-height:1.35;margin-top:8px;}
.cs-m-from{color:#a89f98;}
.cs-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:none;color:#16110e;font-weight:600;font-size:15px;text-decoration:none;transition:gap .25s,color .25s;}
.cs-btn:hover{gap:12px;color:var(--_🎨-color---other--orange,#ff4d00);}
.cs-btn svg{display:block;color:var(--_🎨-color---other--orange,#ff4d00);}
@media screen and (max-width:991px){.cs-card{grid-template-columns:1fr;}.cs-media{min-height:340px;}.cs-content{padding:36px 30px;}}
@media screen and (max-width:479px){.section.solea-story{padding-bottom:76px;}.cs-metrics{gap:22px;}.cs-media-num{font-size:42px;}}

/* Solea features grid (Rillet-style) + switch comparison — scoped */
.section.solea-features{background-color:var(--_🎨-color---light--light-orange,#fafafa);padding-top:60px;padding-bottom:112px;}
.pt-head{max-width:760px;margin:0 auto 30px;text-align:center;display:flex;flex-direction:column;align-items:center;grid-row-gap:18px;}
.pt-head>*{margin:0;}
.pt{position:relative;width:100%;}
.pt-radio{position:absolute;width:0;height:0;opacity:0;pointer-events:none;}
.pt-top{display:flex;justify-content:center;margin-bottom:46px;}
.pt-toggle{display:inline-flex;gap:40px;border-bottom:1px solid var(--_🎨-color---dark--black-10,rgba(17,17,17,.12));}
.pt-seg{position:relative;padding:0 2px 15px;font-weight:600;font-size:16px;color:#9a938d;cursor:pointer;transition:color .25s;}
.pt-seg:hover{color:#1a130f;}
.pt-seg::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--_🎨-color---other--orange,#ff4d00);transform:scaleX(0);transition:transform .3s ease;}
.pt-tier{display:none;}
#tier-ess:checked~.pt-body .pt-tier.ess,#tier-adv:checked~.pt-body .pt-tier.adv{display:block;}

/* Module cards, 4 up.
   The problem with the first attempt was legibility: a whole dashboard scaled
   down to card width is unreadable, so the screenshot became texture rather
   than evidence. Fixed by showing a *detail at readable scale* instead of the
   whole screen shrunk — the capture is rendered near its natural size, anchored
   top-left, and allowed to run off the right and bottom of the tile. The
   rounded top-left corner and the shadow stay visible, so it reads as a window
   into the product rather than a bad crop. */
.pt-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:22px;grid-row-gap:22px;}

/* Module card. Static by design: these are read, not clicked, so nothing moves
   on hover. (An earlier edit left a dangling `.pt-card:hover` selector here,
   which swallowed the rule after it and meant the body padding only applied
   while hovering — hence text with no margins that jumped when the cursor
   crossed it.) */
.pt-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(17,17,17,.09);
  border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(26,19,15,.05);}

/* A window onto the product: the capture sits near its natural size, anchored
   top-left, and runs off the right and bottom so the UI stays legible instead
   of being shrunk to texture. */
.pt-shot{position:relative;display:block;height:196px;overflow:hidden;flex:0 0 auto;
  background:linear-gradient(158deg,#faf6f4 0%,#efe7e1 100%);}
.pt-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(239,231,225,0) 0%,rgba(239,231,225,.9) 60%,#efe7e1 100%);}
.pt-shot img{position:absolute;top:20px;left:20px;width:560px;max-width:none;height:auto;display:block;
  border-radius:8px;border:1px solid rgba(17,17,17,.12);box-shadow:0 12px 30px rgba(26,19,15,.16);}
/* the phone capture is portrait: size it by height or it would show only a sliver */
.pt-shot--tall img{width:auto;height:300px;left:50%;transform:translateX(-50%);}

.pt-card-body{padding:22px 22px 26px;display:flex;flex-direction:column;}
.pt-name{font-family:var(--_📕-fonts---main);font-weight:600;font-size:16.5px;line-height:1.32;
  letter-spacing:-.012em;color:#1a130f;margin:0 0 9px;}
.pt-desc{font-size:13.5px;line-height:1.65;color:#6b625c;margin:0;}

@media screen and (max-width:1200px){.pt-grid{grid-template-columns:repeat(3,1fr);}}
@media screen and (max-width:900px){.pt-grid{grid-template-columns:repeat(2,1fr);}}
@media screen and (max-width:600px){.pt-grid{grid-template-columns:1fr;}.section.solea-features{padding-bottom:78px;}}
#tier-ess:checked~.pt-top .seg-ess,#tier-adv:checked~.pt-top .seg-adv{color:#1a130f;}
#tier-ess:checked~.pt-top .seg-ess::after,#tier-adv:checked~.pt-top .seg-adv::after{transform:scaleX(1);}
#tier-ess:checked~.pt-body .pt-tier.ess{display:block;}
#tier-adv:checked~.pt-body .pt-tier.adv{display:block;}
@media screen and (max-width:991px){.pt-grid{grid-template-columns:repeat(2,1fr);}.section.solea-features{padding-bottom:78px;}}
@media screen and (max-width:600px){.pt-grid{grid-template-columns:1fr;}}


/* === Nodeway-style palette: white body, neutral light surfaces (less beige) === */
:root{ --_🎨-color---light--light-orange:#fafafa; }
body{ background-color:#ffffff; }

/* hero — Mercury-style: larger image, higher placement, wider subhead */
.hero-c---image-wrapper{max-width:1040px;margin-left:auto;margin-right:auto;}
.section.hero-c{padding-top:120px;padding-bottom:56px;}
.hero-c---paragraph{max-width:600px;}

/* Insights section — Nodeway-style cards (category pill + date + title + author) */
.section.solea-insights{background-color:#fafafa;padding-top:60px;padding-bottom:112px;}
.ni-head{display:grid;grid-template-columns:1.1fr .9fr;grid-column-gap:48px;align-items:end;margin-bottom:50px;}
.ni-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;font-size:14px;font-weight:600;color:#6b625c;}
.ni-dot{width:7px;height:7px;border-radius:50%;background:var(--_🎨-color---other--orange,#ff4d00);display:inline-block;}
.ni-title-h{font-family:var(--_📕-fonts---main);font-weight:600;font-size:38px;line-height:1.12;letter-spacing:-.02em;color:#1a130f;margin:0;max-width:18ch;}
.ni-head-right{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.ni-sub{color:#6b625c;font-size:16px;line-height:1.6;margin:0;}
.ni-btn{display:inline-flex;align-items:center;gap:9px;background:#16110e;color:#fff;font-weight:600;font-size:14.5px;line-height:1;padding:14px 22px;border-radius:10px;text-decoration:none;transition:background .25s,gap .25s;}
.ni-btn:hover{background:#000;gap:13px;}
.ni-btn svg{display:block;}
.ni-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:26px;grid-row-gap:40px;}
.ni-card{display:flex;flex-direction:column;text-decoration:none;}
/* Same treatment as the "Keep reading" cards at the foot of an article: a
   landscape band that the image fills edge to edge. `contain` was showing every
   cover whole but left a beige mat around the wide banners, which read as a
   gap rather than a mount. `cover` fills the frame instead. The band is 21:8,
   close to the related cards' proportion, chosen because several covers carry
   baked-in text near the middle: a shallow band trims their sides only lightly,
   where a squarer frame would cut the wording. */
.ni-img{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:21/8;background:#f2ede9;}
.ni-img img{width:100%;height:100%;object-fit:cover;display:block;}
/* the card lifts rather than the image zooming, matching the other card grids */
.ni-card{transition:transform .25s cubic-bezier(.4,0,.2,1);}
.ni-card:hover{transform:translateY(-3px);}
.ni-pill{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:#1a130f;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.ni-pdot{width:6px;height:6px;border-radius:50%;background:var(--_🎨-color---other--orange,#ff4d00);}
.ni-date{color:#8a837c;font-size:13px;margin:18px 0 8px;}
.ni-title{font-weight:600;font-size:19px;line-height:1.32;color:#1a130f;margin:0;letter-spacing:-.01em;}
@media screen and (max-width:991px){.ni-head{grid-template-columns:1fr;grid-row-gap:24px;align-items:start;}.ni-grid{grid-template-columns:repeat(2,1fr);}.ni-title-h{font-size:30px;}}
@media screen and (max-width:600px){.ni-grid{grid-template-columns:1fr;}.section.solea-insights{padding-bottom:76px;}}


/* ---------------------------------------------------------------------------
   Consent checkbox.
   The template used Webflow's custom-checkbox pattern: a visually hidden input
   plus a <div> that only looks checked once Webflow's JS adds
   .w--redirected-checked. That JS is bound to the .w-form wrapper, which this
   page no longer has (the form posts to HubSpot itself), so the box could never
   show a checked state. A real <input> styled directly needs no JS at all, and
   keeps `required` doing the gating.
   --------------------------------------------------------------------------- */
.checkbox-field{display:flex;align-items:flex-start;gap:11px;}
.checkbox-field label{cursor:pointer;line-height:1.5;}

.consent-box{
  appearance:none;-webkit-appearance:none;
  flex:0 0 auto;width:19px;height:19px;margin:1px 0 0;
  display:grid;place-content:center;
  border:1px solid rgba(249,244,242,.38);border-radius:5px;
  background-color:rgba(249,244,242,.10);
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.consent-box::before{
  content:"";width:10px;height:5.5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);transform-origin:center;
  margin-top:-3px;transition:transform .15s ease;
}
.consent-box:checked{background-color:#ff4d00;border-color:#ff4d00;}
.consent-box:checked::before{transform:rotate(-45deg) scale(1);}
.consent-box:hover{border-color:rgba(249,244,242,.6);}
.consent-box:focus-visible{outline:2px solid #ff4d00;outline-offset:3px;}

/* ---------------------------------------------------------------------------
   Demo page (/demo) layout corrections.
   The template shipped this section at a fixed height:100dvh with the container
   set to overflow:hidden, so whenever the content was taller than the viewport
   the form card's bottom corners and the copyright line were clipped. It also
   used only 32px of top padding, which put the logo underneath the fixed navbar.
   --------------------------------------------------------------------------- */
.section.demo-page {
  height: auto;
  min-height: 100dvh;
  padding-top: 122px;   /* 66px navbar + 56px clear, matching the homepage hero */
  padding-bottom: 48px;
}

.section.demo-page .demo-page---container {
  overflow: visible;
  grid-row-gap: 24px;
  row-gap: 24px;
  justify-content: flex-start;
}

/* .w-container's clearfix :before/:after become flex items in this column
   container, so space-between hands them real slots and the row-gap gets
   spent on phantom rows instead of between the logo, card and copyright. */
.section.demo-page .demo-page---container::before,
.section.demo-page .demo-page---container::after {
  display: none;
}

/* The card's rounded bottom corners were invisible: the template gave it a
   top border only, so the bottom edge dissolved into the background. */
.section.demo-page .form---glass {
  border-width: 1px;
  border-color: #f9f4f233;
}

/* Fields are spaced with margin-bottom (32px), not gap — adding a row-gap
   stacks on top rather than replacing it. At 32px the card ran 595px tall,
   which pushed its lower half under the fold on a 13" laptop. */
.section.demo-page .form---inside .input-wrap,
.section.demo-page .form---inside .checkbox-field {
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .section.demo-page {
    padding-top: 104px;
    padding-bottom: 48px;
  }
  .section.demo-page .demo-page---container {
    grid-row-gap: 32px;
    row-gap: 32px;
  }
}

/* ---------------------------------------------------------------------------
   Footer without the CTA block.
   .footer---background is inset 200px from the top so the dark CTA card could
   straddle the boundary. With the CTA hidden that inset just reads as a stray
   cream band above a dirty-white one, so pull it flush.
   --------------------------------------------------------------------------- */
.section.footer.no-cta .footer---background {
  top: 0;
}

/* Trailing dashed rule under the last benefit had nothing after it to separate. */
.section.demo-page .demo---info:last-child {
  border-bottom: 0;
}

/* The submit shared a space-between row with the (fabricated) rating block.
   With that gone it was left stranded at one end, so give it the full width —
   a full-bleed submit is the stronger call to action on a conversion form. */
.section.demo-page .form---inside .inputs-wrapper.bottom {
  width: 100%;
}

/* Submit button.
   The template's .form-button transitions transform on hover to scale(.9) with
   an overshoot easing (cubic-bezier(.68,-.55,.265,1.55)). On a small button that
   reads as a nudge; on a full-width submit the entire bar visibly shrinks and
   springs, which is what looked wrong. Replaced with a flat cream button and a
   restrained 1px lift. The .white gradient is also cleared: it painted a grey
   radial smudge across the bottom half of the button. */
.section.demo-page .form-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 17px 26px;
  border: 0;
  border-radius: 12px;
  background-color: #f9f4f2;
  background-image: none;
  color: #17120f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transform: none;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.section.demo-page .form---inside .form-button {
  width: 100%;
}

.section.demo-page .form-button:hover {
  transform: translateY(-1px);
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
}

.section.demo-page .form-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* The form sits on a dark panel, so the focus ring needs to read against cream. */
.section.demo-page .form-button:focus-visible {
  outline: 2px solid #ff4d00;
  outline-offset: 3px;
}

/* Sending state: the handler swaps the label, so hold the width steady and
   stop the button reacting to a pointer that can no longer do anything. */
.section.demo-page .form---inside.is-sending .form-button {
  transform: none;
  box-shadow: none;
  background-color: #e8e0dc;
  color: #6b615c;
  cursor: default;
}

/* Arrow matches the site's primary buttons. Static: the whole point of this
   pass was removing the springy scale, so it must not slide on hover either. */
.section.demo-page .form-button .btn-arrow {
  flex: none;
  opacity: .55;
}

.section.demo-page .form-button:hover .btn-arrow {
  opacity: 1;
}

/* On the success card the button is a link, not a full-bleed submit. */
.section.demo-page #demo-success .form-button {
  width: auto;
  align-self: flex-start;
}

/* Benefit icons: replaced the template's Graph/Rocket/Data raster marks with
   inline stroke icons that actually match the copy (records, the job loop,
   a conversation). White, matching the headings they sit beside. */
.section.demo-page .demo---icon {
  width: 32px;
  height: 32px;
  flex: none;
  color: #f9f4f2;
}

/* ===========================================================================
   Case study page (/solea-case-study)
   Section language borrowed from the homepage: the customer-story card (.cs-*)
   for the pull quote, the standout card grid (.so-*) for the pillars.
   No bracket kickers on this page; the headline opens each section.
   =========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.section.cst-hero{background-color:var(--_🎨-color---light--light-orange,#f9f4f2);padding-top:156px;padding-bottom:76px;}
.cst-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;grid-column-gap:60px;align-items:center;}
.cst-hero-text{display:flex;flex-direction:column;align-items:flex-start;}
.cst-brand{height:68px;width:auto;max-width:280px;object-fit:contain;display:block;margin:0 0 28px;}
.cst-h1{font-family:var(--_📕-fonts---main);font-weight:600;font-size:46px;line-height:1.12;letter-spacing:-.02em;margin:0 0 22px;max-width:15ch;}
.cst-lede{margin:0 0 30px;max-width:52ch;}
.cst-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;}
.cst-meta li{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:12px;padding:12px 18px;box-shadow:0 1px 3px rgba(26,19,15,.04);}
.cst-meta-k{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#a89f98;}
.cst-meta-v{font-size:15px;font-weight:600;color:#1a130f;line-height:1.2;}
/* Swap the span for an <img class="cst-meta-logo"> once a ServSuite mark exists. */
.cst-meta-mark{font-family:var(--_📕-fonts---main);font-size:16px;letter-spacing:-.01em;color:#6b625c;}
.cst-meta-logo{height:20px;width:auto;max-width:120px;object-fit:contain;display:block;}

.cst-hero-media{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#111;aspect-ratio:4/3;box-shadow:0 18px 44px rgba(26,19,15,.13);}
.cst-hero-media>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.cst-hero-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0;padding:52px 26px 22px;text-align:left;background:linear-gradient(to top,rgba(12,9,7,.88),rgba(12,9,7,0));}
.cst-hero-cap-n{color:#fff;font-weight:600;font-size:17px;line-height:1.25;}
.cst-hero-cap-r{color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.3;}

/* --- Headline numbers: one panel with rules, not four floating cards ------ */
.section.cst-band{background:linear-gradient(to bottom,var(--_🎨-color---light--light-orange,#f9f4f2) 50%,#fff 50%);padding-top:0;padding-bottom:0;}
.cst-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid rgba(17,17,17,.09);border-radius:20px;box-shadow:0 10px 34px rgba(26,19,15,.07);overflow:hidden;}
.cst-strip-item{display:flex;flex-direction:column;gap:10px;padding:34px 32px;}
.cst-strip-item+.cst-strip-item{border-left:1px solid rgba(17,17,17,.08);}
.cst-strip-num{font-family:var(--_📕-fonts---main);font-weight:600;font-size:42px;line-height:1;letter-spacing:-.02em;color:var(--_🎨-color---other--orange,#ff4d00);}
.cst-strip-lbl{font-size:13.5px;font-weight:600;line-height:1.4;color:#6b625c;}

/* --- Shared section furniture -------------------------------------------- */
.cst-h2{font-family:var(--_📕-fonts---main);font-weight:600;font-size:33px;line-height:1.16;letter-spacing:-.018em;color:#1a130f;margin:0;max-width:44ch;}
.cst-head{margin:0 0 46px;}

/* --- Challenge: headline left, the read on the right, full width used ----- */
.section.cst-story{background:#fff;padding-top:96px;padding-bottom:96px;}
.cst-story-grid{display:grid;grid-template-columns:.85fr 1.15fr;grid-column-gap:72px;align-items:start;}
.cst-story-h{max-width:none;}
.cst-story-body p{margin:0 0 20px;font-size:16.5px;line-height:1.72;color:#6b625c;}
.cst-story-body p:last-child{margin-bottom:0;}
.cst-lede-2{font-size:21px !important;line-height:1.55 !important;color:#3a312b !important;}

/* --- Pillars: each change carries its own proof -------------------------- */
.section.cst-pillars{background-color:var(--_🎨-color---light--light-orange,#f9f4f2);padding-top:96px;padding-bottom:96px;}
.cst-pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:24px;grid-row-gap:24px;align-items:start;}
.cst-pillar{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid rgba(17,17,17,.09);border-radius:20px;padding:32px 32px 12px;box-shadow:0 1px 3px rgba(26,19,15,.04);transition:box-shadow .35s,transform .35s;}
.cst-pillar:hover{box-shadow:0 20px 46px rgba(26,19,15,.10);transform:translateY(-3px);}
.cst-pillar-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,77,0,.08);color:var(--_🎨-color---other--orange,#ff4d00);margin-bottom:20px;flex:0 0 auto;}
.cst-pillar-ic svg{width:22px;height:22px;}
.cst-pillar-title{font-family:var(--_📕-fonts---main);font-weight:600;font-size:21px;line-height:1.25;color:#1a130f;margin:0 0 12px;}
.cst-pillar-body{color:#5f574f;font-size:14.5px;line-height:1.62;margin:0 0 24px;}
.cst-proof{margin:auto 0 0;padding:0;border-top:1px solid rgba(17,17,17,.08);}
.cst-proof-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;}
.cst-proof-row+.cst-proof-row{border-top:1px solid rgba(17,17,17,.06);}
.cst-proof dt{font-size:13px;color:#8c837c;line-height:1.3;}
.cst-proof dd{margin:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.cst-was{font-size:13.5px;color:#b3aaa3;text-decoration:line-through;text-decoration-thickness:1px;}
.cst-arrow{font-size:12px;color:#c8bfb8;}
.cst-now{font-size:14.5px;font-weight:700;color:var(--_🎨-color---other--orange,#ff4d00);}

/* --- Testimonial: centred, so the card is not a wide empty field ---------- */
.section.cst-quote-sec{background:#fff;padding-top:96px;padding-bottom:96px;}
.cst-quote-card{position:relative;margin:0;padding:72px 60px 64px;background:#160f0c url('/images/Background-Gradient-4.webp') center/cover no-repeat;border-radius:24px;box-shadow:0 24px 60px rgba(26,19,15,.18);overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;}
.cst-quote-mark{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-family:var(--_📕-fonts---main);font-size:170px;line-height:1;color:rgba(249,244,242,.09);pointer-events:none;}
.cst-quote{position:relative;font-family:var(--_📕-fonts---main);font-size:31px;line-height:1.42;letter-spacing:-.01em;color:#f9f4f2;margin:0 0 36px;max-width:23ch;background:none;padding:0;border:0;border-radius:0;box-shadow:none;}
.cst-attrib{display:flex;align-items:center;justify-content:center;gap:15px;}
.cst-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid rgba(249,244,242,.22);}
.cst-attrib-t{display:flex;flex-direction:column;text-align:left;}
.cst-name{color:#f9f4f2;font-weight:600;font-size:16px;line-height:1.3;}
.cst-role{color:rgba(249,244,242,.62);font-size:13.5px;line-height:1.3;margin-top:3px;}

/* --- Impact: four cards, same family as the pillars, lighter weight ------- */
.section.cst-impact{background-color:var(--_🎨-color---light--light-orange,#f9f4f2);padding-top:96px;padding-bottom:104px;}
.cst-impact-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:20px;grid-row-gap:20px;}
.cst-impact-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(17,17,17,.09);border-radius:18px;padding:28px 26px 30px;box-shadow:0 1px 3px rgba(26,19,15,.04);}
.cst-check{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,77,0,.09);color:var(--_🎨-color---other--orange,#ff4d00);margin-bottom:18px;flex:0 0 auto;}
.cst-impact-t{margin:0 0 8px;font-size:16px;font-weight:600;color:#1a130f;line-height:1.32;}
.cst-impact-d{margin:0;font-size:14px;line-height:1.6;color:#6b625c;}

@media screen and (max-width:991px){
  .cst-hero-grid{grid-template-columns:1fr;grid-row-gap:36px;}
  .cst-strip{grid-template-columns:repeat(2,1fr);}
  .cst-strip-item:nth-child(odd){border-left:0;}
  .cst-strip-item:nth-child(n+3){border-top:1px solid rgba(17,17,17,.08);}
  .cst-story-grid{grid-template-columns:1fr;grid-row-gap:26px;}
  .cst-story-h{max-width:none;}
  .cst-pillar-grid{grid-template-columns:1fr;}
  .cst-h1{font-size:38px;max-width:none;}
  .cst-h2{max-width:none;}
}
@media screen and (max-width:479px){
  .section.cst-hero{padding-top:112px;}
  .cst-brand{height:52px;}
  .cst-h1{font-size:31px;}
  .cst-strip{grid-template-columns:1fr;}
  .cst-strip-item+.cst-strip-item{border-left:0;border-top:1px solid rgba(17,17,17,.08);}
  .cst-strip-num{font-size:36px;}
  .cst-lede-2{font-size:19px !important;}
}

/* --- Outcome: the voice and the arithmetic, side by side ------------------
   Replaces a 440px dark quote monument plus a repeat of the pillar card grid.
   One sentence did not warrant its own full-bleed section, and the impact
   cards were echoing the section directly above them. Set as editorial type
   on the page ground instead: no card, no watermark glyph, roughly half the
   height, and the quote now sits next to the results it is talking about. */
.section.cst-outcome{background-color:var(--_🎨-color---light--light-orange,#f9f4f2);padding-top:92px;padding-bottom:100px;}
.cst-outcome-grid{display:grid;grid-template-columns:1.05fr .95fr;grid-column-gap:60px;align-items:center;}

.cst-voice{margin:0;position:relative;padding-left:26px;}
.cst-voice::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--_🎨-color---other--orange,#ff4d00);}
.cst-voice-q{font-family:var(--_📕-fonts---main);font-size:31px;line-height:1.4;letter-spacing:-.014em;color:#1a130f;margin:0 0 30px;max-width:none;background:none;padding:0;border:0;border-radius:0;box-shadow:none;}
.cst-voice-a{display:flex;align-items:center;gap:14px;margin:0;text-align:left;}
.cst-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.cst-voice-t{display:flex;flex-direction:column;}
.cst-name{color:#1a130f;font-weight:600;font-size:15.5px;line-height:1.3;}
.cst-role{color:#8c837c;font-size:13.5px;line-height:1.3;margin-top:2px;}

.cst-h3{font-family:var(--_📕-fonts---main);font-weight:600;font-size:25px;line-height:1.22;letter-spacing:-.015em;color:#1a130f;margin:0 0 6px;}
.cst-sum-list{margin:0;padding:0;}
.cst-sum-row{display:grid;grid-template-columns:auto;gap:5px;padding:20px 0;border-bottom:1px solid rgba(17,17,17,.09);}
.cst-sum-row:last-of-type{border-bottom:0;}
.cst-sum-t{margin:0;font-size:16px;font-weight:600;color:#1a130f;line-height:1.35;}
.cst-sum-d{margin:0;font-size:14.5px;line-height:1.6;color:#6b625c;}

@media screen and (max-width:991px){
  .cst-outcome-grid{grid-template-columns:1fr;grid-row-gap:48px;}
  .cst-voice-q{font-size:24px;max-width:none;}
}




/* the turn: a hairline broken by an arrow chip */



@media screen and (max-width:991px){
}

/* ===========================================================================
   Overrides appended last on purpose: this stylesheet contains two near
   identical halves (an earlier double-append), so a rule placed mid-file can
   be silently shadowed by its twin further down. Everything below is the
   single source of truth for these components.
   =========================================================================== */

/* --- Switch cards: the Solea half on the brand gradient ------------------- */

/* The module cards and the switch comparison are the only animated pieces
   left in this stretch of the page. */
@media (prefers-reduced-motion:reduce){
  .pt-card,}

/* ===========================================================================
   Footer layout, rebuilt.
   The template's .footer---wrapper is a flex row with space-between, sized
   around six children. Once the template link columns were cut down to real
   destinations the remaining four bunched together with no gutters (the
   headings ran into each other as "ProductCompanySupportLegal"), links broke
   mid-phrase, and the bottom bar drifted up beside them. Replaced with an
   explicit grid so column widths are deliberate rather than emergent.
   =========================================================================== */
.section.footer .footer---wrapper{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1.15fr;
  grid-column-gap:56px;
  grid-row-gap:44px;
  align-items:start;
  justify-content:normal;
  padding-top:84px;
  padding-bottom:56px;
}
.section.footer .footer---company{min-width:0;grid-row-gap:18px;}
.section.footer .footer---company p{margin:0;font-size:14.5px;line-height:1.65;}

.section.footer .footer---links{min-width:0;grid-row-gap:13px;}
.section.footer .footer---links p{
  margin:0 0 5px;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#a89f98;
}
.section.footer .footer---links a{
  font-size:14.5px;line-height:1.35;color:#6b625c;white-space:nowrap;
  transition:color .2s ease;
}
.section.footer .footer---links a:hover{color:#1a130f;}

.section.footer .line{margin:0;}
.section.footer .footer---bottom{
  width:100%;flex-flow:row;justify-content:space-between;align-items:center;
  padding-top:26px;padding-bottom:34px;
}
.section.footer .footer---bottom-links{display:flex;align-items:center;gap:20px;}
.section.footer .footer---bottom p{margin:0;font-size:13.5px;}

/* Log in sits beside Request a demo; outline so the demo CTA stays primary. */
.nav-login{margin-right:10px;}

@media screen and (max-width:991px){
  .section.footer .footer---wrapper{grid-template-columns:1fr 1fr;grid-column-gap:40px;padding-top:64px;}
  .section.footer .footer---company{grid-column:1 / -1;}
}
@media screen and (max-width:479px){
  .section.footer .footer---wrapper{grid-template-columns:1fr;}
  .section.footer .footer---bottom{flex-flow:column;align-items:flex-start;gap:10px;}
  .nav-login{display:none;}
}

/* ===========================================================================
   Header: full-bleed bar instead of a floating pill.
   The template floated a 1360px rounded panel inside a padded fixed bar, so
   the header stopped short of the viewport edges and sat ~10px down from the
   top. Now the bar itself carries the surface edge to edge and sits flush,
   while the content stays on the same 1360px measure as every other section.
   =========================================================================== */
.navbar{
  padding:0;
  background-color:var(--_🎨-color---light--light-orange,#f9f4f2);
  border-bottom:1px solid rgba(17,17,17,.08);
}
/* the rounded panel was the pill; the bar is the surface now */
.navbar---background-wrapper{padding:0;}
.navbar---background{border-radius:0;max-width:none;background-color:transparent;}
.navbar---wrapper{padding:12px 0;}
.navbar .container{padding-left:40px;padding-right:40px;}

/* Login and Request a demo read as one control group */
.button-wrapper.navigation{display:flex;align-items:center;grid-column-gap:8px;column-gap:8px;}
.nav-login{margin-right:0;}

@media screen and (max-width:767px){
  .navbar .container{padding-left:20px;padding-right:20px;}
}

/* --- Header surface: white ------------------------------------------------ */
.navbar{background-color:#fff;}

/* --- Drop the Lora italic emphasis ---------------------------------------
   .italic swapped the face to Lora italic mid-sentence. Inheriting the
   parent's family and normal style keeps the markup untouched while the
   emphasis carries on weight alone (.italic.bold still sets bold). */
.italic{font-family:inherit;font-style:normal;}

/* --- Descenders were being clipped ---------------------------------------
   .gradient paints via background-clip:text, so the glyphs are only visible
   where the element's own box is painted. Line-height sat below the font's
   natural line box (by 6px on the 56px hero, 5px at 40px), so anything
   reaching below the baseline lost its paint: the g in "adding headcount",
   the f in "source of truth", the p in "operation". Extend the paint box and
   pull the same amount back off the margin so layout is unchanged. */
.gradient{padding-bottom:.16em;}
/* .cst-h1 sets its own bottom margin; the padding above adds to it, so trim
   the declared value to keep the gap under the case study headline as it was. */
.cst-h1.gradient{margin-bottom:15px;}


/* ===========================================================================
   ROI calculator (/roi-calculator)
   Same inputs and arithmetic as the original tool, rebuilt on this site's
   language: cream hero, white surface, hairline cards, Lora headings, one
   near-black panel carrying the headline figure. Orange is reserved for
   values and states, never used as a background wash.
   =========================================================================== */
.section.roi-hero{background-color:var(--_🎨-color---light--light-orange,#f9f4f2);padding-top:156px;padding-bottom:60px;}
.roi-hero-in{max-width:760px;margin:0 auto;text-align:center;}
.roi-h1{font-family:var(--_📕-fonts---main);font-weight:600;font-size:46px;line-height:1.1;letter-spacing:-.028em;margin:0 0 20px;}
.roi-lede{margin:0 auto;max-width:60ch;}

.section.roi-main{background:#fff;padding-top:44px;padding-bottom:96px;}
.roi-grid{display:grid;grid-template-columns:1.12fr .88fr;grid-column-gap:28px;align-items:start;}

/* ---- inputs ---- */
.roi-panel{background:#fff;border:1px solid rgba(17,17,17,.10);border-radius:20px;box-shadow:0 1px 3px rgba(26,19,15,.04);overflow:hidden;}
.roi-sec{padding:26px 28px;}
.roi-sec+.roi-sec{border-top:1px solid rgba(17,17,17,.08);}
.roi-legend{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.roi-ic{width:34px;height:34px;border-radius:10px;background:rgba(226,116,43,.13);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.roi-ic svg{width:18px;height:18px;fill:none;stroke:var(--roi-orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.roi-legend h3{font-family:var(--_📕-fonts---main);font-weight:600;font-size:18px;color:#1a130f;margin:0;line-height:1.2;}
.roi-legend small{display:block;color:#8c837c;font-size:13px;margin-top:3px;}

.roi-field{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0;}
.roi-field label{font-size:14.5px;color:#3a312b;line-height:1.4;flex:1;}
.roi-field label .q{display:block;color:#a89f98;font-size:12.5px;font-style:normal;margin-top:2px;}
.roi-inp{position:relative;display:flex;align-items:center;flex:0 0 auto;}
.roi-inp .pre,.roi-inp .post{position:absolute;font-size:13px;color:#a89f98;font-style:normal;pointer-events:none;}
.roi-inp .pre{left:12px;} .roi-inp .post{right:12px;}
.roi-panel input[type=number]{width:138px;padding:10px 12px;border:1px solid rgba(17,17,17,.12);border-radius:10px;
  font:inherit;font-size:14.5px;font-weight:600;color:#1a130f;text-align:right;background:#fcfbfa;outline:none;
  transition:border-color .15s,box-shadow .15s;}
.roi-panel input[type=number].hasPre{padding-left:24px;}
.roi-panel input[type=number].hasPost{padding-right:38px;}
.roi-panel input[type=number]:focus{border-color:var(--roi-orange);box-shadow:0 0 0 3px rgba(226,116,43,.18);}
.roi-panel input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:rgba(17,17,17,.10);outline:none;cursor:pointer;}
.roi-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--roi-orange);border:3px solid #fff;
  box-shadow:0 1px 5px rgba(26,19,15,.28);cursor:pointer;}
.roi-panel input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--roi-orange);border:3px solid #fff;box-shadow:0 1px 5px rgba(26,19,15,.28);cursor:pointer;}
.roi-panel input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(226,116,43,.22);}
.roi-range{margin:16px 0 4px;}
.roi-range .top{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:8px;color:#3a312b;}
.roi-range .top b{color:var(--roi-orange);}

.roi-band{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;
  padding:14px 18px;background:#17110d;border-radius:12px;}
.roi-band .k{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:#9a8f87;}
.roi-band .v{font-family:var(--_📕-fonts---main);font-size:22px;font-weight:700;color:var(--roi-orange);}

.roi-segwrap{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0 4px;flex-wrap:wrap;}
.roi-segwrap .cap{font-size:13.5px;color:#8c837c;font-weight:600;}
.roi-seg{display:inline-flex;background:#f2eeec;border-radius:11px;padding:3px;gap:3px;}
.roi-seg button{border:none;background:none;font:inherit;font-size:13px;font-weight:600;color:#8c837c;
  padding:8px 14px;border-radius:9px;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s;}
.roi-seg button:hover{color:#1a130f;}
.roi-seg button.on{background:#fff;color:var(--roi-orange);box-shadow:0 1px 4px rgba(26,19,15,.12);}
.roi-help{font-size:13px;color:#6b625c;background:#faf7f5;border-radius:10px;padding:11px 13px;margin:12px 0 4px;line-height:1.55;}
.roi-help b{color:#1a130f;font-weight:600;}

.roi-adv{border-top:1px solid rgba(17,17,17,.08);}
.roi-adv summary{padding:18px 28px;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#8c837c;list-style:none;}
.roi-adv summary::-webkit-details-marker{display:none;}
.roi-adv summary::after{content:"+";float:right;font-size:15px;line-height:1;}
.roi-adv[open] summary{color:var(--roi-orange);}
.roi-adv[open] summary::after{content:"–";}
.roi-adv .inner{padding:0 28px 22px;}

/* ---- results ---- */
.roi-results{position:sticky;top:88px;}
.roi-total{background:#17110d;border-radius:20px;padding:28px;box-shadow:0 16px 40px rgba(26,19,15,.18);}
.roi-total .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;color:#9a8f87;}
.roi-total .big{font-family:var(--_📕-fonts---main);font-size:46px;font-weight:600;letter-spacing:-.032em;
  line-height:1;margin:10px 0 6px;color:var(--roi-orange);}
.roi-total .sub{color:#a89f98;font-size:13.5px;}
.roi-bars{margin-top:22px;display:flex;flex-direction:column;gap:11px;}
.roi-bars .bar{display:flex;align-items:center;gap:12px;font-size:12.5px;color:#e8e0da;}
.roi-bars .lab{width:104px;flex:none;}
.roi-bars .track{flex:1;height:8px;background:rgba(255,255,255,.13);border-radius:4px;overflow:hidden;}
.roi-bars .fill{display:block;height:100%;border-radius:4px;background:var(--roi-orange);transition:width .45s cubic-bezier(.33,0,.2,1);}
.roi-bars .val{width:84px;text-align:right;font-weight:600;color:#fff;}
.roi-pot{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);}
.roi-pot .pk{font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;color:#9a8f87;}
.roi-pot .pv{font-family:var(--_📕-fonts---main);font-size:22px;font-weight:700;margin-top:4px;color:var(--roi-orange);}
.roi-pot .ps{font-size:12.5px;color:#a89f98;margin-top:3px;}

.roi-out{background:#fff;border:1px solid rgba(17,17,17,.10);border-radius:16px;margin-top:16px;overflow:hidden;box-shadow:0 1px 3px rgba(26,19,15,.04);}
.roi-out .h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(17,17,17,.08);}
.roi-out .h h4{font-family:var(--_📕-fonts---main);font-size:16px;font-weight:600;color:#1a130f;margin:0;}
.roi-out .h .amt{margin-left:auto;font-size:18px;font-weight:600;color:var(--roi-orange);}
.roi-out .rows{padding:4px 18px 14px;}
.roi-li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;
  border-bottom:1px solid rgba(17,17,17,.07);font-size:13.5px;}
.roi-li:last-child{border-bottom:none;}
.roi-li .desc{color:#3a312b;}
.roi-li .desc b{color:#1a130f;font-weight:600;}
.roi-li .desc .sub{display:block;font-style:normal;font-size:12px;color:#8c837c;margin-top:4px;line-height:1.5;}
.roi-li .n{font-weight:600;white-space:nowrap;color:#1a130f;}
.roi-li.muted .desc,.roi-li.muted .n{color:#8c837c;font-weight:500;font-size:12.5px;}
.roi-pill{display:inline-block;background:rgba(226,116,43,.14);color:var(--roi-orange);
  font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;margin-left:6px;}
.roi-tag{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;
  border-radius:5px;margin-left:7px;vertical-align:middle;}
.roi-tag.saved{background:#e6f4ec;color:#1f8f5c;}
.roi-tag.pot{background:rgba(226,116,43,.14);color:var(--roi-orange);}

.roi-toggle{display:flex;align-items:center;gap:11px;margin-top:16px;padding:15px 17px;background:#fff;
  border:1px dashed rgba(17,17,17,.16);border-radius:14px;font-size:13.5px;color:#3a312b;cursor:pointer;}
.roi-toggle input{width:17px;height:17px;accent-color:var(--roi-orange);}
.roi-card{margin-top:14px;display:none;}
.roi-card.show{display:block;}
.roi-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.roi-boxes .box{background:#fff;border:1px solid rgba(17,17,17,.10);border-radius:12px;padding:14px 12px;text-align:center;}
.roi-boxes .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#8c837c;}
.roi-boxes .v{font-family:var(--_📕-fonts---main);font-size:20px;font-weight:600;margin-top:5px;color:#1a130f;}
.roi-boxes .box.win .v{color:var(--roi-orange);}
.roi-return{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:10px;
  padding:14px 17px;background:#17110d;border-radius:12px;font-size:13.5px;font-weight:600;color:#fff;}
.roi-return i{display:block;font-style:normal;font-size:11.5px;color:#9a8f87;font-weight:500;margin-top:2px;}
.roi-return b{font-family:var(--_📕-fonts---main);font-weight:600;font-size:24px;color:var(--roi-orange);}
.roi-could{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:10px;
  padding:14px 17px;background:rgba(226,116,43,.10);border-radius:12px;font-size:13.5px;font-weight:600;color:#7a4a22;}
.roi-could i{display:block;font-style:normal;font-size:11.5px;color:#a07a58;font-weight:500;margin-top:2px;}
.roi-could b{font-size:18px;color:var(--roi-orange);}
.roi-note{font-size:12px;color:#8c837c;margin:14px 0 0;line-height:1.6;}

.roi-cta{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;width:100%;
  padding:16px;border:none;border-radius:14px;background:#17110d;color:#f9f4f2;font:inherit;font-weight:600;
  font-size:15px;cursor:pointer;transition:background .2s,transform .12s;}
.roi-cta:hover{background:#000;transform:translateY(-1px);}

@media screen and (max-width:991px){
  .roi-grid{grid-template-columns:1fr;grid-row-gap:28px;}
  .roi-results{position:static;}
  .roi-h1{font-size:36px;}
}
@media screen and (max-width:479px){
  .roi-sec{padding:22px 20px;}
  .roi-adv summary,.roi-adv .inner{padding-left:20px;padding-right:20px;}
  .roi-field{flex-direction:column;align-items:flex-start;gap:8px;}
  .roi-panel input[type=number]{width:100%;}
  .roi-inp{width:100%;}
  .roi-boxes{grid-template-columns:1fr;}
  .roi-total .big{font-size:38px;}
}

/* ---- print report ---- */
#report{display:none;}
@media print{
  .navbar,.section.roi-hero,.section.roi-main,.section.footer{display:none !important;}
  #report{display:block !important;}
  @page{margin:0;}
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}
#report{color:#1a130f;}
#report .rpTop{background:#17110d;color:#f9f4f2;padding:30px 44px;display:flex;align-items:center;justify-content:space-between;}
#report .rpTop .l{font-family:var(--_📕-fonts---main);font-weight:600;font-size:21px;}
#report .rpTop .tag{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#c08a63;font-weight:700;}
#report .rpBody{padding:32px 44px 0;}
#report h2{font-family:var(--_📕-fonts---main);font-size:27px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px;}
#report .rpMeta{color:#8c837c;font-size:12.5px;margin-bottom:22px;}
#report .rpHero{display:flex;gap:14px;margin-bottom:12px;}
#report .rpHero .card{flex:1;border-radius:14px;padding:18px 20px;border:1px solid rgba(17,17,17,.10);}
#report .rpHero .card.save{background:rgba(226,116,43,.10);}
#report .rpHero .card.earn{background:#faf7f5;}
#report .rpHero .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#8c837c;}
#report .rpHero .v{font-family:var(--_📕-fonts---main);font-size:33px;font-weight:700;letter-spacing:-.02em;margin-top:5px;color:var(--roi-orange);}
#report .rpHero .s{font-size:11px;color:#8c837c;margin-top:3px;}
#report .rpReturn{display:flex;align-items:center;justify-content:space-between;background:#17110d;color:#fff;
  border-radius:14px;padding:16px 22px;margin-bottom:26px;}
#report .rpReturn .lab{font-size:14px;font-weight:600;}
#report .rpReturn .lab small{display:block;color:#9a8f87;font-size:11px;font-weight:500;margin-top:2px;}
#report .rpReturn .big{font-family:var(--_📕-fonts---main);font-size:32px;font-weight:700;color:var(--roi-orange);}
#report .rpCols{display:flex;gap:38px;}
#report .rpCols .col{flex:1;}
#report .rpH{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--roi-orange);font-weight:700;margin-bottom:8px;}
#report .rpRow{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(17,17,17,.08);font-size:13px;}
#report .rpRow span:first-child{color:#8c837c;}
#report .rpRow span:last-child{font-weight:600;}
#report .rpRow.tot{border-bottom:none;border-top:2px solid #1a130f;margin-top:4px;padding-top:9px;font-size:14px;}
#report .rpRow.pot span:last-child{color:var(--roi-orange);}
#report .rpFoot{margin:28px 44px 0;border-top:1px solid rgba(17,17,17,.08);padding:14px 0 30px;font-size:10px;color:#8c837c;line-height:1.6;}

/* ===========================================================================
   ROI calculator, colour discipline.
   The first pass had 20 orange text elements and 15 orange fills on one page,
   so nothing was emphasised: every figure shouted equally. Orange is now
   reserved for two jobs only, the upside figure and interactive affordances.
   Every supporting number is ink, which is what actually creates hierarchy.

   It was also an accessibility problem. var(--roi-orange) on white is 3.33:1, under the
   4.5:1 AA needs for small text, and it was being used on pills and labels.
   Small orange text now uses #b8410a at 5.53:1.
   =========================================================================== */
:root{--roi-orange:#e2742b;--roi-accent-text:#bf5220;}

/* the headline figure carries by scale and contrast, not colour */
.roi-total .big{color:#fdfbfa;}
.roi-band .v{color:#fdfbfa;}
.roi-bars .fill{background:rgba(249,244,242,.62);}
.roi-bars .val{color:#f2ece8;}

/* the one accent left on the dark panel is the upside */
.roi-pot .pv{color:var(--roi-orange);}

/* supporting figures read as ink */
.roi-out .h .amt{color:#1a130f;}
.roi-range .top b{color:#1a130f;font-weight:600;}
.roi-seg button.on{color:#1a130f;}
.roi-adv[open] summary{color:#1a130f;}
.roi-boxes .box.win .v{color:#1a130f;}
.roi-legend h3{color:#1a130f;}

/* informational pills are neutral; only the potential tag stays warm */
.roi-pill{background:#f1eeeb;color:#6b625c;}
.roi-tag.saved{background:#eef1ee;color:#5f6b62;}
.roi-tag.pot{background:rgba(226,116,43,.13);color:var(--roi-accent-text);}
.roi-could{color:#6b625c;}
.roi-could i{color:#a89f98;}
.roi-could b{color:var(--roi-accent-text);}
.roi-note{color:#8c837c;}

/* interactive affordances keep the brand orange */
.roi-panel input[type=number]:focus{border-color:var(--roi-orange);}
.roi-return b{color:var(--roi-orange);}

/* ===========================================================================
   Hero media.
   The source video is 1600x1200, a 4:3 frame, so at the full container width
   it rendered 791px tall: 97% of a 813px viewport for the video alone, and a
   hero section of 1540px, nearly two screens before the next section began.
   Narrowed and cropped to a landscape frame so the hero is one screen plus a
   deliberate peek, which is what invites the scroll rather than blocking it.
   =========================================================================== */
.section.hero-c{padding-bottom:64px;}
/* The montage is a two-row composition. A 16:9 crop sliced the lower row in
   half, which reads as a mistake rather than a deliberate cut, so it stays
   whole and comes down in scale instead. */
.hero-c---image-wrapper{max-width:780px;}
.hero-c---image{width:100%;height:auto;display:block;}
/* the logo strip carried a huge top pad meant for a much taller hero */
.hero-c---logos-wrapper{padding-top:56px;}

/* ===========================================================================
   Blog listing.
   Cards come from BlogCard.astro using the Webflow class names, so they are
   styled here rather than in the page's scoped block. Real card surfaces, a
   lead story for the newest post, sans titles and a muted category label:
   orange was being spent on a word that is navigation, not emphasis.
   =========================================================================== */
.collection-list-blog{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:26px;grid-row-gap:28px;}

.blog-list---block{
  display:flex;flex-direction:column;background:#fff;border:1px solid rgba(17,17,17,.09);
  border-radius:18px;overflow:hidden;text-decoration:none;box-shadow:0 1px 3px rgba(26,19,15,.04);
  transition:box-shadow .32s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1),border-color .32s;
}
.blog-list---block:hover{box-shadow:0 18px 40px rgba(26,19,15,.09);transform:translateY(-3px);border-color:rgba(17,17,17,.15);}
/* Same landscape band as the homepage and the related cards. At 16/10 a 3:1
   cover lost nearly half its width, cutting the wording baked into several
   of the banners mid-letter. */
.blog-block---image{aspect-ratio:21/8;height:auto;max-height:none;overflow:hidden;background:#f2ede9;flex:0 0 auto;}
.blog-block---image .basic-image{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);}
.blog-list---block:hover .blog-block---image .basic-image{transform:scale(1.035);}
.blog-block---text{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;}
.blog-list---block .label-wrapper{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.blog-list---block .label-wrapper p{margin:0;font-size:12.5px;color:#8c837c;}
.blog-list---block .label-dot{width:3px;height:3px;border-radius:50%;background:#c8bfb8;flex:0 0 auto;}
.blog-list---block .h6{font-family:var(--_📕-fonts---main);font-weight:600;font-size:19.5px;line-height:1.32;
  letter-spacing:-.012em;color:#1a130f;margin:0;}
.blog-list---block .blog-block---heading{display:flex;flex-direction:column;gap:12px;flex:1;}
.blog-list---block .read-time{margin-top:auto;display:flex;align-items:center;gap:7px;color:#8c837c;font-size:12.5px;}

/* the newest post runs full width and reads as the lead */
.collection-list-blog>.blog-list---block:first-child{grid-column:1/-1;flex-direction:row;}
.collection-list-blog>.blog-list---block:first-child .blog-block---image{flex:0 0 54%;aspect-ratio:auto;min-height:330px;}
.collection-list-blog>.blog-list---block:first-child .blog-block---text{justify-content:center;padding:40px 44px;}
.collection-list-blog>.blog-list---block:first-child .h6{font-size:29px;line-height:1.2;letter-spacing:-.022em;}

@media screen and (max-width:991px){
  .collection-list-blog{grid-template-columns:repeat(2,1fr);}
  .collection-list-blog>.blog-list---block:first-child{flex-direction:column;}
  .collection-list-blog>.blog-list---block:first-child .blog-block---image{flex:none;aspect-ratio:16/10;min-height:0;}
  .collection-list-blog>.blog-list---block:first-child .blog-block---text{padding:24px;}
  .collection-list-blog>.blog-list---block:first-child .h6{font-size:23px;}
}
@media screen and (max-width:600px){.collection-list-blog{grid-template-columns:1fr;}}

/* ===========================================================================
   Feature page: Capture every customer (/features/customer-communications)
   Designed on the site's own conventions rather than a template's: cream and
   white alternating at ~92px, white cards on a 20px radius with a hairline
   and a 1px-3px shadow, the site's own .button components with their hover
   marks, orange reserved for small marks. No dark gradient band.
   =========================================================================== */
.cc-eyebrow{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#8c837c;margin:0 0 18px;}
.cc-dot{width:5px;height:5px;border-radius:50%;background:var(--_🎨-color---other--orange,#ff4d00);flex:0 0 auto;}
.cc-h1{font-family:var(--_📕-fonts---main);font-weight:600;font-size:50px;line-height:1.09;letter-spacing:-.03em;margin:0 0 20px;}
.cc-h2{font-family:var(--_📕-fonts---main);font-weight:600;font-size:33px;line-height:1.18;letter-spacing:-.022em;margin:0;max-width:19ch;}
.cc-head{margin:0 0 48px;max-width:640px;}
.cc-head-p{margin:16px 0 0;}

/* --- 1. hero --- */
.section.cc-hero{background-color:var(--_🎨-color---light--light-orange,#f9f4f2);padding-top:156px;padding-bottom:92px;}
.cc-hero-grid{display:grid;grid-template-columns:1fr .88fr;grid-column-gap:64px;align-items:center;}
.cc-lede{margin:0 0 32px;max-width:46ch;}
.cc-hero .button-wrapper.left{display:flex;flex-wrap:wrap;gap:12px;}

/* the hero asset: one call, handled */
.cc-call{margin:0;background:#fff;border:1px solid rgba(17,17,17,.09);border-radius:20px;overflow:hidden;
  box-shadow:0 14px 40px rgba(26,19,15,.09);}
.cc-call-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid rgba(17,17,17,.07);}
.cc-live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#1a130f;}
.cc-live-dot{width:7px;height:7px;border-radius:50%;background:var(--_🎨-color---other--orange,#ff4d00);
  box-shadow:0 0 0 0 rgba(255,77,0,.45);animation:cc-pulse 2.4s ease-out infinite;}
@keyframes cc-pulse{0%{box-shadow:0 0 0 0 rgba(255,77,0,.45)}70%{box-shadow:0 0 0 7px rgba(255,77,0,0)}100%{box-shadow:0 0 0 0 rgba(255,77,0,0)}}
.cc-time{font-size:12.5px;color:#a89f98;}
.cc-thread{padding:20px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;}
.cc-msg{max-width:88%;display:flex;flex-direction:column;gap:5px;}
.cc-msg p{margin:0;font-size:14.5px;line-height:1.5;padding:11px 14px;border-radius:14px;}
.cc-who{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#b3aaa3;}
.cc-msg--in p{background:#f4f1ef;color:#3a312b;border-top-left-radius:5px;}
.cc-msg--out{align-self:flex-end;align-items:flex-end;}
.cc-msg--out .cc-who{color:#b3541f;}
.cc-msg--out p{background:rgba(255,77,0,.10);color:#1a130f;border-top-right-radius:5px;}
.cc-booked{display:flex;align-items:center;gap:12px;padding:16px 20px;border-top:1px solid rgba(17,17,17,.07);background:#fcfbfa;}
.cc-booked-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,77,0,.11);color:var(--_🎨-color---other--orange,#ff4d00);}
.cc-booked-ic svg{width:14px;height:14px;}
.cc-booked span span{display:block;}
.cc-booked-t{font-size:14px;font-weight:600;color:#1a130f;}
.cc-booked-d{font-size:12.5px;color:#8c837c;margin-top:2px;}

/* --- 2. before and after --- */
.section.cc-compare{background:#fff;padding-top:92px;padding-bottom:92px;}
.cc-compare-grid{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:24px;}
.cc-panel{background:#fff;border:1px solid rgba(17,17,17,.09);border-radius:20px;padding:30px 32px 26px;
  box-shadow:0 1px 3px rgba(26,19,15,.04);}
.cc-panel--after{border-color:rgba(179,84,31,.22);box-shadow:0 10px 30px rgba(179,84,31,.06);}
.cc-panel-k{margin:0 0 22px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a89f98;}
.cc-panel--after .cc-panel-k{color:#b3541f;}
.cc-track{list-style:none;margin:0;padding:0;}
.cc-track li{display:flex;gap:18px;padding:0 0 20px 20px;position:relative;}
.cc-track li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid #d8cfc9;}
.cc-track li::after{content:"";position:absolute;left:4px;top:17px;bottom:0;width:1px;background:rgba(17,17,17,.10);}
.cc-track li:last-child{padding-bottom:0;}
.cc-track li:last-child::after{display:none;}
.cc-panel--after .cc-track li::before{border-color:#c2622c;}
.cc-t{flex:0 0 66px;font-size:12.5px;color:#a89f98;padding-top:1px;}
.cc-e{font-size:15px;line-height:1.5;color:#3a312b;}
.cc-track .cc-end .cc-e{font-weight:600;color:#1a130f;}

/* --- 3. steps --- */
.section.cc-steps{background-color:var(--_🎨-color---light--light-orange,#f9f4f2);padding-top:92px;padding-bottom:92px;}
.cc-step-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:24px;grid-row-gap:24px;}
.cc-card{background:#fff;border:1px solid rgba(17,17,17,.09);border-radius:20px;padding:30px 30px 32px;
  box-shadow:0 1px 3px rgba(26,19,15,.04);transition:box-shadow .35s,transform .35s;}
.cc-card:hover{box-shadow:0 18px 42px rgba(26,19,15,.09);transform:translateY(-3px);}
.cc-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,77,0,.09);color:var(--_🎨-color---other--orange,#ff4d00);margin-bottom:20px;}
.cc-ic svg{width:21px;height:21px;}
.cc-card-t{font-family:var(--_📕-fonts---main);font-weight:600;font-size:19px;line-height:1.3;color:#1a130f;margin:0 0 10px;}
.cc-card-d{font-size:14.5px;line-height:1.62;color:#6b625c;margin:0;}

/* --- 4. capabilities --- */
.section.cc-caps{background:#fff;padding-top:92px;padding-bottom:92px;}
.cc-split{display:grid;grid-template-columns:.82fr 1.18fr;grid-column-gap:72px;align-items:start;}
.cc-split-head p{margin:16px 0 0;max-width:36ch;}
.cc-cap-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-column-gap:32px;grid-row-gap:26px;}
.cc-cap-list li{display:flex;align-items:flex-start;gap:13px;}
.cc-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,77,0,.10);color:var(--_🎨-color---other--orange,#ff4d00);margin-top:1px;}
.cc-check svg{width:13px;height:13px;}
.cc-cap-t{display:block;font-size:15.5px;font-weight:600;color:#1a130f;line-height:1.35;}
.cc-cap-d{display:block;font-size:14px;line-height:1.6;color:#6b625c;margin-top:4px;}

/* --- 5. proof: the homepage customer-story shape, portrait beside the words --- */
.section.cc-proof{background-color:var(--_🎨-color---light--light-orange,#f9f4f2);padding-top:92px;padding-bottom:92px;}
.cc-story{margin:0;display:grid;grid-template-columns:.82fr 1.18fr;background:#fff;
  border:1px solid rgba(17,17,17,.09);border-radius:22px;overflow:hidden;box-shadow:0 6px 24px rgba(26,19,15,.05);}
.cc-story-media{position:relative;min-height:380px;background:#efeae6;}
.cc-story-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 34%;}
.cc-story-body{padding:48px 52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
.cc-story-logo{height:42px;width:auto;max-width:190px;object-fit:contain;display:block;margin:0 0 24px;}
.cc-quote{font-family:var(--_📕-fonts---main);font-weight:500;font-size:25px;line-height:1.44;letter-spacing:-.014em;
  color:#1a130f;margin:0 0 26px;max-width:32ch;background:none;padding:0;border:0;box-shadow:none;}
.cc-attrib{display:flex;flex-direction:column;align-items:flex-start;text-align:left;margin-bottom:26px;}
.cc-name{font-weight:600;font-size:15.5px;color:#1a130f;}
.cc-role{font-size:13.5px;color:#8c837c;margin-top:3px;}
.cc-readmore{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-weight:600;font-size:15px;
  color:#1a130f;text-decoration:none;transition:gap .25s,color .25s;}
.cc-readmore svg{color:#c2622c;}
.cc-readmore:hover{gap:12px;color:#b3541f;}

/* --- 6. faq --- */
.section.cc-faq{background:#fff;padding-top:92px;padding-bottom:104px;}
.cc-inline{color:#b3541f;text-decoration:underline;text-decoration-color:rgba(179,84,31,.3);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s;}
.cc-inline:hover{text-decoration-color:rgba(179,84,31,.75);}
.cc-faq-list{border-top:1px solid rgba(17,17,17,.10);}
.cc-faq-block{border-bottom:1px solid rgba(17,17,17,.10);}
.cc-faq-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;
  font-size:17px;font-weight:600;color:#1a130f;line-height:1.4;}
.cc-faq-head::-webkit-details-marker{display:none;}
.cc-plus{position:relative;flex:0 0 auto;width:18px;height:18px;}
.cc-plus::before,.cc-plus::after{content:"";position:absolute;left:50%;top:50%;background:#1a130f;border-radius:1px;
  transition:transform .28s cubic-bezier(.4,0,.2,1);}
.cc-plus::before{width:13px;height:1.6px;transform:translate(-50%,-50%);}
.cc-plus::after{width:1.6px;height:13px;transform:translate(-50%,-50%);}
.cc-faq-block[open] .cc-plus::after{transform:translate(-50%,-50%) rotate(90deg);}
.cc-faq-body{padding:0 0 24px;max-width:66ch;}
.cc-faq-body p{margin:0;font-size:16px;line-height:1.7;color:#6b625c;}

@media screen and (max-width:991px){
  .cc-hero-grid,.cc-compare-grid,.cc-split{grid-template-columns:1fr;grid-row-gap:32px;}
  .cc-step-grid{grid-template-columns:1fr;}
  .cc-cap-list{grid-template-columns:1fr;}
  .cc-h1{font-size:38px;}
  .cc-h2{max-width:none;}
  .cc-story{grid-template-columns:1fr;}
  .cc-story-media{min-height:280px;}
  .cc-story-body{padding:32px 30px 34px;}
}
@media screen and (max-width:600px){
  .section.cc-hero{padding-top:112px;}
  .cc-h1{font-size:31px;}
  .cc-quote{font-size:21px;}

}

/* --- hero card: the call plays out, rather than sitting still ------------
   Each turn lands in sequence, the booking confirms, then the whole thing
   holds for four seconds before repeating. Slow enough to read, and it
   demonstrates the one thing the page is claiming. */
.cc-msg{opacity:0;transform:translateY(6px);animation:cc-turn 9s cubic-bezier(.32,0,.24,1) infinite;
  animation-delay:calc(var(--i) * 1.15s);}
@keyframes cc-turn{0%{opacity:0;transform:translateY(6px)}6%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px)}}
.cc-booked{opacity:0;animation:cc-confirm 9s cubic-bezier(.32,0,.24,1) infinite;animation-delay:3.9s;}
@keyframes cc-confirm{0%{opacity:0}6%,66%{opacity:1}78%,100%{opacity:0}}


/* --- who it already answers for ----------------------------------------- */
.cc-logos{margin-top:56px;padding-top:0;}
.cc-logos .section---logo-slide{opacity:.86;}

@media (prefers-reduced-motion:reduce){
  .cc-msg,.cc-booked{animation:none;opacity:1;transform:none;}
  .cc-live-dot{animation:none;}
}

/* ===========================================================================
   Standout cards: product screenshots.
   Framed rather than cropped tight. Each shot sits inset on a warm ground at
   roughly full width, rounded with a hairline, and runs off the bottom edge of
   the frame. That shows the whole width of the interface instead of a zoomed
   corner, and the overflow reads as a screen continuing rather than a crop.
   =========================================================================== */
/* These cards carry illustrations, not UI captures. A screenshot wants to be
   anchored top and bleed off the bottom, so the interface stays legible; an
   illustration wants to be seen whole. Contained and centred, with tight
   padding so the artwork still fills the tile rather than floating in it.
   The mat is white rather than the warm gradient because these illustrations
   are drawn on white: against a tinted mat each one read as a pasted-in
   rectangle with visible edges. */
.section.solea-standout .so-media{padding:10px 14px;height:224px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  background:#fff;border-bottom:1px solid rgba(17,17,17,.07);}
.section.solea-standout .so-media img{
  position:static;width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
  border:0;border-radius:0;box-shadow:none;}

/* ===========================================================================
   Webflow's base sets a:hover{opacity:.6}, which is a reasonable default for a
   text link and wrong for a card: hovering anywhere faded the whole surface,
   image and all. Card-shaped links opt out. Their hover feedback lives on the
   affordance inside them instead.
   =========================================================================== */
.blog-list---block:hover,
.ni-card:hover{opacity:1;}


/* ===========================================================================
   FAQ (/features), rebuilt.
   The template shipped each question as its own floating white card with a
   heavy radius and a drop shadow, so five related questions read as five
   unrelated objects, and the short heading column left a tall empty void
   beside them. This is one continuous list separated by hairlines, with the
   heading column made sticky so it travels with the list instead of stranding
   whitespace. Built on native <details>, so it opens without JavaScript and
   is keyboard and screen-reader accessible by default.
   =========================================================================== */
.section.faq{background-color:var(--_🎨-color---light--light-orange,#f9f4f2);padding-top:104px;padding-bottom:112px;}
.faq-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);grid-column-gap:80px;align-items:start;}
.faq-aside-in{position:sticky;top:104px;}
.faq-aside .body-s{margin:0 0 14px;}
.faq-title{font-family:var(--_📕-fonts---main);font-weight:600;font-size:38px;line-height:1.12;letter-spacing:-.028em;color:#1a130f;margin:0 0 16px;}
.faq-sub{color:#6b625c;font-size:16px;line-height:1.6;margin:0 0 24px;max-width:34ch;}
.faq-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:#1a130f;text-decoration:none;transition:gap .25s;}
.faq-link svg{color:var(--_🎨-color---other--orange,#ff4d00);transition:transform .25s cubic-bezier(.4,0,.2,1);}
.faq-link:hover{gap:13px;opacity:1;}
.faq-link:hover svg{transform:translateX(2px);}

/* One list, hairline separated. No cards, no shadows. */
.faq-list{border-top:1px solid rgba(17,17,17,.12);}
.faq-item{border-bottom:1px solid rgba(17,17,17,.12);}
.faq-q{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;
  padding:24px 0;cursor:pointer;list-style:none;
  font-family:var(--_📕-fonts---main);font-weight:600;font-size:18.5px;line-height:1.4;
  letter-spacing:-.012em;color:#1a130f;transition:color .2s ease;}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:hover{color:var(--_🎨-color---other--orange,#ff4d00);}
.faq-q:focus-visible{outline:2px solid var(--_🎨-color---other--orange,#ff4d00);outline-offset:4px;border-radius:4px;}
.faq-q-text{min-width:0;}

/* Plus that becomes a minus. Two bars, one rotates away. */
.faq-mark{position:relative;flex:none;width:20px;height:20px;margin-top:3px;}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:1.5px;border-radius:2px;background:#1a130f;
  transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.4,0,.2,1),background .2s ease;}
.faq-mark::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq-item[open] .faq-mark::after{transform:translate(-50%,-50%) rotate(0deg);}
.faq-item[open] .faq-mark::before,.faq-item[open] .faq-mark::after{background:var(--_🎨-color---other--orange,#ff4d00);}
.faq-q:hover .faq-mark::before,.faq-q:hover .faq-mark::after{background:var(--_🎨-color---other--orange,#ff4d00);}

/* Animate to the answer's real height rather than a guessed max-height. */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1);}
.faq-item[open] .faq-a{grid-template-rows:1fr;}
.faq-a-in{min-height:0;overflow:hidden;}
.faq-a-in p{margin:0;padding:0 60px 26px 0;color:#5f574f;font-size:16px;line-height:1.68;}

@media screen and (max-width:991px){
  .faq-grid{grid-template-columns:1fr;grid-row-gap:40px;}
  .faq-aside-in{position:static;}
  .faq-title{font-size:31px;}
  .faq-a-in p{padding-right:0;}
  .section.faq{padding-top:80px;padding-bottom:84px;}
}
@media (prefers-reduced-motion:reduce){
  .faq-a,.faq-mark::before,.faq-mark::after{transition-duration:.01ms !important;}
}

/* ---------------------------------------------------------------------------
   Logo marquee edge fades, removed.
   These masks exist to hide logos entering and leaving a scrolling strip, but
   nothing animates this one: there is no keyframes rule and no Webflow
   interaction bound to it, so it is a static row. The masks were simply sitting
   on top of the first and last logos (Horizon and Recon) and washing them out.
   --------------------------------------------------------------------------- */
.section.hero-c .gradient-logo-slider{display:none;}

/* Anchor target: the fixed navbar would otherwise cover the heading when
   "See features" jumps here. */
#modules{scroll-margin-top:86px;}

/* Able Pest Management: the lockup is a mark plus two stacked lines of type, so
   it needs less height than the wordmark-only logos to read at the same weight. */
.logo-slider-inside .brand-logo.brand-able{height:54px;}

/* Customer logo strip on phones.
   Each logo is set by height, but the logos run from a near-square lockup (Able,
   1.44:1) to wide wordmarks (Aloha 2.53:1, Compass 2.66:1), so equal heights do
   not read as equal size. The desktop heights are hand-tuned for that and scale
   to mobile at roughly 0.79. Horizon and Recon were missing from the mobile
   media query altogether, so they kept their full desktop height while
   everything around them shrank, Horizon towering over the rest of the row.
   These restore the intended ratio. */
@media screen and (max-width:767px){
  .logo-slider-inside .brand-logo.brand-able   {height:42px;}
  .logo-slider-inside .brand-logo.brand-horizon{height:40px;}
  .logo-slider-inside .brand-logo.brand-recon  {height:36px;}
}

/* Customer-story logo.
   A global img rule was forcing this to its 210px max-width, and because the
   lockup only fills ~80px of that, object-fit:contain centred it inside the box
   — so the logo sat adrift in the middle of the column while every line of text
   beside it was flush left. Let the box hug the image, and pin the artwork left
   in case the width is ever constrained again. */
.cs-content .cs-logo{
  width:auto;
  max-width:190px;
  height:52px;
  object-fit:contain;
  object-position:left center;
  margin:0 0 26px;
}


/* The marquee puts a dotted divider before every logo, including the first, so
   the row opened with a rule hanging off Horizon's left with nothing to divide.
   Dividers belong between logos only. */
.logo-slider-inside .line-up:first-child{display:none;}

/* One logo row, centred. The template ships two identical rows so a marquee can
   loop, but nothing animates this strip, and with the edge masks gone the second
   row's first logo (Horizon again) was simply visible on the right. */
.section.hero-c .logo-slider{justify-content:center;}
.section.hero-c .logo-slider-inside{justify-content:center;width:100%;}

/* Below the desktop breakpoint the six logos are wider than the screen, and a
   centred row just clipped both ends (only two logos were visible on a phone).
   Wrap them onto as many rows as they need and drop the dividers, which only
   make sense on a single line. */
@media screen and (max-width:900px){
  .section.hero-c .logo-slider-inside{flex-wrap:wrap;column-gap:34px;row-gap:22px;}
  .section.hero-c .logo-slider-inside .line-up{display:none;}
  .section.hero-c .section---logo-slide{padding-left:20px;padding-right:20px;}
}

/* ===========================================================================
   Case study: vertical rhythm on tablet and phone.

   The page had no section-padding overrides below desktop, so 96px edges that
   look considered on a wide screen became most of a phone screen. It reads
   worst between the pillars and the outcome: both sections share the same
   #f9f4f2 background, so their facing paddings (96 + 92) do not read as two
   section edges, they merge into one 188px band of empty colour above Ian's
   quote. Where two same-background sections meet, the pair is treated as a
   single gap and split, rather than each keeping a full edge.
   =========================================================================== */
@media screen and (max-width:991px){
  .section.cst-hero{padding-bottom:60px;}
  .section.cst-story{padding-top:72px;padding-bottom:72px;}
  .section.cst-pillars{padding-top:72px;padding-bottom:44px;}
  .section.cst-outcome{padding-top:48px;padding-bottom:76px;}
}
@media screen and (max-width:767px){
  .section.cst-hero{padding-bottom:48px;}
  .section.cst-story{padding-top:60px;padding-bottom:60px;}
  .section.cst-pillars{padding-top:60px;padding-bottom:32px;}
  .section.cst-outcome{padding-top:36px;padding-bottom:64px;}
  /* the quote is the loudest thing on the page; it does not need 30px under it
     as well as the section edge */
  .cst-voice-q{margin-bottom:22px;}
}

/* Logo strip wrap on phones.
   Flex wrap packed the six logos 2 / 3 / 1, leaving Recon stranded on its own
   row, which reads as a mistake rather than a layout. A three-column grid gives
   two even rows of three. The horizontal padding comes down to 12px at phone
   width so the widest mark (Aloha, about 101px) keeps clear air in its cell
   instead of touching its neighbours. */
@media screen and (max-width:767px){
  .section.hero-c .logo-slider-inside{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    column-gap:14px;
    row-gap:26px;
    place-items:center;
  }
}
@media screen and (max-width:479px){
  .section.hero-c .section---logo-slide{padding-left:12px;padding-right:12px;}
}

/* Below 360px a three-up grid gives 101px cells, which the widest mark (Aloha,
   about 101px) has no clearance in. Two columns instead: three tidy rows beats
   six colliding logos on the small handsets that are still out there. */
@media screen and (max-width:359px){
  .section.hero-c .logo-slider-inside{grid-template-columns:repeat(2,1fr);column-gap:18px;}
}

/* Compass Pest Management replaces Moxie in the customer strip.
   At 231x87 it is 2.66:1, so it sits with the wide wordmarks (Horizon 2.41,
   Aloha 2.53) rather than with the 3.76:1 wordmark it replaces, and takes a
   height close to theirs. On phones it is held to 36px rather than the 38px the
   desktop ratio implies: at 38px the mark is 101px wide, exactly the width of a
   grid cell at 360px, so it would touch its neighbours. */
.logo-slider-inside .brand-logo.brand-compass{height:48px;}
@media screen and (max-width:767px){
  .logo-slider-inside .brand-logo.brand-compass{height:36px;}
}

/* ===========================================================================
   Demo page: confirmation panel and mobile order.
   =========================================================================== */

/* The confirmation inherited Webflow's .success-message, which paints the
   system "success" green across a page whose entire palette is warm cream on a
   dark gradient. It read as an alert box bolted onto the design. This makes it
   the same frosted card as the form it replaces, so the panel looks like the
   next state of the card rather than a different component. */
.section.demo-page #demo-success{
  width:100%;
  padding:34px 28px 30px;
  border:0 solid #f9f4f233;
  border-top-width:1px;
  border-radius:16px;
  background-color:var(--_🎨-color---light--light-orange-10,rgba(249,244,242,.1));
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  font-weight:400;
}
.section.demo-page .demo-success-in{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.section.demo-page .demo-success-title{
  margin:0;
  font-size:25px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--_🎨-color---light--light-orange,#f9f4f2);
}
.section.demo-page .demo-success-body{
  margin:0;
  font-size:16px;
  line-height:1.55;
  color:var(--_🎨-color---light--light-orange-60,rgba(249,244,242,.6));
}
.section.demo-page #demo-success .form-button{margin-top:6px;}

/* The contact line sits under the button, so it reads as a quieter alternative
   to the main action rather than competing with it. A hairline above it does
   the separating, which keeps the orange for the things that are actually
   interactive. */
.section.demo-page .demo-success-help{
  width:100%;
  margin:8px 0 0;
  padding-top:16px;
  border-top:1px solid #f9f4f21f;
  font-size:14px;
  line-height:1.5;
  color:var(--_🎨-color---light--light-orange-60,rgba(249,244,242,.6));
  opacity:1;
}
.section.demo-page .demo-success-help a{
  color:var(--_🎨-color---light--light-orange,#f9f4f2);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:#f9f4f259;
  transition:text-decoration-color .18s ease;
}
.section.demo-page .demo-success-help a:hover{text-decoration-color:#f9f4f2;}

/* Mobile order: headline, then the form, then the supporting detail.
   Stacked, the three "what to expect" blocks ran 378px, so on an 844px screen
   the form began at 866px: a visitor who arrived intending to book had to scroll
   a full screen of reassurance before reaching a single field. The reassurance
   still earns its place, just after the ask rather than in front of it.
   .demo---text becomes display:contents so its two children can be ordered
   against the form, which is its sibling rather than its child. */
@media screen and (max-width:991px){
  .section.demo-page .demo---wrapper{
    flex-flow:column nowrap;
    align-items:stretch;
    gap:34px;
  }
  .section.demo-page .demo---text{display:contents;}
  .section.demo-page .demo---header{order:1;}
  .section.demo-page .form---glass,
  .section.demo-page #demo-success{order:2;}
  .section.demo-page .demo---info-wrapper{order:3;max-width:none;}
}