:root {
  /* Same tokens as the app's Theme.swift */
  --bg:#F5F4F1; --surface:#FFFFFF; --ink:#17181A; --muted:#5E6065; --faint:#8B8D91;
  --line:#DEDFDC; --accent:#A9691F; --accent-on:#FFFFFF; --good:#3C6E4A;
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#171614; --surface:#201F1D; --ink:#F2F0EB; --muted:#ACA9A2; --faint:#7C7A75;
  --line:#38362F; --accent:#DDA059; --accent-on:#211406; --good:#7FB78F;
} }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 system-ui,-apple-system,sans-serif; }
a { color:var(--accent); }
header,footer { max-width:60rem; margin:0 auto; padding:1.25rem 1rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; }
footer { color:var(--muted); font-size:.9rem; border-top:1px solid var(--line); margin-top:4rem; }
nav { display:flex; gap:1.25rem; flex-wrap:wrap; }
nav a { color:var(--muted); text-decoration:none; }
nav a:hover { color:var(--ink); }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--ink); text-decoration:none; font-size:1.2rem; }
.brand img { width:28px; height:28px; border-radius:7px; }
main { max-width:44rem; margin:0 auto; padding:0 1rem; }
h1 { font-size:2rem; line-height:1.2; margin:1.5rem 0 .5rem; }
h2 { font-size:1.25rem; margin:2rem 0 .5rem; }
.sub { color:var(--muted); margin-top:0; }
details { border-bottom:1px solid var(--line); padding:.9rem 0; }
summary { cursor:pointer; font-weight:600; }
details p { margin:.6rem 0 0; }

/* Marketing page */
.wide { max-width:60rem; margin:0 auto; padding:0 1rem; }
.hero { text-align:center; padding:4rem 0 2.5rem; }
.hero img.icon { width:96px; height:96px; border-radius:22px; box-shadow:0 8px 30px rgba(0,0,0,.18); }
.hero h1 { font-size:clamp(2.2rem,6vw,3.6rem); letter-spacing:-.02em; margin:1.25rem auto .75rem; max-width:18ch; }
.hero p.lead { font-size:1.25rem; color:var(--muted); max-width:36rem; margin:0 auto 1.75rem; }
.btn { display:inline-block; padding:.7rem 1.3rem; border-radius:10px; font-weight:600; text-decoration:none; border:1px solid var(--line); color:var(--ink); background:var(--surface); }
.btn.primary { background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.note { color:var(--faint); font-size:.9rem; margin-top:.9rem; }
.shot { margin:2rem auto 0; max-width:48rem; aspect-ratio:16/9; border:1.5px dashed var(--line); border-radius:14px; background:var(--surface); display:grid; place-items:center; color:var(--faint); font-size:.95rem; }
.shot img { width:100%; height:100%; object-fit:cover; border-radius:14px; }
section.block { padding:3rem 0 0; }
section.block > h2 { font-size:1.8rem; text-align:center; margin:0 0 .5rem; letter-spacing:-.01em; }
section.block > p.sub { text-align:center; max-width:36rem; margin:0 auto 2rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.25rem; }
.card h3 { margin:0 0 .35rem; font-size:1.05rem; }
.card p { margin:0; color:var(--muted); font-size:.97rem; }
.steps { counter-reset:s; list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1rem; }
.steps li { counter-increment:s; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.25rem; }
.steps li::before { content:counter(s); display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--accent); color:var(--accent-on); font-weight:700; margin-bottom:.6rem; }
.steps strong { display:block; margin-bottom:.2rem; }
.steps span { color:var(--muted); font-size:.97rem; }
.band { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:2rem 1.5rem; text-align:center; }
.band h2 { margin:0 0 .5rem; font-size:1.6rem; }
.band p { color:var(--muted); max-width:36rem; margin:.5rem auto 0; }
kbd { font:inherit; font-size:.9em; padding:.05em .45em; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; background:var(--surface); }
.hero-shot { display:block; width:auto; max-width:100%; max-height:min(60vh,540px); height:auto; margin:2.5rem auto 0; border-radius:14px; border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.2); }
.hero-wave { display:block; width:220px; max-width:60%; height:auto; margin:0 auto 1.25rem; filter:drop-shadow(0 6px 16px rgba(0,0,0,.2)); }