:root{
  --bg:#f8f4ee; --panel:#fff; --line:#e6ddd0; --text:#2a211a; --muted:#74675a; --accent:#c9500a; --accent-2:#ac4509; --wash:#fbe1c9;
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text); font:17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}
a{color:var(--accent-2)}
.wrap{max-width:860px; margin:0 auto; padding:0 20px}
.top{position:sticky; top:0; z-index:5; background:rgba(248,244,238,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--text); text-decoration:none}
.brand span:last-child{color:var(--accent)}
.brand .rosie{width:30px; height:30px; display:inline-grid}
.brand .rosie svg{width:100%; height:100%}
.top nav{display:flex; gap:4px; flex-wrap:wrap}
.top nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:15px; padding:6px 10px; border-radius:8px}
.top nav a[aria-current="page"], .top nav a:hover{color:var(--text); background:#efe7dc}
footer{margin-top:64px; border-top:1px solid var(--line); padding:24px 0 40px; color:var(--muted); font-size:14px}
footer p{margin:6px 0}
footer a{color:var(--muted)}

/* legal documents */
.doc{padding:36px 0 0; max-width:720px}
.doc h1{font:800 clamp(30px, 6vw, 42px)/1.1 var(--display); letter-spacing:-.03em; margin:0 0 6px}
.doc h2{font-size:21px; line-height:1.3; margin:36px 0 8px; letter-spacing:-.01em}
.doc h3{font-size:18px; margin:24px 0 6px}
.doc p, .doc li{color:#3b3027}
.doc ul{padding-left:22px}
.doc li{margin:4px 0}
.doc hr{border:0; border-top:1px solid var(--line); margin:36px 0 12px}
.doc code{background:#f2ece3; padding:1px 5px; border-radius:5px; font-size:.9em}
.table{overflow-x:auto; margin:14px 0; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:15px; line-height:1.45}
th, td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line)}
th{background:#f4ede3; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
tr:last-child td{border-bottom:0}

/* home */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; padding:48px 0 12px}
.eyebrow{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); background:var(--wash); padding:5px 11px; border-radius:999px; margin-bottom:16px}
.hero h1{font:800 clamp(40px, 8vw, 66px)/1 var(--display); letter-spacing:-.04em; margin:0}
.hero h1 em, .band h2 em, .row h2 em, .cta h2 em{font-style:normal; color:var(--accent)}
.hero p{font-size:19px; color:var(--muted); margin:18px 0 0; max-width:34ch}
.fine{font-size:14px; color:var(--muted); margin-top:10px}
.band{margin-top:88px}
.band > h2, .row h2{font:800 clamp(28px, 5vw, 40px)/1.08 var(--display); letter-spacing:-.03em; margin:0 0 10px}
.band > p.lede{font-size:18px; color:var(--muted); margin:0 0 24px; max-width:52ch}
.steps{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; counter-reset:step}
.step{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px}
.step::before{counter-increment:step; content:counter(step); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; margin-bottom:12px}
.step b{display:block; font-size:18px; margin-bottom:4px}
.step span{color:var(--muted); font-size:15px; line-height:1.5}
.row{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:88px}
.row.flip .phone{order:-1}
.row p{font-size:18px; color:var(--muted); margin:0}
.row ul{margin:16px 0 0; padding:0; list-style:none}
.row li{padding:6px 0 6px 28px; position:relative; color:#3b3027}
.row li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:800}
.phone{display:flex; justify-content:center}
.phone img{width:100%; max-width:260px; height:auto; border-radius:28px; border:6px solid #2a211a; box-shadow:0 30px 60px -24px rgba(80,40,10,.5)}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.compare > div{border-radius:16px; padding:20px; border:1px solid var(--line)}
.compare .them{background:#f2ece3}
.compare .us{background:var(--panel); border-color:#efc9a6; box-shadow:0 12px 30px -20px rgba(201,80,10,.5)}
.compare h3{margin:0 0 8px; font-size:17px}
.compare ul{margin:0; padding-left:20px}
.compare li{margin:6px 0; font-size:15px}
.compare .them li{color:var(--muted)}
.rosie-band{display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; background:radial-gradient(120% 120% at 0% 0%, #f0782a 0%, #d85a0e 50%, #b8440a 100%); color:#fff; border-radius:24px; padding:32px}
.rosie-band .big{width:120px; height:120px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
.rosie-band .big svg{width:100%; height:100%}
.rosie-band h2{font:800 clamp(26px, 4.5vw, 36px)/1.1 var(--display); letter-spacing:-.03em; margin:0 0 8px}
.rosie-band p{margin:0; color:rgba(255,241,228,.92); font-size:17px}
.quote{display:inline-block; margin-top:14px; background:rgba(255,255,255,.16); border-radius:14px 14px 14px 4px; padding:10px 14px; font-size:15px}
.plans{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px}
.plan{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; position:relative}
.plan.best{border:2px solid var(--accent)}
.plan .tag{position:absolute; top:-12px; right:16px; background:var(--accent); color:#fff; font-size:12px; font-weight:800; letter-spacing:.04em; padding:3px 10px; border-radius:999px}
.plan h3{margin:0; font-size:16px; color:var(--muted); font-weight:700}
.plan .price{font:800 34px/1.1 var(--display); letter-spacing:-.03em; margin:6px 0 4px}
.plan .price small{font-size:15px; font-weight:600; color:var(--muted); letter-spacing:0}
.plan p{margin:0; font-size:15px; color:var(--muted)}
.cta{text-align:center; background:var(--wash); border-radius:24px; padding:44px 24px}
.cta h2{font:800 clamp(30px, 6vw, 46px)/1.05 var(--display); letter-spacing:-.04em; margin:0}
.cta p{color:#5e4f42; font-size:18px; margin:10px 0 0}
.appstore{display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:10px 18px; border-radius:14px; background:#000; color:#fff; font-weight:600; font-size:19px; line-height:1.15; text-decoration:none}
.appstore:hover{background:#2a211a}
.appstore small{display:block; font-weight:500; opacity:.8; font-size:12px}
.shots{display:flex; gap:12px; justify-content:center}
.shots img{width:48%; max-width:220px; height:auto; border-radius:18px; box-shadow:0 20px 40px -18px rgba(80,40,10,.45)}
.shots img:nth-child(2){transform:translateY(28px)}
.features{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:56px}
.feature{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px}
.feature b{display:block; font-size:17px; margin-bottom:4px}
.feature span{color:var(--muted); font-size:15px; line-height:1.5}
.legal-links{margin-top:36px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px 20px}
.legal-links h2{font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 8px}
.legal-links a{font-weight:600}

/* support */
.support{padding:36px 0 0; max-width:720px}
.support h1{font:800 clamp(32px, 6vw, 46px)/1.05 var(--display); letter-spacing:-.03em; margin:0}
.contact{margin:22px 0 30px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px 20px}
.contact b{display:block; font-size:18px}
details{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:10px 0}
summary{font-weight:700; cursor:pointer}
details p{margin:10px 0 2px; color:#3b3027}

@media (max-width: 720px){
  .hero{grid-template-columns:1fr; padding-top:32px}
  .features, .steps, .compare, .plans{grid-template-columns:1fr}
  .band, .row{margin-top:64px}
  .row{grid-template-columns:1fr; gap:24px}
  .row.flip .phone{order:0}
  .phone img{max-width:220px}
  .rosie-band{grid-template-columns:1fr; text-align:center; padding:28px 22px}
  .rosie-band .big{margin:0 auto; width:96px; height:96px}
  .plan .tag{right:auto; left:16px}
}