/* The pages that come before the app: signing in, opening a business,
   joining one, linking a computer. The same look as the website: warm paper,
   ink type, marigold for the one thing to press. Flat surfaces and hairlines.
   Corners from one scale (6, 10, 16, 22). Nothing pill-shaped, nothing glows. */
:root {
  color-scheme: light;
  --paper: #f4f3ef; --paper-2: #ebeae4; --surface: #ffffff;
  --ink: #16171a; --text: #2a2c31; --muted: #54565e; --dim: #8a8c95;
  --line: rgba(22, 23, 26, 0.11); --line-2: rgba(22, 23, 26, 0.22);
  --accent: #ecb22a; --accent-soft: #f8e7b4; --accent-ink: #2f2200;
  --bad: #b94132; --bad-tint: #f8e2dd; --good: #1b7d4e; --good-tint: #dcefe3;
  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-4: 22px;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100dvh; color: var(--text); background: var(--paper); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: #f6d77d; color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* the page: the form on the left, what Extolly promises on the right */
.frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); min-height: 100dvh; }
.main { display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 64px) 32px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; text-decoration: none; align-self: flex-start; }
.brand svg { display: block; }
.stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.box { width: 100%; max-width: 420px; }
.foot { color: var(--dim); font-size: 13px; }
.foot a { color: var(--muted); }

.side { margin: 16px 16px 16px 0; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-4); background: var(--accent); color: var(--accent-ink); display: flex; flex-direction: column; justify-content: flex-end; }
.side h2 { max-width: 14ch; font-size: clamp(30px, 3.3vw, 46px); font-weight: 600; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.side ul { margin-top: 28px; display: grid; gap: 12px; }
.side li { padding: 14px 16px; border-radius: var(--r-2); background: rgba(255, 255, 255, 0.42); font-size: 15px; line-height: 1.45; }
.side li b { display: block; font-weight: 600; }

/* type */
.title { color: var(--ink); font-size: clamp(28px, 3vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; }
.lead { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.lead b { color: var(--ink); font-weight: 600; word-break: break-word; }
.fine { margin-top: 16px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.fine a, .link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.link { background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.link:disabled { color: var(--dim); cursor: default; text-decoration: none; font-weight: 400; }

/* a form */
.form { margin-top: 28px; display: grid; gap: 14px; }
.form label { display: grid; gap: 7px; color: var(--ink); font-size: 14px; font-weight: 600; }
.field { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 400; outline: none; transition: border-color 0.15s; }
.field::placeholder { color: var(--dim); }
.field:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border: 0; border-radius: var(--r-2); background: var(--ink); color: #fff; font-size: 15.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.1s; }
.btn:hover { background: #2b2e34; }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: #b9bac0; cursor: default; }
.btn.wide { width: 100%; }
.btn.quiet { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.quiet:hover { background: var(--paper-2); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

/* six boxes for a code */
.code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.code input { width: 100%; height: 60px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); color: var(--ink); font: 600 26px/1 var(--mono); text-align: center; outline: none; }
.code input:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.code.letters input { text-transform: uppercase; }

/* said back to the person */
.note { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-2); font-size: 14.5px; line-height: 1.5; }
.note.bad { background: var(--bad-tint); color: #7c261b; }
.note.good { background: var(--good-tint); color: #0f5a36; }
.note.plain { background: var(--paper-2); color: var(--text); }

/* a few facts on a tinted panel */
.facts { margin-top: 22px; padding: 6px 18px 18px; border-radius: var(--r-2); background: var(--paper-2); }
.facts div { margin-top: 12px; }
.facts dt, .facts small { display: block; color: var(--muted); font-size: 12.5px; }
.facts dd, .facts b { display: block; margin: 2px 0 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.facts span { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 400; }

/* steps, in order */
.steps { margin-top: 24px; display: grid; gap: 16px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; counter-increment: step; }
.steps li::before { content: counter(step); width: 28px; height: 28px; border-radius: var(--r-1); background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 600; line-height: 28px; text-align: center; }
.steps b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; padding-top: 2px; }
.steps span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; }

.invites { margin-top: 22px; display: grid; gap: 10px; }
.invite { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.invite b { display: block; color: var(--ink); font-weight: 600; }
.invite span { display: block; color: var(--muted); font-size: 13.5px; }
.or { margin: 26px 0 0; color: var(--dim); font-size: 13px; }

@media (max-width: 900px) {
  .frame { grid-template-columns: 1fr; }
  .side { display: none; }
  .stage { align-items: flex-start; padding-top: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }