@layer layout{.families-page .families-opening{justify-items:start;gap:var(--space-6);padding-block:var(--space-16);display:grid}.families-page .families-opening h1{max-width:var(--content-measure)}.families-page .families-opening-note{align-items:start;gap:var(--space-6);max-width:var(--content-measure);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--colour-border);display:flex}.families-page .families-opening-note span{color:var(--colour-text-brand);font:var(--font-weight-medium) var(--text-h4-size) / var(--text-h4-line) var(--font-heading)}.families-page .families-steps{background:var(--colour-sand)}.families-page .families-step{align-items:start;gap:var(--space-8);padding-block:var(--space-12);border-bottom:1px solid var(--colour-brand);display:grid}.families-page .families-step:last-child{border-bottom:0}.families-page .families-step-heading{align-content:start;gap:var(--space-6);display:grid}.families-page .families-step-number{color:var(--colour-text-brand);font:var(--font-weight-medium) var(--text-h4-size) / var(--text-h4-line) var(--font-heading)}.families-page .families-step>p,.families-page .families-step-body{max-width:var(--content-measure)}.families-page .families-step-body{justify-items:start;gap:var(--space-8);display:grid}.families-page .families-close{padding-block:var(--space-12);color:var(--colour-text-inverse);background:var(--colour-brand)}.families-page .families-close-inner{align-items:end;gap:var(--space-12);display:grid}.families-page .families-feelings,.families-page .families-ending{justify-items:start;gap:var(--space-6);display:grid}.families-page .families-feelings ul{gap:var(--space-4) var(--space-6);flex-wrap:wrap;list-style:none;display:flex}.families-page .families-feelings li{color:var(--colour-text-inverse);font:var(--font-weight-medium) var(--text-h4-size) / var(--text-h4-line) var(--font-heading)}.families-page .families-ending{gap:var(--space-8)}.families-page .families-ending p{color:var(--colour-text-inverse);font:var(--font-weight-medium) var(--text-h2-size) / var(--text-h2-line) var(--font-heading)}@media (max-width:719px){.families-page .families-step-body .button,.families-page .families-ending .button{width:100%}}@media (min-width:720px){.families-page .families-step,.families-page .families-close-inner{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1100px){.families-page .families-step,.families-page .families-close-inner{column-gap:var(--space-16)}}}