:root{
  --bg:#F8F7F5; --surface:#FFFFFF; --card-line:#E6E3DF; --ink:#1E2230; --muted:#5E6474; --line:#E6D9CF;
  --slate:#7B87A5; --slate-ink:#FFFFFF; --terra:#DDAE9B; --terra-soft:#F3DDD2; --stay:#E4EAF4; --stay-ink:#3C4A6B;
  --font:"Poppins", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#161922; --surface:#1F2330; --card-line:transparent; --ink:#EDEAE6; --muted:#A3A8B6; --line:#2E3342;
    --slate:#5B6687; --slate-ink:#F3F1EE; --terra:#C8927D; --terra-soft:#3A2A25; --stay:#232B3D; --stay-ink:#B8C4E0;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.65; font-weight:400;}
a{color:var(--slate); text-underline-offset:3px;}
@media (prefers-color-scheme: dark){ a{color:#AEB9D6;} }
a:focus-visible{outline:2px solid var(--slate); outline-offset:2px; border-radius:4px;}
.bar{background:var(--slate); color:var(--slate-ink); padding:14px 20px;}
.bar-inner{max-width:960px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.wordmark{font-weight:600; font-size:24px; letter-spacing:.01em; color:var(--slate-ink); text-decoration:none;}
.nav{display:flex; gap:18px; font-size:14px;}
.nav a{color:var(--slate-ink); text-decoration:none; opacity:.9;}
.nav a:hover{opacity:1; text-decoration:underline;}
main{padding:0 20px;}
.wrap{max-width:68ch; margin:0 auto; padding-block:44px 72px; display:flex; flex-direction:column; gap:36px;}
h1{font-weight:500; font-size:clamp(30px,5.5vw,42px); line-height:1.15; margin:0; text-wrap:balance;}
h2{font-weight:600; font-size:21px; line-height:1.3; margin:0 0 8px; text-wrap:balance;}
h3{font-weight:600; font-size:16px; margin:16px 0 2px;}
p,ul{margin:0 0 10px;}
ul{padding-left:22px;}
li{margin-bottom:5px;}
.meta{color:var(--muted); font-size:14px; margin:6px 0 0;}
.promise{background:var(--terra-soft); border-radius:18px; padding:18px 22px; font-weight:500; font-size:18px; line-height:1.45; margin:0;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 6px;}
@media (max-width:560px){ .split{grid-template-columns:1fr;} }
.col{border-radius:16px; padding:16px 18px;}
.col h4{margin:0 0 6px; font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase;}
.col ul{margin:0; padding-left:18px; font-size:15px;}
.stays{background:var(--stay); color:var(--stay-ink);}
.sent{background:var(--surface); border:1px solid var(--line);}
.token{font-family:var(--mono); font-size:13.5px; background:var(--surface); border:1px dashed var(--line); border-radius:10px; padding:8px 12px; overflow-x:auto; white-space:nowrap;}
.caption{font-size:13px; color:var(--muted);}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--surface);}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:460px;}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
tr:last-child td{border-bottom:0;}
.contact{font-family:var(--mono); font-size:15px; user-select:all; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:3px 8px;}
footer{padding:0 20px;}
.foot{max-width:68ch; margin:0 auto; border-top:1px solid var(--line); padding-block:18px 32px; color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:8px 18px;}
.foot a{color:var(--muted);}
/* landing */
.hero{max-width:960px; margin:0 auto; padding-block:64px 40px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
@media (max-width:760px){ .hero{grid-template-columns:1fr; padding-block:40px 24px;} }
.hero h1{font-size:clamp(34px,6vw,54px); font-weight:500;}
.hero p.lede{font-size:18px; color:var(--muted); margin:14px 0 22px; max-width:44ch;}
.badge{display:inline-block; background:var(--slate); color:var(--slate-ink); border-radius:999px; padding:10px 20px; font-weight:500; font-size:15px;}
.pair{display:flex; justify-content:center; align-items:center;}
.dot{width:150px; height:150px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:34px; color:var(--slate-ink); border:5px solid var(--bg);}
.dot.a{background:var(--slate); margin-right:-26px; z-index:1;}
.dot.b{background:var(--terra);}
@media (max-width:420px){ .dot{width:118px; height:118px; font-size:28px;} }
.reveal{background:var(--surface); border:1px solid var(--card-line); border-radius:22px; padding:22px; margin-top:20px; text-align:center; box-shadow:0 6px 24px rgba(40,40,60,.08);}
.reveal .where{font-weight:600; font-size:18px;}
.reveal .when{color:var(--muted); font-size:14px;}
.steps{max-width:960px; margin:0 auto; padding-block:12px 56px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .steps{grid-template-columns:1fr;} }
.step{background:var(--surface); border:1px solid var(--card-line); border-radius:18px; padding:20px;}
.step .n{font-size:13px; color:var(--muted); font-weight:500;}
.step h3{margin:4px 0 6px; font-size:18px;}
.step p{margin:0; color:var(--muted); font-size:15px;}
/* invite */
.invite{max-width:560px; margin:0 auto; padding-block:48px 64px; display:flex; flex-direction:column; gap:22px; text-align:center;}
.invite h1{font-size:clamp(30px,6vw,42px);}
.invite .lede{font-size:18px; color:var(--muted); margin:0;}
.card{background:var(--surface); border:1px solid var(--card-line); border-radius:20px; padding:22px; text-align:left; box-shadow:0 6px 24px rgba(40,40,60,.06);}
.card ol{margin:0; padding-left:22px;}
.card li{margin-bottom:10px;}
.code{font-family:var(--mono); font-weight:600; font-size:20px; letter-spacing:.06em; background:var(--bg); border:1px dashed var(--line); border-radius:10px; padding:6px 12px; display:inline-block; user-select:all;}
.cta{display:inline-block; background:var(--slate); color:var(--slate-ink); border-radius:999px; padding:14px 26px; font-weight:500; font-size:17px; text-decoration:none;}
.cta:hover{filter:brightness(1.05);}
.note{font-size:14px; color:var(--muted); margin:0;}