/* Reference-inspired composition; original Roamora brand colors. */
body[data-variant="benefits"]{background:#0d1220}
[data-variant="benefits"] .wrap{max-width:1120px}
[data-variant="benefits"] .landing-header{height:86px;border-color:#2b3347}
[data-variant="benefits"] .landing-brand{font-size:1.4rem}
[data-variant="benefits"] .landing-header nav{font-size:.82rem;gap:26px}
[data-variant="benefits"] .landing-hero{position:relative;isolation:isolate;grid-template-columns:1.4fr 1fr;column-gap:72px;row-gap:26px;padding-block:66px 76px;min-height:740px}
/* One viewport-wide ambient layer avoids section-boundary color seams. */
[data-variant="benefits"] .landing-hero:before{content:none}
[data-variant="benefits"] .hero-writing .eyebrow{font-size:.72rem;letter-spacing:.11em;margin-bottom:23px}
[data-variant="benefits"] .hero-writing h1{font-size:clamp(3rem,4.7vw,4rem);line-height:1.04;letter-spacing:-.055em;font-weight:750}
[data-variant="benefits"] .hero-writing h1 span{display:inline-block;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.055em;font-size:1.08em;line-height:1.15;color:#a795ff;margin-top:8px}
[data-variant="benefits"] .hero-writing .intro{max-width:500px;font-size:1.05rem;line-height:1.75;margin-top:26px}
[data-variant="benefits"] .primary{background:#6849ff;border-radius:12px;box-shadow:0 8px 28px #6849ff24;min-height:52px}
[data-variant="benefits"] .primary:hover{background:#795dff;box-shadow:0 8px 30px #6849ff40}
[data-variant="benefits"] .benefits-start .quiet-link{border:1px solid var(--line);border-radius:12px;min-height:52px;display:inline-flex;align-items:center;padding:12px 20px;text-decoration:none}
[data-variant="benefits"] .benefits-start .actions{gap:12px}
.hero-assurances{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px 20px;color:var(--muted);font-size:.72rem}
.hero-assurances li{display:flex;align-items:center;gap:7px}
.hero-assurances li:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--aqua)}
[data-variant="benefits"] .product-proof{width:264px}
[data-variant="benefits"] .product-heading{font-size:.65rem;margin-bottom:12px}
[data-variant="benefits"] .product-switch{background:#171d2d;border-radius:999px;padding:3px;margin-top:17px}
[data-variant="benefits"] .product-switch button{border-radius:999px;min-height:34px;padding:6px;font-size:.67rem}
[data-variant="benefits"] .product-switch button[aria-pressed="true"]{background:#6849ff26;border-color:#6849ff60}
[data-variant="benefits"] .product-proof figcaption{text-align:center;color:var(--muted);font-size:.65rem}
[data-variant="benefits"] .benefits-features,[data-variant="benefits"] .product-showcase{padding-block:88px}
[data-variant="benefits"] .showcase-intro h2,[data-variant="benefits"] .benefits-feature-heading h2{letter-spacing:-.05em;line-height:1.12}
@media(min-width:701px) and (max-width:1000px){[data-variant="benefits"] .landing-hero{column-gap:34px;grid-template-columns:1.2fr 1fr;min-height:670px;padding-block:48px}[data-variant="benefits"] .hero-writing h1{font-size:3rem}[data-variant="benefits"] .product-proof{width:240px}}
@media(max-width:700px){
 [data-variant="benefits"] .landing-header{height:66px}
 [data-variant="benefits"] .landing-brand{font-size:1.25rem}
 [data-variant="benefits"] .landing-hero{grid-template-columns:1fr;grid-template-areas:"copy" "start" "product";min-height:0;row-gap:22px;padding-block:30px 42px}
 [data-variant="benefits"] .hero-writing .eyebrow{font-size:.59rem;margin-bottom:16px}
 [data-variant="benefits"] .hero-writing h1{font-size:clamp(2.1rem,8.5vw,2.85rem);line-height:1.06}
 [data-variant="benefits"] .hero-writing h1 span{margin-top:4px;font-size:1.08em}
 [data-variant="benefits"] .hero-writing .intro{font-size:.9rem;line-height:1.6;max-width:340px;margin-top:17px}
 [data-variant="benefits"] .benefits-start .quiet-link{display:none}
 [data-variant="benefits"] .benefits-start .primary{min-height:48px;max-width:300px}
 [data-variant="benefits"] .benefits-start .requirement{max-width:300px;font-size:.7rem;margin-top:11px}
 .hero-assurances{justify-content:center;font-size:.64rem;gap:8px 14px;margin-top:12px}
 [data-variant="benefits"] .product-proof{width:clamp(134px,calc((100svh - 400px)/2.4),196px)}
 [data-variant="benefits"] .product-proof .product-switch{width:260px;margin-top:15px}
 [data-variant="benefits"] .product-heading,[data-variant="benefits"] .product-proof figcaption{display:none}
 [data-variant="benefits"] .benefits-features,[data-variant="benefits"] .product-showcase{padding-block:46px}
}
/* Tactile controls: restrained movement and a single passing highlight. */
[data-variant="benefits"] :is(.primary,.product-switch button,.pricing-card button,.landing-header nav a:last-child){position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
[data-variant="benefits"] .primary:after{content:"";position:absolute;inset:-40% auto -40% -65%;width:35%;background:linear-gradient(100deg,transparent,#ffffff26,transparent);transform:skewX(-18deg);pointer-events:none}
@media(hover:hover) and (pointer:fine){
 [data-variant="benefits"] :is(.primary,.product-switch button,.landing-header nav a:last-child):hover{transform:translateY(-2px);border-color:#a795ff80;box-shadow:0 9px 26px #6849ff30}
 [data-variant="benefits"] .primary:hover:after{animation:button-sheen .65s ease-out both}
}
[data-variant="benefits"] :is(.primary,.product-switch button,.landing-header nav a:last-child):active{transform:translateY(0);box-shadow:0 2px 8px #0003}
@keyframes button-sheen{to{left:135%}}
@media(prefers-reduced-motion:reduce){[data-variant="benefits"] .primary:after{display:none}[data-variant="benefits"] :is(.primary,.product-switch button,.landing-header nav a:last-child){transform:none!important;transition:none!important}}
/* Ambient brand-color light, isolated behind the page content. */
body[data-variant="benefits"]{isolation:isolate;position:relative}
body[data-variant="benefits"]:before{content:"";position:fixed;z-index:-1;pointer-events:none;inset:-15%;background:radial-gradient(ellipse at 70% 20%,#6849ff16,transparent 43%),radial-gradient(ellipse at 12% 70%,#29d7ca09,transparent 40%);animation:ambient-drift 24s ease-in-out infinite alternate;will-change:transform}
@keyframes ambient-drift{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(3%,3%,0)}}
@media(prefers-reduced-motion:reduce){body[data-variant="benefits"]:before{animation:none;will-change:auto}}

/* Stable destination reel: original Roamora copy, one quiet transition at a time. */
[data-variant="benefits"] .hero-writing h1 .destination-rotator{display:grid;margin-top:8px;line-height:1.2;min-height:1.2em}
[data-variant="benefits"] .destination-rotator>span{grid-area:1/1;display:block!important;margin:0!important;font:inherit!important;line-height:inherit!important;opacity:0;transform:translateY(10px);animation:destination-cycle 28s infinite;pointer-events:none}
[data-variant="benefits"] .destination-rotator>span:nth-child(2){animation-delay:4s}
[data-variant="benefits"] .destination-rotator>span:nth-child(3){animation-delay:8s}
[data-variant="benefits"] .destination-rotator>span:nth-child(4){animation-delay:12s}
[data-variant="benefits"] .destination-rotator>span:nth-child(5){animation-delay:16s}
[data-variant="benefits"] .destination-rotator>span:nth-child(6){animation-delay:20s}
[data-variant="benefits"] .destination-rotator>span:nth-child(7){animation-delay:24s}
@keyframes destination-cycle{0%{opacity:0;transform:translateY(10px)}1.7%,12%{opacity:1;transform:translateY(0)}14.2857%,100%{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){[data-variant="benefits"] .destination-rotator>span{animation:none;transform:none;opacity:0}[data-variant="benefits"] .destination-rotator>span:last-child{opacity:1}}

[data-variant="benefits"] .benefits-start .requirement{margin:0 0 17px;color:var(--muted)}
@media(max-width:700px){[data-variant="benefits"] .benefits-start .requirement{margin:0 auto 14px}}

.video-proof .iphone-screen>video{display:block;width:100%;height:100%;object-fit:contain;background:#0d1220}.video-proof .iphone-island,.video-proof .iphone-home{display:none}.video-proof video{aspect-ratio:1206/2622}

/* Status indicators are cropped from the recording; hardware remains a clean CSS frame. */
.video-proof .iphone-screen{padding:0;aspect-ratio:1206/2452}.video-proof .iphone-screen>video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}.video-proof .iphone-island{display:block}

/* Soft device underlay gives the hero phone depth without changing its fit. */
[data-variant="benefits"] .video-proof .iphone-outline{box-shadow:inset 0 0 0 2px #080a0e,0 4px 9px #0005,0 22px 38px -10px #0009,0 42px 80px -18px #0008}

/* Center pricing button labels independently of their trailing arrows. */
[data-variant="benefits"] .pricing-section .primary{position:relative;justify-content:center;text-align:center;padding-inline:24px;gap:14px}
[data-variant="benefits"] .pricing-section .primary>span[aria-hidden="true"]{position:static;transform:none;font-size:1rem;line-height:1;flex:none}
@media(max-width:420px){[data-variant="benefits"] .trial-action .primary{padding-inline:15px}}

[data-variant="benefits"] .landing-header nav .header-trial{display:inline-flex;gap:12px;min-height:40px;padding:10px 17px;border-radius:12px;font-size:.77rem;white-space:nowrap}
[data-variant="benefits"] .header-trial .header-trial-label{font-size:inherit}
[data-variant="benefits"] .header-trial .header-trial-short{display:none;font-size:inherit}
[data-variant="benefits"] .header-trial .header-trial-arrow{font-size:1rem}
[data-variant="benefits"] .landing-header nav .account-nav-link{border:1px solid var(--line);padding:8px 14px;border-radius:12px;white-space:nowrap}
@media(max-width:700px){
 [data-variant="benefits"] .landing-header{gap:8px}
 [data-variant="benefits"] .landing-header nav{gap:8px}
 [data-variant="benefits"] .landing-header nav .account-nav-link{display:inline-flex;font-size:.69rem;padding:8px 10px}
 [data-variant="benefits"] .landing-header nav .header-trial{padding:9px 12px;gap:7px;min-height:37px;font-size:.69rem}
 [data-variant="benefits"] .header-trial .header-trial-label{display:none}
 [data-variant="benefits"] .header-trial .header-trial-short{display:inline}
}

@media(max-width:360px){[data-variant="benefits"] .landing-brand{font-size:1.05rem;gap:6px;flex-shrink:0}[data-variant="benefits"] .landing-brand img{width:24px;height:28px}[data-variant="benefits"] .header-trial .header-trial-arrow{display:none}}

/* Shared depth: cards sit softly above the canvas; controls use a shorter shadow. */
body[data-variant="benefits"]{--card-depth:0 4px 10px #0002,0 18px 38px -16px #0008;--control-depth:0 2px 5px #0003,0 9px 18px -8px #0008}
[data-variant="benefits"] :is(.pricing-card,.trial-card,.setup-note,.requirements-panel,.closing-panel,.walkthrough-proof,.setup-proof){box-shadow:var(--card-depth)}
[data-variant="benefits"] :is(.primary,.product-switch,.landing-header .account-nav-link,.travel-modes span,.measurement button){box-shadow:var(--control-depth)}
[data-variant="benefits"] .primary{box-shadow:var(--control-depth),0 5px 22px #6849ff18}
@media(hover:hover) and (pointer:fine){[data-variant="benefits"] .primary:hover{box-shadow:0 4px 8px #0003,0 15px 26px -10px #0009,0 6px 24px #6849ff25}}
[data-variant="benefits"] .primary:active{box-shadow:0 2px 5px #0004}

/* One unified guide card, matching the pricing surfaces. */
[data-variant="benefits"] .setup-section{margin-block:32px 56px;padding:44px;border:1px solid #3a4358;border-radius:22px;background:#101827;box-shadow:var(--card-depth)}
[data-variant="benefits"] .setup-section .setup-note{border:1px solid #2b3447;border-left:2px solid var(--aqua);border-radius:12px;background:#171d2d;box-shadow:none}
@media(max-width:700px){[data-variant="benefits"] .setup-section{margin-block:20px 36px;padding:26px 22px;border-radius:20px}[data-variant="benefits"] .setup-section .setup-note{padding:18px;margin-top:28px}}

[data-variant="benefits"] .setup-section .section-top{display:block;text-align:center}[data-variant="benefits"] .setup-section .section-top>div{margin-inline:auto}

[data-variant="benefits"] .product-proof.video-proof{width:290px}
@media(min-width:701px) and (max-width:1000px){[data-variant="benefits"] .product-proof.video-proof{width:260px}}
@media(max-width:700px){[data-variant="benefits"] .product-proof.video-proof{width:clamp(148px,calc((100svh - 400px)/2.2),216px)}}

[data-variant="benefits"] .product-showcase .iphone-outline{box-shadow:inset 0 0 0 2px #080a0e,0 4px 9px #0005,0 22px 38px -10px #0009,0 42px 80px -18px #0008}