/* The audience pages under /for/ - churches, families, groups, workplaces.

   Everything here sits on top of site.css and uses only its tokens. It adds three things
   the four original pages never needed: a hero photo, a row of competition ideas with a
   chip saying what each one takes, and a strip of links between the audience pages. */

/* The hero photo. Same radius language as the phone frames, without the bezel. */
.photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Competition ideas. A card each - they are separate things somebody could pick. */
.ideas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}
.idea {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.idea .heading { font-size: 19px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
/* Free reads as the default; Premium and the Add-ons get the accent so an organizer sees
   what they would be buying before they plan around it. */
.chip {
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ink-78);
  box-shadow: inset 0 0 0 1px var(--color-neutral-700);
}
.chip-paid {
  color: var(--color-accent-300);
  background: var(--color-accent-900);
  box-shadow: inset 0 0 0 1px var(--color-accent-800);
}

/* Links between the audience pages, above the footer. */
.audiences {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  font-size: 14px;
  color: var(--ink-60);
}
.audiences a { color: var(--ink-78); text-decoration: none; }
.audiences a:hover,
.audiences a[aria-current='page'] { color: var(--color-accent); }


/* ── Pricing ─────────────────────────────────────────────────────────────────────────
   One card per thing sold. All Access leads and carries the accent edge, because it is
   the one with the free trial and the one that includes everything else. */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 20px;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.plan-featured { box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-md); }
.plan .kicker { font-size: 12px; }
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 40px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
}
.price small { font-size: 15px; letter-spacing: 0; color: var(--ink-60); }
.plan ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-72);
}
.plan .fine { margin-top: auto; }

/* The comparison table. `min-width: 0` because the wrapper is a flex item, and a flex item
   will not shrink below its content - without it the table pushed the whole page sideways
   on a phone instead of scrolling inside itself. Below 600px the table is made to fit
   outright: four short columns read fine at 14px, and nobody has to find a scroll. */
.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
@media (max-width: 600px) {
  .compare { min-width: 0; font-size: 14px; }
  .compare th,
  .compare td { padding: 12px 6px; }
  .compare thead th { font-size: 13px; }
}
.compare th,
.compare td {
  padding: 14px 12px;
  text-align: center;
  border-bottom: 1px solid var(--color-divider);
}
.compare th:first-child,
.compare td:first-child { text-align: left; padding-left: 0; color: var(--ink-78); }
.compare thead th { font-weight: 500; font-size: 14px; color: var(--color-text); }
.compare .yes { color: var(--color-accent); }
.compare .no { color: var(--ink-55); }

.founder {
  display: grid;
  gap: 10px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-900);
  box-shadow: inset 0 0 0 1px var(--color-accent-800);
}

/* Words for screen readers where the table shows only a mark. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}