/* ClearTake coming-soon page. Colors and type from brand/BRAND.md. */
:root {
  --night: #0E0F12; --ink: #16181C; --line: #2A2E35; --fg: #ECEDEF; --fg-dim: #9BA1AB; --green: #2BD67B;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-var.woff2") format("woff2"); font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--night); color: var(--fg); font-family: var(--display); font-size: 1.0625rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; display: grid; grid-template-rows: 1fr auto;
}
main {
  display: grid; place-items: center; text-align: center;
  padding: 4rem max(16px, env(safe-area-inset-right, 0px)) 3rem max(16px, env(safe-area-inset-left, 0px));
}
.card { display: grid; justify-items: center; gap: 1.6rem; max-width: 40rem; }
.lockup { display: flex; align-items: center; gap: 0.8rem; }
.lockup svg { width: 64px; height: 64px; }
.lockup span { font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.2rem); letter-spacing: -0.03em; line-height: 1; }
h1 {
  margin: 0; font-weight: 800; font-stretch: 86%; letter-spacing: -0.03em; line-height: 0.98;
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
}
h1 .ok { color: var(--green); }
p { margin: 0; color: #C9CDD3; max-width: 34rem; text-wrap: balance; }
.tc { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--fg-dim); text-transform: uppercase; }
footer {
  border-top: 1px solid var(--line); color: var(--fg-dim); font-size: 0.875rem; text-align: center;
  padding: 1.4rem max(16px, env(safe-area-inset-right, 0px)) calc(1.4rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #4A4F57; }
footer a:hover { color: var(--fg); text-decoration-color: var(--fg); }
a:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.back { color: inherit; }