/* Hosting uses the shared public palette, typography, cards and controls. */
.host-page :focus-visible { outline: 3px solid var(--nbn-highlight); outline-offset: 5px; }
.host-page .skip-link { position: absolute; left: 18px; top: -100px; z-index: 30; padding: 14px 18px; border-radius: 12px; color: #12172d; background: #fff; }
.host-page .skip-link:focus { top: 12px; }
.host-page .lang-chip[aria-current="true"] { background: rgba(255, 255, 255, .94); color: #12172d; }
.host-page .lang-chip { min-height: 44px; }
.host-page .page-section { margin-top: clamp(40px, 6vw, 72px); }
.host-page .section-head { gap: 12px; margin-bottom: 24px; }
.host-page p, .host-page li { line-height: 1.65; }
.host-page main { overflow-wrap: anywhere; }
.host-availability > div, .host-retention > div { min-width: 0; }
.host-page h2, .host-page h3 { line-height: 1.25; text-wrap: balance; }
.host-page .surface-card p, .host-page .section-card > p, .host-page li p { color: var(--nbn-text-muted); }
.host-hero { margin-top: 24px; }
.host-hero .home-hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: 40px; }
.host-hero .home-hero-eyebrow { font-size: .72rem; letter-spacing: .09em; }
.host-hero .home-hero-eyebrow::before { flex-shrink: 0; }
.host-hero .home-hero-lead { margin-bottom: 16px; }
.host-account { color: var(--nbn-text-muted); font-size: .95rem; max-width: 52ch; }
.host-allowance { border: 1px solid var(--nbn-border-strong); border-radius: var(--nbn-radius-lg); background: rgba(15, 8, 22, .45); padding: 30px; display: grid; gap: 16px; }
.host-allowance .section-kicker { line-height: 1.6; }
.host-allowance .host-allowance-number { font-family: "Palanquin Dark", "DM Sans", sans-serif; font-size: 7rem; line-height: 1; color: var(--nbn-highlight); letter-spacing: -.05em; }
.host-allowance > p:not(.host-allowance-number) { color: var(--nbn-text-muted); font-size: .92rem; }
.host-allowance h2 { font-size: 1.5rem; }
.host-guest-note { display: flex; gap: 12px; align-items: center; }
.host-guest-note i { color: var(--nbn-highlight); font-size: 1.4rem; }
.host-availability { display: flex; gap: 16px; margin-top: 18px; padding: 22px 26px; border: 1px solid rgba(243, 199, 106, .26); border-radius: var(--nbn-radius-md); background: rgba(243, 199, 106, .06); }
.host-availability > i { font-size: 1.4rem; color: var(--nbn-warn); }
.host-availability h2 { color: var(--nbn-warn); font-size: 1.05rem; margin-bottom: 6px; }
.host-availability p { color: var(--nbn-text-muted); font-size: .95rem; max-width: 90ch; }
.host-steps, .host-transfer-steps { padding: 0; margin: 0; list-style: none; counter-reset: host-step; }
.host-steps { display: grid; gap: 0; }
.host-steps li { position: relative; padding: 24px 0 24px 76px; border-top: 1px solid var(--nbn-border); }
.host-steps li::before, .host-transfer-steps li::before { counter-increment: host-step; content: counter(host-step, decimal-leading-zero); font-size: .95rem; font-weight: 700; color: var(--nbn-highlight); }
.host-steps li::before { position: absolute; left: 0; top: 22px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--nbn-border); border-radius: 16px; background: var(--nbn-surface-soft); }
.host-steps h3 { margin-bottom: 8px; }
.host-steps p { max-width: 82ch; }
.host-access-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.host-access-grid .section-card { padding: 28px; }
.host-access-paid { border-color: var(--nbn-secondary); }
.host-page .host-access-label { color: var(--nbn-highlight); font-size: 1.25rem; font-weight: 650; line-height: 1.4; }
.host-professional { display: flex; align-items: center; gap: 30px; margin-top: 20px; padding: 24px; border-radius: var(--nbn-radius-md); background: var(--nbn-surface-soft); }
.host-professional p { color: var(--nbn-text-muted); margin-top: 8px; }
.host-professional .btn { flex-shrink: 0; }
.host-contributions { padding: 32px; }
.host-contributions .lead { margin-top: 4px; max-width: 80ch; }
.host-transfer-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.host-transfer-steps li { border-top: 1px solid var(--nbn-border); padding-top: 18px; }
.host-transfer-steps h3 { margin: 12px 0 8px; }
.host-money-note { margin-top: 16px; padding: 20px; border-left: 3px solid var(--nbn-secondary); background: var(--nbn-surface-soft); }
.host-retention { display: flex; gap: 22px; margin-top: 28px; padding: 26px; hyphens: auto; }
.host-retention > i { color: var(--nbn-highlight); font-size: 1.8rem; }
.host-retention h2 { font-size: 1.25rem; }
.host-retention p { max-width: 85ch; color: var(--nbn-text-muted); margin-top: 8px; }
.host-faq details { border-top: 1px solid var(--nbn-border); }
.host-faq details:last-child { border-bottom: 1px solid var(--nbn-border); }
.host-faq summary { cursor: pointer; padding: 22px 12px; font-weight: 650; line-height: 1.5; }
.host-faq summary::marker { color: var(--nbn-secondary); }
.host-faq details[open] summary { color: var(--nbn-highlight); }
.host-faq details p { color: var(--nbn-text-muted); padding: 0 12px 20px; max-width: 88ch; }
.host-bottom-cta { margin-top: 56px; padding: 40px; }
.host-bottom-cta .actions { justify-content: center; }
.host-app-note { max-width: 68ch; margin: 24px auto 0; color: var(--nbn-text-muted); font-size: .9rem; }
.host-bottom-cta .store-badge-row { margin-top: 24px; justify-content: center; }
@media (max-width: 900px) {
  .host-hero .home-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .host-allowance { gap: 12px; }
  .host-professional { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 640px) {
  .host-page .feature-grid, .host-access-grid, .host-transfer-steps { grid-template-columns: minmax(0, 1fr); }
  .host-page .btn { width: 100%; text-align: center; }
  .host-availability, .host-contributions, .host-access-grid .section-card, .host-allowance, .host-bottom-cta { padding: 22px; }
  .host-availability { gap: 12px; }
  .host-steps li { padding-left: 60px; }
  .host-retention { padding: 16px 6px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .host-page *, .host-page *::before, .host-page *::after { animation: none !important; transition: none !important; }
}