:root{--ink:#2b2136;--muted:#726b77;--purple:#6041a5;--paper:#faf8f3;--line:#ded9e3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:3rem}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:inherit;text-underline-offset:5px}a:hover{color:var(--purple)}button,a{touch-action:manipulation}:focus-visible{outline:3px solid #8763d0;outline-offset:5px}header,main,footer{max-width:1260px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:30px 50px}.brand{display:inline-flex;align-items:center;gap:11px;font-size:22px;font-weight:650;letter-spacing:-.6px;text-decoration:none}nav{display:flex;gap:30px}nav a{text-decoration:none;font-size:14px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.08;letter-spacing:-2.6px}h1{font-size:clamp(46px,5.5vw,76px);margin-bottom:28px}h1 em{color:var(--purple);font-weight:400}h2{font-size:40px;letter-spacing:-1.4px}h3{font-size:20px;font-weight:600;letter-spacing:-.5px}p{margin-bottom:20px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:650;color:var(--purple);margin-bottom:25px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center;padding:95px 50px 110px}.intro{font-size:19px;color:var(--muted);max-width:540px}.button{display:inline-flex;gap:35px;align-items:center;background:var(--purple);color:white;border-radius:6px;padding:14px 20px;text-decoration:none;font-size:15px;margin:10px 0 16px}.button:hover{color:white;background:#4b3186}.caption{font-size:12px;color:var(--muted);margin:0}.reader{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 32px;box-shadow:14px 18px 0 #eae3f2;transform:rotate(-1deg)}.reader-top{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:1.6px;border-bottom:1px solid #eee9f2;padding-bottom:20px;color:var(--muted)}.dot{height:7px;width:7px;border-radius:50%;background:#a889d3}.sample{font-family:Georgia,serif;font-size:28px;line-height:1.65;margin:26px 0 30px}.term{font:inherit;border:0;border-bottom:2px solid var(--purple);color:var(--purple);background:#eee5fa;padding:0 3px;cursor:pointer}.hint{font-size:12px;color:var(--muted)}[popover]{border:1px solid #c8b7e3;border-radius:14px;padding:28px;max-width:min(410px,90vw);box-shadow:0 20px 90px #30204440;background:white;color:var(--ink)}[popover]::backdrop{background:#21133235}[popover] h2{font-size:30px}.close{background:#6041a5;color:white;border:0;padding:10px 15px;border-radius:5px;cursor:pointer}.steps{border-top:1px solid var(--line);padding:65px 50px}.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:45px}.columns p{font-size:15px;color:var(--muted)}.number{font-family:Georgia,serif;color:#9477b8;font-size:28px;display:block;margin-bottom:16px}.note{padding:70px 50px;background:#f0eaf5;display:grid;grid-template-columns:1fr 1fr;gap:65px}.note p:not(.eyebrow){font-size:15px}.contact{padding:85px 50px;text-align:center}.contact a{color:var(--purple);font-weight:600}.contact p{color:var(--muted)}footer{border-top:1px solid var(--line);padding:35px 50px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;align-items:start}footer p{font-size:12px;color:var(--muted);margin:0}footer nav{gap:18px;justify-content:end}.document{max-width:790px;margin:auto;padding:70px 35px 110px}.document h1{font-size:64px}.document h2{font-size:30px;margin-top:45px}.document p{font-size:16px}.document .intro{font-size:19px}.contact-box{padding:24px;background:#efe7f8;border-radius:12px;overflow-wrap:anywhere}.skip{position:absolute;top:-80px;left:20px;background:white;padding:10px;z-index:2}.skip:focus{top:10px}@media(max-width:800px){header{padding:22px 24px}.hero{grid-template-columns:1fr;padding:55px 24px 65px;gap:45px}.hero h1{font-size:54px}.reader{transform:none;margin-right:12px}.sample{font-size:26px}.steps,.note,.contact{padding:50px 24px}.columns{grid-template-columns:1fr;gap:20px}.number{margin-bottom:5px}.note{grid-template-columns:1fr;gap:15px}footer{padding:28px 24px;grid-template-columns:1fr}footer nav{justify-content:start}.document{padding:45px 24px 80px}.document h1{font-size:48px}h2{font-size:34px}nav{gap:18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.demo-video { display: block; width: 100%; height: auto; max-height: 75vh; background: #fff; }

.demo-page { max-width: 960px; margin: 0 auto; padding: 32px 24px; }
.demo-page h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; }

.hero-logo { display: block; width: min(280px, 70vw); height: auto; margin: 0 0 24px; border-radius: 20px; }