/* Reusable motion patterns: reveal, shared indicator, scroll progress and depth. */
.blade-home{--motion-ease:cubic-bezier(.22,1,.36,1);--read-progress:0;--journey-progress:0}
.blade-home .nav{transition:box-shadow 400ms var(--motion-ease),background-color 400ms ease}
.blade-home .nav.is-scrolled{box-shadow:0 10px 32px #1726380d}
.blade-home .nav::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(var(--read-progress));transform-origin:left;pointer-events:none}
.motion-toggle{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;padding:0;flex-shrink:0;transition:border-color 250ms,color 250ms}
.motion-toggle:hover{border-color:var(--accent);color:var(--accent)}
.motion-toggle svg{width:17px;height:17px}.motion-toggle .motion-play{display:none}
[data-motion=paused] .motion-toggle .motion-pause,[data-motion=reduced] .motion-toggle .motion-pause{display:none}
[data-motion=paused] .motion-toggle .motion-play,[data-motion=reduced] .motion-toggle .motion-play{display:block}
.blade-home .btn{transition:transform 350ms var(--motion-ease),background-color 250ms ease,border-color 250ms ease,box-shadow 350ms ease}
.blade-home .btn-primary:hover{box-shadow:0 9px 22px #2058d825}
.hero-ctas .btn svg,.text-link,.hero-text-link>span,.resource-arrow{transition:transform 400ms var(--motion-ease)}
.hero-ctas .btn:hover svg{transform:translateX(4px)}
.hero-text-link:hover>span{transform:translate(3px,3px)}
.feature-menu summary>span{transition:transform 350ms var(--motion-ease)}
.feature-menu[open] .mega-panel{animation:motion-menu 400ms var(--motion-ease) both;transform-origin:top}
@keyframes motion-menu{from{opacity:0;transform:translateY(-9px) scale(.985)}to{opacity:1;transform:none}}
.scene{isolation:isolate;transition:box-shadow 650ms var(--motion-ease)}
.scene:hover{box-shadow:0 28px 65px #17263816}
.scene-board{perspective:1100px}
.conversation-card{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 600ms var(--motion-ease)}
.house-outline{transform:translateY(var(--scene-depth,0px));transition:transform 220ms linear}
.scene-sticker{transform:translateY(var(--sticker-depth,0px)) rotate(5deg);transition:transform 220ms linear}
.scene.is-playing .scene-step{animation-duration:700ms;animation-timing-function:var(--motion-ease)}
.scene.is-playing .scene-step[data-scene-step="2"]{animation-delay:1400ms}
.scene.is-playing .scene-step[data-scene-step="3"]{animation-delay:2800ms}
.scene.is-playing .brief-grid>div{animation-duration:650ms;animation-timing-function:var(--motion-ease)}
.scene-track li{transition:color 350ms ease}
.scene.is-playing .scene-track li:after{animation-duration:1000ms;animation-timing-function:var(--motion-ease)}
.draft-typing{display:none;gap:4px;align-items:center;height:14px;margin:0 0 8px 8%;color:var(--accent)}
.draft-typing i{width:4px;height:4px;border-radius:50%;background:currentColor}
.scene.is-playing .draft-typing{display:flex;position:absolute;animation:motion-typing-wrap 700ms 1000ms both;pointer-events:none}
.scene.is-playing .draft-typing i{animation:motion-typing-dot 500ms 1000ms 2 alternate both}
.scene.is-playing .draft-typing i:nth-child(2){animation-delay:1100ms}.scene.is-playing .draft-typing i:nth-child(3){animation-delay:1200ms}
@keyframes motion-typing-wrap{0%{opacity:0}20%,70%{opacity:1}100%{opacity:0}}
@keyframes motion-typing-dot{from{transform:translateY(0);opacity:.35}to{transform:translateY(-3px);opacity:1}}
.motion-ready .feature-tabs{position:relative}
.motion-ready .feature-tabs button[aria-selected=true]{border-bottom-color:transparent}
.motion-ready .feature-tabs::after{content:"";position:absolute;left:0;bottom:-1px;width:var(--tab-width,0px);height:3px;background:var(--accent);transform:translateX(var(--tab-left,0px));transition:transform 600ms var(--motion-ease),width 600ms var(--motion-ease);pointer-events:none}
.feature-tabs button{transition:color 300ms ease}
.feature-panels{overflow:clip}
.feature-panel.is-entering .sample-window{animation:motion-feature 800ms var(--motion-ease) both}
.feature-panel.is-entering .feature-story{animation:motion-feature-copy 700ms var(--motion-ease) both}
.feature-panel.is-entering .visual-caption{animation:motion-feature-copy 600ms 250ms var(--motion-ease) both}
@keyframes motion-feature{from{opacity:.2;transform:translateY(22px) rotate(-1.5deg) scale(.97)}to{opacity:1;transform:none}}
@keyframes motion-feature-copy{from{opacity:.15;transform:translateY(18px)}to{opacity:1;transform:none}}
.journey-rail{height:1px;position:relative;background:var(--line);margin:0 0 34px;overflow:visible}
.journey-rail::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--journey-progress));transform-origin:left;transition:transform 350ms var(--motion-ease)}
.journey-rail::after{content:"";position:absolute;top:-3px;left:calc(var(--journey-progress) * 100%);width:7px;height:7px;background:var(--accent);border-radius:50%;transform:translateX(-50%);transition:left 350ms var(--motion-ease)}
.blade-home .step{transition:background-color 400ms ease;border-radius:8px}
.blade-home .step .step-num{transition:color 350ms ease,transform 600ms var(--motion-ease)}
.blade-home .step.is-current .step-num{color:var(--accent);transform:translateY(-5px)}
.blade-home .step.is-current h3{color:var(--accent)}
.blade-home .plan,.blade-home .security-card,.resource-card{transition:transform 500ms var(--motion-ease),box-shadow 500ms ease,border-color 350ms ease}
@media(hover:hover) and (pointer:fine){.blade-home .plan:hover{transform:translateY(-5px);box-shadow:0 20px 45px #1726380c}.blade-home .security-card:hover{transform:translateY(-3px)}.resource-card:hover{transform:translateY(-4px);border-color:var(--accent)}.resource-card:hover .resource-arrow{transform:translate(3px,-3px)}}
.resource-section{border-top:1px solid var(--line);background:var(--bg)}
.resource-intro{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}
.resource-intro h2{max-width:700px}.resource-intro>p{max-width:300px;color:var(--muted);font-size:.9rem}
.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.resource-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:28px;display:flex;flex-direction:column;align-items:start;min-width:0;min-height:240px}
.resource-card>small{font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.resource-card h3{font-size:1.3rem;letter-spacing:-.025em;margin:0 0 12px}
.resource-card p{font-size:.85rem;color:var(--muted);margin-bottom:22px}
.resource-card .resource-link{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:auto;font-size:.77rem;color:var(--accent);font-weight:700}
.resource-arrow{font-size:1.2rem}
.guide-hero{padding:58px 0 74px;border-bottom:1px solid var(--line)}
.guide-breadcrumbs{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.73rem;margin-bottom:44px;flex-wrap:wrap}
.guide-breadcrumbs a{color:var(--accent)}
.guide-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
.guide-copy h1{font-size:clamp(2.7rem,5vw,4.55rem);letter-spacing:-.055em}
.guide-copy h1 span{color:var(--accent)}
.guide-copy>p{max-width:570px;color:var(--muted);margin-top:24px;font-size:1.02rem;line-height:1.8}
.guide-copy .hero-ctas{margin-top:28px}.guide-copy .hero-note{margin-top:18px;font-size:.74rem;color:var(--muted)}
.guide-example{background:var(--tint);padding:32px;border-radius:14px;min-width:0}
.guide-example .sample-window{max-width:100%;margin:0;padding:26px}
.guide-example h2{font-size:1.45rem;margin:18px 0 20px}
.guide-example .visual-caption{display:block;margin-top:20px}
.guide-section{padding:72px 0;border-bottom:1px solid var(--line)}
.guide-section-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.guide-section h2{font-size:clamp(2rem,3.4vw,2.8rem);max-width:470px}
.guide-prose{max-width:690px}.guide-prose p{color:var(--muted);font-size:.97rem;line-height:1.85;margin:0 0 20px}
.guide-prose h3{font-size:1.17rem;margin:26px 0 10px}
.guide-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.guide-checklist{list-style:none;padding:0;margin:24px 0 0}
.guide-checklist li{padding:16px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
.guide-checklist strong{display:block;color:var(--text);margin-bottom:4px}
.guide-table-wrap{overflow-x:auto;margin-top:20px}
.guide-table{width:100%;border-collapse:collapse;min-width:420px;font-size:.85rem;text-align:left}
.guide-table caption{text-align:left;color:var(--muted);font-size:.78rem;margin-bottom:14px}
.guide-table th,.guide-table td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.guide-table th{font-weight:700;color:var(--text)}.guide-table td{color:var(--muted)}
.guide-cta{padding:62px 0}.guide-cta-inner{padding:42px;border:1px solid var(--line);border-radius:14px;background:var(--tint);display:flex;justify-content:space-between;align-items:center;gap:35px}
.guide-cta h2{font-size:2.3rem;max-width:700px}.guide-cta p{color:var(--muted);font-size:.92rem;margin-top:15px;max-width:700px}.guide-cta .btn{white-space:nowrap;flex-shrink:0}
.guide-related{margin-bottom:70px}.guide-footer{padding:36px 0;border-top:1px solid var(--line)}.guide-footer .container{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}.guide-footer nav{display:flex;gap:20px;flex-wrap:wrap;font-size:.73rem;color:var(--muted)}
.guide-home-link{color:var(--accent);font-weight:700;font-size:.84rem}
[data-motion=paused],[data-motion=reduced]{scroll-behavior:auto!important}
[data-motion=paused] *,[data-motion=paused] *::before,[data-motion=paused] *::after,[data-motion=reduced] *,[data-motion=reduced] *::before,[data-motion=reduced] *::after{animation:none!important;transition:none!important}
[data-motion=paused] .conversation-card,[data-motion=reduced] .conversation-card{transform:none!important}
[data-motion=paused] .scene-step,[data-motion=reduced] .scene-step{opacity:1!important;transform:none!important}
[data-motion=paused] .house-outline,[data-motion=reduced] .house-outline,[data-motion=paused] .scene-sticker,[data-motion=reduced] .scene-sticker{translate:none;--scene-depth:0px;--sticker-depth:0px}
[data-motion=paused] .draft-typing,[data-motion=reduced] .draft-typing{display:none!important}
@media(max-width:1100px){.resource-card{padding:24px}.guide-layout{gap:35px}.guide-example{padding:24px}.guide-section-layout{gap:45px}.guide-cta-inner{padding:32px}}
@media(max-width:900px){.guide-section-layout{grid-template-columns:1fr;gap:25px}.guide-section h2{max-width:650px}.guide-prose{max-width:none}.resource-intro{display:block}.resource-intro>p{margin-top:20px;max-width:500px}.guide-cta-inner{display:block}.guide-cta .btn{margin-top:25px}.guide-layout{gap:25px}.guide-copy h1{font-size:3.1rem}.guide-example{padding:18px}.guide-example .sample-window{padding:20px}}
@media(max-width:680px){.motion-toggle{width:32px;height:32px}.motion-toggle svg{width:15px;height:15px}.resource-grid{grid-template-columns:1fr;gap:14px}.resource-card{padding:24px;min-height:200px}.resource-card>small{margin-bottom:20px}.resource-intro{margin-bottom:28px}.journey-rail{margin-bottom:22px}.guide-layout{grid-template-columns:1fr;gap:32px}.guide-hero{padding:32px 0 45px}.guide-breadcrumbs{margin-bottom:30px;font-size:.65rem}.guide-copy h1{font-size:clamp(2.55rem,10vw,3.8rem)}.guide-copy>p{font-size:.92rem}.guide-example{padding:22px}.guide-section{padding:48px 0}.guide-prose p{font-size:.9rem}.guide-section h2{font-size:2.1rem}.guide-cta{padding:42px 0}.guide-cta-inner{padding:28px 22px}.guide-cta h2{font-size:1.95rem}.guide-related{margin-bottom:48px}.guide-table{font-size:.78rem}.guide-footer .container{align-items:start}.guide-footer nav{gap:15px}.blade-home .nav-cta{gap:6px}}
@media(max-width:400px){.blade-home .nav-cta>.btn{display:none}.blade-home .theme-toggle{display:grid}.blade-home .nav-row{gap:6px}}
@media(prefers-reduced-motion:reduce){.blade-home .conversation-card,.blade-home .house-outline{transform:none!important}.blade-home .scene-sticker{transform:rotate(5deg)!important}.blade-home .draft-typing{display:none!important}.blade-home .step .step-num{transform:none!important}}
