.hero-line{padding-bottom:.08em;display:block;overflow:clip}.hero-line>span{display:block}.workflow{border-top:1px solid var(--graphite);grid-template-columns:repeat(4,minmax(0,1fr));min-width:0;display:grid}.workflow-label{border-bottom:2px solid var(--graphite);color:var(--text-fog);cursor:pointer;grid-row:1;align-items:center;gap:12px;padding:24px 20px;font-size:18px;display:flex}.workflow-arrow{opacity:0;margin-left:auto;translate:-4px 4px}.workflow-label:hover,.workflow-choice:checked+.workflow-label{color:var(--text-bone);background:var(--carbon)}.workflow-choice:checked+.workflow-label{border-bottom-color:var(--text-bone)}.workflow-choice:checked+.workflow-label .workflow-arrow{opacity:1;translate:0}.workflow-choice:focus-visible+.workflow-label{outline:2px solid var(--text-bone);outline-offset:-6px}.workflow-panel{background:var(--carbon);grid-area:2/1/auto/-1;min-width:0;padding:36px 36px 0;display:none;overflow:clip}.workflow-choice:checked~.workflow-panel{display:block}.workflow-copy{justify-content:space-between;align-items:center;gap:24px;padding-bottom:32px;display:flex}.workflow-screen{border:1px solid var(--graphite);background:var(--void);aspect-ratio:1.8;border-bottom:0;position:relative;overflow:clip}.workflow-screen img{position:absolute;top:44px;left:0}@container landing (max-width:640px){.workflow-label{flex-wrap:wrap;gap:8px;padding:16px 8px;font-size:15px}.workflow-label>span:first-child{width:100%}.workflow-arrow{display:none}.workflow-panel{padding:24px 16px 0}.workflow-copy{flex-direction:column;align-items:start;gap:16px;min-height:160px;padding-bottom:24px}.workflow-screen{aspect-ratio:1.25}}@media (prefers-reduced-motion:no-preference){.hero-line>span{animation:.7s cubic-bezier(.16,1,.3,1) both landing-headline}.hero-line:nth-child(2)>span{animation-delay:.1s}.hero-support,.hero-actions{animation:.6s .18s both landing-arrive}.hero-actions{animation-delay:.26s}[data-slot=landing-grid] a{transition:color .18s,background-color .18s,border-color .18s,translate .18s}[data-slot=landing-grid] a[href=\/sign-up]:hover{translate:0 -2px}.workflow-arrow{transition:opacity .2s,translate .2s}.workflow-choice:checked~.workflow-panel .workflow-copy,.workflow-choice:checked~.workflow-panel .workflow-screen{animation:.4s cubic-bezier(.16,1,.3,1) both landing-arrive}@supports (animation-timeline:view()){.reading-line{background:linear-gradient(90deg, var(--text-bone) 50%, var(--text-fog) 50%);color:#0000;background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:linear both landing-read;animation-timeline:view();animation-range:entry 10% cover 45%}}}@keyframes landing-headline{0%{transform:translateY(110%)rotate(2deg)}to{transform:translateY(0)rotate(0)}}@keyframes landing-arrive{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes landing-read{0%{background-position:100% 0}to{background-position:0 0}}