@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..700&family=Geist:wght@400..600&display=swap');
:root { --bg:#FAFAF7; --surface:#FFFFFF; --sunk:#F1F0EC; --ink:#16181A; --ink2:#3F4347; --muted:#5B5F63; --line:#E7E6E1; --line2:#EFEEEA;
  --field:#D6D4CD; --accent:#1F6F5B; --accent-ink:#16503F; --accent-soft:#E6F1EC; --found:#FDF3E1; --found-ink:#7A3B06; --found-text:#5C3A12;
  --display:"Bricolage Grotesque", -apple-system, sans-serif; --sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:18px; line-height:1.5; }
a { color:var(--accent); }
:focus-visible { outline:3px solid rgba(31,111,91,.35); outline-offset:3px; border-radius:8px; }
.wrap { max-width:1280px; margin:0 auto; padding:0 80px; }
h1, h2, .display { font-family:var(--display); font-weight:700; letter-spacing:-.03em; }

/* nav */
nav.top { position:sticky; top:0; z-index:50; background:rgba(250,250,247,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.navin { display:flex; align-items:center; gap:40px; height:84px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand b { font-family:var(--display); font-size:25px; font-weight:700; letter-spacing:-.02em; }
.navlinks { display:flex; gap:32px; font-size:17px; font-weight:500; }
.navlinks a { color:var(--ink2); text-decoration:none; }
.navlinks a:hover { color:var(--ink); }
.navright { margin-left:auto; display:flex; gap:8px; align-items:center; }
.navright .signin { font-size:17px; font-weight:500; color:var(--ink); text-decoration:none; padding:12px 16px; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 24px; border-radius:14px; border:1.5px solid var(--ink);
  background:var(--ink); color:#fff; font:inherit; font-size:17px; font-weight:600; text-decoration:none; cursor:pointer; }
.btn.lg { min-height:58px; font-size:19px; padding:16px 28px; }
.btn.primary { background:var(--accent); border-color:var(--accent); }
.btn.primary:hover { background:var(--accent-ink); border-color:var(--accent-ink); }
.btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--field); }
.btn.ghost:hover { border-color:var(--ink); }
.btnrow { display:flex; gap:14px; flex-wrap:wrap; }

/* hero */
.hero { display:grid; grid-template-columns:minmax(0,1fr) 540px; gap:72px; align-items:center; padding-top:96px; padding-bottom:112px; }
.kicker { display:inline-flex; padding:8px 14px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); font-size:15px; font-weight:600; }
.hero h1 { font-size:clamp(52px, 7.2vw, 96px); line-height:.98; letter-spacing:-.035em; margin:24px 0; }
.lede { font-size:23px; line-height:1.5; color:var(--ink2); max-width:560px; }
.hero .btnrow { margin-top:32px; }
.fine { margin-top:20px; font-size:16px; color:var(--muted); }
.demo { background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:32px; box-shadow:0 30px 60px rgba(22,24,26,.08); display:flex; flex-direction:column; gap:16px; }
.who { font-size:15px; font-weight:600; color:var(--muted); }
.bubble { align-self:flex-start; max-width:400px; padding:14px 18px; background:#EDEDEA; border-radius:22px 22px 22px 6px; font-size:19px; line-height:1.4; }
.added { display:flex; align-items:center; gap:10px; color:var(--accent); font-size:15px; font-weight:600; }
.itemcard { display:flex; gap:16px; padding:20px; border:1px solid var(--line); border-radius:18px; }
.circle { width:28px; height:28px; border-radius:50%; border:2px solid #B9B7B0; flex:none; margin-top:2px; }
.itemcard .t { font-size:21px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
.tags { display:flex; gap:8px; margin-top:8px; }
.tag { padding:4px 10px; background:var(--sunk); border-radius:8px; font-size:15px; font-weight:500; color:var(--muted); }
.found { display:flex; gap:14px; align-items:flex-start; padding:18px 20px; background:var(--found); border-radius:18px; color:var(--found-text); font-size:16px; line-height:1.45; }
.found b { display:block; font-size:17px; color:var(--found-ink); margin-bottom:2px; }

/* sections */
section.band { padding:104px 0; }
section.white { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.shead { max-width:800px; margin-bottom:52px; }
.shead h2 { font-size:clamp(38px, 4.4vw, 60px); line-height:1.02; }
.shead p { font-size:21px; line-height:1.5; color:var(--ink2); margin-top:16px; }
.steps3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.step { background:var(--bg); border:1px solid var(--line); border-radius:24px; padding:36px; display:flex; flex-direction:column; gap:16px; }
.num { width:52px; height:52px; border-radius:16px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:26px; font-weight:700; flex:none; }
.step h3 { font-size:26px; font-weight:600; letter-spacing:-.015em; line-height:1.2; }
.step p { font-size:18px; line-height:1.55; color:var(--ink2); }
.flowhead, .flow { display:grid; grid-template-columns:1.1fr 1fr 1.2fr; gap:24px; }
.flowhead { padding:0 28px 12px; font-size:15px; font-weight:600; color:var(--muted); }
.flows { display:flex; flex-direction:column; gap:16px; }
.flow { align-items:center; padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:22px; }
.flow .said { display:flex; flex-direction:column; gap:8px; }
.flow .bubble { font-size:18px; padding:12px 16px; border-radius:20px 20px 20px 6px; }
.flow .lane { font-size:15px; font-weight:600; color:var(--accent); }
.flow .it { font-size:21px; font-weight:600; line-height:1.3; letter-spacing:-.01em; margin-top:6px; }
.flow .did { font-size:18px; line-height:1.5; color:var(--ink2); }
.flow .lab { display:none; }
.privacy { background:var(--ink); color:#fff; border-radius:36px; padding:80px; display:grid; grid-template-columns:400px minmax(0,1fr); gap:72px; }
.privacy h2 { font-size:clamp(38px, 4vw, 56px); line-height:1.02; }
.privacy .intro p { font-size:20px; line-height:1.55; color:#C9CBCC; margin-top:20px; }
.privacy .intro a { color:#9ED8C3; font-weight:600; }
.pgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 48px; }
.pgrid h3 { font-size:22px; font-weight:600; }
.pgrid p { font-size:18px; line-height:1.55; color:#C9CBCC; margin-top:10px; }
.final { text-align:center; padding-top:128px; padding-bottom:112px; display:flex; flex-direction:column; align-items:center; gap:24px; }
.final h2 { font-size:clamp(40px, 5.4vw, 72px); line-height:1; letter-spacing:-.035em; }
.final p { font-size:22px; color:var(--ink2); max-width:620px; }
.final .btnrow { justify-content:center; margin-top:12px; }
footer.foot { border-top:1px solid var(--line); }
.footin { display:flex; gap:32px; align-items:center; padding-top:36px; padding-bottom:36px; font-size:16px; color:var(--muted); flex-wrap:wrap; }
.footin a { color:var(--muted); text-decoration:none; }
.footin a:hover { color:var(--ink); }
.footin .note { margin-left:auto; }

/* text pages */
.doc { overflow-wrap:anywhere; max-width:760px; margin:0 auto; padding:56px 20px 96px; }
.doc h1 { font-size:clamp(40px, 7vw, 64px); line-height:1.02; letter-spacing:-.035em; }
.doc .meta { font-size:16px; color:var(--muted); margin-top:14px; }
.doc h2 { font-family:var(--sans); font-size:24px; font-weight:600; letter-spacing:-.01em; margin:44px 0 12px; }
.doc p, .doc li { font-size:18px; line-height:1.65; color:var(--ink2); }
.doc p + p { margin-top:14px; }
.doc ul { padding-left:22px; display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.doc .lede { margin-top:20px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px; margin-top:32px; display:flex; flex-direction:column; gap:14px; }
.field { width:100%; min-height:54px; padding:12px 16px; border:1.5px solid var(--field); border-radius:12px; background:var(--surface); font:inherit; font-size:17px; color:var(--ink); outline:none; }
.field:focus { border-color:var(--accent); }
.msg { font-size:16px; font-weight:500; }
.msg.ok { color:var(--accent-ink); } .msg.err { color:#B42318; }
.nums { list-style:none; padding:0 !important; counter-reset:n; gap:0 !important; }
.nums li { counter-increment:n; display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line2); }
.nums li:last-child { border-bottom:none; }
.nums li::before { content:counter(n); flex:none; width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; }

@media (max-width: 1100px) {
  .wrap { padding:0 40px; }
  .hero { grid-template-columns:1fr; gap:48px; padding-top:64px; padding-bottom:80px; }
  .demo { max-width:560px; }
  .privacy { grid-template-columns:1fr; gap:40px; padding:56px; }
}
@media (max-width: 760px) {
  body { font-size:17px; }
  .wrap { padding:0 20px; }
  .navin { height:64px; gap:12px; }
  .brand b { font-size:22px; }
  .navlinks, .navright .btn { display:none; }
  .navright .signin { padding:12px 0 12px 12px; }
  .hero { padding-top:36px; padding-bottom:48px; gap:32px; }
  .hero h1 { font-size:54px; margin:18px 0; }
  .lede { font-size:19px; }
  .hero .btnrow { flex-direction:column; margin-top:24px; }
  .hero .btnrow .btn, .final .btn { width:100%; }
  .fine { text-align:center; font-size:15px; }
  .demo { padding:20px; border-radius:24px; gap:12px; }
  .bubble { font-size:17px; max-width:290px; }
  .itemcard { padding:16px; }
  .itemcard .t { font-size:18px; }
  section.band { padding:56px 0; }
  .shead { margin-bottom:28px; }
  .shead h2 { font-size:38px; line-height:1.05; }
  .shead p { font-size:18px; }
  .steps3 { grid-template-columns:1fr; gap:14px; }
  .step { flex-direction:row; padding:22px; border-radius:20px; gap:16px; }
  .num { width:44px; height:44px; font-size:22px; border-radius:13px; }
  .step h3 { font-size:20px; }
  .step p { font-size:17px; margin-top:6px; }
  .flowhead { display:none; }
  .flow { grid-template-columns:1fr; gap:14px; padding:20px; border-radius:20px; }
  .flow .bubble { font-size:17px; }
  .flow .it { font-size:19px; }
  .flow .did { font-size:16px; }
  .flow .result { padding-top:14px; border-top:1px solid var(--line2); }
  .privacy { margin:0 -8px; padding:40px 24px; border-radius:28px; gap:28px; }
  .privacy h2 { font-size:38px; }
  .privacy .intro p { font-size:18px; }
  .pgrid { grid-template-columns:1fr; gap:24px; }
  .pgrid h3 { font-size:19px; } .pgrid p { font-size:17px; margin-top:6px; }
  .final { padding-top:64px; padding-bottom:56px; gap:16px; }
  .final h2 { font-size:40px; }
  .final p { font-size:18px; }
  .footin { flex-direction:column; align-items:flex-start; gap:14px; padding-top:28px; padding-bottom:40px; }
  .footin .note { margin-left:0; }
  .doc { padding:36px 20px 72px; }
  .doc h2 { font-size:21px; margin-top:36px; }
  .doc p, .doc li { font-size:17px; }
  .card { padding:22px; }
}