/* Homepage story, before/after comparisons, and shared comparison component (used on light pages too). */

/* ---------- Comparison component ---------- */
.ba{margin:0;--wipe:50%}
.ba-frame{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#0d1f21;box-shadow:0 30px 80px #0006,0 0 0 1px #ffffff14;user-select:none;touch-action:pan-y}
.ba-img{position:absolute;inset:0}
.ba-img img{width:100%;height:100%;display:block;object-fit:cover}
.ba-after{clip-path:inset(0 0 0 var(--wipe))}
.ba-handle{position:absolute;top:0;bottom:0;left:clamp(26px,var(--wipe),calc(100% - 26px));width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px #0002,0 0 24px #61e6c5aa;pointer-events:none}
.ba-handle i{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;color:#0b2627;display:grid;place-items:center;font:700 15px/1 Geist,sans-serif;font-style:normal;box-shadow:0 8px 24px #0005;letter-spacing:2px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.ba-range:focus-visible{opacity:0}
.ba-frame:has(.ba-range:focus-visible){outline:3px solid #61e6c5;outline-offset:4px}
.ba-tag{position:absolute;top:14px;z-index:2;font:700 11px/1 Geist,sans-serif;letter-spacing:.06em;padding:8px 11px;border-radius:30px;pointer-events:none;transition:opacity .3s;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-tag-before{left:14px;background:#2b1b1bdd;color:#ffc9c2;box-shadow:inset 0 0 0 1px #ff9f9440}
.ba.show-after .ba-tag-before,.ba.show-before .ba-tag-after{opacity:0}
.ba-tag-after{right:14px;background:#0b2627e6;color:#8ff0d3;box-shadow:inset 0 0 0 1px #61e6c560}
.ba figcaption{font-size:11px;letter-spacing:.04em;color:#7f9c97;margin-top:10px;text-align:center}

.ba-lists{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.ba-list{border-radius:14px;padding:16px 16px 14px}
.ba-list>span{font:700 11px/1 Geist,sans-serif;letter-spacing:.12em}
.ba-list ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ba-list li{position:relative;padding-left:24px;font-size:14px;line-height:1.45}
.ba-list li::before{position:absolute;left:0;top:1px;font-weight:700}
.ba-list.bad{background:#ff8a7a0f;border:1px solid #ff8a7a2e}.ba-list.bad>span{color:#ff9d90}.ba-list.bad li::before{content:'✕';color:#ff8a7a}
.ba-list.good{background:#61e6c512;border:1px solid #61e6c533}.ba-list.good>span{color:#7debcb}.ba-list.good li::before{content:'✓';color:#61e6c5}

/* ---------- Homepage ---------- */
.story-home{font-size:16px}
.story-home h2{font-size:clamp(36px,4.4vw,62px);line-height:1.04;letter-spacing:-.045em;font-weight:560;margin:0}
.story-home h2 span,.s-hero h1 span{background:linear-gradient(100deg,#95e1c2,#a9c1f4 55%,#d1b2e9);-webkit-background-clip:text;background-clip:text;color:transparent}
.story-home .eyebrow{color:#7fdcbd;font-size:12px;letter-spacing:.16em}
.s-head{max-width:860px;margin-bottom:46px}
.s-head>p:not(.eyebrow){color:#a9bfbd;font-size:17px;line-height:1.6;margin:20px 0 0;max-width:640px}

.s-hero{position:relative;isolation:isolate;padding:70px 0 40px;text-align:center}
.s-hero-copy{position:relative;z-index:2}
.s-hero .hero-badge{font-size:11px!important}
.s-hero h1{font-size:clamp(42px,5.6vw,82px);line-height:1.02;letter-spacing:-.055em;font-weight:560;max-width:1100px;margin:0 auto 26px;color:#f2faf7}
.s-lede{font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:#b6c9c6;max-width:860px;margin:0 auto 32px}
.s-proof{list-style:none;padding:0;margin:30px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;font-size:13px;color:#8fb0aa}
.s-proof li::before{content:'✓';color:#61e6c5;margin-right:8px;font-weight:700}
.s-hero-visual{margin-top:56px;position:relative;z-index:2;max-width:1280px}
.s-drag{font-size:13px;color:#7fdcbd;margin:14px 0 0;letter-spacing:.04em}

.s-offer{padding:120px 40px 90px}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.offer{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 26px 24px;border-radius:20px;background:linear-gradient(160deg,#12302f,#0c2224);border:1px solid #ffffff12;color:#eef6f2;text-decoration:none;transition:transform .35s var(--ease),border-color .3s}
.offer:hover{transform:translateY(-4px);border-color:#61e6c560}
.offer-n{font:600 12px Geist,sans-serif;color:#61e6c5;letter-spacing:.1em}
.offer h3{font-size:22px;letter-spacing:-.025em;line-height:1.2;margin:0;font-weight:600}
.offer p{font-size:15px;line-height:1.55;color:#a9bfbd;margin:0}
.offer small{margin-top:auto;padding-top:14px;border-top:1px solid #ffffff12;font-size:13px;color:#c8dbd7}
.offer small b{color:#7fdcbd;margin-right:6px;font-weight:600}
.offer>i{position:absolute;top:22px;right:24px;font-style:normal;color:#7fdcbd}

.s-pains{padding:90px 0;background:linear-gradient(180deg,#0a2224,#071d20);border-block:1px solid #ffffff0d}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pain{padding:24px;border-radius:18px;background:#ffffff06;border:1px solid #ffffff10}
.pain b{display:block;font-size:19px;line-height:1.35;letter-spacing:-.02em;font-weight:560;color:#f2faf7}
.pain p{margin:10px 0 0;color:#97b1ad;font-size:14px;line-height:1.55}

/* Scroll story: pinned on wide screens with motion; stacked otherwise. */
.s-story{position:relative;padding:100px 0 40px}
.story-top{display:flex;flex-direction:column;gap:16px;margin-bottom:34px}
.story-top .eyebrow{margin:0}
.story-nav{display:none}
.chapter{display:grid;grid-template-columns:minmax(360px,.9fr) 1.3fr;gap:48px;align-items:center;padding:40px 0;border-top:1px solid #ffffff10}
.chapter-tag{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600;color:#cfe3df;margin:0 0 14px}
.chapter-tag b{color:#61e6c5;font-weight:600}
.chapter-tag em{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8fb0aa;border:1px solid #ffffff1c;border-radius:20px;padding:3px 9px}
.chapter h3{font-size:clamp(24px,2.1vw,32px);line-height:1.15;letter-spacing:-.035em;font-weight:560;margin:0;color:#f2faf7}
.chapter-did{font-size:14px;line-height:1.6;color:#a9bfbd;margin:0}
.chapter-did b{display:block;color:#eef6f2;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.chapter-unlock{margin:14px 0 0;font-size:15px;font-weight:560;color:#9ff0d6;line-height:1.5}
.story-progress{display:none}

html.motion .s-story.pinned{height:calc(var(--chapters) * 135vh + 100vh);padding:0}
html.motion .s-story.pinned .story-pin{position:sticky;top:76px;height:calc(100vh - 76px);display:flex;flex-direction:column;padding:26px 0 18px;overflow:hidden}
html.motion .s-story.pinned .story-top{flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:18px}
html.motion .s-story.pinned .story-nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.story-nav button{background:#ffffff08;border:1px solid #ffffff14;color:#a9bfbd;border-radius:30px;padding:8px 13px;font:500 12px Geist,sans-serif;cursor:pointer;transition:all .3s}
.story-nav button span{color:#61e6c5;margin-right:6px}
.story-nav button[aria-pressed=true]{background:#61e6c5;color:#08201f;border-color:#61e6c5}
.story-nav button[aria-pressed=true] span{color:#08201f}
html.motion .s-story.pinned .story-grid{position:relative;flex:1;min-height:0}
html.motion .s-story.pinned .wrap{width:100%;box-sizing:border-box}
html.motion .s-story.pinned .chapter{position:absolute;inset:0 40px;padding:0;border:0;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s}
html.motion .s-story.pinned .chapter.active{opacity:1;visibility:visible;transform:none}
html.motion .s-story.pinned .chapter-visual{align-self:center;width:100%;max-width:calc((100vh - 230px) * 1.6)}
html.motion .s-story.pinned .story-progress{display:block;height:2px;background:#ffffff12;margin:16px 40px 0;border-radius:2px}
html.motion .s-story.pinned .story-progress i{display:block;height:100%;width:calc(var(--sp,0) * 100%);background:linear-gradient(90deg,#61e6c5,#a9c1f4);border-radius:2px}
html.motion .s-story.pinned .ba-lists{margin:16px 0}
html.motion .s-story.pinned .ba-list{padding:13px 14px 12px}
html.motion .s-story.pinned .ba-list li{font-size:13px}

/* Engagement steps */
.s-steps{padding:120px 40px 80px}
.timeline-compare{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;padding:26px;border-radius:20px;border:1px solid #ffffff12;background:#ffffff05}
.timeline-compare span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8fb0aa;margin-bottom:8px}
.tl-bar{display:flex;gap:4px;height:40px}
.tl-bar i{font-style:normal;font-size:13px;display:flex;align-items:center;padding:0 14px;border-radius:10px;white-space:nowrap;overflow:hidden}
.tl-bar.old i{background:repeating-linear-gradient(135deg,#ff8a7a22 0 10px,#ff8a7a12 10px 20px);color:#ffc0b6;border:1px solid #ff8a7a33}
.tl-bar.new i{background:#61e6c522;color:#c9f7e8;border:1px solid #61e6c540}
.tl-bar.new i:nth-child(2){background:#61e6c544}
.tl-bar.new i:nth-child(3){background:linear-gradient(90deg,#61e6c533,#a9c1f433)}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step-card{padding:28px;border-radius:20px;background:#0f2a2b;border:1px solid #ffffff12;display:flex;flex-direction:column;gap:12px}
.step-top{display:flex;justify-content:space-between;align-items:center}
.step-top span{font:600 34px Geist,sans-serif;letter-spacing:-.04em;color:#61e6c5}
.step-top em{font-style:normal;font-size:12px;color:#c9f7e8;background:#61e6c51a;border-radius:20px;padding:5px 10px}
.step-card h3{font-size:22px;letter-spacing:-.025em;margin:0;font-weight:600}
.step-card p{font-size:15px;line-height:1.55;color:#a9bfbd;margin:0}
.step-card small{margin-top:auto;padding-top:14px;border-top:1px solid #ffffff12;font-size:13px;color:#c8dbd7}
.step-card small b{display:block;color:#7fdcbd;font-weight:600;margin-bottom:3px}
.step-cta{display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap}

.s-why{padding:100px 0;background:linear-gradient(180deg,#071d20,#0b2527);border-top:1px solid #ffffff0d}
.s-why-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}
.s-why-grid>div>p:not(.eyebrow){color:#a9bfbd;font-size:17px;line-height:1.65;margin:22px 0 26px}
.why-list{list-style:none;margin:0;padding:0;counter-reset:w;display:flex;flex-direction:column}
.why-list li{counter-increment:w;padding:22px 0 22px 56px;border-bottom:1px solid #ffffff12;position:relative}
.why-list li::before{content:'0' counter(w);position:absolute;left:0;top:22px;font:600 14px Geist,sans-serif;color:#61e6c5}
.why-list b{font-size:19px;letter-spacing:-.02em;font-weight:600}
.why-list p{margin:6px 0 0;color:#a9bfbd;font-size:15px;line-height:1.55}

.s-more{padding:110px 40px 60px}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.more-card h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7fdcbd;margin:20px 0 8px;font-weight:600}
.more-card p{font-size:20px;line-height:1.35;letter-spacing:-.02em;margin:0;color:#eef6f2}

/* ---------- Light pages (studio, services) ---------- */
.studio-pair{padding:70px 0;border-top:1px solid #e3ebe7}
.studio-pair .ba-frame{box-shadow:0 24px 60px #0b262722,0 0 0 1px #0b262714}
.studio-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:28px}
.studio-head h2{font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-.035em;margin:10px 0 0}
.studio-head .unlock{font-size:16px;color:#2a6d5e;font-weight:600;margin:0}
.studio-pair .ba-lists{margin-top:26px}
.studio-pair .ba-list.bad{background:#fff4f2;border-color:#f6d3cd}.studio-pair .ba-list.bad>span{color:#b4332a}.studio-pair .ba-list.bad li::before{color:#c2412f}
.studio-pair .ba-list.good{background:#effaf6;border-color:#cfeee3}.studio-pair .ba-list.good>span{color:#147a5a}.studio-pair .ba-list.good li::before{color:#14875f}
.studio-pair .chapter-did{color:#4b625f;margin-top:4px}.studio-pair .chapter-did b{color:#163c36}
.studio-index{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 20px}
.studio-index a{border:1px solid #d6e0dd;border-radius:30px;padding:8px 14px;font-size:13px;color:#163c36;text-decoration:none}
.studio-index a:hover{border-color:#174b40}
.ba figcaption{color:#6c8581}

@media (max-width:1100px){
 .offer-grid,.pain-grid{grid-template-columns:1fr 1fr}
 .chapter{grid-template-columns:1fr;gap:26px}
 .s-why-grid{grid-template-columns:1fr;gap:30px}
 .studio-head{grid-template-columns:1fr;gap:12px}
}
@media (max-width:760px){
 .s-hero{padding:44px 0 30px}
 .s-hero h1{font-size:clamp(34px,9vw,48px)}
 .s-offer,.s-steps,.s-more{padding-left:16px;padding-right:16px}
 .s-offer,.s-steps{padding-top:80px}
 .offer-grid,.pain-grid,.step-grid,.more-grid,.ba-lists{grid-template-columns:1fr}
 .ba-frame{border-radius:12px}
 .ba-tag{font-size:9px;padding:6px 8px;top:8px}
 .ba-tag-before{left:8px}.ba-tag-after{right:8px}
 .ba-handle i{width:36px;height:36px;margin:-18px 0 0 -18px;font-size:12px}
 .tl-bar.new{flex-wrap:wrap;height:auto}.tl-bar.new i{width:auto!important;min-height:36px;font-size:12px;padding:0 10px}
 .s-proof{flex-direction:column;align-items:center;gap:6px}
}
@media (prefers-reduced-motion:reduce){.chapter,.offer{transition:none!important}}
.tl-bar .w100{width:100%}.tl-bar .w8{width:8%;min-width:70px}.tl-bar .w18{width:18%}.tl-bar .w74{width:74%}
html.motion .s-story.pinned .chapter{grid-template-columns:minmax(330px,.72fr) 1.5fr;gap:44px}
.story-link{margin-top:10px;margin-bottom:40px}
.story-link a{display:flex;flex-direction:column;gap:6px;padding:26px 28px;border-radius:18px;border:1px solid #d6e0dd;background:#f6faf8;text-decoration:none;color:#163c36;transition:border-color .2s}
.story-link a:hover{border-color:#174b40}
.story-link .eyebrow{margin:0}
.story-link strong{font-size:22px;letter-spacing:-.02em;line-height:1.3}
.story-link em{font-style:normal;font-weight:600;color:#2a6d5e;font-size:14px}
.more-cta{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:40px;border-radius:22px;border:1px solid #ffffff14;background:linear-gradient(140deg,#12302f,#0b2224)}
.more-cta h2{font-size:clamp(28px,3vw,42px)!important}
.s-more{padding:80px 40px 40px}

/* Hero differentiators + why-different section */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1080px;margin:40px auto 0;text-align:left}
.pillar{padding:20px 22px;border-radius:18px;background:#ffffff08;border:1px solid #61e6c530;backdrop-filter:blur(8px)}
.pillar b{display:block;font-size:20px;letter-spacing:-.02em;font-weight:600;color:#9ff0d6}
.pillar p{margin:8px 0 0;font-size:14px;line-height:1.55;color:#b6c9c6}
.s-for{margin:22px auto 0;font-size:13px;color:#8fb0aa;max-width:900px}
.s-diff{padding:120px 40px 40px}
.versus{border-radius:22px;border:1px solid #ffffff14;overflow:hidden;background:#0b2325}
.vs-row{display:grid;grid-template-columns:220px 1fr 1.25fr;border-top:1px solid #ffffff10}
.vs-row>*{padding:18px 22px;margin:0;font-size:15px;line-height:1.5}
.vs-row b{color:#eef6f2;font-weight:600}
.vs-old{color:#94a9a6;position:relative;padding-left:44px!important}
.vs-old::before{content:"✕";position:absolute;left:20px;color:#ff8a7a;font-weight:700}
.vs-new{color:#e6f7f1;background:#61e6c50d;border-left:1px solid #61e6c526;position:relative;padding-left:46px!important}
.vs-new::before{content:"✓";position:absolute;left:22px;color:#61e6c5;font-weight:700}
.vs-head{border-top:0;background:#ffffff06}
.vs-head span{padding:14px 22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8fb0aa;font-weight:600}
.vs-head span:last-child{color:#7fdcbd;background:#61e6c50d;border-left:1px solid #61e6c526}
.engine{margin-top:56px}
.engine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.engine-step{padding:24px 22px;border-radius:18px;background:linear-gradient(160deg,#12302f,#0c2224);border:1px solid #ffffff12;position:relative}
.engine-step:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:28px;color:#61e6c5;font-size:18px;z-index:2}
.engine-step span{font:600 12px Geist,sans-serif;color:#61e6c5;letter-spacing:.1em}
.engine-step h3{font-size:26px;letter-spacing:-.03em;margin:8px 0 4px;font-weight:600}
.engine-step em{font-style:normal;font-size:13px;color:#a9c1f4;font-weight:600}
.engine-step p{font-size:14px;line-height:1.55;color:#a9bfbd;margin:10px 0 0}
.s-pains .s-head>p:not(.eyebrow){margin-top:18px}
@media (max-width:1100px){.engine-grid{grid-template-columns:1fr 1fr}.engine-step::after{display:none}.vs-row{grid-template-columns:160px 1fr 1fr}}
@media (max-width:760px){
 .pillars{grid-template-columns:1fr;margin-top:28px}
 .s-diff{padding:80px 16px 30px}
 .vs-row{grid-template-columns:1fr}.vs-head{display:none}
 .vs-row>b{padding-bottom:0}.vs-new{border-left:0}
 .engine-grid{grid-template-columns:1fr}
 .s-hero .hero-badge{white-space:normal;line-height:1.5}
}
.vs-row{grid-template-columns:200px 1fr 1fr 1.2fr}
.s-diff .s-head{max-width:980px}
@media (max-width:1100px){.vs-row{grid-template-columns:150px 1fr 1fr 1.1fr}.vs-row>*{font-size:14px;padding:16px}}
@media (max-width:760px){.vs-row{grid-template-columns:1fr}.vs-row small{display:block!important}}
.vs-row small{display:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7b9591;margin-bottom:4px}.vs-new small{color:#61e6c5}

/* Readable buttons and navigation (overrides smaller sizes in style.css / experience.css) */
.button{font-size:16px;font-weight:600;padding:17px 28px;gap:18px}
.button span{font-size:19px}
.site-header nav{font-size:15px;font-weight:500;gap:28px}
.site-header .button.small,.button.small{font-size:15px;padding:13px 22px;gap:12px}
.text-link{font-size:15px}
.nav-panel a{font-size:15px}
@media (max-width:1100px){.site-header nav{font-size:14px;gap:18px}.site-header .button.small{font-size:14px;padding:12px 16px}}
@media (max-width:760px){.button{font-size:16px;padding:16px 22px;min-width:0}.text-link{font-size:15px}.site-header nav{font-size:17px}}
.hero-actions .button,.x-finale .button,.step-cta .button,.more-cta .button,.cta-section .button{font-size:16px;padding:17px 28px;gap:18px;min-width:0}
@media (max-width:760px){.hero-actions .button{font-size:16px;padding:16px 22px;width:100%;max-width:340px}}
.nav-drop summary{cursor:pointer;gap:9px}
.chev{display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s;opacity:.8}
.nav-drop[open] .chev{transform:translateY(2px) rotate(-135deg)}