/* Hallmark · shape: the first-run test, then the app's own story · genre: editorial · theme: custom · job: try · idea: "The page asks the app's first question: your phone is dead, whose number can you still type?" · vibe: "a fire drill you can do on a keypad"
 * paper: oklch(98.5% 0.007 17) · accent: oklch(50.7% 0.194 9) · display: Gabarito (the app's own face, inherited) · body: Gabarito · hero: the app's dark first screen with a working keypad beside the question · nav: wordmark and two quiet links, no button, because the app is not in the store yet · footer: wordmark, three links and the year on one band · imagery: the product, 2 simulator screenshots (data-kind product) plus the keypad and the round rows built live · signature: the keypad test in the hero
 * axes: light/grotesk-heavy/warm · posture: full palette (ink field for the hero and the privacy band, raspberry signal, amber only for the keypad action, as in the app) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a product page argues little; the hero makes the visitor fail or pass the test before any claim */
/* Hallmark · waive 77 · the close is one line and the support email, once on the page · the app is not in the store yet, so the close cannot carry a download */
/* Hallmark · waive 79 · the keypad panel ends at y 690 of 900, the text column is shorter than the keypad beside it · the keypad test is the hero visual and sets its height */
/* Hallmark · dismissed 58 · the 87 words sit in the privacy band of four short facts, each a title and one line */
/* Hallmark · dismissed F4 · the filled squares in the hero are the twelve keys of the keypad test, not competing actions */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Chrome ---------- */

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.wordmark:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: var(--space-lg);
}
.nav-links, .footer-links {
  display: flex;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a, .footer-links a {
  text-decoration: none;
  padding-block: var(--space-xs);
}
.nav-links a:hover, .footer-links a:hover { text-decoration: underline; }
.nav-links a:active, .footer-links a:active { opacity: 0.7; }

/* ---------- Hero: the app's first screen ---------- */

.hero {
  background: var(--color-field);
  color: var(--color-field-ink);
  padding-bottom: var(--space-3xl);
}
.hero :focus-visible { outline-color: var(--color-focus-field); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-top: var(--space-xl);
}
.hero h1 {
  font-size: clamp(3.25rem, 6.5vw + 0.5rem, 7.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  max-width: 10ch;
}
.lede {
  margin-top: var(--space-lg);
  font-size: var(--text-lead);
  color: var(--color-field-muted);
  max-width: 34ch;
}
.hero-actions { margin-top: var(--space-xl); }
.store {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-amber);
}

.tester {
  background: var(--color-field-2);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  max-width: 440px;
  width: 100%;
  justify-self: end;
}
.slots {
  min-height: 72px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
}
.slot-group { display: flex; gap: var(--space-2xs); }
.slot {
  width: 1.15em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  text-align: center;
  border-bottom: 3px solid var(--color-field-3);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.slot.is-filled { border-bottom-color: var(--color-amber); }
.slots-empty {
  font-size: var(--text-lg);
  color: var(--color-field-muted);
}
.tester-note {
  text-align: center;
  color: var(--color-field-muted);
  min-height: 3lh;
  font-size: var(--text-md);
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}
.key {
  min-height: 64px;
  border: 0;
  border-radius: var(--radius-key);
  background: var(--color-field-3);
  color: var(--color-field-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
  touch-action: manipulation;
}
.key:hover { background: color-mix(in oklab, var(--color-field-3) 80%, var(--color-field-ink)); }
.key:active { transform: scale(0.96); }
.key:focus-visible { outline: 2px solid var(--color-focus-field); outline-offset: 2px; }
.key:disabled { opacity: 0.55; cursor: not-allowed; }
.key:disabled:active { transform: none; }
.key-delete { background: transparent; }
.key-delete:hover { background: var(--color-field-3); }
.tester-action {
  min-height: 52px;
  border-radius: var(--radius-pill);
  border: 0;
  background: transparent;
  color: var(--color-field-ink);
  font-weight: 800;
  font-size: var(--text-md);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.tester-action:hover { background: var(--color-field-3); }
.tester-action:active { transform: scale(0.98); }
.tester-action:focus-visible { outline: 2px solid var(--color-focus-field); outline-offset: 2px; }
.tester-action:disabled { opacity: 0.55; cursor: not-allowed; }
.tester-action.is-ready { background: var(--color-amber); color: var(--color-amber-ink); }
.tester-action.is-ready:hover { background: color-mix(in oklab, var(--color-amber) 88%, var(--color-field-ink)); }

/* ---------- Sections ---------- */

main h2 {
  font-size: var(--text-section);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  max-width: 16ch;
}
main p { font-size: var(--text-lead); }

.shot {
  margin: 0;
  border-radius: var(--radius-card);
  outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent);
  outline-offset: -1px;
}
.shot > img { object-position: top center; }
.shot-home { aspect-ratio: 804 / 893; width: 100%; max-width: 520px; }
.shot-drill { aspect-ratio: 804 / 1748; height: 680px; }

.count {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--section-gap);
}
.count-text p { margin-top: var(--space-lg); color: var(--color-muted); max-width: 46ch; }
.count .shot { justify-self: end; }

.rounds {
  background: var(--color-paper-2);
  padding-block: var(--section-gap-s);
}
.rounds-intro { margin-top: var(--space-md); color: var(--color-muted); max-width: 52ch; }
.round-list {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
}
.round-list li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.round-list li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.round-name { color: var(--color-muted); font-size: var(--text-md); }
.digits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  font-variant-numeric: tabular-nums;
}
.digits .slot { border-bottom-color: var(--color-rule); font-size: inherit; color: var(--color-ink); }
.digits .slot.is-blank { color: transparent; border-bottom-color: var(--color-accent); }
.round-list li:last-child .round-name { color: var(--color-accent); font-weight: 800; }

.wait { padding-block: var(--section-gap); }
.wait-intro { margin-top: var(--space-md); color: var(--color-muted); max-width: 52ch; }
.intervals {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.intervals li {
  padding-inline: var(--space-lg);
  border-left: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-lg);
  color: var(--color-muted);
}
.intervals li:first-child { padding-left: 0; border-left: 0; }
.intervals li:last-child { padding-right: 0; }
.intervals .figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-figure);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.wait-note {
  margin-top: var(--space-2xl);
  font-weight: 800;
  color: var(--color-accent-deep);
  max-width: 44ch;
}

.kinds {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-bottom: var(--section-gap);
}
.kinds .shot { justify-self: start; }
.kind-list, .private-list { margin: var(--space-xl) 0 0; display: grid; }
.kind-list > div, .private-list > div {
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.kind-list dt, .private-list dt { font-weight: 800; font-size: var(--text-title); }
.kind-list dd, .private-list dd { margin: var(--space-2xs) 0 0; color: var(--color-muted); font-size: var(--text-lead); }

.private {
  background: var(--color-field);
  color: var(--color-field-ink);
  padding-block: var(--section-gap-s);
}
.private-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
}
.private h2 { color: var(--color-field-ink); }
.private-list { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
.private-list > div { border-top-color: var(--color-field-3); }
.private-list dd { color: var(--color-field-muted); }

.close { padding-block: var(--section-gap); }
.close p { margin-top: var(--space-lg); color: var(--color-muted); max-width: 48ch; }
.close a, .prose a { color: var(--color-accent-deep); font-weight: 800; }
.close a:hover, .prose a:hover { text-decoration-thickness: 2px; }
.close a:active, .prose a:active { opacity: 0.7; }

.footer {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-xl);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.footer-links { flex-wrap: wrap; }
.footer-note { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- Text pages: privacy and support ---------- */

.page-head {
  background: var(--color-field);
  color: var(--color-field-ink);
  padding-bottom: var(--space-2xl);
}
.page-head h1 {
  padding-top: var(--space-2xl);
  font-size: var(--text-display-s);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}
.page-head p { margin-top: var(--space-md); color: var(--color-field-muted); font-size: var(--text-lead); }
.page-head :focus-visible { outline-color: var(--color-focus-field); }
.head-link { color: var(--color-amber); font-weight: 800; }
.head-link:hover { text-decoration-thickness: 2px; }
.head-link:active { opacity: 0.7; }
.prose { padding-block: var(--space-3xl); }
.prose > * { max-width: 68ch; }
.prose h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-top: var(--space-2xl);
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: var(--text-md); line-height: 1.7; }
.prose p { margin-top: var(--space-md); }
.prose ul { margin: var(--space-md) 0 0; padding-left: var(--space-lg); }
.prose li + li { margin-top: var(--space-xs); }

/* ---------- Responsive ---------- */

@media (max-width: 60rem) {
  .hero-grid, .count, .kinds, .private-grid { grid-template-columns: minmax(0, 1fr); }
  .tester { justify-self: start; }
  .count .shot { justify-self: start; }
  .kinds .shot { height: 560px; }
  .kinds .shot { order: 2; }
  .intervals { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .intervals li:nth-child(4) { padding-left: 0; border-left: 0; }
  .private-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .nav-links { gap: var(--space-md); }
  .nav .wordmark { font-size: var(--text-md); }
  .round-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .digits { gap: var(--space-xs); font-size: var(--text-xl); flex-wrap: nowrap; }
  .kinds .shot { height: 480px; }
}
@media (max-width: 23rem) {
  .digits { font-size: var(--text-lg); gap: var(--space-2xs); }
  .tester { padding: var(--space-md); }
}