@import url('/design-system.css');

.family-page{margin:0;color:var(--ds-content)}
.family-main,.family-footer{width:min(calc(100% - 48px),1440px);margin-inline:auto}
.family-main{padding:clamp(72px,8vw,128px) 0 80px}
.family-hero{display:grid;min-height:620px;padding:clamp(32px,5vw,72px);grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);align-items:end;gap:clamp(48px,8vw,120px);border:1px solid var(--ds-control-border);border-radius:var(--ds-radius-shell);background:color-mix(in srgb,var(--ds-surface-default) 91%,transparent)}
.family-signal{display:flex;margin:0 0 28px;align-items:center;gap:10px;color:var(--ds-content-muted);font:12px var(--ds-font-mono)}
.family-signal span{width:8px;height:8px;border-radius:50%;background:var(--ds-status-success);box-shadow:0 0 0 5px color-mix(in srgb,var(--ds-status-success) 14%,transparent)}
.family-hero h1{max-width:900px;margin:0;color:var(--ds-content);font-size:clamp(58px,7.5vw,112px);font-weight:680;line-height:.91;letter-spacing:-.04em}
.family-hero-copy>p:last-of-type{max-width:670px;margin:32px 0 0;color:var(--ds-content-secondary);font-size:clamp(16px,1.45vw,21px);line-height:1.55}
.family-actions{display:flex;margin-top:36px;flex-wrap:wrap;gap:10px}
.family-button{display:inline-flex;min-height:52px;padding:0 20px;align-items:center;justify-content:center;border:1px solid var(--ds-control-border);border-radius:var(--ds-radius-control);background:var(--ds-surface-raised-default);color:var(--ds-content);font-size:13px;font-weight:700;text-decoration:none;transition:transform .2s var(--ds-ease),border-color .2s var(--ds-ease)}
.family-button:hover{border-color:var(--ds-action);transform:translateY(-2px)}
.family-button-primary{border-color:var(--ds-action);background:var(--ds-action);color:var(--ds-background)}
.family-endpoint{display:grid;border:1px solid var(--ds-control-border);border-radius:var(--ds-radius-panel);background:var(--ds-surface-raised-default)}
.family-endpoint div{display:grid;padding:20px;gap:8px;border-bottom:1px solid var(--ds-border-soft)}
.family-endpoint div:last-child{border:0}.family-endpoint span{color:var(--ds-content-muted);font:11px var(--ds-font-mono)}.family-endpoint code{overflow-wrap:anywhere;color:var(--ds-content);font:13px/1.5 var(--ds-font-mono)}
.family-catalog{padding:clamp(80px,10vw,144px) 0}.family-catalog>header{display:flex;margin-bottom:32px;align-items:end;justify-content:space-between;gap:32px}.family-catalog h2,.family-route h2{margin:0;font-size:clamp(36px,4.5vw,68px);font-weight:650;line-height:1;letter-spacing:-.04em}.family-catalog header p{max-width:720px;margin:18px 0 0;color:var(--ds-content-muted);line-height:1.65}.family-live{display:flex;min-height:44px;padding:0 14px;align-items:center;gap:9px;border:1px solid var(--ds-control-border);border-radius:var(--ds-radius-control);background:var(--ds-surface-default);color:var(--ds-content-muted);font-size:12px;white-space:nowrap}.family-live i{width:7px;height:7px;border-radius:50%;background:var(--ds-status-success)}
.family-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.family-card{display:grid;min-width:0;min-height:230px;padding:24px;align-content:space-between;gap:28px;border:1px solid var(--ds-control-border);border-radius:var(--ds-radius-panel);background:var(--ds-surface-default)}.family-card.is-unavailable{background:var(--ds-surface-raised-default)}.family-card header{display:grid;gap:8px}.family-card h3{margin:0;overflow-wrap:anywhere;font:650 18px/1.3 var(--ds-font-sans)}.family-card .family-model-id{color:var(--ds-content-muted);font:11px/1.5 var(--ds-font-mono);overflow-wrap:anywhere}.family-card-status{display:inline-flex;width:max-content;min-height:28px;padding:0 10px;align-items:center;border:1px solid color-mix(in srgb,var(--ds-status-success) 38%,var(--ds-control-border));border-radius:var(--ds-radius-pill);color:var(--ds-status-success);font-size:11px;font-weight:700}.is-unavailable .family-card-status{border-color:var(--ds-control-border);color:var(--ds-content-muted)}.family-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.family-prices span{display:grid;min-width:0;gap:5px}.family-prices small{color:var(--ds-content-muted);font-size:10px}.family-prices b{overflow-wrap:anywhere;font:600 13px var(--ds-font-mono)}.family-price-caption{margin:0;color:var(--ds-content-muted);font-size:11px;line-height:1.5}
.family-state{grid-column:1/-1;padding:36px;border:1px dashed var(--ds-control-border);border-radius:var(--ds-radius-panel);color:var(--ds-content-muted);text-align:center}.family-state b{display:block;margin-bottom:8px;color:var(--ds-content);font-size:18px}.family-state button{margin-top:16px}.family-skeleton{display:contents}.family-skeleton i{min-height:230px;border-radius:var(--ds-radius-panel);background:var(--ds-surface-raised-default);animation:family-pulse 1.1s ease-in-out infinite alternate}@keyframes family-pulse{to{opacity:.52}}
.family-route{display:grid;padding:clamp(30px,5vw,64px);grid-template-columns:minmax(0,.85fr) minmax(360px,1.15fr);gap:64px;border-top:1px solid var(--ds-control-border);border-bottom:1px solid var(--ds-control-border);align-items:center}.family-route h2{font-size:clamp(30px,3.4vw,50px)}.family-route p{max-width:580px;color:var(--ds-content-muted);line-height:1.65}.family-route pre{max-width:100%;margin:0;padding:22px;overflow:auto;border:1px solid var(--ds-control-border);border-radius:var(--ds-radius-control);background:var(--ds-surface-raised-default);color:var(--ds-content);font:12px/1.7 var(--ds-font-mono)}
.family-footer{display:grid;padding:40px 0;grid-template-columns:1fr 2fr auto;align-items:start;gap:32px;border-top:1px solid var(--ds-border-soft)}.family-footer nav{display:flex;flex-wrap:wrap;gap:10px 18px}.family-footer nav a,.family-footer p{color:var(--ds-content-muted);font-size:12px;line-height:1.6;text-decoration:none}.family-footer nav a:hover{color:var(--ds-content)}.family-footer p{margin:0;text-align:right}
@media(max-width:1024px){.family-hero{min-height:0;grid-template-columns:1fr}.family-endpoint{grid-template-columns:repeat(3,1fr)}.family-endpoint div{border-right:1px solid var(--ds-border-soft);border-bottom:0}.family-models{grid-template-columns:repeat(2,minmax(0,1fr))}.family-route{grid-template-columns:1fr;gap:32px}.family-footer{grid-template-columns:1fr 1fr}.family-footer p{grid-column:1/-1;text-align:left}}
@media(max-width:600px){.family-main,.family-footer{width:calc(100% - 24px)}.family-main{padding-top:64px}.family-hero{padding:24px 18px;border-radius:var(--ds-radius-panel)}.family-hero h1{font-size:clamp(50px,16vw,68px)}.family-actions{align-items:stretch;flex-direction:column}.family-endpoint{grid-template-columns:1fr}.family-endpoint div{border-right:0;border-bottom:1px solid var(--ds-border-soft)}.family-catalog>header{align-items:flex-start;flex-direction:column}.family-models{grid-template-columns:1fr}.family-card{min-height:210px;padding:20px}.family-route{padding:32px 0}.family-footer{grid-template-columns:1fr}.family-footer p{text-align:left}}
@media(max-width:340px){.family-hero{padding-inline:14px}.family-prices{grid-template-columns:1fr}.family-card{min-height:260px}}
@media(prefers-reduced-motion:reduce){.family-button,.family-skeleton i{animation:none;transition:none}}