/* Home hero only. The original hydrated content and all call handlers stay intact. */
@font-face{font-family:"HH Inter";src:url(/_next/static/immutable/media/inter_vf_latin-s.p.23d5jljmt72l0.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

section[data-track-section="hero"] > *:not(.hx-wrap){display:none !important}
section[data-track-section="hero"]{
  --hx-nav-height:104px;
  position:relative;z-index:3;isolation:isolate;display:block;padding:0;margin:0; /* z-index: the country list can overlap the next section */
  min-height:calc(100svh - var(--hx-nav-height));overflow-x:clip;
  font-family:"HH Inter",Inter,Arial,sans-serif;color:#0c1422;
}
section[data-track-section="hero"]::before{
  content:"";position:absolute;z-index:-1;inset:calc(-1 * var(--hx-nav-height)) 0 0;pointer-events:none;
  background:#f8fcff url(/assets/hero/hero-bg.svg?v=3) center/100% 100% no-repeat;
}
.hx-wrap{
  container-type:inline-size;position:relative;width:calc(90% - 40px);max-width:1600px;margin:0 auto;
  min-height:calc(100svh - var(--hx-nav-height));display:flex;flex-direction:column;
}
.hx-hero{
  --u:.0602cqw;
  position:relative;flex:1;display:flex;align-items:center;padding:28px 0;
}
.hx-row{position:relative;width:100%}
.hx-copy{position:relative;z-index:2;width:51%}
.hx-pill{
  display:inline-flex;align-items:center;gap:calc(20*var(--u));width:fit-content;
  height:calc(56*var(--u));margin:0 0 calc(39*var(--u));padding:0 calc(31*var(--u));
  border-radius:999px;background:linear-gradient(100deg,#dff8e9 0%,#e9f8fa 43%,#defbd3 100%);
  color:#07152d;font-size:calc(24.2*var(--u));font-weight:400;letter-spacing:-.012em;white-space:nowrap;
}
.hx-pill svg{flex:none;width:calc(33*var(--u));height:calc(33*var(--u));color:#078637;animation:hxSparkGlow 2.8s ease-in-out infinite}
/* Sparkle: the big star breathes and tilts, the two small stars twinkle in turn (shrinking to a point and flaring back), and the
   whole icon gives off a soft green glow in time with them. */
.hx-pill svg path{transform-box:fill-box;transform-origin:center}
.hx-pill svg path:nth-child(1){animation:hxSparkBig 2.8s ease-in-out infinite}
.hx-pill svg path:nth-child(2){animation:hxSparkSmall 2.2s ease-in-out .4s infinite}
.hx-pill svg path:nth-child(3){animation:hxSparkSmall 2.2s ease-in-out 1.3s infinite}
@keyframes hxSparkBig{0%,100%{transform:scale(.9) rotate(0)}50%{transform:scale(1.14) rotate(-14deg)}}
@keyframes hxSparkSmall{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1.3) rotate(22deg);opacity:1}}
@keyframes hxSparkGlow{0%,100%{filter:drop-shadow(0 0 0 #19b85800)}50%{filter:drop-shadow(0 0 5px #19b858b3)}}
@media (prefers-reduced-motion:reduce){.hx-pill svg,.hx-pill svg path{animation:none}}
.hx-title{
  margin:0 0 calc(41*var(--u));font-size:calc(86*var(--u));line-height:1.01;font-weight:750;letter-spacing:-.015em;color:#0c131d;
}
.hx-title > span{display:block;white-space:nowrap}
.hx-title > span:first-child{letter-spacing:-.008em}
.hx-title em{
  position:relative;display:inline-block;padding-right:.06em;font-style:italic;font-weight:750;letter-spacing:-.025em;
  background:linear-gradient(100deg,#0074ff 5%,#008de9 32%,#20b46e 65%,#6bd500 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.hx-title em svg{position:absolute;left:11.5%;width:58.5%;height:.208em;bottom:-.23em;overflow:visible}
.hx-sub{margin:0 0 calc(54*var(--u));font-size:calc(25.6*var(--u));line-height:1.32;font-weight:400;letter-spacing:0;color:#394b6a;white-space:nowrap}
/* Button row. --cu is the row's own scale (hero unit x .78). --bh / --bw / --bf are the ONE height / width / font size shared by
   "Talk with Ola" and "Call me", so the two buttons always match; the breakpoints below only change these three values. */
.hx-cta{
  --cu:calc(var(--u)*.78);--bh:max(42px,calc(66*var(--cu)));--bw:max(160px,calc(270*var(--cu)));--bf:max(14px,calc(22.5*var(--cu)));
  display:flex;align-items:center;gap:calc(25*var(--cu));
}
.hx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:calc(18*var(--cu));
  height:var(--bh);padding:0 12px;border:0;border-radius:999px;
  font:inherit;font-size:var(--bf);font-weight:650;letter-spacing:-.035em;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.hx-btn svg{flex:none;display:block}
.hx-btn:focus-visible{outline:3px solid #3384ed;outline-offset:4px}
.hx-btn-primary{
  width:var(--bw);
  color:#fff;background:linear-gradient(105deg,#0064ff 0%,#004ed4 28%,#008659 66%,#12b800 100%);
  box-shadow:0 6px 12px #0070d12e,0 12px 24px -14px #007cebb3,inset 0 0 0 2px #ffffff20,inset 0 2px 3px #ffffff40;
}
.hx-btn-primary:hover{filter:brightness(1.08);transform:translateY(-2px)}
.hx-btn-primary .hx-wave{width:calc(41*var(--cu));height:calc(34*var(--cu))}
.hx-btn-primary .hx-wave rect{transform-box:fill-box;transform-origin:center} /* bars scale from their centre (see waveLive in the JS) */
.hx-btn-primary .hx-arrow{width:calc(26*var(--cu));height:calc(26*var(--cu))}
/* Gradient-outlined white pill (not used by the default hero layout; kept as a ready-made variant).
   Outline: a white padding-box layer over a gradient border-box layer, showing through the transparent border. */
.hx-btn-ghost{
  gap:calc(18*var(--u));padding:0 calc(32*var(--u));color:#0064ff;border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(105deg,#0064ff 0%,#004ed4 28%,#008659 66%,#12b800 100%) border-box;
  box-shadow:0 10px 22px -12px #1f78c46b,0 2px 6px #254c7e14;
}
.hx-btn-ghost:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px #1f78c480,0 3px 8px #254c7e18}
.hx-btn-ghost svg{width:calc(28*var(--u));height:calc(28*var(--u))}
/* Label: gradient-filled text (right padding stops the last glyph being clipped by the negative letter-spacing). */
.hx-btn-ghost > span{
  padding-right:.05em;color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(105deg,#0064ff 0%,#004ed4 28%,#008659 66%,#12b800 100%);
  -webkit-background-clip:text;background-clip:text;
}
/* Inline callback pill: country picker + number field + "Call me", shown by default.
   It shares the existing India-only phone validation and callback endpoint (hi-hello-india-only.js). */
section[data-track-section="hero"] form.hx-phone-form{
  /* ONE gradient-outlined pill around the whole control (country + number + call button), exactly as tall as "Talk with Ola" (--bh).
     Outline: a white padding-box layer over the same blue-to-green gradient as "Talk with Ola" in the border-box layer, which shows
     through the 2px transparent border. */
  position:relative;display:flex;align-items:center;flex:none;width:calc(var(--bw) + max(210px,calc(300*var(--cu))));min-width:0;height:var(--bh);margin:0;
  padding:0 0 0 14px;gap:9px;border:2px solid transparent;border-radius:999px;
  /* The pill's blue-to-green, ~10% softer than the "Talk with Ola" button's (shared by the outline and the label via the variable). */
  --hx-pill-grad:linear-gradient(105deg,#1a73ff 0%,#1a60d8 28%,#1a926a 66%,#2abf1a 100%);
  background:linear-gradient(#fff,#fff) padding-box,var(--hx-pill-grad) border-box;
  box-shadow:0 6px 12px #0070d117,0 12px 24px -14px #007ceb8c !important;
}
.hx-phone-form:focus-within{outline:2px solid #90b6f1;outline-offset:3px}
.hx-phone-country{position:relative;display:flex;align-items:center;justify-content:center;align-self:stretch;flex:none;width:44px;color:#737d8e}
.hx-phone-chevron{width:12px;height:12px;flex:none;transition:transform .2s ease}
.hx-phone-code{display:none}   /* phones only */
.hx-lbl-short{display:none}   /* phones only: the shorter button label */
.hx-phone-country select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* hidden; the picker keeps its value in sync */

/* ---------- country picker: flag + chevron button that opens a searchable list ---------- */
.hx-cc-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:100%;padding:0;border:0;border-radius:999px;
  background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.hx-cc-btn:focus-visible{outline:2px solid #90b6f1;outline-offset:2px}
.hx-cc-flag{width:20px;height:14px;flex:none;object-fit:cover;box-shadow:0 0 0 1px #6e7a8870}
.hx-phone-form.is-picking .hx-phone-chevron{transform:rotate(180deg)}
.hx-phone-form.is-picking:focus-within{outline:0}
.hx-cc-pop{
  position:absolute;z-index:80;left:-2px;top:calc(100% + 8px);width:calc(100% + 4px);min-width:min(340px,calc(100vw - 36px)); /* spans the pill incl. its 2px edge */
  padding:8px;border:1px solid #e3eaf5;border-radius:20px;background:#fff;text-align:left;
  box-shadow:0 24px 54px -18px #0f23505c,0 3px 12px #0f235014;animation:hxCcIn .16s ease-out;
}
.hx-cc-pop[hidden]{display:none}
@keyframes hxCcIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.hx-cc-searchbox{
  display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:2px solid transparent;border-radius:14px;
  background:#f1f3f7;color:#6b7686;transition:border-color .15s ease;
}
.hx-cc-searchbox:focus-within{border-color:#0b1233}
.hx-cc-searchicon{width:18px;height:18px;flex:none}
.hx-cc-search{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;box-shadow:none;background:transparent;color:#0f172a;font:inherit;font-size:15px;letter-spacing:-.01em}
.hx-cc-search::placeholder{color:#7c8798;opacity:1}
.hx-cc-list{position:relative;margin:6px 0 0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9d3e3 transparent}
.hx-cc-opt{display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;border-radius:12px;color:#0f172a;font-size:15px;letter-spacing:-.01em;cursor:pointer}
.hx-cc-opt.is-active{background:#f1f5fb}
.hx-cc-fl{width:24px;height:16px;flex:none;object-fit:cover;border-radius:2px;background:#eef2f8;box-shadow:0 0 0 1px #5a657585}
.hx-cc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-cc-dial{flex:none;color:#6b7686;font-variant-numeric:tabular-nums}
.hx-cc-check{width:16px;height:16px;flex:none;color:#0f172a}
.hx-cc-empty{padding:18px 10px;text-align:center;color:#7c8798;font-size:14px}
.hx-phone-form .PhoneInputInput{
  flex:1;min-width:0;width:0;height:30px;padding:0 10px 0 0;border:0;border-right:1px solid #d7dfed;border-radius:0;
  outline:0;background:transparent;color:#14213b;font:inherit;font-size:max(14px,calc(18*var(--cu)));font-weight:400;letter-spacing:-.02em;
}
.hx-phone-form .PhoneInputInput::placeholder{color:#737b8d;opacity:1}
.hx-phone-submit{
  display:inline-flex;align-items:center;justify-content:center;flex:none;gap:max(8px,calc(14*var(--cu)));
  /* The call button sits inside the outlined pill: no edge of its own, gradient icon + label, a soft tint on hover. */
  width:calc(var(--bw) - 6px);height:calc(100% - 6px);margin:0 3px 0 0;padding:0;border:0;border-radius:999px;
  background:transparent;color:#0064ff;font:inherit;font-size:var(--bf);font-weight:650;letter-spacing:-.035em;white-space:nowrap;cursor:pointer;
  transition:background-color .2s ease;
}
/* Label: gradient-filled text (right padding stops the last glyph being clipped by the negative letter-spacing). */
.hx-phone-submit > span{
  padding-right:.05em;color:transparent;-webkit-text-fill-color:transparent;
  background:var(--hx-pill-grad);
  -webkit-background-clip:text;background-clip:text;
}
.hx-phone-submit > svg{width:max(16px,calc(26*var(--cu)));height:max(16px,calc(26*var(--cu)));flex:none}
.hx-phone-submit:hover{background:#eef5ff}
.hx-phone-submit:focus-visible{outline:2px solid #729eff;outline-offset:-2px}
.hx-phone-submit:disabled{opacity:.6;cursor:wait}
.hx-visual{position:absolute;z-index:1;left:51%;top:calc(-47*var(--u));width:calc(820*var(--u));pointer-events:none;user-select:none}
.hx-visual img{display:block;width:100%;height:auto;-webkit-user-drag:none}
/* Wide screens: nudge the glass H / agent preview left. Narrower laptops keep the original spot so it never crowds the call field. */
@media (min-width:1500px){.hx-visual.hx-ola-shifted{left:44%}}
/* The glass H itself stays put. Only once it has turned into the agent preview does it glide left (and back when the preview ends). */
.hx-visual.hx-ola-active{transition:left .7s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.hx-visual.hx-ola-active{transition:none}}

/* Benefits are part of the first screen, sharing the same alignment as the copy. */
.hx-benefits{display:grid;grid-template-columns:25% 26% 25.6% 23.4%;margin:0;padding:16px 0 60px;list-style:none}
.hx-benefit{position:relative;display:flex;align-items:center;gap:16px;padding:0 24px 0 36px;min-width:0}
.hx-benefit:first-child{padding-left:18px;gap:16px}
.hx-benefit:last-child{padding-right:0}
.hx-benefit + .hx-benefit::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:#b7c7dd}
.hx-benefit-icon{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:#00a514;background:linear-gradient(145deg,#e9ffdf,#d5f7e6);box-shadow:0 4px 12px #82cdbb0d}
.hx-benefit:nth-child(even) .hx-benefit-icon{color:#0073ff;background:linear-gradient(145deg,#edfaff,#d8f3ff)}
.hx-benefit-icon svg{width:28px;height:28px}
.hx-benefit strong{display:block;margin-bottom:4px;font-size:17.5px;line-height:1.25;letter-spacing:-.045em;font-weight:700;color:#080e29;white-space:nowrap}
.hx-benefit p{margin:0;font-size:14px;line-height:1.4;letter-spacing:-.025em;color:#364d74;white-space:nowrap}

/* One entrance sequence; the script removes hx-enter when the last benefit settles. */
@keyframes hxReveal{
  from{opacity:0;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes hxUnderlineReveal{
  from{opacity:0;transform:scaleX(0)}
  to{opacity:1;transform:scaleX(1)}
}
.hx-enter .hx-pill,
.hx-enter .hx-title > span,
.hx-enter .hx-sub,
.hx-enter .hx-cta,
.hx-enter .hx-benefit{
  animation:hxReveal .6s cubic-bezier(.2,.7,.2,1) both;
}
.hx-enter .hx-pill{animation-delay:.04s}
.hx-enter .hx-title > span:first-child{animation-delay:.14s}
.hx-enter .hx-title > span:last-child{animation-delay:.25s}
.hx-enter .hx-sub{animation-delay:.36s}
.hx-enter .hx-cta{animation-delay:.47s}
/* The glass SVG assembles its four panes individually, including the H on the front pane. */
.hx-enter .hx-title em svg{transform-origin:left center;animation:hxUnderlineReveal .5s cubic-bezier(.2,.7,.2,1) .65s both}
.hx-enter .hx-benefit:nth-child(1){animation-delay:.68s}
.hx-enter .hx-benefit:nth-child(2){animation-delay:.76s}
.hx-enter .hx-benefit:nth-child(3){animation-delay:.84s}
.hx-enter .hx-benefit:nth-child(4){animation-delay:.92s}
@media (prefers-reduced-motion:reduce){
  .hx-enter .hx-pill,.hx-enter .hx-title > span,.hx-enter .hx-sub,.hx-enter .hx-cta,
  .hx-enter .hx-benefit,.hx-enter .hx-visual img,.hx-enter .hx-title em svg{animation:none}
}

/* ---------- call-me dialog (opened by both buttons; the form itself is handled by hi-hello-india-only.js) ---------- */
.hx-call-card{position:relative;max-width:430px;text-align:left;padding:30px 26px 22px}
.hx-call-card h2{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.01em}
.hx-call-card p{margin:0 0 18px}
.hx-call-form{display:flex;gap:10px;align-items:stretch}
.hx-call-field{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border:1px solid #d3deef;border-radius:999px;background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.hx-call-field:focus-within{border-color:#2f6fe0;box-shadow:0 0 0 3px rgba(47,111,224,.18)}
.hx-call-cc{display:inline-flex;align-items:center;gap:7px;flex:none;font-size:15px;font-weight:600;color:#142b55;white-space:nowrap}
.hx-call-cc svg{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(20,43,85,.15)}
.hx-call-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:#0f172a}
.hx-call-field input::placeholder{color:#8a97ae}
.hx-call-go{flex:none;height:52px;padding:0 22px;border:0;border-radius:999px;font:inherit;font-size:15px;font-weight:600;color:#fff;cursor:pointer;background:linear-gradient(90deg,#0042cf,#016592 55%,#1b9c13)}
.hx-call-go:hover{filter:brightness(1.1)}
.hx-call-go:disabled{opacity:.6;cursor:default}
.hx-call-card .hx-call-note{margin:14px 0 0;font-size:12.5px;color:#8a97ae}
@media (max-width:420px){.hx-call-form{flex-direction:column}.hx-call-go{height:48px}}

/* The navbar's width, glass, logo and buttons for the home page live in hi-hello-navbar.css (shared with the pricing page). */

@media (min-width:1800px){.hx-hero{--u:.963px}}
@media (max-width:1299px){
  .hx-cta{flex-wrap:wrap}
  section[data-track-section="hero"] form.hx-phone-form{flex-basis:100%;width:100%;max-width:460px}
}
@media (min-width:901px) and (max-width:1399px){
  .hx-benefit{gap:12px;padding-left:20px;padding-right:12px}
  .hx-benefit:first-child{padding-left:0}
  .hx-benefit-icon{width:44px;height:44px}.hx-benefit-icon svg{width:26px;height:26px}
  .hx-benefit strong{font-size:clamp(12px,1.2vw,17px)}.hx-benefit p{font-size:clamp(10px,.95vw,13px)}
  .hx-benefits{padding-bottom:48px}
}
/* Short desktop screens retain a single first screen without shrinking body text below readable sizes. */
@media (min-width:901px) and (max-height:740px){
  .hx-hero{--u:min(.0602cqw,.68px);padding:16px 0}.hx-copy{width:58%}
  .hx-visual{width:min(56cqw,650px);left:52%;top:-35px}
  .hx-benefits{padding-top:12px;padding-bottom:28px}
}
@media (min-width:1500px) and (max-height:740px){.hx-visual.hx-ola-shifted{left:45%}}
/* ---------- phones and small tablets (900px and below) ----------
   One column in this order: pill, headline, subtitle, glass H, "Talk with Ola", phone field, then the four benefits as one card. */
@media (max-width:900px){
  section[data-track-section="hero"]{--hx-nav-height:70px;min-height:0}
  /* Phone background: the desktop art is one wide picture squeezed to fit, which warped it on a tall narrow screen. These two pieces
     keep their proportions (top art pinned to the top, waves pinned to the bottom, both sized by the screen width). */
  section[data-track-section="hero"]::before{
    background:
      url(/assets/hero/hero-bg-m-top.svg?v=2) right top / 100% auto no-repeat,
      url(/assets/hero/hero-bg-m-bottom.svg?v=2) left bottom / 100% auto no-repeat,
      linear-gradient(160deg,#f6faff 0%,#fcfefe 52%,#effaff 100%);
  }
  /* The hero fills the first screen (up to a sensible height): the top block (pill, headline, subtitle, H) stays up top and the
     buttons + four features sit at the bottom of the screen, so any spare height opens up between the H and the buttons. */
  .hx-wrap{width:calc(100% - 40px);max-width:680px;min-height:min(calc(100svh - var(--hx-nav-height)),840px)}
  .hx-hero{--u:1px;display:flex;flex-direction:column;flex:1;padding:14px 0 0}
  .hx-row{display:flex;flex-direction:column;flex:1}
  .hx-copy{display:contents}                         /* lets the H sit between the subtitle and the buttons */
  .hx-pill{order:1;height:31px;margin:0 auto 22px;padding:0 14px 0 11px;gap:6px;font-size:13px}   /* auto side margins: centred */
  .hx-pill svg{width:23px;height:23px}
  .hx-title{order:2;margin:0 0 20px;font-size:min(8.3vw,56px);letter-spacing:-.025em;text-align:center}
  .hx-sub{order:3;position:relative;z-index:2;margin:0 auto;max-width:min(100%,365px);font-size:14px;line-height:1.4;color:#282d67;white-space:normal;text-align:center;text-wrap:balance}
  .hx-sub br{display:none}
  .hx-visual{order:4;position:relative;left:auto;top:auto;width:min(76%,380px);margin:4px auto -38px;transform:translateX(8.6%)}   /* the resting H's art sits left in its box; this centres it */
  .hx-visual.hx-ola-shifted{transform:none;margin-top:14px}   /* open preview: centred in its box, and a bit lower so its wider glass clears the text */
  .hx-visual.hx-ola-active{transition:transform .7s cubic-bezier(.4,0,.2,1),margin-top .7s cubic-bezier(.4,0,.2,1)}
  @media (prefers-reduced-motion:reduce){.hx-visual.hx-ola-active{transition:none}}
  .hx-cta{order:5;margin-top:auto;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:20px;--bh:50px;--bf:18px;--cta-w:max(70%,min(100%,310px))}   /* --cta-w: the one width both buttons share */      /* --bh: the button is exactly as tall as the phone field below it */
  .hx-ola-error{order:6;margin:14px auto 0;text-align:center}

  /* "Talk with Ola": a centred, wider button - wave left, label, arrow right */
  .hx-btn{gap:0}
  .hx-btn-primary{width:max(58%,min(100%,250px));height:46px;justify-content:space-between;padding:0 20px 0 22px;font-size:17px}   /* smaller than the phone field */
  .hx-btn-primary .hx-wave{width:30px;height:25px}.hx-btn-primary .hx-arrow{width:22px;height:22px}
  .hx-btn-primary > span{margin-right:10px}      /* centres the label between the wave and the arrow */

  /* Phone field: [flag v] [+91] | number | [Get a Call] with a solid blue-to-green button */
  section[data-track-section="hero"] form.hx-phone-form{
    flex:none;width:var(--cta-w);max-width:none;height:50px;padding:0 4px 0 12px;gap:5px;
    border:1.5px solid #b4cdf2;background:#fff;box-shadow:0 10px 24px -12px #3d6fd64d !important;
  }
  .hx-phone-country{width:auto;margin-right:2px}
  .hx-cc-btn{gap:5px;padding:0}
  .hx-cc-flag{width:20px;height:14px}
  .hx-phone-chevron{width:8px;height:8px}
  .hx-phone-code{display:block;flex:none;margin-left:0;padding-right:7px;border-right:1px solid #d3dae9;font-size:15px;font-weight:500;line-height:22px;letter-spacing:-.01em;color:#141826}
  .hx-phone-form .PhoneInputInput{padding:0 4px 0 2px;border-right-color:#d3dae9;font-size:16px;color:#14181f}   /* 16px typed text: stops iPhones zooming in on focus */
  .hx-phone-form .PhoneInputInput::placeholder{color:#8e9096;font-size:13px}
  .hx-phone-submit{
    width:auto;min-width:0;height:41px;margin:0;padding:0 9px;gap:5px;font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:#fff;
    background:linear-gradient(105deg,#0064ff 0%,#004ed4 28%,#008659 66%,#12b800 100%);box-shadow:0 6px 14px -6px #0070d180;
  }
  .hx-phone-submit > span{padding-right:0;color:#fff;-webkit-text-fill-color:#fff;background:none}
  .hx-phone-submit > svg{width:15px;height:15px}
  .hx-phone-submit svg path{fill:#fff}               /* the icon's gradient becomes plain white on the solid button */
  .hx-phone-submit:hover{background:linear-gradient(105deg,#0064ff 0%,#004ed4 28%,#008659 66%,#12b800 100%);filter:brightness(1.06)}
  .hx-lbl-long{display:none}.hx-lbl-short{display:inline}
  .hx-cc-search{font-size:16px}.hx-cc-opt{height:42px}

  /* Benefits: one white card, four icons with short labels */
  .hx-benefits{
    grid-template-columns:1fr 1fr 1fr 1.1fr;gap:0;margin:30px 0 14px;padding:14px 0 19px;
    background:#fff;border-radius:24px;box-shadow:0 14px 36px -18px #2a4a8a40,0 2px 8px #2a4a8a0f;
  }
  .hx-benefit,.hx-benefit:first-child{flex-direction:column;justify-content:flex-start;gap:0;padding:0 6px;text-align:center}
  .hx-benefit + .hx-benefit::before{display:block;left:0;top:4px;bottom:2px;width:1px;background:#d6dceb}
  .hx-benefit-icon{width:40px;height:40px}.hx-benefit-icon svg{width:23px;height:23px}
  .hx-benefit strong{display:block;width:min-content;margin:0 auto;font-size:12.5px;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:#14171f;white-space:normal}
  .hx-benefit p{display:none}
}
@media (max-width:420px){
  .hx-sub{font-size:14.5px}
  .hx-phone-submit{padding:0 10px}
  .hx-benefit strong{font-size:12px}
}
@media (max-width:360px){
  body:has(section[data-track-section="hero"]){min-width:0}
  .hx-phone-code{display:none}
  .hx-btn-primary{padding:0 18px 0 20px}
  .hx-btn-primary .hx-wave{width:28px;height:24px}
  .hx-benefit-icon{width:34px;height:34px}.hx-benefit-icon svg{width:20px;height:20px}
  .hx-benefit strong{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.hx-btn,.hx-phone-submit{transition:none}}