/* MotorSales.AI /dev: demo-v2 design layer.
   Part 1: shared nav + footer (every page, namespaced .v2-*).
   Part 2: .v2t theme that re-skins the styles.css pages to match demo-v2. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 900;font-display:swap;src:url("/site/assets/fonts/montserrat-latin.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/site/assets/fonts/open-sans-latin.woff2") format("woff2")}

/* ---------- 1. Shared chrome ---------- */
.v2-wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:720px){.v2-wrap{padding:0 16px}}
.v2-head{position:sticky;top:0;z-index:250;background:#0E0B14;border-bottom:1px solid rgba(255,255,255,.08);font-family:'Open Sans',system-ui,sans-serif;transition:box-shadow .2s}
.v2-head.scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.v2-head *{box-sizing:border-box}
.v2-head-in{display:flex;align-items:center;gap:20px;min-height:76px}
.v2-brand{display:inline-flex;align-items:center;min-height:44px;flex:none;text-decoration:none}
.v2-logo{display:block;height:38px;width:auto;filter:brightness(0) invert(1)}
.v2-nav{flex:1;min-width:0}
.v2-menu{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.v2-menu > li{position:relative}
.v2-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:#CFC8D3;font:600 15px 'Open Sans',system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.v2-link:hover,.v2-dd.open .v2-dd-btn{color:#fff;background:rgba(255,255,255,.06)}
.v2-link[aria-current="page"],.v2-dd.is-current .v2-dd-btn{color:#fff;box-shadow:inset 0 -2px 0 #FF5C93}
.v2-chev{transition:transform .15s}
.v2-dd.open .v2-chev{transform:rotate(180deg)}
.v2-dd-panel{display:none;position:absolute;left:-8px;top:calc(100% + 10px);width:560px;padding:12px;border-radius:18px;background:#fff;box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 0 1px rgba(14,11,20,.06)}
.v2-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.v2-dd.open .v2-dd-panel{display:block}
html:not(.js) .v2-dd:hover .v2-dd-panel,html:not(.js) .v2-dd:focus-within .v2-dd-panel{display:block}
.v2-dd-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0;padding:0;list-style:none}
.v2-dd-list a{display:block;padding:10px 12px;border-radius:12px;text-decoration:none;color:#0E0B14}
.v2-dd-list a b{display:block;font:800 15px Montserrat,system-ui,sans-serif}
.v2-dd-list a span{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:#4E4753}
.v2-dd-list a:hover,.v2-dd-list a:focus-visible{background:#FBF2F6}
.v2-dd-list a[aria-current="page"]{background:#FFF0F6;box-shadow:inset 3px 0 0 #D1145A}
.v2-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.v2-login{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;color:#CFC8D3;font:700 14px 'Open Sans',system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.v2-login:hover{color:#fff}
.v2-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;font:700 14px 'Open Sans',system-ui,sans-serif;text-decoration:none;white-space:nowrap;border:1.5px solid transparent;cursor:pointer}
.v2-btn-p{background:#D1145A;color:#fff}.v2-btn-p:hover{background:#B30F4C;color:#fff}
.v2-btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}.v2-btn-g:hover{border-color:#fff;color:#fff}
.v2-burger{display:none;width:44px;height:44px;padding:0;border:1.5px solid rgba(255,255,255,.25);border-radius:12px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.v2-burger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.v2-head.menu-open .v2-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.v2-head.menu-open .v2-burger span:nth-child(2){opacity:0}
.v2-head.menu-open .v2-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.v2-mobile{display:none;border-top:1px solid rgba(255,255,255,.08);background:#0E0B14;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;padding:8px 0 24px}
.v2-m-h{margin:18px 0 8px;font:700 12px 'Open Sans',sans-serif;letter-spacing:2.6px;text-transform:uppercase;color:#FF5C93}
.v2-m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;margin:0;padding:0;list-style:none}
.v2-m-grid a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px;color:#fff;font:600 16px 'Open Sans',sans-serif;text-decoration:none;background:rgba(255,255,255,.04)}
.v2-m-grid a[aria-current="page"]{background:rgba(209,20,90,.25);box-shadow:inset 3px 0 0 #FF5C93}
.v2-m-demo{display:flex;width:100%;margin-top:22px;min-height:52px;font-size:16px}
@media (max-width:1100px){
  .v2-nav,.v2-demo{display:none}
  .v2-burger{display:inline-flex}
  .v2-head.menu-open .v2-mobile{display:block}
  html:not(.js) .v2-mobile{display:block}
  html:not(.js) .v2-burger{display:none}
}
@media (max-width:560px){.v2-login{padding:0 2px}.v2-actions{gap:8px}}
@media (max-width:420px){.v2-m-grid{grid-template-columns:minmax(0,1fr)}.v2-logo{height:32px}.v2-head-in{gap:10px;min-height:68px}.v2-btn-g{padding:0 14px}}
html.v2-lock,html.v2-lock body{overflow:hidden}
.v2-head a:focus-visible,.v2-head button:focus-visible,.v2-foot a:focus-visible{outline:3px solid #FF8AB2;outline-offset:2px}

.v2-foot{background:#0E0B14;color:#CFC8D3;padding:64px 0 40px;border-top:1px solid rgba(255,255,255,.08);font:400 14px/1.6 'Open Sans',system-ui,sans-serif;text-align:left}
.v2-foot *{box-sizing:border-box}
.v2-foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:36px 48px}
@media (max-width:1000px){.v2-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.v2-foot-grid{grid-template-columns:minmax(0,1fr)}}
.v2-foot h2{margin:0 0 12px;font:800 13px 'Open Sans',sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#fff}
.v2-foot .v2-foot-h{margin:0 0 12px;font:800 13px 'Open Sans',sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#fff}
.v2-foot .v2-foot-h2b{margin-top:24px}
.v2-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.v2-foot li{color:#CFC8D3}
.v2-foot a{color:#CFC8D3;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.v2-foot a:hover{color:#fff}
.v2-foot p{margin:14px 0 0;color:#CFC8D3}
.v2-foot .v2-brand{min-height:0}
.v2-foot .v2-logo{height:44px}
.v2-foot-badges{display:flex;flex-wrap:wrap;gap:8px}
.v2-foot-badges span{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:700;color:#E7E1EA}
.v2-foot-apps{display:flex;flex-wrap:wrap;gap:8px 16px}
.v2-foot-legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#A39BA9}
.v2-foot-legal p{margin:0 0 6px;color:#A39BA9}
.v2-subbar{background:#17121F;color:#CFC8D3;font:600 13px 'Open Sans',sans-serif}
.v2-subbar .v2-wrap{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;align-items:center;min-height:40px}
.v2-subbar a{color:#FF8AB2}

/* ---------- 2. Theme for the styles.css pages ---------- */
.v2t{
  --pink:#D1145A;--hot:#FF2E78;--pink-text:#B30F4C;--pink-tint:#FFF0F6;--pink-line:#F6C9DA;
  --purple:#6C2BD9;--purple-tint:#F3EEFF;--purple-line:#E3D6FB;
  --grad:linear-gradient(100deg,#D1145A 0%,#6C2BD9 100%);
  --ink:#0E0B14;--ink-2:#17121F;--ink-soft:#4E4753;--ink-faint:#6B6470;
  --paper:#FBF8FA;--line:#ECE5EE;--line-strong:#D9D2DC;
  --on-ink-soft:#CFC8D3;--on-ink-faint:#A39BA9;
  --green:#14B86A;
  --maxw:1240px;--gutter:32px;--r2:12px;--r3:22px;
  --t-h2:clamp(34px,4.2vw,56px);--t-h3:clamp(22px,2.1vw,28px);
  --e-pink:0 14px 30px -12px rgba(209,20,90,.5);
  --header-h:76px;
  --mono:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:#fff;
}
@media (max-width:720px){.v2t{--gutter:16px}}
.v2t h1,.v2t h2{font-weight:900;letter-spacing:-.035em}
.v2t h3{font-weight:800;letter-spacing:-.02em}
.v2t .h2{line-height:1.02}
.v2t .kicker-sm,.v2t .kicker{display:block;font:700 12px/1.4 'Open Sans',system-ui,sans-serif;letter-spacing:2.6px;text-transform:uppercase;color:#B30F4C}
.v2t .btn{border-radius:12px;font-family:'Open Sans',system-ui,sans-serif;font-weight:700}
.v2t .btn-primary{--btn-bg:#D1145A;--btn-bd:#D1145A}
.v2t .btn-primary:hover{--btn-bg:#B30F4C;--btn-bd:#B30F4C}
.v2t .section-soft{background:#FBF8FA}
.v2t .mobile-cta{border-radius:12px;background:#D1145A}
.v2t .mobile-cta:hover{background:#B30F4C}

/* dark demo-v2 hero on every page */
.v2t .hero,.v2t .prod-hero{position:relative;overflow:hidden;background:radial-gradient(700px 520px at 88% 18%,rgba(229,19,95,.42),rgba(229,19,95,0) 70%),radial-gradient(640px 520px at 62% 92%,rgba(108,43,217,.45),rgba(108,43,217,0) 70%),radial-gradient(520px 380px at 0% 0%,rgba(108,43,217,.22),rgba(108,43,217,0) 70%),#0E0B14;border-bottom:0;box-shadow:none;padding-top:80px;padding-bottom:96px}
.v2t .prod-hero::after{display:none}
.v2t .hero h1,.v2t .prod-hero h1{color:#fff;font-weight:900;letter-spacing:-.04em;line-height:1}
.v2t .hero h1{font-size:clamp(40px,5.4vw,72px)}
.v2t .prod-hero h1{font-size:clamp(38px,4.6vw,62px)}
.v2t .hero .grad-text,.v2t .prod-hero .grad-text{background:linear-gradient(90deg,#FF2E78,#A66BFF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.v2t .hero .lede,.v2t .prod-hero .lede{color:#C9C1CE}
.v2t .hero .kicker,.v2t .prod-hero .kicker,.v2t .hero .kicker-sm{color:#FF5C93}
.v2t .hero .hero-note,.v2t .prod-hero .hero-note{color:#A39BA9}
.v2t .hero .hero-note a,.v2t .prod-hero .hero-note a{color:#fff}
.v2t .hero .btn-outline,.v2t .prod-hero .btn-outline{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.35);--btn-bg:transparent}
.v2t .hero .btn-outline:hover,.v2t .prod-hero .btn-outline:hover{--btn-bd:#fff;--btn-bg:rgba(255,255,255,.06)}
.v2t .hero .link-inline,.v2t .prod-hero .link-inline{color:#CFC8D3}
.v2t .prod-hero .price-badge,.v2t .hero .price-badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#E7E1EA;font-family:'Open Sans',sans-serif;font-weight:700;letter-spacing:.02em;font-size:13px}
.v2t .prod-hero .users-pill{background:rgba(209,20,90,.2);border-color:#FF5C93;color:#fff}
.v2t .prod-hero .mock-cap,.v2t .hero .mock-cap,.v2t .prod-hero p.mock-cap{color:#B9B1BE}
.v2t .prod-hero .sf,.v2t .prod-hero .device,.v2t .prod-hero .call-card{box-shadow:0 60px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08)}
.v2t .prod-hero .visually-hidden{color:#fff}

/* closing banners and existing dark moments */
.v2t .final-banner{background:radial-gradient(800px 500px at 15% 100%,rgba(108,43,217,.5),rgba(108,43,217,0) 70%),radial-gradient(800px 500px at 90% 0%,rgba(229,19,95,.45),rgba(229,19,95,0) 70%),#0E0B14;padding:96px 0}
.v2t .final-banner h2{font-weight:900;letter-spacing:-.035em}
.v2t .final-banner .kicker-sm{color:#FF8AB2}
.v2t .final-banner span{color:#CFC8D3}
.v2t .section-ink,.v2t .trustbar{background:#0E0B14}
.v2t .signup-left{background:#0E0B14}

/* checkout keeps its layout; only the frame changes */
.v2t.checkout-page .co{padding-top:32px}

/* Enquiry Hub: customer photos drawn as a chat mock (replaces stock photos) */
.v2t .v2-photo-mock{margin:0}
.v2-pm-chat{border-radius:22px;background:#F4EFF6;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 40px 90px -40px rgba(14,11,20,.35)}
.v2-pm-row{display:flex;gap:10px;align-items:flex-end}
.v2-pm-out{justify-content:flex-end}
.v2-pm-av{flex:none;width:36px;height:36px;border-radius:50%;background:#FCE4EE;color:#B30F4C;font:800 12px Montserrat,sans-serif;display:flex;align-items:center;justify-content:center}
.v2-pm-bubble{max-width:82%;background:#fff;padding:10px;border-radius:16px 16px 16px 4px;font-size:14px;line-height:1.45;color:#0E0B14}
.v2-pm-team{background:#DCF7E6;border-radius:16px 16px 4px 16px;padding:10px 13px}
.v2-pm-bubble small{display:block;margin-top:6px;font-size:11px;color:#4E4753}
.v2-pm-team small{color:#1E6B3D}
.v2-pm-shots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.v2-pm-shots svg{display:block;width:100%;height:auto;border-radius:10px}
.v2-photo-mock figcaption{margin-top:12px;font-size:13px;color:#4E4753}
.v2t .cc-btn{width:auto;min-width:56px;height:44px;padding:0 18px;border-radius:999px;font:700 13px/1 "Open Sans",system-ui,sans-serif}
.v2t .prod-hero .src,.v2t .hero .src{color:#A39BA9}
.v2-foot .v2-foot-aft{margin-top:12px;font-size:13px}
.v2-foot .v2-foot-aft a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.v2-foot .v2-foot-aft a:hover{border-bottom-color:#fff}
/* FAQ answers: "Related:" internal-link line sits close to its answer */
details p.faq-more{margin-top:-10px!important;font-size:14px}

/* ---------- 3. Mobile only (<1024px). Added by the mobile pass, 7 Oct 2026. ----------
   Everything below sits inside max-width media queries, so desktop (>=1024px) is untouched.
   Shared chrome first, then page components (scoped by their own classes). */
@media (max-width:1023px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  /* forms: 16px stops iOS zooming into the field */
  .form-grid input,.form-grid select,.form-grid textarea,.v2t input:not([type=checkbox]):not([type=radio]),.v2t select,.v2t textarea{font-size:16px}
  /* sticky bar and package tray never sit on top of the open menu */
  html.v2-lock .mobile-cta,html.v2-lock .pkg-tray,html.v2-lock .co-mobile-bar{visibility:hidden}
  /* mobile menu: room for the home indicator, contained scrolling */
  .v2-mobile{overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  /* footer: comfortable tap targets */
  .v2-foot .v2-brand{min-height:44px}
  .v2-foot ul{gap:0}
  .v2-foot li a{display:inline-flex;align-items:center;min-height:44px}
  .v2-foot li{line-height:1.4}
  .v2-foot-apps{gap:0 20px}
  .v2-foot-apps a,.v2-foot .v2-foot-aft a{display:inline-flex;align-items:center;min-height:44px}
  .v2-foot .v2-foot-aft{margin-top:4px}
  .v2-subbar a{display:inline-flex;align-items:center;min-height:44px}
  /* cookie banner (cookieconsent v3): compact, both choices equal, 44px buttons */
  #cc-main .cm__btn{min-height:44px}
}
@media (max-width:640px){
  #cc-main .cm{max-width:none}
  #cc-main .cm__texts{padding-top:12px}
  #cc-main .cm__title{font-size:16px}
  #cc-main .cm__title+.cm__desc{margin-top:.6em}
  #cc-main .cm__desc{font-size:14px;line-height:1.45;padding-bottom:12px}
  #cc-main .cm__btn-group:first-child{flex-direction:row!important;gap:8px}
  #cc-main .cm__btn-group:first-child .cm__btn{flex:1 1 0!important}
  #cc-main .cm__btn-group:first-child .cm__btn+.cm__btn{margin:0!important}
  #cc-main .cm__btns{padding-top:12px;padding-bottom:14px}
  #cc-main .cm__btn{min-height:44px;font-size:14px}
  .v2-foot{padding:48px 0 32px}
  .v2-foot-grid{gap:28px}
  .v2-foot nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
}

/* --- 3a. Mobile: homepage, pricing, checkout, partners, guarantee --- */
/* ===== Agent A mobile proposal: index (demo-v2), pricing, checkout, partners, guarantee, v1-index =====
   Every rule sits inside a max-width media query (<=1023px), so desktop is untouched.
   The homepage keeps its CSS inline (plus many inline style="" attributes), so homepage rules are
   prefixed ":root body" and use !important only where they must beat an inline style attribute. */

/* =========================== index (homepage) =========================== */

/* Learn more links in the Extras grid: full 44px tap height on every touch size */
@media (max-width:1023px){
  :root body .msai .hx-more{min-height:44px}
  /* "See AI Engage" link in the Enquiry section: was a 22px tall text link */
  :root body .msai #enquiry a[href$="/ai-engage"]{display:inline-flex;align-items:center;min-height:44px}
  /* mock-UI micro labels (11px / 10px) raised to 12px */
  :root body .msai .journey [style*="font-size: 11px"],
  :root body .msai .toast [style*="font-size: 11px"],
  :root body .msai #enquiry .bubble-in [style*="font-size: 11px"]{font-size:12px !important}
  :root body .msai .journey [style*="800 11px"]{font-size:12px !important}
  :root body:has(.msai) > .skip-link{display:inline-flex;align-items:center;min-height:44px}
  :root body .msai .journey [style*="font-size: 10px"]{font-size:12px !important;padding:1px 5px !important}
}

/* Tablet (<=1000px, where the hero visual already stacks): phone and Priya's timeline side by side
   instead of one long column; the notification toast sits above the phone */
@media (max-width:1000px){
  :root body .msai .hero-visual{display:grid;grid-template-columns:minmax(0,340px) minmax(0,330px);grid-template-rows:auto auto;justify-content:center;align-items:start;gap:14px 24px}
  :root body .msai .hero-visual .toast{grid-column:1;grid-row:1;max-width:none;width:auto}
  :root body .msai .hero-visual .phone{grid-column:1;grid-row:2;width:auto}
  :root body .msai .hero-visual .journey{grid-column:2;grid-row:1 / span 2;align-self:center;max-width:none;width:auto}
  :root body .msai .hero-visual .screen{height:520px}
  /* £149 card: full width once the price row stacks (was a 440px card with empty space beside it) */
  :root body .msai #price .col[style*="flex: 0 1 440px"]{flex:1 1 100% !important}
}

/* Phones (<=700px) */
@media (max-width:700px){
  /* tighter vertical rhythm: 110px section padding is a whole screen of nothing on a phone */
  :root body .msai #main > div[style*="padding: 110px 0"]{padding:64px 0 !important}
  :root body .msai #main > div[style*="padding: 100px 0"]{padding:60px 0 !important}
  :root body .msai #main > #demo{padding:72px 0 !important}
  :root body .msai #main > div:first-child:has(.hero-visual){padding:40px 0 48px !important}
  :root body .msai #main > div:first-child:has(.hero-visual) > .wrap.row{gap:36px !important}
  :root body .msai #main > div:first-child:has(.hero-visual) h1 + p{font-size:17px !important;margin-top:20px !important}

  /* hero visual: swipe strip (inbox phone, then Priya's timeline peeking in from the right) */
  :root body .msai .hero-visual{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(300px,84%);justify-content:start;gap:12px 14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;
    margin:0 -16px;padding:4px 16px 20px}
  :root body .msai .hero-visual::-webkit-scrollbar{display:none}
  :root body .msai .hero-visual .phone,:root body .msai .hero-visual .journey{scroll-snap-align:start}
  :root body .msai .hero-visual .phone{border-radius:38px;padding:9px;box-shadow:0 30px 60px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
  :root body .msai .hero-visual .screen{height:430px;border-radius:30px}
  :root body .msai .hero-visual .journey{align-self:start;padding:16px 16px 14px !important;box-shadow:0 30px 60px -24px rgba(0,0,0,.75) !important}
  :root body .msai .hero-visual .toast{height:56px}
  :root body .msai .hero-visual .lead span{white-space:nowrap}

  /* "The switch": four tall one-word cards become a compact 2x2 tile grid */
  :root body .msai .grid4:not(:has(.hx-card)){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  :root body .msai .grid4 > div:not(.hx-card){min-height:0 !important;padding:18px 16px !important;border-radius:18px !important;gap:22px}
  :root body .msai .grid4 > div:not(.hx-card) h3{font-size:21px !important;letter-spacing:-.4px !important}
  :root body .msai .grid4 > div:not(.hx-card) p{font-size:14px !important;line-height:1.45 !important}
  :root body .msai #main .row[style*="margin-bottom: 48px"]{margin-bottom:28px !important;gap:20px !important}

  /* Enquiry chat mock: a little less frame */
  :root body .msai #enquiry [role="img"]{padding:14px !important;border-radius:22px !important}
  :root body .msai #enquiry .grid2[style*="margin-top: 30px"]{margin-top:22px !important}

  /* Lending Hub cards */
  :root body .msai #lending .grid2{margin-top:32px !important;gap:12px !important}
  :root body .msai #lending .grid2 > div{padding:22px 20px !important}
  :root body .msai #lending .grid2 > div > div:first-child{font-size:34px !important}
  :root body .msai #lending .grid2 h3{font-size:22px !important}
  :root body .msai #lending .pipe{gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 2px}
  :root body .msai #lending .pipe::-webkit-scrollbar{display:none}
  :root body .msai #lending .pipe > *{flex:none}
  :root body .msai #lending .pipe span.step{padding:10px 13px;font-size:14px;white-space:nowrap}
  :root body .msai #lending .wrap > div[style*="margin-top: 36px"]{padding:20px !important;margin-top:20px !important}

  /* "Real screens" tabs: one swipeable row instead of a ragged two-line wrap */
  :root body .msai #tour .wrap > div:first-child{margin-bottom:24px !important;gap:20px !important}
  :root body .msai #tour .tablist{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;scroll-padding:0 16px}
  :root body .msai #tour .tablist::-webkit-scrollbar{display:none}
  :root body .msai #tour .tabbtn{flex:none;white-space:nowrap}
  :root body .msai #tour .row{gap:24px !important}
  :root body .msai #tour .shot-frame{padding:8px;border-radius:16px}
  :root body .msai #tour .shot-body{padding:14px}
  :root body .msai #tour .dec{gap:8px 12px}
  :root body .msai #tour .dec > .pill{margin-left:48px}
  :root body .msai #tour .tabpanel h3{font-size:24px !important}
  :root body .msai #tour .tabpanel h3 + p{font-size:16px !important}

  /* App section feature rows */
  :root body .msai #main .col > div[style*="padding: 22px; border-radius: 20px"]{padding:16px 18px !important;gap:14px !important}
  :root body .msai #main .col > div[style*="padding: 22px; border-radius: 20px"] > span{font-size:28px !important;min-width:44px !important}

  /* £149 price card */
  :root body .msai #price .col[style*="flex: 0 1 440px"] > div{padding:30px 22px !important}
  :root body .msai #price .grid2{margin-top:28px !important;gap:20px !important}

  /* Setup steps */
  :root body .msai #main .col > div[style*="padding: 26px; border-radius: 20px"]{padding:18px !important;gap:14px !important}
  :root body .msai #main .col > div[style*="padding: 26px; border-radius: 20px"] > span{width:44px !important;height:44px !important;font-size:19px !important}
  :root body .msai #main .col > div[style*="padding: 26px; border-radius: 20px"] h3{font-size:19px !important}
  :root body .msai #main .col > div[style*="padding: 26px; border-radius: 22px"]{padding:20px !important}

  /* FAQ */
  :root body .msai details summary{padding:18px 40px 18px 0;font-size:17px}
  :root body .msai details summary::after{top:12px}
}

/* Extras: 8 full-width cards (about 1,300px of scrolling) become a 2-column grid of compact cards */
@media (max-width:620px){
  :root body .msai #extras .row{margin-bottom:28px !important}
  :root body .msai #extras .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  :root body .msai #extras .hx-card{padding:16px 14px;border-radius:16px}
  :root body .msai #extras .hx-card > div:first-child{flex-direction:column;align-items:flex-start !important;gap:2px}
  :root body .msai #extras .hx-card h3{font-size:16px !important;letter-spacing:-.2px}
  :root body .msai #extras .hx-card p{font-size:14px !important;line-height:1.45 !important}
  :root body .msai #extras .hx-more{align-self:stretch;justify-content:center;margin-top:12px;padding:0 10px}
}

/* Small phones: hero and closing CTAs as full-width stacked buttons */
@media (max-width:480px){
  :root body .msai #main > div:first-child:has(.hero-visual) .btn,
  :root body .msai #demo .btn,
  :root body .msai #main a.btn-d{flex:1 1 100%}
}

/* =========================== pricing =========================== */
/* scoped with body:has(.hero-pricing), the pricing hero is unique to this page */
@media (max-width:1023px){
  /* "Learn more" links in the package builder: 33px -> 44px tap height (same look) */
  body:has(.hero-pricing) .ci-more{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin:-8px 0}
  /* 11px labels raised to 12px */
  body:has(.hero-pricing) .pc-tag,
  body:has(.hero-pricing) .calc-tier small,
  body:has(.hero-pricing) .ci-users,
  body:has(.hero-pricing) .ct-label,
  body:has(.hero-pricing) .compare thead th{font-size:12px}
  /* guarantee link under the price cards: taller hit area, same look */
  body:has(.hero-pricing) .guarantee-note a,
  body:has(.hero-pricing) .r-item a{display:inline-block;padding:12px 0;margin:-12px 0}
}
@media (max-width:700px){
  /* price cards: less inner padding so each plan fits closer to one screen */
  body:has(.hero-pricing) .price-card{padding:26px 22px 22px;gap:12px}
  /* package builder items: slightly tighter */
  body:has(.hero-pricing) .calc-item{padding:16px 16px 14px}
  /* comparison "From" row: label + value on one line, the small print under the value (was squeezed into 3 columns) */
  body:has(.hero-pricing) .compare tfoot td{flex-wrap:wrap;row-gap:0}
  body:has(.hero-pricing) .compare tfoot td small{flex:1 0 100%;text-align:right;font-weight:400}
}

/* =========================== checkout (CSS only, behaviour untouched) =========================== */
@media (max-width:1023px){
  /* "/month + VAT" and "+ VAT" were 11.2px */
  .v2t.checkout-page .cop-price small,
  .v2t.checkout-page .cs-total strong small{font-size:12px}
  /* "Need more users?" text button: 44px hit area without moving the layout */
  /* sticky summary bar buttons measured 43.x px: make them a clear 48px */
  .v2t.checkout-page .co-mobile-bar .cmb-sum,.v2t.checkout-page .co-mobile-bar .cmb-go{min-height:48px}
  .v2t.checkout-page .cuc-toggle{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0}
}

/* =========================== partners =========================== */
@media (max-width:1023px){
  .v2t .pp-hero .mock-cap{font-size:12px}
}
/* hero finance-panel mock: rows were squeezed into three columns (status | name | price), so names
   broke one word per line. Now: name and status pill stacked on the left, price on the right. */
@media (max-width:560px){
  .v2t .pp-hero .mock-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:10px 12px}
  .v2t .pp-hero .mock-row .mr-main{grid-column:1;grid-row:1}
  .v2t .pp-hero .mock-row .status{grid-column:1;grid-row:2;justify-self:start}
  .v2t .pp-hero .mock-row .mr-fig{grid-column:2;grid-row:1 / span 2;align-self:center}
  .v2t .pp-hero .mock-row .mr-name{white-space:normal}
}

/* =========================== guarantee =========================== */
@media (max-width:1023px){
  /* "see pricing" and the WhatsApp number under the closing button: taller hit areas, same look */
  .v2t span.or a[href]{display:inline-block;padding:12px 0;margin:-12px 0}
}

/* --- 3b. Mobile: integrations, ai-engage, enquiry-hub, lending-hub, agent-hub, ai-connectors --- */
/* ===== Agent B proposal: integrations, ai-engage, enquiry-hub, lending-hub, agent-hub, ai-connectors =====
   Every rule is inside a max-width query (desktop >=1024 untouched).
   Page keys (each class exists only on that page): .sf-int integrations, .sf-eng ai-engage, .sf-enq enquiry-hub,
   .sf-lend lending-hub, .sf-agent agent-hub, .sf-con ai-connectors. */

/* --- ALL 6 PAGES: hero mock micro-labels up to 12px (scoped to each page's own hero mock class) --- */
@media (max-width:1023px){
  :root .sf:is(.sf-int,.sf-eng,.sf-enq,.sf-lend,.sf-agent,.sf-con) :is(
    .sf-h,.sf-h b,.sf-badge,.sf-tag,.sf-vrm,.r-meta,.r-name small,.sf-seg span,.sf-tile,.sf-live,.sf-btn.sm,
    .sf-msg .tag,.sf-msg .t,.sf-kv .k,.sf-kv .v small,.sf-title small,.sf-table th,.sf-chip,.sf-chip b,
    .c-tool-n,.c-tool-n b,.sf-meta,.sf-meta span,.sf-meta b,.sf-sel .k,.sf-sel .v,.l-tabs,.l-tabs span,
    .sf-steps,.sf-steps span,.sf-top .sf-user b,.int-flow,.int-flow span,.int-flow b,.sf-card .n small
  ){font-size:12px}
}

/* --- ALL 6 PAGES: shared-class small print raised to 12px, scoped to these pages only
       (shared fix candidate: .mock-cap / .t-label / .src / .hero-note .src / .photo-pair figcaption are also on agent A/C pages) --- */
@media (max-width:1023px){
  body:has(.sf-int,.sf-eng,.sf-enq,.sf-lend,.sf-agent,.sf-con) :is(
    .prod-visual .mock-cap,.t-label,.src,.hero-note .src,.photo-pair figcaption
  ){font-size:12px}
}

/* --- ALL 6 PAGES: feature lists — compact phone card (icon beside the title) so 6-7 cards take ~25% less scrolling
       (shared fix candidate: .feat-grid is also on call-hub, inventory-hub, partners, storefront-hub, vehicle-boost) --- */
@media (max-width:600px){
  body:has(.sf-int,.sf-eng,.sf-enq,.sf-lend,.sf-agent,.sf-con) .feat-grid .feat-card{
    display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;row-gap:8px;align-items:center;padding:22px 20px
  }
  body:has(.sf-int,.sf-eng,.sf-enq,.sf-lend,.sf-agent,.sf-con) .feat-grid .feat-card > *{grid-column:1 / -1;margin-top:0}
  body:has(.sf-int,.sf-eng,.sf-enq,.sf-lend,.sf-agent,.sf-con) .feat-grid .feat-card > .x-icon{grid-column:1;margin:0}
  body:has(.sf-int,.sf-eng,.sf-enq,.sf-lend,.sf-agent,.sf-con) .feat-grid .feat-card > .x-icon + h3{grid-column:2;margin:0}
}

/* --- INTEGRATIONS: recipe labels + "Example recipes" badge to 12px --- */
@media (max-width:1023px){
  .int-recipe small,.price-badge.int-label{font-size:12px}
}

/* --- ENQUIRY HUB: "Photos, straight from the conversation" chat was squeezed into half width by the
       .photo-pair 2-col grid; give it the full column. Open-rate stat figure loses the UA 40px figure margin. --- */
@media (max-width:1023px){
  .photo-pair.v2-photo-mock{grid-template-columns:minmax(0,1fr)}
  .v2-photo-mock .v2-pm-chat{width:100%;max-width:460px}
  .v2-photo-mock .v2-pm-bubble small{font-size:12px}
  .photo-pair.eh-pair{margin:0}
}

/* --- LENDING HUB: showroom figure loses the UA 40px figure margin (was 278px wide at 390) so the
       swipeable finance cards get the full width; small labels to 12px --- */
@media (max-width:1023px){
  .photo-pair.lh-pair{margin:0}
  .lh-show :is(.lh-specs dt,.lh-chips span,.lh-rib,.lh-tags span,.lh-live,.lh-swipe){font-size:12px}
  .lh-cap,body:has(.sf-lend) .j-num{font-size:12px}
}

/* --- LENDING HUB: "From proposal to funded deal" 5 steps become a numbered vertical timeline --- */
@media (max-width:600px){
  body:has(.sf-lend) .journey{gap:0}
  body:has(.sf-lend) .journey .j-step{
    display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:16px;
    padding:0 0 22px;border-top:0
  }
  body:has(.sf-lend) .journey .j-step::before{left:15px;top:32px;bottom:0;width:2px;height:auto;background:var(--pink-line)}
  body:has(.sf-lend) .journey .j-step:last-child{padding-bottom:0}
  body:has(.sf-lend) .journey .j-step:last-child::before{display:none}
  body:has(.sf-lend) .journey .j-num{
    grid-row:1 / span 2;align-self:start;display:grid;place-items:center;width:32px;height:32px;margin:0;
    border-radius:50%;background:var(--pink);color:#fff;font:700 14px/1 var(--display);letter-spacing:0
  }
  body:has(.sf-lend) .journey .j-step h3{grid-column:2;margin:5px 0 4px}
  body:has(.sf-lend) .journey .j-step p{grid-column:2}
}

/* --- INTEGRATIONS: closing-strip "No commitments, 30-day rolling" link was a 22px tap target at tablet width --- */
@media (max-width:1023px){
  .closing-strip .cs-item a{display:inline-block;padding:12px 0}
}

/* --- ENQUIRY HUB: WhatsApp 98% vs email 21% stat cards sit side by side on phones (a direct comparison, and half the scroll) --- */
@media (max-width:600px){
  .eh-pair .eh-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .eh-pair .eh-card{padding:16px 14px 14px}
  .eh-pair .eh-ico{width:38px;height:38px;border-radius:12px}
  .eh-pair .eh-ico svg{width:20px;height:20px}
  .eh-pair .eh-lbl{margin-top:14px;font-size:13px}
  .eh-pair .eh-num{font-size:clamp(38px,11.5vw,48px)}
  .eh-pair .eh-rate{font-size:17px}
}

/* --- LENDING HUB: showroom "HP (5) / PCP (4)" chips sit under the heading, left-aligned, when it wraps --- */
@media (max-width:760px){
  .lh-show .lh-oh .lh-chips{margin-left:0}
}

/* --- LENDING HUB: page CSS meant to show "Swipe to compare options" under 760px, but a later
       .lh-swipe{display:none} overrides it; show the hint so people know the finance cards swipe --- */
@media (max-width:760px){
  .lh-show p.lh-swipe{display:block;margin:-4px 0 10px;font-size:12px}
}

/* --- AI CONNECTORS: the "CRM" app tile is a fixed 24-28px square; let it widen so the 12px label fits --- */
@media (max-width:1023px){
  :root .sf-con .sf-tile{width:auto;min-width:28px;padding:0 5px}
  :root .sf-con .c-tool .sf-tile{min-width:24px}
}

/* --- 3c. Mobile: appraisal-hub, call-hub, storefront-hub, inventory-hub, vehicle-boost --- */
/* =====================================================================
   Agent C mobile proposal: appraisal-hub, call-hub, storefront-hub,
   inventory-hub, vehicle-boost. Every rule is inside a max-width query
   (desktop >=1024px untouched) and scoped to its page with body:has():
     appraisal-hub  body:has(.ap-sec)
     call-hub       body:has(.cf-wrap)
     storefront-hub body:has(.sf-x-hero)
     inventory-hub  body:has(.ih-live)
     vehicle-boost  body:has(.b-sel)
   ===================================================================== */

/* ---------- Shared across agent C pages: readable mock-UI micro text (>=12px) ---------- */
@media (max-width:1023px){
  /* .sf product mocks (appraisal, inventory, vehicle boost): 11.5px floor -> 12px */
  body:is(:has(.ap-sec),:has(.ih-live),:has(.b-sel)) .sf :is(.sf-h,.sf-title small,.sf-photo .n,.sf-btn.sm,.sf-badge,.sf-vrm,.sf-meta,.sf-meta span,.sf-chip,.sf-chip b,.sf-table th,.sf-table small,.sf-row .r-meta,.b-sel-n,.a-line,.sf-top .sf-user b,.sf-sel .v,.sf-toggle,.sf-msg .t,.sf-kv .k,.sf-kv .v small){font-size:12px}
  body:is(:has(.ap-sec),:has(.ih-live),:has(.b-sel)) .sf .illus{font-size:12px}
  /* key/value tiles under hero mocks */
  body:is(:has(.ap-sec),:has(.ih-live)) .mock-kv .k{font-size:12px;letter-spacing:.04em}
  /* "Illustrative - demo data" captions */
  body:is(:has(.ap-sec),:has(.cf-wrap),:has(.sf-x-hero),:has(.ih-live),:has(.b-sel)) .mock-cap{font-size:12px}
}

/* ---------- Shared swipe-strip pattern (phones only) ----------
   Long stacks of same-shape cards become a horizontal swipe row with the
   next card peeking in, so a 6-12 card list takes one screen, not four. */
@media (max-width:767px){
  body:has(.ap-sec) .ap-feat,
  body:has(.ap-sec) .ap-steps,
  body:has(.sf-x-hero) .sf-x-feat8,
  body:has(.sf-x-hero) .sf-x-inc,
  body:is(:has(.ih-live),:has(.cf-wrap),:has(.b-sel)) .feat-grid{
    display:flex;grid-template-columns:none;gap:12px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter,16px);
    margin-inline:calc(-1 * var(--gutter,16px));padding:6px var(--gutter,16px) 18px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    background:none;border:0;border-radius:0;
  }
  body:has(.ap-sec) .ap-feat::-webkit-scrollbar,
  body:has(.ap-sec) .ap-steps::-webkit-scrollbar,
  body:has(.sf-x-hero) .sf-x-feat8::-webkit-scrollbar,
  body:has(.sf-x-hero) .sf-x-inc::-webkit-scrollbar,
  body:is(:has(.ih-live),:has(.cf-wrap),:has(.b-sel)) .feat-grid::-webkit-scrollbar{display:none}
  body:has(.ap-sec) .ap-feat > *,
  body:has(.sf-x-hero) .sf-x-feat8 > *,
  body:has(.sf-x-hero) .sf-x-inc > *,
  body:is(:has(.ih-live),:has(.cf-wrap),:has(.b-sel)) .feat-grid > *{flex:0 0 min(80%,330px);scroll-snap-align:start}
  /* feat-grid used 1px gaps on a tinted background as dividers: give each card its own frame */
  body:is(:has(.ih-live),:has(.cf-wrap),:has(.b-sel)) .feat-grid > .feat-card,
  body:has(.sf-x-hero) .sf-x-feat8 > .feat-card{border:1px solid #ECE5EE;border-radius:18px;padding:22px 20px;box-shadow:0 18px 40px -30px rgba(14,11,20,.35)}
}

/* =====================================================================
   APPRAISAL HUB
   ===================================================================== */
@media (max-width:1023px){
  /* micro labels in the page's own mocks -> 12px */
  body:has(.ap-sec) :is(.ap-answers small,.ap-tag,.ap-lbl,.ap-est small,.ap-vals small,.ap-margin small,.ap-shotsteps span,.ap-pass,.ap-plate span,.ap-illus){font-size:12px}
  body:has(.ap-sec) .ap-capl,body:has(.ap-sec) .ap-cap{font-size:12.5px}
  /* "Book a demo ->" links: 44px tap height, underline kept */
  body:has(.ap-sec) .ap-link{min-height:44px;margin-top:10px;padding:0;border-bottom:0;text-decoration:underline;text-decoration-color:rgba(209,20,90,.35);text-decoration-thickness:2px;text-underline-offset:6px}
}
@media (max-width:767px){
  /* section header: CTA button full width under the copy */
  body:has(.ap-sec) .ap-head{margin-bottom:28px;gap:20px}
  body:has(.ap-sec) .ap-head > .ap-btn{flex:1 1 100%}
  /* features: swipe cards (pattern above) + tighter cards */
  body:has(.ap-sec) .ap-fcard{padding:24px 20px;gap:12px}
  body:has(.ap-sec) .ap-also{margin-top:8px;gap:10px}
  body:has(.ap-sec) .ap-also > div{padding:16px}
  /* how it works: 9 steps become a swipeable step row */
  body:has(.ap-sec) .ap-steps > .ap-step{flex:0 0 min(72%,280px);scroll-snap-align:start;flex-direction:column;gap:10px;padding:16px}
  body:has(.ap-sec) .ap-step h3{margin:0 0 4px}
  body:has(.ap-sec) .ap-answers{margin-top:4px;gap:10px}
  body:has(.ap-sec) .ap-answers div{padding:14px}
  body:has(.ap-sec) .ap-phones{margin-top:36px}
  body:has(.ap-sec) .ap-phone.front{width:272px}
  body:has(.ap-sec) .ap-scr{min-height:390px}
  /* journey rows: tighter rhythm */
  body:has(.ap-sec) .ap-rows{gap:56px}
  body:has(.ap-sec) .ap-row{gap:24px}
  body:has(.ap-sec) .ap-row-copy p{margin-top:14px;font-size:16px;line-height:1.6}
  /* journey mock 02: five safety checks as a 2-column grid */
  body:has(.ap-sec) .ap-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body:has(.ap-sec) .ap-checks div{gap:8px;padding:10px;align-items:flex-start}
  body:has(.ap-sec) .ap-checks i{width:22px;height:22px}
  body:has(.ap-sec) .ap-checks b{font-size:13.5px;line-height:1.25}
  body:has(.ap-sec) .ap-checks div:last-child:nth-child(odd){grid-column:1/-1}
  /* journey mock 01: equipment categories a touch denser */
  body:has(.ap-sec) .ap-cats{gap:6px}
  /* dealer success: 2x2 tiles stay, less padding */
  body:has(.ap-sec) .ap-team-grid{gap:10px}
}

/* =====================================================================
   CALL HUB
   ===================================================================== */
@media (max-width:1023px){
  body:has(.cf-wrap) .users-pill{font-size:12px}
  /* calculator +/- steppers: 44px */
  body:has(.cf-wrap) .cf-pm{width:44px;height:44px}
  /* "Rates beyond your allowance": full 44px tap row */
  body:has(.cf-wrap) .cu-rates summary{padding:11px 0;font-size:15px;line-height:22px}
}
@media (max-width:767px){
  /* plan picker: Starter / Team side by side (shorter calculator) */
  body:has(.cf-wrap) .cf-group[aria-label="Call Hub plan"] .cf-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =====================================================================
   STOREFRONT HUB  (no "AI" wording anywhere: this file adds no text)
   ===================================================================== */
@media (max-width:1023px){
  body:has(.sf-x-hero) .sf-x-url{font-size:12px}
  body:has(.sf-x-hero) :is(.sf-x-calc-top small,.sf-x-sum small,.sf-x-lbl,.sf-x-rev-h span,.sf-x-chk li em,.sf-x-stats small,.sf-x-ptabs span,.sf-x-pill,.sf-x-prow small){font-size:12px}
}
@media (max-width:767px){
  /* "What's included" 12 cards: swipe row, slightly tighter */
  body:has(.sf-x-hero) .sf-x-inc{margin-top:32px}
  body:has(.sf-x-hero) .sf-x-inc li{padding:22px 20px}
  body:has(.sf-x-hero) .sf-x-inc li:hover{transform:none}
  body:has(.sf-x-hero) .sf-x-inc h3{margin-top:14px}
  /* 4-step finance journey: 2x2 tiles, number on top */
  body:has(.sf-x-hero) .sf-x-journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:40px}
  body:has(.sf-x-hero) .sf-x-journey li{padding:56px 14px 16px;font-size:14px}
  body:has(.sf-x-hero) .sf-x-journey li b{font-size:15px}
  body:has(.sf-x-hero) .sf-x-journey li::before{left:14px;top:16px}
  /* screens tabs: one tidy row */
  body:has(.sf-x-hero) .sf-x-tabs{flex-wrap:nowrap;gap:6px}
  body:has(.sf-x-hero) .sf-x-tab{flex:1 1 auto;padding:0 10px;font-size:13.5px}
  /* mock-up / review boxes */
  body:has(.sf-x-hero) .sf-x-two{margin-top:32px;gap:14px}
}

/* =====================================================================
   INVENTORY HUB
   ===================================================================== */
@media (max-width:1023px){
  body:has(.ih-live) .ih-chips b{font-size:12px}
  body:has(.ih-live) .ih-illus{font-size:12px;letter-spacing:.6px}
  body:has(.ih-live) .ih-rlist .ih-rn{font-size:12px}
  body:has(.ih-live) .photo-pair figcaption{font-size:12px}
  /* group jump links: 44px tap targets */
  body:has(.ih-live) .ih-chips a{min-height:44px;padding:0 16px}
}
@media (max-width:767px){
  /* group jump links: one swipeable row instead of 2-3 wrapped rows */
  body:has(.ih-live) .ih-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter,16px));padding:2px var(--gutter,16px) 6px}
  body:has(.ih-live) .ih-chips::-webkit-scrollbar{display:none}
  body:has(.ih-live) .ih-chips li{flex:none}
  body:has(.ih-live) .ih-chips a{white-space:nowrap}
  /* feature cards in each group: tighter */
  body:has(.ih-live) .ih-card{padding:16px 16px 18px;column-gap:14px}
  body:has(.ih-live) .ih-card h4{font-size:16px}
  body:has(.ih-live) .ih-mock-wrap{padding:16px}
  /* "Six reports" mock: list as a 2-column grid */
  body:has(.ih-live) .ih-rlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:8px}
  body:has(.ih-live) .ih-rlist li{padding:10px 8px;gap:8px;font-size:13.5px}
  body:has(.ih-live) .ih-rlist li + li{margin-top:0}
  body:has(.ih-live) .ih-rlist .ih-chev{display:none}
  /* "Filled from the reg" mock: field rows in 2 columns */
  body:has(.ih-live) .ih-flist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  body:has(.ih-live) .ih-flist li{padding:10px 0;border-bottom:1px solid #ECE5EE}
  body:has(.ih-live) .ih-flist li:last-child{grid-column:1/-1;border-bottom:0}
  body:has(.ih-live) .ih-flist .ih-sk{display:none}
  /* real screens: full-width, no tiny centred thumbnails */
  body:has(.ih-live) .photo-pair.screens{gap:12px;margin:0}
}

/* --- 3d. Mobile: lead integration fixes --- */
@media (max-width:1023px){
  .v2t .lh-cap{font-size:12px}
  /* pricing at tablet width: centre the single-column plan cards (were left-aligned with a gap) */
  body:has(.hero-pricing) .price-cards{margin-inline:auto}
  /* brochure cards (brochures.css loads after this file, so .v2t .brx raises specificity) */
  .v2t .brx .brx-tag{font-size:12px}
  .v2t .brx .brx-all{min-height:44px}
  /* linked headings / table labels added by the SEO pass: 44px hit area, inline padding so layout doesn't move */
  :root body .msai h3 > a,.v2t .pr-ilink{padding-block:12px}
  details p.faq-more a{padding-block:12px}
  /* menu opened after scrolling: body (overflow-x:hidden in styles.css) must not become the scroll box,
     otherwise the sticky header and menu jump off-screen. clip locks the page without that side effect. */
  html.v2-lock body{overflow:clip}
}

/* --- 3e. Burger range 1024–1100px (approved 8 Oct): same menu-after-scroll fix as above. Only applies while
   the burger menu is open (html.v2-lock), so nothing changes visually at rest. --- */
@media (min-width:1024px) and (max-width:1100px){
  html.v2-lock body{overflow:clip}
}

/* ==== BEGIN Glass Glide nav (Concept 1), approved by James 8 Oct 2026. Added by nav-build/scripts/nav_transform.py from
   the prototype's concept.css. Every rule is scoped to .c1-head, except the homepage sticky fix (.msai).
   1. Glass header that shrinks on scroll (layout height never changes, so nothing below moves)
   2. Scroll-progress bar + sliding hover/active indicator
   3. Products mega-menu (desktop >=1101px)
   4. Full-screen overlay menu (burger range <=1100px)
   5. Reduced motion
   6. Fitting it to the live header (not in the prototype) */

.c1-sprite{position:absolute;width:0;height:0;overflow:hidden}
.c1-ico{flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 1. Glass header ---------- */
/* Homepage (and demo-v2) wrap the header in <div class="msai" style="overflow-x:hidden">, which makes that div a
   scroll container, so the sticky header scrolls away today. clip hides sideways overflow the same way without that.
   Browsers without overflow:clip (Safari < 16) keep today's behaviour: hidden, so still no sideways scroll. */
@supports (overflow:clip){.msai{overflow-x:clip!important}}
.c1-head{--bar:76px;--ease:cubic-bezier(.2,.8,.2,1);background:transparent;border-bottom:0;box-shadow:none!important;pointer-events:none}
.c1-head .v2-head-in{position:relative;z-index:2;pointer-events:none}
.c1-head .v2-head-in > *,.c1-head .v2-mobile{pointer-events:auto}
.c1-head::before{content:"";position:absolute;z-index:0;left:0;right:0;top:0;height:var(--bar);background:rgba(14,11,20,.94);transition:height .4s var(--ease),background-color .4s,box-shadow .4s;pointer-events:none}
/* solid at the very top (some pages have a light body behind the header); glass once content slides under it */
.c1-head:not(.scrolled)::before{background:#0E0B14}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .c1-head.scrolled::before{background:rgba(14,11,20,.8);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px)}
}
.c1-head.scrolled::before{box-shadow:0 14px 34px -16px rgba(0,0,0,.7)}
/* hairline: white edges, pink -> purple centre */
.c1-head::after{content:"";position:absolute;z-index:0;left:0;right:0;top:0;height:1px;transform:translateY(calc(var(--bar) - 1px));background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,92,147,.42) 32%,rgba(108,43,217,.42) 68%,rgba(255,255,255,.05));transition:transform .4s var(--ease);pointer-events:none}

@media (min-width:1101px){
  .c1-head.c1-shrink{--bar:60px}
  .c1-head .v2-head-in{transition:transform .4s var(--ease)}
  .c1-head.c1-shrink .v2-head-in{transform:translateY(-8px)}
  .c1-head .v2-logo{transform-origin:0 50%;transition:transform .4s var(--ease)}
  .c1-head.c1-shrink .v2-logo{transform:scale(.88)}
}

/* ---------- 2. Progress bar + sliding indicator ---------- */
.c1-progress{position:absolute;z-index:3;left:0;right:0;top:calc(var(--bar) - 2px);height:2px;transform:scaleX(var(--p,0));transform-origin:0 50%;background:linear-gradient(90deg,#D1145A,#FF5C93 45%,#6C2BD9);box-shadow:0 0 12px rgba(255,92,147,.55);pointer-events:none;transition:top .4s var(--ease)}
.c1-head.menu-open .c1-progress{opacity:0}

.c1-ind{position:absolute;z-index:-1;left:0;top:50%;width:0;height:40px;margin-top:-20px;border-radius:11px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.3,.75,.2,1),width .42s cubic-bezier(.3,.75,.2,1),opacity .2s}
.c1-ind::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,#FF5C93,#8E4BFF)}
.c1-ind.on{opacity:1}
.c1-ind.c1-now{transition:opacity .2s}
html.c1-ready .c1-head .v2-link{background:none;box-shadow:none}
html.c1-ready .c1-head .v2-link:hover,html.c1-ready .c1-head .v2-dd.open .v2-dd-btn,html.c1-ready .c1-head .v2-link[aria-current="page"],html.c1-ready .c1-head .v2-dd.is-current .v2-dd-btn{color:#fff}
.c1-head .v2-btn-p{background:linear-gradient(100deg,#D1145A,#B0127A);box-shadow:0 10px 24px -12px rgba(209,20,90,.8);transition:box-shadow .25s,transform .25s}
.c1-head .v2-btn-p:hover{background:linear-gradient(100deg,#B30F4C,#8F1066);box-shadow:0 14px 30px -12px rgba(209,20,90,.95)}
.c1-head .v2-btn-g{background:rgba(255,255,255,.03)}

/* ---------- 3. Products mega-menu ---------- */
@media (min-width:1101px){
  .c1-head .v2-dd{position:static}
  .c1-head .c1-mega{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:8px;left:32px;right:32px;top:calc(100% + 8px);width:auto;max-width:1040px;margin:0 auto;padding:8px;border-radius:24px;background:rgba(23,18,31,.97);border:1px solid rgba(255,255,255,.09);box-shadow:0 50px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .22s,transform .32s var(--ease),visibility 0s .32s}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .c1-head .c1-mega{background:rgba(21,16,29,.95);-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%)}
  }
  .c1-head.c1-shrink .c1-mega{top:100%}
  .c1-head .c1-mega::before{top:-28px;height:28px}
  .c1-head .v2-dd.open .c1-mega,html:not(.js) .c1-head .v2-dd:hover .c1-mega,html:not(.js) .c1-head .v2-dd:focus-within .c1-mega{display:grid;visibility:visible;opacity:1;transform:none;transition-delay:0s}
}
.c1-mega-main{padding:16px 8px 8px}
.c1-mega-h{margin:0 12px 10px;font:700 11px 'Open Sans',sans-serif;letter-spacing:2.6px;text-transform:uppercase;color:#FF5C93}
.c1-head .c1-mega-list{gap:2px 6px}
.c1-head .c1-mega-list a{position:relative;display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;color:#fff;transition:background-color .2s}
.c1-head .c1-mega-list .c1-txt{display:block;min-width:0;margin:0}
.c1-head .c1-mega-list a b{font:800 15px/1.25 Montserrat,system-ui,sans-serif;color:#fff}
.c1-head .c1-mega-list .c1-txt > span{margin-top:3px;font-size:13px;line-height:1.35;color:#A39BA9;transition:color .2s}
.c1-tile{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#FF8AB2;background:linear-gradient(150deg,rgba(209,20,90,.26),rgba(108,43,217,.26));box-shadow:inset 0 0 0 1px rgba(255,138,178,.16);transition:background .25s,color .25s,transform .3s var(--ease),box-shadow .25s}
.c1-head .c1-mega-list a .c1-tile{display:grid;margin:0}
.c1-head .c1-mega-list a:hover,.c1-head .c1-mega-list a:focus-visible{background:rgba(255,255,255,.055)}
.c1-head .c1-mega-list a:hover .c1-txt > span,.c1-head .c1-mega-list a:focus-visible .c1-txt > span{color:#CFC8D3}
.c1-head .c1-mega-list a:hover .c1-tile,.c1-head .c1-mega-list a:focus-visible .c1-tile,.c1-head a[aria-current="page"] .c1-tile{color:#fff;background:linear-gradient(150deg,#D1145A,#6C2BD9);box-shadow:0 8px 18px -8px rgba(209,20,90,.8);transform:translateY(-1px)}
.c1-head .c1-mega-list a[aria-current="page"]{background:rgba(209,20,90,.13);box-shadow:inset 0 0 0 1px rgba(255,92,147,.32)}
.c1-head a[aria-current="page"] b::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 2px 8px;border-radius:50%;background:#FF5C93;box-shadow:0 0 0 3px rgba(255,92,147,.22);vertical-align:middle}

/* featured card */
.c1-feat{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:24px 22px 18px;border-radius:18px;color:#fff;background:linear-gradient(155deg,#D1145A 0%,#9A1D8E 52%,#6C2BD9 100%)}
.c1-feat::before{content:"";position:absolute;z-index:-1;right:-70px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent)}
.c1-feat::after{content:"";position:absolute;z-index:-1;left:-60px;bottom:-90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(14,11,20,.35),transparent)}
.c1-feat-eye{margin:0 0 10px;font:700 11px 'Open Sans',sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.82)}
.c1-feat-h{margin:0 0 16px;font:800 20px/1.25 Montserrat,system-ui,sans-serif;letter-spacing:-.2px}
.c1-feat-pts{display:flex;flex-direction:column;gap:6px;margin:0 0 18px;padding:0;list-style:none;font:600 13px/1.3 'Open Sans',sans-serif}
.c1-feat-pts li{display:flex;align-items:center;gap:9px}
.c1-feat-pts li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
.c1-feat-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;margin-top:auto;padding:0 16px;border-radius:12px;background:#fff;color:#0E0B14;font:700 15px 'Open Sans',sans-serif;text-decoration:none;box-shadow:0 12px 26px -12px rgba(14,11,20,.6);transition:transform .25s var(--ease),box-shadow .25s}
.c1-feat-btn .c1-ico{width:18px;height:18px;color:#D1145A}
.c1-feat-btn:hover{color:#0E0B14;transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(14,11,20,.7)}
.c1-feat-sub{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none}
.c1-feat-sub .c1-ico{width:20px;height:20px;opacity:.9}
.c1-feat-sub b{display:block;font:800 14px Montserrat,system-ui,sans-serif}
.c1-feat-sub span span{display:block;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.8)}
.c1-feat-sub:hover{color:#fff}
.c1-feat-sub:hover b{text-decoration:underline;text-underline-offset:3px}
.c1-head .c1-feat a:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* staggered entrance */
@keyframes c1rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes c1fade{from{opacity:0}to{opacity:1}}
@keyframes c1up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.c1-head .v2-dd.open .c1-mega-list li,.c1-head .v2-dd.open .c1-feat{animation:c1rise .42s var(--ease) both;animation-delay:calc(var(--i,0) * 22ms + 40ms)}

/* ---------- 4. Full-screen overlay menu (<=1100px) ---------- */
@media (max-width:1100px){
  .c1-head .c1-ov{position:fixed;z-index:1;inset:0;display:none;flex-direction:column;height:100vh;height:100dvh;max-height:none;padding:var(--bar) 0 0;border-top:0;overflow:hidden;background:radial-gradient(110% 55% at 105% -5%,rgba(108,43,217,.38),transparent 62%),radial-gradient(90% 45% at -10% 105%,rgba(209,20,90,.3),transparent 65%),#0E0B14}
  .c1-head.menu-open .c1-ov{display:flex;animation:c1fade .28s ease-out both}
  html:not(.js) .c1-head .c1-ov{position:static;display:block;height:auto}
  .c1-ov-in{display:flex;flex-direction:column;flex:1;min-height:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .c1-ov-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 0 28px;border-top:1px solid rgba(255,255,255,.08)}
  .c1-head .c1-ov .v2-m-h{margin:18px 0 10px}
  .c1-ov-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
  .c1-ov-tiles a{display:flex;flex-direction:column;align-items:flex-start;height:100%;padding:12px 12px 13px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .2s,transform .2s}
  .c1-ov-tiles .c1-tile{width:32px;height:32px;border-radius:10px;margin-bottom:9px}
  .c1-ov-tiles .c1-ico{width:18px;height:18px}
  .c1-ov-tiles b{font:800 14.5px/1.2 Montserrat,system-ui,sans-serif}
  .c1-ov-tiles a > span:last-child{margin-top:3px;font:400 12.5px/1.35 'Open Sans',sans-serif;color:#A39BA9}
  .c1-ov-tiles a:active{transform:scale(.98);background-color:rgba(255,255,255,.06)}
  .c1-ov-tiles a[aria-current="page"]{background:linear-gradient(160deg,rgba(209,20,90,.26),rgba(108,43,217,.16));box-shadow:inset 0 0 0 1px rgba(255,92,147,.45)}
  .c1-ov-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
  .c1-ov-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:54px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:#fff;font:600 16px 'Open Sans',sans-serif;text-decoration:none}
  .c1-ov-links a::after{content:"";flex:none;width:8px;height:8px;border-top:2px solid #FF5C93;border-right:2px solid #FF5C93;transform:rotate(45deg)}
  .c1-ov-links a[aria-current="page"]{background:rgba(209,20,90,.22);box-shadow:inset 0 0 0 1px rgba(255,92,147,.45)}
  .c1-ov-cta{position:relative;flex:none;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.1);background:rgba(14,11,20,.9)}
  .c1-ov-cta::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:36px;background:linear-gradient(rgba(14,11,20,0),rgba(14,11,20,.85));pointer-events:none}
  .c1-ov-cta-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,2fr);gap:10px}
  .c1-head .c1-ov-cta .v2-btn{width:100%;min-height:54px;margin:0;font-size:16px;border-radius:14px}
  .c1-head .c1-ov-demo{background:linear-gradient(100deg,#D1145A,#6C2BD9);box-shadow:0 14px 30px -14px rgba(209,20,90,.9)}
  .c1-head .c1-ov-login{background:transparent;border-color:transparent;color:#CFC8D3}
  .c1-head .c1-ov-login:hover{color:#fff;background:rgba(255,255,255,.06)}
  /* the overlay carries its own Sign up; keep the bar to logo + close */
  .c1-head.menu-open .v2-actions > .v2-btn-g{visibility:hidden}
  .c1-head.menu-open .v2-burger{border-color:rgba(255,92,147,.6);background:rgba(255,92,147,.1)}
  .c1-head.menu-open::after{opacity:0}
  /* staggered entrance */
  .c1-head.menu-open .c1-ov .c1-st,.c1-head.menu-open .c1-ov-tiles li,.c1-head.menu-open .c1-ov-links li{animation:c1rise .46s var(--ease) both;animation-delay:calc(var(--i,0) * 28ms + 60ms)}
  .c1-head.menu-open .c1-ov-cta{animation:c1up .5s var(--ease) .12s both}
}
@media (min-width:820px) and (max-width:1100px){
  .c1-ov-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
  .c1-ov-links{grid-template-columns:repeat(4,minmax(0,1fr))}
  .c1-ov-cta-in{max-width:640px;margin:0 auto}
}
@media (max-width:420px){.c1-head{--bar:68px}}
@media (max-width:420px){.c1-ov-cta-in{grid-template-columns:repeat(2,minmax(0,1fr))}.c1-ov-cta-in .c1-ov-demo{grid-column:1/-1;grid-row:1}.c1-ov-cta-in .c1-ov-login{grid-column:1}.c1-ov-cta-in .c1-ov-sign{grid-column:2}}
@media (max-width:359px){.c1-ov-cta-in{grid-template-columns:minmax(0,1fr)}.c1-ov-cta-in .c1-ov-demo,.c1-ov-cta-in .c1-ov-login,.c1-ov-cta-in .c1-ov-sign{grid-column:1}}

/* ---------- 5. Reduced motion: no slides, fades or staggers ---------- */
@media (prefers-reduced-motion:reduce){
  .c1-head,.c1-head *,.c1-head::before,.c1-head::after,.c1-head *::before,.c1-head *::after{animation:none!important;transition:none!important}
}

/* ---------- 6. Fitting it to the live header ---------- */
/* Today's header is 76px plus a 1px bottom border (77px of layout). Keep that border's 1px of space so nothing below
   the header moves: the glass layer covers it, and the hairline sits on the row where today's border was. */
.c1-head{border-bottom:1px solid transparent}
.c1-head::before{height:calc(var(--bar) + 1px)}
.c1-head::after{transform:translateY(var(--bar))}
.c1-progress{top:calc(var(--bar) - 1px)}
/* ==== END Glass Glide nav (Concept 1) ==== */

/* ==== BEGIN Simpler Products menu (Batch 2), approved by James 8 Oct 2026. Added by nav-build/scripts/menu_transform.py.
   Builds on the Glass Glide block above: "Essentials" group (with its price), then "Extras" with monthly prices,
   no one-liners on extras, smaller icons, featured card without the duplicated price. Every rule is scoped to .c1-head. ==== */
.c1-head .c2-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.c1-head .c2-price{display:inline-flex;align-items:center;flex:none;margin:0;padding:3px 9px;border-radius:999px;background:rgba(255,92,147,.12);box-shadow:inset 0 0 0 1px rgba(255,92,147,.3);color:#FFB3CD;font:700 12px/1.2 'Open Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap}
.c1-head .c2-note{margin:0;font:400 12px/1.4 'Open Sans',system-ui,sans-serif;color:#8E8696}

/* desktop mega-menu (>=1101px) */
@media (min-width:1101px){
  .c1-head .c2-mega .c1-mega-main{padding:16px 8px 12px}
  .c1-head .c2-mega .c2-h-ext{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07)}
  .c1-head .c2-ess{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c1-head .c2-ess a{align-items:flex-start}
  .c1-head .c2-ext{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c1-head .c2-ext a{gap:12px;min-height:44px;padding:6px 12px}
  .c1-head .c2-ext .c1-tile{width:32px;height:32px;border-radius:10px}
  .c1-head .c2-ext .c1-ico{width:18px;height:18px}
  .c1-head .c2-ext .c1-txt{flex:1}
  .c1-head .c2-ext a b{font-size:14.5px}
  .c1-head .c2-mega .c2-note{margin:8px 12px 0}
}

/* mobile / tablet full-screen menu (<=1100px) */
@media (max-width:1100px){
  .c1-head .c1-ov .c2-h-ext{margin-top:22px}
  .c1-head .c2-ov-ess{grid-template-columns:minmax(0,1fr)}
  .c1-head .c2-ov-ess a{flex-direction:row;align-items:center;gap:12px;padding:12px}
  .c1-head .c2-ov-ess .c1-tile{margin:0}
  .c1-head .c2-ov-ess .c1-txt{display:block;min-width:0;margin:0;font:inherit;color:#fff}
  .c1-head .c2-ov-ess .c1-txt > span{display:block;margin-top:2px;font:400 12.5px/1.35 'Open Sans',sans-serif;color:#A39BA9}
  .c1-head .c2-ov-ext a{justify-content:flex-start;min-height:44px;padding:10px 12px 12px}
  .c1-head .c2-ov-ext .c2-top{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-bottom:8px}
  .c1-head .c2-ov-ext .c1-tile{width:28px;height:28px;border-radius:9px;margin:0}
  .c1-head .c2-ov-ext .c1-ico{width:16px;height:16px}
  .c1-head .c2-ov-ext b{font-size:14px}
  .c1-head .c1-ov .c2-note{margin:10px 2px 0}
}
@media (min-width:820px) and (max-width:1100px){
  .c1-head .c2-ov-ess{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c1-head .c2-ov-ext{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ==== END Simpler Products menu (Batch 2) ==== */

/* ==== BEGIN Spotlight nav (overnight 9 Oct 2026). Added by overnight-2026-10-09/nav/nav_wow.py. Builds on the Glass Glide
   and Batch 2 blocks above. Desktop: two calm zones (Essentials tiles | Extras name + price list), a slim bar instead of
   the featured card, a cursor spotlight, a thin animated gradient border on the hovered/focused item, a staggered
   reveal and small icon moves. Mobile: iris open from the burger, Essentials as wide rows, Extras as a 2-column price
   list. Menu rules are scoped to .c1-head; reduced motion is covered by the Glass Glide "no animation" rule.
   Also: Calculator anchor scroll-margin, Storefront Hub sideways-scroll fix (both at the end). ==== */
@property --sp-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spSpin{to{--sp-a:360deg}}
@keyframes spPanel{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes spIris{from{clip-path:circle(22px at var(--sp-ox,calc(100% - 38px)) var(--sp-oy,38px))}to{clip-path:circle(150% at var(--sp-ox,calc(100% - 38px)) var(--sp-oy,38px))}}

/* ---------- desktop mega-menu (>=1101px) ---------- */
@media (min-width:1101px){
  /* panel: the zones, then the slim bar */
  .c1-head .c2-mega{grid-template-columns:minmax(0,1fr);gap:6px;left:0;right:0;width:900px;max-width:calc(100% - 64px);padding:10px;border-radius:26px;background:rgba(17,13,24,.97);border-color:rgba(255,255,255,.08);box-shadow:0 60px 110px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);transform-origin:50% 0}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .c1-head .c2-mega{background:rgba(17,13,24,.9);-webkit-backdrop-filter:blur(28px) saturate(160%);backdrop-filter:blur(28px) saturate(160%)}
  }
  .c1-head .v2-dd.open .c2-mega{animation:spPanel .38s var(--ease) both}
  /* spotlight layer (follows the cursor) + a pink -> purple hairline along the top edge */
  .c1-head .c2-mega::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,transparent 8%,rgba(255,92,147,.55) 35%,rgba(142,75,255,.55) 65%,transparent 92%) top/100% 1px no-repeat,radial-gradient(380px circle at var(--mx,26%) var(--my,30%),rgba(255,92,147,.10),rgba(142,75,255,.05) 45%,transparent 70%);opacity:.55;transition:opacity .35s}
  .c1-head .c2-mega.sp-lit::after{opacity:1}
  .c1-head .c2-mega > *{position:relative;z-index:1}

  /* two zones */
  .c1-head .c2-mega .c1-mega-main{display:grid;grid-template-columns:336px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:22px;padding:0}
  .c1-head .c2-mega .c1-mega-main::before{content:"";grid-column:1;grid-row:1/5;border-radius:18px;background:linear-gradient(165deg,rgba(209,20,90,.11),rgba(108,43,217,.07) 60%,rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
  .c1-head .c2-mega .c2-h{grid-column:1;grid-row:1;margin:18px 18px 12px;color:#FF8AB2}
  .c1-head .c2-mega .c2-h-ext{grid-column:2;grid-row:1;margin:18px 8px 12px;padding:0;border:0;color:#A39BA9}
  .c1-head .c2-ess{grid-column:1;grid-row:2/5;align-self:start;grid-template-columns:minmax(0,1fr);gap:4px;padding:0 8px 8px}
  .c1-head .c2-ext{grid-column:2;grid-row:2;align-self:start;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;padding:0 4px 0 0}
  .c1-head .c2-mega .c2-note{grid-column:2;grid-row:4;margin:10px 8px 16px}

  /* Essentials tiles: icon + name; the one-liner fades up on hover/focus (its space is reserved, nothing moves) */
  .c1-head .c2-ess a{align-items:center;gap:16px;min-height:76px;padding:14px 16px;border-radius:16px}
  .c1-head .c2-ess .c1-tile{width:44px;height:44px;border-radius:13px}
  .c1-head .c2-ess a b{font-size:16px;transform:translateY(10px);transition:transform .35s var(--ease)}
  .c1-head .c2-ess .c1-txt > span{white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .35s var(--ease),color .2s}
  .c1-head .c2-ess a:hover b,.c1-head .c2-ess a:focus-visible b,.c1-head .c2-ess a[aria-current="page"] b{transform:none}
  .c1-head .c2-ess a:hover .c1-txt > span,.c1-head .c2-ess a:focus-visible .c1-txt > span,.c1-head .c2-ess a[aria-current="page"] .c1-txt > span{opacity:1;transform:none}

  /* Extras: clean list, name + price only */
  .c1-head .c2-ext a{gap:10px;min-height:44px;padding:8px 12px;border-radius:12px}
  .c1-head .c2-ext a .c1-tile{display:none}
  .c1-head .c2-ext a b{font:700 14.5px/1.25 Montserrat,system-ui,sans-serif;color:#E9E4EC;transition:color .2s}
  .c1-head .c2-ext a:hover b,.c1-head .c2-ext a:focus-visible b,.c1-head .c2-ext a[aria-current="page"] b{color:#fff}
  .c1-head .c2-ext .c2-price{padding:2px 8px;font-size:11.5px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#CFC8D3;transition:background-color .2s,color .2s,box-shadow .2s}
  .c1-head .c2-ext a:hover .c2-price,.c1-head .c2-ext a:focus-visible .c2-price,.c1-head .c2-ext a[aria-current="page"] .c2-price{background:rgba(255,92,147,.14);box-shadow:inset 0 0 0 1px rgba(255,92,147,.4);color:#FFB3CD}

  /* hover/focus on any item: a soft local spotlight + a thin animated gradient border */
  .c1-head .c2-mega .c1-mega-list a{isolation:isolate;outline-offset:3px}
  .c1-head .c2-mega .c1-mega-list a:hover,.c1-head .c2-mega .c1-mega-list a:focus-visible{background:rgba(255,255,255,.035)}
  .c1-head .c2-mega .c1-mega-list a::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(160px circle at var(--tx,50%) var(--ty,50%),rgba(255,255,255,.09),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
  .c1-head .c2-mega .c1-mega-list a::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--sp-a),rgba(255,92,147,.25),#FF5C93 18%,#B04BFF 36%,rgba(142,75,255,.25) 58%,rgba(255,92,147,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
  .c1-head .c2-mega .c1-mega-list a:hover::before,.c1-head .c2-mega .c1-mega-list a:hover::after,.c1-head .c2-mega .c1-mega-list a:focus-visible::before,.c1-head .c2-mega .c1-mega-list a:focus-visible::after{opacity:1}
  .c1-head .c2-mega .c1-mega-list a:hover::after,.c1-head .c2-mega .c1-mega-list a:focus-visible::after{animation:spSpin 3.2s linear infinite}
  .c1-head .c2-mega .c1-mega-list a:focus-visible{outline:2px solid rgba(255,138,178,.9)}
  .c1-head .c2-ess a[aria-current="page"]{background:rgba(209,20,90,.12);box-shadow:inset 0 0 0 1px rgba(255,92,147,.32)}
  .c1-head .c2-ext a[aria-current="page"]{background:rgba(209,20,90,.1);box-shadow:inset 0 0 0 1px rgba(255,92,147,.28)}

  /* icon micro-moves */
  .c1-head .c2-mega .c1-ico{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
  .c1-head .c2-ess a:hover .c1-ico,.c1-head .c2-ess a:focus-visible .c1-ico{transform:rotate(-8deg) scale(1.1)}
  .c1-head .c2-ess a:hover .c1-tile,.c1-head .c2-ess a:focus-visible .c1-tile{transform:translateY(-2px)}

  /* slim bar: perks | Book a 15-minute demo | Brochures */
  .c1-head .sp-bar{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 18px;border-radius:16px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .c1-head .sp-perks{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 auto 0 0;padding:0;list-style:none;font:600 12.5px/1.3 'Open Sans',sans-serif;color:#A39BA9}
  .c1-head .sp-perks li{display:flex;align-items:center;gap:7px}
  .c1-head .sp-perks li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:rgba(255,92,147,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/9px no-repeat}
  .c1-head .sp-demo,.c1-head .sp-doc{display:inline-flex;align-items:center;flex:none;min-height:44px;border-radius:12px;color:#fff;font:700 14px 'Open Sans',sans-serif;text-decoration:none}
  .c1-head .sp-demo{gap:9px;padding:0 18px;background:linear-gradient(100deg,#D1145A,#8E2BC9);box-shadow:0 10px 24px -12px rgba(209,20,90,.9);transition:box-shadow .25s,transform .25s var(--ease)}
  .c1-head .sp-demo:hover{color:#fff;transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(209,20,90,1)}
  .c1-head .sp-doc{gap:8px;padding:0 14px;transition:background-color .2s}
  .c1-head .sp-doc:hover{color:#fff;background:rgba(255,255,255,.06)}
  .c1-head .sp-doc[aria-current="page"]{background:rgba(209,20,90,.14);box-shadow:inset 0 0 0 1px rgba(255,92,147,.35)}
  .c1-head .sp-bar .c1-ico{width:18px;height:18px}
  .c1-head .sp-doc .c1-ico{color:#FF8AB2}

  /* staggered reveal: a little slower and calmer than Glass Glide's */
  .c1-head .v2-dd.open .c2-mega .c1-mega-list li,.c1-head .v2-dd.open .sp-bar{animation:c1rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 26ms + 80ms)}
}

/* ---------- mobile / tablet full-screen menu (<=1100px) ---------- */
@media (max-width:1100px){
  /* iris open from the burger, then the existing stagger */
  .c1-head.menu-open .c1-ov{animation:spIris .6s cubic-bezier(.3,.7,.1,1) both}
  .c1-head.menu-open .c1-ov .c1-st,.c1-head.menu-open .c1-ov-tiles li,.c1-head.menu-open .c1-ov-links li{animation-delay:calc(var(--i,0) * 20ms + 120ms)}
  /* Essentials: three wide rows with their one-liners (no hover on touch) */
  .c1-head .c2-ov-ess{gap:8px}
  .c1-head .c2-ov-ess a{gap:14px;min-height:64px;padding:12px 14px;background:linear-gradient(120deg,rgba(209,20,90,.14),rgba(108,43,217,.08) 70%);box-shadow:inset 0 0 0 1px rgba(255,138,178,.16)}
  .c1-head .c2-ov-ess .c1-tile{width:40px;height:40px;border-radius:12px}
  .c1-head .c2-ov-ess .c1-ico{width:20px;height:20px}
  .c1-head .c2-ov-ess b{font-size:15.5px}
  /* Extras: tidy 2-column list, name + price */
  .c1-head .c2-ov-ext{gap:6px}
  .c1-head .c2-ov-ext a{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:8px 10px 8px 14px;border-radius:13px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  .c1-head .c2-ov-ext .c2-top{display:contents}
  .c1-head .c2-ov-ext .c1-tile{display:none}
  .c1-head .c2-ov-ext b{order:1;font:700 13.5px/1.2 Montserrat,system-ui,sans-serif}
  .c1-head .c2-ov-ext .c2-price{order:2;padding:2px 7px;font-size:11.5px}
}

/* ---------- fixes ---------- */
/* Products > Calculator lands on Lending Hub's Finance Calculator heading. styles.css already pads anchors by 80px
   (72px on phones), which leaves only ~3px under the 77px (69px) sticky header: add breathing room. The JS block
   re-aims the jump once the page has loaded (it used to land mid-screen). */
#brx-h-finance-calculator{scroll-margin-top:16px}
/* The brochure/calculator sections (.brx, brochures.css) clip with overflow:hidden, which makes them scroll containers:
   the browser's jump to #brx-h-finance-calculator scrolled the section's own content up ~106px, hiding its top and
   leaving the heading off target. overflow:clip paints the same but cannot be scrolled. */
@supports (overflow:clip){section.brx{overflow:clip}}
/* Storefront Hub: the "Your portal" card in the online-finance illustration overhangs the viewport by ~4px at
   1024-1100px, giving a sideways scroll. Clip sideways overflow on its full-width section (edge to edge, so nothing
   visible changes at any width). */
.sf-x-soft:has(.sf-x-flow){overflow-x:clip}
/* ==== END Spotlight nav ==== */

/* === perf_fix: performance + accessibility (overnight 2026-10-09) START === */
/* 1. Checkout: reserve space while checkout.js has not rendered yet (CLS 0.82 mobile / 0.43 desktop).
      :not(:has(*)) stops matching the moment content is rendered, so the final layout is unchanged. */
#coSteps:not(:has(*)){min-height:26px}
#coMain:not(:has(*)){min-height:580px}
#coSummary:not(:has(*)){min-height:480px}
@media (max-width:720px){#coMain:not(:has(*)){min-height:840px}}
/* 2. Checkout contrast: #7a8494 grey text was 3.6-3.8:1 and #0f8a5f "Included" green 4.2:1 (WCAG AA needs 4.5:1). */
#checkout .cst-i > *,#checkout .cst-n,#checkout .cop-price small,#checkout .cou-n span,#checkout .con-x,
#checkout .co-intgroup h3,#checkout .coi-tag,#checkout .cs-sub,#checkout .cs-bundled,#checkout .cs-total small,#checkout .cs-note{color:#5f6878}
#checkout .cs-free{color:#0b7d55}
/* 3. Links inside feature-card text were colour-only (1.3:1 against the body text): underline them. */
.feat-card p a{text-decoration:underline;text-underline-offset:2px}
/* 4. Home "01" step number on the pink card was 3.8:1 at 80% opacity. */
.grid4 > div[style*="#D1145A"] > span[style*="opacity"]{opacity:1!important}
/* 6. Lazy product screenshots in .photo-pair.screens: styles.css sets aspect-ratio:auto, which overrides the
      width/height attributes, so the box was ~22px tall until the image loaded (lending-hub grew ~550px: CLS and
      broken in-page anchor scrolling). "auto W/H" reserves the space and still uses the real ratio once loaded.
      Values = the attributes = the files' natural sizes (measured on live). */
.photo-pair.screens img[width="1600"][height="841"]{aspect-ratio:auto 1600/841}
.photo-pair.screens img[width="1208"][height="858"]{aspect-ratio:auto 1208/858}
.photo-pair.screens img[width="1024"][height="1024"]{aspect-ratio:auto 1024/1024}
/* 5. Keyboard-scrollable logo rails get a visible focus ring. */
.logo-rail:focus-visible{outline:2px solid #D1145A;outline-offset:4px;border-radius:8px}
/* === perf_fix END === */
/* === polish_fix (overnight 2026-10-09) BEGIN === */
/* Related-product link rows (hub cross-sell, brochures) */
.pf-related{margin:var(--s5,20px) 0 0;font-size:15px;line-height:1.7;color:#5F5864}
.pf-related a{color:#C0124F;font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:6px}
.pf-related a:hover{color:#6C2BD9}
.pf-brx{margin:14px 0 0;font-size:14px;color:#CFC8D3}
.pf-brx a{color:#FF8AB2}
.pf-brx a:hover{color:#fff}
/* Guarantee: next step after the FAQ */
.pf-next{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:32px 0 0}
.pf-next-link{color:#C0124F;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding-block:12px}
/* === polish_fix (overnight 2026-10-09) END === */

/* ==== BEGIN Aurora Neon nav (Bold-1, 9 Oct 2026, not shipped). Added by overnight-2026-10-09/bold/bold1_transform.py.
   Builds on the Glass Glide, Batch 2 and Spotlight blocks above; every rule is scoped to .c1-head.
   1. Header at rest: aurora, glowing hairline + light streak, logo halo, indicator, CTAs, scroll shrink
   2. Colour per product
   3. Products menu (desktop >=1101px)
   4. Full-screen menu (<=1100px)
   5. Reduced motion
   Layout height is unchanged (77px, 69px on phones) and nothing paints below the header while the menu is shut. ==== */
@property --b1-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes b1drift{0%{transform:translate3d(-12%,0,0) scale(1)}35%{transform:translate3d(-3%,5px,0) scale(1.06)}70%{transform:translate3d(6%,-4px,0) scale(.97)}100%{transform:translate3d(12%,2px,0) scale(1.03)}}
@keyframes b1streak{0%,58%{transform:translateX(-30vw)}100%{transform:translateX(110vw)}}
@keyframes b1shine{0%,76%{transform:translateX(-160%) skewX(-22deg)}100%{transform:translateX(360%) skewX(-22deg)}}
@keyframes b1spin{to{--b1-a:360deg}}
@keyframes b1pop{0%{opacity:0;transform:translateY(16px) scale(.94)}60%{opacity:1;transform:translateY(-3px) scale(1.012)}100%{opacity:1;transform:none}}
@keyframes b1rise{0%{opacity:0;transform:translateY(16px) scale(.9)}62%{opacity:1;transform:translateY(-3px) scale(1.025)}100%{opacity:1;transform:none}}
@keyframes b1wig{0%{transform:none}30%{transform:rotate(-12deg) scale(1.18)}62%{transform:rotate(7deg) scale(1.08)}100%{transform:scale(1.08)}}

/* ---------- 1. Header at rest ---------- */
/* aurora: one oversized layer of soft colour blobs drifting behind the glass (transform only). It stays inside the
   header band. Blob alpha is capped so the nav text keeps well over 4.5:1. */
.c1-head .b1-aura{position:absolute;z-index:0;left:0;right:0;top:0;height:calc(var(--bar) + 1px);overflow:hidden;pointer-events:none;opacity:.85;transition:opacity .6s,height .4s var(--ease)}
.c1-head .b1-aura::before{content:"";position:absolute;left:-20%;width:140%;top:-40px;bottom:-40px;background:radial-gradient(20% 85% at 6% 55%,rgba(209,20,90,.72),transparent 72%),radial-gradient(16% 95% at 22% 30%,rgba(142,43,201,.62),transparent 72%),radial-gradient(18% 90% at 38% 75%,rgba(255,92,147,.5),transparent 72%),radial-gradient(18% 95% at 54% 35%,rgba(108,43,217,.68),transparent 72%),radial-gradient(16% 90% at 70% 70%,rgba(224,64,180,.55),transparent 72%),radial-gradient(18% 95% at 88% 40%,rgba(142,75,255,.6),transparent 72%);transform:translate3d(-3%,0,0);will-change:transform;animation:b1drift 22s ease-in-out infinite alternate}
/* a light streak that runs along the bottom hairline every 7s */
.c1-head .b1-aura::after{content:"";position:absolute;left:0;bottom:0;width:28vw;height:2px;background:linear-gradient(90deg,transparent,rgba(255,138,178,.9) 45%,#fff 50%,rgba(176,75,255,.9) 55%,transparent);transform:translateX(-30vw);animation:b1streak 7s cubic-bezier(.5,0,.3,1) 1.5s infinite}
.c1-head.c1-shrink .b1-aura{opacity:.95}
/* keeps the link text crisp over the brightest blobs */
.c1-head .v2-link{color:#DDD7E0;text-shadow:0 0 10px rgba(14,11,20,.75)} /* >= 5:1 over the brightest aurora moment */
.c1-head.menu-open .b1-aura{visibility:hidden}
/* hairline: brighter gradient with a soft glow rising into the header (never below it) */
.c1-head::after{height:16px;transform:translateY(calc(var(--bar) - 15px));background:linear-gradient(90deg,rgba(255,255,255,.06),#FF5C93 22%,#E040C8 50%,#8E4BFF 78%,rgba(255,255,255,.06)) bottom/100% 1px no-repeat,radial-gradient(50% 100% at 50% 100%,rgba(255,92,147,.2),rgba(142,75,255,.08) 60%,transparent);opacity:.9;transition:transform .4s var(--ease),opacity .4s}
.c1-head.c1-shrink::after{opacity:1}
/* logo: soft pink/purple halo */
.c1-head .v2-brand{position:relative}
.c1-head .v2-brand::before{content:"";position:absolute;z-index:-1;left:-22px;right:-22px;top:50%;height:58px;margin-top:-29px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,92,147,.32),rgba(142,75,255,.16) 55%,transparent);pointer-events:none}
.c1-head .v2-logo{filter:brightness(0) invert(1) drop-shadow(0 0 7px rgba(255,92,147,.6)) drop-shadow(0 0 16px rgba(142,75,255,.35))}
/* gliding indicator: tinted pill + glowing gradient underline */
.c1-head .c1-ind{background:linear-gradient(180deg,rgba(255,92,147,.08),rgba(142,75,255,.13));box-shadow:inset 0 0 0 1px rgba(255,138,178,.16)}
.c1-head .c1-ind::after{left:14px;right:14px;bottom:-2px;height:3px;border-radius:3px;background:linear-gradient(90deg,#FF5C93,#E040C8,#8E4BFF);box-shadow:0 0 10px rgba(255,92,147,.85),0 0 18px rgba(142,75,255,.5)}
.c1-head .v2-dd-btn .v2-chev{color:#FF8AB2}
/* Book a 15-minute demo: gradient glow pill with a light sweep */
.c1-head .v2-demo,.c1-head .sp-demo,.c1-head .c1-ov-demo{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(100deg,#D1145A,#B8126C 45%,#8E2BC9);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -12px rgba(209,20,90,.8),0 0 18px -6px rgba(255,92,147,.75)}
.c1-head .v2-demo::after,.c1-head .sp-demo::after,.c1-head .c1-ov-demo::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-160%) skewX(-22deg);animation:b1shine 5.5s ease-in-out 1.2s infinite;pointer-events:none}
.c1-head .v2-demo:hover,.c1-head .sp-demo:hover{background:linear-gradient(100deg,#FF5C93,#D1145A 42%,#9B3BE0);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -12px rgba(209,20,90,.95),0 0 26px -6px rgba(255,92,147,.9)}
/* Sign up: gradient outline */
.c1-head .v2-actions > .v2-btn-g,.c1-head .c1-ov-sign{border:1.5px solid transparent;background:linear-gradient(rgba(20,14,28,.88),rgba(20,14,28,.88)) padding-box,linear-gradient(100deg,#FF5C93,#B04BFF) border-box;box-shadow:0 0 16px -8px rgba(255,92,147,.7)}
.c1-head .v2-actions > .v2-btn-g:hover,.c1-head .c1-ov-sign:hover{background:linear-gradient(rgba(60,20,58,.9),rgba(60,20,58,.9)) padding-box,linear-gradient(100deg,#FF5C93,#B04BFF) border-box}
.c1-head .v2-burger{border-color:rgba(255,138,178,.45);background:rgba(255,92,147,.06)}
/* livelier shrink: a little spring */
@media (min-width:1101px){
  .c1-head .v2-head-in,.c1-head .v2-logo{transition:transform .55s cubic-bezier(.34,1.45,.64,1)}
}

/* ---------- 2. Colour per product (tiles, glows, price pills) ---------- */
.c1-head{--b1-1:#FF6FA0;--b1-2:#D1145A;--b1-g:rgba(255,92,147,.6)}
.c1-head a[href="/enquiry-hub"]{--b1-1:#FF6FA0;--b1-2:#D1145A;--b1-g:rgba(255,92,147,.6)}
.c1-head a[href="/lending-hub"]{--b1-1:#F058D0;--b1-2:#9B1FB8;--b1-g:rgba(240,88,208,.55)}
.c1-head a[href="/lending-hub#brx-h-finance-calculator"],.c1-head a[href="/calculator"]{--b1-1:#A780FF;--b1-2:#5B2BD9;--b1-g:rgba(150,110,255,.6)}
.c1-head a[href="/ai-engage"]{--b1-1:#FF7F9C;--b1-2:#E0245E;--b1-g:rgba(255,110,140,.55)}
.c1-head a[href="/agent-hub"]{--b1-1:#BE73FF;--b1-2:#6C2BD9;--b1-g:rgba(176,100,255,.55)}
.c1-head a[href="/ai-connectors"]{--b1-1:#EE78FF;--b1-2:#A21CAF;--b1-g:rgba(230,110,255,.5)}
.c1-head a[href="/appraisal-hub"]{--b1-1:#FFA36A;--b1-2:#E8436F;--b1-g:rgba(255,140,100,.5)}
.c1-head a[href="/call-hub"]{--b1-1:#FF5C93;--b1-2:#B0127A;--b1-g:rgba(255,92,147,.55)}
.c1-head a[href="/storefront-hub"]{--b1-1:#8F86FF;--b1-2:#4F2BD9;--b1-g:rgba(130,120,255,.55)}
.c1-head a[href="/inventory-hub"]{--b1-1:#CF7BFF;--b1-2:#7A1FA2;--b1-g:rgba(200,110,255,.5)}
.c1-head a[href="/vehicle-boost"]{--b1-1:#FFB55A;--b1-2:#FF4D7E;--b1-g:rgba(255,160,90,.5)}
.c1-head :is(.c1-mega-list,.c1-ov-tiles) a .c1-tile,.c1-head :is(.c1-mega-list,.c1-ov-tiles) a:is(:hover,:focus-visible,[aria-current="page"]) .c1-tile{display:grid;color:#fff;background:linear-gradient(145deg,var(--b1-1),var(--b1-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.14),0 8px 18px -8px var(--b1-g)}
.c1-head :is(.c1-mega-list,.c1-ov-tiles) .c1-ico{stroke-width:1.9}
.c1-head :is(.c1-mega-list,.c1-ov-tiles) a .c2-price{background:rgba(255,255,255,.06);background:color-mix(in srgb,var(--b1-1) 16%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b1-1) 50%,transparent);color:#fff}
.c1-head .c2-h:not(.c2-h-ext){color:#FF8AB2}
.c1-head .c2-h-ext{background:linear-gradient(90deg,#FF8AB2,#C79BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.c1-head .c2-h > .c2-price{background:linear-gradient(100deg,rgba(255,92,147,.24),rgba(142,75,255,.24));box-shadow:inset 0 0 0 1px rgba(255,138,178,.45);color:#fff}

/* ---------- 3. Products menu (desktop >=1101px) ---------- */
@media (min-width:1101px){
  /* panel: inner aurora glow, coloured outer glow, pop open with a slight overshoot */
  .c1-head .c2-mega{width:980px;border-color:transparent;background:radial-gradient(520px 240px at 0% 0%,rgba(209,20,90,.2),transparent 70%),radial-gradient(520px 260px at 100% 100%,rgba(108,43,217,.22),transparent 70%),rgba(17,13,24,.97);box-shadow:0 60px 110px -40px rgba(0,0,0,.9),0 40px 90px -40px rgba(209,20,90,.5),0 0 70px -24px rgba(142,75,255,.55)}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .c1-head .c2-mega{background:radial-gradient(520px 240px at 0% 0%,rgba(209,20,90,.2),transparent 70%),radial-gradient(520px 260px at 100% 100%,rgba(108,43,217,.22),transparent 70%),rgba(17,13,24,.92)}
  }
  .c1-head .v2-dd.open .c2-mega{animation:b1pop .55s cubic-bezier(.3,1.25,.5,1) both}
  /* aurora border: a conic sweep on the edge only, turning slowly while the menu is open */
  .c1-head .c2-mega::after{inset:-1px;padding:2px;background:conic-gradient(from var(--b1-a),rgba(255,92,147,.45),#FF5C93 50deg,#FFD0E2 80deg,#B04BFF 130deg,rgba(142,75,255,.45) 185deg,rgba(255,92,147,.45) 225deg,#E040C8 290deg,#FF7AA8 325deg,rgba(255,92,147,.45));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:1;z-index:2}
  .c1-head .v2-dd.open .c2-mega::after{animation:b1spin 10s linear infinite}
  .c1-head .c2-mega .c1-mega-main{grid-template-columns:330px minmax(0,1fr)}
  .c1-head .c2-mega .c1-mega-main::before{background:linear-gradient(165deg,rgba(209,20,90,.16),rgba(108,43,217,.1) 60%,rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,138,178,.12)}

  /* every item: lift + its own coloured glow + icon wiggle (replaces the Spotlight spinning border) */
  .c1-head .c2-mega .c1-mega-list a{transition:transform .38s cubic-bezier(.34,1.56,.64,1),background-color .25s,box-shadow .3s}
  .c1-head .c2-mega .c1-mega-list a::after{display:none}
  .c1-head .c2-mega .c1-mega-list a:hover,.c1-head .c2-mega .c1-mega-list a:focus-visible{transform:translateY(-3px);background:rgba(255,255,255,.06);background:color-mix(in srgb,var(--b1-1) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b1-1) 55%,transparent),0 18px 34px -16px var(--b1-g),0 0 30px -10px var(--b1-g)}
  .c1-head .c2-mega .c1-mega-list a .c1-tile{transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
  .c1-head .c2-mega .c1-mega-list a:is(:hover,:focus-visible) .c1-tile{transform:translateY(-1px) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px -6px var(--b1-g),0 0 22px -4px var(--b1-g)}
  .c1-head .c2-mega .c1-mega-list a:is(:hover,:focus-visible) .c1-ico{animation:b1wig .6s var(--ease) both}
  .c1-head .c2-mega .c1-mega-list a:is(:hover,:focus-visible) .c2-price{background:linear-gradient(110deg,var(--b1-1),var(--b1-2));box-shadow:0 6px 14px -6px var(--b1-g)}

  /* Essentials: larger vivid tiles, one-liners always shown */
  .c1-head .c2-ess{gap:8px}
  .c1-head .c2-ess a{min-height:82px;padding:14px 16px;gap:16px;background:rgba(255,255,255,.04);background:linear-gradient(120deg,color-mix(in srgb,var(--b1-1) 15%,transparent),rgba(255,255,255,.02) 75%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b1-1) 24%,transparent)}
  .c1-head .c2-ess .c1-tile{width:50px;height:50px;border-radius:15px}
  .c1-head .c2-ess .c1-ico{width:25px;height:25px}
  .c1-head .c2-ess a b,.c1-head .c2-ess a:hover b{font-size:16.5px;transform:none}
  .c1-head .c2-ess .c1-txt > span{opacity:1;transform:none;color:#CFC8D3}

  /* Extras: coloured icon + name + price */
  .c1-head .c2-ext{gap:4px 8px}
  .c1-head .c2-ext a{min-height:48px;padding:7px 10px 7px 8px;gap:12px}
  .c1-head .c2-ext a .c1-tile{width:34px;height:34px;border-radius:11px}
  .c1-head .c2-ext .c1-ico{width:18px;height:18px}
  .c1-head .c2-ext .c2-price{padding:3px 9px;font-size:12px}

  /* slim bar: glowing */
  .c1-head .sp-bar{background:linear-gradient(100deg,rgba(209,20,90,.16),rgba(108,43,217,.16));box-shadow:inset 0 0 0 1px rgba(255,138,178,.2),0 0 30px -12px rgba(255,92,147,.5)}
  .c1-head .sp-perks{color:#E3DCE7}
  .c1-head .sp-perks li::before{background-color:#D1145A;box-shadow:0 0 10px rgba(255,92,147,.7)}

  /* punchier stagger */
  .c1-head .v2-dd.open .c2-mega .c1-mega-list li,.c1-head .v2-dd.open .sp-bar{animation:b1rise .55s cubic-bezier(.3,1.2,.5,1) both;animation-delay:calc(var(--i,0) * 32ms + 90ms)}
}

/* ---------- 4. Full-screen menu (<=1100px) ---------- */
@media (max-width:1100px){
  /* aurora moving behind the menu */
  .c1-head .c1-ov::before{content:"";position:absolute;z-index:0;left:-35%;right:-35%;top:-10%;height:85%;background:radial-gradient(32% 30% at 22% 28%,rgba(209,20,90,.5),transparent 70%),radial-gradient(30% 34% at 72% 22%,rgba(108,43,217,.55),transparent 70%),radial-gradient(28% 28% at 48% 62%,rgba(224,64,180,.32),transparent 70%),radial-gradient(26% 30% at 85% 75%,rgba(142,75,255,.35),transparent 70%);will-change:transform;animation:b1drift 18s ease-in-out infinite alternate;pointer-events:none}
  .c1-head .c1-ov-in{position:relative;z-index:1}
  .c1-head .c1-ov .v2-m-h.c2-h-ext,.c1-head .c1-ov .v2-m-h:not(.c2-h){background:linear-gradient(90deg,#FF8AB2,#C79BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
  /* Essentials: vivid rows */
  .c1-head .c2-ov-ess a{background:rgba(255,255,255,.05);background:linear-gradient(120deg,color-mix(in srgb,var(--b1-1) 22%,transparent),rgba(255,255,255,.03) 80%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b1-1) 35%,transparent)}
  .c1-head .c2-ov-ess .c1-tile{width:44px;height:44px;border-radius:13px}
  .c1-head .c2-ov-ess .c1-ico{width:22px;height:22px}
  .c1-head .c2-ov-ess .c1-txt > span{color:#D8D1DC}
  /* Extras: colourful cards (icon + price on top, name below) */
  .c1-head .c2-ov-ext{gap:8px}
  .c1-head .c2-ov-ext a{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;min-height:44px;padding:10px 10px 12px 12px;border-radius:15px;background:rgba(255,255,255,.05);background:linear-gradient(150deg,color-mix(in srgb,var(--b1-1) 20%,transparent),rgba(255,255,255,.025) 80%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b1-1) 30%,transparent)}
  .c1-head .c2-ov-ext .c2-top{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-bottom:9px}
  .c1-head .c2-ov-ext .c1-tile{width:32px;height:32px;border-radius:10px;margin:0}
  .c1-head .c2-ov-ext .c1-ico{width:18px;height:18px}
  .c1-head .c2-ov-ext b{order:0;font:800 14px/1.25 Montserrat,system-ui,sans-serif}
  .c1-head .c2-ov-ext .c2-price{order:0;padding:3px 8px;font-size:12px}
  .c1-head .c1-ov-tiles a:active{transform:scale(.97)}
  .c1-head .c1-ov-links a{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,138,178,.16)}
  /* pinned bar */
  .c1-head .c1-ov-cta{background:rgba(14,11,20,.82)}
  /* punchy staggered entrance */
  .c1-head.menu-open .c1-ov .c1-st,.c1-head.menu-open .c1-ov-tiles li,.c1-head.menu-open .c1-ov-links li{animation-name:b1rise;animation-duration:.55s;animation-timing-function:cubic-bezier(.3,1.2,.5,1);animation-delay:calc(var(--i,0) * 32ms + 140ms)}
}

/* ---------- 5. Reduced motion: aurora, streak, shimmer and stagger all still ---------- */
@media (prefers-reduced-motion:reduce){
  .c1-head .b1-aura::before,.c1-head .b1-aura::after,.c1-head .c1-ov::before,.c1-head .v2-demo::after,.c1-head .sp-demo::after,.c1-head .c1-ov-demo::after{animation:none!important}
}
/* ==== END Aurora Neon nav (Bold-1) ==== */

/* ==== NAV OPTION A: "Calm dark glass" (James picked it 9 Oct 2026, applied site-wide; was nav-option-a.css) ====
   Kept at the END of v2.css on purpose: same selectors as the Bold-1 Aurora Neon rules above, so it wins on order.
   WHAT CHANGES (resting top row only):
   - Bar: near-solid dark ink (#0E0B14) instead of the purple/pink drifting aurora.
   - Aurora: no drifting blobs, no light streak. Left as a very faint pink underglow along the bottom edge.
   - Bottom edge: one thin, quiet pink-to-violet hairline (no glow cloud).
   - Logo: plain white wordmark, halo and glow removed.
   - Links: lighter weight (500), muted lilac-grey, even spacing, no text shadow; hover = soft white tint.
   - Sliding indicator: flat soft tint with a slim 2px pink underline (no glow).
   - Book a 15-minute demo: stays the ONE bold accent, solid brand pink, no gradient and no sweeping shine.
   - Sign up: quiet ghost button with a thin neutral border.
   WHAT DOES NOT CHANGE: bar height/position, dropdown (Products) panel, mobile overlay and anything inside them.
   Every rule is scoped to the bar (.v2-head-in / .v2-actions / .b1-aura / ::before / ::after), never to panel classes.
   Motion: only removes animation; v2.css already disables the rest under prefers-reduced-motion. */

/* 1. Bar: calm, near-solid. (Scrolled glass blur from v2.css is kept, just a touch denser.) */
.c1-head:not(.scrolled)::before{background:#0E0B14}
.c1-head.scrolled::before{background:rgba(14,11,20,.9)}

/* 2. Aurora -> faint underglow. Same box (stays inside the bar); no animation, no streak. */
.c1-head .b1-aura,.c1-head.c1-shrink .b1-aura{opacity:1}
.c1-head .b1-aura::before{left:0;width:100%;top:0;bottom:0;transform:none;animation:none;will-change:auto;
  background:linear-gradient(180deg,transparent 45%,rgba(209,20,90,.10) 100%),radial-gradient(60% 100% at 50% 100%,rgba(142,75,255,.08),transparent 70%)}
.c1-head .b1-aura::after{display:none;animation:none}

/* 3. Bottom edge: thin hairline only (box/position from v2.css untouched). */
.c1-head::after{opacity:1;
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,92,147,.34) 30%,rgba(142,75,255,.34) 70%,rgba(255,255,255,.04)) bottom/100% 1px no-repeat}

/* 4. Logo: clean white, no halo. */
.c1-head .v2-brand::before{display:none}
.c1-head .v2-logo{filter:brightness(0) invert(1)}

/* 5. Links: lighter, even rhythm. */
@media (min-width:1101px){
  .c1-head .v2-head-in{gap:36px}
  .c1-head .v2-menu{gap:6px}
}
.c1-head .v2-menu .v2-link{color:#C9C2CF;font-weight:500;font-size:15px;letter-spacing:.005em;text-shadow:none;padding:0 14px}
html.c1-ready .c1-head .v2-menu .v2-link:hover,
html.c1-ready .c1-head .v2-menu .v2-dd.open .v2-dd-btn,
html.c1-ready .c1-head .v2-menu .v2-link[aria-current="page"],
html.c1-ready .c1-head .v2-menu .v2-dd.is-current .v2-dd-btn{color:#fff}
.c1-head .v2-dd-btn .v2-chev{color:#8F879A}
.c1-head .v2-dd.open .v2-dd-btn .v2-chev{color:#FF8AB2}
.c1-head .c1-ind{background:rgba(255,255,255,.055);box-shadow:none}
.c1-head .c1-ind::after{left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:#FF5C93;box-shadow:none}

/* 6. Actions: demo = the single bold pink accent; Sign up = quiet ghost. Scoped to the bar, NOT the panel/overlay copies. */
.c1-head .v2-actions{gap:12px}
.c1-head .v2-actions > .v2-demo{background:#D1145A;box-shadow:0 6px 16px -8px rgba(209,20,90,.7);font-weight:700}
.c1-head .v2-actions > .v2-demo::after{display:none;animation:none}
.c1-head .v2-actions > .v2-demo:hover{background:#E01A66;box-shadow:0 8px 20px -8px rgba(209,20,90,.85)}
.c1-head .v2-actions > .v2-btn-g{background:transparent;border:1.5px solid rgba(255,255,255,.2);box-shadow:none;font-weight:600;color:#E9E4EC}
.c1-head .v2-actions > .v2-btn-g:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.5);color:#fff}

/* 7. Burger (phones): neutral outline; open state from v2.css (pink) is left alone. */
.c1-head:not(.menu-open) .v2-burger{border-color:rgba(255,255,255,.22);background:transparent}

/* 8. Logo size: by height only (width auto) so the new two-line mark fits; no hard-coded width or aspect. */
.c1-head .v2-logo{height:38px;width:auto}
@media (max-width:420px){.c1-head .v2-logo{height:30px}}

/* ---- CRO audit fixes (Oct 2026) ---- */
#checkout .cst-n,.cst-n{width:2.1rem!important;height:2.1rem!important;font-size:.95rem!important;font-weight:800}
#checkout .cst-i.is-current .cst-n,.cst-i.is-current .cst-n{background:linear-gradient(135deg,#F01767,#702B7A)!important;color:#fff!important;box-shadow:0 0 0 4px rgba(240,23,103,.18)}
#checkout .cst-i.is-current .cst-l{color:#0e0b14;font-weight:800}
@media (max-width:640px){.cst-l{display:inline!important;font-size:.78rem}.cst{gap:.75rem!important}}
.cop-list{list-style:none;padding-left:0!important}
.cop-list li{position:relative;padding-left:1.7rem}
.cop-list li:before{content:"";position:absolute;left:0;top:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;background:#e8f7ee}
.cop-list li:after{content:"";position:absolute;left:.4rem;top:.38rem;width:.3rem;height:.58rem;border:solid #12924b;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Touch targets at least 44px on phones */
@media (pointer:coarse){
  .v2-foot a,.br-card a,.br-actions a,.brochure a,.co-nav .btn,.cs-x,.cst-i a,.contact-card a,.nf-apply a,.nf-trust a,[data-cookie-settings]{min-height:44px;display:inline-flex;align-items:center}
  .cs-x{min-width:44px;justify-content:center}
}
/* Sticky mobile bar and chat never cover the end of the page */
@media (max-width:900px){body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}
body.kb-open .mobile-cta,body.kb-open .v2-sticky,body.kb-open .c1-sticky,body.kb-open [class*="sticky-cta"]{display:none!important}
/* Secondary contact prompt used on hero sections and article ends */
.ms-talk{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin-top:12px;color:#FF8AB2;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.ms-cta-end{margin:48px 0 0;padding:28px;border-radius:14px;background:linear-gradient(135deg,rgba(240,23,103,.12),rgba(112,43,122,.14));border:1px solid rgba(240,23,103,.25)}
.ms-cta-end h2{margin:0 0 8px;font:800 1.35rem Montserrat,system-ui,sans-serif}
.ms-cta-end p{margin:0 0 16px}
.ms-cta-end .ms-btns{display:flex;flex-wrap:wrap;gap:12px}
.ms-dl-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:min(92vw,460px);padding:18px 20px;border-radius:14px;background:#151A26;color:#fff;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12)}
.ms-dl-toast p{margin:0 0 12px}
.ms-dl-toast .ms-btns{display:flex;gap:10px;flex-wrap:wrap}
.ms-dl-toast button{background:none;border:0;color:#C9C1CE;text-decoration:underline;min-height:44px;cursor:pointer}