/*
  Homepage-only marketing sections (stats bar, intro, product cards,
  industry solutions + its quote modal, pricing) — rendered server-side in
  lib/render-homepage.js so they're crawlable, unlike the map/search portal
  itself which loads client-side via XRTPortalLoader.injectPortal() (same
  pattern as a location page, see lib/render-location-page.js) so its raw,
  pre-JS markup is never what a visitor's first paint shows.

  These sections were originally built inside prototypes/questionnaire-v2.html
  and used its own --blue/--green/etc. tokens. Since they now live outside
  the portal (which keeps its own separate, scoped copy of those tokens),
  this file defines that same token set once, at the page's real :root,
  using the production values from /css/xrt-portal-design.css (the
  dark-green Numaya look) rather than v2's own dev-only blue/purple
  defaults — this page has no other stylesheet layering a production
  override on top the way the portal does.
*/
:root{
  --blue:#123d33;--blue-d:#0b2c25;--blue-l:#2f6b5c;--blue-dim:rgba(18,61,51,.08);--blue-b:rgba(18,61,51,.2);
  --green:#c8f36a;--green-d:#123d33;--green-dim:rgba(200,243,106,.15);--green-b:rgba(96,135,39,.28);
  --cream:#eef0e9;--cream-d:#e1e5dc;--bdr:#d9dfd8;--bdr-l:#e9ece8;--txt:#14231e;--white:#ffffff;
  --err:#c53030;--err-dim:rgba(197,48,48,.08);
  --r-sm:9px;--r-md:12px;--r-lg:18px;--r-xl:24px;
  --font-h:'Manrope',sans-serif;--font-b:'DM Sans',sans-serif;
  --shadow-sm:0 2px 8px rgba(11,31,25,.05);--shadow-md:0 15px 45px rgba(11,31,25,.12);--shadow-lg:0 30px 90px rgba(5,20,15,.25);
}
*{box-sizing:border-box}
body{margin:0}

/* ============ Quote-modal base classes ============
   The Industry Solutions "Request a Quote" modal reuses this same generic
   overlay/modal/form look as the portal's own Imagery Request modal, but
   since it now lives outside the portal (for crawlability) it can't rely
   on that portal-scoped copy — these are the same rules, defined once here. */
.lbl{display:block;font-family:var(--font-h);font-size:12px;font-weight:600;letter-spacing:.03em;color:rgba(26,31,46,.65);margin:10px 0 5px}
.inp,.sel{width:100%;font-family:var(--font-b);font-size:14px;padding:9px 12px;border:1px solid var(--bdr);border-radius:var(--r-sm);outline:none;background:#fff;color:var(--txt)}
.inp:focus,.sel:focus{border-color:var(--blue-l);box-shadow:0 0 0 3px var(--blue-dim)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cta{display:inline-block;box-sizing:border-box;width:100%;text-align:center;text-decoration:none;font-family:var(--font-h);font-size:15.5px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--green-d);border:none;border-radius:var(--r-md);padding:14px;cursor:pointer;margin-top:14px;transition:all .15s;box-shadow:var(--shadow-sm)}
.cta:hover{filter:brightness(1.06);box-shadow:var(--shadow-md)}
.cta:disabled{opacity:.45;cursor:not-allowed}
.cta-sub{text-align:center;font-size:11.5px;color:rgba(26,31,46,.5);margin-top:8px}
.err-box{display:none;background:var(--err-dim);border:1px solid rgba(197,48,48,.3);border-radius:var(--r-sm);color:var(--err);font-size:12.5px;padding:9px 12px;margin-top:10px}
.overlay{position:fixed;inset:0;background:rgba(26,31,46,.45);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.open{display:flex}
.modal{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-width:460px;overflow:hidden;max-height:92vh;overflow-y:auto}
.modal-head{background:var(--blue);padding:16px 20px;display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-family:var(--font-h);font-size:16px;font-weight:700;color:#fff}
.modal-x{background:none;border:none;color:rgba(255,255,255,.7);font-size:20px;cursor:pointer;line-height:1}
.modal-x:hover{color:#fff}
.modal-body{padding:18px 20px 22px}
.ctx-box{background:var(--blue-dim);border:1px solid var(--blue-b);border-radius:var(--r-sm);padding:10px 13px;font-size:12.5px;line-height:1.6;margin-bottom:6px}
.ctx-box b{font-family:var(--font-h);color:var(--blue-d)}
.modal .cta{margin-top:16px}
.sent{display:none;text-align:center;padding:26px 8px 14px}
.sent .big{font-size:38px}
.sent h4{font-family:var(--font-h);font-size:18px;font-weight:800;color:var(--blue-d);margin:10px 0 6px}
.sent p{font-size:13.5px;color:rgba(26,31,46,.65);line-height:1.6}

/* Portal-loading placeholder, shown in raw source before JS grafts the
   map/search workspace in — same convention as a location page's
   .xrt-portal-loading (see render-location-page.js / location.css). */
.xrt-portal-loading{max-width:1160px;margin:24px auto;padding:60px 24px;text-align:center;font-family:var(--font-b);color:rgba(26,31,46,.55);background:var(--cream);border-radius:var(--r-lg)}

/* ============ Shared rhythm for the marketing sections — generous,
   consistent whitespace so each block reads as its own "widget", the way
   an Elementor-built page separates sections instead of butting them
   together. ============ */
.xh-stats{position:relative;background:var(--blue-d);padding:48px 24px;margin:64px 0;border-radius:var(--r-xl);overflow:hidden;max-width:1160px;margin-left:auto;margin-right:auto}
.xh-stats:before{content:'';position:absolute;inset:0;background:radial-gradient(120% 140% at 15% 0%,rgba(255,255,255,.06),transparent 60%);pointer-events:none}
.xh-stats__inner{position:relative;display:flex;flex-wrap:wrap;gap:32px 28px}
.xh-stat{flex:1 1 200px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.xh-stat__icon{width:40px;height:40px;color:var(--green)}
.xh-stat__icon svg{width:100%;height:100%}
.xh-stat__head{font-family:var(--font-h);font-weight:800;font-size:16px;color:#fff}
.xh-stat__sub{font-family:var(--font-b);font-size:13.5px;color:rgba(255,255,255,.6)}
@media(max-width:900px){.xh-stats{margin:48px 20px}.xh-stat{flex-basis:40%}}
@media(max-width:600px){.xh-stats{margin:32px 16px;padding:36px 20px;border-radius:var(--r-lg)}.xh-stat{flex-basis:100%}}

.xh-intro{padding:24px 24px 64px;background:var(--white,#fff)}
.xh-intro__inner{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.xh-intro__text{flex:1 1 420px}
.xh-intro__pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:var(--green-dim);color:var(--green-d);font-family:var(--font-h);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.xh-intro__pill svg{width:14px;height:14px}
.xh-intro__title{font-family:var(--font-h);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.15;color:var(--txt);margin:14px 0 0;letter-spacing:-.02em}
.xh-intro__rule{width:52px;height:3px;border-radius:2px;background:var(--blue-l);margin:16px 0}
.xh-intro__lead{font-family:var(--font-b);font-weight:700;font-size:16px;line-height:1.6;color:var(--txt);margin:0 0 14px}
.xh-intro__text p:not(.xh-intro__lead){font-family:var(--font-b);font-size:14.5px;line-height:1.75;color:rgba(26,31,46,.72);margin:0 0 14px}
.xh-intro__media{flex:1 1 380px;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);background:var(--cream)}
.xh-intro__media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .xh-intro{padding:20px 20px 48px}
  .xh-intro__inner{flex-direction:column;gap:28px}
  .xh-intro__media{order:-1;width:100%;aspect-ratio:16/10}
}
@media(max-width:600px){
  .xh-intro{padding:20px 16px}
}

.xh-products{padding:0 24px 72px;background:var(--cream)}
.xh-products__title{max-width:1160px;margin:0 auto 40px;text-align:center;font-family:var(--font-h);font-weight:800;font-size:clamp(24px,3vw,32px);color:var(--txt);letter-spacing:-.02em}
.xh-products__grid{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;gap:28px}
.xh-card{flex:1 1 calc(33.333% - 19px);display:flex;flex-direction:column;background:var(--white,#fff);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);text-decoration:none;overflow:visible;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.xh-card:hover{border-color:var(--blue-l);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.xh-card:focus-visible{outline:2px solid var(--blue-l);outline-offset:2px}
.xh-card__media{position:relative;width:100%;height:200px;flex:0 0 auto;background:var(--cream-d)}
.xh-card__media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-lg) var(--r-lg) 0 0}
.xh-card__badge{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:var(--white,#fff);border:1px solid var(--bdr);box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--blue-l);transition:transform .2s ease;z-index:2}
.xh-card__badge svg{width:22px;height:22px}
.xh-card:hover .xh-card__badge{transform:translateX(-50%) scale(1.05)}
.xh-card__body{padding:30px 22px 22px;display:flex;flex-direction:column;gap:6px;text-align:center;flex:1 1 auto}
.xh-card__title{font-family:var(--font-h);font-weight:700;font-size:16.5px;line-height:1.3;min-height:2.6em;display:flex;align-items:center;justify-content:center;color:var(--txt);letter-spacing:-.01em}
.xh-card__subtitle{font-family:var(--font-h);font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-l)}
.xh-card__desc{font-family:var(--font-b);font-size:13.5px;line-height:1.6;min-height:4.8em;color:rgba(26,31,46,.68);margin:4px 0 4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xh-card__link{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;font-family:var(--font-h);font-weight:700;font-size:13px;color:var(--blue-l)}
.xh-card__link svg{width:14px;height:14px;transition:transform .2s ease}
.xh-card:hover .xh-card__link svg{transform:translateX(4px)}
@media(max-width:900px){.xh-card{flex-basis:calc(50% - 14px)}}
@media(max-width:600px){
  .xh-products{padding:20px 16px}
  .xh-products__grid{gap:20px}
  .xh-card{flex-basis:100%}
}

.xh-ind{padding:24px 24px 72px;background:var(--white,#fff)}
.xh-ind__inner{max-width:1160px;margin:0 auto}
.xh-ind__eyebrow{text-align:center;font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-d)}
.xh-ind__title{text-align:center;font-family:var(--font-h);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--txt);letter-spacing:-.02em;margin:10px 0 0}
.xh-ind__subtext{text-align:center;max-width:640px;margin:14px auto 0;font-family:var(--font-b);font-size:14.5px;line-height:1.7;color:rgba(26,31,46,.68)}

/* Tabs: wrap+center on desktop; a no-wrap horizontally scrollable strip
   below 900px, with the next pill peeking in at the edge to hint at scroll. */
.xh-ind__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:960px;margin:36px auto 0}
.xh-ind__tab{flex:0 0 auto;scroll-snap-align:center;font-family:var(--font-h);font-weight:600;font-size:13.5px;color:var(--txt);background:var(--cream);border:1px solid transparent;border-radius:999px;padding:11px 18px;min-height:44px;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.xh-ind__tab:hover{background:var(--cream-d)}
.xh-ind__tab.active{background:var(--blue-d);color:#fff}
.xh-ind__tab.active:hover{background:var(--blue-d)}
.xh-ind__tab:focus-visible{outline:2px solid var(--blue-l);outline-offset:2px}
@media(max-width:900px){
  .xh-ind__tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;justify-content:flex-start;margin:28px -24px 0;padding:0 24px 6px;-webkit-overflow-scrolling:touch}
  .xh-ind__tabs::after{content:'';flex:0 0 8px}
  .xh-ind__tab{padding:10px 16px}
}

/* Content panel: dark navy "widget" the tabs drive, matching the stats bar's
   inset-card treatment. */
.xh-ind__panel{position:relative;max-width:1160px;margin:36px auto 0;background:var(--blue-d);border-radius:var(--r-xl);padding:44px;display:flex;flex-wrap:wrap;gap:48px;align-items:center;transition:opacity .18s ease}
.xh-ind__panel.fade{opacity:0}
/* All 8 panels are server-rendered in the DOM (for crawlers); only one is
   ever shown to users. `[hidden]` has the same specificity as the class
   selector above, so it needs its own rule to win the cascade — without
   this, every non-active panel would render stacked and visible. */
.xh-ind__panel[hidden]{display:none}
.xh-ind__panel-media{flex:1 1 380px;display:flex;flex-direction:column;align-items:center;gap:16px}
.xh-ind__panel-img{width:100%;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:rgba(255,255,255,.06)}
.xh-ind__panel-img img{width:100%;height:100%;object-fit:cover;display:block}
.xh-ind__dots{display:flex;gap:7px}
.xh-ind__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);border:none;padding:0;cursor:pointer;transition:background .15s ease,transform .15s ease}
.xh-ind__dot.active{background:var(--green);transform:scale(1.2)}
.xh-ind__dot:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.xh-ind__panel-text{flex:1 1 420px}
.xh-ind__panel-eyebrow{font-family:var(--font-h);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.xh-ind__panel-heading{font-family:var(--font-h);font-weight:800;font-size:clamp(22px,2.6vw,29px);line-height:1.2;color:#fff;margin:10px 0 0;letter-spacing:-.02em}
.xh-ind__panel-desc{font-family:var(--font-b);font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.68);margin:14px 0 0}
.xh-ind__features{display:flex;flex-wrap:wrap;gap:22px;margin:26px 0 0}
.xh-ind__feature{flex:1 1 140px;display:flex;flex-direction:column;gap:6px}
.xh-ind__feature-icon{width:26px;height:26px;color:var(--green)}
.xh-ind__feature-icon svg{width:100%;height:100%}
.xh-ind__feature-label{font-family:var(--font-h);font-weight:700;font-size:13.5px;color:#fff}
.xh-ind__feature-sub{font-family:var(--font-b);font-size:12px;color:rgba(255,255,255,.55)}
.xh-ind__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.xh-ind__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:12px 22px;border-radius:var(--r-md);font-family:var(--font-h);font-weight:700;font-size:13.5px;text-decoration:none;cursor:pointer;transition:filter .15s ease,transform .15s ease,background .15s ease}
/* Without an explicit size, a viewBox-only <svg> (no width/height attrs)
   falls back to the UA default replaced-element box (300x150) — that was
   inflating the whole button into an oversized block. */
.xh-ind__btn svg{width:14px;height:14px;flex:0 0 auto}
.xh-ind__btn--primary{background:var(--green-d);color:#fff;border:none}
.xh-ind__btn--primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.xh-ind__btn--outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.xh-ind__btn--outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}
@media(max-width:900px){
  /* .xh-ind__panel's 48px `gap` is a column gap between the two side-by-side
     desktop columns — once flex-direction switches to column here, that
     same value becomes the vertical gap between the image and text blocks,
     which read as a huge, uneven blank space. Override it down to the
     panel's own internal rhythm. */
  .xh-ind__panel{padding:28px 20px;margin-top:28px;flex-direction:column;gap:24px}
  /* .xh-ind__panel-media's desktop rule sets flex:1 1 380px to size its
     WIDTH as a side-by-side column. flex-basis is axis-agnostic though —
     once flex-direction switches to column just above, that same 380px
     forces this block's HEIGHT to 380px regardless of its actual content
     (image + dots, ~240px), leaving ~140px of dead space above the text
     panel that follows it. flex:0 0 auto drops the fixed basis so it sizes
     to content on the now-vertical axis instead. */
  .xh-ind__panel-media{order:-1;width:100%;flex:0 0 auto}
}
/* Mobile: one consistent horizontal padding (20px, matching .xh-ind__panel's
   own side padding above) and one consistent vertical rhythm (16px) between
   every element in the panel — image, dots, eyebrow, heading, description,
   features, buttons — instead of the desktop's larger, uneven gaps. */
@media(max-width:600px){
  .xh-ind{padding:20px 16px}
  .xh-ind__panel{border-radius:var(--r-lg);padding:24px 20px;gap:20px}
  .xh-ind__panel-media{gap:16px}
  .xh-ind__panel-heading{margin-top:10px}
  .xh-ind__panel-desc{margin-top:16px}
  .xh-ind__features{gap:16px;margin-top:16px}
  .xh-ind__actions{flex-direction:column;gap:12px;margin-top:16px}
  .xh-ind__btn{width:100%}
}

/* Quote modal — scoped extras on top of the base .overlay/.modal rules
   above. The shared .overlay{z-index:2000} sits BELOW the sticky site
   header (.xrt-header, z-index up to 5999 in its mobile-menu state — see
   layout.css) — with body scroll left unlocked the header stayed pinned to
   the viewport top and rendered over the modal's own head/X button
   whenever the page was scrolled first. Fixed by raising #qr-overlay above
   every header z-index (JS also locks background scroll — see the inline
   script). The modal itself becomes a flex column so only .modal-body
   scrolls internally; the header and "Interested in" context box are
   fixed-size flex items that never scroll out of view. */
#qr-overlay{z-index:6000}
#qr-overlay .modal{display:flex;flex-direction:column;max-height:90vh;overflow:hidden}
#qr-overlay .modal-head{flex:0 0 auto}
#qr-overlay #qr-industry-box{flex:0 0 auto;margin:14px 20px 0}
#qr-overlay .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}

.xh-price{padding:24px 24px 72px;background:var(--white,#fff)}
.xh-price__inner{max-width:1160px;margin:0 auto}
.xh-price__eyebrow{text-align:center;font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-d)}
.xh-price__title{text-align:center;font-family:var(--font-h);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--txt);letter-spacing:-.02em;margin:10px 0 0}
.xh-price__subtext{text-align:center;max-width:760px;margin:14px auto 0;font-family:var(--font-b);font-size:14.5px;line-height:1.7;color:rgba(26,31,46,.68)}
.xh-price__grid{max-width:1160px;margin:40px auto 0;display:flex;flex-wrap:wrap;gap:24px}
.xh-price-card{position:relative;flex:1 1 calc(33.333% - 16px);display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:26px 24px 24px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.xh-price-card:hover{border-color:var(--blue-l);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.xh-price-card--popular{border-color:var(--blue-l);box-shadow:var(--shadow-md)}
.xh-price-card__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--green-d);color:#fff;font-family:var(--font-h);font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:999px;box-shadow:var(--shadow-sm);white-space:nowrap}
.xh-price-card__res{font-family:var(--font-h);font-weight:800;font-size:24px;color:var(--txt);letter-spacing:-.02em}
.xh-price-card__tier{font-family:var(--font-h);font-weight:600;font-size:13px;color:var(--blue-l);margin-top:2px}
.xh-price-card__revisit{font-family:var(--font-b);font-size:12.5px;color:rgba(26,31,46,.55);margin-top:6px;padding-bottom:16px;border-bottom:1px solid var(--bdr-l)}
.xh-price-card__rows{display:flex;flex-direction:column;margin-top:14px}
.xh-price-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--bdr-l)}
.xh-price-row:last-child{border-bottom:none}
.xh-price-row__label{font-family:var(--font-h);font-weight:600;font-size:13.5px;color:var(--txt)}
.xh-price-row__min{display:block;font-family:var(--font-b);font-weight:400;font-size:11px;color:rgba(26,31,46,.5);margin-top:2px}
.xh-price-row__price{flex:0 0 auto;font-family:var(--font-h);font-weight:800;font-size:15px;color:var(--green-d);white-space:nowrap}
.xh-price-row__price small{font-family:var(--font-b);font-weight:500;font-size:11px;color:rgba(26,31,46,.55)}
.xh-price-card__note{margin-top:auto;padding-top:16px;font-family:var(--font-b);font-size:12.5px;line-height:1.6;color:rgba(26,31,46,.55);font-style:italic}
.xh-price-card__desc{margin-top:12px;font-family:var(--font-b);font-size:13.5px;line-height:1.7;color:rgba(26,31,46,.68)}
@media(max-width:900px){.xh-price-card{flex-basis:calc(50% - 12px)}}
@media(max-width:600px){
  .xh-price{padding:20px 16px}
  .xh-price__grid{gap:20px;margin-top:32px}
  .xh-price-card{flex-basis:100%;padding:24px 20px 20px}
}

.xh-how{padding:24px 24px 80px;background:var(--cream)}
.xh-how__inner{max-width:1160px;margin:0 auto}
.xh-how__eyebrow{text-align:center;font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-d)}
.xh-how__title{text-align:center;font-family:var(--font-h);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--txt);letter-spacing:-.02em;margin:10px 0 0}
.xh-how__subtext{text-align:center;max-width:660px;margin:14px auto 0;font-family:var(--font-b);font-size:14.5px;line-height:1.7;color:rgba(26,31,46,.68)}
.xh-how__grid{max-width:1160px;margin:40px auto 0;display:flex;flex-wrap:wrap;gap:24px}
.xh-how-card{position:relative;flex:1 1 calc(20% - 20px);display:flex;flex-direction:column;background:var(--white,#fff);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:28px 20px 22px;text-align:center;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.xh-how-card:hover{border-color:var(--blue-l);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.xh-how-card__step{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--cream);color:var(--blue-l);font-family:var(--font-h);font-weight:800;font-size:11px;display:grid;place-items:center}
.xh-how-card__icon{width:44px;height:44px;margin:0 auto;border-radius:50%;background:var(--green-dim);color:var(--blue-l);display:grid;place-items:center}
.xh-how-card__icon svg{width:22px;height:22px}
.xh-how-card:hover .xh-how-card__icon{transform:scale(1.05)}
.xh-how-card__title{margin-top:16px;font-family:var(--font-h);font-weight:700;font-size:15px;color:var(--txt);letter-spacing:-.01em}
.xh-how-card__desc{margin-top:8px;font-family:var(--font-b);font-size:13px;line-height:1.6;color:rgba(26,31,46,.65)}
@media(max-width:1024px){.xh-how-card{flex-basis:calc(33.333% - 16px)}}
@media(max-width:640px){.xh-how-card{flex-basis:calc(50% - 10px)}}
@media(max-width:600px){
  .xh-how{padding:20px 16px}
  .xh-how__grid{gap:16px;margin-top:32px}
  .xh-how-card{padding:24px 16px 18px}
}

.xh-why{padding:24px 24px 80px;background:var(--white,#fff)}
.xh-why__inner{max-width:1160px;margin:0 auto}
.xh-why__eyebrow{text-align:center;font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-d)}
.xh-why__title{text-align:center;font-family:var(--font-h);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--txt);letter-spacing:-.02em;margin:10px 0 0}
.xh-why__subtext{text-align:center;max-width:660px;margin:14px auto 0;font-family:var(--font-b);font-size:14.5px;line-height:1.7;color:rgba(26,31,46,.68)}
.xh-why__grid{max-width:1160px;margin:40px auto 0;display:flex;flex-wrap:wrap;gap:24px}
.xh-why-card{flex:1 1 calc(33.333% - 16px);display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:26px 24px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.xh-why-card:hover{border-color:var(--blue-l);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.xh-why-card__icon{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--green-dim);color:var(--blue-l);display:grid;place-items:center;transition:transform .2s ease}
.xh-why-card__icon svg{width:22px;height:22px}
.xh-why-card:hover .xh-why-card__icon{transform:scale(1.05)}
.xh-why-card__title{margin-top:16px;font-family:var(--font-h);font-weight:700;font-size:16px;line-height:1.3;color:var(--txt);letter-spacing:-.01em}
.xh-why-card__desc{margin-top:8px;font-family:var(--font-b);font-size:13.5px;line-height:1.65;color:rgba(26,31,46,.68)}
@media(max-width:900px){.xh-why-card{flex-basis:calc(50% - 12px)}}
@media(max-width:600px){
  .xh-why{padding:20px 16px}
  .xh-why__grid{gap:16px;margin-top:32px}
  .xh-why-card{flex-basis:100%;padding:22px 20px}
}

.xh-faq{padding:24px 24px 80px;background:var(--cream)}
.xh-faq__inner{max-width:840px;margin:0 auto}
.xh-faq__eyebrow{text-align:center;font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-d)}
.xh-faq__title{text-align:center;font-family:var(--font-h);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--txt);letter-spacing:-.02em;margin:10px 0 0}
.xh-faq__subtext{text-align:center;max-width:560px;margin:14px auto 0;font-family:var(--font-b);font-size:14.5px;line-height:1.7;color:rgba(26,31,46,.68)}
.xh-faq__list{margin-top:32px;background:var(--white,#fff);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.xh-faq-item{border-bottom:1px solid var(--bdr-l)}
.xh-faq-item:last-child{border-bottom:none}
.xh-faq-item__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:none;border:none;cursor:pointer;padding:18px 22px;min-height:44px;font-family:var(--font-h);font-weight:700;font-size:15px;color:var(--txt);transition:background .15s ease}
.xh-faq-item__q:hover{background:var(--cream)}
.xh-faq-item__q:focus-visible{outline:2px solid var(--blue-l);outline-offset:-2px}
.xh-faq-item__chev{flex:0 0 auto;width:18px;height:18px;color:var(--blue-l);transition:transform .2s ease}
.xh-faq-item.open .xh-faq-item__chev{transform:rotate(180deg)}
/* Smooth height animation with no JS measurement: the grid track itself
   animates from 0fr to 1fr, and the inner wrapper's overflow:hidden clips
   the content while it's collapsed. */
.xh-faq-item__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.xh-faq-item__a>div{overflow:hidden}
.xh-faq-item.open .xh-faq-item__a{grid-template-rows:1fr}
.xh-faq-item__a p{margin:0 22px 18px;font-family:var(--font-b);font-size:13.5px;line-height:1.7;color:rgba(26,31,46,.7)}
@media(max-width:600px){
  .xh-faq{padding:20px 16px}
  .xh-faq__list{margin-top:28px}
  .xh-faq-item__q{padding:16px}
  .xh-faq-item__a p{margin:0 16px 16px;font-size:13px}
}

/* ============ Mobile spacing normalization (<=600px) ============
   One shared spacing scale applied uniformly across every marketing
   section instead of the old per-section values (which ranged from 0 to
   80px of top/bottom padding depending on the section): 16px side padding,
   20px top/bottom padding per section (so two adjacent sections land on a
   consistent ~40px gap), and a 20px heading-to-subtext gap everywhere that
   pattern repeats. Each section's own @media(max-width:600px) block above
   still sets its 16px side padding directly; this block only holds the
   rules that are identical across multiple sections, so they're defined
   once instead of six times. */
@media(max-width:600px){
  .xh-ind__subtext,
  .xh-price__subtext,
  .xh-how__subtext,
  .xh-why__subtext,
  .xh-faq__subtext{margin-top:20px}

  /* Industry tabs: the horizontal-scroll bleed trick (negative margin +
     matching padding) was hardcoded to the desktop/tablet 24px side
     padding. Below 600px the section's own side padding is 16px (see
     .xh-ind above), so the mismatch let the tab row start 8px further
     left than every other section's content, and its trailing edge had
     almost no space to signal there was more to scroll. Re-anchor both to
     16px, and give the end of the row a full 16px of trailing space. */
  .xh-ind__tabs{margin:24px -16px 0;padding:0 16px 6px}
  .xh-ind__tabs::after{flex:0 0 16px}
}