/* Neo-Brutalist — realization of the active design (neo-brutalist).
   Sticker components: 2px borders, hard offset shadows (no blur), static page.
   Polarity: dark sections = #fafafa borders + #f8ca50 shadows;
   yellow sections = #0a0a0a borders + #0a0a0a shadows. */

:root {
  --c-accent-glow: transparent;
}

/* Base: kill every soft shadow/glow; hard shadows are re-added below */
*, *::before, *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

/* Static site: scroll reveals disabled, content always visible */
.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Gradient text retired: solid ink */
.t-h1--gradient {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--c-text);
  color: var(--c-text);
}

/* Ink on accent is always dark, never white */
.pro-badge,
.pricing-card__badge {
  color: #0a0a0a;
}

/* Display type: big and heavy */
.hero-split__title {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin-top: 0;
}

/* Eyebrows hidden everywhere except the Pro label; divider bars gone */
#main .t-overline:not(.pro-section .t-overline),
#main .section-divider {
  display: none;
}

/* —— Buttons: solid and flat, no sticker treatment —— */
.btn,
.site-nav .header-cta {
  transition: background .12s, color .12s, border-color .12s;
}
.btn--primary,
.site-nav .header-cta,
.newsletter__submit {
  background: var(--c-accent);
  color: #0a0a0a;
  border: 2px solid var(--c-accent);
}
.btn--primary:hover,
.site-nav .header-cta:hover,
.newsletter__submit:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  transform: none;
}
.btn--outline,
.btn--ghost {
  border: 2px solid #fafafa !important;
  color: #fafafa !important;
}
.btn--outline:hover,
.btn--ghost:hover {
  border-color: var(--c-accent) !important;
  color: var(--c-accent) !important;
}
/* Yellow grounds: outline/ghost buttons always carry near-black ink */
.cta-final .btn--outline,
.cta-final .btn--ghost {
  border-color: #0a0a0a !important;
  color: #0a0a0a !important;
}
.cta-final .btn--outline:hover,
.cta-final .btn--ghost:hover {
  border-color: #1a1a1d !important;
  color: #1a1a1d !important;
}
/* The newsletter submit is yellow-filled: ink must be near-black even when
   the template also gives it the outline class */
.newsletter__submit,
.btn--outline.newsletter__submit {
  background: var(--c-accent);
  color: #0a0a0a !important;
  border-color: var(--c-accent) !important;
}
.newsletter__submit:hover,
.btn--outline.newsletter__submit:hover {
  background: var(--c-accent-hover);
  color: #0a0a0a !important;
  border-color: var(--c-accent-hover) !important;
}

/* —— Hero refinement —— */
/* One emphasis only: the marker on "WordPress."; "builds" returns to ink */
.hero-split__title .t-accent {
  color: inherit;
}
/* The Latest chip is removed: the top bar already carries announcements */
.hero-news-pill {
  display: none;
}
/* Asklist: 7 prompts at a time, picked at random by JS on each visit.
   No-JS fallback: the first 7 are shown. No PRO badges: everything listed is doable. */
.hero-asklist__q {
  display: none;
}
.hero-asklist__q:nth-child(-n+8) {
  display: block;
}
.hero-asklist__pro {
  display: none;
}
/* Freshly rotated prompt: brief white-marker highlight, then fades to normal */
.hero-asklist__q {
  padding: 0 .35em;
  margin: 0 -.35em;
  transition: background-color .5s ease, color .5s ease;
}
.hero-asklist__q.is-fresh {
  background-color: #fafafa;
  color: #0a0a0a;
}
.hero-asklist__q.is-fresh::before {
  color: #0a0a0a;
}

/* —— Top bar: announcement + resources, solid ink on yellow —— */
.fb-banner {
  font-weight: 600;
}
.fb-banner__icon {
  display: none;
}
.fb-banner__text strong {
  font-weight: 800;
}
.fb-banner__cta {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.fb-banner__links a {
  font-weight: 700;
  letter-spacing: .06em;
}
.fb-banner__links a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* —— Header: clean band with a firm rule under it —— */
.site-header {
  border-bottom: 2px solid var(--c-border-subtle);
}
.site-nav a:hover {
  color: var(--c-accent);
}
.site-nav a.is-current {
  color: var(--c-accent);
}

/* —— Mobile nav: solid ground, no frosted glass —— */
@media (max-width: 900px) {
  .site-nav {
    background: var(--c-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* —— Footer: five balanced columns —— */
.footer-social {
  margin-top: .9rem;
}
.footer-social a {
  color: var(--c-text-muted);
  font-size: 1.05rem;
}
.footer-social a:hover {
  color: var(--c-accent);
}
@media (min-width: 1000px) {
  .footer-cols {
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 640px) and (max-width: 999px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* —— Clients: demoted from full section to a compact static strip —— */
.clients.section--sm {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border-subtle);
  border-bottom: 1px solid var(--c-border-subtle);
}
.clients .t-h2 {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 0;
}
.clients .t-h2 .t-accent {
  color: inherit;
}
.clients__marquee {
  margin: var(--space-md) 0 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.clients__track {
  animation: none;
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2.25rem;
}
.clients__logo[aria-hidden="true"] {
  display: none;
}
.clients__logo {
  width: auto;
  min-height: 0;
  opacity: .85;
}
.clients__logo img {
  height: 32px;
}
.clients__logo-wordmark {
  height: 32px;
  font-size: 1.15rem;
}
.clients__logo-label {
  font-size: .82rem;
}
.clients__logo:has(.clients__logo-wordmark) .clients__logo-label {
  display: none;
}
.clients__footnote {
  margin-top: var(--space-sm);
}

/* —— Dark-section stickers —— */
/* The panel is vertically centered against the text column (theme default);
   JS locks its min-height at first paint so prompt rotation never moves it. */
.hero-asklist {
  border: 2px solid #fafafa;
  background: var(--c-code-bg);
  padding: 1.25rem 1.5rem 1.4rem;
  max-width: 560px;
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 0 var(--c-accent) !important;
}

.hero-asklist__head {
  font-family: var(--font-mono);
  color: var(--c-accent);
  border-bottom: 1px solid var(--c-border-subtle);
  padding-bottom: .75rem;
  margin-bottom: .9rem;
}
.hero-news-pill {
  background: transparent;
  border: 2px solid #fafafa;
}
.hero-news-pill:hover {
  background: transparent;
  border-color: var(--c-accent);
}
.security__panel {
  border: 2px solid #fafafa;
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 0 var(--c-accent) !important;
}
.news-card {
  border: 2px solid #fafafa;
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 0 var(--c-accent) !important;
}
.newsletter__form {
  border: 2px solid #fafafa;
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 0 var(--c-accent) !important;
}
.newsletter__input {
  border: 2px solid var(--c-border);
}
.newsletter__input:focus {
  border-color: var(--c-accent);
}
.qs-step__num {
  border: 2px solid #fafafa;
  background: transparent;
  color: #fafafa;
  font-weight: 800;
}

/* —— Yellow section: What Novamira does —— */
.tools .pro-feature-card {
  border: 2px solid #0a0a0a;
  box-shadow: 8px 8px 0 0 #0a0a0a !important;
  background: #fafafa;
}
.tools .pro-feature-card p {
  color: #1a1a1a;
}
@media (min-width: 900px) {
  .tools .pro-features-grid {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: auto auto;
    gap: 2rem;
  }
  .tools .pro-feature-card:nth-child(1) {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #0a0a0a;
  }
  .tools .pro-feature-card:nth-child(1) .pro-feature__title {
    color: var(--c-accent);
    font-size: 2.4rem;
    line-height: 1.1;
    letter-spacing: -.015em;
  }
  .tools .pro-feature-card:nth-child(1) p {
    color: #d4d4d8;
  }
}
.tools .btn--ghost {
  border-color: #0a0a0a !important;
  color: #0a0a0a !important;
}

/* —— Internal pages: retire old-direction remnants —— */
/* How-it-works: the two prerequisites become full-width side-by-side stickers */
.hiw-prereqs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: none;
}
@media (max-width: 780px) {
  .hiw-prereqs {
    grid-template-columns: 1fr;
  }
}
.hiw-prereq {
  border: 2px solid #fafafa;
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 0 var(--c-accent) !important;
  background: var(--c-surface);
  padding: 1.6rem 1.75rem;
  margin: 0;
}
.hiw-prereq .step__num {
  background: transparent;
  border: none;
  color: var(--c-accent);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  width: auto;
  height: auto;
  line-height: 1;
}

/* Indigo tint on the Pro comparison column becomes a yellow tint */
.tools-comparison__col--pro {
  background: rgba(248, 202, 80, .05);
}
.mcp-versus__col--pro {
  background: rgba(248, 202, 80, .05);
}
/* Decorative gradient wires and step rails become solid hairlines */
.hiw-flow__wire {
  background: var(--c-border) !important;
}
.steps__list::before {
  background: var(--c-border-subtle);
}
.security__panel::before {
  display: none;
}
/* Pricing: sticker treatment, featured card carries the signal */
.pricing-card {
  border: 2px solid var(--c-border-subtle);
}
.pricing-card--featured {
  background: var(--c-surface);
  border: 2px solid var(--c-accent);
  box-shadow: 8px 8px 0 0 var(--c-accent) !important;
}

/* —— Yellow section: Pro CTA —— */
.pro-section {
  background: var(--c-accent);
}
.pro-section .t-overline {
  display: block;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: none;
  line-height: 1.1;
  color: #0a0a0a;
  border: none;
  padding: 0;
  margin-bottom: .35rem;
  background: transparent;
}
.pro-section .t-h2,
.pro-section .t-body,
.pro-section__price {
  color: #0a0a0a;
}
.pro-section__cta {
  justify-content: flex-start;
}
.pro-section .t-accent {
  background: #0a0a0a;
  color: var(--c-accent);
  padding: .02em .3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.pro-section .btn--primary {
  background: #0a0a0a;
  color: var(--c-accent);
  border-color: #0a0a0a;
}
.pro-section .btn--primary:hover {
  background: #1a1a1d;
  border-color: #1a1a1d;
}
.pro-section .btn--outline {
  border-color: #0a0a0a !important;
  color: #0a0a0a !important;
}
.pro-section .btn--outline:hover {
  border-color: #1a1a1d !important;
  color: #1a1a1d !important;
}