/* NEXX audit completion layer — additive, URL/SEO/funnel safe. */
:root {
  /* Compact 4px rhythm. The previous audit layer accidentally doubled the
     shared shell scale and made every card, FAQ row and CTA oversized. */
  --nx-space-1: .25rem;
  --nx-space-2: .5rem;
  --nx-space-3: .75rem;
  --nx-space-4: 1rem;
  --nx-space-5: 1.25rem;
  --nx-space-6: 1.5rem;
  --nx-space-8: 2rem;
  --nx-touch: 3rem;
  --nx-wa: #117f3a;
}

/* The audit found local pages that explicitly zeroed the keyboard ring. */
html body :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--nx-accent-soft, #67e8f9) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--nx-ink, #060a12) !important;
}

.nx-skip-link {
  position: fixed;
  z-index: 100000;
  top: max(.5rem, env(safe-area-inset-top, 0px));
  left: max(.5rem, env(safe-area-inset-left, 0px));
  min-height: var(--nx-touch);
  display: inline-flex;
  align-items: center;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: var(--nx-text, #f8fafc);
  color: var(--nx-ink, #060a12);
  font: 700 .875rem/1.2 var(--nx-font-body, system-ui, sans-serif);
  text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform .16s ease;
}
.nx-skip-link:focus-visible { transform: translateY(0); }

.nx-audit-breadcrumbs {
  position: relative;
  z-index: 2;
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding-top: calc(5rem + env(safe-area-inset-top, 0px));
  color: var(--nx-muted, #94a3b8);
  font: 600 .8125rem/1.5 var(--nx-font-body, system-ui, sans-serif);
}
.nx-audit-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx-audit-breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; }
.nx-audit-breadcrumbs li + li::before { content: "/"; color: var(--nx-faint, #64748b); }
.nx-audit-breadcrumbs a {
  min-height: var(--nx-touch);
  display: inline-flex;
  align-items: center;
  color: var(--nx-accent-soft, #67e8f9);
  text-underline-offset: .2em;
}
.nx-audit-breadcrumbs [aria-current="page"] { color: var(--nx-text, #f1f5f9); }

/* The breadcrumb supplies the fixed-header offset; avoid a second large empty band. */
.nx-has-audit-breadcrumbs :is(.nx-page-hero, .nx-guide-hero, .nx-b2b-hero) { padding-top: var(--nx-space-4); }
.nx-has-audit-breadcrumbs #app > main > :first-child { scroll-margin-top: 7rem; }
.nx-has-audit-breadcrumbs :is(.nx-page-hero, .nx-guide-hero, .nx-b2b-hero) > .nx-shell {
  padding-top: var(--nx-space-4) !important;
}
.nx-has-audit-breadcrumbs #app > article.nx-prose,
.nx-has-audit-breadcrumbs #app > article.nx-bios {
  padding-top: var(--nx-space-4) !important;
}

/* One reading system for guides and legal/service prose. */
.nx-prose :is(p, li),
.nx-guide-article :is(p, li),
.nx-guide-body article :is(p, li) { line-height: 1.6; }
.nx-prose,
.nx-prose article,
.nx-guide-article,
.nx-guide-body article { max-width: 65ch; }
.nx-prose :is(h2, h3),
.nx-guide-article :is(h2, h3) { scroll-margin-top: 7rem; }

/* Consistent 48px targets across desktop and touch layouts. */
html body .nx-guide-link { min-height: var(--nx-touch); display: inline-flex; align-items: center; }
html body header :is(a, button),
html body footer :is(.nx-foot-link, .nx-foot-contact a, .nx-foot-location, a[aria-label], a[href="/directions"]) {
  min-height: var(--nx-touch) !important;
}
html body footer :is(.nx-foot-link, .nx-foot-contact a, a[href="/directions"]) {
  display: flex;
  align-items: center;
}
html body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: var(--nx-touch); }

/* WhatsApp green meets AA with white type; other CTAs stay visibly secondary. */
html body :is(.nx-page-btn--wa, .nx-btn--wa, .nx-sticky-mobile-cta a[href*="wa.me"], a[href*="api.whatsapp.com"]) {
  background: #117f3a !important;
  border-color: #0d6c31 !important;
  color: #fff !important;
}
#b2b-form p.text-slate-500 { color: var(--nx-muted, #94a3b8) !important; }
#b2b-form .nx-b2b-channels a[href*="wa.me"] { color: #4ade80 !important; }
.nx-guide-cta-row .nx-page-btn--primary:not([href*="wa.me"]),
.nx-page-cta .nx-page-btn--primary:not([href*="wa.me"]) {
  background: transparent;
  border-color: color-mix(in srgb, var(--nx-brand, #1d4ed8) 72%, var(--nx-border, #334155));
  color: var(--nx-text, #f1f5f9);
}
.nx-guide-cta-row .nx-page-btn--primary:not([href*="wa.me"]):hover,
.nx-page-cta .nx-page-btn--primary:not([href*="wa.me"]):hover {
  background: color-mix(in srgb, var(--nx-brand, #1d4ed8) 16%, transparent);
}
.nx-sticky-mobile-cta .nx-sticky-mobile-cta__secondary {
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--nx-brand, #1d4ed8) 72%, var(--nx-border, #334155)) !important;
  color: var(--nx-text, #f1f5f9) !important;
}

/* Form help, inline errors, progress and result states. */
.nx-field-help,
.nx-field-error {
  display: block;
  margin-top: .5rem;
  font: 600 .8125rem/1.45 var(--nx-font-body, system-ui, sans-serif);
}
.nx-field-help { color: var(--nx-muted, #94a3b8); }
.nx-field-error { color: #fca5a5; }
html body [aria-invalid="true"] {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important;
}
html body form[aria-busy="true"] { cursor: progress; }
html body form[aria-busy="true"] :is(input, select, textarea, button) { opacity: .72; }

/* Preserve a usable page when JavaScript is unavailable or still loading. */
.nx-prerender-fallback {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: var(--nx-space-4) 0 var(--nx-space-8);
  color: var(--nx-text, #f1f5f9);
  font-family: var(--nx-font-body, system-ui, sans-serif);
}
.nx-prerender-fallback h1 { margin: 0 0 var(--nx-space-2); font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.08; }
.nx-prerender-fallback h2 { margin: var(--nx-space-4) 0 var(--nx-space-2); font-size: clamp(1.25rem, 4vw, 1.75rem); }
.nx-prerender-fallback p,
.nx-prerender-fallback li { max-width: 65ch; line-height: 1.6; color: var(--nx-muted, #cbd5e1); }
.nx-prerender-fallback a { color: var(--nx-accent-soft, #67e8f9); }
.nx-prerender-fallback__links { display: grid; gap: var(--nx-space-1); padding-left: 1.2rem; }

/* Complete the 8pt cadence without changing content order or page identity. */
.nx-b2b-section,
.nx-guide-body { padding-block: clamp(var(--nx-space-4), 6vw, var(--nx-space-8)); }
.nx-b2b-form-card { gap: var(--nx-space-2); }
.nx-tile-grid,
.nx-guide-list,
.nx-flow { gap: var(--nx-space-2); }

@media (max-width: 767px) {
  body:has(.nx-sticky-mobile-cta) { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); }
  .nx-audit-breadcrumbs {
    width: min(100% - 1rem, 72rem);
    padding-top: calc(4.25rem + env(safe-area-inset-top, 0px));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nx-audit-breadcrumbs ol { flex-wrap: wrap; width: 100%; max-width: 100%; }
  .nx-audit-breadcrumbs li:last-child { min-width: 0; max-width: 100%; }
  .nx-audit-breadcrumbs li:last-child span {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .nx-guide-cta-row,
  .nx-b2b-cta-row { align-items: stretch; }
  .nx-guide-cta-row .nx-page-btn,
  .nx-b2b-cta-row .nx-page-btn { flex: 1 1 100%; }
}

@media (min-width: 768px) {
  .nx-audit-breadcrumbs { padding-top: calc(4.5rem + env(safe-area-inset-top, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .nx-skip-link { transition: none; }
}

/* Light palette completion: keep the dark theme untouched and translate
   legacy dark-page utilities into one accessible daylight scale. */

/* SEO service, contact and diagnostic articles still carry dark Tailwind
   utility names in their generated markup. Scope the translation to the
   article so header, footer and branded buttons remain intentional. */

/* FAQ and About used deliberately dark section utilities before a light theme
   existed. These semantic wrappers let the whole page follow the chosen theme. */

/* A light document may still contain intentionally dark chrome. Reset its
   local tokens so inherited light typography never becomes dark-on-dark. */

/* One contrast-safe treatment for remaining light-theme links and states. */

/* The mobile conversion rail is a single light surface. Legacy dark utility
   classes otherwise leave its secondary CTA dark-on-dark in the light theme. */

/* Keep the map legible: the generic overlay uses --nx-ink, which is a near-white
   canvas in the light theme and previously washed the whole map out. */

/* Final full-sitemap pass: a few legacy standalone pages still wrap their
   content in Tailwind's dark canvas utilities. Keep their hero intentionally
   dark, but let the reading surface follow the selected light theme. */

/* Muted utility colors were created for larger desktop copy. Raise them to a
   single AA-safe dark-theme tone for captions, bylines and footer legal text. */

/* Backgrounded WhatsApp CTAs use one accessible green in both themes. Inline
   WhatsApp links keep the normal link palette. */
html body.nx-page a[href*="wa.me"][class*="bg-"],
html body.nx-page a[href*="api.whatsapp.com"][class*="bg-"] {
  background: #0b7a3d !important;
  border-color: #086532 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body.nx-page a[href*="wa.me"][class*="bg-"]:hover,
html body.nx-page a[href*="api.whatsapp.com"][class*="bg-"]:hover {
  background: #086532 !important;
  color: #fff !important;
}

/* Colour-first daylight theme (2026-08-30).
   The dark theme remains the default. In light mode, white is reserved for
   form controls; page bands and cards carry a restrained NEXX colour tint. */

/* Mobile BIOS decision screen — compact without removing proof or payment
   choices. This late layer also reaches cached standalone HTML pages. */
@media (max-width: 639px) {
  body.nx-page .nx-bios:has(.nx-bios-hero) {
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  }
  body.nx-page .nx-bios-hero {
    gap: 0.875rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 14px;
  }
  body.nx-page .nx-bios-hero__eyebrow {
    margin-bottom: 0.55rem;
    font-size: 0.75rem;
    line-height: 1.35;
  }
  body.nx-page .nx-bios-hero h1.nx-h1 {
    margin-bottom: 0.75rem;
    font-size: 1.82rem;
    line-height: 1.06;
  }
  body.nx-page .nx-bios-hero .nx-bios-lead {
    margin-bottom: 0.85rem;
    font-size: 0.925rem;
    line-height: 1.5;
  }
  body.nx-page .nx-bios-hero__owner {
    margin-bottom: 0.75rem;
  }
  body.nx-page .nx-bios-hero__owner .nx-bios-owner {
    gap: 0.65rem;
    margin-bottom: 0.45rem;
    padding: 0.7rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
  }
  body.nx-page .nx-bios-hero__owner-note {
    font-size: 0.7rem;
    line-height: 1.4;
  }
  body.nx-page .nx-bios-hero__payment-title {
    margin-bottom: 0.45rem;
  }
  body.nx-page .nx-bios-hero__actions {
    gap: 0.55rem;
  }
  body.nx-page .nx-bios-hero__actions > .nx-bios-cta {
    min-height: 50px;
  }
  body.nx-page .nx-bios-hero__secondary-actions {
    margin-top: 0.55rem;
  }
  body.nx-page .nx-bios-hero__facts {
    padding: 0.75rem;
  }
  body.nx-page .nx-bios-hero__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.75rem;
    margin-bottom: 0.75rem;
  }
  body.nx-page .nx-bios-hero__trust-item {
    gap: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.35;
  }
  body.nx-page .nx-bios-hero__code {
    gap: 0.2rem 0.45rem;
    margin-bottom: 0.55rem;
    padding-top: 0.65rem;
    font-size: 0.75rem;
    line-height: 1.35;
  }
  body.nx-page .nx-bios-hero__code strong {
    font-size: 0.875rem;
  }
  body.nx-page .nx-bios-hero__note {
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

/* BIOS phone funnel v2: keep the first decision compact after this late layer. */
@media (max-width: 480px) {
  body.nx-page:has(.nx-bios-hero) .nx-audit-breadcrumbs {
    display: none;
  }
  body.nx-page.nx-has-audit-breadcrumbs #app > article.nx-bios:has(.nx-bios-hero) {
    padding-top: calc(4.5rem + env(safe-area-inset-top, 0px)) !important;
  }
  body.nx-page .nx-bios-hero {
    gap: 0.7rem;
    padding: 0.82rem;
  }
  body.nx-page .nx-bios-hero__eyebrow {
    margin-bottom: 0.42rem;
  }
  body.nx-page .nx-bios-hero h1.nx-h1 {
    margin-bottom: 0.58rem;
    font-size: clamp(1.58rem, 7.4vw, 1.78rem);
    line-height: 1.04;
  }
  body.nx-page .nx-bios-hero .nx-bios-lead {
    margin-bottom: 0.68rem;
    font-size: 0.86rem;
    line-height: 1.4;
  }
  body.nx-page .nx-bios-checker {
    padding: 0.7rem;
  }
  body.nx-page .nx-bios-checker__head {
    margin-bottom: 0.52rem;
  }
  body.nx-page .nx-bios-checker__title {
    font-size: 1rem;
  }
  body.nx-page .nx-bios-checker__lead {
    font-size: 0.75rem;
    line-height: 1.36;
  }
  body.nx-page .nx-bios-checker__input,
  body.nx-page .nx-bios-checker__submit {
    min-height: 46px;
  }
  body.nx-page .nx-bios-checker__hint {
    margin-top: 0.42rem;
    font-size: 0.875rem;
    line-height: 1.45;
  }
  body.nx-page .nx-bios-checker__help {
    margin-top: 0.52rem;
  }
  body.nx-page .nx-bios-checker__help summary {
    min-height: 36px;
    padding-top: 0.52rem;
  }
  body.nx-page .nx-bios-checker__meta {
    display: grid;
    gap: 0.12rem;
    margin-top: 0.48rem;
  }
  body.nx-page .nx-bios-checker__meta p {
    font-size: 0.66rem;
    line-height: 1.32;
  }
}