/* Page-local styles for /class-texts/. Everything else is inherited from the
   site stylesheet one directory up, so the header, footer, cards, buttons and
   notice blocks all match the rest of mrsajdak.com. Only the shapes this page
   needs and the homepage does not are defined here. */

/* The homepage hero is a two-column grid with a visual on the right. This page
   has copy only, so collapse it and keep the measure readable. */
.hero-narrow {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 64px;
}

.hero-narrow .hero-copy {
  max-width: 660px;
}

/* Sample messages. These are quoted verbatim from what actually gets sent, and
   they are also the samples filed with the carriers, so they read as messages
   rather than as prose: monospaced, tinted, one per row. */
.sample-list {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
  max-width: 640px;
}

.sample {
  position: relative;
  padding: 1.05rem 1.3rem 1.05rem 1.5rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* The cardinal spine reads as the message bubble's tail without drawing one. */
.sample::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  bottom: 1.05rem;
  left: 0;
  width: 3px;
  background: var(--cardinal);
  border-radius: 0 3px 3px 0;
}

/* Frequency, cost, carrier and hours disclosures. Carriers expect all four to
   be stated plainly, so they get their own definition list rather than being
   buried in a paragraph. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.fact {
  padding: 1.4rem 1.6rem;
  background: rgba(255, 255, 255, 0.86);
}

.fact dt {
  margin-bottom: 0.35rem;
  color: var(--cardinal);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fact dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* The no-sharing clause. This exact sentence is what a carrier reviewer looks
   for, so it is pulled out of the prose and given its own card. */
.privacy-card {
  max-width: 720px;
  margin-bottom: 2.5rem;
  border-color: rgba(165, 28, 48, 0.28);
  background: var(--cardinal-tint);
}

.privacy-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

.privacy-card p {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Long-form policy text. */
.prose {
  max-width: 660px;
}

.prose h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.05rem;
}

.prose h3:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.75;
}

@media (max-width: 720px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
}