.xhac-svc{--purple:#542770;--purple-light:#5E2C7E;--purple-dark:#3A1A4E;--green:#6BB85C;
--green-hover:#8FD481;--green-dark:#4E9B41;--green-tint:#EEF7EC;--promo-green:#3D7A33;
--ink:#0F172A;--body:#475569;--muted:#94A3B8;--rule:#E7E7EA;--soft:#F7F6FA;--tint:#F4F1F8;
--stars:#F6A723;
/* "Montserrat Fallback" is the metric-overridden local face shell.py defines alongside
   the self-hosted woff2. It is what stops the swap from shifting layout — the measured
   CLS on this site is fonts, not images. An unknown family name is skipped by the
   browser, so this is inert until shell.py declares it. */
font-family:"Montserrat","Montserrat Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
color:var(--ink);width:100%;overflow-x:hidden;
/* The embed is a bare <section>. Framer's page supplies the white behind it, but
   standalone — a local preview, or anyone opening the file — whatever is behind
   shows through, and on a dark-mode browser that is black under dark text.
   Own the background so the embed renders correctly anywhere. color-scheme keeps
   form controls light too, or the ZIP input renders dark-on-dark. */
background:#fff;color-scheme:light}
.xhac-svc *{box-sizing:border-box;margin:0}
.xsp-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.xsp-dt{}
.xsp-mb{display:none !important}

/* Where in-page anchor links land. The site header is position:sticky;top:0, so a
   section scrolled flush to the viewport top slides underneath it. scroll-margin-top
   is honoured by scrollIntoView — including across the embed iframe boundary — and
   pushes the landing point down by this much. TUNE THIS ONE VALUE if the header
   height changes: it should be header height + ~20px of breathing room. */
.xhac-svc{--xsp-anchor-offset:112px}
.xhac-svc [id]{scroll-margin-top:var(--xsp-anchor-offset)}

/* buttons */
.xsp-btn-green{display:flex;align-items:center;justify-content:center;background:var(--green);
color:var(--ink);font-weight:800;font-size:15px;padding:14px;border-radius:10px;min-height:44px;
text-decoration:none;cursor:pointer;border:0;font-family:inherit;width:100%;
box-shadow:0 6px 18px rgba(107,184,92,.35);transition:background .15s ease,color .15s ease}
.xsp-btn-green:hover{background:var(--green-dark);color:#fff}
.xsp-btn-purple{display:flex;align-items:center;justify-content:center;background:var(--purple);
color:#fff;font-weight:800;font-size:15px;padding:14px;border-radius:10px;min-height:44px;
text-decoration:none;cursor:pointer;border:0;font-family:inherit;width:100%;margin-top:10px;
transition:background .15s ease}
.xsp-btn-purple:hover{background:#3E1C54}
.xsp-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--green);
color:var(--ink);font-weight:800;font-size:14px;padding:12px 20px;border-radius:10px;min-height:44px;
text-decoration:none;cursor:pointer;border:0;font-family:inherit;white-space:nowrap;
transition:background .15s ease}
.xsp-cta:hover{background:var(--green-hover)}
.xsp-cta-outline{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.45);
color:#fff;font-weight:800;font-size:14px;padding:12px 20px;border-radius:10px;min-height:44px;
text-decoration:none;background:transparent;white-space:nowrap;transition:border-color .15s,color .15s}
.xsp-cta-outline:hover{border-color:var(--green);color:var(--green)}

/* hero */
.xsp-hero{background:linear-gradient(180deg,#5E2C7E 0%,#542770 45%,#3A1A4E 100%);position:relative;color:#fff}
.xsp-hero-mark{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.xsp-hero-mark img{position:absolute;right:-90px;top:-40px;width:620px;opacity:.06;
transform:rotate(-8deg);filter:brightness(0) invert(1)}
.xsp-hero-grid{position:relative;display:grid;grid-template-columns:1fr 360px;gap:48px;
max-width:1280px;margin:0 auto;padding:48px 40px 64px}
.xsp-hero-grid.nocard{grid-template-columns:1fr;padding-bottom:48px}
.xsp-crumbs{font-size:12px;font-weight:700;color:rgba(255,255,255,.7)}
.xsp-crumbs a{color:rgba(255,255,255,.7);text-decoration:none}
.xsp-crumbs a:hover{color:var(--green-hover)}
.xsp-crumbs .cur{color:var(--green)}
.xsp-crumbs .sep{margin:0 7px;opacity:.6}
.xsp-h1{margin-top:14px;font-style:italic;font-weight:900;font-size:46px;line-height:1.08;letter-spacing:-1px;color:#fff}
.xsp-h1 em{font-style:italic;color:var(--green)}
.xsp-hero.sub .xsp-h1{font-size:42px}
.xsp-intro{margin-top:16px;max-width:520px;font-size:15.5px;line-height:1.6;font-weight:500;color:rgba(255,255,255,.82)}
.xsp-chiprow{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.xsp-chip{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);border-radius:12px;
padding:10px 14px;font-size:12.5px;font-weight:700;color:#fff}
.xsp-chip .st{color:var(--stars)}
.xsp-hero-ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

/* booking card (hero overlap)
   align-self:end pins the card to the bottom of the hero grid so the -84px margin
   actually pulls it past the edge and it hangs over the section below. With
   align-self:start the card floated at the top of a taller row and the negative
   margin did nothing — which is why the service pages never overhung. Every page
   that renders a .xsp-bookcol also renders a body section below it, so the
   clearance on .xsp-bodygrid / .xco-body is unconditional. */
.xsp-bookcol{position:relative;margin-bottom:-84px;align-self:end}
.xsp-book{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(15,23,42,.25);padding:24px;color:var(--ink)}
.xsp-book.inflow{box-shadow:0 12px 30px rgba(84,39,112,.12);border:1px solid var(--rule)}
.xsp-book .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--green-dark)}
.xsp-book .t{font-weight:800;font-size:18px;margin-top:8px}
.xsp-book .s{font-size:13px;font-weight:500;color:var(--body);margin-top:6px;line-height:1.5}
.xsp-book .btns{margin-top:16px}
.xsp-book .trust{display:flex;align-items:center;justify-content:center;gap:14px;border-top:1px solid var(--rule);
margin-top:16px;padding-top:14px;font-size:12px;font-weight:700;color:var(--body)}
.xsp-book .trust .st{color:var(--stars)}
.xsp-book .trust .bar{color:#D8D5DE}

/* pill sub-nav */
.xsp-pillbar{background:#fff;border-bottom:1px solid var(--rule)}
.xsp-pillbar-in{max-width:1280px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.xsp-pill-label{font-size:10.5px;font-weight:800;letter-spacing:1.8px;color:var(--muted)}
.xsp-pills{display:flex;gap:8px;flex-wrap:wrap}
.xsp-pill{border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:700;text-decoration:none;
color:var(--purple);background:var(--tint);min-height:32px;display:inline-flex;align-items:center;
transition:background .15s,color .15s}
.xsp-pill:hover{background:#E9E2F1}
.xsp-pill.active{background:var(--purple);color:#fff;font-weight:800}

/* body grid */
.xsp-bodygrid{display:grid;grid-template-columns:1fr 360px;gap:48px;max-width:1280px;margin:0 auto;padding:56px 40px}
/* Only the pages whose hero carries a booking card need clearance for it — the sub
   pages put that card in the rail instead, and padding them too would just open a
   48px hole. Scoped with :has() so no generator has to remember to flag it; a browser
   without :has() falls back to the plain 56px, which is what shipped before. */
.xhac-svc:has(.xsp-bookcol) .xsp-bodygrid{padding-top:104px}
.xsp-main{display:flex;flex-direction:column;gap:48px;min-width:0}
.xsp-rail{padding-top:64px;display:flex;flex-direction:column;gap:16px;align-self:start}
.xsp-rail.flush{padding-top:0}
.xsp-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--green-dark)}
.xsp-eyebrow.purple{color:var(--purple)}
.xsp-h2{margin-top:10px;font-style:italic;font-weight:900;font-size:33px;letter-spacing:-.5px;color:var(--ink)}

/* checklist */
.xsp-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:20px}
.xsp-check{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--body)}
.xsp-check .c{width:18px;height:18px;flex:none;border-radius:50%;background:var(--green);color:#fff;
font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.xsp-callout{margin-top:20px;background:var(--green-tint);border-radius:12px;padding:14px 18px;
font-size:13px;font-weight:600;color:var(--promo-green);line-height:1.55}
.xsp-callout a{color:var(--promo-green);font-weight:800;text-decoration:none}
.xsp-callout.safety{background:var(--ink);color:rgba(255,255,255,.85)}
.xsp-callout.safety b{color:var(--green-hover)}
.xsp-callout.safety a{color:#fff;font-weight:800}

/* what-we-do cards */
.xsp-cards3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
.xsp-card{border:1px solid var(--rule);border-radius:16px;padding:20px;background:#fff;display:flex;
flex-direction:column;gap:8px;text-decoration:none;transition:box-shadow .18s,border-color .18s,transform .18s}
.xsp-card:hover{box-shadow:0 12px 30px rgba(84,39,112,.12);border-color:#D8CCE4;transform:translateY(-2px)}
.xsp-card .t{font-weight:800;font-size:16.5px;color:var(--ink)}
.xsp-card .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body)}
.xsp-card .lm{font-weight:800;font-size:13px;color:var(--purple);margin-top:2px}
.xsp-card:hover .lm{color:var(--green-dark)}
.xsp-glyph{position:relative;display:block;width:30px;height:30px;flex:none}
.xsp-glyph i{position:absolute;inset:11px 2px;border-radius:2px;display:block}
.xsp-glyph i:first-child{background:var(--purple);transform:rotate(45deg)}
.xsp-glyph i:last-child{background:var(--green);transform:rotate(-45deg)}

/* process */
.xsp-steps{display:flex;flex-direction:column;gap:22px;margin-top:20px}
.xsp-step{display:flex;gap:0}
.xsp-step .n{flex:0 0 44px;font-style:italic;font-weight:900;font-size:25px;color:var(--purple)}
.xsp-step .t{font-weight:800;font-size:15px}
.xsp-step .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body);margin-top:4px;max-width:560px}

/* decision card */
.xsp-decision{border:1px solid var(--rule);border-radius:16px;padding:20px 22px;background:#fff}
.xsp-decision .t{font-weight:800;font-size:16.5px}
.xsp-decision .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body);margin-top:6px;max-width:620px}
.xsp-decision a{display:inline-flex;align-items:center;margin-top:12px;border:2px solid var(--purple);
color:var(--purple);font-weight:800;font-size:13.5px;padding:10px 18px;border-radius:10px;min-height:40px;
text-decoration:none;transition:background .15s,color .15s}
.xsp-decision a:hover{background:var(--purple);color:#fff}

/* faq */
.xsp-faq{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.xsp-qa{border:1px solid var(--rule);border-radius:14px;background:#fff;overflow:hidden}
.xsp-qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 18px;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;
font-weight:700;font-size:15px;color:var(--ink);min-height:44px}
.xsp-qa .tog{width:26px;height:26px;flex:none;border-radius:50%;background:var(--tint);color:var(--purple);
display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;transition:background .15s,color .15s}
.xsp-qa.open .tog{background:var(--purple);color:#fff}
.xsp-qa .a{display:none;font-size:13.5px;line-height:1.6;font-weight:500;color:var(--body);
padding:0 18px 16px;max-width:620px}
.xsp-qa.open .a{display:block}

/* media block — one photo or one video, full width of the main column */
.xsp-shot{position:relative;margin-top:20px;aspect-ratio:16 / 9;border-radius:14px;overflow:hidden;
background:#0F172A;border:1px solid var(--rule)}
.xsp-shot img,.xsp-shot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.xsp-shot img{object-fit:cover}
.xsp-mediasub{margin-top:10px;font-size:14px;line-height:1.6;font-weight:500;color:var(--body);max-width:64ch}
.xsp-mediacap{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--muted)}

/* rail photo + promos */
.xsp-photo{height:220px;border-radius:14px;background:#F4F6F8;border:1px solid var(--rule);
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);
letter-spacing:1px;overflow:hidden}
.xsp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.xsp-promo{border-radius:14px;padding:18px 20px;display:block;text-decoration:none}
.xsp-promo.lav{background:var(--tint)}
.xsp-promo.mint{background:var(--green-tint)}
.xsp-promo .t{font-weight:800;font-size:15px;color:var(--purple)}
.xsp-promo.mint .t{color:var(--promo-green)}
.xsp-promo .d{font-size:12.5px;line-height:1.55;font-weight:500;color:var(--body);margin-top:6px}
.xsp-promo .lm{font-weight:800;font-size:13px;color:var(--purple);margin-top:10px}
.xsp-promo.mint .lm{color:var(--promo-green)}
.xsp-promo:hover .lm{text-decoration:underline}
.xsp-sibs{border:1px solid var(--rule);border-radius:14px;padding:18px 20px;background:#fff}
.xsp-sibs .h{font-size:10.5px;font-weight:800;letter-spacing:1.8px;color:var(--muted)}
.xsp-sibs a{display:flex;align-items:center;justify-content:space-between;padding:10px 0;
font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid #F1F0F4;min-height:40px}
.xsp-sibs a:last-child{border-bottom:0;padding-bottom:0}
.xsp-sibs a:hover{color:var(--purple)}
.xsp-sibs .ar{color:var(--purple);font-weight:800}

/* emergency band */

/* related strip */
.xsp-rel{background:var(--soft)}
.xsp-rel-in{max-width:1280px;margin:0 auto;padding:44px 40px}
.xsp-rel-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:16px}
.xsp-rel-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.05);
text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:box-shadow .18s,transform .18s}
.xsp-rel-card:hover{box-shadow:0 12px 30px rgba(84,39,112,.12);transform:translateY(-2px)}
.xsp-rel-card .t{font-weight:800;font-size:15px;color:var(--ink)}
.xsp-rel-card .lm{font-weight:800;font-size:13px;color:var(--purple)}
.xsp-rel-card:hover .lm{color:var(--green-dark)}

/* ---------------------- GEO content model ----------------------
   Four pieces the copy needs and the old template had nowhere to put: the
   answer-first block, real H2/H3 body sections, decision tables, and a visible
   last-updated line. */

/* The answer-first block sits in the hero copy column, directly under the H1.
   It is the page's lead paragraph, not a callout: no box, no border, no tint, no
   rule. Size and weight carry it, and the deck below steps down so the order of
   importance reads correctly. Anything boxed here would look like an aside and get
   read as one. */
.xsp-answer{margin-top:18px;max-width:640px}
.xsp-answer p{font-size:18px;line-height:1.55;font-weight:600;color:#fff;letter-spacing:-.1px}
.xsp-answer p + p{margin-top:10px}
.xsp-answer + .xsp-intro{margin-top:12px;font-size:14.5px;color:rgba(255,255,255,.72)}

/* body sections: an H2 question, its direct answer, optional H3 sub-questions.
   .xsp-main already puts 48px between blocks, so a section owns only its internals. */
.xsp-h3{margin-top:24px;font-weight:800;font-size:18px;line-height:1.35;letter-spacing:-.2px;color:var(--ink)}
.xsp-prose{margin-top:12px;font-size:15px;line-height:1.65;font-weight:500;color:var(--body);max-width:68ch}
/* Contextual links in body copy. These are the site's internal-linking backbone — 139
   of them across the service pages — so they stay inline in the sentence where their
   anchor text means something, rather than becoming buttons. A 1px underline set off
   the baseline reads as a link without the heavy default rule cutting through the
   descenders. */
.xsp-prose a{color:var(--purple);font-weight:700;text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:#C9B8D8}
.xsp-prose a:hover{color:var(--green-dark);text-decoration-color:currentColor}
/* A phone number in prose is a fact first and a link second. It keeps tel: so it is
   still tappable, but it is not competing with the contextual links around it — the
   button under the section is the thing meant to be pressed. */
.xsp-prose a[href^="tel:"]{color:var(--ink);text-decoration-color:#D9D4E0}
.xsp-prose a[href^="tel:"]:hover{color:var(--purple)}
/* The action row that closes a section whose answer is "call or book". */
.xsp-inlinecta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* The one-sentence takeaway that has to sit immediately above a table — engines lift
   it when they can't lift the table. Heavier than body copy, lighter than a heading. */
.xsp-takeaway{margin-top:18px;font-size:15.5px;line-height:1.6;font-weight:700;color:var(--ink);max-width:68ch}

/* Decision tables.
   Desktop: a purple header band, a tinted row-header column, hairline rules and a
   soft lift. The caption sits ABOVE the card rather than inside it — inside, it read
   as a stray label floating over the header row.
   Mobile (<=700px): the table becomes stacked cards. A four-column comparison in a
   390px scroller means reading one column at a time and losing the row you were on;
   as cards, each row is a self-contained "Factor: value, value, value" block. The
   markup stays a real <table> — only `display` changes — and table_block() adds the
   ARIA roles back, because display:block strips a table's implicit roles from the
   accessibility tree in Chrome and Firefox. */
.xsp-tablewrap{margin-top:14px;border:1px solid var(--rule);border-radius:14px;background:#fff;
overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch;
box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(84,39,112,.18)}
.xsp-tablewrap:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.xsp-table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px;line-height:1.55}
/* The table's title, sitting above the box as a sub-headline. Sentence case at
   reading size — as a tiny uppercase tracked-out label it read as chrome, and long
   ones are a wall of capitals. */
.xsp-tablelabel{margin:20px 0 10px;font-size:16.5px;line-height:1.45;font-weight:800;
color:var(--ink);max-width:68ch}
.xsp-tablelabel + .xsp-tablewrap{margin-top:0}
.xsp-table th,.xsp-table td{padding:13px 16px;text-align:left;vertical-align:top;
border-bottom:1px solid #EFECF3}
.xsp-table thead th{font-weight:800;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;
color:#fff;background:var(--purple);border-bottom:0;white-space:nowrap}
.xsp-table thead th:first-child{border-top-left-radius:13px}
.xsp-table thead th:last-child{border-top-right-radius:13px}
.xsp-table tbody th{font-weight:800;color:var(--ink);width:24%;background:#FAF8FC}
.xsp-table tbody td{font-weight:500;color:var(--body)}
.xsp-table tbody tr:last-child th,.xsp-table tbody tr:last-child td{border-bottom:0}
@media (hover:hover){.xsp-table tbody tr:hover td{background:#FBFAFC}}

/* Stacked cards under 700px. 700, not the site's 810 breakpoint: a three-column
   comparison is still readable on a tablet and only breaks down on a phone.
   The wrapper drops its border and shadow so the CARDS carry the styling — a card
   inside a card reads as a mistake. Column headers move into each cell via
   data-label, which table_block() writes. */
/* Two ranges, one treatment. Under 700px the viewport is the constraint. But from 810
   to ~1090 the RAIL is: .xsp-bodygrid is `1fr 360px` with a 48px gap and 40px padding,
   so the main column is viewport-488 — 322px at 810 and 536px at 1024, both under the
   table's 560px minimum. Left alone that band side-scrolls a four-column table inside
   a half-width column, which is worse than a phone. Between 700 and 809 the rail is
   hidden and the column is full width, so the table fits and stays a table. */
@media (max-width:699px), (min-width:810px) and (max-width:1090px){
  .xsp-tablewrap{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
  .xsp-table{min-width:0;display:block;font-size:14px}
  .xsp-tablelabel{font-size:15.5px;margin-top:18px}
  .xsp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
  .xsp-table tbody{display:block}
  .xsp-table tbody tr{display:block;background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:4px 0;margin-bottom:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
  .xsp-table tbody tr:last-child{margin-bottom:0}
  /* The row header becomes the card title. */
  .xsp-table tbody th{display:block;width:auto;background:transparent;border-bottom:1px solid #EFECF3;
  font-size:15px;color:var(--ink);padding:12px 16px}
  /* Label above value, not beside it. Side by side looks tidy while column names are
     short ("Single-stage") and falls apart when they are not — "Replacement usually
     makes sense when" wraps to three lines against a one-line value and the pair
     stops reading as a pair. Stacked handles any length. */
  .xsp-table tbody td{display:block;border-bottom:1px solid #F5F3F8;padding:11px 16px 12px}
  .xsp-table tbody tr td:last-child{border-bottom:0}
  .xsp-table tbody td::before{content:attr(data-label);display:block;margin-bottom:3px;
  font-weight:800;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--purple)}
  .xsp-table tbody td>span{display:block}
}

/* Last updated. Quiet, but present — it has to match schema dateModified exactly. */
.xsp-updated{font-size:12.5px;font-weight:700;color:var(--muted)}

/* Click-to-load video facade. The YouTube iframe pulls ~835 KiB before anyone presses
   play; this is the poster, and the player replaces it on click. */
.xsp-shot .xsp-vplay{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;
background:linear-gradient(135deg,#5E2C7E,#542770 45%,#3E1C54);color:#fff;font-family:inherit;
text-align:center}
.xsp-vplay .pl{width:62px;height:62px;border-radius:50%;background:var(--green);color:var(--ink);
display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:5px;
box-shadow:0 10px 28px rgba(0,0,0,.35);transition:background .15s,transform .15s}
.xsp-vplay:hover .pl{background:var(--green-hover);transform:scale(1.06)}
.xsp-vplay .vt{font-size:14.5px;font-weight:800;max-width:34ch;line-height:1.4}
.xsp-vplay .vh{font-size:11.5px;font-weight:700;letter-spacing:1.6px;color:rgba(255,255,255,.6)}

/* ------------------------- mobile (2b stacking) ------------------------- */
@media (max-width:809px){
.xsp-answer{max-width:none}
.xsp-answer p{font-size:16px;line-height:1.5}
.xsp-answer + .xsp-intro{font-size:13.5px}
.xsp-h3{font-size:16.5px;margin-top:20px}
.xsp-prose{font-size:14.5px}
.xsp-takeaway{font-size:14.5px}
.xsp-vplay .pl{width:52px;height:52px;font-size:19px}
.xsp-vplay .vt{font-size:13.5px}
.xhac-svc{--xsp-anchor-offset:96px}
.xsp-dt{display:none !important}
.xsp-mb{display:revert !important}
.xsp-wrap,.xsp-pillbar-in,.xsp-rel-in{padding-left:20px;padding-right:20px}
.xsp-hero-grid{grid-template-columns:1fr;gap:0;padding:32px 20px 44px}
.xsp-h1{font-size:34px;letter-spacing:-.5px}
.xsp-hero.sub .xsp-h1{font-size:32px}
.xsp-intro{font-size:14px}
.xsp-hero-ctas{flex-direction:column;gap:14px}
.xsp-hero-ctas.xsp-mb{display:flex !important;flex-direction:column;gap:14px}
.xsp-hero-ctas .xsp-cta,.xsp-hero-ctas .xsp-cta-outline{width:100%}
.xsp-chiprow{gap:8px;justify-content:center}
.xsp-chip{padding:7px 10px;font-size:11px;border-radius:10px}
.xsp-bookcol{display:none}
.xsp-bodygrid{grid-template-columns:1fr;gap:40px;padding:40px 20px 48px}
/* the hero card is display:none here, so there is nothing to clear */
.xhac-svc:has(.xsp-bookcol) .xsp-bodygrid{padding-top:40px}
.xsp-rail{display:none}
.xsp-h2{font-size:24px;letter-spacing:-.4px}
.xsp-checks{grid-template-columns:1fr;gap:10px}
.xsp-cards3{grid-template-columns:1fr;gap:0;margin-top:12px}
.xsp-card{flex-direction:row;align-items:center;gap:12px;border:0;border-radius:0;
border-bottom:1px solid #F1F0F4;padding:13px 0;background:transparent}
.xsp-card:hover{box-shadow:none;transform:none}
.xsp-card .xsp-glyph{width:26px;height:26px}
.xsp-card .glyphwrap{flex:none}
.xsp-card .txt{flex:1}
.xsp-card .t{font-size:14.5px}
.xsp-card .d{font-size:11.5px;line-height:1.45}
.xsp-card .lm{display:none}
.xsp-card .mrow{display:block;color:var(--purple);font-weight:800}
.xsp-step .d{font-size:13px}
.xsp-rel-grid{grid-template-columns:1fr;gap:0;margin-top:10px}
.xsp-rel-card{flex-direction:row;align-items:center;justify-content:space-between;border-radius:0;
box-shadow:none;background:transparent;padding:13px 0;border-bottom:1px solid #F1F0F4}
.xsp-rel-card:hover{box-shadow:none;transform:none}
.xsp-mbrail.xsp-mb{display:flex !important;flex-direction:column;gap:14px}
}
@media (min-width:810px){
.xsp-card .mrow{display:none}
}

.xsp-hubhero-grid{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center;
max-width:1280px;margin:0 auto;padding:48px 40px 72px}
.xsp-hub-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3);
background:rgba(255,255,255,.1);border-radius:999px;padding:7px 14px;font-size:11.5px;font-weight:800;
letter-spacing:2px;color:#fff}
.xsp-hub-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.xsp-hubhero-grid .xsp-h1{font-size:44px}
.xsp-hub-photo{position:relative;min-height:280px}
.xsp-hub-photo .slashw{position:absolute;left:2%;right:-6%;bottom:26px;height:14px;background:#fff;opacity:.25;
transform:rotate(-9deg) skewX(-16deg)}
.xsp-hub-photo .slash{position:absolute;left:-6%;right:-2%;bottom:34px;height:44px;background:var(--green);
transform:rotate(-9deg) skewX(-16deg);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.xsp-hub-photo .ph{position:relative;height:280px;border-radius:20px;overflow:hidden;background:#F4F6F8;
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:1px}
.xsp-hub-photo .ph img{width:100%;height:100%;object-fit:cover;display:block}
.xsp-xplan-detail{list-style:none;margin:16px 0 0;padding:0;display:grid;
grid-template-columns:1fr 1fr;gap:8px 22px}
.xsp-xplan-detail li{display:flex;gap:9px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9)}
.xsp-xplan-detail li .c{width:17px;height:17px;flex:none;border-radius:50%;background:var(--green);
color:var(--ink);font-size:10px;font-weight:800;display:grid;place-items:center}
@media (max-width:809px){.xsp-xplan-detail{grid-template-columns:1fr}}
.xsp-cut{position:relative;height:84px;background:#fff;clip-path:polygon(0 62%,100% 0,100% 100%,0 100%)}
.xsp-promise{background:#fff;padding:6px 0 26px}
.xsp-promise-in{max-width:1280px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;
align-items:center;gap:20px;flex-wrap:wrap}
.xsp-promise-label{font-size:12px;font-weight:800;letter-spacing:1.8px;color:var(--muted)}
.xsp-promise-items{display:flex;gap:26px;flex-wrap:wrap}
.xsp-promise-items span{font-size:12.5px;font-weight:700;color:var(--body)}
.xsp-promise-items .di{color:var(--green)}
.xsp-hubsec{background:#fff;padding:44px 0 56px}
.xsp-hubsec.soft{background:var(--soft)}
.xsp-hubsec-in{max-width:1280px;margin:0 auto;padding:0 40px}
.xsp-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
.xsp-grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px;margin-top:20px}
.xsp-notsure{background:var(--tint);border:0;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px;
text-decoration:none;transition:box-shadow .18s,transform .18s}
.xsp-notsure:hover{box-shadow:0 12px 30px rgba(84,39,112,.12);transform:translateY(-2px)}
.xsp-notsure .t{font-weight:800;font-size:16.5px;color:var(--purple)}
.xsp-notsure .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body)}
.xsp-notsure .lm{font-weight:800;font-size:13px;color:var(--purple);margin-top:2px}
.xsp-badge{display:inline-block;background:var(--green-tint);color:var(--green-dark);font-weight:800;
font-size:9.5px;letter-spacing:.6px;border-radius:5px;padding:3px 7px;margin-left:8px;vertical-align:middle}
a.xsp-xplan{text-decoration:none;cursor:pointer;transition:box-shadow .18s,transform .18s}
a.xsp-xplan:hover{box-shadow:0 18px 44px rgba(84,39,112,.35);transform:translateY(-2px)}
.xsp-xplan{background:linear-gradient(135deg,#5E2C7E,#542770 45%,#3E1C54);border-radius:24px;padding:40px 44px;
color:#fff;position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr auto;gap:32px;align-items:center}
.xsp-xplan .mark{position:absolute;right:-40px;bottom:-46px;width:300px;opacity:.06;pointer-events:none;
filter:brightness(0) invert(1)}
.xsp-xplan .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--green-hover)}
.xsp-xplan h2{margin-top:10px;font-style:italic;font-weight:900;font-size:30px;letter-spacing:-.5px;color:#fff}
.xsp-xplan .chips{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.xsp-xplan .chip{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);border-radius:999px;
padding:8px 14px;font-size:12.5px;font-weight:700}
.xsp-xplan .price{position:relative;text-align:right}
.xsp-xplan .amt{font-style:italic;font-weight:900;font-size:34px}
.xsp-xplan .per{font-size:15px;font-weight:700;opacity:.85;font-style:normal}
.xsp-xplan .alt{font-size:13px;font-weight:700;color:rgba(255,255,255,.75);margin-top:4px}
.xsp-xplan .xsp-cta{margin-top:14px}
.xsp-cross{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.xsp-cross .xsp-promo .t{font-size:16.5px}
@media (max-width:809px){
.xsp-hubhero-grid{grid-template-columns:1fr;gap:28px;padding:32px 20px 52px}
.xsp-hubhero-grid .xsp-h1{font-size:34px}
.xsp-hub-photo{min-height:0}
.xsp-hub-photo .ph{height:200px}
.xsp-cut{height:44px;clip-path:polygon(0 55%,100% 0,100% 100%,0 100%)}
.xsp-promise-in{padding:0 20px}
.xsp-promise-items{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.xsp-hubsec-in{padding:0 20px}
.xsp-grid3,.xsp-grid4{grid-template-columns:1fr;gap:10px;margin-top:14px}
.xsp-xplan{grid-template-columns:1fr;padding:28px 22px;border-radius:20px}
.xsp-xplan .price{text-align:left}
.xsp-cross{grid-template-columns:1fr}
}

.xsp-bookcol.pricing .price-row{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.xsp-bookcol.pricing .amt{font-style:italic;font-weight:900;font-size:38px;color:var(--ink)}
.xsp-bookcol.pricing .per{font-weight:700;font-size:14px;color:var(--body)}
.xsp-bookcol.pricing .alt{font-size:13px;font-weight:600;color:var(--body);margin-top:4px}
.xsp-benefits{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.xsp-benefit{border:1px solid var(--rule);border-radius:16px;padding:18px;background:#fff;display:flex;gap:12px}
.xsp-benefit .c{width:18px;height:18px;flex:none;border-radius:50%;background:var(--green);color:#fff;
font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.xsp-benefit .t{font-weight:800;font-size:15px;color:var(--ink)}
.xsp-benefit .d{font-size:13px;line-height:1.55;font-weight:500;color:var(--body);margin-top:4px}
.xsp-usecases{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
.xsp-usecase{border:1px solid var(--rule);border-radius:16px;padding:20px;background:#fff;display:flex;
flex-direction:column;gap:8px}
.xsp-usecase .t{font-weight:800;font-size:16.5px;color:var(--ink)}
.xsp-usecase .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body)}
.xsp-value{background:linear-gradient(135deg,#5E2C7E,#542770 45%,#3E1C54);border-radius:24px;
padding:36px 40px;color:#fff;margin-top:20px}
.xsp-value .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--green-hover)}
.xsp-value h3{margin-top:10px;font-style:italic;font-weight:900;font-size:26px;letter-spacing:-.5px;color:#fff}
.xsp-value .stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;margin-top:22px}
.xsp-value .n{font-style:italic;font-weight:900;font-size:26px;color:#fff}
.xsp-value .cap{font-size:12.5px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.75);margin-top:6px}
.xsp-joinband{background:var(--ink)}
.xsp-joinband-in{max-width:1280px;margin:0 auto;padding:20px 40px;display:flex;align-items:center;
justify-content:space-between;gap:24px;flex-wrap:wrap}
.xsp-joinband b{font-weight:800;font-size:15px;color:#fff}
.xsp-joinband span{font-size:13px;font-weight:500;color:rgba(255,255,255,.6)}
@media (max-width:809px){
.xsp-bookcol.pricing{display:block !important;margin:28px 0 0}
.xsp-benefits,.xsp-usecases{grid-template-columns:1fr;gap:12px}
.xsp-value{padding:26px 22px;border-radius:20px}
.xsp-value .stats{grid-template-columns:1fr;gap:18px}
.xsp-joinband-in{padding:20px;flex-direction:column;align-items:flex-start;gap:12px}
}