/* DrawMate landing: layout only. Colour, type and every control come from the kit (kit/kit.css,
   glyphs.css); nothing here is a colour value and nothing animates. One column, no cards, no JavaScript. */

[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
a { color: inherit; text-underline-offset: 3px; }

.bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 2ch;
  min-height: 49px; padding: max(4px, env(safe-area-inset-top)) 16px 4px; background: var(--bg); border-bottom: 1px solid var(--line);
  text-transform: uppercase;
}
.bar > * { white-space: nowrap; }

/* A text button: sentence case, underlined, a 44 px target. */
.textLink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--muted);
  font-family: var(--sans); font-size: 15px; text-transform: none; text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) { .textLink:hover { color: var(--text); } }
.textLink:active { color: var(--text); }

.land { max-width: 600px; margin: 0 auto; padding: 44px 16px max(44px, env(safe-area-inset-bottom)); display: grid; gap: 33px; justify-items: start; min-height: calc(100dvh - 49px); align-content: center; }
.land h1 { margin: 0; font-size: var(--t-l); line-height: 1.1; font-weight: normal; text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; }

.steps { list-style: none; margin: 0; padding: 0; width: 100%; font-family: var(--sans); font-size: 18px; line-height: 1.45; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 4ch 1fr; padding: 12px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: var(--t-s); color: var(--ok); }

.fine { margin: 0; max-width: 52ch; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 2ch; width: 100%; }
.go .button { flex: 1 1 200px; }
.big { min-height: 56px; font-size: var(--t-m); }
.safety a { color: var(--text); }

@media (max-width: 480px) {
  .land { padding-top: 33px; align-content: start; }
  .land h1 { font-size: var(--t-m); }
  .big { font-size: var(--t-s); }
}

/* Full safety rules, folded (same text as the app's safety step). */
.land .rules { width: 100%; margin-top: 11px; }
.land .rulesBody p { margin: 0 0 10px; max-width: 65ch; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--muted); text-transform: none; text-wrap: pretty; }
.land .rulesBody b { font-weight: 650; color: var(--text); }