/* Homepage art direction. Image geometry and existing section grid are retained. */
body {background:#fff;color:var(--ink)}
.btn:not(.secondary) {color:#211039}.btn:not(.secondary):hover {color:white}
/* Focused character previews; no changes to section typography or image files. */
.focus-stage {--card-width:clamp(250px,29vw,360px);--offset:calc(var(--card-width) * 1.06);--drag:0px;height:calc(var(--card-width) * 1.42 + 30px);position:relative;touch-action:pan-y;user-select:none;cursor:grab;outline-offset:6px}
.focus-card {position:absolute;top:0;left:50%;width:var(--card-width);aspect-ratio:3/4;border-radius:25px;overflow:hidden;background:#241b30;box-shadow:0 18px 34px #2819361e;transform:translateX(-50%);transition:transform .5s cubic-bezier(.22,.72,.25,1),opacity .4s,box-shadow .4s;will-change:transform;opacity:0;pointer-events:none}
.focus-card img {display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;pointer-events:none}
.focus-card.is-center {opacity:1;z-index:3;pointer-events:auto;transform:translateX(calc(-50% + var(--drag)));box-shadow:0 24px 44px #28193629}
.focus-card.is-left {opacity:1;z-index:2;pointer-events:auto;transform:translateX(calc(-50% - var(--offset) + var(--drag))) translateY(28px) scale(.82)}
.focus-card.is-right {opacity:1;z-index:2;pointer-events:auto;transform:translateX(calc(-50% + var(--offset) + var(--drag))) translateY(28px) scale(.82)}
.focus-card.is-away-left {transform:translateX(calc(-50% - var(--offset) * 1.7)) translateY(40px) scale(.7)}
.focus-card.is-away-right {transform:translateX(calc(-50% + var(--offset) * 1.7)) translateY(40px) scale(.7)}
.card-hit {position:absolute;inset:0;z-index:1;background:transparent;border:0;border-radius:inherit;transform:none!important}.card-hit:hover {background:transparent}.card-hit:focus-visible {outline:3px solid white;outline-offset:-6px}
.card-meta {position:absolute;bottom:0;left:0;right:0;z-index:2;padding:58px 22px 22px;background:linear-gradient(transparent,#130d21b3 40%,#130d21ed);pointer-events:none;color:white}.card-meta p {font-size:14px;font-weight:600;line-height:1.45;color:white;margin:0;text-wrap:balance;text-shadow:0 1px 3px #0007}.card-chat {pointer-events:auto;min-height:44px;margin-top:15px;width:100%;font-size:14px}.card-chat[hidden]{display:none}
.focus-stage.is-dragging {cursor:grabbing}.is-dragging .focus-card {transition:none}.carousel-controls {margin-top:0;gap:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.btn:not(.secondary) {background:#7540df;color:white;box-shadow:0 7px 18px #895aff25}.btn:not(.secondary):hover {background:#6331c7;color:white;box-shadow:0 10px 24px #895aff35}
@media(max-width:1023px){.focus-stage{--card-width:clamp(240px,34vw,320px);--offset:calc(var(--card-width) * .92)}.focus-card.is-left,.focus-card.is-right{opacity:.92}}
@media(max-width:767px){.focus-stage{--card-width:min(76vw,340px);--offset:calc(var(--card-width) * .96);height:calc(var(--card-width) * 1.42 + 18px)}.focus-card{border-radius:22px}.focus-card.is-left{transform:translateX(calc(-50% - var(--offset) + var(--drag))) translateY(22px) scale(.86)}.focus-card.is-right{transform:translateX(calc(-50% + var(--offset) + var(--drag))) translateY(22px) scale(.86)}.card-meta{padding:48px 18px 18px}.card-meta p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.focus-card{transition:none}}
/* All visible button labels use white, with a contrasting surface. */
button:not(.card-hit):not(.components-button) {color:#fff!important;background:#7540df;border-color:#7540df}
button:not(.card-hit):not(.components-button):hover {color:#fff!important;background:#6331c7;border-color:#6331c7}
.btn.secondary,.close,.motion,.menu,.carousel-arrow {background:#7540df;color:#fff!important;border-color:#7540df}
.btn.secondary:hover,.close:hover,.motion:hover,.menu:hover,.carousel-arrow:hover {background:#6331c7;color:#fff!important;border-color:#6331c7}
.carousel-arrow svg {color:#fff}.carousel-arrow:disabled {opacity:.65;background:#655078;border-color:#655078;color:#fff!important}
.focus-stage {cursor:default;touch-action:pan-y}
.focus-card.is-center,.focus-card.is-left,.focus-card.is-right {pointer-events:none}
.carousel-chat {margin-top:0;text-align:center}
h1 {font-weight:800;letter-spacing:-1.8px;line-height:1.13}
h2 {font-size:42px;font-weight:800;line-height:1.18;letter-spacing:-1.25px;color:var(--ink)}
h3,.feature h3,.step h3 {font-weight:750;letter-spacing:-.55px;line-height:1.3;color:var(--ink)}
.accent {color:var(--deep)}
section {position:relative;isolation:isolate;padding:96px 0}
.section-title {max-width:850px;margin:0 auto 56px;text-wrap:balance}
.hero {padding:76px 0 104px;background:radial-gradient(ellipse at 78% 26%,#e7dbffb0 0,transparent 50%),radial-gradient(ellipse at 8% 12%,#fcebd970 0,transparent 36%),#fff;overflow:hidden}
.hero::before {content:"";position:absolute;z-index:-1;right:-15%;top:1%;width:66%;height:86%;border:1px solid #895aff18;border-radius:50%;transform:rotate(-24deg);pointer-events:none}
.hero::after {content:"";position:absolute;z-index:-1;right:4%;top:6%;width:380px;height:180px;opacity:.45;background-image:radial-gradient(#895aff50 .7px,transparent .7px);background-size:12px 12px;mask-image:linear-gradient(120deg,transparent,#000,transparent);pointer-events:none}
.hero p {color:var(--muted);line-height:1.75}.hero-art {box-shadow:0 26px 64px #2e174322}.halo {border-color:#895aff45;transform:rotate(-4deg)}
.emotional-orbit {color:var(--purple)}.emotional-orbit span {text-shadow:none}.connection-note {border-color:#eee4f7;box-shadow:0 10px 28px #26163815;background:#fff}.connection-note svg {stroke:var(--purple)}
.live {border-color:#fff;border-radius:16px;box-shadow:0 8px 24px #211a3515}.motion {box-shadow:0 4px 12px #25173710}
.btn {background:var(--purple);color:white;border-radius:14px;font-weight:700;box-shadow:0 7px 18px #895aff25;padding:13px 30px}
.btn:hover {background:var(--deep);color:white;box-shadow:0 10px 24px #895aff35}.btn.secondary {background:white;color:var(--deep);border-color:var(--border);box-shadow:none}.btn.secondary:hover{background:var(--pale)}
#features {background:white;padding-top:80px;padding-bottom:108px}
#features::before {content:"";position:absolute;left:50%;top:0;width:80px;height:3px;border-radius:99px;background:#ddd0f9;transform:translateX(-50%)}
.feature-visual {border:1px solid #e8e1ef;box-shadow:0 10px 26px #27123e0a}.feature h3 {margin-bottom:14px}.feature p,.step p {color:var(--muted);line-height:1.75}.mini {background:#fffffffa;border-color:#ebe4f0;box-shadow:0 8px 20px #23103212}.mini strong {color:var(--ink);font-weight:750}
.showcase {background:radial-gradient(ellipse at 0 50%,#ffeddf70,transparent 45%),radial-gradient(ellipse at 96% 70%,#e4ddff90,transparent 46%),#f8f6fc;border-radius:64px 64px 0 0;overflow:hidden;padding-top:96px;padding-bottom:96px}
.showcase::before {content:"";position:absolute;z-index:-1;inset:35px -15% auto auto;width:54%;height:62%;border:1px solid #b8a1e033;border-radius:50%;transform:rotate(22deg);pointer-events:none}
.tabs {width:fit-content;padding:6px;gap:4px;border:1px solid #e6deef;background:#fff;border-radius:18px;box-shadow:0 4px 12px #211a3504;margin-bottom:36px}
.tab {border-color:transparent;border-radius:12px;font-size:14px;font-weight:650;background:transparent;padding:8px 26px}.tab:hover {background:var(--pale);transform:none}.tab[aria-selected=true] {background:var(--ink);color:white;text-decoration:none;box-shadow:0 3px 8px #211a3518}
.portrait {box-shadow:0 12px 30px #211a3512;border-color:#fff}.portrait:hover {box-shadow:0 18px 38px #211a3522}.portrait.selected {outline:2px solid var(--purple);outline-offset:5px}.portrait .tick {background:var(--purple)}
.steps {background:white;padding-top:108px;padding-bottom:100px}
.steps .step-art {background:#faf8fd!important;border:1px solid #e8e1ef;box-shadow:0 8px 24px #25173705}
.step-art img {box-shadow:0 6px 18px #25173715}.ui-row {border-color:#e8e1ef;box-shadow:0 2px 6px #25173703}.number {background:var(--pale);color:var(--deep);font-weight:800;border:1px solid #dfd2fb;box-shadow:none;margin-bottom:14px}
.final {margin:0 auto 64px;width:min(1280px,calc(100% - 48px));border:1px solid #ece5f7;border-radius:32px;overflow:hidden;background:radial-gradient(ellipse at 15% 110%,#dfd0ff85,transparent 50%),radial-gradient(ellipse at 100% 0,#fce9dc70,transparent 48%),#faf8ff;padding:72px 40px}
.final::before {content:"";position:absolute;z-index:-1;left:-50px;top:22px;width:280px;height:160px;border:1px solid #895aff25;border-radius:50%;transform:rotate(-32deg);pointer-events:none}
.final::after {content:"";position:absolute;z-index:-1;right:-80px;bottom:-80px;width:320px;height:240px;border:1px solid #895aff20;border-radius:50%;pointer-events:none}
.final .wrap {width:100%;max-width:960px}.final h2 {max-width:800px;margin:0 auto 32px;text-wrap:balance}
dialog {border-radius:24px;box-shadow:0 24px 80px #211a3533}.close{border-radius:12px}dialog h2{font-size:28px;letter-spacing:-.6px}
@media(max-width:1279px){h1{letter-spacing:-1.3px}h2{font-size:38px}.hero{padding:64px 0 80px}}
@media(max-width:1023px){h2{font-size:34px;letter-spacing:-.8px}section{padding:80px 0}.showcase{border-radius:40px 40px 0 0}.final{padding:64px 32px}.feature h3,.step h3{font-size:21px}}
@media(max-width:767px){h1{letter-spacing:-.8px}h2{font-size:29px;letter-spacing:-.7px;line-height:1.23}.feature h3,.step h3{font-size:22px}.hero{padding:46px 0 64px}.hero::before{width:100%;height:46%;top:46%;right:-45%}.hero::after{display:none}.hero p{font-size:17px}.section-title{margin-bottom:36px}section{padding:56px 0}#features{padding:56px 0 64px}.showcase{padding:60px 0;border-radius:30px 30px 0 0}.steps{padding:64px 0}.final{width:calc(100% - 24px);border-radius:24px;padding:48px 24px;margin-bottom:36px}.final h2{font-size:28px}.tabs{border-radius:15px;padding:4px}.tab{font-size:13px;padding:8px 18px}.portrait{border-radius:12px}.showcase::before{opacity:.5}.final::before{opacity:.5}dialog h2{font-size:25px}}
/* Second refinement: richer local color, conversation and connection cues. */
.hero {background:radial-gradient(ellipse at 78% 28%,#d4bcffbd,transparent 51%),radial-gradient(ellipse at 8% 12%,#ffe1bc88,transparent 36%),#fff}
.hero::before {border-color:#895aff36}.hero::after {opacity:.7}
.connection-line {background:#9975c6}.connection-line.short {background:#c8b0e6}
.showcase {background:radial-gradient(ellipse at 4% 55%,#ffd9b366,transparent 44%),radial-gradient(ellipse at 98% 70%,#c9c2ff85,transparent 48%),#f7f4fc}
.showcase::before {border-color:#9878ca55}
.showcase::after {content:"";position:absolute;z-index:-1;left:10%;right:10%;top:54%;height:90px;border-bottom:1px solid #895aff25;border-radius:50%;transform:rotate(-5deg);pointer-events:none}
.steps {background:radial-gradient(ellipse at 100% 100%,#d5eee540,transparent 38%),#fff}
.final {background:radial-gradient(ellipse at 12% 110%,#cbb0ff9c,transparent 51%),radial-gradient(ellipse at 100% 0,#ffd4b082,transparent 48%),#faf7ff}
.final::before {border-color:#895aff4d}.final::after {border-color:#ba82433d}
.step-heading {display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}.step-heading .number {flex:0 0 32px;margin:0;background:#e6dafe;color:#5524ad}.step-heading h3 {margin:1px 0 0}
.character-carousel {position:relative}.carousel-track {display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:6px;padding:8px 6px 18px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.carousel-track::-webkit-scrollbar{display:none}
.carousel-track .portrait {flex:0 0 calc((100% - 56px)/3);aspect-ratio:.8;scroll-snap-align:start;scroll-snap-stop:always;min-width:0;transform:none}.carousel-track .portrait:hover {transform:none}
.carousel-controls {display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px}.carousel-arrow {display:grid;place-items:center;width:48px;height:48px;background:white;border:1px solid #d8c9ed;border-radius:15px;color:#563187;box-shadow:0 4px 12px #211a3508}.carousel-arrow svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.carousel-arrow:hover:not(:disabled){background:var(--purple);color:#211039;border-color:var(--purple)}.carousel-arrow:disabled{cursor:default;opacity:.4;transform:none}.carousel-position {font-size:13px;font-weight:600;color:#574767;min-width:72px;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:1023px){.carousel-track{gap:20px}.carousel-track .portrait{flex-basis:calc((100% - 20px)/2)}}
@media(max-width:767px){.carousel-track{gap:16px}.carousel-track .portrait{flex-basis:100%;aspect-ratio:.8;border-radius:22px}.carousel-controls{margin-top:10px}.step-heading{gap:10px}.step-heading h3{margin-top:2px}}
.btn:not(.secondary) {color:#211039}.btn:not(.secondary):hover {color:white}

/* Final canvas rules, after all legacy section rules to avoid cascade conflicts. */
body {background:radial-gradient(ellipse 720px 520px at 78% 180px,#d4bcffbd,transparent 80%),radial-gradient(ellipse 540px 400px at 8% 120px,#ffe1bc88,transparent 80%),#fff;background-repeat:no-repeat}
.hero {background:transparent}
.steps {padding-bottom:0;background:linear-gradient(180deg,#fff 65%,#fbf9fe)}
.final {width:100%;max-width:none;margin:0;border:0;border-radius:0;padding:80px 24px;background:linear-gradient(180deg,#fbf9fe,#f4edff 48%,#faf9fc)}
.final .wrap {width:min(1200px,100%);max-width:1200px;padding:64px 40px;border:1px solid #e8def5;border-radius:32px;background:radial-gradient(ellipse at 10% 100%,#cbb0ff78,transparent 50%),radial-gradient(ellipse at 100% 0,#ffd4b068,transparent 48%),#faf7ff}
.final::before,.final::after {display:none}
footer {background:#faf9fc;border-top:0;padding-top:64px}
@media(max-width:1023px){.final{padding:64px 40px}.final .wrap{padding:56px 32px}}
@media(max-width:767px){.steps{padding-bottom:0}.final{padding:48px 12px;margin:0;border-radius:0}.final .wrap{padding:48px 24px;border-radius:24px}footer{padding-top:48px}}

/* Seamless joins: fade into the showcase, remove clipped section ornaments. */
.showcase {border-radius:0;background:radial-gradient(ellipse at 4% 58%,#ffd9b344,transparent 44%),radial-gradient(ellipse at 98% 70%,#c9c2ff66,transparent 48%),linear-gradient(180deg,#fff 0,#f7f4fc 120px,#f7f4fc 82%,#fff 100%)}
.showcase::before,.showcase::after {display:none}
footer::before {display:none}
footer {background:#faf9fc}
@media(max-width:767px){.showcase{border-radius:0;background:radial-gradient(ellipse at 95% 65%,#c9c2ff44,transparent 55%),linear-gradient(180deg,#fff 0,#f7f4fc 80px,#f7f4fc 82%,#fff 100%)}}

/* Fade every showcase background layer to white before the steps begin. */
.showcase {background:linear-gradient(180deg,#ffffff 0%,#ffffff00 16%,#ffffff00 70%,#ffffff 100%),radial-gradient(ellipse at 4% 58%,#ffd9b344,transparent 44%),radial-gradient(ellipse at 98% 70%,#c9c2ff66,transparent 48%),#f7f4fc}
@media(max-width:767px){.showcase{background:linear-gradient(180deg,#ffffff 0%,#ffffff00 16%,#ffffff00 70%,#ffffff 100%),radial-gradient(ellipse at 95% 65%,#c9c2ff44,transparent 55%),#f7f4fc}}

/* Approved Hero video: preserve existing image framing. */
.hero-art>video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit}

/* Product screenshots: consistent frame, no important content clipping. */
.steps .step-art.product-shot{aspect-ratio:1.2!important;padding:12px!important;display:flex;align-items:center;justify-content:center;background:#0c0a07!important;overflow:hidden}
.steps .step-art.product-shot img{width:100%;height:100%;max-width:100%;max-height:100%;margin:0;display:block;object-fit:contain;border-radius:0;box-shadow:none}
@media(max-width:767px){.steps .step-art.product-shot{aspect-ratio:1.2!important;padding:12px!important}}

/* Approved feature compositions already include their product elements. */
.feature-visual img{object-fit:contain;background:#faf8f5}
.hero .live{gap:10px;padding:10px 14px}
.hero-call-icon{width:22px;height:22px;color:var(--deep);display:block}

/* Larger consistent screenshot windows, accessible full-resolution viewer. */
.steps .step-art.product-shot{width:100%;aspect-ratio:.94!important;padding:10px!important;position:relative;margin-bottom:24px;cursor:zoom-in}
.steps .step-art.product-shot img{object-fit:contain}
.steps .step-art.product-shot:hover{transform:none;box-shadow:0 12px 30px #25173722}
.shot-hint{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;color:#fff;background:#7540df;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:600;box-shadow:0 3px 12px #0003}
#shot-viewer{width:min(1200px,calc(100% - 32px));max-height:92vh;padding:16px;background:#f9f7fc;overflow:hidden}
.shot-toolbar{display:flex;justify-content:flex-end;gap:10px;padding-bottom:12px}
.shot-toolbar .btn{padding:8px 18px;min-height:40px}
.shot-scroll{overflow:auto;max-height:calc(92vh - 100px);background:#0c0a07;border-radius:12px;text-align:center}
#shot-full-image{display:block;max-width:100%;max-height:calc(92vh - 104px);width:auto;height:auto;margin:auto}
#shot-viewer.zoomed #shot-full-image{max-width:none;max-height:none;width:max(100%,1024px);height:auto}
@media(max-width:767px){.steps .step-art.product-shot{aspect-ratio:1!important;max-height:440px}.shot-hint{font-size:12px}#shot-viewer{padding:10px}}

#shot-close{width:40px;height:40px;min-height:40px;padding:0;line-height:1;font-size:26px;border-radius:999px}