/* Let's Hello — public pages */
:root { --grape:#221540; --lilac:#e9e2ff; --lilac-line:#b9a5ff; --lime:#d5f56b; --ink:#221540; --muted:#6b6480; --line:#e6e1f2; --surface-2:#f5f2ff; --link:#5a3fd1; }
* { box-sizing: border-box; }
body { margin:0; font-family: Figtree, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color:var(--ink); background:#fff; font-size:17px; line-height:26px; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:var(--link); font-weight:600; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.hero { background: var(--grape); color:#fff; padding: 28px 0 56px; position:relative; overflow:hidden; }
.hero nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:48px; }
.hero nav img { height:56px; width:auto; }
.hero nav a { color:var(--lilac); text-decoration:none; font-size:15px; }
.hero h1 { font-size: clamp(38px, 9vw, 60px); line-height:1.04; font-weight:800; letter-spacing:-0.02em; margin:0 0 16px; max-width: 11em; }
.hero p { color:var(--lilac-line); font-size:19px; line-height:28px; margin:0 0 28px; max-width: 30em; font-weight:500; }
.hero .bub { position:absolute; right: max(20px, calc(50% - 340px)); bottom:-30px; width:170px; height:170px; }
@media (max-width: 640px) { .hero .bub { width:110px; height:110px; right:16px; bottom:-18px; } .hero { padding-bottom:84px; } }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 26px; border-radius:999px; background:var(--lime); color:var(--grape); font-weight:700; text-decoration:none; font-size:16px; }
section { padding: 48px 0 0; }
h2 { font-size:28px; line-height:34px; font-weight:800; letter-spacing:-0.01em; margin:0 0 20px; }
h3 { font-size:19px; line-height:24px; margin:0 0 4px; }
.steps { display:grid; gap:14px; padding:0; margin:0; list-style:none; counter-reset: s; }
.steps li { border:1px solid var(--line); border-radius:20px; padding:18px 20px 18px 64px; position:relative; counter-increment:s; }
.steps li::before { content: counter(s); position:absolute; left:18px; top:18px; width:32px; height:32px; border-radius:99px; background:var(--lilac); display:grid; place-items:center; font-weight:800; }
.steps p, .note p { margin:0; color:var(--muted); }
.bubble { background:var(--lilac); border-radius:22px 22px 22px 6px; padding:14px 18px; max-width:30em; margin:0 0 12px; font-size:16px; line-height:23px; }
.note { background:var(--surface-2); border-radius:20px; padding:20px; }
.note ul { margin:8px 0 0; padding-left:20px; color:var(--ink); }
.note li { margin-bottom:6px; }
footer { margin-top:56px; border-top:1px solid var(--line); padding:24px 0 40px; color:var(--muted); font-size:15px; line-height:22px; }
footer a { margin-right:16px; }
.doc { padding: 24px 0 0; }
.doc header { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.doc header img { height:52px; width:auto; }
.doc h1 { font-size:34px; line-height:40px; font-weight:800; letter-spacing:-0.01em; margin:0 0 6px; }
.doc h2 { font-size:21px; line-height:28px; margin:32px 0 8px; }
.doc p, .doc li { color:#3a2f55; }
.doc .updated { color:var(--muted); font-size:15px; }