/*
  Prose and forms: the terms, privacy and refunds pages, the contact page, the 404 page,
  and the two tools (which load this file for their text and inputs). site.css holds the
  page opener and everything shared. Text keeps to about 70 characters a line.
  Colours come only from design-tokens.css.
*/
.prose {
  padding-block: 40px 72px;
}
.prose > * {
  max-width: 70ch;
}
.prose > * + * {
  margin-top: 16px;
}
.prose > h2 {
  margin-top: 48px;
  font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.5rem);
}
.prose > h2 + * {
  margin-top: 12px;
}
.prose h3 {
  margin-bottom: 8px;
  font-size: 1.375rem;
}
.policy-meta {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--quiet);
}
/* .card is a grid for stacked content; this banner is one paragraph with inline links, so
   it must stay a block or every text run and link becomes its own row. */
.legal-banner {
  display: block;
  background: var(--primary-soft);
}
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.prose > .actions {
  margin-top: 32px;
  max-width: none;
}

/* the 404 page: links as outlined rows */
.ruled.links {
  display: grid;
  gap: 12px;
  max-width: none;
}
.ruled.links li {
  max-width: none;
  padding: 0;
}
.ruled.links li::before {
  display: none;
}
.ruled.links a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 20px;
  border: 3px solid var(--text);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease-out;
}
.ruled.links a:hover {
  transform: translate(-2px, -2px);
}

/* the contact page */
.contact-grid {
  display: grid;
  gap: 48px;
  align-items: start;
  padding-block: 48px 72px;
}
.contact-try {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 3px dashed var(--text);
}
.contact-try h2 {
  font-size: 1.75rem;
}
.contact-try .action {
  margin-top: 4px;
}
.contact-note {
  max-width: 52ch;
}

/* labels stay visible above every field; an invalid field turns red and says what is wrong
   next to itself. The words come from CSS, and the browser's own message still speaks. */
.contact-form {
  gap: 20px;
  padding: 32px;
}
.contact-form label,
.calc-fields label {
  display: grid;
  gap: 8px;
  font-weight: 700;
}
.contact-form input,
.contact-form select,
.contact-form textarea,
.calc-fields input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 3px solid var(--text);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
}
.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}
.contact-form :user-invalid,
.calc-fields :user-invalid {
  border-color: var(--error);
  background: var(--error-soft);
}
.contact-form label:has(select:user-invalid)::after {
  content: "Choose what this is about." / "";
}
.contact-form label:has(textarea:user-invalid)::after {
  content: "Write your message first." / "";
}
.calc-fields label:has(:user-invalid)::after {
  content: "Enter a number in range." / "";
}
.contact-form label:has(:user-invalid)::after,
.calc-fields label:has(:user-invalid)::after {
  color: var(--error);
  font-size: 0.9375rem;
}
.form-note {
  font-size: 0.9375rem;
  color: var(--quiet);
}
.form-success {
  padding: 12px 16px;
  border: 3px solid var(--text);
  border-radius: 14px;
  background: var(--success-soft);
  color: var(--success);
  font-weight: 700;
}
@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
  }
  .ruled.links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}