/* ===========================================================================
   /resources/ - the free guides and the form that emails one.
   Brand tokens come from ../styles.css; the form mirrors /privacy-choices/ so the
   site's public forms look and behave alike. Wiring lives in wireResourceGuides()
   in landing/main.js (it needs the page's analytics sink).
   =========================================================================== */

.rg-grid { margin-top: 8px; }

.rg-card { display: flex; flex-direction: column; }
.rg-card.is-picked { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.rg-card__audience {
  margin: 14px 0 0;
  color: var(--red-bright);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rg-card .card__title { margin-top: 6px; }
.rg-card__meta { margin: 12px 0 0; color: var(--text-2); font-size: 0.88rem; }
.rg-card__cta { margin-top: 18px; align-self: flex-start; }

/* ── The form ─────────────────────────────────────────────────────────── */
.rg-form-wrap { max-width: 40rem; }

.rg-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 24px;
}

.rg-form__label {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rg-form__label[hidden] { display: none; }

.rg-form__input {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}
.rg-form__input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
select.rg-form__input { appearance: none; cursor: pointer; }

.rg-form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.94rem;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1.55;
}
.rg-form__check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--red);
  flex: none;
  cursor: pointer;
}
.rg-form__check input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Honeypot: visually removed, still in the DOM for bots. */
.rg-form__hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.rg-form__error {
  margin: 0;
  color: var(--red-bright);
  font-size: 0.94rem;
}
.rg-form__cta { align-self: flex-start; }
.rg-form__fine { margin: 0; color: var(--text-2); font-size: 0.84rem; line-height: 1.55; }
.rg-form__fine a, .rg-help a { color: var(--red-bright); text-decoration: underline; }

/* ── Sent ─────────────────────────────────────────────────────────────── */
.rg-done {
  margin-top: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--red);
  border-radius: var(--r-lg);
  padding: 24px;
}
.rg-done:focus { outline: none; }
.rg-done__title { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--text); }
.rg-done__body { margin: 8px 0 18px; color: var(--text-2); line-height: 1.65; }

.rg-help { margin-top: 28px; }

@media (max-width: 560px) {
  .rg-form, .rg-done { padding: 20px 16px; }
  .rg-form__cta { align-self: stretch; }
}