/* Homepage-only motion and interactive examples. Workspace controls stay unchanged. */ #auth-screen { --home-ease: cubic-bezier(.2,.7,.2,1); } #auth-screen .site-header { max-width:none; padding-inline:var(--home-gutter); gap:24px; background:#fffffff2; transition:box-shadow .25s,background .25s; } #auth-screen .site-header.home-scrolled { background:#fffffff7; box-shadow:0 6px 24px #18332b0d; backdrop-filter:blur(14px); } #auth-screen .site-header .site-brand img { transition:transform .25s; } #auth-screen .home-scrolled .site-brand img { transform:scale(.94); } #auth-screen .site-actions { gap:14px; margin-left:auto; } #site-navigation { gap:20px; } #site-navigation a { transition:color .2s,border-color .2s; } #site-navigation a[aria-current="location"] { color:#176b4e; border-color:#176b4e; } #auth-screen .home-button,#auth-screen .home-link { transition:background .2s,border-color .2s,box-shadow .2s,transform .2s; } #auth-screen .home-button:hover { transform:translateY(-2px); box-shadow:0 6px 16px #16382b16; } #auth-screen .home-button:active { transform:translateY(0); } #auth-screen .home-link:hover { transform:translateX(3px); } #auth-screen .home-button svg,#auth-screen .home-link svg { width:18px; height:18px; flex-shrink:0; } #auth-screen .banner-image { transform:translateY(var(--hero-offset,0px)) scale(1.012); } #auth-screen .home-scroll-cue { position:absolute; bottom:24px; left:var(--home-edge); display:grid; place-items:center; width:40px; height:40px; border:1px solid #aac1b8; border-radius:50%; color:#1f624d; background:#ffffffbd; transition:transform .25s; } #auth-screen .home-scroll-cue:hover { transform:translateY(4px); } #auth-screen .home-scroll-cue svg { width:18px; height:18px; } #auth-screen .home-reveal { opacity:0; transform:translateY(22px); transition:opacity .65s var(--home-ease),transform .65s var(--home-ease); } #auth-screen .home-reveal.home-visible { opacity:1; transform:none; } #auth-screen .home-reveal:focus-within { opacity:1; transform:none; } #auth-screen [hidden] { display:none!important; } #auth-screen .home-studio-track { position:relative; } #auth-screen .home-studio-pin { background:#f3f6f4; } #auth-screen .home-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid #d7e2dc; background:#fff; } #auth-screen .home-steps button { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; min-height:68px; padding:12px; font-size:13px; font-weight:550; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:#68786f; } #auth-screen .home-steps button[aria-pressed="true"] { color:#176b4e; background:#f0f6f2; border-bottom-color:#176b4e; } #auth-screen .home-steps button:hover { background:#f4f7f5; color:#176b4e; } #auth-screen .home-steps button:focus-visible { outline:2px solid #36876a; outline-offset:-4px; } #auth-screen .home-steps svg { width:18px; height:18px; flex-shrink:0; } #auth-screen .home-step-number { color:#99a79f; font-size:11px; font-variant-numeric:tabular-nums; } #auth-screen #home-main .product-stage { padding:36px; gap:48px; grid-template-columns:.9fr 1.1fr; min-height:490px; } #auth-screen .product-story { min-width:0; grid-column:1; grid-row:1; } #auth-screen .product-story h3 { font-size:27px; line-height:1.25; } #auth-screen .product-story .home-link { margin-top:20px; } #auth-screen .studio-preview { grid-column:2; grid-row:1; align-self:stretch; display:flex; flex-direction:column; box-shadow:0 16px 35px #14382b09; } #auth-screen .preview-toolbar { align-items:center; font-size:10px; padding:18px 22px; } #auth-screen .saved-indicator { color:#587769; font-size:9px; text-align:right; } #auth-screen .preview-body { flex:1; padding:24px; min-height:345px; } #auth-screen .preview-body h4 { min-height:48px; margin:10px 0 20px; font-size:20px; } #auth-screen .preview-meta { margin:0; } #auth-screen .home-demo-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; } #auth-screen .home-demo-fields label { display:grid; gap:8px; font-size:12px; color:#50685c; } #auth-screen .home-demo-fields select { width:100%; min-width:0; height:42px; padding:8px; border:1px solid #c8d8ce; border-radius:4px; background:#fff; color:#213c30; font:inherit; } #auth-screen .home-audience-visual { display:flex; justify-content:center; gap:20px; margin:24px 0 15px; } #auth-screen .home-audience-visual span { display:grid; place-items:center; width:56px; height:56px; background:#eff5f1; color:#176b4e; border-radius:8px; } #auth-screen .home-audience-visual span:nth-child(2) { background:#edf2fa; color:#416dab; } #auth-screen .home-audience-visual span:nth-child(3) { background:#f9eff1; color:#b04f67; } #auth-screen .home-audience-visual svg { width:25px; height:25px; } #auth-screen .home-demo-caption { font-size:11px; margin:16px 0 0; } #auth-screen .home-demo-progress { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:#526b5d; } #auth-screen .home-demo-progress strong { color:#176b4e; font-variant-numeric:tabular-nums; } #auth-screen .home-demo-track { height:3px; background:#e6ede8; margin:10px 0 16px; overflow:hidden; } #auth-screen .home-demo-track>span { display:block; height:100%; background:#2e9973; transform-origin:left; transition:transform .4s var(--home-ease); } #auth-screen .home-demo-responses { display:grid; gap:0; } #auth-screen .home-demo-response { display:grid; grid-template-columns:64px 1fr; align-items:center; gap:12px; border-bottom:1px solid #ecf0ed; min-height:53px; } #auth-screen .home-demo-response>span { font-size:10px; color:#6c7d74; } #auth-screen .home-demo-response p { font-size:12px; line-height:1.5; margin:8px 0; } #auth-screen .home-demo-response.is-ready p { color:#284535; } #auth-screen .home-demo-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; } #auth-screen .home-demo-bottom small { font-size:10px; color:#7a877f; } #auth-screen .home-demo-replay { display:grid; place-items:center; height:32px; width:32px; flex-shrink:0; border:1px solid #d5e1d9; border-radius:4px; background:white; color:#176b4e; } #auth-screen .home-demo-replay svg { width:15px; height:15px; } #auth-screen .home-segment { display:inline-flex; padding:3px; gap:3px; background:#eef3f0; border:1px solid #dfe7e2; border-radius:5px; max-width:100%; } #auth-screen .home-segment button { min-height:32px; padding:6px 12px; background:transparent; color:#526b5d; border:1px solid transparent; border-radius:3px; font-size:12px; line-height:1.4; } #auth-screen .home-segment button[aria-pressed="true"] { color:#176b4e; background:#fff; border-color:#d7e1db; box-shadow:0 1px 3px #213e3012; } #auth-screen .home-demo-table { width:100%; margin-top:20px; } #auth-screen .home-demo-table table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:12px; } #auth-screen .home-demo-table caption { text-align:left; color:#7a877f; font-size:10px; margin-bottom:10px; } #auth-screen .home-demo-table th,#auth-screen .home-demo-table td { padding:12px 8px; text-align:left; border-bottom:1px solid #e1e9e4; color:#355042; overflow-wrap:anywhere; } #auth-screen .home-demo-table th { background:#f6f8f7; font-size:11px; font-weight:550; } #auth-screen .home-demo-table td:last-child { font-variant-numeric:tabular-nums; } #auth-screen .twin-inner { align-items:start; } #auth-screen .twin-portrait { height:auto; aspect-ratio:4/5; min-height:440px; max-height:630px; } #auth-screen .twin-portrait>img { display:block; position:absolute; inset:0; object-position:50% 20%; } #auth-screen .portrait-caption { left:16px; top:16px; font-size:9px; padding:8px 10px; } #auth-screen .home-twin-gender { position:absolute; top:56px; left:16px; background:#0b2522e6; border-color:#83ad9d4d; } #auth-screen .home-twin-gender button { color:#ccdfd5; font-size:11px; } #auth-screen .home-twin-gender button[aria-pressed="true"] { color:#122e25; background:#e5f7ee; border-color:#e5f7ee; } #auth-screen .portrait-traits { left:16px; right:16px; bottom:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } #auth-screen .portrait-traits button { min-width:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; min-height:44px; padding:8px 6px; font-size:12px; background:#f6fcf8ed; color:#274b3b; border:1px solid #c4dace; border-radius:4px; } #auth-screen .portrait-traits button[aria-pressed="true"] { background:#176b4e; color:white; border-color:#79d0a7; box-shadow:0 0 0 2px #79d0a726; } #auth-screen .portrait-traits svg { width:16px; height:16px; flex-shrink:0; } #auth-screen .twin-copy h2 { font-size:38px; } #auth-screen .twin-copy>p:not(.section-label) { margin-top:18px; } #auth-screen .home-twin-context { margin-top:24px; padding:18px 0; border-block:1px solid #93c5ab30; min-height:230px; } #auth-screen .home-persona-label { margin:0 0 9px; font-size:10px; color:#85c5a9; } #auth-screen .home-twin-context strong { font-weight:550; font-size:14px; line-height:1.5; display:block; color:#f5fff9; } #auth-screen .home-twin-context .home-twin-question { font-size:12px; color:#91b3a3; margin:14px 0 6px; } #auth-screen .home-twin-context blockquote { margin:0 0 12px; padding:0 0 0 12px; border-left:2px solid #6bba95; font-size:15px; line-height:1.65; color:#e1eee6; } #auth-screen .home-twin-context small { color:#7f9c8e; font-size:10px; } #auth-screen .twin-facts { margin:20px 0; gap:20px; } #auth-screen .twin-facts>div { padding-top:0; border:0; } #auth-screen .home-study-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid #d4dfe1; margin-bottom:24px; } #auth-screen .home-study-nav button { display:flex; align-items:center; gap:10px; min-width:0; background:transparent; border:0; border-radius:0; padding:16px 12px; color:#526a72; font-size:12px; text-align:left; line-height:1.5; } #auth-screen .home-study-nav button:hover { background:#eaf0f3; color:#1c5470; } #auth-screen .home-study-nav button>span { color:#82979f; font-size:10px; } #auth-screen .home-study-nav svg { margin-left:auto; width:15px; flex-shrink:0; } #auth-screen .research-study { transition:opacity .65s,transform .65s,border-color .25s,box-shadow .25s; scroll-margin-top:110px; } #auth-screen .research-study:hover,#auth-screen .research-study.home-study-selected { border-color:#92b8c4; box-shadow:0 8px 24px #2042510a; } #auth-screen .research-track { height:8px; } #auth-screen .research-track span { transform:scaleX(0); transform-origin:left; transition:transform .85s var(--home-ease); } #auth-screen .home-visible .research-track span { transform:scaleX(1); } #auth-screen .research-chart-row:nth-child(2) .research-track span { transition-delay:120ms; } #auth-screen .research-chart-row { padding:5px; margin:-5px; border-radius:4px; transition:background .2s; } #auth-screen .research-chart-row:hover,#auth-screen .research-chart-row:focus-visible { background:#f4f7fa; } #auth-screen .role-grid article { border-top:2px solid #cfdad2; transition:border-color .25s,opacity .65s,transform .65s; } #auth-screen .role-grid article:hover,#auth-screen .role-grid article:focus-within { border-color:#328a69; } #auth-screen .role-grid article:nth-child(2):hover { border-color:#5385b4; } #auth-screen .role-grid li { opacity:.25; transform:translateX(-8px); transition:opacity .45s,transform .45s; transition-delay:var(--step-delay,0ms); } #auth-screen .role-grid .home-visible li { opacity:1; transform:none; } #auth-screen .role-grid li:before { border-radius:4px; width:30px; height:30px; transition:background .2s,color .2s; } #auth-screen .role-grid article:hover li:before { background:#176b4e; color:#fff; } #auth-screen .role-grid article:nth-child(2):hover li:before { background:#416e95; } #auth-screen .cost-breakdown { border-top:2px solid #294c38; } #auth-screen .cost-breakdown .home-cost-rates { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:12px 0 20px; } #auth-screen .home-cost-rates>span { font-size:12px; color:#6a7c70; } #auth-screen .home-cost-rates strong { display:block; font-size:20px; color:#213c2d; margin-top:8px; } #auth-screen .cost-breakdown .home-cost-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border:0; padding:24px 0 16px; align-items:end; } #auth-screen .home-cost-inputs label { display:grid; gap:10px; min-width:0; font-size:12px; color:#506459; } #auth-screen .home-cost-inputs input { width:100%; min-width:0; height:44px; padding:10px; font:inherit; font-size:17px; font-variant-numeric:tabular-nums; border-radius:4px; border:1px solid #c6d5cc; background:#ffffffb3; color:#214333; } #auth-screen .home-cost-inputs input[aria-invalid="true"] { border-color:#b54655; } #auth-screen .home-cost-slider { display:block; font-size:12px; color:#56695d; } #auth-screen .home-cost-slider>span { display:flex; justify-content:space-between; } #auth-screen .home-cost-slider small { color:#809186; font-size:11px; } #auth-screen .home-cost-slider input { width:100%; margin:16px 0; accent-color:#22775a; cursor:pointer; } #auth-screen .cost-breakdown .home-cost-result { display:block; padding:22px 0 0; border-bottom:0; border-top:1px solid #cbd9cf; } #auth-screen .home-cost-result>span { font-size:12px; color:#65796b; } #auth-screen .home-cost-result>div { display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; padding-top:8px; } #auth-screen .home-cost-result .home-cost-total { font-size:38px; font-weight:550; color:#176b4e; line-height:1.25; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } #auth-screen .home-cost-result>div>span { color:#728b7b; font-size:14px; } #auth-screen .home-cost-status { font-size:12px; min-height:40px; overflow-wrap:anywhere; margin:10px 0 0; } #auth-screen .faq-list summary:hover { color:#176b4e; } #auth-screen .faq-list details[open] { background:#f9fbfa; padding-inline:14px; margin-inline:-14px; } #auth-screen .closing-section { position:relative; overflow:hidden; } #auth-screen .closing-section:before { content:''; display:block; height:1px; width:80px; background:#a6dfbf; margin:0 auto 28px; transform:scaleX(.5); transition:transform .4s; } #auth-screen .closing-section:hover:before { transform:scaleX(1); } @media (min-width:1000px) { #auth-screen #home-main .product-stage { height:540px; } } @media (min-width:1000px) and (min-height:820px) and (prefers-reduced-motion:no-preference) { #auth-screen .home-studio-track:after { content:''; display:block; height:24svh; } #auth-screen .home-studio-pin { position:sticky; top:108px; } } @media (max-width:1350px) { #auth-screen #site-navigation { top:100%; } } @media (max-width:999px) { #auth-screen #home-main .product-stage { padding:26px; gap:28px; } #auth-screen .home-step-number { display:none; } #auth-screen .twin-copy h2 { font-size:32px; } #auth-screen .home-study-nav { grid-template-columns:repeat(2,minmax(0,1fr)); } #auth-screen .twin-portrait { min-height:400px; } } @media (max-width:700px) { #auth-screen .home-scroll-cue { right:24px; left:auto; bottom:20px; } #auth-screen #home-main .product-stage { grid-template-columns:1fr; gap:24px; min-height:0; padding:24px 18px; } #auth-screen .product-story { grid-column:1; grid-row:auto; } #auth-screen .studio-preview { grid-column:1; grid-row:auto; min-height:440px; } #auth-screen .home-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } #auth-screen .home-steps button { min-height:50px; font-size:12px; padding:10px 6px; } #auth-screen .home-step-number { display:inline; } #auth-screen .product-story h3 { font-size:24px; } #auth-screen .preview-body { padding:20px; } #auth-screen .home-demo-fields { gap:10px; } #auth-screen .twin-inner { grid-template-columns:1fr; } #auth-screen .twin-portrait { min-height:0; max-height:none; max-width:440px; aspect-ratio:4/5; margin:0 auto; } #auth-screen .home-twin-context { min-height:226px; } #auth-screen .home-study-nav button { padding:14px 8px; } #auth-screen .pricing-band { grid-template-columns:1fr; } #auth-screen .home-cost-inputs label { font-size:11px; } #auth-screen .home-cost-inputs input { font-size:16px; padding:8px; } } @media (max-width:400px) { #auth-screen .site-header { padding-inline:12px; gap:8px; } #auth-screen .site-header .site-actions { gap:8px; } #auth-screen .home-step-number { display:none; } #auth-screen .preview-body { padding:18px; } #auth-screen .preview-toolbar { padding:16px; } #auth-screen .home-demo-table th,#auth-screen .home-demo-table td { padding:12px 5px; } #auth-screen .home-study-nav button { font-size:11px; gap:6px; } } @media (prefers-reduced-motion:reduce) { #auth-screen .home-reveal,#auth-screen .role-grid li { opacity:1; transform:none; } #auth-screen .banner-image { transform:none; } #auth-screen .research-track span { transform:scaleX(1); } #auth-screen .home-studio-track { padding-bottom:0; } #auth-screen .home-studio-track:after { display:none; } #auth-screen .home-studio-pin { position:static; } } /* Visible scenes play on their own; interaction hands control back to the visitor. */ #auth-screen .home-motion-toggle { display:none; } #auth-screen .home-motion-toggle:hover { background:#edf7f0; border-color:#248363; } #auth-screen .home-motion-toggle svg { width:18px; height:18px; } body.dialog-open #auth-screen .home-motion-toggle { visibility:hidden; } #auth-screen .home-motion-scene *,#auth-screen .home-motion-scene:before,#auth-screen .home-motion-scene:after, #auth-screen .home-motion-scene *:before,#auth-screen .home-motion-scene *:after { animation-play-state:paused; } #auth-screen .home-motion-live *,#auth-screen .home-motion-live:before,#auth-screen .home-motion-live:after, #auth-screen .home-motion-live *:before,#auth-screen .home-motion-live *:after { animation-play-state:running; } #auth-screen .landing-hero .banner-image { animation:home-cinematic-pan 13s ease-in-out infinite alternate; } #auth-screen .home-hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; opacity:0; } #auth-screen .hero-scene-ready .home-hero-canvas { opacity:1; } #auth-screen .hero-scene-ready .banner-image { opacity:0; animation:none; } #auth-screen .hero-mobile-copy { display:none; } #auth-screen .home-hero-chapters { position:absolute; right:var(--home-edge); bottom:32px; display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:20px; width:380px; max-width:calc(100% - 48px); color:#f3fbff; pointer-events:none; text-shadow:0 1px 8px #07325f; opacity:0; } #auth-screen .hero-scene-ready .home-hero-chapters { opacity:1; } #auth-screen .home-hero-chapters>span { min-width:0; position:relative; display:grid; gap:6px; padding-bottom:14px; opacity:.6; transition:opacity .6s; } #auth-screen .home-hero-chapters>span.is-active { opacity:1; } #auth-screen .home-hero-chapters i { font-size:10px; font-style:normal; font-variant-numeric:tabular-nums; } #auth-screen .home-hero-chapters b { font-size:12px; font-weight:550; line-height:1.4; } #auth-screen .home-hero-chapters em { position:absolute; bottom:0; left:0; right:0; height:2px; background:#ffffff40; } #auth-screen .home-hero-chapters em:after { content:''; position:absolute; inset:0; background:#baf6ff; transform:scaleX(0); transform-origin:left; } #auth-screen .home-hero-chapters .is-active em:after { transform:scaleX(var(--hero-progress,0)); } #auth-screen .hero-content .home-button:first-child { position:relative; overflow:hidden; } #auth-screen .hero-content .home-button:first-child:after,#auth-screen .closing-section .home-button:first-child:after { content:''; position:absolute; inset:-20% auto -20% -60%; width:34%; background:#ffffff24; transform:skewX(-22deg); pointer-events:none; animation:home-button-sheen 4.8s ease-in-out infinite; } #auth-screen .home-scroll-cue svg { animation:home-scroll-arrow 2s ease-in-out infinite; } #auth-screen .capability-strip strong { position:relative; padding-block:6px; transition:color .35s; } #auth-screen .capability-strip strong:after { content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#238464; transform:scaleX(0); transform-origin:left; transition:transform .55s; } #auth-screen .capability-strip strong.home-auto-active { color:#176b4e; } #auth-screen .capability-strip strong.home-auto-active:after { transform:scaleX(1); } #auth-screen .home-studio-pin { --scene-progress:0; } #auth-screen .home-steps button:after { content:''; position:absolute; bottom:-2px; left:0; width:100%; height:3px; background:#2ba875; transform:scaleX(0); transform-origin:left; transition:transform .15s linear; } #auth-screen .home-motion-live .home-steps button[aria-pressed="true"]:after { transform:scaleX(var(--scene-progress)); } #auth-screen .home-steps button[aria-pressed="true"] { border-bottom-color:#b4d8c4; } #auth-screen .home-motion-manual .home-steps button[aria-pressed="true"] { border-bottom-color:#176b4e; } #auth-screen .studio-preview { position:relative; } #auth-screen .studio-preview:after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left; background:#47ad89; animation:home-preview-rail 5.2s ease-in-out infinite; pointer-events:none; } #auth-screen .home-motion-live .sample-options label:has(input:checked) { animation:home-choice-focus 2.6s ease-in-out infinite; } #auth-screen .home-audience-visual span { animation:home-profile-lift 3s ease-in-out infinite; } #auth-screen .home-audience-visual span:nth-child(2) { animation-delay:.35s; } #auth-screen .home-audience-visual span:nth-child(3) { animation-delay:.7s; } #auth-screen .home-motion-live .home-demo-response.is-ready { animation:home-row-arrive .55s ease-out both; } #auth-screen .home-demo-response.is-ready:nth-child(2) { animation-delay:.12s; } #auth-screen .home-demo-response.is-ready:nth-child(3) { animation-delay:.24s; } #auth-screen .home-demo-table tbody tr { animation:home-export-row 3.8s ease-in-out infinite; } #auth-screen .home-demo-table tbody tr:nth-child(2) { animation-delay:.55s; } #auth-screen .home-demo-table tbody tr:nth-child(3) { animation-delay:1.1s; } #auth-screen .twin-portrait>img { animation:home-avatar-breathe 8s ease-in-out infinite alternate; transform-origin:50% 65%; } #auth-screen .twin-portrait:before { content:''; position:absolute; z-index:1; pointer-events:none; inset:12% 8%; border-block:1px solid #67dbe86b; border-inline:1px solid #67dbe826; animation:home-persona-frame 6.2s ease-in-out infinite; } #auth-screen .twin-portrait:after { content:''; position:absolute; z-index:1; pointer-events:none; top:20%; left:8%; right:8%; height:2px; background:#9bf3f4a8; box-shadow:0 0 24px #36e6ee60; animation:home-persona-scan 6.2s ease-in-out infinite; } #auth-screen .portrait-traits,#auth-screen .home-twin-gender,#auth-screen .portrait-caption { z-index:2; } #auth-screen .portrait-traits button[aria-pressed="true"] { transition:background .35s,box-shadow .35s; box-shadow:0 0 0 2px #79d0a744,0 0 18px #35bd9733; } #auth-screen .home-twin-context { position:relative; } #auth-screen .home-twin-context:after { content:''; position:absolute; bottom:-1px; left:0; height:2px; width:100%; background:#75d7b4; transform:scaleX(var(--scene-progress,0)); transform-origin:left; transition:transform .15s linear; } #auth-screen .home-motion-live .home-twin-context blockquote { animation:home-answer-arrive .6s ease-out both; } #auth-screen .home-twin-context { min-height:244px; } #auth-screen .research-study { position:relative; overflow:hidden; } #auth-screen .research-study:before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:#448dac; transform:scaleX(0); transform-origin:left; transition:transform .15s linear; } #auth-screen .research-study.home-auto-active { border-color:#74a9b8; box-shadow:0 8px 28px #23495112; } #auth-screen .home-motion-live .research-study.home-auto-active:before { transform:scaleX(var(--scene-progress,0)); } #auth-screen .home-study-nav button.home-auto-active { color:#18667d; background:#e7f0f4; } #auth-screen .research-track { height:10px; } #auth-screen .research-track span { position:relative; overflow:hidden; } #auth-screen .research-track span:after { content:''; position:absolute; inset:0 auto 0 -45%; width:40%; background:#ffffff73; transform:skewX(-18deg); animation:home-data-sweep 3.6s ease-in-out infinite; } #auth-screen .research-chart-row:nth-child(2) .research-track span:after { animation-delay:.4s; } #auth-screen .research-totals>div { position:relative; } #auth-screen .research-totals>div:after { content:''; position:absolute; left:0; bottom:-10px; height:2px; width:36px; background:#81aab8; animation:home-evidence-mark 3.6s ease-in-out infinite; transform-origin:left; } #auth-screen .research-totals>div:nth-child(2):after { animation-delay:.4s; } #auth-screen .research-totals>div:nth-child(3):after { animation-delay:.8s; } #auth-screen .role-grid ol { position:relative; } #auth-screen .role-grid ol:after { content:''; position:absolute; top:15px; bottom:15px; left:14px; width:2px; z-index:0; background:#d1e4d9; transform:scaleY(var(--scene-progress,0)); transform-origin:top; transition:transform .15s linear; } #auth-screen .role-grid li { position:relative; transition:color .35s,opacity .45s,transform .45s; } #auth-screen .role-grid li:before { position:relative; z-index:1; background:#fff; } #auth-screen .role-grid li.home-auto-active { color:#176b4e; transform:translateX(6px); } #auth-screen .role-grid li.home-auto-active:before { color:#fff; border-color:#176b4e; background:#176b4e; box-shadow:0 3px 12px #176b4e22; } #auth-screen .role-grid article:nth-child(2) li.home-auto-active { color:#316c9b; } #auth-screen .role-grid article:nth-child(2) li.home-auto-active:before { background:#416e95; border-color:#416e95; } #auth-screen .home-cost-rates>span { position:relative; padding:10px; margin:-10px; transition:background .4s,color .4s; border-radius:4px; } #auth-screen .home-cost-rates>span.home-auto-active { background:#deeee5; color:#256048; } #auth-screen .home-cost-rates>span:nth-child(2).home-auto-active { background:#e3eaf6; color:#3a6495; } #auth-screen .home-cost-rates strong { transition:transform .45s; } #auth-screen .home-cost-rates>span.home-auto-active strong { transform:translateX(4px); } #auth-screen .home-cost-result { position:relative; } #auth-screen .home-cost-result:before { content:''; position:absolute; top:-2px; left:0; width:100%; height:3px; background:#37a47a; transform:scaleX(0); transform-origin:left; } #auth-screen .home-motion-live .home-cost-result.home-auto-active:before { animation:home-cost-trace 2.4s ease-out both; } #auth-screen .home-cost-total { transition:color .4s; } #auth-screen .home-cost-result.home-auto-active .home-cost-total { color:#095b3d; } #auth-screen .faq-list details { position:relative; } #auth-screen .faq-list details:before { content:''; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:#77b698; transform:scaleX(0); transform-origin:left; transition:transform .15s linear; } #auth-screen .home-motion-live .faq-list details.home-auto-active:before { transform:scaleX(var(--scene-progress,0)); } #auth-screen .faq-list details.home-auto-active:not([open]) .faq-plus { color:#176b4e; animation:home-faq-accent 3.2s ease-in-out infinite; } #auth-screen .closing-section:before { width:220px; animation:home-closing-rule 4.5s ease-in-out infinite; } #auth-screen .closing-section .home-button { position:relative; overflow:hidden; } #auth-screen .closing-section h2 { animation:home-closing-rise 6s ease-in-out infinite; } @keyframes home-cinematic-pan { from{transform:translateY(var(--hero-offset,0px)) scale(1.015)} to{transform:translate(-1.1%,calc(var(--hero-offset,0px) + 10px)) scale(1.065)} } @keyframes home-button-sheen { 0%,45%{left:-60%} 82%,100%{left:150%} } @keyframes home-scroll-arrow { 0%,100%{transform:translateY(-3px)} 50%{transform:translateY(4px)} } @keyframes home-preview-rail { 0%{transform:scaleX(0)} 80%,100%{transform:scaleX(1)} } @keyframes home-choice-focus { 0%,100%{box-shadow:inset 0 0 0 0 #4ebd8426} 50%{box-shadow:inset 0 0 0 2px #4ebd8466;background:#e3f3e9} } @keyframes home-profile-lift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } @keyframes home-row-arrive { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:translateX(0)} } @keyframes home-export-row { 0%,65%,100%{background:transparent} 25%,40%{background:#e6f4ed} } @keyframes home-avatar-breathe { from{transform:scale(1.015) translateY(0)} to{transform:scale(1.05) translateY(-6px)} } @keyframes home-persona-frame { 0%,100%{opacity:.3;transform:scale(.98)} 50%{opacity:.85;transform:scale(1)} } @keyframes home-persona-scan { 0%{transform:translateY(0);opacity:0} 15%{opacity:.8} 80%{opacity:.5} 100%{transform:translateY(340px);opacity:0} } @keyframes home-answer-arrive { from{opacity:.25;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} } @keyframes home-data-sweep { 0%{left:-45%} 75%,100%{left:140%} } @keyframes home-evidence-mark { 0%,100%{transform:scaleX(.4);opacity:.45} 50%{transform:scaleX(1.3);opacity:1} } @keyframes home-cost-trace { 0%{transform:scaleX(0)} 65%,100%{transform:scaleX(1)} } @keyframes home-faq-accent { 0%,100%{transform:scale(1)} 40%{transform:scale(1.2)} } @keyframes home-closing-rule { 0%,100%{transform:scaleX(.4);opacity:.4} 50%{transform:scaleX(1);opacity:1} } @keyframes home-closing-rise { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } @media (max-width:700px) { #auth-screen .home-motion-toggle { display:none; } #auth-screen .site-header .site-actions { gap:6px; } #auth-screen .site-header .site-brand { font-size:19px; gap:5px; } #auth-screen .site-header .brand-portrait { width:30px; height:30px; } #auth-screen .site-header #language { min-width:0; padding-inline:3px; font-size:11px; gap:4px; } #auth-screen .site-header .home-button.compact { font-size:11px; padding-inline:10px; gap:6px; } #auth-screen .home-hero-chapters { bottom:26px; right:80px; left:24px; width:auto; max-width:none; gap:12px; } #auth-screen .home-hero-chapters b { font-size:10px; } #auth-screen .home-hero-chapters i { font-size:9px; } #auth-screen .home-studio-pin .studio-preview { min-height:468px; } #auth-screen .home-twin-context { min-height:262px; } } @media (max-width:360px) { #auth-screen .site-header .brand-wordmark { display:none; } #auth-screen .site-header .brand-portrait { width:34px; height:34px; } } @media (max-width:600px) { #auth-screen .landing-hero { height:clamp(440px,calc(100svh - 138px),740px); min-height:0; padding:0; background:#f6fafd; } #auth-screen .hero-content { position:static; width:100%; max-width:none; } #auth-screen .home-hero-copy { position:absolute; top:22px; left:24px; right:24px; } #auth-screen .home-hero-copy h1 { font-size:36px; line-height:1.08; margin:0 0 9px; } #auth-screen .home-hero-copy h2 { font-size:24px; line-height:1.18; margin:0; } #auth-screen .hero-content .section-label,#auth-screen .hero-description,#auth-screen .hero-desktop-copy { display:none; } #auth-screen .hero-mobile-copy { display:inline; } #auth-screen .landing-hero .banner-image { height:calc(100% - 202px); top:108px; bottom:auto; } #auth-screen .landing-hero:after { background:linear-gradient(180deg,#f6fafd 0px,#f6fafd 108px,transparent 150px,transparent calc(100% - 118px),#f6fafd calc(100% - 94px)); } #auth-screen .hero-cta { position:absolute; bottom:42px; left:24px; right:24px; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #auth-screen .hero-cta .home-button { width:100%; min-width:0; min-height:46px; padding:10px; gap:7px; font-size:12px; line-height:1.35; justify-content:center; } #auth-screen .hero-cta .home-button svg { width:15px; height:15px; } #auth-screen .hero-footnote { position:absolute; left:24px; right:24px; bottom:13px; margin:0; font-size:10px; line-height:1.5; text-align:center; } #auth-screen .home-hero-chapters,#auth-screen .home-scroll-cue { display:none; } } @media (max-width:900px) and (max-height:500px) { #auth-screen .landing-hero { height:clamp(220px,calc(100svh - 126px),374px); min-height:0; padding:0; } #auth-screen .hero-content { position:static; width:100%; } #auth-screen .home-hero-copy { position:absolute; top:18px; left:24px; right:auto; width:40%; } #auth-screen .home-hero-copy h1 { font-size:30px; line-height:1.08; margin:0 0 8px; } #auth-screen .home-hero-copy h2 { font-size:20px; line-height:1.18; margin:0; } #auth-screen .hero-content .section-label,#auth-screen .hero-description,#auth-screen .hero-desktop-copy { display:none; } #auth-screen .hero-mobile-copy { display:inline; } #auth-screen .landing-hero .banner-image { top:0; height:100%; object-position:65% center; } #auth-screen .landing-hero:after { background:none; } #auth-screen .hero-cta { position:absolute; left:24px; right:auto; bottom:34px; width:40%; max-width:none; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #auth-screen .hero-cta .home-button { min-width:0; min-height:44px; padding:8px; font-size:11px; gap:5px; line-height:1.35; justify-content:center; } #auth-screen .hero-cta .home-button svg { width:14px; height:14px; } #auth-screen .hero-footnote { position:absolute; left:24px; right:auto; bottom:10px; width:40%; margin:0; font-size:9px; line-height:1.4; text-align:center; } #auth-screen .home-hero-chapters,#auth-screen .home-scroll-cue { display:none; } } @media (prefers-reduced-motion:reduce) { #auth-screen .home-motion-scene *,#auth-screen .home-motion-scene:before,#auth-screen .home-motion-scene:after, #auth-screen .home-motion-scene *:before,#auth-screen .home-motion-scene *:after { animation:none!important; } #auth-screen .home-hero-canvas,#auth-screen .home-hero-chapters,#auth-screen .twin-portrait:before,#auth-screen .twin-portrait:after { display:none; } #auth-screen .home-motion-scene .banner-image,#auth-screen .twin-portrait>img { transform:none; } } #auth-screen .home-motion-scene:not(.home-motion-live) *, #auth-screen .home-motion-scene:not(.home-motion-live):before, #auth-screen .home-motion-scene:not(.home-motion-live):after, #auth-screen .home-motion-scene:not(.home-motion-live) *:before, #auth-screen .home-motion-scene:not(.home-motion-live) *:after { animation-play-state:paused!important; }