/* Family planning: subject illustrations, two equal entry cards and local calculators. */
.family-paths { padding-block: 48px; }
.family-paths h2 { max-width: 28ch; }
.family-paths-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.family-path-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ddd4cd; border-radius: 24px; color: #302e2c; text-decoration: none; background: #fff; }
.family-path-card:hover { border-color: #a83c2b; }
.family-path-card:focus-visible { outline: 3px solid #a83c2b; outline-offset: 4px; }
.family-path-copy { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 24px; }
.family-path-copy strong { font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }
.family-path-copy .text-link { margin-top: auto; }
.family-scene { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; background:#fffcf8; }
.family-planner { margin-block: 32px; padding: clamp(20px, 3vw, 32px); border: 1px solid #ddd4cd; border-radius: 24px; background: #fffcf8; }
.family-planner > .family-scene { border-radius: 16px; max-height: 320px; }
.family-timeline { list-style-position: inside; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; }
.family-timeline li { padding: 20px; border-inline-start: 3px solid #a83c2b; background: #fbece6; }
.family-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block: 24px; }
.family-fields label { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.family-fields input, .family-fields select { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid #8c8178; border-radius: 8px; background: white; color: #302e2c; font: inherit; box-sizing: border-box; }
.family-planner [role='status'] { padding: 20px; border-inline-start: 3px solid #356148; background: #fff; }
.family-method { color: #68615c; font-size: 15px; }
@media (max-width: 640px) {
    .family-paths-grid, .family-fields, .family-timeline { grid-template-columns: 1fr; }
    .family-paths { padding-block: 32px; }
}
.family-details { margin-block: 32px; }
.family-details summary { min-height: 48px; padding: 16px; border: 1px solid #8c8178; border-radius: 12px; cursor: pointer; font-weight: 600; }
.family-details[open] summary { margin-bottom: 24px; }
.family-planner p, .family-path-copy span { text-align: start; hyphens: none; }