/* A manual, so it behaves like one: a contents rail, then setup as an ordered path with a glimpse of each screen. */
.dhead{max-width:820px;padding-block:clamp(48px,7vw,96px) clamp(28px,4vw,48px)}
.dhead>*{animation:rise var(--ds-dur-4) var(--ds-ease-out) both}.dhead>*:nth-child(2){animation-delay:80ms}
.dhead p{margin-top:16px;color:var(--ds-text-2);font-size:var(--ds-fs-lead);line-height:1.7}
.dgrid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,6vw,88px);border-top:1px solid var(--ds-border);padding-top:clamp(32px,4vw,56px)}
.drail{position:sticky;top:104px;align-self:start;display:grid;font-size:.9375rem}
.drail a{display:flex;align-items:center;min-height:44px;color:var(--ds-text-2);text-decoration:none;border-inline-start:1.5px solid var(--ds-border);padding-inline-start:14px;transition:color var(--ds-dur-1) ease-out,border-color var(--ds-dur-1) ease-out}
.drail a:hover{color:var(--ds-accent);border-inline-start-color:var(--ds-accent)}
.dmain{min-width:0;display:grid;gap:clamp(56px,7vw,104px)}
.dmain section{scroll-margin-top:100px;min-width:0}
.dmain h2{font-size:clamp(1.6rem,1.3rem + 1.3vw,2.5rem)}
.intro{margin-top:10px;color:var(--ds-text-2);font-size:1.0625rem;max-width:60ch}
.path{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;position:relative}
.path>li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;padding-inline-start:60px;padding-bottom:clamp(32px,4vw,56px)}
.path>li::before{content:"";position:absolute;inset-inline-start:19px;top:40px;bottom:0;width:1px;background-color:var(--ds-border)}
.path>li:last-child{padding-bottom:0}.path>li:last-child::before{display:none}
.path .n{position:absolute;inset-inline-start:0;top:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--ds-border-strong);background-color:var(--ds-surface);font:600 .9375rem var(--ds-font-display);color:var(--ds-accent)}
.path h3{font-size:clamp(1.125rem,1.05rem + .4vw,1.375rem);font-weight:600;padding-top:6px}
.path p{margin-top:8px;color:var(--ds-text-2);line-height:1.8}
.peek{background-color:var(--ds-surface-2);border-radius:var(--ds-radius);padding:clamp(12px,1.6vw,20px);min-width:0}
.peek .vc{background-color:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);overflow:hidden;box-shadow:0 14px 30px -20px rgb(12 20 19/.28)}
.peek .rowx{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;font-size:.875rem;border-bottom:1px solid var(--ds-border)}
.peek .rowx:last-child{border-bottom:0}
.peek .ex{display:block;margin-top:8px}
.vids{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px)}
.vids li{padding-block:16px;border-top:1px solid var(--ds-border)}
.vids b{display:block;font-weight:600}
.vids span{display:block;margin-top:4px;color:var(--ds-text-2);font-size:.9375rem;line-height:1.7}
.soon{display:inline-block;margin-top:14px;font-size:.875rem;font-weight:600;padding:4px 12px;border-radius:99px;background-color:var(--ds-warn-soft);color:var(--ds-warn)}
.apib{position:relative;isolation:isolate;overflow:hidden;background-color:var(--ds-ink);color:var(--ds-ink-text);border-radius:var(--ds-radius-xl);padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.apib::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 88% 10%,rgb(45 212 191/.2),transparent 72%)}
.pg[data-theme="dark"] .apib{box-shadow:inset 0 0 0 1px var(--ds-ink-line)}
.apib h2{color:#fff}.apib p{margin-top:12px;color:var(--ds-ink-text-2);line-height:1.8}
.apib .btn{margin-top:22px}
.keysb{border:1px solid var(--ds-ink-line);border-radius:var(--ds-radius-sm);background:rgb(255 255 255/.04);overflow:hidden;font-size:.9375rem}
.keysb>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--ds-ink-line)}
.keysb>div:last-child{border-bottom:0}
.keysb small{color:var(--ds-ink-text-2);font-size:.8125rem}
.keysb .h{font-weight:600;color:#fff}
.dfaq{margin-top:20px;display:grid}
.dfaq>div{padding-block:22px;border-top:1px solid var(--ds-border)}
.dfaq h3{font-size:1.125rem}
.dfaq p{margin-top:8px;color:var(--ds-text-2);max-width:66ch}
.helpb{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:center;background-color:var(--ds-accent-wash);border-radius:var(--ds-radius);padding:clamp(22px,3vw,36px)}
.helpb h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem)}.helpb p{margin-top:6px;color:var(--ds-text-2)}
@supports (animation-timeline:view()){.path>li,.apib,.dfaq>div,.helpb{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 26%}}
@media (max-width:1020px){.dgrid,.apib,.helpb{grid-template-columns:minmax(0,1fr)}.drail{position:static;display:flex;flex-wrap:wrap;gap:0 18px;border-bottom:1px solid var(--ds-border);padding-bottom:10px}.drail a{border:0;padding-inline-start:0}}
@media (max-width:760px){.path>li{grid-template-columns:minmax(0,1fr);padding-inline-start:52px}.vids{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.helpb .cta .btn,.apib .btn{flex:1 1 100%;width:100%}}