/* Form pages: trial experience and contact. Layout only, tokens live in base.css. */

.form-layout {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 900px) {
  .form-layout { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}

.form-panel {
  padding: var(--space-8);
  background: var(--surface-tint);
  border: var(--hairline);
  border-radius: var(--radius-card);
}

@media (min-width: 900px) {
  .form-panel { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.form-panel h2 { margin-bottom: var(--space-6); }

.form-panel fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }

.form-panel legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
}

.radio-card span { font-weight: 600; }

/* Reassurance list */
.tick-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.tick-list li {
  position: relative;
  padding-left: var(--space-8);
  color: var(--text-body);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.7em;
  height: 0.4em;
  border-left: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  transform: rotate(-45deg);
}

/* Contact page cards */
.contact-methods {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

@media (min-width: 640px) {
  .contact-methods { grid-template-columns: repeat(3, 1fr); }
}

.contact-method {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-method:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }

.contact-method .label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.contact-method .value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
}