/* The calm look of the company website. Its colors are in theme.css. */
:root {
  --radius: 10px;
  --dialog-radius: 12px;
  --dialog-width: 460px;
}

h2 { font: 700 30px/1.2 var(--sans); }
a { color: var(--accent); }

.card p { color: var(--text-2); }

.btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: 600 15px/1.4 var(--sans);
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line); }
.btn-small { padding: 6px 12px; font-size: 14px; }

/* --- Homepage --- */

.hero h1 { font: 700 48px/1.1 var(--sans); }

/* --- Traps --- */

.trap-promo { border-top: 4px solid var(--jack-purple); }
.promo-title { font-weight: 700; color: var(--jack-purple); }
.trap-notice, .trap-form, .trap-qr { border-left: 4px solid var(--accent); }
.notice-title { font-weight: 700; }
.survey-answer:hover { border-color: var(--accent); }
.qr-button { color: var(--text); }
.chat-bubble { background: var(--bg); }

/* --- Result cards and settings --- */

dialog::backdrop { background: var(--backdrop); }
.result { gap: 12px; }
.settings { gap: 16px; }
.result.caught, .result.spotted { border-top: 6px solid var(--tone); }
.result-headline { font: 700 26px/1.2 var(--sans); color: var(--tone); }
.result-label {
  font: 700 12px/1.4 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.attacker-gets {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-left: 3px solid var(--tone);
  border-radius: 4px;
  background: color-mix(in oklab, var(--tone) 10%, var(--surface));
}
.result-head, .result-head > div { display: grid; gap: 12px; }
.result > .btn { margin-top: 4px; }
.setting input:checked::after { background: var(--surface); }

/* --- Motion --- */

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: translate 0.15s ease-out, box-shadow 0.15s ease-out; }
  .btn:hover { translate: 0 -2px; box-shadow: 0 6px 14px var(--shadow); }
}

/* --- Phone --- */

@media (max-width: 760px) {
  .hero h1 { font-size: 34px; }
  h2 { font-size: 26px; }
}