.family-page { --family-line: #d7cbe8; }
.family-page .destination-hero { grid-template-columns: .95fr 1.05fr; gap: 52px; }
.family-page .destination-hero h1 { max-width: 580px; }
.family-page figure { margin: 0; }
.family-page figcaption { font-size: 12px; line-height: 1.5; color: #71677e; text-align: center; text-wrap: balance; }
.family-theme-forma { --brand-color: #83503f; --brand-dark: #4c3029; --brand-tint: #f1e2d5; --brand-accent: #cda98b; }
.family-theme-north { --brand-color: #2f6854; --brand-dark: #1d483b; --brand-tint: #dceae0; --brand-accent: #8ead96; }
.family-theme-mono { --brand-color: #6058ad; --brand-dark: #3d3677; --brand-tint: #e8e4f5; --brand-accent: #b3a9da; }
.family-hierarchy { padding: 28px 24px 24px; border: 1px solid #ece5f3; border-radius: 28px; background: radial-gradient(ellipse at 50% 30%, #fff, #f3eff9); }
.family-diagram-label { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; color: #726282; margin-bottom: 26px; }
.family-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #9678ba; }
.family-parent { display: flex; align-items: center; gap: 14px; max-width: 270px; padding: 22px; margin: auto; border: 1px solid #dfd2ef; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px #49306809; }
.family-group-mark { width: 48px; height: 48px; background: #f0e9fa; color: #784bad; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.family-parent > div { flex: 1; }
.family-parent small, .family-auth-source small { display: block; color: #74677f; font-size: 11px; margin-bottom: 4px; line-height: 1.4; }
.family-parent strong { font-size: 23px; letter-spacing: -.035em; line-height: 1.2; }
.family-parent > img { object-fit: contain; }
.family-trunk { height: 26px; width: 1px; background: var(--family-line); margin: auto; }
.family-connection-label { width: fit-content; max-width: 100%; margin: 0 auto; padding: 7px 14px; border: 1px solid #dfd4ec; border-radius: 30px; background: #f8f5fc; font-size: 11px; color: #795995; text-align: center; }
.family-children { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; position: relative; list-style: none; padding: 42px 0 0; margin: 0 0 24px; }
.family-children::before { content: ""; position: absolute; left: 50%; height: 21px; top: 0; border-left: 1px solid var(--family-line); }
.family-child { position: relative; border: 1px solid #e6e0ec; border-radius: 14px; padding: 18px 10px 12px; text-align: center; background: #fff; min-width: 0; }
.family-child::before { content: ""; position: absolute; top: -22px; left: -7px; right: -7px; height: 21px; border-top: 1px solid var(--family-line); }
.family-child:first-child::before { left: 50%; }
.family-child:last-child::before { right: 50%; }
.family-child::after { content: ""; position: absolute; height: 21px; border-left: 1px solid var(--family-line); top: -22px; left: 50%; }
.family-child-identity { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.family-child-identity > strong { font-size: 14px; letter-spacing: .06em; color: var(--brand-dark); }
.family-child > small { display: block; min-height: 30px; margin: 6px 0 12px; font-size: 10px; line-height: 1.4; color: #817687; }
.family-brand-mark { width: 30px; height: 30px; position: relative; display: inline-block; flex-shrink: 0; }
.family-brand-mark-forma i { position: absolute; width: 13px; height: 26px; background: #a4775e; top: 2px; left: 1px; border-radius: 15px 15px 0 0; }
.family-brand-mark-forma i + i { left: 16px; transform: rotate(180deg); background: #d4b399; }
.family-brand-mark-north i { position: absolute; width: 24px; height: 25px; bottom: 2px; left: 0; background: #356d56; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.family-brand-mark-north i + i { width: 17px; height: 18px; left: 14px; background: #91ad96; }
.family-brand-mark-mono i { position: absolute; width: 22px; height: 22px; border: 6px solid #655bae; border-radius: 50%; left: 0; top: 0; }
.family-brand-mark-mono i + i { left: 10px; top: 10px; width: 19px; height: 19px; border-color: #b4a9da; }
.family-mini-library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.family-mini-library > span { aspect-ratio: .85; border-radius: 4px; background: var(--brand-tint); position: relative; overflow: hidden; }
.family-mini-library > span:first-child::after { content: ""; position: absolute; inset: 25% 20% 0; border-radius: 15px 15px 0 0; background: var(--brand-accent); }
.family-mini-library > span:nth-child(2) { background: var(--brand-color); }
.family-mini-library > span:nth-child(2)::after { content: ""; position: absolute; inset: 25% 20%; border-top: 2px solid #ffffff8a; border-bottom: 2px solid #ffffff8a; }
.family-mini-library > span:last-child { background: linear-gradient(135deg, var(--brand-accent) 50%, var(--brand-tint) 50%); }
.family-brand-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: 90px; align-items: center; padding-block: 82px 100px; border-top: 1px solid #eae7ef; }
.family-section-copy h2, .family-models h2 { font-size: clamp(30px, 3.2vw, 42px); font-weight: 650; line-height: 1.12; letter-spacing: -.035em; margin: 0 0 24px; text-wrap: balance; }
.family-section-copy > p { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 28px; }
.family-brand-preview { min-width: 0; }
.family-brand-selector { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.family-brand-selector button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 9px 15px; background: #fff; border: 1px solid #e5deee; border-radius: 30px; color: #6b6274; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .05em; cursor: pointer; }
.family-brand-selector button[aria-pressed="true"] { border-color: #9d83bd; background: #f3eef9; color: #4e316e; box-shadow: 0 0 0 1px #9d83bd; }
.family-brand-selector button:hover { background: #f7f4fb; }
.family-brand-selector button:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
.family-brand-selector .family-brand-mark { transform: scale(.6); width: 20px; height: 20px; transform-origin: left center; margin-right: -6px; }
.family-library-window { background: #fff; border: 1px solid #e3dce9; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 50px #3526440b; }
.family-library-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 17px 24px; }
.family-library-header > span:first-child { display: flex; align-items: center; gap: 11px; color: var(--brand-dark); }
.family-library-header strong { font-size: 15px; letter-spacing: .08em; }
.family-library-header > span:last-child { font-size: 11px; color: #807786; }
.family-library-banner { min-height: 176px; padding: 26px; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 12px; background: var(--brand-tint); overflow: hidden; }
.family-library-banner small { display: block; font-size: 11px; color: var(--brand-color); margin-bottom: 9px; }
.family-library-banner strong { display: block; font-size: clamp(23px, 2.5vw, 33px); font-weight: 550; line-height: 1.04; letter-spacing: -.035em; color: var(--brand-dark); max-width: 230px; }
.family-brand-art { height: 125px; position: relative; isolation: isolate; }
.family-brand-art i { position: absolute; bottom: -14px; width: 45%; height: 100%; background: var(--brand-accent); border-radius: 90px 90px 0 0; left: 3%; }
.family-brand-art i:nth-child(2) { left: 38%; background: var(--brand-color); height: 70%; }
.family-brand-art i:nth-child(3) { height: 43%; width: 33%; left: 70%; background: var(--brand-dark); }
.family-theme-north .family-brand-art i { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 70%; left: -7%; }
.family-theme-north .family-brand-art i:nth-child(2) { left: 25%; height: 95%; }
.family-theme-north .family-brand-art i:nth-child(3) { left: 50%; height: 66%; }
.family-theme-mono .family-brand-art i { border-radius: 50%; height: 100px; width: 100px; bottom: 5px; }
.family-theme-mono .family-brand-art i:nth-child(2) { height: 83px; width: 83px; bottom: -10px; }
.family-theme-mono .family-brand-art i:nth-child(3) { height: 52px; width: 52px; bottom: 45px; }
.family-library-content { padding: 20px 24px 16px; }
.family-library-search { display: flex; align-items: center; gap: 8px; color: #928797; background: #f7f5f8; border-radius: 7px; font-size: 11px; padding: 10px 12px; margin-bottom: 16px; }
.family-library-assets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.family-library-assets > div { min-width: 0; }
.family-asset-cover { height: 86px; border-radius: 6px; background: var(--brand-tint); overflow: hidden; }
.family-asset-cover-0 { display: flex; gap: 12px; align-items: center; justify-content: center; }
.family-asset-cover-0 > span:last-child { font-family: Georgia, serif; font-size: 26px; color: var(--brand-dark); }
.family-asset-cover-1 { padding: 16px; background: var(--brand-color); color: #fff; }
.family-asset-cover-1 > span { font-size: 10px; letter-spacing: .05em; }
.family-asset-cover-1 i { display: block; width: 75%; height: 2px; background: #ffffff70; margin-top: 9px; }
.family-asset-cover-1 i:last-child { width: 45%; margin-top: 5px; }
.family-asset-cover-2 .family-brand-art { height: 86px; transform: scale(.9); }
.family-library-assets > div > strong { display: block; min-height: 32px; margin-top: 8px; font-size: 11px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; hyphens: auto; }
.family-local-team { display: flex; gap: 7px; align-items: center; margin: 15px 0 0; padding-top: 14px; border-top: 1px solid #eee9f0; color: #82738c; font-size: 11px; }
.family-brand-preview figcaption { margin: 16px 15px 0; }
.family-account-scope { border-radius: 25px; padding: 28px; background: linear-gradient(150deg, #f1edf8, #f8f7fa); }
.family-auth-source { display: flex; gap: 13px; align-items: center; padding: 19px; background: white; border: 1px solid #e4d8ef; border-radius: 14px; }
.family-auth-source > div { flex: 1; min-width: 0; }
.family-auth-source strong { display: block; font-size: 15px; line-height: 1.3; }
.family-auth-source > svg { flex-shrink: 0; color: #806097; }
.family-scope-connectors { display: flex; justify-content: space-around; height: 28px; }
.family-scope-connectors i { width: 1px; background: var(--family-line); }
.family-scope-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.family-scope-brands > div { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 8px; background: #fff; border-radius: 10px; border: 1px solid #e9e2ef; }
.family-scope-brands strong { font-size: 11px; letter-spacing: .04em; }
.family-local-settings { margin-top: 22px; padding: 20px; border: 1px solid #e5ddef; background: #ffffffb3; border-radius: 14px; }
.family-local-settings > strong { display: block; font-size: 12px; color: #766283; margin-bottom: 13px; }
.family-local-settings > div { display: flex; align-items: center; gap: 10px; font-size: 13px; padding-block: 9px; }
.family-local-settings > div > svg { flex-shrink: 0; color: #8a749d; }
.family-local-settings > div > span { flex: 1; }
.family-account-scope figcaption { margin-top: 18px; }
.family-models { padding-block: 72px 84px; border-bottom: 1px solid #eae7ef; }
.family-models h2 { max-width: 610px; margin-bottom: 40px; }
.family-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; }
.family-model-grid article { min-width: 0; }
.family-model-grid h3 { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; margin: 24px 0 12px; }
.family-model-grid p { font-size: 16px; color: var(--muted); line-height: 1.6; margin: 0; }
.family-model-diagram { padding: 24px 14px; border-radius: 17px; background: color-mix(in srgb, var(--brand-tint) 45%, white); font-size: 10px; text-align: center; color: var(--brand-dark); }
.family-model-diagram > span { position: relative; display: inline-block; border: 1px solid var(--brand-accent); border-radius: 7px; padding: 9px 14px; min-width: 110px; background: #fff; font-size: 12px; font-weight: 500; }
.family-model-diagram > span::after { content: ""; position: absolute; left: 50%; top: 100%; height: 16px; border-left: 1px solid var(--brand-accent); }
.family-model-diagram > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 30px; }
.family-model-diagram > div > span { padding: 8px 2px; background: var(--brand-tint); border-radius: 5px; position: relative; }
.family-model-diagram > div > span::before { content: ""; position: absolute; top: -15px; height: 14px; left: -4px; right: -4px; border-top: 1px solid var(--brand-accent); }
.family-model-diagram > div > span:first-child::before { left: 50%; }
.family-model-diagram > div > span:last-child::before { right: 50%; }
.family-model-diagram > div > span::after { content: ""; position: absolute; top: -15px; height: 15px; left: 50%; border-left: 1px solid var(--brand-accent); }
@media (max-width: 1100px) {
  .family-page .destination-hero { gap: 30px; }
  .family-hierarchy { padding-inline: 18px; }
  .family-brand-section { gap: 40px; }
  .family-model-grid { gap: 24px; }
}
@media (max-width: 900px) {
  .family-page .destination-hero { grid-template-columns: 1fr; }
  .family-hierarchy { width: 100%; max-width: 600px; justify-self: center; }
  .family-page .destination-hero-copy { max-width: 640px; }
  .family-brand-section { grid-template-columns: 1fr; gap: 38px; padding-block: 60px; }
  .family-section-copy { max-width: 580px; }
  .family-brand-preview { width: 100%; max-width: 600px; justify-self: center; }
  .family-library-banner strong { font-size: 33px; }
  .family-model-grid { grid-template-columns: 1fr; gap: 36px; }
  .family-model-grid article { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: 28px; align-items: center; }
  .family-model-diagram { grid-row: span 2; }
  .family-model-grid h3 { margin: 0 0 10px; align-self: end; }
  .family-model-grid p { align-self: start; }
}
@media (max-width: 520px) {
  .family-hierarchy { padding: 23px 12px 20px; border-radius: 20px; }
  .family-children { gap: 7px; }
  .family-child { padding-inline: 6px; }
  .family-child-identity > strong { font-size: 12px; }
  .family-child > small { min-height: 30px; font-size: 9px; }
  .family-mini-library { gap: 3px; }
  .family-parent { padding: 17px; max-width: 245px; }
  .family-brand-selector { gap: 6px; }
  .family-brand-selector button { padding-inline: 12px; font-size: 10px; }
  .family-library-header { padding: 14px 16px; }
  .family-library-header > span:last-child { font-size: 9px; }
  .family-library-banner { padding: 20px 16px; min-height: 158px; }
  .family-library-banner strong { font-size: 27px; }
  .family-library-content { padding: 16px; }
  .family-library-assets { gap: 8px; }
  .family-asset-cover { height: 72px; }
  .family-asset-cover-0 { gap: 5px; }
  .family-asset-cover-0 > span:last-child { font-size: 22px; }
  .family-asset-cover-1 { padding: 12px; }
  .family-account-scope { padding: 23px 16px; }
  .family-auth-source { padding: 15px 12px; gap: 9px; }
  .family-auth-source .family-group-mark { width: 38px; height: 42px; }
  .family-auth-source strong { font-size: 13px; overflow-wrap: anywhere; }
  .family-auth-source small { font-size: 10px; }
  .family-local-settings { padding: 16px; }
  .family-models { padding-block: 52px; }
  .family-model-grid article { display: block; }
  .family-model-grid h3 { margin-top: 20px; }
  .family-model-diagram { padding: 24px 20px; }
}
@media (max-width: 360px) {
  .family-child-identity > strong { font-size: 10px; }
  .family-brand-selector button { padding-inline: 10px; gap: 5px; }
  .family-library-header { padding-inline: 12px; }
  .family-library-header > span:first-child { gap: 6px; }
  .family-library-header strong { font-size: 13px; }
  .family-library-banner strong { font-size: 24px; }
  .family-library-content { padding-inline: 12px; }
  .family-asset-cover-0 .family-brand-mark { transform: scale(.75); }
  .family-asset-cover-0 > span:last-child { font-size: 18px; }
}