/* Product-led composition using the supplied, unaltered phone artwork. */
.hero-upgraded{position:relative;background:linear-gradient(120deg,#fff 10%,#f9fbff 51%,#f2f0fc 100%);isolation:isolate}
.hero-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:26px;align-items:center;padding-block:54px 42px;min-height:780px}
.hero-upgraded .hero-copy{padding-bottom:25px;min-width:0}
.hero-upgraded h1{font-size:clamp(3.6rem,6.1vw,5.7rem);letter-spacing:-.065em;line-height:1.045}
.hero-upgraded .eyebrow{color:#685591;letter-spacing:.13em;font-size:.75rem}
.hero-upgraded .lead{font-size:1.0625rem;max-width:460px;line-height:1.85;margin:28px 0 34px}
.hero-upgraded .button{border-radius:16px;min-height:62px;padding-inline:27px;box-shadow:0 9px 26px #6151c126}
.hero-upgraded .text-button{border:0;padding-block:15px;color:#4f536a}
.hero-upgraded .text-button:hover{text-decoration:underline;text-underline-offset:5px;color:var(--purple)}
.hero-promises{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:28px;color:#6d6c80}
.hero-promises span{display:flex;align-items:center;gap:7px;font-size:.8125rem}
.hero-promises .icon{width:17px;height:17px;color:#7862b1}
.hero-app-preview{position:relative;margin:0;min-width:0;width:100%}
.hero-stage{position:relative;width:100%;aspect-ratio:1/1.09;isolation:isolate}
.hero-orbit{position:absolute;inset:14% -2% 8%;border-radius:50%;background:radial-gradient(ellipse at 35% 36%,#cbf2fa 0%,#e6e0fb 53%,#f1eefb00 72%);z-index:-1}
.hero-orbit:after{content:"";position:absolute;inset:5%;border:1px solid #ffffffb3;border-radius:50%;transform:rotate(-20deg)}
.showcase-phone{position:absolute;max-width:none;height:auto;object-fit:contain;filter:drop-shadow(0 24px 17px #36304c15);transform-origin:50% 70%}
.phone-overview{width:70%;left:-7%;top:6%;z-index:2;animation:overview-drift 7s ease-in-out infinite}
.phone-companion{width:80%;right:-14%;top:-3%;z-index:1;animation:companion-drift 8s ease-in-out infinite}
.showcase-note{position:absolute;bottom:5%;right:0;z-index:3;display:flex;gap:12px;align-items:center;background:#ffffffed;border:1px solid white;border-radius:17px;padding:17px 20px;box-shadow:0 12px 38px #4e436918;font-size:.8125rem;color:#6b657b;line-height:1.65;backdrop-filter:blur(12px)}
.showcase-note>.icon{color:#7755bc;background:#f1ecfd;padding:10px;width:43px;height:43px;border-radius:13px}
.showcase-note strong{color:#38324d;font-weight:650}
.hero-app-preview figcaption{text-align:center;color:#777087;font-size:.75rem;letter-spacing:.01em;padding-top:14px;position:relative;z-index:4}
.hero-app-preview figcaption span,.app-mobile-showcase figcaption span{margin-inline:6px}
.hero-bottom-line{height:1px;background:linear-gradient(90deg,#fff,#dfe2f2,#fff)}
.clarity-strip{padding:38px 0}
.navigation{height:90px}
.navigation nav .button{border-radius:13px}
/* Dark navigation with the supplied white wordmark and its original purple dot. */
.site-header{background:#09090e;color:#fff;border-bottom-color:#272331}
.navigation .wordmark{flex:0 1 230px;min-width:0}
.navigation .brand-logo{width:230px;height:50px;object-fit:cover;object-position:50% 51.5%}
.navigation nav>a:hover:not(.button){color:#d1c1ff}
.site-header a:focus-visible,.site-header button:focus-visible{outline-color:#c6b3ff}
.site-header .menu-toggle{background:#17141f;color:#fff;border-color:#393241;flex-shrink:0}
.site-header .menu-toggle:hover{background:#262030}
@media(max-width:950px){.site-header .navigation nav{background:#09090e;color:#fff;border-bottom-color:#272331;box-shadow:0 15px 25px #0003}.navigation .wordmark{flex-basis:200px}.navigation .brand-logo{width:200px;height:44px}}
.step,.bucket,.look-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
@media(hover:hover){.step:hover,.bucket:hover,.look-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px #2736500b;border-color:#d5d5ec}}
.app-mobile-showcase{position:relative;isolation:isolate;margin:0;display:flex;flex-direction:column;align-items:center;min-width:0}
.app-mobile-glow{position:absolute;inset:15% -3% 8%;background:radial-gradient(ellipse,#d8edfc 0%,#e5dafa88 43%,#fff0 70%);z-index:-1;border-radius:50%}
.app-mobile-screen{width:445px;max-width:100%;height:auto;filter:drop-shadow(12px 20px 20px #44406a18)}
.app-mobile-showcase figcaption{font-size:.75rem;color:#777087;text-align:center;margin-top:8px}
.mobile-section{gap:55px}
@keyframes overview-drift{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-9px) rotate(-4deg)}}
@keyframes companion-drift{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-7px) rotate(6deg)}}
@media(min-width:1500px){.hero-layout{min-height:810px}.hero-stage{aspect-ratio:1/1.1}}
@media(max-width:1100px){.hero-layout{gap:10px;min-height:720px;padding-block:55px}.hero-upgraded h1{font-size:4.6rem}.hero-stage{aspect-ratio:1/1.22}.phone-overview{width:76%;left:-13%;top:8%}.phone-companion{width:85%;right:-15%;top:0}.showcase-note{padding:13px 16px;right:-3%;bottom:7%;font-size:.75rem}.showcase-note>.icon{width:37px;height:37px;padding:9px}.hero-promises{gap:10px 18px}.hero-upgraded .actions{gap:20px}.hero-upgraded .button{padding-inline:22px}}
@media(max-width:950px){.navigation{height:80px}.hero-layout{grid-template-columns:1fr;gap:10px;padding-block:62px 40px}.hero-upgraded .hero-copy{max-width:650px;margin-inline:auto;width:100%;padding:0}.hero-upgraded h1{font-size:clamp(3.6rem,8vw,5.6rem)}.hero-upgraded .lead{max-width:570px}.hero-app-preview{max-width:590px;margin-inline:auto;margin-top:15px}.hero-stage{aspect-ratio:1/1.04}.phone-overview{width:70%;left:-6%;top:2%}.phone-companion{width:80%;right:-10%;top:-4%}.showcase-note{right:3%;bottom:4%;padding:16px 20px;font-size:.8125rem}.hero-app-preview figcaption{padding-top:8px}.mobile-section{gap:35px}.app-mobile-screen{width:430px}}
@media(max-width:540px){.hero-layout{padding-block:54px 31px;gap:15px}.hero-upgraded h1{font-size:clamp(3rem,12.2vw,4.2rem);line-height:1.065;letter-spacing:-.065em}.hero-upgraded .eyebrow{font-size:.75rem;letter-spacing:.08em;max-width:290px}.hero-upgraded .lead{font-size:1rem;line-height:1.8;margin:23px 0 28px}.hero-upgraded .actions{gap:11px 20px}.hero-upgraded .button{min-height:56px;padding:15px 20px;font-size:.875rem}.hero-upgraded .text-button{font-size:.875rem}.hero-promises{margin-top:21px;gap:8px 15px}.hero-promises span{font-size:.75rem}.hero-app-preview{width:calc(100% + 20px);max-width:none;margin:12px -10px 0}.hero-stage{aspect-ratio:1/1.16}.phone-overview{width:77%;left:-10%;top:4%}.phone-companion{width:87%;right:-13%;top:-2%}.showcase-note{bottom:0;right:5%;font-size:.75rem;padding:10px 13px;border-radius:13px;gap:8px}.showcase-note>.icon{width:32px;height:32px;padding:7px;border-radius:9px}.hero-app-preview figcaption{font-size:.75rem;padding-top:17px}.clarity-strip{padding:30px 0}.app-mobile-screen{width:390px}.mobile-section{padding-top:58px;padding-bottom:62px}.app-mobile-showcase{width:calc(100% + 16px);margin-inline:-8px}.app-mobile-showcase figcaption{margin-top:3px}.app-mobile-glow{inset:10% 0 5%}}
@media(prefers-reduced-motion:reduce){.showcase-phone{animation:none}.phone-overview{transform:rotate(-5deg)}.phone-companion{transform:rotate(7deg)}.step,.bucket,.look-card{transition:none}}

/* Native touch carousel on phones; the existing larger-screen grid is unchanged. */
.bucket-carousel-controls{display:none}
.hero-video-led{background:radial-gradient(ellipse at 95% 35%,#e9e4ff 0%,#f5f8fc 38%,#fff 75%)}
.hero-video-led .hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:54px;min-height:740px;padding-block:58px 48px}
.hero-video-led .hero-copy{padding-bottom:0}
.hero-video-led h1{font-size:clamp(3.5rem,6.15vw,5.9rem);line-height:1.055}
.hero-video-led .lead{max-width:510px}
.hero-video-visual{width:100%;min-width:0;margin:0}
.hero-video-frame{aspect-ratio:1;position:relative;overflow:hidden;border-radius:44px;background:#f5f8fc url('/assets/randy-cta-poster-fast.webp') center/contain no-repeat;box-shadow:0 22px 70px -32px #8271bb55;border:1px solid #fff}
.hero-randy-video{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.hero-randy-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.hero-video-visual figcaption{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:14px;padding-inline:5px;font-size:.8125rem;color:#625b78;min-height:44px}
.hero-video-visual figcaption>span{display:flex;gap:8px;align-items:center}
.hero-video-visual figcaption .icon{width:17px;height:17px;color:#7656b7}
.video-motion-toggle{padding:10px 0;min-height:44px;border:0;background:transparent;color:#6c5b8c;font:inherit;font-size:.8125rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.video-motion-toggle:focus-visible{outline:3px solid #7059b7;outline-offset:3px;border-radius:4px}
.hero-video-frame.is-motion-reduced .hero-randy-video{visibility:hidden}
.final-cta.phone-cta{position:relative;display:block;width:100%;max-width:none;margin-inline:0;padding:0;border:0;border-radius:0;background:radial-gradient(ellipse at 80% 50%,#262146 0%,#0d0c15 48%,#060609 85%);overflow:hidden}
.phone-cta-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;padding-block:70px 58px}
.phone-cta-copy{min-width:0;position:relative;z-index:2}
.phone-cta h2{color:#fff}
.phone-cta .eyebrow{color:#c8b9fa}
.phone-cta p:not(.eyebrow){color:#d9d5e3}
.phone-cta .text-button{color:white}
.phone-cta .actions{flex-wrap:wrap;gap:20px}
.phone-cta a:focus-visible{outline:3px solid #c6b3ff;outline-offset:5px}
.cta-phone-preview{width:100%;min-width:0;margin:0}
.cta-phone-stage{position:relative;aspect-ratio:1/1.17;isolation:isolate}
.cta-phone-stage::before{content:"";position:absolute;inset:12% 0 5%;border-radius:50%;background:radial-gradient(ellipse,#8270c333,#5f9dba15 55%,transparent 72%);z-index:-1}
.final-cta .cta-phone{position:absolute;display:block;height:auto;max-width:none;margin:0;border-radius:0;object-fit:contain;filter:drop-shadow(0 22px 24px #0005)}
.final-cta .cta-phone-budget{width:70%;left:-4%;top:10%;z-index:2;transform:rotate(-6deg)}
.final-cta .cta-phone-companion{width:82%;right:-12%;top:0;z-index:1;transform:rotate(8deg)}
.cta-phone-preview figcaption{color:#bbb4ce;font-size:.8125rem;text-align:center;margin-top:16px}
@media(max-width:1100px){.hero-video-led .hero-layout{gap:28px;min-height:650px}.hero-video-led h1{font-size:clamp(3.4rem,6.5vw,4.6rem)}.phone-cta-layout{gap:24px}.phone-cta h2{font-size:3.2rem}}
@media(max-width:950px){.hero-video-led .hero-layout{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:56px 38px;min-height:0}.hero-video-led .hero-copy{max-width:650px}.hero-video-led h1{font-size:clamp(3.5rem,9vw,5.8rem)}.hero-video-visual{max-width:650px;margin-inline:auto}.phone-cta-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:62px 44px}.phone-cta-copy{max-width:650px;width:100%;margin-inline:auto}.cta-phone-preview{max-width:560px;margin-inline:auto}}
@media(max-width:540px){.hero-video-led .hero-layout{padding-block:50px 30px;gap:28px}.hero-video-led h1{font-size:clamp(3rem,12.2vw,4.2rem)}.hero-video-frame{border-radius:28px}.hero-video-visual figcaption{padding:0;font-size:.75rem}.video-motion-toggle{font-size:.75rem}.phone-cta-layout{padding-block:50px 36px;gap:24px}.phone-cta h2{font-size:2.6rem}.cta-phone-preview figcaption{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.hero-randy-video{visibility:hidden}}
/* Preserve the full square artwork without mobile contain-fit side gutters. */
@media(max-width:540px){.look-card img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1;object-fit:contain}}
.mobile-section.randy-ready-section{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px}
.randy-ready-art{width:100%;min-width:0;margin:0;justify-self:center}
.randy-ready-art img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;border-radius:30px}
@media(max-width:950px){.mobile-section.randy-ready-section{grid-template-columns:minmax(0,1fr);gap:32px}.randy-ready-art{max-width:700px}}
@media(max-width:540px){.randy-ready-art img{border-radius:22px}}
.bucket-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){
  .buckets-section{min-width:0}
  .buckets-section .section-heading{margin-bottom:28px}
  .buckets-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:8px 0 20px;scrollbar-width:thin;scrollbar-color:#8270cf #f0edf8}
  .buckets-grid .bucket{flex:0 0 88%;min-width:0;scroll-snap-align:start;box-sizing:border-box;border-radius:28px;padding:28px;min-height:330px;display:flex;flex-direction:column;position:relative;opacity:1;transform:none;transition:none;box-shadow:0 8px 16px -14px #55488755}
  .buckets-grid .bucket:last-child{scroll-snap-align:end}
  .buckets-grid .bucket .icon-tile{margin-bottom:30px;align-self:flex-start}
  .buckets-grid .bucket h3{font-size:1.6rem;line-height:1.2;letter-spacing:-.04em}
  .buckets-grid .bucket p{font-size:1rem;line-height:1.65;min-height:0;margin:16px 0 28px}
  .buckets-grid .bucket-tag{font-size:.875rem;line-height:1.5;margin-top:auto}
  .buckets-section.carousel-ready .buckets-grid{scrollbar-width:none}
  .buckets-section.carousel-ready .buckets-grid::-webkit-scrollbar{display:none}
  .bucket-carousel-controls:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:2px}
  .bucket-position{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .bucket-current{font-weight:700;color:#27243d}
  .bucket-dots,.bucket-arrows{display:flex;align-items:center}
  .bucket-dots button{border:0;background:transparent;padding:0;width:44px;min-height:44px;display:grid;place-items:center;cursor:pointer}
  .bucket-dots button span{width:6px;height:6px;border-radius:8px;background:#b9b3cc;transition:width .2s ease,background .2s ease}
  .bucket-dots button[aria-current="true"] span{width:22px;background:linear-gradient(100deg,#3488c6,#7653c5)}
  .bucket-arrows{gap:6px}
  .bucket-arrows button{width:44px;height:44px;border:1px solid #e1ddf0;border-radius:50%;display:grid;place-items:center;background:white;color:#66529f;cursor:pointer;transition:background .2s ease}
  .bucket-arrows svg{width:20px;height:20px}
  .bucket-arrows button:not([aria-disabled="true"]):hover{background:#f0edfc}
  .bucket-arrows button[aria-disabled="true"]{color:#a8a2b7;background:#f7f6fa;cursor:default}
  .bucket-carousel-controls button:focus-visible,.buckets-grid:focus-visible{outline:3px solid #6853ba;outline-offset:3px;border-radius:20px}
}
@media(max-width:600px) and (prefers-reduced-motion:reduce){.bucket-carousel-controls button,.bucket-dots button span{transition:none}.buckets-grid{scroll-behavior:auto}}

/* Compact features: one daily number and four short benefits. */
.features-section{background:#f7f9fc;border-block:1px solid #edf0f6}
.features-heading-refined{display:block;text-align:center;max-width:820px;margin:0 auto 40px}
.features-heading-refined .eyebrow{margin-bottom:16px}
.features-heading-refined h2{font-size:clamp(2.5rem,4.4vw,3.8rem)}
.features-heading-refined>p:last-child{max-width:none;margin:18px 0 0;font-size:1rem;line-height:1.65}
.feature-bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}
.feature-focus,.feature-group{min-width:0;border:1px solid #e2e7f0;border-radius:24px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.feature-focus{grid-row:span 2;padding:32px;background:radial-gradient(ellipse at 80% 50%,#262146 0%,#0d0c15 48%,#060609 85%);border-color:#252137;color:#fff;display:flex;flex-direction:column;justify-content:center}
.feature-focus h3{font-size:clamp(1.8rem,2.5vw,2.25rem);line-height:1.15;letter-spacing:-.04em}
.feature-focus-description{margin-top:13px;font-size:1rem;line-height:1.65;color:#fff}
.safe-demo{margin-top:30px;padding:23px 22px 19px;background:linear-gradient(120deg,#316bcc 0%,#6354cf 58%,#8051cf 100%);color:#fff;border:1px solid #ffffff26;border-radius:20px;box-shadow:0 14px 30px -22px #53459c88}
.safe-demo-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;font-size:.875rem;color:#fff;line-height:1.5}
.safe-example{font-size:.75rem;color:#fff}
.safe-demo-amount{display:block;margin-top:12px;font-size:clamp(2.3rem,3.4vw,3.5rem);line-height:1.2;letter-spacing:-.055em;color:#fff;font-variant-numeric:tabular-nums}
.safe-demo-payday{display:block;margin-top:7px;font-size:.875rem;color:#fff}
.safe-demo-footer{display:flex;align-items:center;gap:7px;border-top:1px solid #ffffff40;margin-top:20px;padding-top:15px;font-size:.875rem;color:#fff;line-height:1.5}
.safe-demo-footer .icon{width:16px;height:16px;color:#fff}
.feature-group{padding:26px;display:flex;flex-direction:column;justify-content:center}
.feature-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#f0edfb;color:#6e55b0;margin-bottom:22px}
.feature-icon .icon{width:22px;height:22px}
.feature-group-plan .feature-icon{background:#eaf7fa;color:#327a89}
.feature-group-progress .feature-icon{background:#edf2fc;color:#4c6db4}
.feature-group h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.025em}
.feature-group p{font-size:1rem;line-height:1.65;margin-top:10px}
.feature-offline{max-width:620px;margin:22px auto 0;color:#666c80}
.feature-offline summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;cursor:pointer;font-size:.875rem}
.feature-offline summary::-webkit-details-marker{display:none}
.feature-offline summary .icon{width:17px;height:17px;transition:transform .2s}
.feature-offline[open] summary .icon{transform:rotate(45deg)}
.feature-offline summary:focus-visible{outline:3px solid #6654b5;outline-offset:3px;border-radius:10px}
.feature-offline p{padding:8px 16px 0;text-align:center;font-size:.875rem;line-height:1.7}
@media(hover:hover){.feature-group:hover{border-color:#cbcde6;box-shadow:0 10px 25px -23px #43376a66}}
@media(max-width:1000px){.feature-bento{grid-template-columns:1fr 1fr}.feature-focus{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-content:center}.feature-focus h3{align-self:end}.feature-focus-description{grid-column:1;align-self:start}.safe-demo{grid-column:2;grid-row:1 / span 2;margin-top:0}}
@media(max-width:600px){.features-heading-refined{text-align:left;margin-bottom:28px}.features-heading-refined h2{font-size:2.5rem}.feature-bento{grid-template-columns:1fr;gap:12px}.feature-focus{display:block;padding:26px 22px}.feature-focus h3{font-size:2rem}.safe-demo{margin-top:24px;padding:21px}.safe-demo-amount{font-size:2.75rem}.feature-group{padding:23px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:0 16px;align-items:start}.feature-icon{grid-column:1;grid-row:1 / span 2;width:38px;height:38px;margin:0}.feature-group h3{grid-column:2}.feature-group p{grid-column:2;margin-top:7px}.feature-offline{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.feature-group,.feature-focus,.feature-offline summary .icon{transition:none}}

/* The middle planning step echoes the dark final CTA as a single visual anchor. */
.steps .step:nth-child(2){position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 92% 12%,#31285c 0%,#151323 44%,#09090e 100%);border-color:#252238;box-shadow:0 22px 48px -34px #161126aa}
.steps .step:nth-child(2)::before{content:"";position:absolute;width:230px;height:230px;right:-120px;bottom:-125px;border-radius:50%;background:radial-gradient(circle,#4cbfd834 0%,#7758da25 50%,transparent 72%);pointer-events:none}
.steps .step:nth-child(2) .step-top,.steps .step:nth-child(2) h3,.steps .step:nth-child(2) p,.steps .step:nth-child(2) .step-note{position:relative;z-index:1}
.steps .step:nth-child(2) .icon-tile{color:#d8d1ff;background:linear-gradient(145deg,#3a3460,#28243f);border:1px solid #ffffff16;box-shadow:inset 0 1px #ffffff18}
.steps .step:nth-child(2) .step-number{color:#77708f}
.steps .step:nth-child(2) h3{color:#fff}
.steps .step:nth-child(2) p{color:#c7c3d2}
.steps .step:nth-child(2) .step-note{color:#aaa4bd;border-color:#ffffff18}
@media(hover:hover){.steps .step:nth-child(2):hover{border-color:#4b426d;box-shadow:0 26px 55px -32px #24184dbb}}