/* Live marketing hero, scoped to the two Direction A pages. */
body.direction-a .hero[data-live-hero]{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(ellipse at 5% 0%,#47D99420,transparent 50%),radial-gradient(ellipse at 100% 70%,#F7A07212,transparent 45%),linear-gradient(135deg,#EAFBF2,#FBF8F2 50%,#fff);padding-top:calc(var(--banner) + clamp(112px,10vw,168px));padding-bottom:clamp(48px,8vw,88px)}
body.direction-a .hero[data-live-hero]>.wrap{position:relative;z-index:1;gap:clamp(24px,4vw,56px);align-items:center}
body.direction-a .hero .h1{font-size:clamp(34px,4.2vw,60px);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin-top:24px}
body.direction-a .hero .h1 em{display:block;font-style:normal;color:var(--green-headline)}
body.direction-a .hero .kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #47D99440;border-radius:9999px;background:#ffffffcc;color:var(--ink);font:600 13px/1.5 var(--font);letter-spacing:0;text-transform:none}
body.direction-a .hero .pm-dot{width:8px;height:8px;flex:0 0 8px}
body.direction-a .hero .lede{margin-top:24px;font-size:18px;line-height:1.6;font-weight:500}
body.direction-a .hero .stagep{position:relative;isolation:isolate;padding:24px 0 16px}
body.direction-a .hero .stagep::before{content:"";position:absolute;inset:0 -3% 8%;z-index:-1;background:rgba(71,217,148,.12);border-radius:46% 54% 38% 62% / 42% 44% 56% 58%;transform:rotate(-5deg)}
body.direction-a .live-glow{position:absolute;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(48px);opacity:.5}
body.direction-a .live-glow-a{width:480px;height:480px;left:-180px;top:-160px;background:#47D99420}
body.direction-a .live-glow-b{width:440px;height:440px;right:-160px;bottom:-100px;background:#F7A07220}
body.direction-a .live-chip{position:absolute;display:inline-flex;align-items:center;gap:.55rem;padding:.6rem .95rem;border-radius:1rem;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(23,36,58,.08);box-shadow:0 14px 34px rgba(23,36,58,.14);font:600 .84rem/1.4 var(--font);color:var(--ink);white-space:nowrap;z-index:3;pointer-events:none}
body.direction-a .live-chip-icon{display:inline-flex;align-items:center;justify-content:center;height:1.7rem;width:1.7rem;border-radius:.6rem;background:#EAFBF2;color:#146443;flex:none}
body.direction-a .live-chip svg{width:1rem;height:1rem}
/* Desktop only: the chips stack in the free corner beside the phone, never over the screens. */
body.direction-a .stagep .live-chip{max-width:54%;white-space:normal}
body.direction-a .live-chip:nth-last-child(3){bottom:37%;left:-3%}
body.direction-a .live-chip:nth-last-child(2){bottom:25%;left:-6%;animation-delay:1.6s}
body.direction-a .live-chip:last-child{bottom:13%;left:-1%;animation-delay:3.1s}
body.direction-a .hero.live-motion-ready .live-glow-a{animation:marketing-drift-a 18s ease-in-out infinite}
body.direction-a .hero.live-motion-ready .live-glow-b{animation:marketing-drift-b 22s ease-in-out infinite}
body.direction-a .hero.live-motion-ready .live-chip{animation-name:marketing-float;animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
body.direction-a .hero.is-still :is(.live-glow,.live-chip){animation-play-state:paused}
body.direction-a .hero.live-motion-ready .dp-scene{transform:perspective(1100px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .25s ease-out}
body.direction-a .hero.is-still .dp-scene{transform:none;transition:none}
body.direction-a main :is(.btn-green,.pm-search-form .pm-button,.pm-form .pm-button,.pm-plan-featured .pm-button){position:relative;overflow:hidden;border-radius:var(--r);box-shadow:0 8px 22px rgba(71,217,148,.22)}
body.direction-a main :is(.btn-green,.pm-search-form .pm-button,.pm-form .pm-button,.pm-plan-featured .pm-button)::before{content:"";position:absolute;inset:0 auto 0 -80%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s ease;pointer-events:none}
@keyframes marketing-drift-a{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,24px) scale(1.08)}66%{transform:translate(-24px,40px) scale(.96)}}
@keyframes marketing-drift-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-36px,-28px) scale(1.12)}}
@keyframes marketing-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(hover:hover) and (pointer:fine){body.direction-a main :is(.btn-green,.pm-search-form .pm-button,.pm-form .pm-button,.pm-plan-featured .pm-button):hover::before{left:130%}}
@media(max-width:900px){body.direction-a .hero .live-chip{display:none}body.direction-a .hero .stagep::before{inset:0 0 8%}body.direction-a .hero .h1{font-size:clamp(32px,7vw,48px)}}
@media(prefers-reduced-motion:reduce){body.direction-a .hero :is(.live-glow,.live-chip){animation:none!important}body.direction-a .hero .dp-scene{transform:none;transition:none}body.direction-a main :is(.btn-green,.pm-search-form .pm-button,.pm-form .pm-button,.pm-plan-featured .pm-button)::before{transition:none;display:none}}

body.direction-a main .pm-search-form .pm-button{background:var(--green-cta);color:#fff}
body.direction-a main .pm-search-form .pm-button:is(:hover,:active){background:var(--green-cta-hover)}
/* The expanded no-JS navigation takes its actual space above the hero. */
html.no-js body.direction-a .site-chrome{position:relative}