/* Fifteenth homepage remix, slice: Mercer banner + hero. Linked ONLY from the Home page head.
   Everything is scoped to [data-rx-hero], [data-rx-nav] or rx- classes so no other page is affected.
   Desktop layout from 992px (Webflow's tablet breakpoint is 991). */

/* ---------- Mercer banner (inside the Home-page nav block, so it scrolls with the header) ---------- */
.rx-mbar{display:block;background:var(--_base---pale-iris,#E9E9FF);color:var(--_base---neutral-700,#131313);text-align:center;font-size:14px;line-height:1.4;padding:9px 16px;text-decoration:none}
.rx-mbar:hover>span:nth-of-type(3){text-decoration-thickness:2px}
.rx-mbar-lead,.rx-mbar>span:nth-of-type(1){font-weight:500}
.rx-mbar-more,.rx-mbar>span:nth-of-type(3){text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.rx-mbar-long{display:inline}
@media (max-width:767px){.rx-mbar{font-size:13px;padding:9px 12px}.rx-mbar-long,.rx-mbar>span:nth-of-type(2){display:none}}

/* header look from the mock: white frosted bar */
[data-rx-nav]{background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
/* phone: header Sign Up appears only once the hero buttons have scrolled away (mock behaviour) */
@media (max-width:767px){
  [data-rx-nav] .navbarcta{transition:opacity .25s,visibility .25s}
  html:not(.rx-past-hero) [data-rx-nav] .navbarcta{opacity:0;visibility:hidden;pointer-events:none}
}

/* ---------- hero ---------- */
.home-hero{overflow-x:clip;max-height:none!important;height:auto!important;min-height:0!important;justify-content:flex-start!important;padding-top:calc(var(--rx-navh,104px) + 30px)!important}
@media (min-width:992px){.home-hero{padding-top:calc(var(--rx-navh,142px) + 96px)!important}}
[data-rx-hero]>*{margin-top:0!important;margin-bottom:0!important}
/* headline: mock type + highlighter (replaces the live script-drawn marker, which breaks when the line wraps) */
[data-rx-hero] .main-headline{font-size:clamp(30px,10.1vw,60px);line-height:.98;letter-spacing:-.025em;font-weight:500;text-wrap:balance}
[data-rx-hero] .main-headline .span-line-break{display:none}
[data-rx-hero] .big-headline-marker-container>.marker{display:none!important}
[data-rx-hero] .big-headline-marker-container{position:static;background:linear-gradient(90deg,rgba(207,204,255,0) 0%,var(--_base---light-iris,#CFCCFF) 38%,var(--_base---light-iris,#CFCCFF) 100%) no-repeat left 55%/0% 86%;padding:0 .08em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s cubic-bezier(.6,0,.2,1) .2s}
html.rx-seen [data-rx-hero] .big-headline-marker-container{background-size:100% 86%}
[data-rx-hero] .main-subheadline-container{margin-top:16px!important}
[data-rx-hero] .main-subheadline{font-size:17.3px;line-height:1.45;font-weight:500;color:var(--_base---neutral-700,#131313)}
[data-rx-hero] .hero-cta-container{margin-top:22px!important}
[data-rx-hero] .hero-cta-container .button-new{min-height:50px;display:inline-flex;align-items:center;justify-content:center}
.rx-sub2{margin:17px 0 0!important;font-size:17.3px;line-height:1.45;font-weight:400;color:var(--_base---neutral-600,#3B3A37)}
[data-rx-hero] .hero-bullets-container{flex-direction:column;align-items:flex-start;gap:8px;margin-top:20px!important}
[data-rx-hero] .hero-bullet-text{font-size:15px;line-height:1.45;color:var(--_base---neutral-600,#3B3A37)}


/* phone + tablet: one column; mock order is the DOM order (headline, sub, buttons, phone, sub2, checks) */
@media (max-width:991px){
  [data-rx-hero] .hero-cta-container{flex-direction:column;align-items:stretch;gap:12px}
  [data-rx-hero] .hero-cta-container .button-new{width:100%;justify-content:center;margin:0}
  [data-rx-stagewrap]{margin:30px -20px 0!important}
  .rx-stage{height:clamp(420px,126vw,580px)}
  .rx-wave{position:absolute;left:-80%;width:260%;bottom:6%;height:auto}
}
@media (min-width:768px) and (max-width:991px){[data-rx-hero]{max-width:600px;margin-left:auto;margin-right:auto}[data-rx-stagewrap]{margin:30px 0 0!important}}

/* desktop: copy left, phone right */
@media (min-width:992px){
  /* copy column on the left; the phone column is absolutely placed on the right so it can't stretch the copy's spacing */
  [data-rx-hero]{--rx-stw:min(528px,46%);--rx-gap:clamp(32px,4vw,72px);position:relative;max-width:1160px;margin-left:auto!important;margin-right:auto!important;padding-right:calc(var(--rx-stw) + var(--rx-gap))!important;min-height:600px}
  [data-rx-hero]>*{max-width:560px}
  [data-rx-hero]>[data-rx-stagewrap]{position:absolute!important;top:-44px;right:0;width:var(--rx-stw);max-width:none}
  [data-rx-hero] .main-headline{font-size:clamp(56px,5vw,72px)}
  [data-rx-hero] .main-subheadline{font-size:24.7px}
  [data-rx-hero] .hero-cta-container{margin-top:30px!important}
  .rx-sub2{margin-top:32px!important;font-size:20.9px}
  [data-rx-hero] .hero-bullets-container{margin-top:19px!important}
  [data-rx-hero] .hero-bullet-text{font-size:18px}
  .rx-stage{height:640px}
  .rx-rdev{width:316px!important}
  .rx-wave{position:absolute;bottom:6%;height:auto;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) calc(var(--rx-stl,60vw) - 90px),#000 calc(var(--rx-stl,60vw) + 50px),#000 100%);
    mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) calc(var(--rx-stl,60vw) - 90px),#000 calc(var(--rx-stl,60vw) + 50px),#000 100%)}
}

/* ---------- phone stage (ported from the mock, classes prefixed rx-) ---------- */
.rx-stage{position:relative;overflow:visible}
.rx-stage *{box-sizing:border-box}
.rx-clip{position:absolute;inset:0;overflow:hidden;z-index:1;
  background:radial-gradient(75% 85% at 50% 100%,var(--_base---pale-iris,#E9E9FF) 0%,rgba(233,233,255,0) 72%);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 80px),transparent);mask-image:linear-gradient(#000 calc(100% - 80px),transparent)}
.rx-wave{display:block;overflow:visible;z-index:0;pointer-events:none}
.rx-wave path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1)}
.rx-stage.rx-seen .rx-wave path{stroke-dashoffset:0}
.rx-wave path:nth-child(2){transition-delay:.12s}.rx-wave path:nth-child(3){transition-delay:.24s}.rx-wave path:nth-child(4){transition-delay:.36s}
.rx-wave path:nth-child(5){transition-delay:.48s}.rx-wave path:nth-child(6){transition-delay:.6s}.rx-wave path:nth-child(7){transition-delay:.72s}
.rx-rdev{position:absolute;left:50%;top:7%;width:min(70%,300px);transform:translateX(-50%);border-radius:44px;background:var(--_base---neutral-700,#131313);padding:7px;box-shadow:0 50px 80px -40px rgba(32,26,92,.45),0 2px 6px rgba(19,19,19,.12);animation:rx-rise 1s cubic-bezier(.2,.7,.2,1) both}
.rx-island{position:absolute;top:15px;left:50%;width:30%;height:19px;border-radius:20px;background:#000;transform:translateX(-50%);z-index:3}
.rx-rscr{border-radius:37px;overflow:hidden;background:var(--_base---neutral-200,#EFEDE8)}
.rx-rdev img{display:block;width:100%;height:auto;max-width:100%}
.rx-sbar{display:flex;justify-content:space-between;align-items:center;height:40px;padding:6px 26px 0 30px;font-size:13px;font-weight:600;letter-spacing:-.01em;background:var(--_base---neutral-200,#EFEDE8);color:var(--_base---neutral-700,#131313)}
.rx-sbar svg{height:11px;width:auto;display:block;fill:currentColor}
.rx-ic{display:flex;gap:5px;align-items:center}
.rx-rshot{position:relative}
.rx-cover{position:absolute;left:4.9%;right:4.9%;background:#fff;bottom:12.3%;transition:opacity .45s,transform .45s}
.rx-c2{top:35.5%}.rx-c3{top:53.6%}
.rx-cover.rx-off{opacity:0;transform:translateY(8px)}
.rx-rtyping{position:absolute;display:flex;gap:4px;padding:8px 10px;border-radius:14px;background:var(--_base---neutral-200,#EFEDE8);opacity:0;transition:opacity .25s}
.rx-rtyping.rx-on{opacity:1}
.rx-rtyping i{width:5px;height:5px;border-radius:50%;background:var(--_base---neutral-400,#918F89);animation:rx-dot 1s infinite}
.rx-rtyping i:nth-child(2){animation-delay:.15s}.rx-rtyping i:nth-child(3){animation-delay:.3s}
@keyframes rx-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes rx-rise{from{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%,0)}}


/* v3 (11/5, Jon): copy above the waves; "Talk to an expert" solid fill + soft hover (no black flash) */
[data-rx-hero]>*:not([data-rx-stagewrap]){position:relative;z-index:2}
[data-rx-hero] .button-new.outlined{background-color:var(--_base---neutral-100,#FBFAF8)!important;border:1.5px solid var(--_base---neutral-700,#131313)!important;color:var(--_base---neutral-700,#131313)!important}
[data-rx-hero] .button-new.outlined:hover{background-color:var(--_base---neutral-200,#EFEDE8)!important;color:var(--_base---neutral-700,#131313)!important}
/* v3: option C, a bigger phone so the thread is readable; the thread is scrolled up past the app header so all three messages fit */
.rx-sbar{position:relative;z-index:2}
.rx-rshot{margin-top:-14%}
@media (min-width:992px){.rx-clip .rx-rdev{width:420px!important;top:3%}}
@media (max-width:991px){.rx-stage{height:600px!important}.rx-clip .rx-rdev{width:min(90%,360px)!important;top:4%}}

/* v6 (11/5, Jon): Mercer's waves are central accents, not breaks. Hero = the accent (official Wave 1 artwork, swapped in by
   rx-hero JS); the strip under the logo strip is hidden because the decode band is already a natural break. */
.mx-wave-anchor{display:none!important}
.rx-wave-mx{opacity:0;transition:opacity 1.4s ease}
.rx-stage.rx-seen .rx-wave-mx{opacity:1}
.rx-wave-mx path,.rx-wave-mx line{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important}


/* page-coloured block behind the phone's faded bottom (above the wave, below the phone) so the wave never shows through the phone */
.rx-stage::before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:calc(420px + 24px);height:140px;z-index:1;pointer-events:none;background:var(--_base---neutral-100,#FBFAF8);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
@media (max-width:991px){.rx-stage::before{width:calc(min(90%,360px) + 24px)}}

/* v7 (11/5, Jon): on phone the device covers a wave placed behind it, so the accent sits ABOVE the phone instead:
   the phone rises out of the wave, in the gap under the buttons (desktop unchanged). */
@media (max-width:991px){
  .rx-wave.rx-wave-mx{bottom:auto!important;top:40px!important;left:-35%!important;width:170%!important} /* 11/6: behind the phone only (was -96px: peeked above it) */
  [data-rx-hero] .hero-cta-container .button-new{background-color:var(--_base---neutral-100,#FBFAF8)}
  [data-rx-hero] .hero-cta-container{position:relative;z-index:3}
}

/* v8 (11/5, Jon): bigger Mercer banner type, we want clicks */
.rx-mbar{font-size:17px!important;padding:12px 20px!important;line-height:1.35!important}
.rx-mbar-more,.rx-mbar>span:nth-of-type(3){font-weight:600}
@media (max-width:767px){.rx-mbar{font-size:15px!important;padding:11px 14px!important}}
/* Hero thread name patches (rx-hero.js). Positions are % of the 780x1688 thread image; type in cqw of .rx-rshot (on children only). */
.rx-rshot{container-type:inline-size}
.rx-nm{position:absolute;display:flex;align-items:center;gap:1.7cqw;background:#fff;white-space:nowrap;font-size:2.95cqw;line-height:1;color:#131313;transform:translateY(-50%);pointer-events:none}
.rx-nm b{font-weight:500;letter-spacing:-.01em}
.rx-nm i{font-style:italic;font-weight:400;color:#3B3A37;letter-spacing:-.01em}
.rx-nm1,.rx-nm3{left:14.1%;width:38.5%;height:2.4%;padding-left:1%;box-sizing:border-box}
.rx-nm1{top:16.1%}
.rx-nm3{top:55.45%}
.rx-nmc{right:8.3%;width:31%;height:3%;justify-content:flex-end;top:37.68%}
.rx-av{display:grid;place-items:center;width:4.9cqw;height:4.9cqw;border-radius:50%;box-shadow:inset 0 0 0 1.5px #D8D6D1;font-size:2.4cqw;font-weight:500;color:#3B3A37;background:#fff}

/* 11/6 (Jon): phone mock less literal — no status bar (9:41/signal/battery) and no camera island. */
.rx-island,.rx-sbar{display:none!important}
.rx-rscr{padding-top:12px}

/* 11/6 (Jon, option A): below desktop, copy reads as one block above the phone:
   headline, sentence 1, sentence 2, check bullets, both CTAs on one line, then the phone. Desktop untouched. */
@media (max-width:991px){
  [data-rx-hero]{display:flex!important;flex-direction:column!important;gap:0!important;row-gap:0!important}
  [data-rx-hero]>.main-headline-container{order:1}
  [data-rx-hero]>.main-subheadline-container{order:2;margin-top:16px!important}
  /* 11/7 (Jon, option B): sentence 2 + checks moved BELOW the phone so the first screen is headline, sentence 1, CTAs, phone */
  [data-rx-hero]>.rx-sub2{order:7;margin-top:28px!important}
  [data-rx-hero]>.hero-bullets-container{order:8;margin-top:16px!important}
  [data-rx-hero]>.hero-cta-container{order:5;margin-top:24px!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:8px!important;height:auto!important}
  [data-rx-hero]>.hero-cta-container .button-new{flex:1 1 0!important;min-width:0!important;width:auto!important;height:44px!important;padding:0 10px!important;margin:0!important}
  [data-rx-hero]>.hero-cta-container .button-new:first-child{flex:1.5 1 0!important}
  [data-rx-hero]>.hero-cta-container .button-text-new{font-size:14px!important;white-space:nowrap!important;letter-spacing:-.01em}
  [data-rx-hero]>.w-embed{order:6}
}

/* 11/6 (Jon): Mercer banner now sits under the logo marquee; make it more prominent (taller, a touch bigger). */
a.rx-mbar{padding:24px 24px!important;font-size:18px!important;line-height:1.4!important}
@media (max-width:767px){a.rx-mbar{padding:18px 18px!important;font-size:16px!important}}

/* 11/6 (Jon, vs Mercer's desktop box): balanced weights (bold title, regular explanation) and "Read more" as a real
   button (the site's standard Iris pill, same as the box's). font-size:0 on the link hides the loose spaces + old arrow. */
a.rx-mbar{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;row-gap:10px!important;font-size:0!important}
a.rx-mbar>span:nth-of-type(1){font-size:18px!important;font-weight:600!important;margin-right:.35em}
a.rx-mbar>span:nth-of-type(2){font-size:18px!important;font-weight:400!important}
a.rx-mbar>span:nth-of-type(3){font-size:15px!important;font-weight:500!important;text-decoration:none!important;white-space:nowrap;
  background:linear-gradient(90deg,#E6E4FF,#B3ADFA);border-radius:999px;padding:12px 22px;margin-left:24px;line-height:1.2;transition:filter .2s}
a.rx-mbar:hover>span:nth-of-type(3){filter:brightness(.96)}
@media (max-width:767px){
  a.rx-mbar>span:nth-of-type(1){font-size:16px!important;margin-right:0}
  a.rx-mbar>span:nth-of-type(3){font-size:14px!important;padding:10px 18px;margin-left:0}
}

/* 11/6 (Jon): lighter strip so the Read more button and text stand out */
a.rx-mbar{background:#F4F4FF!important}

/* 11/6 (Jon): image-baked line at the top of the phone screen (app top bar) uncovered when the status bar went -> trim it */
.rx-rshot>img{clip-path:inset(7% 0 0 0)}

/* 11/6 (Jon): banner like Mercer's box: bold title over the regular line, button to the right (desktop);
   stacked + centred on phone, explanation shown on phone too. No periods (text edited in Designer). */
a.rx-mbar{display:grid!important;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:36px;row-gap:2px!important;text-align:left}
a.rx-mbar>span:nth-of-type(1){grid-column:1;grid-row:1;margin-right:0!important}
a.rx-mbar>span:nth-of-type(2){grid-column:1;grid-row:2;display:block!important;font-size:16px!important;color:#3B3A37}
a.rx-mbar>span:nth-of-type(3){grid-column:2;grid-row:1/3;margin-left:0!important}
@media (max-width:767px){
  a.rx-mbar{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:6px!important}
  a.rx-mbar>span:nth-of-type(1),a.rx-mbar>span:nth-of-type(2),a.rx-mbar>span:nth-of-type(3){grid-column:1;grid-row:auto}
  a.rx-mbar>span:nth-of-type(2){font-size:15px!important;max-width:30em;text-wrap:balance}
  a.rx-mbar>span:nth-of-type(3){margin-top:8px}
}

/* 11/6 v15: phone stage trimmed to just below the 3rd message (was ~110px of empty screen) */
@media (max-width:991px){.rx-stage{height:510px!important}}
/* 11/6 v15: desktop headline on two lines, "Full-service taxes / for ambitious earners" (Tanay). 9em fits
   "for ambitious earners" (8.8em) but not "Full-service taxes for"; text overflows the column into the phone's gutter. */
@media (min-width:992px){[data-rx-hero] .main-headline{width:9em;max-width:none}}
@media (min-width:992px) and (max-width:1279px){[data-rx-hero] .main-headline{font-size:clamp(44px,4.5vw,64px)}}

/* ===== v20: phone header + menu, option D = static header (11/9) ===== */
/* Phone menu: action buttons under the links (all options). Revives the hidden .navbar_menu-bottom block. */
@media (max-width:991px){
  .mobile-navigation-container{justify-content:flex-start!important}
  .navbar_menu-bottom{display:block!important;position:static!important;width:100%;height:auto;margin-top:28px}
  .navbar_menu-bottom .button-group{display:flex!important;flex-direction:column;gap:12px;width:100%;height:auto}
  .navbar_menu-bottom .button-new{width:100%!important;height:48px!important;display:flex!important;justify-content:center;align-items:center;margin:0!important;box-sizing:border-box}
}
/* Header pills pack to the right next to the menu icon (the container is fixed-width + space-between, so a hidden pill used to strand the other mid-header). */
@media (max-width:991px){
  [data-rx-nav] .side-links-container{justify-content:flex-end!important;gap:12px!important;padding-left:12px}
}
/* Narrow phones (iPhone SE 1st gen, 320px): tighter pills so Sign Up never touches the logo. */
@media (max-width:359px){
  [data-rx-nav] .side-links-container{gap:8px!important;padding-left:8px}
  [data-rx-nav] .side-links-container .button-new{padding:0 11px!important}
}
/* D (11/9, Jon: switching while scrolling is jarring): the phone header never changes. Logo + Log In outline pill + menu icon, all the way down; sign-up lives in the menu and the page's own buttons. Replaces C and the 11/5 scroll-in Sign Up. Tablet (768-991) header unchanged. */
@media (max-width:767px){
  [data-rx-nav] .outlined-log-in{border:1.333px solid #131313!important;background:transparent!important;padding:0 16px!important}
  [data-rx-nav] .navbarcta{display:none!important}
}
/* Tablet with the menu open: the menu carries the purple button, so the header's Sign Up steps aside (one purple per screen). */
@media (max-width:991px){ body.frozen [data-rx-nav] .navbarcta{visibility:hidden!important} }

/* v21 (11/11, Jon option B): desktop hero wave half as strong behind the copy (.28 -> .14); full strength behind/right of the phone unchanged */
@media (min-width:992px){
  .rx-wave{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.14) 0,rgba(0,0,0,.14) calc(var(--rx-stl,60vw) - 90px),#000 calc(var(--rx-stl,60vw) + 50px),#000 100%);
    mask-image:linear-gradient(90deg,rgba(0,0,0,.14) 0,rgba(0,0,0,.14) calc(var(--rx-stl,60vw) - 90px),#000 calc(var(--rx-stl,60vw) + 50px),#000 100%)}
}