/* Lock In website. Same palette and rounded type as the app. */
:root {
  --bg: #F3F0E9; --surface: #FBFAF6; --ink: #212624; --muted: #676E6B;
  --sage: #739A81; --sage-text: #4B6F57; --sage-soft: #E2EAE2; --line: #DAD8CF; --on-accent: #FFFFFF;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #131716; --surface: #1D2321; --ink: #ECEEEA; --muted: #A2AAA5;
    --sage: #9CC3A7; --sage-text: #9CC3A7; --sage-soft: #26322B; --line: #333B37; --on-accent: #131716; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; }
a { color: var(--sage-text); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--sage-text); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 720px; margin: 0 auto; padding-inline: 20px; }
header.site { padding-block: 20px; }
header.site .wrap, footer.site .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--ink); text-decoration: none; }
.mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(180deg, #9DBBA6, var(--sage)); display: grid; place-items: center; }
.mark svg { width: 16px; height: 16px; fill: #fff; }
nav.site { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
nav.site a, footer.site a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 15px; }
nav.site a:hover, footer.site a:hover, nav.site a[aria-current="page"] { color: var(--ink); }
main { padding-block: 24px 72px; }
h1 { font-size: clamp(30px, 6vw, 40px); line-height: 1.15; font-weight: 800; margin: 0 0 8px; text-wrap: balance; }
h2 { font-size: 22px; font-weight: 800; margin: 40px 0 8px; text-wrap: balance; }
h3 { font-size: 18px; font-weight: 800; margin: 24px 0 4px; }
p, ul, ol { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }
.lede { color: var(--muted); font-size: 18px; margin-bottom: 8px; }
.updated { color: var(--muted); font-size: 15px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.summary { margin-block: 24px; }
.summary ul { margin: 0; }
.table { overflow-x: auto; margin-bottom: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; font: inherit; font-weight: 800; font-size: 18px;
  background: var(--sage); color: var(--on-accent); border: 0; border-radius: 999px; padding: 16px 28px; cursor: pointer; text-decoration: none; }
.btn.wide { width: 100%; }
details { border-bottom: 1px solid var(--line); padding-block: 14px; }
summary { font-weight: 800; cursor: pointer; }
details p:last-child, details ol:last-child, details ul:last-child { margin-bottom: 0; }
details > *:not(summary) { margin-top: 10px; color: var(--muted); }
footer.site { border-top: 1px solid var(--line); padding-block: 24px 40px; color: var(--muted); font-size: 15px; }
footer.site .links { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: clamp(34px, 11vw, 48px); letter-spacing: 0.14em; }
.center { text-align: center; }
.steps { text-align: left; color: var(--muted); }
.note { color: var(--muted); font-size: 15px; }