:root { --nb-accent: #F1552C; --nb-accent-deep: #B63B1B; --nb-accent-hover: #DA4620; --nb-paper: #F7F5F1; --nb-card: #FCFBF8; --nb-ink: #17120F; --nb-ink-muted: #4B4540; --nb-ink-dim: #6E665E; }
:focus-visible { outline: 3px solid var(--nb-accent-deep); outline-offset: 4px; }
.nb-skip-link { position: absolute; left: 16px; top: -80px; z-index: 200; padding: 12px 18px; background: var(--nb-ink); color: var(--nb-paper); border-radius: 8px; }
.nb-skip-link:focus { top: 12px; }
.nb-migration-notice { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px max(24px, calc((100vw - 1160px)/2)); background: #EFEDE8; border-bottom: 1px solid #D9D3CB; color: #17120F; font-family: var(--nb-font-sans), system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
.nb-migration-notice > div { max-width: 78ch; display: grid; gap: 3px; }
.nb-migration-notice strong { font-size: 14px; font-weight: 650; }
.nb-migration-notice a { flex-shrink: 0; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.nb-migration-notice span { color: #4B4540; }
.nb-migration-page { width: min(100% - 48px, 900px); padding-top: 80px; padding-bottom: 96px; min-height: 55vh; }
.nb-migration-page h1 { max-width: 21ch; font-size: clamp(32px, 5vw, 56px); line-height: 1.12; margin: 18px 0 24px; }
.nb-migration-page p { max-width: 68ch; color: var(--nb-ink-muted); line-height: 1.7; font-family: var(--nb-font-sans), system-ui, sans-serif; }
.nb-migration-page .lede { font-size: 18px; margin-bottom: 24px; }
.nb-migration-page .nb-btn { margin: 20px 12px 0 0; }
.nb-migration-contact { border: 1px solid #D9D3CB; border-radius: 14px; padding: 24px; background: var(--nb-card); }
.nb-migration-contact h2 { font-size: 22px; }
.nb-migration-preview, .nb-migration-docs { font-family: var(--nb-font-sans), system-ui, sans-serif; font-size: 14px; line-height: 1.6; color: #4B4540; background: #EFEDE8; padding: 14px 18px; border: 1px solid #D9D3CB; border-radius: 8px; }
.nb-btn--ember { color: #17120F; }
.nb-btn--ember:hover { background: #B63B1B; color: #F7F5F1; }
@media (max-width: 720px) { .nb-migration-notice { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 24px; } .nb-migration-page { padding-top: 48px; padding-bottom: 64px; } .nb-migration-page .nb-btn { display: flex; width: fit-content; min-height: 44px; } body { overflow-wrap: break-word; } pre { overflow-x: auto; } .nav-links a, .nav-drawer a { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.nb-migration-record { width: 100%; border: 1px solid #D9D3CB; background: #FCFBF8; border-radius: 22px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 18px 50px rgba(23,18,15,.05); text-align: left; }
.nb-migration-record .nb-label { font-size: 12px; color: #B63B1B; }
.nb-migration-record__title { font-family: var(--nb-font-sans), system-ui, sans-serif; font-size: 22px; font-weight: 600; color: #17120F; margin: 24px 0 32px; }
.nb-migration-record__quote { font-family: var(--nb-font-sans), system-ui, sans-serif; font-size: 18px; line-height: 1.7; color: #4B4540; margin: 22px 0; max-width: 38ch; }
.nb-migration-record__line { width: 80%; height: 7px; background: #E5E1DA; border-radius: 8px; }
.nb-migration-record__line--short { width: 55%; }
.nb-migration-record__caption { font: 13px/1.6 var(--nb-font-sans), system-ui, sans-serif; color: #6E665E; border-top: 1px solid #E5E1DA; padding-top: 22px; margin-top: 32px; }
.nb-migration-records-label { font-size: 14px; color: #4B4540; text-align: center; padding: 20px 0; }
#features .modes { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 720px) { #features .modes { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .hero { padding-top: 44px; } }

.nb-contact { max-width:640px; margin:32px 0; }
.nb-contact h2 { font-size:clamp(24px,4vw,36px); line-height:1.15; }
.nb-contact fieldset { border:0; margin:24px 0 0; padding:0; display:grid; gap:10px; min-width:0; }
.nb-contact label { font-size:14px; font-weight:600; margin-top:8px; }
.nb-contact input,.nb-contact textarea { width:100%; min-width:0; box-sizing:border-box; background:#fcfbf8; color:#17120f; border:1px solid #c7beb5; border-radius:10px; padding:12px 14px; font:inherit; }
.nb-contact textarea { resize:vertical; }
.nb-contact button { margin-top:12px; justify-self:start; }
.nb-contact fieldset:disabled { opacity:.6; }
.nb-contact [data-contact-status] { min-height:24px; margin:18px 0; font-size:14px; }
.nb-contact [role=alert] { color:#a52c12; }
.nb-contact a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:480px) { .nb-contact button { width:100%; justify-content:center; } }