/* CASA: one page, white like the app (owner's choice), ink text and one accent. No motion, no effects.
   Fonts: Unbounded + Hanken Grotesk, none of the first club's (owner, 27 Oct 2026). Unbounded is wide: sizes a step down. */
:root { --bg: #F6F7F8; --fg: #0D0F12; --muted: #5E636B; --line: #E2E4E7; --accent: #7A8CA3; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--fg); font: 400 17px/1.55 "Hanken Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(16px, 5vw, 56px); }
.mark { font: 800 1.05rem/1 "Unbounded", sans-serif; text-decoration: none; letter-spacing: .02em; }
.top-link { color: var(--muted); text-decoration: none; font-size: .95rem; }
.top-link:hover, .top-link:focus-visible { color: var(--fg); }
main { padding: 0 clamp(16px, 5vw, 56px); }
.hero { min-height: 72svh; display: grid; align-content: center; gap: 1.2rem; max-width: 46rem; }
h1 { margin: 0; font: 800 clamp(2.8rem, 11vw, 6.5rem)/.95 "Unbounded", sans-serif; letter-spacing: -.035em; }
.line { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: var(--muted); }
.btn { justify-self: start; margin-top: .6rem; display: inline-block; padding: .95rem 1.6rem; border-radius: 999px; background: var(--fg); color: #FFFFFF; font-weight: 600; text-decoration: none; }
.btn:hover { background: #2A2F37; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.how { border-top: 1px solid var(--line); padding: 3rem 0 4rem; max-width: 46rem; }
.how h2 { margin: 0 0 1.4rem; font: 600 1.4rem/1.2 "Unbounded", sans-serif; }
.how ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; counter-reset: s; }
.how li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; color: var(--muted); }
.how li::before { content: counter(s); color: var(--accent); font-weight: 600; }
.how b { color: var(--fg); font-weight: 600; }
.foot { border-top: 1px solid var(--line); padding: 1.4rem clamp(16px, 5vw, 56px) 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; color: var(--muted); font-size: .9rem; }
.foot p { margin: 0; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--fg); }
.doc { max-width: 42rem; padding: 2rem 0 4rem; }
.doc h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.doc h2 { font: 600 1.15rem/1.3 "Unbounded", sans-serif; margin: 2rem 0 .5rem; }
.doc p, .doc li { color: var(--muted); }
.btn-line { display: inline-flex; align-items: center; height: 40px; padding: 0 1.1rem; border: 1px solid #8E8E96; border-radius: 999px; background: #fff; color: var(--fg); font-weight: 600; font-size: .95rem; text-decoration: none; }
.btn-line:hover { border-color: var(--fg); }