/* =========================================================
   Everyday Recovery — home page styles
   ---------------------------------------------------------
   How this file is organized:
     1. Brand tokens (colors, fonts, spacing)  <- change brand values here
     2. Base / reset
     3. Layout helpers (containers, sections, rows)
     4. Typography
     5. Buttons and links
     6. Shared components (cards, arches, petal lists)
     7. Page sections, top to bottom
     8. Accessibility and motion
     9. Join pop-up (age check before the paywall)
   ========================================================= */


/* ---------- 1. Brand tokens ---------- */
:root {
  /* Colors */
  --er-navy: #132538;
  --er-navy-hover: #203F5F;
  --er-petal: #8098AC;        /* decorative on light backgrounds; text OK on navy */
  --er-petal-deep: #51687B;   /* links and icons on light backgrounds */
  --er-petal-tint: #E6EBEF;
  --er-cream: #F8ECDF;
  --er-paper: #FAF6EF;
  --er-white: #FFFFFF;
  --er-ink: #1E2730;          /* body text */
  --er-slate: #3A4652;        /* secondary text */
  --er-muted: #4F5F6E;        /* eyebrow labels */
  --er-mist: #D3DEE6;         /* secondary text on navy */
  --er-fog: #C9D5DE;          /* fine print on navy */
  --er-rule: #D6CFC2;         /* hairlines on light backgrounds */
  --er-error: #B3261E;        /* form error messages */

  /* Fonts */
  --font-display: "Lora", Georgia, serif;
  --font-body: "Poppins", system-ui, sans-serif;

  /* Layout */
  --max-width: 1200px;
  --text-width: 680px;
  --page-gutter: clamp(20px, 5.5vw, 80px);
  --section-space: clamp(64px, 8vw, 96px);

  /* Shape */
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --radius-arch: 999px 999px 0 0;
}


/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--er-paper);
  color: var(--er-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

h1, h2, h3, p, ul, figure { margin: 0; }

ul { padding: 0; list-style: none; }


/* ---------- 3. Layout helpers ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.container--narrow {
  max-width: 760px;
  margin: 0 auto;
}

/* Every page section gets side gutters and vertical breathing room */
.section {
  padding: var(--section-space) var(--page-gutter);
}

.section--navy  { background: var(--er-navy); color: var(--er-cream); }
.section--tint  { background: var(--er-petal-tint); }
.section--paper { background: var(--er-paper); }

/* Two-column row that stacks on small screens */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 80px;
}

.row--bottom { align-items: flex-end; }
.row--top    { align-items: flex-start; }
.row--center { align-items: center; }

.col       { flex: 1 1 320px; min-width: 0; }
.col--wide { flex: 1.4 1 420px; min-width: 0; max-width: var(--text-width); }

.center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


/* ---------- 4. Typography ---------- */
.eyebrow {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--er-muted);
}

.section--navy .eyebrow { color: var(--er-petal); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Main section headings */
.heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--er-navy);
  text-wrap: balance;
}

/* Smaller section headings */
.heading--sm {
  font-weight: 500;
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.2;
}

.section--navy .heading { color: var(--er-cream); }

/* Card and sub-section titles */
.title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  color: var(--er-navy);
  text-wrap: balance;
}

.lead {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--er-ink);
}

.section--navy .lead { color: var(--er-mist); }

.text-secondary { color: var(--er-slate); }

.fine-print {
  font-size: 14px;
  line-height: 1.5;
  color: var(--er-slate);
}

.section--navy .fine-print { color: var(--er-fog); }

/* Lora italic closing lines */
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--er-navy);
  text-wrap: balance;
}

strong { font-weight: 600; color: var(--er-navy); }


/* ---------- 5. Buttons and links ---------- */
a { color: var(--er-petal-deep); text-underline-offset: 3px; }
a:hover { color: var(--er-navy); }

.section--navy a,
.site-footer a { color: var(--er-mist); }
.section--navy a:hover,
.site-footer a:hover { color: var(--er-white); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 250ms ease-out;
}

button.btn { border: none; cursor: pointer; }

.btn--navy { background: var(--er-navy); color: var(--er-cream); }
.btn--navy:hover { background: var(--er-navy-hover); color: var(--er-cream); }

.btn--cream,
.section--navy .btn--cream { background: var(--er-cream); color: var(--er-navy); }
.btn--cream:hover,
.section--navy .btn--cream:hover { background: var(--er-white); color: var(--er-navy); }

.btn--small { min-height: 48px; padding: 0 24px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }

.cta-group {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.center-stack .cta-group { align-items: center; }


/* ---------- 6. Shared components ---------- */

/* White rounded card */
.card {
  background: var(--er-white);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}

/* Arch photo frame: rounded top, square bottom. Always sits on a baseline. */
.arch {
  border-radius: var(--radius-arch);
  overflow: hidden;
  background: var(--er-navy-hover);
}

.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Petal bullet marker */
.petal {
  flex: none;
  width: 10px;
  height: 12px;
  margin-top: 8px;
}

/* List with petal bullets and hairlines between items */
.rule-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--er-rule);
}

.rule-list li:last-child { border-bottom: 1px solid var(--er-rule); }

/* Brand icon used above centered headings */
.brand-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 24px;
}

.line-icon { flex: none; }


/* ---------- 7. Page sections ---------- */

/* Header */
.site-header {
  background: var(--er-paper);
  border-bottom: 1px solid var(--er-rule);
  padding: 0 var(--page-gutter);
}

.site-header .container {
  min-height: 84px;
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.site-logo img { width: 244px; height: auto; }

.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}

.main-nav .nav-link {
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--er-slate);
  text-decoration: none;
}

.main-nav .nav-link:hover { color: var(--er-navy); text-decoration: underline; }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

/* Thin line between the section links and the login/join actions */
.nav-divider {
  width: 1px;
  height: 24px;
  background: var(--er-rule);
}

/* When the header wraps onto two lines, the divider has nothing to separate */
@media (max-width: 900px) {
  .nav-divider { display: none; }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* "Member login" text link with person icon */
.login-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--er-petal-deep);
  text-decoration: none;
  white-space: nowrap;
}

.login-link:hover { color: var(--er-navy); text-decoration: underline; }

/* Phones: logo, then one swipeable row of section links, then login + join */
@media (max-width: 640px) {
  .site-header .container { gap: 4px; padding-bottom: 16px; }
  .site-logo img { width: 210px; }
  .main-nav { width: 100%; gap: 8px; }

  .nav-links {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 22px;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links .nav-link { font-size: 14px; }
  .nav-divider { display: none; }

  .nav-actions { width: 100%; justify-content: space-between; gap: 16px; }
  .nav-actions .login-link { font-size: 14px; }
  .nav-actions .btn { flex: 0 1 auto; min-height: 44px; padding: 0 20px; font-size: 14px; }
}

/* Hero */
.hero {
  padding-bottom: 0;
  padding-top: clamp(64px, 8vw, 112px);
}

.hero .row { gap: 56px 64px; }

.hero-copy {
  flex: 1 1 480px;
  min-width: 0;
  padding-bottom: clamp(48px, 7vw, 112px);
}

.hero-copy .eyebrow { margin-bottom: 20px; }
.hero-copy .lead { margin-top: 24px; max-width: 560px; font-size: clamp(18px, 1.5vw, 20px); }

.hero-media {
  flex: 1 1 400px;
  min-width: 0;
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-media .arch {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1.4;
}

.hero-media .arch img { object-position: 50% 62%; }

.hero-petal {
  position: absolute;
  top: 4px;
  right: 4%;
  width: 30px;
  height: 36px;
}

/* Does this sound familiar? */
.familiar-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.familiar-card {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.familiar-card .petal { width: 15px; height: 18px; margin: 0; }

.familiar-card p {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.4;
  color: var(--er-navy);
}

.familiar-closing {
  margin-top: 48px;
  text-align: center;
  font-size: clamp(22px, 2vw, 26px);
}

/* Welcome to the club */
.welcome { padding-top: 0; padding-bottom: 0; }

.welcome .container {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: var(--section-space) 0;
  border-top: 1px solid var(--er-rule);
  border-bottom: 1px solid var(--er-rule);
}

.welcome .row:first-child { gap: 16px 80px; }

.welcome-photo {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.welcome-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 30%;
}

.welcome-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.welcome-text .quote { margin-top: 10px; font-size: 22px; }

/* What happens here */
.feature-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 24px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-card .title { margin-top: 4px; }
.feature-card p { font-size: 16px; color: var(--er-slate); }
.feature-card a { margin-top: 4px; font-size: 15px; font-weight: 500; }

/* The Commons calendar + Meet Deborah */
.commons .row { gap: 64px 80px; }

.calendar-list { margin-top: 36px; }

.calendar-item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--er-navy-hover);
}

.calendar-item:last-child { border-bottom: 1px solid var(--er-navy-hover); }
.calendar-item .line-icon { margin-top: 2px; }

.calendar-item h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--er-cream);
}

.calendar-item p {
  margin-top: 6px;
  font-size: 16px;
  color: var(--er-mist);
}

.deborah {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 32px;
}

.deborah .arch {
  flex: 0 1 240px;
  aspect-ratio: 1 / 1.45;
}

.deborah .arch img { object-position: 50% 0%; }

.deborah-bio { flex: 1 1 260px; min-width: 0; }
.deborah-bio p { margin-top: 16px; color: var(--er-mist); }

.coaching-offer {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: var(--er-cream);
  color: var(--er-ink);
}

.coaching-offer p { flex: 1 1 280px; font-size: 16px; }

.coaching-offer .offer {
  flex: 0 1 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--er-navy);
}

/* Your people, your pace */
.pace { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.pace .lead { margin-top: 24px; font-size: 20px; line-height: 1.55; }
.pace .text-secondary { margin-top: 16px; }
.pace .quote { margin-top: 32px; }

/* A safe space to show up */
.safe-intro { flex: 1.5 1 440px; min-width: 0; max-width: var(--text-width); }
.safe-intro p { margin-top: 20px; }

.space-photos {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 420px;
}

.space-photos .arches {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.space-photos .arch { flex: 1 1 0; background: var(--er-mist); }
.space-photos .arch--short { aspect-ratio: 1 / 1.5; }
.space-photos .arch--tall  { aspect-ratio: 1 / 1.7; }
.space-photos .arch--short img { object-position: 30% 60%; }
.space-photos .arch--tall img  { object-position: 45% 60%; }

.space-photos figcaption { margin-top: 16px; }

.guidelines-title {
  margin-top: 64px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--er-navy);
}

.guidelines-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}

.guideline {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--radius-sm);
  background: var(--er-white);
}

.guideline .petal { margin-top: 7px; }
.guideline p { font-size: 16px; }

.guidelines-note { margin-top: 24px; }

/* Who it's for */
.who-main { flex: 1.3 1 440px; min-width: 0; }
.who-main .lead { margin-top: 20px; max-width: 600px; }

.who-list-title {
  margin-top: 32px;
  font-size: 16px;
  font-weight: 600;
  color: var(--er-navy);
}

.who-main .rule-list { margin-top: 16px; max-width: 600px; }

.care-card { flex: 1 1 340px; min-width: 0; }
.care-card .title { margin-top: 16px; }
.care-card > p { margin-top: 16px; font-size: 16px; }

.care-card .crisis-note {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--er-petal-tint);
  font-size: 15px;
}

.crisis-note a,
.faq-answer a { font-weight: 600; }

/* For clinicians and loved ones */
.audiences { padding-top: 0; }

.audiences .container {
  border-top: 1px solid var(--er-rule);
  padding-top: var(--section-space);
}

.audience-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 24px;
}

.audience-card {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audience-card .eyebrow { margin-bottom: 0; }

.audience-card .headline {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.3;
  color: var(--er-navy);
  text-wrap: balance;
}

.audience-card p { font-size: 16px; }

.referral {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--er-rule);
}

.referral p { font-size: 15px; font-weight: 600; color: var(--er-navy); }

.referral-links {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 15px;
}

.referral-links a { padding: 4px 0; }

/* Free trial (pricing) */
.trial {
  position: relative;
  overflow: hidden;
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

/* Background photo + overlay. Raise or lower the overlay alpha to change how subtle the photo is. */
.trial-bg,
.trial-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trial-bg { object-fit: cover; object-position: 50% 55%; }
.trial-overlay { background: rgba(230, 235, 239, 0.86); }

.trial .container { position: relative; }
.trial .lead { margin-top: 20px; max-width: 520px; }

.price-card {
  flex: 1 1 380px;
  min-width: 0;
  max-width: 480px;
  padding: 40px 36px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--er-navy);
}

.price-amount {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 52px;
  line-height: 1;
}

.price-term { font-size: 16px; color: var(--er-slate); }

.price-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.price-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.5;
}

.price-list .petal { margin-top: 6px; }

.price-card .btn { margin-top: 32px; }
.price-card .fine-print { margin-top: 16px; text-align: center; }

/* FAQ */
.faq-intro { flex: 1 1 280px; min-width: 0; }
.faq-intro p { margin-top: 16px; max-width: 320px; font-size: 16px; }

.faq-list {
  flex: 2 1 520px;
  min-width: 0;
  border-top: 1px solid var(--er-rule);
}

.faq-item { border-bottom: 1px solid var(--er-rule); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--er-navy);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  flex: none;
  font-size: 26px;
  font-weight: 300;
  color: var(--er-petal-deep);
  transition: transform 250ms ease-out;
}

.faq-item[open] .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-width: 640px;
  margin-bottom: 24px;
  font-size: 16px;
}

/* Closing call to action */
.closing { padding-top: clamp(80px, 10vw, 128px); padding-bottom: clamp(80px, 10vw, 128px); }
.closing .brand-icon { width: 56px; height: 56px; margin-bottom: 28px; }
.closing .display { font-size: clamp(40px, 4.4vw, 56px); }
.closing .lead { margin-top: 24px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; text-wrap: balance; }
.closing .quote { margin-top: 12px; color: var(--er-petal); }
.closing .cta-group { margin-top: 40px; }

/* Footer */
.site-footer {
  background: var(--er-navy);
  padding: 0 var(--page-gutter) 48px;
  font-size: 14px;
  line-height: 1.5;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px 64px;
  padding-top: 48px;
  border-top: 1px solid var(--er-navy-hover);
}

.footer-brand {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-brand .footer-logo { width: 220px; height: auto; }
.footer-brand .bnt-logo { width: 84px; height: auto; }
.footer-brand p { max-width: 360px; color: var(--er-fog); }

.footer-nav,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-nav { flex: 0 1 auto; }
.footer-nav a { text-decoration: none; padding: 6px 0; }

.footer-contact { flex: 0 1 280px; min-width: 0; }
.footer-contact a { padding: 6px 0; }
.footer-contact .eyebrow { margin: 0 0 6px; font-size: 12px; color: var(--er-petal); }
.footer-contact p { margin-top: 12px; color: var(--er-fog); }
.footer-contact p a { color: var(--er-cream); font-weight: 600; padding: 0; }


/* ---------- 8. Accessibility and motion ---------- */
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--er-petal-deep);
  outline-offset: 2px;
}

.section--navy a:focus-visible,
.site-footer a:focus-visible { outline-color: var(--er-petal); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* ---------- 9. Join pop-up (age check before the paywall) ---------- */
.join-gate {
  width: calc(100% - 32px);
  max-width: 520px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--er-white);
  color: var(--er-ink);
}

.join-gate::backdrop { background: rgba(19, 37, 56, 0.6); }

.join-gate-panel {
  position: relative;
  padding: 40px 36px 36px;
}

.join-gate-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--er-slate);
  cursor: pointer;
}

.join-gate-close:hover { background: var(--er-petal-tint); color: var(--er-navy); }

.join-gate-step { display: flex; flex-direction: column; gap: 16px; }
.join-gate-step[hidden] { display: none; }
.join-gate-step .title:focus { outline: none; }
.join-gate-step .btn { margin-top: 8px; }

.join-gate-icon { width: 40px; height: 40px; }
.join-gate-intro { color: var(--er-slate); font-size: 16px; }

.join-gate form { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.join-gate-note { text-align: center; }

.field { display: flex; flex-direction: column; gap: 6px; }

/* First and last name side by side; stacks on narrow screens */
.field-row { display: flex; flex-wrap: wrap; gap: 20px 16px; }
.field-row .field { flex: 1 1 180px; min-width: 0; }

.field label {
  font-size: 15px;
  font-weight: 600;
  color: var(--er-navy);
}

.field-hint { margin-top: -2px; font-size: 14px; color: var(--er-slate); }

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--er-muted);
  border-radius: 6px;
  background: var(--er-white);
  color: var(--er-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

.field textarea { resize: vertical; }

.field input:focus-visible,
.field textarea:focus-visible,
.join-gate-close:focus-visible,
.join-gate .btn:focus-visible {
  outline: 2px solid var(--er-petal-deep);
  outline-offset: 2px;
}

.field [aria-invalid="true"] { border-color: var(--er-error); }

.field-error {
  font-size: 14px;
  font-weight: 500;
  color: var(--er-error);
}

.join-gate .crisis-note {
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--er-petal-tint);
  font-size: 15px;
}

/* Hides the spam trap field from people but not from bots */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .join-gate-panel { padding: 36px 22px 24px; }
}