/* ─────────────────────────────────────────────────────────────────────────────
   family-data.css — "Your Family's Data" (layouts/your-family-data/single.html).

   One reading column on the site's cream ground: the opener, the policy "slip",
   the promises as a ruled list (an italic line on what is common elsewhere, the
   promise, a sentence, the policy section it rests on), two dotted lists, the
   full-policy block, and a quieter forward-looking note. Site tokens from
   main.css only; every rule is scoped to .fd.
   ───────────────────────────────────────────────────────────────────────────── */

.fd { background: var(--color-bg-soft); padding: 56px 16px 72px; }
.fd > * { max-width: 40rem; margin-inline: auto; }
.fd > * + * { margin-top: 56px; }

.fd p { margin: 0; }
.fd h1, .fd h2, .fd h3 { font-family: var(--font-heading); font-weight: 700; color: var(--color-text);
  text-wrap: balance; margin: 0; }
.fd h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 2.75rem); line-height: 1.18; letter-spacing: -0.01em; }
.fd h1 em { font-style: italic; font-weight: 400; color: var(--color-brand); }
.fd h2 { font-size: 1.6rem; line-height: 1.25; }
.fd h3 { font-size: 1.22rem; line-height: 1.3; }

.fd-eyebrow { font: 700 0.75rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-brand); }
.fd-open { display: flex; flex-direction: column; gap: 18px; }
.fd-lead { font-size: 1.15rem; line-height: 1.6; color: var(--color-muted); max-width: 36rem; }

/* The policy slip: the full policy is the document that counts, so it gets a real block. */
.fd-slip { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-brand); border-radius: 4px; padding: 18px 20px; }
.fd-slip p { flex: 1 1 16rem; min-width: 0; color: var(--color-muted); }
.fd-slip strong { color: var(--color-text); }

.fd-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 10px; background: var(--color-brand); color: #fff; font: 700 1rem var(--font-body);
  text-decoration: none; white-space: nowrap; }
.fd-btn:hover { background: var(--color-brand-dark); }
.fd a:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; }

/* The promises */
.fd-sec { display: flex; flex-direction: column; gap: 22px; }
.fd-nots { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.fd-not { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 14px; row-gap: 6px;
  padding-block: 24px; border-bottom: 1px solid var(--color-border); }
/* ⚠️ Everything but the mark sits in column 2; without this the reference line
   auto-places into the mark's column. */
.fd-not > :not(.fd-not__mark) { grid-column: 2; }
.fd-not__mark { grid-column: 1; grid-row: 1 / span 4; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--color-brand-soft); color: var(--color-brand); display: grid; place-items: center;
  margin-top: 2px; }
.fd-not__mark svg { width: 18px; height: 18px; }
.fd-not__else { font-size: 0.95rem; color: var(--color-muted); font-style: italic; }
.fd-not__body { color: var(--color-text); line-height: 1.6; }
.fd-not__ref { font-size: 0.82rem; color: var(--color-muted); }
.fd-not__ref a { color: var(--color-brand-dark); text-underline-offset: 2px; }

.fd-dots { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.fd-dots li { position: relative; padding-left: 20px; line-height: 1.6; }
.fd-dots li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--color-brand); }

.fd-close { background: var(--color-brand-soft); border-radius: 6px; padding: 28px 24px; display: flex;
  flex-direction: column; gap: 14px; align-items: flex-start; }
.fd-close__contact { font-size: 0.95rem; color: var(--color-muted); }
.fd-close__contact a { color: var(--color-text); font-weight: 600; }

/* A forward-looking note under the close: quieter than the promises, because it is not one yet. */
.fd-soon { border-top: 1px solid var(--color-border); padding-top: 28px; display: flex;
  flex-direction: column; gap: 10px; }
.fd .fd-soon h2 { font-size: 1.15rem; }
.fd-soon p { color: var(--color-muted); line-height: 1.6; }