/* Let's Hello — home page */
:root { --grape:#221540; --grape-2:#2e1d57; --lilac:#e9e2ff; --lilac-line:#b9a5ff; --lime:#d5f56b; --ink:#221540; --muted:#6b6480; --line:#e6e1f2; --surface-2:#f5f2ff; --link:#5a3fd1; --maybe:#ffb86b; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
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, svg { display:block; max-width:100%; }
a { color:var(--link); font-weight:600; }
h1, h2, h3, p, ul, ol { margin:0; }
ul, ol { padding:0; list-style:none; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.center { text-align:center; }
:focus-visible { outline:3px solid var(--lilac-line); outline-offset:3px; border-radius:8px; }

/* ---------- top: nav + hero ---------- */
.top { background: radial-gradient(900px 500px at 85% 10%, #3a2670 0%, rgba(58,38,112,0) 70%), var(--grape); color:#fff; overflow:hidden; }
.nav { display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:6px; }
.nav .logo img { height:52px; width:auto; }
.nav nav { display:flex; align-items:center; gap:26px; }
.nav nav a { color:var(--lilac); text-decoration:none; font-size:15px; }
.nav nav a:hover { color:#fff; }
.nav .pillbtn { background:rgba(255,255,255,.1); color:#fff; padding:9px 18px; border-radius:999px; }
.nav .pillbtn:hover { background:rgba(255,255,255,.18); }

.hero { display:grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap:48px; align-items:center; padding-top:44px; padding-bottom:72px; scroll-margin-top:120px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:14px; line-height:20px; font-weight:700; color:var(--lilac); background:rgba(255,255,255,.08); padding:7px 14px; border-radius:999px; margin-bottom:22px; }
.eyebrow .dot { width:8px; height:8px; border-radius:50%; background:var(--lime); }
h1 { font-size:clamp(42px, 6.4vw, 72px); line-height:1.02; font-weight:800; letter-spacing:-0.03em; text-wrap:balance; }
.mark { color:var(--lime); position:relative; white-space:nowrap; }
.mark::after { content:""; position:absolute; left:-2%; right:-2%; bottom:.02em; height:.11em; border-radius:99px; background:var(--lime); opacity:.35; }
.lede { color:var(--lilac-line); font-size:20px; line-height:30px; font-weight:500; margin-top:20px; max-width:31em; text-wrap:pretty; }

/* ---------- sign-up form ---------- */
.signup-slot { margin-top:30px; max-width:520px; }
.signup .field { display:flex; gap:8px; background:#fff; border-radius:999px; padding:6px; box-shadow:0 12px 40px rgba(8,3,26,.35); }
.signup input[type=tel] { flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:18px; font-weight:600; color:var(--ink); padding:0 8px 0 20px; height:54px; border-radius:999px; }
.signup input[type=tel]::placeholder { color:#9a93ad; font-weight:500; }
.signup input[type=tel]:focus { outline:none; }
.signup .field:focus-within { box-shadow:0 0 0 4px rgba(185,165,255,.55), 0 12px 40px rgba(8,3,26,.35); }
.signup button, .btn { display:inline-flex; align-items:center; justify-content:center; height:54px; padding:0 26px; border:0; border-radius:999px; background:var(--lime); color:var(--grape); font:inherit; font-size:17px; font-weight:800; text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform .12s ease, filter .12s ease; }
.signup button:hover, .btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.signup button:active, .btn:active { transform:translateY(0); }
.signup button[disabled] { opacity:.6; cursor:default; transform:none; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.err { color:#ffd0c7; font-weight:600; font-size:15px; line-height:22px; margin:12px 6px 0; }
.fine { color:#a99cd0; font-size:12.5px; line-height:18px; margin:14px 6px 0; }
.fine a { color:var(--lilac); font-weight:600; }
.ticks { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; color:var(--lilac); font-size:15px; font-weight:600; }
.ticks li { display:flex; align-items:center; gap:8px; }
.ticks li::before { content:""; width:18px; height:18px; border-radius:50%; background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23221540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px; flex:none; }

/* what you see after signing up */
.done { background:#fff; color:var(--ink); border-radius:26px; padding:24px; box-shadow:0 12px 40px rgba(8,3,26,.35); text-align:left; }
.done h3 { font-size:24px; line-height:30px; font-weight:800; letter-spacing:-0.01em; }
.done p { color:var(--muted); margin-top:6px; font-size:16px; line-height:24px; }
.done .place { display:inline-flex; align-items:baseline; gap:6px; background:var(--lilac); border-radius:14px; padding:8px 14px; margin-top:14px; font-weight:700; color:var(--ink); }
.done .place b { font-size:24px; font-weight:800; }
.done .share { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.done .share .btn { height:48px; font-size:16px; flex:1; }
.done .btn.ghost { background:var(--surface-2); color:var(--ink); }
.done .link { margin-top:12px; font-size:14px; line-height:20px; color:var(--muted); overflow-wrap:anywhere; }

/* ---------- phone mock ---------- */
.stage { position:relative; justify-self:center; width:min(340px, 100%); }
.phone { background:#0f0823; border-radius:44px; padding:10px; box-shadow:0 40px 80px rgba(8,3,26,.55), inset 0 0 0 1.5px rgba(255,255,255,.12); position:relative; transform:rotate(2deg); }
.notch { position:absolute; top:20px; left:50%; width:88px; height:24px; margin-left:-44px; background:#0f0823; border-radius:99px; z-index:2; }
.screen { background:#fff; color:var(--ink); border-radius:35px; padding:58px 18px 22px; min-height:520px; }
.ptitle { font-size:25px; line-height:30px; font-weight:800; letter-spacing:-0.01em; }
.psub { color:var(--muted); font-size:14px; line-height:20px; margin-top:2px; }
.tally { display:flex; gap:8px; margin:16px 0 8px; }
.t { flex:1; border-radius:14px; padding:9px 4px; text-align:center; font-size:13px; line-height:16px; font-weight:700; color:var(--ink); }
.t b { display:block; font-size:22px; line-height:26px; font-weight:800; }
.t.in { background:var(--lime); } .t.maybe { background:#ffe6c7; } .t.out { background:var(--surface-2); color:var(--muted); }
.replies li { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:var(--d); }
.replies li:last-child { border-bottom:0; }
.av { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:15px; flex:none; }
.a1 { background:#ffd8c2; } .a2 { background:#dcd2ff; } .a3 { background:#cff0da; } .a4 { background:#ffe9a8; } .a5 { background:#cde7ff; }
.who { flex:1; min-width:0; font-weight:700; font-size:16px; line-height:20px; }
.who small { display:block; font-weight:500; font-size:13.5px; line-height:18px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tag { font-size:12px; line-height:16px; font-weight:800; border-radius:999px; padding:4px 10px; flex:none; }
.tag.in { background:var(--lime); } .tag.maybe { background:#ffe6c7; } .tag.out { background:var(--surface-2); color:var(--muted); }
.stage .bub { position:absolute; left:-78px; bottom:-26px; width:140px; height:140px; transform:rotate(-8deg); animation:bob 4s ease-in-out infinite; }
@keyframes pop { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes bob { 0%,100% { transform:rotate(-8deg) translateY(0); } 50% { transform:rotate(-5deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .replies li, .stage .bub { animation:none; } html { scroll-behavior:auto; } .signup button, .btn { transition:none; } }

/* ---------- sections ---------- */
.band { padding-top:88px; padding-bottom:8px; }
.band.tint, .band.lilac { padding-bottom:88px; margin-top:88px; }
.band.tint { background:var(--surface-2); }
.band.lilac { background:var(--lilac); }
.band.narrow { max-width:800px; }
.kicker { color:var(--link); font-weight:800; font-size:14px; line-height:20px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
h2 { font-size:clamp(30px, 4.2vw, 46px); line-height:1.08; font-weight:800; letter-spacing:-0.02em; max-width:18em; text-wrap:balance; }
h3 { font-size:20px; line-height:26px; font-weight:800; letter-spacing:-0.01em; }
.body { color:#3a2f55; margin-top:16px; font-size:18px; line-height:28px; max-width:26em; }

.versus { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px; }
.vs { border-radius:28px; padding:28px; }
.vs h3 { margin-bottom:14px; }
.vs li { position:relative; padding:9px 0 9px 34px; font-size:17px; line-height:25px; }
.vs li::before { content:""; position:absolute; left:0; top:11px; width:22px; height:22px; border-radius:50%; background-position:center; background-size:22px; }
.vs.old { background:var(--surface-2); color:var(--muted); }
.vs.old h3 { color:var(--muted); }
.vs.old li::before { background-color:#e2dcf0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7.5 7.5l7 7M14.5 7.5l-7 7' stroke='%236b6480' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vs.new { background:var(--grape); color:#fff; }
.vs.new li::before { background-color:var(--lime); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.4l3 3 6-6.2' fill='none' stroke='%23221540' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:36px 0 40px; }
.steps li { background:#fff; border-radius:28px; padding:28px; }
.steps .n { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--lime); font-weight:800; font-size:20px; margin-bottom:18px; }
.steps p, .grid p { color:var(--muted); margin-top:6px; font-size:16.5px; line-height:25px; }
.btn { background:var(--grape); color:#fff; padding:0 32px; }

.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:36px; }
.grid article { border:1px solid var(--line); border-radius:28px; padding:26px; }
.ic { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:var(--lilac); margin-bottom:16px; }
.ic svg { width:24px; height:24px; fill:none; stroke:var(--grape); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.two { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:start; }
.two > div:first-child { position:sticky; top:32px; }
.thread { background:#fff; border-radius:32px; padding:22px 20px 26px; }
.lbl { text-align:center; font-size:12.5px; line-height:18px; font-weight:700; color:var(--muted); margin:16px 0 8px; }
.lbl:first-child { margin-top:0; }
.bubble { background:var(--surface-2); border-radius:22px 22px 22px 6px; padding:12px 16px; max-width:88%; margin-bottom:8px; font-size:15.5px; line-height:22px; overflow-wrap:anywhere; }
.bubble.me { background:var(--link); color:#fff; border-radius:22px 22px 6px 22px; margin-left:auto; width:fit-content; font-weight:600; }

.note { background:var(--surface-2); border-radius:28px; padding:28px; font-size:16px; line-height:25px; }
.note h2 { font-size:24px; line-height:30px; margin-bottom:8px; }
.note p { color:var(--muted); }
.note ul { margin-top:12px; padding-left:20px; list-style:disc; }
.note li { margin-bottom:8px; }

details { border-bottom:1px solid var(--line); }
#faq h2 { margin-bottom:20px; }
summary { list-style:none; cursor:pointer; padding:20px 44px 20px 0; font-weight:700; font-size:19px; line-height:26px; position:relative; }
summary::-webkit-details-marker { display:none; }
summary::after { content:""; position:absolute; right:6px; top:26px; width:11px; height:11px; border-right:2.5px solid var(--link); border-bottom:2.5px solid var(--link); transform:rotate(45deg); transition:transform .15s; }
details[open] summary::after { transform:rotate(-135deg); top:31px; }
details p { color:#3a2f55; padding:0 28px 22px 0; }

.final { background:var(--grape); color:#fff; margin-top:96px; padding:80px 0 88px; text-align:center; }
.final .bub { margin:0 auto 14px; width:112px; height:112px; }
.final h2 { margin:0 auto; max-width:14em; }
.final .lede { margin-left:auto; margin-right:auto; }
.final .signup-slot { margin-left:auto; margin-right:auto; }

footer { padding:28px 0 96px; color:var(--muted); font-size:15px; line-height:22px; }
footer a { margin-right:18px; display:inline-block; margin-bottom:6px; }

.sticky { position:fixed; left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:20; display:none; align-items:center; justify-content:center; height:54px; border-radius:999px; background:var(--lime); color:var(--grape); font-weight:800; font-size:17px; text-decoration:none; box-shadow:0 10px 30px rgba(34,21,64,.35); }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; gap:44px; padding-top:28px; padding-bottom:64px; }
  .stage { width:min(300px, 78%); }
  .stage .bub { left:-56px; width:112px; height:112px; }
  .steps, .grid { grid-template-columns:1fr; }
  .two { grid-template-columns:1fr; gap:28px; }
  .two > div:first-child { position:static; }
  .nav nav a:not(.pillbtn):not([href="/app"]) { display:none; }
  .band { padding-top:64px; }
  .band.tint, .band.lilac { padding-bottom:64px; margin-top:64px; }
  .final { margin-top:72px; padding:64px 0 72px; }
}
@media (max-width: 700px) {
  .versus { grid-template-columns:1fr; }
  .sticky:not([hidden]) { display:flex; }
  .nav .pillbtn { display:none; }
  .nav .logo img { height:46px; }
  .lede { font-size:18px; line-height:27px; }
}
@media (max-width: 480px) {
  .signup .field { flex-direction:column; border-radius:26px; padding:8px; gap:6px; }
  .signup input[type=tel] { height:52px; text-align:center; padding:0 12px; }
  .signup button { width:100%; }
  .screen { min-height:0; }
  .vs, .steps li, .grid article, .note { padding:22px; border-radius:24px; }
}