/* FAMILY visual identity and page layout. */
footer.footer-bg{overflow:clip}
.family-hero-art{position:absolute;right:0;top:0;height:100%;width:max(100%,calc(max(100dvh,var(--hero-min-height))*1.778723));min-width:100%;max-width:none;object-fit:cover;object-position:right center}
.pixel-bg-hero .hero-notif-position{left:var(--family-notif-left,71%);top:var(--family-notif-top,36dvh);right:auto;width:290px;margin:0;transform:translate(-50%,-100%);pointer-events:none}
.pixel-bg-hero .hero-notif-stack{width:100%;transform:matrix(1,-.066,-.19,1,0,0) scale(var(--family-notif-scale,.9));transform-origin:50% 100%;filter:drop-shadow(0 7px 8px #07354820)}
.pixel-bg-hero .hero-notif-stack-list{width:100%}
.pixel-bg-hero>div:first-child{background:#119df3}
section[aria-label="All the agents and workflows in one FAMILY"]{background-image:linear-gradient(#063f6999,#063f6959),url('/family-art/family-workflows.png')!important;background-position:center!important}
section[aria-label="All the agents and workflows in one FAMILY"]>div.pointer-events-none{display:none}
.family-ecosystem-card>img{object-fit:cover!important;border-radius:9px}
.site-header a[aria-label="Home"]{display:inline-flex;align-items:center;gap:9px}

@media(max-width:600px){.pixel-bg-hero>div:first-child{min-height:860px}.family-hero-art{width:185%;height:auto;min-width:0;right:-17%;top:auto;bottom:0;object-fit:contain}}
.family-wordmark{display:block;width:170px;height:34px;color:#262323}.family-wordmark text{font-family:var(--font-neoris),sans-serif;font-weight:530}.family-wordmark image{border-radius:7px}

body:not(.family-static):has(.pixel-bg-hero) .site-header .family-wordmark{color:white;text-shadow:0 1px 1px #0002}
body:not(.family-static):has(.pixel-bg-hero) .site-header.family-scrolled .family-wordmark{color:#262323;text-shadow:none}
body:not(.family-static):has(.pixel-bg-hero) .site-header:has(.nav-link.text-ink-ui) .family-wordmark{color:#262323;text-shadow:none}
.site-header:has(a[href="/how-to/start"]) a[aria-label="Home"]{min-width:126px;text-decoration:none}
footer a[href="/resources"][aria-label="X"],footer a[href="/resources"][aria-label="LinkedIn"]{display:none}
.family-x-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:41px;padding:0 18px;border:1px solid #ffffff4d;border-radius:8px;background:#fbfbf8;color:#262323;text-decoration:none;font-size:15px;font-weight:460;white-space:nowrap;box-shadow:0 1px 3px #0002;transition:background .2s,transform .2s}
.family-x-link:hover{background:white;transform:translateY(-1px)}
.family-x-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.family-dapp-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:41px;padding:0 14px;border:1px solid #d7ffdf99;border-radius:8px;background:#d5f4c8;color:#24412e;text-decoration:none;white-space:nowrap;font-size:15px;font-weight:530;box-shadow:inset 0 1px 0 #ffffff88,0 2px 4px #0635481a;transition:background .2s,transform .2s}
.family-dapp-link:hover{background:#e5ffdb;transform:translateY(-1px)}
.family-dapp-link:focus-visible{outline:2px solid white;outline-offset:4px}
.family-dapp-link>span{font-family:monospace;font-size:20px;line-height:1}
.family-ca{display:flex;align-items:center;gap:12px;width:min(100%,540px);margin-top:18px;padding:13px 16px;border:1px solid #ffffff45;border-radius:9px;background:#063d691f;box-shadow:inset 0 1px 0 #ffffff18;backdrop-filter:blur(14px);color:white}
.family-ca-label{font-family:var(--font-ibm-plex-mono),monospace;font-size:12px;letter-spacing:.06em;padding-right:16px;border-right:1px solid #ffffff40}
.family-ca-value{display:flex;align-items:center;gap:10px;min-width:0;flex:1;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;text-align:left;font-size:12px;font-family:var(--font-ibm-plex-mono),monospace}
.family-ca-address{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;user-select:all}
.family-ca-copy{flex:none;font-size:10px;min-width:38px;text-align:center;padding:3px 5px;border:1px solid #ffffff55;border-radius:4px}
.family-ca-value:hover .family-ca-copy{background:#ffffff24}
.family-ca-value:focus-visible{outline:2px solid white;outline-offset:5px;border-radius:3px}
.family-ca-network{margin-left:auto;font-size:11px;border:1px solid #ffffff40;border-radius:4px;padding:3px 7px;color:#ffffffe0}
@media(max-width:500px){.family-ca{margin-top:15px;gap:12px;padding:12px 14px}.family-x-link{padding:0 14px}}
.family-static{background:var(--color-surface,#f6f6f2);color:#262323;font-family:var(--font-neoris),sans-serif}
.family-static .site-header{background:#f6f6f2!important;border-bottom:1px solid #26232312!important}
.family-static [data-reveal],.family-static .reveal{opacity:1!important;transform:none!important}
.family-resource-grid{align-items:start}
.family-resource-item{width:100%;max-width:328px;min-width:0}
.family-resource-card{width:100%!important;max-width:328px}
.family-resource-card>div>div:first-child{width:100%!important}
.family-resource-preview{width:calc(100% - 36px)!important;max-width:292px}
.family-guide{display:grid;grid-template-columns:260px minmax(0,620px);gap:80px;max-width:1080px;margin:0 auto;padding:156px 24px 110px;width:100%}
.family-guide aside{position:sticky;top:128px;align-self:start;font-size:14px}
.family-guide aside>a{display:block;padding:10px 12px;border-radius:6px;text-decoration:none;color:#72726d}
.family-guide aside>a span{font-size:12px;margin-right:8px;opacity:.5}
.family-guide aside>a.active{background:#e9e9e5;color:#262323}
.family-eyebrow{font-family:var(--font-ibm-plex-mono),monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8d8b85}
.family-guide aside>.family-eyebrow{margin:0 12px 18px}
.family-toc{margin:28px 12px;display:grid;gap:13px}
.family-toc a{color:#8d8b85;text-decoration:none;font-size:13px;line-height:1.5}
.family-toc a:hover,.family-source a:hover{color:#262323}
.family-chapter{display:inline-block;border:1px solid #deded8;border-radius:20px;padding:4px 9px;font-size:12px;line-height:1;color:#92938a;box-shadow:0 1px 1px white}
.family-guide h1,.family-article h1,.family-ecosystem h1{font-size:40px;font-weight:460;line-height:1.15;margin:24px 0;letter-spacing:-.02em}
.family-lead{font-size:17px;line-height:1.65;color:#808179;margin:24px 0 40px}
.family-guide-art{width:100%;height:auto;max-height:430px;object-fit:cover;border-radius:16px;border:8px solid #efefeb;box-shadow:0 1px 4px #0001;margin:24px 0 32px}
.family-guide section,.family-article section{margin-top:60px;scroll-margin-top:120px}
.family-guide h2,.family-article h2,.family-faq h2{font-size:26px;font-weight:460;line-height:1.3;margin-bottom:20px}
.family-guide article p:not(.family-eyebrow),.family-article p{font-size:16px;line-height:1.75;color:#7b7d74}
.family-next{display:inline-block;margin-top:58px;padding:13px 18px;border-radius:8px;background:#eeeeea;color:#444;text-decoration:none;box-shadow:0 1px 1px white inset,0 1px 3px #0001}
.family-source{margin-top:32px!important;font-size:13px!important}.family-source a{text-decoration:underline}
.family-article{max-width:708px;padding:170px 24px 120px;width:100%;margin:auto}
.family-article>.family-eyebrow{font-size:12px}.family-article h1{font-size:42px}
.family-static header button[aria-label]{cursor:pointer}
.family-mobile-menu[hidden]{display:none}.family-mobile-menu{position:fixed;inset:70px 0 auto;background:#f6f6f2;z-index:200;padding:25px;box-shadow:0 10px 18px #0001;display:grid;gap:18px}
.family-mobile-menu a{color:#4b4c45;text-decoration:none;font-size:18px}
.family-ecosystem{max-width:1200px;width:100%;padding:164px 24px 100px;margin:auto}.family-center{text-align:center}.family-center h1{margin-top:0}.family-ecosystem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:65px 0 100px}
.family-ecosystem-card{padding:20px 16px 30px;border-radius:16px;border:1px solid #dddcd5;background:#fbfbf8;box-shadow:0 2px 3px #00000008;color:inherit;text-decoration:none;transition:transform .3s;display:flex;flex-direction:column}
.family-ecosystem-card:hover{transform:translateY(-8px)}.family-card-top{display:flex;justify-content:space-between;align-items:center;font-size:16px}.family-card-top strong{font-weight:530}.family-card-top span{font-size:13px;color:#777}.family-ecosystem-card>img{height:185px;object-fit:contain;margin:22px 0;width:100%}
.family-ecosystem-card h2{font-size:38px;font-weight:460;margin:10px 0}.family-ecosystem-card p{font-size:15px;line-height:1.6;color:#808078}.family-ecosystem-card ul{list-style:none;padding:24px 0 0;margin-top:auto}.family-ecosystem-card li{font-size:14px;line-height:1.7;margin-top:9px;color:#65675e}.family-ecosystem-card li::before{content:"✓";margin-right:10px;color:#839573}
.family-faq{max-width:720px;margin:auto}.family-faq>h2{text-align:center;margin-bottom:40px}.family-faq details{border-bottom:1px solid #deded8;padding:22px 0}.family-faq summary{cursor:pointer;list-style:none;font-size:17px}.family-faq summary::after{content:"+";float:right}.family-faq details[open] summary::after{content:"−"}.family-faq p{color:#7b7d74;line-height:1.7;font-size:16px;padding-right:25px;margin-top:20px}
@media(max-width:999px){.site-header .family-wordmark{width:140px;height:28px}.site-header a[aria-label="Home"]{min-width:90px!important}.family-guide{grid-template-columns:190px minmax(0,620px);gap:32px;padding-top:120px}.family-ecosystem-grid{gap:14px}.family-ecosystem-card{padding:16px 12px}.family-ecosystem-card h2{font-size:30px}}
@media(max-width:700px){.family-guide{display:block;padding:108px 20px 70px}.family-guide aside{position:static;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 38px}.family-guide aside .family-eyebrow{width:100%;margin-left:0}.family-guide aside>a{font-size:13px;padding:8px}.family-guide aside>a span,.family-toc,.family-download{display:none!important}.family-guide h1,.family-article h1,.family-ecosystem h1{font-size:32px}.family-guide-art{margin-top:12px}.family-guide h2{font-size:24px}.family-article{padding-top:120px}.family-ecosystem{padding-top:120px}.family-ecosystem-grid{grid-template-columns:1fr;max-width:400px;margin:45px auto 75px;gap:26px}.family-ecosystem-card{padding:20px}.family-ecosystem-card>img{height:220px}}