/* Page-only layouts; the approved first-screen geometry stays in components.css. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.home-section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:28px}
.home-section-head h2{margin:8px 0 0;font-weight:900;letter-spacing:-.03em}
.home-section-head > p{max-width:470px;color:var(--muted);line-height:1.8}
.home-more{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:24px;color:var(--accent-dark);font-weight:800}
.home-more:hover,.feature-link:hover{color:var(--ink)}
.home-routes .route-table{min-width:720px}
.home-routes .route-table td .flag{margin-right:8px}
.home-routes .route-table td .switch{display:inline-block;vertical-align:middle}
.route-explainer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:24px;color:var(--muted);line-height:1.85}
.route-explainer p{min-width:0}
#server-status:empty{display:none}
.server-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:hidden;max-width:100%;min-width:0;margin-bottom:24px}
.srv-row{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md)}
.srv-dot{width:8px;height:8px;flex-shrink:0;border-radius:var(--r-pill);background:var(--success);box-shadow:0 0 0 3px var(--chip-direct-bg);animation:srv-pulse 2.5s ease-in-out infinite}
.srv-flag{flex-shrink:0}
.srv-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.srv-type{flex-shrink:0;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border-radius:var(--r-pill);background:var(--grad-soft);font-size:12px}
.srv-ms,.srv-bw{flex-shrink:0;font-family:var(--font-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.srv-ms{margin-left:auto}
@keyframes srv-pulse{50%{opacity:.5}}
.home-features{padding-top:72px;padding-bottom:72px;background:var(--bg-deep)}
.feature-layout{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);gap:56px}
.feature-index h2{margin:12px 0 20px;font-weight:900;letter-spacing:-.03em}
.feature-index > p{max-width:350px;color:var(--muted);line-height:1.85}
.feature-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.feature-tabs[role="tablist"]{display:flex;padding:0;background:transparent;border:0;border-radius:0}
.feature-tabs [role="tab"]{width:46px;height:46px;min-height:46px;padding:0;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--panel);font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.feature-tabs [role="tab"][aria-selected="true"]{border-color:var(--accent);border-radius:var(--r-sm);background:var(--accent);color:var(--ink);box-shadow:var(--shadow-hot)}
.feature-detail{min-width:0;border-top:1px solid var(--ink);padding-top:22px}
.feature-detail [role="tabpanel"]{min-width:0}
.feature-kicker{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent-dark)}
.feature-detail h3{display:flex;align-items:center;gap:12px;margin:14px 0 24px;font-weight:900}
.feature-mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px;border-radius:var(--r-sm);background:var(--accent);font-family:var(--font-mono);color:var(--ink)}
.feature-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,30%);align-items:start;gap:24px}
.feature-content p{margin-bottom:16px;color:var(--muted);line-height:1.85}
.feature-link{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0 18px;border:1px solid var(--ink);border-radius:var(--r-pill);font-weight:800;color:var(--ink)}
.feature-mini{display:flex;flex-direction:column;gap:15px;min-width:0;padding:20px;border:3px solid var(--accent);border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-deep)}
.feature-mini > span,.feature-mini small{font-family:var(--font-mono);font-size:11px;color:var(--on-ink-muted)}
.feature-mini strong{overflow-wrap:anywhere;font-family:var(--font-mono);font-size:19px;line-height:1.4}
.home-plans .pricing-card p{min-height:96px;line-height:1.7}
.home-plans .pricing-card .btn-hot,.home-plans .pricing-card .btn-secondary{width:100%}
.pack-note{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:24px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow-card)}
.pack-note p{max-width:800px;margin-top:8px;color:var(--muted);line-height:1.8}
.pack-note .home-more{flex-shrink:0;margin-top:0}
.decision-note{max-width:850px;margin-top:32px;line-height:1.85}
.decision-note h3{margin:0 0 12px}
.decision-note p{color:var(--muted)}
.home-reading{border-top:1px solid var(--border)}
.home-reading .article-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-reading .article-card h3{font-size:20px;line-height:1.4}
.reading-outro{max-width:900px;margin-top:28px;color:var(--muted);line-height:1.85}
.reading-outro a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){
  .home-reading .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-layout{gap:32px}
}
@media(max-width:768px){
  .home-section-head{display:block}
  .home-section-head > p{margin-top:16px}
  .home-features{padding-top:56px;padding-bottom:56px}
  .feature-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .feature-index h2 br{display:none}
  .feature-tabs{flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding-bottom:8px}
  .feature-tabs [role="tab"]{flex-shrink:0}
  .feature-content{grid-template-columns:minmax(0,1fr)}
  .feature-mini{max-width:100%}
  .route-explainer{grid-template-columns:minmax(0,1fr);gap:16px}
  .server-status{grid-template-columns:minmax(0,1fr)}
  .pack-note{align-items:flex-start;flex-direction:column}
}
@media(max-width:640px){
  .home-reading .article-grid{grid-template-columns:minmax(0,1fr)}
  .home-plans .pricing-card p{min-height:0}
  .srv-row{flex-wrap:wrap}
  .srv-ms{margin-left:auto}
  .srv-type{max-width:50%}
}
@media(prefers-reduced-motion:reduce){
  .srv-dot{animation:none}
}