*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;font:16px/1.7 var(--font)}
a{color:inherit;text-decoration:none}a:hover{color:var(--purple)}
p,h1,h2,h3,h4,h5{margin:0}p{color:var(--muted)}
.wrap{width:min(1280px,calc(100% - 80px));margin-inline:auto}
.skip{position:absolute;left:20px;top:-80px;padding:12px;background:var(--surface);z-index:5}.skip:focus{top:12px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:100px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:800;letter-spacing:-1px;white-space:nowrap}.brand-dot{color:var(--purple);margin-left:-8px}
.nav nav{display:flex;gap:24px;font-size:14px;font-weight:650}.nav nav a{display:flex;align-items:center;min-height:44px}
.nav-login{font-size:14px;font-weight:700;border:1px solid var(--control-line);border-radius:16px;padding:10px 16px;white-space:nowrap;min-height:44px}
.hero{padding-top:68px;padding-bottom:65px;display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center}
.eyebrow,.workspace-label,.example-label{font-size:12px;font-weight:750;letter-spacing:1.2px;color:var(--purple)}
.eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:24px}.signal{width:9px;height:9px;border-radius:100%;background:var(--cyan)}
h1{font-size:clamp(48px,5.7vw,80px);line-height:1.05;letter-spacing:-4px;font-weight:800}h1>span{color:var(--purple)}
.lead{max-width:620px;margin-top:26px;font-size:18px;line-height:1.8}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:18px;padding:15px 22px;font-size:15px;font-weight:750;min-height:50px;transition:background .15s}
.primary{background:var(--purple);color:var(--on-accent)}.primary:hover{background:var(--purple-hover);color:var(--on-accent)}
.secondary{border-color:var(--control-line);background:var(--surface)}.secondary:hover{background:var(--surface-alt)}
.hero-note{font-size:14px;margin-top:18px}.hero-aside{min-width:0}.familiar-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding:30px 8px 18px}
.familiar-stage::before{content:'';position:absolute;inset:35px 0 25px;border-radius:47% 53% 36% 64%/49% 39% 61% 51%;background:var(--accent-soft);z-index:-1;transform:rotate(-7deg)}
.familiar-stage::after{content:'';position:absolute;right:-7px;bottom:35px;width:100px;height:100px;background:var(--peach);border-radius:35% 65% 48% 52%;z-index:-1}
.orbit-label{font-size:11px;letter-spacing:1.1px;font-weight:750;color:var(--purple);text-align:center}.hero-familiar{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 20px #643ea01a)}.familiar-caption{font-size:14px;color:var(--text);font-weight:650}
.preview-section{padding-bottom:10px}.preview-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.preview-caption h2{font-size:17px;font-weight:700;letter-spacing:-.3px}.preview-caption>span{font-size:10px;font-weight:700;letter-spacing:.8px;color:var(--muted)}
.product{display:grid;grid-template-columns:225px 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.product-sidebar{background:var(--surface-soft);border-right:1px solid var(--line);padding:24px 18px}.workspace-label{font-size:10px;letter-spacing:.8px;color:var(--muted)}
.selected{display:flex;gap:10px;align-items:center;margin:18px -4px 22px;padding:12px 8px;background:var(--accent-soft);border-radius:14px}.mini-mark{font-size:24px;color:var(--purple)}.selected strong{font-size:14px;display:block}.selected small{display:block;font-size:12px;color:var(--muted)}
.sidebar-note{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.symbol{color:var(--purple);font-size:24px}.sidebar-note h3{font-size:14px;margin:5px 0 7px}.sidebar-note p{font-size:12px;line-height:1.8}.tag{display:inline-block;font-size:11px;background:var(--surface-alt);color:var(--purple);border:1px solid var(--line);border-radius:8px;padding:4px 7px;margin-top:13px}.sidebar-note>small{display:block;font-size:11px;color:var(--muted);margin-top:12px}
.product-main{padding:26px 22px 0;min-width:0}.product-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.product-heading h3{font-size:24px;letter-spacing:-.8px;font-weight:750;margin-top:8px}.native{margin:0;color:var(--cyan);background:var(--surface-soft);white-space:nowrap}.product-helper{font-size:13px;margin-top:8px}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px;min-height:270px}.column{min-width:0}.column h4{font-size:12px;display:flex;align-items:center;gap:5px;font-weight:700;margin-bottom:13px;flex-wrap:wrap}.dot{width:6px;height:6px;display:inline-block;flex-shrink:0;border-radius:100%;background:var(--muted)}.working .dot{background:var(--purple)}.attention .dot{background:var(--warning)}.finished .dot{background:var(--success)}
.count{font-size:11px;color:var(--muted);margin-left:auto;background:var(--surface-soft);padding:0 6px;border-radius:5px}.task{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 12px}.task-meta{font-size:10px;color:var(--purple);font-weight:700;letter-spacing:.3px;margin-bottom:12px}.task h5{font-size:14px;line-height:1.5;font-weight:750}.task p{font-size:12px;line-height:1.7;margin-top:9px}.task-footer{border-top:1px solid var(--line);margin-top:16px;padding-top:10px;font-size:11px;color:var(--muted)}.working .task{border-color:var(--purple);background:var(--surface-alt)}.attention .task-footer{color:var(--warning)}.finished .task-footer{color:var(--success)}
.product-bottom{border-top:1px solid var(--line);padding:16px 0;display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted)}
.section{padding-top:100px;padding-bottom:85px;scroll-margin-top:24px}.section-intro{max-width:750px;margin-bottom:40px}h2{font-size:clamp(32px,3.5vw,48px);font-weight:750;letter-spacing:-1.8px;line-height:1.16}.section-intro>.eyebrow{margin-bottom:19px}.section-intro>p:last-child:not(.eyebrow){font-size:17px;max-width:650px;margin-top:20px}
.steps{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.steps li{border-top:2px solid var(--line);padding-top:17px}.step-number{font-size:14px;color:var(--purple);font-weight:800}.steps h3{font-size:18px;font-weight:750;margin:17px 0 10px}.steps p{font-size:15px;line-height:1.8}.section-footnote{font-size:14px;margin-top:30px;max-width:900px}
.features-section{background:var(--surface-alt);padding-top:75px;padding-bottom:75px}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.feature-symbol{font-size:30px;color:var(--cyan);display:flex;align-items:center;justify-content:center;width:55px;height:55px;border-radius:18px;background:var(--surface);margin-bottom:20px}.features h3{font-size:19px;font-weight:750;margin-bottom:12px}.features p{font-size:15px;line-height:1.8}
.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.examples article{padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}.example-label{font-size:11px}.examples h3{font-size:24px;letter-spacing:-.7px;font-weight:750;margin:20px 0 12px}.examples p{font-size:15px;line-height:1.8}.example-task{border-top:1px solid var(--line);margin-top:25px;padding-top:17px;font-size:14px;color:var(--text)}
.faq-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;border-top:1px solid var(--line);padding-top:70px}.text-link{display:inline-flex;align-items:center;color:var(--purple);font-size:15px;font-weight:700;margin-top:25px;min-height:44px}.faq details{border-bottom:1px solid var(--line)}.faq details:first-child{border-top:1px solid var(--line)}.faq summary{cursor:pointer;font-size:16px;font-weight:650;padding:22px 28px 22px 0;position:relative;list-style:none;min-height:44px}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';position:absolute;right:2px;top:18px;color:var(--purple);font-size:22px}.faq details[open]>summary::after{content:'−'}.faq details p{font-size:15px;line-height:1.85;margin-bottom:22px}
.closing{padding:65px 20px 70px;text-align:center;border-radius:30px;background:var(--accent-soft)}.closing .eyebrow{justify-content:center;margin-bottom:23px}.closing h2{font-size:clamp(34px,4vw,54px);line-height:1.12}.closing .button{margin-top:30px}.closing>p:last-child{font-size:15px;margin-top:16px}
footer:not(.site-footer){display:flex;flex-wrap:wrap;align-items:center;gap:25px;padding-top:50px;padding-bottom:35px}footer:not(.site-footer) .brand{font-size:22px}footer:not(.site-footer)>p{font-size:14px}footer:not(.site-footer) nav{margin-left:auto;display:flex;gap:22px;font-size:14px}footer:not(.site-footer) nav a{min-height:44px;display:flex;align-items:center}footer:not(.site-footer) small{width:100%;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:22px;margin-top:5px}
@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.nav nav{display:none}.hero{gap:20px;grid-template-columns:1.2fr 1fr}h1{font-size:60px;letter-spacing:-3px}.lead{font-size:17px}.product{grid-template-columns:1fr}.product-sidebar{display:none}.board{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0;padding-bottom:25px}.task p{font-size:13px}.task h5{font-size:15px}.column h4{font-size:14px}.features{gap:23px}.faq-layout{gap:40px}}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding-top:50px;padding-bottom:40px}.hero-aside{max-width:420px;margin:auto;width:100%}.hero-familiar{max-height:360px;object-fit:contain}.familiar-stage{padding-block:24px}.lead{max-width:650px}.steps,.features{grid-template-columns:repeat(2,1fr);gap:30px}.section{padding-top:65px;padding-bottom:60px}.examples{grid-template-columns:1fr}.examples h3{margin-top:12px}.example-task{margin-top:17px}.faq-layout{grid-template-columns:1fr;gap:30px}.preview-caption{align-items:flex-start;flex-direction:column;gap:7px}footer:not(.site-footer)>p{display:none}}
@media(max-width:560px){.wrap{width:calc(100% - 36px)}.nav{min-height:85px;gap:12px}.nav-login{display:none}.brand{font-size:22px}.brand-familiar{width:30px;height:30px}.hero{padding-top:38px}.eyebrow{font-size:10px;letter-spacing:.9px}h1{font-size:49px;letter-spacing:-2.5px}.lead{font-size:16px;margin-top:20px}.actions{gap:10px;margin-top:24px}.button{font-size:14px;padding:14px 16px}.hero-note{font-size:12px}.hero-aside{max-width:340px}.hero-familiar{max-height:290px}.familiar-caption{font-size:12px}.orbit-label{font-size:9px}.familiar-stage::after{width:70px;height:70px}.preview-caption>span{font-size:9px}.preview-caption h2{font-size:16px}.product-main{padding:20px 14px 0}.product-heading h3{font-size:21px}.product-helper{font-size:13px}.native{display:none}.board{grid-template-columns:1fr;gap:20px;margin-top:25px}.task-meta{font-size:11px}.task-footer{font-size:12px}.product-bottom>span:last-child{display:none}.steps{grid-template-columns:1fr;gap:22px}.steps h3{margin-top:10px}.features{grid-template-columns:1fr;gap:35px}.closing{padding:42px 18px}.closing h2{font-size:35px}h2{font-size:34px;letter-spacing:-1.2px}.section-intro>p:last-child:not(.eyebrow){font-size:16px}footer:not(.site-footer) nav{width:100%;margin:0;justify-content:space-between;font-size:12px}}
@media(max-width:370px){.appearance-picker>span{display:none}h1{font-size:43px}.actions .button{width:100%}.product-heading h3{font-size:19px}}
/* Content-based wrapping also supports browser zoom and enlarged text. */
.nav{flex-wrap:wrap;padding-block:16px}
.hero{grid-template-columns:repeat(auto-fit,minmax(min(100%,450px),1fr))}
.board{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.features{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.examples{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media(max-width:560px){.hero,.board,.steps,.features,.examples{grid-template-columns:1fr}}
.familiar-stage{max-width:560px;margin-inline:auto}
.hero h1{font-size:clamp(38px,4.2vw,60px);line-height:1.12;letter-spacing:-2px;text-wrap:balance}
.hero .eyebrow,.closing .eyebrow{letter-spacing:0;font-size:14px}
.orbit-label{letter-spacing:0;font-size:17px}
.continuity-intro{padding-top:35px;padding-bottom:0;display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:center}
.continuity-intro .section-intro{margin-bottom:0}
.continuity-principle{border-left:3px solid var(--purple);padding-left:26px;font-size:22px;line-height:1.65;color:var(--text)}
.example-label{letter-spacing:0;font-size:13px}
.example-sequence{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--line)}
.example-sequence li{padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.8;color:var(--muted)}
.example-sequence strong{display:block;color:var(--purple);font-size:13px;margin-bottom:5px}
.examples .example-outcome{margin-top:22px;color:var(--text);font-weight:750}
@media(max-width:1100px){.product-sidebar{display:block;border-right:0;border-bottom:1px solid var(--line)}.product-sidebar .selected{margin:12px 0}.product-sidebar .sidebar-note{display:inline-block;vertical-align:top;width:48%;margin-top:8px;padding-right:15px}}
@media(max-width:800px){.continuity-intro{grid-template-columns:1fr;gap:28px}.continuity-principle{font-size:20px}.hero-aside{max-width:300px}.hero-familiar{max-height:240px}}
@media(max-width:560px){.product-sidebar .sidebar-note{display:block;width:100%}.hero h1{font-size:40px;letter-spacing:-1.5px}.hero .eyebrow{font-size:12px}}
