/* Role, help and update pages use the same public brand roles as the learning hub. */
.public-family {
  --family-radius: var(--public-panel-radius, 10px);
  --family-shadow: var(--public-panel-shadow, 0 12px 30px -24px rgba(16,41,23,.3));
  --family-tint: var(--public-surface-tint, color-mix(in srgb, var(--ic-brand) 4%, white));
}
.public-family main { color: var(--ic-ink); }
.public-family main :is(p,li,dd) { color: var(--ic-secondary); }
.public-family main :is(h2,h3,strong,dt) { color: var(--ic-ink); }
.public-family .family-tint { background: var(--family-tint); }
.public-family .family-section-intro { margin-bottom: 30px; max-width: 760px; }
.public-family .family-section-intro h2 { margin: 10px 0 18px; max-width: 24ch; font: 500 clamp(1.9rem,3.1vw,2.8rem)/1.12 var(--ic-font-editorial); letter-spacing: -.025em; }
.public-family .family-section-intro > p:not(.eyebrow) { max-width: 62ch; font-size: 1.0625rem; line-height: 1.7; }
.public-family :is(.family-small-label,.family-section-intro .eyebrow) { color: var(--ic-brand); font-size: .8125rem; font-weight: 650; line-height: 1.5; letter-spacing: .035em; }
.public-family .family-role-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; gap: clamp(36px,6vw,84px); padding-block: clamp(48px,7vw,84px); }
.public-family .family-role-hero h1 { font-size: clamp(2.8rem,4.8vw,4.7rem); line-height: 1.04; max-width: 15ch; margin: 18px 0 22px; }
.public-family .family-role-hero .lead { max-width: 55ch; margin: 0; color: var(--ic-on-field); opacity: 1; font-size: 1.1rem; line-height: 1.7; }
.public-family .family-role-hero .hero-actions { margin-top: 30px; }
.public-family .family-hero-note { padding: 28px; border-radius: var(--family-radius); box-shadow: var(--family-shadow); background: var(--ic-surface); }
.public-family .family-hero-note .family-small-label { margin: 0 0 20px; color: var(--ic-brand); }
.public-family .family-hero-question { color: var(--ic-ink); font: 500 clamp(1.7rem,2.3vw,2.3rem)/1.2 var(--ic-font-editorial); margin: 0 0 24px; letter-spacing: -.02em; }
.public-family .family-note-answer { padding: 22px; background: var(--family-tint); border-left: 3px solid var(--ic-brand); }
.public-family .family-note-answer strong { display: block; color: var(--ic-ink); line-height: 1.5; }
.public-family .family-note-answer p { margin: 12px 0 0; color: var(--ic-secondary); font-size: .95rem; line-height: 1.65; }
.public-family .family-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.public-family .family-benefits article { border-top: 2px solid var(--ic-brand); padding-top: 20px; }
.public-family .family-benefits h3 { margin: 0 0 10px; font: 600 1.125rem/1.4 var(--ic-font-body); }
.public-family .family-benefits p { margin: 0; max-width: 39ch; line-height: 1.65; }
.public-family .family-example-layout { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: clamp(28px,4vw,58px); align-items: start; }
.public-family .family-example-layout .family-section-intro { margin: 12px 0 0; }
.public-family .family-frame { border: 1px solid var(--ic-line); border-radius: var(--family-radius); background: var(--ic-surface); box-shadow: var(--family-shadow); overflow: hidden; min-width: 0; }
.public-family .family-frame-heading { padding: 24px 26px; background: var(--ic-field-background); color: var(--ic-on-field); }
.public-family .family-frame-heading .eyebrow { color: var(--ic-on-field); margin: 0 0 10px; }
.public-family .family-frame-heading h3 { color: var(--ic-on-field); font: 600 1.25rem/1.4 var(--ic-font-body); margin: 0; }
.public-family .family-compare { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; }
.public-family .family-compare > div { padding: 22px; border-right: 1px solid var(--ic-line); border-bottom: 1px solid var(--ic-line); }
.public-family .family-compare > div:last-child { border-right: 0; }
.public-family .family-compare dt { color: var(--ic-brand); font-size: .8125rem; font-weight: 650; margin-bottom: 14px; }
.public-family .family-compare dd { margin: 0; }
.public-family .family-compare dd strong { display: block; font-size: 1.0625rem; line-height: 1.5; margin-bottom: 8px; }
.public-family .family-compare dd span { display: block; font-size: .875rem; line-height: 1.6; }
.public-family .family-response { padding: 26px; }
.public-family .family-response .family-small-label { margin: 0 0 8px; }
.public-family .family-response h3 { margin: 0 0 18px; font-size: 1.125rem; line-height: 1.5; }
.public-family .family-response blockquote { margin: 0; padding: 18px 20px; border-left: 3px solid var(--ic-brand); background: var(--family-tint); color: var(--ic-ink); font-size: .975rem; line-height: 1.7; }
.public-family .family-boundary { margin: 0; padding: 20px 26px; border-top: 1px solid var(--ic-line); background: #fff8e6; color: var(--ic-warning); font-size: .875rem; line-height: 1.65; }
.public-family .family-next { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: center; }
.public-family .family-next h2 { font: 500 clamp(1.8rem,3vw,2.6rem)/1.15 var(--ic-font-editorial); letter-spacing: -.025em; max-width: 28ch; margin: 10px 0 16px; }
.public-family .family-next p { max-width: 62ch; margin-bottom: 0; }
.public-family .family-next > .button { white-space: normal; text-align: center; }
.public-family .family-nav-band { background: var(--ic-surface); border-bottom: 1px solid var(--ic-line); }
.public-family .family-subnav { display: flex; gap: 12px 28px; flex-wrap: wrap; padding: 0; }
.public-family .family-subnav a { display: inline-flex; align-items: center; min-height: 58px; padding: 12px 0; border-bottom: 3px solid transparent; color: var(--ic-secondary); font-size: .875rem; font-weight: 600; text-decoration: none; }
.public-family .family-subnav a[aria-current=page] { border-bottom-color: var(--ic-brand); color: var(--ic-brand); }
.public-family .family-subnav a:hover { color: var(--ic-brand); text-decoration: underline; text-underline-offset: 5px; }
.public-family .family-task-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.public-family .family-task-grid > a { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--ic-line); border-radius: var(--family-radius); box-shadow: var(--family-shadow); background: var(--ic-surface); color: var(--ic-ink); text-decoration: none; }
.public-family .family-task-grid > a:hover { border-color: var(--ic-brand); background: var(--family-tint); }
.public-family .family-task-symbol { display: grid; place-items: center; width: 44px; height: 44px; background: var(--family-tint); color: var(--ic-brand); font-size: 1.6rem; font-weight: 500; margin-bottom: 24px; border-radius: 4px; }
.public-family .family-task-grid h3 { font: 500 1.65rem/1.2 var(--ic-font-editorial); margin: 0 0 14px; letter-spacing: -.02em; }
.public-family .family-task-grid p { margin: 0 0 24px; line-height: 1.6; }
.public-family .family-task-link { margin-top: auto; color: var(--ic-brand); font-size: .875rem; font-weight: 650; }
.public-family .family-help-content { display: grid; gap: 30px; }
.public-family :is(.family-help-group,.family-faq-group) { border: 1px solid var(--ic-line); border-radius: var(--family-radius); background: var(--ic-surface); overflow: hidden; box-shadow: var(--family-shadow); }
.public-family .family-group-heading { padding: 22px 28px; background: var(--ic-field-background); }
.public-family .family-group-heading .eyebrow { color: var(--ic-on-field); margin: 0 0 8px; font-size: .8125rem; }
.public-family .family-group-heading h2 { color: var(--ic-on-field); margin: 0; font: 500 clamp(1.6rem,2.4vw,2rem)/1.2 var(--ic-font-editorial); letter-spacing: -.02em; scroll-margin-top: 24px; }
.public-family .family-help-group .guide-details { border: 0; border-radius: 0; border-bottom: 1px solid var(--ic-line); margin: 0; }
.public-family .family-help-group .guide-details:last-child { border-bottom: 0; }
.public-family .family-help-group .guide-details summary { color: var(--ic-ink); padding: 22px 28px; font-size: 1rem; line-height: 1.55; }
.public-family .family-help-group .guide-details[open] summary { color: var(--ic-brand); background: var(--family-tint); margin-bottom: 0; }
.public-family .family-help-group .guide-details > div { padding: 22px 28px 26px; }
.public-family .family-help-group .guide-details > div p { max-width: 82ch; font-size: .975rem; }
.public-family .family-support-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 48px; align-items: start; }
.public-family .family-support-copy h2 { margin-top: 0; }
.public-family .family-support-aside { padding: 30px; background: var(--family-tint); }
.public-family .family-support-aside h2 { margin: 12px 0 16px; font: 500 2rem/1.15 var(--ic-font-editorial); }
.public-family .family-support-aside p { line-height: 1.65; }
.public-family .family-secondary-link { display: block; margin-top: 20px; color: var(--ic-brand); text-underline-offset: 4px; font-size: .875rem; font-weight: 650; }
.public-family .family-faq-start { padding-block: 28px; }
.public-family .family-topic-index { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.public-family .family-topic-index a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ic-brand); font-size: .875rem; font-weight: 600; text-underline-offset: 5px; }
.public-family .family-faq-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; align-items: start; }
.public-family .family-faq-group .faq details { border: 0; border-radius: 0; border-bottom: 1px solid var(--ic-line); padding: 0; margin: 0; background: var(--ic-surface); }
.public-family .family-faq-group .faq details:last-child { border-bottom: 0; }
.public-family .family-faq-group .faq summary { color: var(--ic-ink); padding: 20px 24px; line-height: 1.55; font-size: .975rem; font-weight: 600; }
.public-family .family-faq-group .faq details[open] summary { background: var(--family-tint); color: var(--ic-brand); }
.public-family .family-faq-group .faq details p { padding: 0 24px 22px; margin: 18px 0 0; font-size: .95rem; line-height: 1.75; }
.public-family .family-team-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.public-family .family-team-links a { padding: 24px; border: 1px solid var(--ic-line); border-radius: var(--family-radius); background: var(--ic-surface); text-decoration: none; color: var(--ic-brand); display: flex; flex-direction: column; gap: 16px; }
.public-family .family-team-links a:hover { background: var(--family-tint); border-color: var(--ic-brand); }
.public-family .family-team-links a > span:first-child { font-size: .875rem; font-weight: 600; }
.public-family .family-team-links strong { font: 500 1.4rem/1.3 var(--ic-font-editorial); }
.public-family .family-team-links a > span:last-child { margin-top: auto; }
.public-family .solution-grid { gap: 22px; }
.public-family .section .solution-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--ic-line); border-radius: var(--family-radius); background: var(--ic-surface); box-shadow: var(--family-shadow); }
.public-family .solution-card .solution-output { margin-top: auto; padding-top: 24px; }
.public-family .solution-card > a { display: inline-block; margin-top: 20px; color: var(--ic-brand); }
.public-family .section .finder-controls { padding: 24px; border: 1px solid var(--ic-line); border-radius: var(--family-radius); background: var(--ic-surface); margin-bottom: 20px; }
.public-family .family-update-latest { background: var(--family-tint); padding-top: 0; }
.public-family .family-update-latest .family-subnav { margin-bottom: 42px; }
.public-family.family-updates-page .section .card,
.public-family.family-updates-page .boundary-grid > article { padding: 24px; border: 1px solid var(--ic-line); border-radius: var(--family-radius); background: var(--ic-surface); }
.public-family.family-updates-page .boundary-grid > article > span { color: var(--ic-brand); }
.public-family.family-updates-page .boundary-grid :is(h3,p) { color: var(--ic-ink); }
.public-family :is(.family-task-grid a,.family-team-links a,.family-subnav a,.family-topic-index a,.family-secondary-link,.guide-details summary,.faq summary):focus-visible { outline: 3px solid var(--ic-brand); outline-offset: 4px; }
@media(max-width:1000px) {
  .public-family .family-example-layout { grid-template-columns: 1fr; }
  .public-family .family-example-layout .family-section-intro { max-width: 750px; margin: 0; }
  .public-family .family-example-layout .family-section-intro h2 { max-width: 28ch; }
  .public-family .family-team-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:800px) {
  .public-family :is(.family-role-hero,.family-support-layout,.family-faq-layout) { grid-template-columns: 1fr; }
  .public-family .family-role-hero { gap: 32px; }
  .public-family .family-role-hero h1 { max-width: 18ch; }
  .public-family .family-hero-note { max-width: 640px; }
  .public-family .family-task-grid { grid-template-columns: 1fr; }
  .public-family .family-task-grid > a { display: grid; grid-template-columns: 44px minmax(0,1fr); column-gap: 20px; }
  .public-family .family-task-symbol { grid-row: 1 / 4; margin-bottom: 0; }
  .public-family .family-task-grid p { margin-bottom: 18px; }
  .public-family .family-task-link { grid-column: 2; }
  .public-family .family-next { grid-template-columns: 1fr; justify-items: start; gap: 24px; }
}
@media(max-width:600px) {
  .public-family .family-benefits { grid-template-columns: 1fr; gap: 24px; }
  .public-family .family-benefits p { max-width: none; }
  .public-family .family-compare { grid-template-columns: 1fr; }
  .public-family .family-compare > div { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 18px; border-right: 0; padding: 20px; }
  .public-family .family-compare dt { margin: 2px 0 0; }
  .public-family .family-response,.public-family .family-frame-heading,.public-family .family-boundary { padding: 22px; }
  .public-family .family-team-links { grid-template-columns: 1fr; }
  .public-family .family-team-links a { gap: 12px; }
  .public-family .family-team-links a > span:last-child { align-self: flex-end; }
  .public-family .family-subnav { gap: 0 22px; padding-block: 8px; }
  .public-family .family-subnav a { min-height: 44px; padding-block: 8px; }
  .public-family .family-group-heading { padding: 22px; }
  .public-family .family-help-group .guide-details summary { padding: 20px 22px; }
  .public-family .family-help-group .guide-details > div { padding: 20px 22px 24px; }
}
@media(max-width:380px) {
  .public-family .family-hero-note,.public-family .family-note-answer { padding: 20px; }
  .public-family .family-task-grid > a { padding: 22px; display: flex; }
  .public-family .family-task-symbol { margin-bottom: 20px; }
  .public-family .family-compare > div { grid-template-columns: 1fr; gap: 10px; }
}

/* The specialist handoff uses the same evidence frame as other team pages. */
.public-family .broker-question-example.family-frame { padding: 0; border-radius: var(--family-radius); }
.public-family .broker-question-example.family-frame > :not(.family-frame-heading) { margin-inline: 26px; }
.public-family .broker-question-example.family-frame > .family-frame-heading { margin: 0; }
.public-family .broker-question-example.family-frame > .family-frame-heading h3 { margin-bottom: 14px; }
.public-family .broker-question-example.family-frame > .broker-evidence-comparison { padding-top: 24px; margin-top: 0; }
.public-family .broker-question-example.family-frame > .button { width: fit-content; max-width: calc(100% - 52px); min-width: 0; margin-bottom: 26px; white-space: normal; text-align: center; }
.public-family .broker-question-example.family-frame blockquote { padding: 18px 20px; background: var(--family-tint); }
.public-family .broker-handoff-grid > div { padding-top: 8px; }
.public-family .family-frame-heading .family-frame-subtitle { margin: 0; color: var(--ic-on-field); font-size: .9rem; line-height: 1.6; }

/* A short Help hero must not crop the shared desktop navigation. */
.family-help-page .ecosystem-hero { overflow: visible; }