/* Hero depth follows the reference's independent scroll speeds. */
.screen-reader-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto!important; }
.lenis.lenis-stopped { overflow:hidden; }
.hero.hero-landscape { position:relative; isolation:isolate; padding:160px 24px 44px; overflow:hidden; background:#171717; }
.hero-sky { position:absolute; inset:0; z-index:-3; background:linear-gradient(180deg,#171717 0%,#262626 38%,#3b368e 76%,#221e6c 100%); }
.hero-landscape .hero-heading { z-index:2; }
.hero-landscape h1 { color:#fafafa; }
.hero-landscape h1 span { color:#cfccfb; }
.hero-landscape .hero-brand, .hero-landscape .hero-description { color:#d4d4d4; }
.hero-landscape .cta-caption { color:#a3a3a3; }
.hero-landscape .hero-brand img { box-shadow:0 1px 1px #0a0a0a40; }
.hero-dashboard { position:relative; z-index:3; width:min(1040px,100%); margin:80px auto 0; will-change:transform; }
.hero-dashboard-screen { aspect-ratio:1440 / 860; overflow:hidden; border:1px solid #737373; border-radius:12px; background:#f5f5f5; box-shadow:0 16px 44px #0a0a0a40; }
.hero-dashboard-screen>img { display:block; width:100%; height:auto; }
.landscape-layer { position:absolute; inset:auto 0 0; pointer-events:none; will-change:transform; }
.landscape-layer img { display:block; width:100%; height:auto; user-select:none; }
.landscape-far { z-index:0; }
.landscape-mid { z-index:1; bottom:1px; }
.landscape-front { z-index:4; will-change:auto; }
.hero-ground { position:absolute; bottom:-1px; left:0; right:0; height:100px; z-index:5; pointer-events:none; background:linear-gradient(transparent,#0a0a0a); }
.hero-landscape .hero-brand { animation:hero-enter 1s cubic-bezier(.16,1,.3,1) both; }
.hero-landscape h1 { animation:hero-enter 1s .1s cubic-bezier(.16,1,.3,1) both; }
.hero-landscape .hero-description { animation:hero-enter 1s .2s cubic-bezier(.16,1,.3,1) both; }
.hero-landscape .hero-actions,.hero-landscape .cta-caption { animation:hero-enter 1s .3s cubic-bezier(.16,1,.3,1) both; }
.landscape-far img { animation:landscape-enter 1s cubic-bezier(.16,1,.3,1) both; --entrance-y:72px; }
.landscape-mid img { animation:landscape-enter 1s cubic-bezier(.16,1,.3,1) both; --entrance-y:48px; }
.landscape-front img { animation:landscape-enter 1s cubic-bezier(.16,1,.3,1) both; --entrance-y:36px; }
@keyframes hero-enter { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes landscape-enter { from { transform:translateY(var(--entrance-y)); } to { transform:translateY(0); } }
@media(max-width:1279px) { .hero.hero-landscape { padding-top:140px; } }
@media(max-width:809px) {
  .hero.hero-landscape { padding:120px 24px 44px; }
  .hero-dashboard { margin-top:64px; width:100%; }
  .landscape-far { left:-240px; right:-240px; }
  .landscape-mid { left:-152px; right:-152px; }
  .landscape-front { left:-120px; right:-120px; }
  .hero-ground { height:64px; }
}
@media(max-width:560px) {
  .hero.hero-landscape { padding:120px 20px 56px; }
  .hero-landscape h1 { font-size:clamp(30px,8.1vw,43px); }
  .hero-dashboard { width:calc(100% + 56px); max-width:none; margin:52px 0 0 -28px; }
  .hero-dashboard-screen { border-radius:8px; aspect-ratio:1440 / 1080; }
  .landscape-far { bottom:-20px; }
  .landscape-mid { bottom:-32px; }
  .landscape-front { bottom:-36px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-landscape *, .hero-landscape *:before, .hero-landscape *:after { animation:none!important; }
  [data-parallax] { transform:none!important; will-change:auto; }
}

/* The argument is read in full sentences, with the launch video between paragraphs. */
.problem-story { background:#0a0a0a; color:#fafafa; padding:144px 32px 0; }
.problem-inner { max-width:880px; margin:auto; }
.problem-copy { max-width:720px; margin-inline:auto; }
.problem-outro { display:grid; place-items:center; height:clamp(300px,36vw,520px); pointer-events:none; user-select:none; }
.problem-outro-logo { display:block; width:clamp(96px,12vw,160px); height:auto; color:#fafafa; opacity:.04; }
.problem-paragraph { font-size:clamp(28px,2.5vw,32px); font-weight:400; line-height:1.5; letter-spacing:-.65px; }
.problem-paragraph+.problem-paragraph { margin-top:36px; }
.reading-word { transition:none; }
.reading-cluster { white-space:nowrap; }
[data-reading-enhanced] .reading-word { color:var(--reading-color,#525252); }
.inline-prompt { display:inline-flex; vertical-align:middle; align-items:center; gap:8px; height:36px; padding:0 12px; margin:-6px 4px 0 8px; border:1px solid #404040; border-radius:8px; background:#171717; color:#a3a3a3; font-size:11px; letter-spacing:0; white-space:nowrap; transform:rotate(-3deg); }
.inline-prompt .icon { width:13px; height:13px; }
.inline-prompt>i { width:1px; height:12px; background:#b6b3fa; }
.inline-decision { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; width:32px; height:28px; margin:-5px 0 0 6px; border:1px solid #3b368e; border-radius:8px; background:#221e6c; color:#cfccfb; transform:rotate(5deg); }
.inline-decision .icon { width:16px; height:16px; }
.launch-video { margin:56px 0; scroll-margin-top:100px; }
.launch-video-player { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border:1px solid #262626; border-radius:12px; background:#171717; }
.launch-video-player video { display:block; width:100%; height:100%; object-fit:contain; background:#0a0a0a; }
.launch-video-control { position:absolute; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:12px 16px; border:0; border-radius:12px; background:rgb(24 18 16 / .76); color:#fff; font-size:14px; font-weight:500; line-height:1; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background .18s; }
.launch-video-control:hover { background:rgb(24 18 16 / .9); }
.launch-video-control:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.launch-video-control[hidden] { display:none; }
.launch-video-control svg { width:18px; height:18px; flex-shrink:0; }
.launch-video-play { left:50%; top:50%; width:clamp(72px,12vw,116px); height:clamp(72px,12vw,116px); min-height:0; padding:0; transform:translate(-50%,-50%); border:1px solid rgb(255 255 255 / .2); border-top-color:rgb(255 255 255 / .45); border-radius:50%; background:linear-gradient(145deg,rgb(255 255 255 / .12),rgb(255 255 255 / .02) 48%,rgb(0 0 0 / .24)),rgb(22 20 18 / .34); box-shadow:inset 0 1px 1px rgb(255 255 255 / .25),0 8px 28px rgb(0 0 0 / .2); backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25); }
.launch-video-play:hover { background:linear-gradient(145deg,rgb(255 255 255 / .2),rgb(255 255 255 / .06) 48%,rgb(0 0 0 / .2)),rgb(22 20 18 / .32); }
.launch-video-play svg { width:42%; height:42%; transform:translateX(2%); filter:drop-shadow(0 1px 2px rgb(0 0 0 / .15)); }
.launch-video-replay { left:16px; bottom:16px; }
.launch-video-player video::-webkit-media-controls-fullscreen-button { display:none; }
.launch-video-sound { top:16px; right:16px; width:44px; padding:0; border-radius:50%; background:rgb(42 42 46 / .65); }
@media (hover:hover) and (pointer:fine) {
  .launch-video-replay,.launch-video-sound { opacity:0; pointer-events:none; transition:background .18s,opacity .18s; }
  .launch-video-player:hover .launch-video-replay,
  .launch-video-player:hover .launch-video-sound,
  .launch-video-player:has(:focus-visible) .launch-video-replay,
  .launch-video-player:has(:focus-visible) .launch-video-sound { opacity:1; pointer-events:auto; }
}
.launch-video-player [data-video-icon] { display:none; }
.launch-video-sound[aria-pressed=false] [data-video-icon=sound],
.launch-video-sound[aria-pressed=true] [data-video-icon=muted] { display:block; }
.launch-video-error { position:absolute; bottom:76px; left:16px; right:16px; padding:12px 16px; border-radius:8px; color:#fff; background:rgb(24 18 16 / .85); font-size:14px; line-height:1.5; }
.launch-video-error[hidden] { display:none; }
@media(max-width:809px) {
  .problem-story { padding:112px 24px 0; }
  .problem-paragraph { font-size:28px; letter-spacing:-.55px; }
  .problem-paragraph+.problem-paragraph { margin-top:32px; }
  .launch-video { margin-block:40px 48px; }
}
@media(max-width:560px) {
  .problem-story { padding:88px 20px 0; }
  .problem-paragraph { font-size:24px; letter-spacing:-.4px; }
  .inline-decision { width:32px; height:28px; margin-left:4px; }
  .inline-decision .icon { width:16px; height:16px; }
  .inline-prompt { height:28px; font-size:9px; gap:6px; padding-inline:8px; margin-left:4px; }
  .inline-prompt .icon { width:11px; height:11px; }
  .launch-video-player { border-radius:8px; }
  .launch-video-replay { left:12px; bottom:12px; }
  .launch-video-sound { top:12px; right:12px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-reading-enhanced] .reading-word { color:#fafafa; }
  .problem-story * { animation:none!important; transition:none!important; }
}

/* All landing-page section headlines share the Research and Flows typography. */
#main .section-headline { font-size:clamp(36px,3.35vw,44px); font-weight:400; line-height:1.14; letter-spacing:-1.6px; text-wrap:balance; }
@media(max-width:809px) {
  #main .section-headline { font-size:40px; }
}
@media(max-width:560px) {
  #main .section-headline { font-size:34px; letter-spacing:-1.2px; }
}

/* All six features use the requested icon-and-name badge. */
:is(.feature,.pricing,.faq,.testimonials) .section-label { display:inline-flex; width:max-content; max-width:100%; align-items:center; gap:8px; padding:10px 16px; border-radius:24px; color:#463fba; background:#e7e6fd; font-size:14px; line-height:1.4; font-weight:500; margin-bottom:24px; }
:is(.feature,.pricing,.faq,.testimonials) .section-label>.icon { width:18px; height:18px; color:inherit; }
.moodboard .section-label { background:#dbd9fc; }
.export-section .section-label { background:#221e6c; color:#cfccfb; }
.flow-wireframe { margin:24px auto 0; padding-top:20px; border-top:1px solid #e5e5e5; width:min(280px,100%); }
.flow-wireframe-label { display:block; font-size:10px; color:#737373; margin-bottom:12px; text-align:center; }
.flow-wireframe-sheets { display:flex; gap:8px; }
.flow-wireframe-sheets>div { flex:1; height:76px; padding:8px; border:1px solid #d4d4d4; border-radius:4px; background:#fafafa; }
.flow-wireframe-sheets i,.flow-wireframe-sheets b,.flow-wireframe-sheets span { display:block; height:4px; background:#d4d4d4; margin-bottom:6px; border-radius:2px; }
.flow-wireframe-sheets i { width:55%; }
.flow-wireframe-sheets b { height:24px; background:#e5e5e5; }
/* Skills and libraries activate before their two feeds converge on Stage. */
.skills-section.feature { display:block; width:min(1280px,calc(100% - 64px)); padding-block:64px 96px; }
.skills-copy { min-width:0; max-width:760px; margin:0 auto 28px; text-align:center; }
.skills-copy h2 { max-width:740px; margin-inline:auto; }
.skills-copy>p { max-width:640px; margin:20px auto 0; font-size:18px; line-height:1.65; color:#737373; text-wrap:pretty; }
.skills-infographic { position:relative; min-width:0; width:100%; max-width:900px; margin:0 auto; padding:12px 40px 32px; border-radius:40px; background:radial-gradient(ellipse at 50% 58%,#dbd9fc80 0%,#e7e6fd70 30%,#efeffb44 50%,#f5f5f500 73%); }
.toolkit-panels { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; position:relative; z-index:1; }
.toolkit-panel { min-width:0; padding:0 8px 8px; background:#fafafa; border:1px solid #e5e5e5; border-radius:16px; box-shadow:0 12px 28px -20px #221e6c36,0 2px 4px #17171705; }
.toolkit-panel-heading { min-height:60px; display:flex; align-items:center; gap:8px; padding:12px 10px; }
.toolkit-panel-heading>.icon { color:#737373; width:17px; height:17px; }
.toolkit-panel-heading h3 { font-size:14px; line-height:1.4; font-weight:500; letter-spacing:-.2px; }
.toolkit-count { margin-left:auto; font-size:12px; white-space:nowrap; color:#737373; font-variant-numeric:tabular-nums; }
.toolkit-options { display:grid; gap:6px; }
.toolkit-option { display:grid; grid-template-columns:42px minmax(0,1fr) 38px; align-items:center; column-gap:11px; min-height:80px; padding:12px; background:#fff; border:1px solid #ededed; border-radius:10px; transition:border-color .25s; }
.toolkit-option[data-selected] { border-color:#cfccfb; }
.toolkit-option-art { display:grid; place-items:center; width:42px; height:42px; border-radius:8px; background:#f5f5f5; color:#737373; overflow:hidden; }
.toolkit-option-art>img { width:100%; height:100%; object-fit:cover; }
.toolkit-option-art>.icon { width:22px; height:22px; }
/* Use the supplied artwork as a background window without redrawing it. */
.toolkit-option-copy { min-width:0; }
.toolkit-option-name { display:block; font-size:14px; line-height:1.4; font-weight:500; letter-spacing:-.2px; }
.toolkit-option-detail { display:block; margin-top:4px; font-size:12px; line-height:1.35; color:#737373; }
.toolkit-switch { position:relative; display:flex; align-items:center; width:38px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; }
.toolkit-switch::before { content:''; position:absolute; inset:11px 0; border-radius:20px; background:#d4d4d4; transition:background .25s ease; }
.toolkit-switch>span { position:relative; z-index:1; width:18px; height:18px; margin-left:2px; border-radius:50%; background:#737373; box-shadow:0 1px 2px #1717171a; transition:transform .32s cubic-bezier(.2,.8,.2,1),background .25s ease; }
.toolkit-switch[aria-checked=true]::before { background:#cac5ff; }
.toolkit-switch[aria-checked=true]>span { transform:translateX(16px); background:#373187; }
.toolkit-switch:focus-visible { outline:3px solid #8d87ff; outline-offset:4px; }
.toolkit-routing { position:relative; height:156px; }
.toolkit-wires { display:block; width:100%; height:100%; overflow:visible; }
.toolkit-wires path { vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.toolkit-wire { stroke:url("#toolkit-feed-gradient"); stroke-width:1.4; }
.toolkit-arrow { stroke:#8c84d8; stroke-width:1.5; }
.toolkit-feed { opacity:0; }
.toolkit-feed-halo { stroke:#8d87ff; stroke-width:9; filter:blur(4px); }
.toolkit-feed-core { stroke:#b6b3fa; stroke-width:2.8; filter:drop-shadow(0 0 3px #fff); }
.toolkit-feed path { stroke-dasharray:16 100; stroke-dashoffset:18; }
.toolkit-destination { position:relative; display:flex; flex-direction:column; align-items:center; width:max-content; margin:0 auto; }
.toolkit-stage-mark { position:relative; z-index:1; display:block; width:76px; height:76px; }
.toolkit-app-icon { display:block; width:100%; height:100%; object-fit:contain; }
.toolkit-stage-halo { position:absolute; width:180px; height:160px; top:-46px; border-radius:50%; background:radial-gradient(ellipse,#b6b3fa80,#7b76df20 42%,#7b76df00 72%); opacity:0; transform:scale(.7); }
[data-toolkit-feeding] .toolkit-feed[data-active] { animation:toolkit-feed-visible 1.5s ease both; }
[data-toolkit-feeding] .toolkit-feed[data-active] path { animation:toolkit-feed-flight 1.5s cubic-bezier(.35,.05,.55,1) both; }
[data-toolkit-feeding] .toolkit-stage-halo { animation:toolkit-stage-charge 1.3s .85s ease-out both; }
[data-toolkit-feeding] .toolkit-stage-mark { animation:toolkit-stage-arrival .65s 1.05s ease-out both; }
[data-toolkit-running=false] .toolkit-feed,[data-toolkit-running=false] .toolkit-feed path,[data-toolkit-running=false] .toolkit-stage-halo,[data-toolkit-running=false] .toolkit-stage-mark { animation-play-state:paused; }
.toolkit-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@keyframes toolkit-feed-flight { from { stroke-dashoffset:18; } to { stroke-dashoffset:-100; } }
@keyframes toolkit-feed-visible { 0%,100% { opacity:0; } 10%,83% { opacity:1; } }
@keyframes toolkit-stage-charge { 0% { opacity:0; transform:scale(.7); } 30% { opacity:1; } 100% { opacity:0; transform:scale(1.25); } }
@keyframes toolkit-stage-arrival { 0%,100% { transform:scale(1); } 40% { transform:scale(1.045); } }
.export-materials { display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 20px; }
.export-materials>span { display:flex; gap:6px; align-items:center; background:#e7e6fd; color:#463fba; padding:6px 8px; border-radius:4px; font-size:9px; }
.export-materials .icon { width:12px; height:12px; }
@media(max-width:809px) {
  .skills-section.feature { padding-block:48px 64px; }
  .skills-copy { width:100%; margin-bottom:28px; }
  .skills-infographic { padding-inline:0; }
  .toolkit-panel-heading { padding-inline:8px; }
  .toolkit-count { display:none; }
  .toolkit-option { column-gap:8px; padding:10px; grid-template-columns:32px minmax(0,1fr) 38px; }
  .toolkit-option-art { width:32px; height:32px; }
}
@media(max-width:560px) {
  :is(.feature,.pricing,.faq,.testimonials) .section-label { font-size:12px; padding:8px 12px; gap:6px; margin-bottom:20px; }
  :is(.feature,.pricing,.faq,.testimonials) .section-label>.icon { width:16px; height:16px; }
  .skills-section.feature { width:calc(100% - 32px); padding-block:40px 56px; }
  .skills-copy>p { font-size:16px; }
  .skills-infographic { padding-block:8px 16px; border-radius:24px; }
  .toolkit-panels { gap:12px; }
  .toolkit-panel { padding:0 6px 6px; border-radius:13px; }
  .toolkit-panel-heading { min-height:66px; padding:12px 6px; gap:6px; }
  .toolkit-panel-heading>.icon { display:none; }
  .toolkit-panel-heading h3 { font-size:14px; }
  .toolkit-option { grid-template-columns:minmax(0,1fr) 38px; min-height:104px; row-gap:4px; padding:9px; }
  .toolkit-option-art { width:28px; height:28px; grid-column:1; grid-row:1; }
  .toolkit-option-art>.icon { width:18px; height:18px; }
  .toolkit-option-copy { grid-column:1/-1; grid-row:2; align-self:start; }
  .toolkit-option-detail { display:none; }
  .toolkit-switch { grid-column:2; grid-row:1; }
  .toolkit-routing { height:120px; }
  .toolkit-stage-mark { width:68px; height:68px; }
}
@media(prefers-reduced-motion:reduce) {
  .skills-infographic *,.skills-infographic *::before { animation:none!important; transition:none!important; }
  [data-toolkit-feeding] .toolkit-feed { opacity:0; }
}

/* Short introductions and larger demonstrations follow the supplied references. */
.research.feature { width:min(1280px,calc(100% - 64px)); padding-block:88px 96px; gap:clamp(40px,5vw,80px); grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); align-items:center; }
.research .research-visual { width:100%; max-width:none; margin:0; }
.research-backdrop { display:flex; align-items:center; justify-content:center; min-height:560px; padding:64px 48px; border-radius:40px; background:radial-gradient(ellipse at 28% 28%,#dbd9fc 0%,#e7e6fd 32%,#efeffb 54%,#f5f5f500 76%); }
.research-mockup { width:100%; min-width:0; padding:6px; border:1px solid #e5e5e5; border-radius:16px; background:#fff; box-shadow:0 16px 32px -16px #221e6c38,0 4px 10px #17171712; }
.research-page-scroll { height:clamp(320px,32vw,420px); overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; border:1px solid #e5e5e5; border-radius:10px; background:#f5f5f5; scrollbar-width:none; }
.research-page-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
.research-page-scroll:focus-visible { outline:3px solid #8d87ff; outline-offset:3px; }
.research-page-scroll img { display:block; width:100%; max-width:100%; height:auto; user-select:none; }
.research .research-copy { min-width:0; max-width:520px; padding-bottom:0; }
.research .section-label { font-size:14px; padding:10px 16px; margin-bottom:26px; }
.research .section-label>.icon { width:18px; height:18px; }
.research .research-copy h2 { max-width:440px; font-size:clamp(36px,3.35vw,44px); line-height:1.14; letter-spacing:-1.6px; font-weight:400; text-wrap:balance; }
.research-benefits,.flows-benefits { display:grid; gap:22px; list-style:none; margin:48px 0 0; padding:0; }
.research-benefits>li,.flows-benefits>li { display:flex; align-items:flex-start; gap:14px; font-size:17px; line-height:1.5; letter-spacing:-.3px; }
.research-check,.flows-check { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; margin-top:2px; border-radius:50%; background:var(--purple); color:#fff; }
.research-check>.icon,.flows-check>.icon { width:14px; height:14px; }
.moodboard-header { display:block; text-align:center; max-width:740px; margin:auto; }
.moodboard-header .section-label { padding-top:10px; }
.moodboard-header h2 { margin:auto; max-width:700px; }
.moodboard-header .section-copy>p { margin:20px auto 0; max-width:590px; }
.moodboard-comparison { margin-top:44px; }
.flows.feature { width:min(1280px,calc(100% - 64px)); padding-block:88px 96px; gap:clamp(40px,5vw,80px); grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:center; }
.flows .flows-copy { min-width:0; max-width:520px; padding-bottom:0; }
.flows .section-label { font-size:14px; padding:10px 16px; margin-bottom:26px; }
.flows .section-label>.icon { width:18px; height:18px; }
.flows .flows-copy h2 { max-width:440px; font-size:clamp(36px,3.35vw,44px); line-height:1.14; letter-spacing:-1.6px; font-weight:400; text-wrap:balance; }
.flows .flows-visual { width:100%; min-width:0; margin:0; }
.flows-backdrop { display:flex; align-items:center; justify-content:center; min-height:560px; padding:64px 48px; border-radius:40px; background:radial-gradient(ellipse at 72% 28%,#dbd9fc 0%,#e7e6fd 32%,#efeffb 54%,#f5f5f500 76%); }
.flow-sequence { position:relative; isolation:isolate; width:100%; max-width:400px; padding:0 20px 16px; border:1px solid #e5e5e5; border-radius:16px; background:#fff; box-shadow:0 16px 32px -16px #221e6c38,0 4px 10px #1717170a; }
.flow-confetti { position:absolute; inset:0; z-index:2; overflow:hidden; border-radius:inherit; pointer-events:none; }
.flow-confetti>span { position:absolute; width:5px; height:8px; }
.flow-sequence-heading { display:flex; align-items:center; gap:10px; padding:22px 4px 20px; border-bottom:1px solid #ededed; font-size:14px; font-weight:500; }
.flow-sequence-heading>.icon { width:18px; height:18px; }
.flow-step-count { margin-left:auto; color:#737373; font-size:12px; font-weight:400; }
.flow-steps { list-style:none; padding:12px 0 0; margin:0; display:grid; gap:4px; }
.flow-step { position:relative; display:flex; align-items:center; gap:14px; min-height:62px; padding:9px 12px; border-radius:8px; }
.flow-step:not(:last-child)::after { content:''; position:absolute; left:26px; top:48px; bottom:-18px; width:1px; background:#e5e5e5; }
.flow-step-number { position:relative; z-index:1; display:grid; place-items:center; flex:0 0 28px; height:28px; border:1px solid #e5e5e5; border-radius:7px; background:#e5e5e5; color:#737373; font-size:13px; font-variant-numeric:tabular-nums; }
.flow-step-copy { display:grid; gap:3px; min-width:0; }
.flow-step-screen { color:#737373; font-size:12px; line-height:1.4; }
.flow-step-action { color:#262626; font-size:14px; line-height:1.45; letter-spacing:-.2px; }
.flow-sequence[data-flow-enhanced] .flow-step { opacity:0; transform:translateY(8px); transition:opacity .34s ease,transform .34s ease,background-color .34s ease; }
.flow-sequence[data-flow-enhanced] .flow-step.is-visible { opacity:1; transform:none; }
.flow-step.is-current { background:#f5f4ff; }
.flow-step.is-current .flow-step-number { background:var(--purple); border-color:var(--purple); color:#fff; }
@media(max-width:500px) {
  .flows .flows-backdrop { padding:24px 0; }
  .flow-sequence { padding-inline:14px; }
  .flow-step { padding-inline:8px; gap:12px; }
  .flow-step:not(:last-child)::after { left:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .flow-sequence[data-flow-enhanced] .flow-step { opacity:1; transform:none; transition:none; }
  .flow-confetti { display:none; }
}
.flows .flow-box { min-height:48px; height:auto; padding:12px 20px; font-size:14px; line-height:1.4; text-align:center; }
.flows .flow-box>.icon { width:16px; height:16px; flex-shrink:0; }
.flows .flow-decision { min-width:144px; }
.flows .flow-stem { height:28px; }
.flows .flow-branches { gap:16px; }
.flows .flow-branches>div { min-width:0; }
.flows .branch-label { font-size:12px; line-height:1.5; }
.flows .flow-branches .flow-box { width:100%; padding:12px 8px; font-size:13px; }
.flows .flow-wireframe { width:100%; margin-top:28px; padding-top:24px; }
.flows .flow-wireframe-label { font-size:12px; line-height:1.5; }
.flows .flow-wireframe-sheets { gap:12px; }
.flows .flow-wireframe-sheets>div { min-width:0; height:88px; padding:10px; }
.export-sequence { padding-block:88px 72px; }
.export-sequence .export-header { display:block; max-width:770px; margin:auto; text-align:center; }
.export-sequence .export-header h2 { max-width:720px; margin:auto; }
.export-sequence .export-header>p { max-width:650px; margin:24px auto 0; font-size:16px; }
.export-demo { display:grid; grid-template-columns:.65fr 1.35fr; gap:56px; align-items:center; margin:52px auto 0; max-width:1070px; }
.export-tabs { display:grid; gap:0; }
.export-tabs>button { display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; padding:28px 16px 28px 24px; border-left:1px solid #404040; background:none; color:#737373; font-size:18px; line-height:1.4; letter-spacing:-.3px; transition:color .25s,border-color .25s; }
.export-tabs>button .icon { opacity:0; width:18px; height:18px; }
.export-tabs>button:hover { color:#d4d4d4; }
.export-tabs>button[aria-current=step] { color:#fafafa; border-left:2px solid #9e99f8; padding-left:23px; }
.export-tabs>button[aria-current=step] .icon { opacity:1; color:#b6b3fa; }
.export-stage { padding:36px; background:#262626; border:1px solid #404040; border-radius:12px; min-width:0; }
.export-demo-panel { min-height:405px; }
.export-demo-panel[hidden] { display:none; }
.export-demo-panel .journey-panel-title { height:48px; font-size:12px; }
.export-demo-panel .export-file-list { display:block; padding:16px 20px; }
.export-demo-panel .export-file { height:37px; font-size:12px; }
.export-demo-panel .export-file small { font-size:10px; }
.export-demo-panel .orientation-body { display:block; padding:24px 28px; }
.export-demo-panel .orientation-body>p { font-size:28px; }
.export-demo-panel .reading-order { border:0; padding:0; margin-top:20px; }
.export-demo-panel .reading-order ol { font-size:12px; }
.export-demo-panel .agent-body { display:block; padding:32px 28px; min-height:280px; }
.export-demo-panel .agent-prompt { font-size:14px; margin-top:24px; }
.export-demo-panel .agent-context { font-size:13px; margin-top:32px; }
.export-demo-panel .export-materials { padding:4px 20px 20px; }
.export-demo-panel .export-materials>span { font-size:10px; }
.export-sequence .export-bottom { display:flex; justify-content:center; margin-top:32px; padding-top:0; border:0; }

@media(max-width:1100px) { .research.feature,.flows.feature { gap:36px; } .research-backdrop,.flows-backdrop { min-height:480px; padding:48px 28px; } .export-demo { gap:28px; } .export-stage { padding:24px; } }
@media(max-width:809px) {
  .research.feature { width:calc(100% - 48px); padding-block:64px 72px; grid-template-columns:minmax(0,1fr); gap:40px; }
  .research .research-visual { max-width:620px; margin-inline:auto; }
  .research-backdrop { min-height:480px; padding:48px 64px; }
  .research .research-copy { width:100%; max-width:540px; margin-inline:auto; padding-bottom:0; }
  .research .research-copy h2 { font-size:40px; }
  .research-benefits,.flows-benefits { margin-top:32px; }
  .flows.feature { width:calc(100% - 48px); padding-block:64px 72px; grid-template-columns:minmax(0,1fr); gap:40px; }
  .flows .flows-copy { width:100%; max-width:540px; margin-inline:auto; padding-bottom:0; }
  .flows .flows-copy h2 { font-size:40px; }
  .flows .flows-visual { max-width:620px; margin-inline:auto; }
  .flows-backdrop { min-height:480px; padding:48px 64px; }
  .export-sequence { padding-block:64px 52px; }
  .export-demo { grid-template-columns:1fr; margin-top:36px; max-width:610px; }
  .export-tabs { grid-template-columns:repeat(3,1fr); }
  .export-tabs>button { font-size:13px; padding:16px 12px; border-left:0; border-bottom:1px solid #404040; }
  .export-tabs>button[aria-current=step] { padding-left:12px; border-left:0; border-bottom:2px solid #9e99f8; padding-bottom:15px; }
  .export-tabs>button .icon { display:none; }
}
@media(max-width:560px) {
  .research.feature { width:calc(100% - 40px); padding-block:40px 56px; gap:32px; }
  .research-backdrop { min-height:0; padding:36px 20px; border-radius:28px; }
  .research-mockup { padding:5px; border-radius:14px; }
  .research-page-scroll { height:300px; border-radius:8px; }
  .research .research-copy h2 { font-size:34px; letter-spacing:-1.2px; }
  .research .section-label { margin-bottom:22px; }
  .research-benefits,.flows-benefits { margin-top:32px; gap:20px; }
  .research-benefits>li,.flows-benefits>li { gap:12px; font-size:16px; letter-spacing:-.2px; }
  .moodboard-header .section-label { padding-top:8px; }
  .flows.feature { width:calc(100% - 40px); padding-block:40px 56px; gap:32px; }
  .flows .flows-copy h2 { font-size:34px; letter-spacing:-1.2px; }
  .flows .section-label { margin-bottom:22px; }
  .flows-backdrop { min-height:0; padding:36px 20px; border-radius:28px; }
  .flows .flow-visual { padding:24px 14px; border-radius:16px; }
  .flows .flow-box { font-size:13px; }
  .flows .flow-branches { gap:12px; }
  .flows .flow-branches .flow-box { font-size:12px; gap:5px; }
  .flows .flow-wireframe-sheets { gap:8px; }
  .flows .flow-wireframe-sheets>div { height:76px; padding:8px; }
  .export-sequence { padding-block:52px 44px; }
  .export-sequence .export-header>p { font-size:14px; margin-top:20px; }
  .export-demo { gap:20px; margin-top:28px; }
  .export-tabs>button { font-size:11px; padding:12px 8px; }
  .export-tabs>button[aria-current=step] { padding-left:8px; padding-bottom:11px; }
  .export-stage { padding:12px; }
  .export-demo-panel { min-height:358px; }
  .export-demo-panel .export-file { font-size:10px; height:32px; }
  .export-demo-panel .export-file small { font-size:8px; }
  .export-demo-panel .export-file-list { padding:12px; }
  .export-demo-panel .journey-panel-title { padding-inline:12px; font-size:10px; }
  .export-demo-panel .export-materials { padding:4px 12px 16px; }
  .export-demo-panel .export-materials>span { font-size:9px; }
  .export-demo-panel .orientation-body,.export-demo-panel .agent-body { padding:24px 20px; }
  .export-demo-panel .orientation-body>p { font-size:24px; }
  .export-demo-panel .agent-prompt { font-size:12px; }
  .export-demo-panel .reading-order ol { font-size:11px; }
}



/* Two rows of integration cards, with the layout and edge fade from the reference. */
.integrations-section { position:relative; padding-block:136px 48px; border-bottom:0; }
.legacy-section-anchor { position:absolute; top:0; left:0; }
.integrations-copy { text-align:center; max-width:720px; margin:auto; }
.integrations-copy .section-label { margin-bottom:20px; }
.integrations-copy h2 { font-size:40px; line-height:1.15; letter-spacing:-1.4px; }
.integrations-copy>p { max-width:610px; margin:20px auto 0; color:#737373; font-size:16px; }
.integrations-gallery { margin-top:40px; }
.integration-row+.integration-row { margin-top:16px; }
.integration-group { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.integration-row:nth-child(2) .integration-group { grid-template-columns:repeat(4,minmax(0,1fr)); }
.integration-card { height:136px; min-width:0; padding:20px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; background:#fafafa; border:1px solid #e5e5e5; border-radius:12px; color:#737373; }
.integration-card>.icon { width:28px; height:28px; }
.integration-card>.integration-logo-paper path { fill:currentColor; }
.integration-card>.integration-logo-google-sheets { filter:grayscale(1); }
.integration-card>div { display:grid; gap:4px; }
.integration-name { font-size:14px; font-weight:500; line-height:1.3; color:#404040; }
.integration-use { font-size:12px; line-height:1.4; color:#737373; white-space:nowrap; }
.integration-duplicate { display:none; }
.integrations-gallery[data-integrations-enhanced] { overflow:clip; -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); }
[data-integrations-enhanced] .integration-track { display:flex; width:max-content; animation:integration-drift 52s linear infinite; animation-play-state:paused; will-change:transform; }
[data-integrations-enhanced] .integration-group { display:flex; gap:16px; padding-right:16px; }
[data-integrations-enhanced] .integration-card { width:200px; flex-shrink:0; }
[data-integrations-enhanced] .integration-row:nth-child(2) .integration-track { margin-left:-108px; animation-duration:58s; animation-direction:reverse; }
[data-integrations-running=true] .integration-track { animation-play-state:running; }
.integrations-gallery:hover .integration-track { animation-play-state:paused; }
@keyframes integration-drift { from { transform:translateX(0); } to { transform:translateX(-33.3333333333%); } }
@media(max-width:809px) {
  .integrations-section { padding-block:104px 40px; }
  .integrations-copy h2 { font-size:34px; }
  .integration-group,.integration-row:nth-child(2) .integration-group { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .integration-card { padding:16px; }
}
@media(max-width:560px) {
  .integrations-section { padding-block:80px 32px; }
  .integrations-copy .section-label { margin-bottom:16px; }
  .integrations-copy h2 { font-size:30px; letter-spacing:-1px; }
  .integrations-copy>p { font-size:14px; margin-top:16px; }
  .integrations-gallery { margin-top:28px; }
  .integration-group,.integration-row:nth-child(2) .integration-group { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .integration-row+.integration-row { margin-top:12px; }
  .integration-card { height:124px; padding:16px; }
  .integration-card>.icon { width:24px; height:24px; }
  .integration-use { white-space:normal; }
  [data-integrations-enhanced] .integration-group { gap:12px; padding-right:12px; }
  [data-integrations-enhanced] .integration-card { width:176px; }
  [data-integrations-enhanced] .integration-row:nth-child(2) .integration-track { margin-left:-94px; }
}
@media(prefers-reduced-motion:reduce) {
  .integrations-gallery[data-integrations-enhanced] { overflow:visible; -webkit-mask-image:none; mask-image:none; }
  [data-integrations-enhanced] .integration-track { animation:none; transform:none; width:100%; display:block; will-change:auto; }
  [data-integrations-enhanced] .integration-row:nth-child(2) .integration-track { margin-left:0; }
  [data-integrations-enhanced] .integration-group { display:grid; padding-right:0; }
  [data-integrations-enhanced] .integration-card { width:auto; }
  [data-integrations-enhanced] .integration-duplicate { display:none; }
}

/* A wide, uncropped recording replaces the three illustrative panels. */
.export-sequence { overflow:visible; padding-block:120px 96px; }
.export-scroll-track { margin:0 auto; max-width:1200px; }
.export-scroll-track .export-demo { margin:0; max-width:none; grid-template-columns:minmax(0,350fr) minmax(0,770fr); gap:56px; }
.export-copy { min-width:0; }
.export-sequence .export-header { max-width:none; margin:0; text-align:left; }
.export-sequence .export-header .section-label { justify-content:flex-start; width:max-content; margin:0 0 20px; }
.export-sequence .export-header .section-headline { font-size:32px; line-height:1.16; letter-spacing:-1px; max-width:none; margin:0; text-wrap:pretty; }
.export-sequence .export-header>p { font-size:16px; line-height:1.55; margin:18px 0 0; max-width:none; }
.export-copy .export-tabs { margin-top:28px; }
.export-copy .export-tabs>button { min-height:76px; padding-block:16px; font-size:16px; }
.export-scroll-track:not([data-export-enhanced]) .export-tabs { display:none; }
.export-scroll-track .export-stage { position:relative; display:block; align-self:center; height:auto; padding:0; min-width:0; overflow:hidden; background:#171717; border:1px solid #404040; border-radius:16px; }
.export-stage video { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; background:#171717; }
.export-video-loading,.export-video-error { margin:0; padding:14px 18px; font:400 14px/20px Inter,sans-serif; color:#fafafa; }
.export-video-error button { font:inherit; padding:0; border:0; background:none; color:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.export-video-error a { text-decoration:underline; }
.export-scroll-track[data-export-pinned] { height:calc(var(--export-demo-height) + var(--export-travel)); }
[data-export-pinned] .export-demo { position:sticky; top:var(--export-sticky-top); }
@media(min-width:810px) and (max-width:1100px) {
  .export-scroll-track .export-demo { gap:32px; grid-template-columns:minmax(0,330fr) minmax(0,610fr); }
}
@media(max-width:809px) {
  .export-sequence { padding-block:64px; }
  .export-scroll-track { max-width:700px; }
  .export-scroll-track .export-demo { grid-template-columns:1fr; gap:24px; }
  .export-copy .export-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:22px; }
  .export-copy .export-tabs>button { min-height:76px; font-size:14px; padding:12px 10px; border-left:0; border-bottom:1px solid #404040; }
  .export-copy .export-tabs>button[aria-current=step] { padding-left:10px; border-left:0; border-bottom:2px solid #9e99f8; padding-bottom:11px; }
  .export-copy .export-tabs>button .icon { display:none; }
}
@media(max-width:560px) {
  .export-sequence { padding-block:48px; }
  .export-sequence .export-header .section-headline { font-size:30px; }
  .export-copy .export-tabs>button { font-size:14px; padding-inline:8px; }
  .export-copy .export-tabs>button[aria-current=step] { padding-left:8px; }
  .export-scroll-track .export-stage { border-radius:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .export-scroll-track[data-export-pinned] { height:auto; }
  [data-export-pinned] .export-demo { position:static; }
  .export-tabs>button { transition:none; }
}

/* References feed a shared visual direction, with a two-second light pulse. */
.moodboard { background:#f5f5f5; }
.moodboard-flow { --moodboard-cycle:2s; display:grid; grid-template-columns:minmax(0,440fr) minmax(100px,180fr) minmax(0,460fr); align-items:center; max-width:1120px; margin:52px auto 0; }
.reference-collage { position:relative; width:100%; height:462px; isolation:isolate; }
.moodboard-reference { position:absolute; background:#fff; border:1px solid #dedede; border-radius:10px; padding:5px; box-shadow:0 3px 8px #17171706,0 14px 30px -16px #17171730; }
.reference-capture { overflow:hidden; border-radius:5px; background:#f5f5f5; }
.reference-capture img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.reference-website { top:26px; left:0; width:76%; transform:rotate(-4deg); }
.reference-website .reference-capture { aspect-ratio:1.6; }
.reference-webapp { bottom:20px; left:2%; width:76%; transform:rotate(4deg); }
.reference-webapp .reference-capture { aspect-ratio:1.6; }
.reference-mobile { top:94px; right:0; width:29%; z-index:1; border-radius:13px; }
.reference-mobile .reference-capture { position:relative; aspect-ratio:1000 / 2185; border-radius:8px; background:#0e0e0e; }
.reference-mobile .reference-capture img { position:absolute; width:129%; max-width:none; height:auto; left:-14.4%; top:-22.52%; }
/* Reference options share a six-second timeline: one option every two seconds. */
.moodboard-options {
  position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; padding:0; border:0; border-radius:12px;
  background:transparent; pointer-events:none;
}
.moodboard-option {
  grid-area:1 / 1; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; min-height:62px; padding:13px 21px; border:1.5px solid #e5e5e5;
  border-radius:12px; background:#fff; color:#171717;
  font:400 24px/1.25 Inter,sans-serif; letter-spacing:-.35px; white-space:nowrap;
  box-shadow:0 2px 3px #1717170d,0 10px 24px -12px #17171735;
  transform-origin:50% 55%; pointer-events:none;
}
.moodboard-option>.icon { width:26px; height:26px; flex-shrink:0; }
.option-ai { color:#fff; border-color:#666; background:linear-gradient(180deg,#404040,#080808); box-shadow:inset 0 1px 0 #ffffff18,0 2px 3px #17171725,0 10px 24px -12px #17171740; }
.option-figma,.option-upload { opacity:0; }
.option-upload { background:#f5f5f5; color:#737373; border-color:#e2e2e2; }
[data-moodboard-enhanced] .moodboard-option { animation:moodboard-option-pop calc(var(--moodboard-cycle) * 3) linear infinite both paused; }
[data-moodboard-enhanced] .option-figma { animation-delay:var(--moodboard-cycle); }
[data-moodboard-enhanced] .option-upload { animation-delay:calc(var(--moodboard-cycle) * 2); }
[data-moodboard-running=true] .moodboard-option { animation-play-state:running; }
@keyframes moodboard-option-pop {
  0% { opacity:0; transform:translateY(10px) scale(.86); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  3.5% { opacity:1; transform:translateY(-1px) scale(1.035); animation-timing-function:ease-out; }
  6%,29% { opacity:1; transform:translateY(0) scale(1); animation-timing-function:ease-in; }
  33.333%,100% { opacity:0; transform:translateY(-7px) scale(.95); }
}
.moodboard-guide { position:relative; height:462px; border:1px solid #dedede; border-radius:12px; background:#fafafa; padding:5px; box-shadow:0 2px 3px #17171705,0 20px 44px -28px #17171725; overflow:hidden; }
.guide-toolbar { height:38px; display:flex; align-items:center; gap:7px; padding:0 10px; font-size:12px; color:#525252; }
.guide-toolbar>.icon { width:14px; height:14px; color:#737373; }
.guide-direction { margin-left:auto; color:#737373; font-size:11px; padding:3px 6px; border:1px solid #e5e5e5; border-radius:4px; background:#fff; }
.guide-page { background:#fff; border:1px solid #ececec; border-radius:7px; height:calc(100% - 38px); padding:23px 24px; overflow:hidden; }
.guide-page-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.guide-page-heading h3 { font-size:19px; line-height:1.2; font-weight:500; letter-spacing:-.5px; }
.guide-page-heading p { font-size:11px; line-height:1.4; margin-top:6px; color:#737373; }
.guide-ready { display:grid; place-items:center; width:24px; height:24px; color:#6b63ce; background:#efedfd; border-radius:50%; }
.guide-ready .icon { width:14px; height:14px; }
.guide-block+.guide-block { margin-top:20px; padding-top:20px; border-top:1px solid #efefef; }
.guide-block>img { width:100%; height:auto; display:block; }
.guide-components>span { font-size:11px; }
.guide-components>div { display:flex; gap:10px; margin-top:12px; }
.guide-button-preview { font-size:10px; line-height:1; padding:8px 14px; border-radius:5px; color:#fff; background:#171717; }
.guide-button-preview.secondary { color:#463fba; background:#e7e6fd; }
.guide-button-preview.outline { color:#525252; background:#fff; border:1px solid #d4d4d4; }
@media(max-width:1000px) and (min-width:761px) {
  .moodboard-flow { grid-template-columns:minmax(0,1fr) 100px minmax(0,1.1fr); }
  .reference-collage { height:400px; }
  .reference-mobile { width:31%; top:80px; }
  .moodboard-option { min-height:52px; padding:11px 18px; font-size:20px; gap:8px; }
  .moodboard-option>.icon { width:23px; height:23px; }
  .moodboard-guide { height:400px; }
  .guide-page { padding:18px; }
  .guide-block+.guide-block { margin-top:18px; padding-top:18px; }
}
@media(max-width:760px) {
  .moodboard-flow { grid-template-columns:minmax(0,1fr); max-width:460px; margin-top:24px; }
  .reference-collage { height:420px; }
  .moodboard-guide { height:480px; }
}
@media(max-width:430px) {
  .reference-mobile { width:31%; top:80px; }
  .moodboard-option { min-height:52px; padding:11px 18px; font-size:20px; gap:8px; }
  .moodboard-option>.icon { width:23px; height:23px; }
  .reference-collage { height:390px; }
  .moodboard-guide { height:442px; }
  .guide-page { padding:20px; }
  .guide-block+.guide-block { margin-top:21px; padding-top:21px; }
}
@media(prefers-reduced-motion:reduce) {
  .moodboard-options { gap:10px; }
  [data-moodboard-enhanced] .moodboard-option { animation:none; }
  .moodboard-option { grid-area:auto; opacity:1; }
}
.moodboard-flow { --moodboard-cycle:2s; }
.moodboard-connection {
  position:relative;
  height:462px;
  pointer-events:none;
  z-index:1;
}
.moodboard-output { position:relative; z-index:2; }
.moodboard-beam {
  position:absolute;
  left:-8px;
  right:-1px;
  top:50%;
  height:200px;
  transform:translateY(-50%);
}
.beam-field {
  position:absolute;
  inset:0 -2px;
  background:radial-gradient(ellipse at 100% 50%,#7b76df28 0%,#7b76df0e 38%,#7b76df00 74%);
}
.beam-filaments { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.beam-filaments path { vector-effect:non-scaling-stroke; }
.beam-filament-outer { stroke:url("#moodboard-beam-violet"); stroke-width:.8; opacity:.19; }
.beam-filament-inner { stroke:url("#moodboard-beam-white"); stroke-width:1; opacity:.66; }
.beam-filament-body { stroke:url("#moodboard-beam-violet"); stroke-width:3.5; opacity:.6; }
.beam-filament-core { stroke:url("#moodboard-beam-white"); stroke-width:1.3; }
.beam-flight-lane { position:absolute; inset:0; overflow:hidden; }
.beam-flight { position:absolute; inset:0; opacity:0; }
.beam-flight::before,
.beam-flight::after {
  content:'';
  position:absolute;
  top:50%;
  left:-58%;
  width:58%;
  border-radius:50%;
  transform:translateY(-50%);
}
.beam-flight::before {
  height:22px;
  background:radial-gradient(ellipse at 84% 50%,#8e87f5a6,#7b76df3d 36%,#7b76df00 76%);
  filter:blur(4px);
}
.beam-flight::after {
  height:2px;
  background:linear-gradient(90deg,#7b76df00,#a6a0f5 50%,#fff 96%);
  box-shadow:0 0 4px #a39afb,0 0 12px #7b76df80;
}
.beam-arrival {
  position:absolute;
  top:50%;
  right:-1px;
  width:108px;
  height:178px;
  opacity:0;
  transform:translateY(-50%) scale(.72);
  transform-origin:100% 50%;
  background:radial-gradient(ellipse at 100% 50%,#fff 0%,#e7e6fdad 9%,#a19ae875 26%,#7b76df24 48%,#7b76df00 72%);
}
.beam-arrival::after {
  content:'';
  position:absolute;
  top:13%;
  right:0;
  width:2px;
  height:74%;
  background:linear-gradient(#e7e6fd00,#fff 35%,#fff 65%,#e7e6fd00);
  box-shadow:0 0 7px #a8a1ff,0 0 18px #7b76df66;
}
.moodboard-guide::before {
  content:'';
  position:absolute;
  z-index:1;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg,#7b76df16,#a19bea0a 35%,#7b76df00 70%);
  transform-origin:0 50%;
  opacity:0;
}
.moodboard-guide::after {
  content:'';
  position:absolute;
  z-index:2;
  inset:0;
  border:1px solid #aaa4e7;
  border-radius:inherit;
  background:radial-gradient(ellipse at 0% 50%,#b8b1f627,#7b76df00 42%);
  box-shadow:inset 1px 0 0 #f4f2ff;
  pointer-events:none;
  opacity:0;
}
[data-moodboard-enhanced] .beam-flight { animation:moodboard-beam-flight var(--moodboard-cycle) cubic-bezier(.3,.05,.6,1) infinite paused; }
[data-moodboard-enhanced] .beam-arrival { animation:moodboard-beam-arrival var(--moodboard-cycle) ease-out infinite paused; }
[data-moodboard-enhanced] .moodboard-guide::before { animation:moodboard-guide-fill var(--moodboard-cycle) ease-out infinite paused; }
[data-moodboard-enhanced] .moodboard-guide::after { animation:moodboard-guide-charge var(--moodboard-cycle) ease-out infinite paused; }
[data-moodboard-enhanced] .guide-ready { animation:moodboard-guide-ready var(--moodboard-cycle) ease-out infinite paused; }
[data-moodboard-running=true] :is(.beam-flight,.beam-arrival,.guide-ready),
[data-moodboard-running=true] .moodboard-guide::before,
[data-moodboard-running=true] .moodboard-guide::after { animation-play-state:running; }
@keyframes moodboard-beam-flight {
  0%,12% { opacity:0; transform:translateX(0); }
  20% { opacity:1; }
  58% { opacity:1; transform:translateX(100%); }
  64%,100% { opacity:0; transform:translateX(108%); }
}
@keyframes moodboard-beam-arrival {
  0%,48% { opacity:0; transform:translateY(-50%) scale(.72); }
  61% { opacity:.92; transform:translateY(-50%) scale(1); }
  83% { opacity:.3; transform:translateY(-50%) scale(1.05); }
  100% { opacity:0; transform:translateY(-50%) scale(1.05); }
}
@keyframes moodboard-guide-fill {
  0%,53% { opacity:0; transform:scaleX(.15); }
  63% { opacity:1; }
  90%,100% { opacity:0; transform:scaleX(1); }
}
@keyframes moodboard-guide-charge {
  0%,53%,100% { opacity:0; }
  63% { opacity:.9; }
  84% { opacity:.35; }
}
@keyframes moodboard-guide-ready {
  0%,59%,100% { transform:scale(1); }
  69% { transform:scale(1.08); }
  83% { transform:scale(1); }
}
@media(max-width:1000px) and (min-width:761px) {
  .moodboard-connection { height:400px; }
  .beam-arrival { width:85px; }
}
@media(max-width:760px) {
  /* The source and result stack here, so the same beam follows them downward. */
  .moodboard-connection { height:112px; margin-top:0; }
  .moodboard-connection::before,.moodboard-connection::after { content:none; }
  .moodboard-beam {
    top:0;
    left:50%;
    right:auto;
    width:112px;
    height:200px;
    transform-origin:0 0;
    transform:rotate(90deg) translateY(-50%);
  }
  .moodboard-guide { margin-top:0; }
  .moodboard-guide::before { transform-origin:50% 0; background:linear-gradient(180deg,#7b76df16,#a19bea0a 35%,#7b76df00 70%); }
  .moodboard-guide::after { background:radial-gradient(ellipse at 50% 0%,#b8b1f627,#7b76df00 42%); box-shadow:inset 0 1px 0 #f4f2ff; }
  [data-moodboard-enhanced] .moodboard-guide::before { animation-name:moodboard-guide-fill-mobile; }
}
@keyframes moodboard-guide-fill-mobile {
  0%,53% { opacity:0; transform:scaleY(.15); }
  63% { opacity:1; }
  90%,100% { opacity:0; transform:scaleY(1); }
}
@media(prefers-reduced-motion:reduce) {
  [data-moodboard-enhanced] :is(.beam-flight,.beam-arrival,.guide-ready),
  [data-moodboard-enhanced] .moodboard-guide::before,
  [data-moodboard-enhanced] .moodboard-guide::after { animation:none; }
  .beam-arrival { opacity:.22; transform:translateY(-50%); }
}

/* Match the final sections to the feature labels and keep the closing flow open. */
.pricing-heading h2,.faq-heading h2 { margin-top:0; }
.price-card .pricing-trial { margin:12px 0 0; text-align:center; font-size:12px; line-height:1.5; color:#737373; }
.closing { border-top:0; }
body:not(.download-page)>.site-footer { border-top:0; }
.faq-list { border-top:0; }

/* Bring pricing up to the scale and finish used by the newer feature sections. */
.pricing {
  width:min(1320px,calc(100% - 64px));
  max-width:none;
  padding-block:128px 96px;
}
.pricing-heading { max-width:760px; }
.pricing-heading .section-label { margin-bottom:24px; }
.pricing-heading .section-headline { max-width:720px; margin-inline:auto; }
.pricing-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:52px; }
.price-card {
  padding:40px;
  border-radius:20px;
  box-shadow:0 1px 2px #17171708;
}
.price-card-featured { border-color:#cfccfb; background:#fdfdff; }
.plan-name { gap:12px; }
.plan-name .icon { width:18px; height:22px; }
.plan-name h3 { font-size:21px; letter-spacing:-.5px; }
.plan-positioning {
  max-width:340px;
  min-height:48px;
  margin-top:18px;
  font-size:15px;
  line-height:1.55;
}
.plan-price { margin-top:32px; font-size:60px; line-height:1; letter-spacing:-2.8px; }
.plan-price>span { font-size:15px; margin-left:8px; }
.price-card ul { min-height:142px; margin:28px 0; padding-top:28px; gap:16px; }
.price-card li { gap:12px; font-size:15px; line-height:1.45; }
.price-card li>.icon { width:14px; height:14px; }
.price-card .button { min-height:52px; font-size:15px; }
.price-card .pricing-trial { margin-top:14px; font-size:13px; }
.enterprise {
  margin-top:20px;
  padding:28px 40px;
  border-radius:16px;
  background:#fff;
}
.enterprise h3 { font-size:18px; letter-spacing:-.3px; }
.enterprise p { margin-top:8px; font-size:14px; }
.enterprise :is(button,a) { display:flex; align-items:center; gap:12px; font-size:14px; color:#525252; white-space:nowrap; }
.enterprise :is(button,a):hover { color:#463fba; }

@media(max-width:1100px) {
  .pricing { width:min(720px,calc(100% - 64px)); }
  .pricing-grid { grid-template-columns:1fr; }
  .plan-positioning,.price-card ul { min-height:0; }
}

@media(max-width:809px) {
  .pricing { width:calc(100% - 40px); padding-block:80px 64px; }
  .pricing-grid { gap:14px; margin-top:36px; }
  .price-card { padding:30px; border-radius:16px; }
  .plan-name h3 { font-size:19px; }
  .plan-positioning { min-height:44px; font-size:14px; }
  .plan-price { font-size:52px; }
  .price-card ul { min-height:132px; }
  .price-card li { font-size:14px; }
  .enterprise { padding:24px 30px; }
}
@media(max-width:560px) {
  .pricing { width:calc(100% - 40px); padding-block:64px 48px; }
  .pricing-grid { grid-template-columns:1fr; gap:12px; margin-top:28px; }
  .price-card { padding:28px; }
  .plan-positioning { min-height:0; }
  .price-card ul { min-height:0; margin-block:22px 24px; padding-top:22px; }
  .enterprise { padding:22px 24px; }
  .enterprise h3 { font-size:16px; }
  .enterprise p { max-width:210px; font-size:12px; }
  .enterprise :is(button,a) { font-size:12px; }
}

.site-footer .footer-bottom { font-size:9px; letter-spacing:.01em; }
.closing .section-headline + .button { margin-top:28px; }

/* Shared section rhythm: each adjoining section contributes half of the gap.
   Keep the hero composition and the intentional story/video scroll sequences. */
:root{--section-space:80px;--section-heading-gap:52px}
#main > :is(.research,.moodboard,.flows,.skills-section,.export-section,.integrations-section,.testimonials,.pricing,.faq,.closing){padding-block:var(--section-space);margin-block:0}
#main > .problem-story{padding-top:var(--section-space)}
.testimonial-heading{margin-bottom:var(--section-heading-gap)}
.pricing-grid{margin-top:var(--section-heading-gap)}
@media(max-width:900px){
  :root{--section-space:64px;--section-heading-gap:36px}
}
@media(max-width:560px){
  :root{--section-space:48px;--section-heading-gap:28px}
}

/* Desktop Export uses the same active-step badge and detail as the mobile timeline. */
@media (min-width:810px) {
  .export-copy .export-tabs>button {
    flex-direction:column; align-items:flex-start; justify-content:center; gap:0;
    border-left:1px dashed #525252;
  }
  .export-copy .export-tabs>button[aria-current=step] { border-left:2px solid #9e99f8; }
  .export-copy .export-tabs>button>.icon { display:none; }
  .export-tabs>button[aria-current=step] .export-mobile-step {
    display:inline-flex; align-items:center; width:max-content; min-height:32px;
    padding:6px 12px; margin-bottom:12px; border-radius:20px;
    background:#221e6c; color:#cfccfb; font-size:13px; line-height:1.4; font-weight:500;
  }
  .export-tabs>button[aria-current=step] .export-mobile-description {
    display:block; min-height:63px; margin-top:8px;
    color:#a3a3a3; font-size:14px; line-height:1.5; font-weight:400;
  }
}