:root {
  --brand: #1B4F72;
  --brand-ink: #123855;
  --brand-tint: #E8F0F7;
  --brand-ring: rgba(27, 79, 114, .18);
  --ink-1: #0E1B25;
  --ink-2: #2B3944;
  --ink-3: #5A6875;
  --ink-4: #8995A2;
  --surface: #FFFFFF;
  --surface-2: #F7F9FB;
  --surface-3: #EEF2F6;
  --paper-1: #F1ECE0;
  --paper: #F1ECE0;
  --paper-2: #E8DEC4;
  --hairline: #E3E8ED;
  --hairline-2: #D6DCE3;
  --pass: #1E7E46;
  --pass-bg: #E7F3EC;
  --mid: #B07206;
  --mid-bg: #FBF0DA;
  --fail: #B4311C;
  --fail-bg: #FBE9E5;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-1: 0 1px 2px rgba(14,27,37,.04), 0 1px 1px rgba(14,27,37,.03);
  --shadow-2: 0 2px 6px rgba(14,27,37,.06), 0 1px 2px rgba(14,27,37,.04);
}

@media (prefers-color-scheme: dark) {
  .eyebrow:not(.hero-eyebrow),
  .stat-l,
  .summary-l,
  .updated,
  .divider,
  .install-close,
  .card-footer,
  .auth-shell .muted,
  .login .muted {
    color: var(--ink-2) !important;
  }

  .hero .eyebrow,
  .hero-note {
    color: rgba(241,236,224,.84) !important;
  }

  .nav-brand-word {
    color: var(--ink-1) !important;
  }

  .hub-tag {
    background: var(--brand-tint) !important;
    color: var(--brand-ink) !important;
    border-color: var(--brand-ring) !important;
  }

  .number-card,
  .q-options li,
  .study-plan-step {
    background: var(--surface) !important;
    border-color: var(--hairline) !important;
    color: var(--ink-2) !important;
  }

  .number-card *,
  .q-options li,
  .q-options li *,
  .study-plan-step * {
    color: var(--ink-2) !important;
  }

  .hero-btn,
  .full-cta-btn,
  .cta-inline-btn,
  .cta-btn {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
  }

  .step-num,
  .step-circle {
    background: var(--brand) !important;
    color: #fff !important;
  }

  .area-bar-carpet {
    background: var(--brand) !important;
    color: #fff !important;
  }

  .area-bar-loading {
    background: #8A4F00 !important;
    color: #fff !important;
  }

  .result-main-label,
  .card-cat,
  .card-read,
  .section-num,
  .summary-v {
    color: var(--brand-ink) !important;
  }

  .hub-hero {
    color: var(--paper-1) !important;
  }

  .hub-hero .number-card,
  .intro-box,
  .why-box,
  .q-block2 {
    background: var(--surface) !important;
    border-color: var(--hairline) !important;
    color: var(--ink-2) !important;
  }

  .hub-hero .number-card *,
  .intro-box *,
  .why-box *,
  .q-block2 * {
    color: var(--ink-2) !important;
  }

  .auth-shell > div,
  .auth-shell .footer,
  .auth-shell .card-footer,
  .login > div,
  .login .footer {
    color: var(--ink-2) !important;
  }

  .area-bar-carpet *,
  .area-bar-loading * {
    color: #fff !important;
  }

  .sec-chev {
    color: var(--ink-2) !important;
  }
}

html,
body {
  font-family: var(--font-sans) !important;
  color: var(--ink-2) !important;
  background: var(--surface-2) !important;
  letter-spacing: 0 !important;
}

h1,
h2,
.sec-title,
.cta-title,
.hero-title,
.t-display,
.t-title,
.price-amt,
.stat-v,
.ring-num,
.score-num {
  font-family: var(--font-display) !important;
  letter-spacing: 0 !important;
}

.nav,
.topnav,
.d-nav {
  background: rgba(255,255,255,.94) !important;
  color: var(--ink-1) !important;
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
}

.nav-logo,
.logo,
.foot-logo {
  color: var(--ink-1) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.re-brand::before,
.nav-logo.re-brand::before,
.nav-drawer-logo.re-brand::before {
  content: none !important;
  display: none !important;
}

.nav-logo span,
.foot-logo span,
.logo span:last-child {
  color: var(--ink-1) !important;
}

.logo-mark,
.auth-logo,
.nav-logo::before {
  background: var(--ink-1) !important;
  color: var(--paper-2) !important;
  border: 1px solid rgba(232,222,196,.45) !important;
  box-shadow: inset 0 0 0 1px rgba(232,222,196,.18) !important;
  font-family: var(--font-display) !important;
}

.nav-logo::before {
  content: "RE";
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  font-size: 11px;
  letter-spacing: 1px;
  vertical-align: middle;
}

.nav-cta,
.btn-primary,
.btn-pay,
.btn-cta,
.cta-btn,
.pw-pay-btn,
#pw-pay-btn,
.auth-shell .btn-primary {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.nav-cta:hover,
.btn-primary:hover,
.btn-pay:hover,
.btn-cta:hover,
.cta-btn:hover {
  background: var(--brand-ink) !important;
}

.btn-ghost,
.btn-secondary {
  border-color: rgba(255,255,255,.28) !important;
  border-radius: var(--r-md) !important;
}

.hero,
.cta,
.hero-card,
.d-hero,
.res-paywall {
  background: #0E1B25 !important;
  color: #fff !important;
}

.hero::before,
.ld-hero::before {
  background: radial-gradient(circle at 20% 20%, rgba(77,161,217,.24), transparent 55%) !important;
}

.hero h1,
.hero h1 span,
.cta-title,
.hero-title,
.d-hero h2,
.res-paywall h3 {
  color: #fff !important;
}

.hero h1 span,
.hero-eyebrow,
.eyebrow,
.eyebrow-sm,
.ld-kicker {
  color: var(--paper-2) !important;
}

.hero-sub,
.cta-sub,
.d-hero .d-hero-sub,
.res-paywall p {
  color: rgba(255,255,255,.76) !important;
}

.hero-eyebrow,
.ld-kicker {
  background: rgba(232,222,196,.11) !important;
  border: 1px solid rgba(232,222,196,.28) !important;
  border-radius: 999px !important;
}

.hero-dot,
.k-dot {
  background: var(--paper-2) !important;
}

.trust,
.problem,
.how,
.pricing,
.faq,
footer {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
}

.features,
.testimonials,
.syllabus,
.ld-section,
.ld-pricing {
  background: var(--surface-2) !important;
}

.prob-card,
.feat-card,
.test-card,
.syl-item,
.price-card,
.card,
.panel,
.stat-box,
.inset-row,
.option,
.login,
.auth-shell,
.modal-box,
.pw-card,
.pw-price-card,
.ld-feat,
.ld-pricing-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-1) !important;
}

.price-card {
  border: 1px solid var(--brand) !important;
}

.price-badge,
.chip,
.pass-tag {
  background: var(--brand-tint) !important;
  color: var(--brand-ink) !important;
}

.option.selected,
.option.ok {
  border-color: var(--pass) !important;
  background: var(--pass-bg) !important;
}

.option.bad {
  border-color: var(--fail) !important;
  background: var(--fail-bg) !important;
}

.tab-item.active .tab-icon svg,
.tab-item.active .tab-label,
.tab.active,
a,
.nav-link:hover,
.nav-link.active,
.d-links a.active {
  color: var(--brand) !important;
}

.xp-fill,
.bar > i,
.m-bar,
.syl-bar {
  background: var(--brand) !important;
}

.foot-inner,
footer {
  color: var(--ink-3) !important;
}

.foot-links a {
  color: var(--ink-3) !important;
}

body {
  background:
    linear-gradient(180deg, rgba(241,236,224,.56), rgba(247,249,251,0) 280px),
    var(--surface-2) !important;
}

.app,
.screen-wrap,
.login {
  background: transparent !important;
}

.hero-card,
.xp-wrap,
.card,
.panel,
.stat-box,
.inset-row,
.option,
.auth-shell,
.paywall-nudge,
.pw-card,
.res-hero,
.res-section {
  border-radius: 12px !important;
}

.hero-card,
.d-hero,
.fh-hero {
  border: 1px solid rgba(232,222,196,.16) !important;
}

.fh-hero,
.d-hero,
.res-paywall {
  background:
    radial-gradient(circle at 16% 12%, rgba(77,161,217,.2), transparent 48%),
    #0E1B25 !important;
}

.fh-hero h2,
.d-hero h2,
.res-paywall h3 {
  font-family: var(--font-display) !important;
}

.t-display,
.hero-title,
.streak-num,
.stat-v,
.ring-num,
.score-num,
.price-amt {
  font-variant-numeric: lining-nums !important;
}

.topnav .logo-mark,
.auth-shell .auth-logo {
  border-radius: 50% !important;
}

.tab-bar,
.tabbar {
  background: rgba(255,255,255,.94) !important;
  border-top: 1px solid var(--hairline) !important;
}

.tab-item,
.tab {
  color: var(--ink-3) !important;
}

.inset-icon,
.lf-ic,
.feat-icon,
.pf-ic {
  background: var(--brand-tint) !important;
  color: var(--brand) !important;
  border-radius: 8px !important;
}

.field,
.otp-input,
.pin-input,
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="number"] {
  border-radius: 8px !important;
  border-color: var(--hairline-2) !important;
}

.modal-box,
.pw-modal,
.pay-box {
  border-radius: 12px !important;
}

.welcome-card,
.install-card {
  border-radius: 12px !important;
  border: 1px solid var(--hairline) !important;
}

/* New RERAexam shared chrome. Loaded after page-local CSS so it wins everywhere. */
.re-nav,
.nav.re-nav {
  background: #0E1B25 !important;
  color: var(--paper-2) !important;
  border-bottom: 1px solid rgba(232,222,196,.16) !important;
  box-shadow: none !important;
}

.re-nav .nav-inner,
.re-nav-inner {
  max-width: 1120px !important;
  height: 64px !important;
  margin: 0 auto !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.re-brand,
.nav-logo.re-brand,
.nav-drawer-logo.re-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--paper-2) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.re-brand-mark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
}

.re-brand-word,
.re-brand-word em {
  color: var(--paper-2) !important;
}

.re-brand-word em {
  font-style: italic !important;
  font-weight: 400 !important;
}

.re-nav-links,
.re-nav .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 10px !important;
}

.re-nav .nav-link,
.re-login {
  color: rgba(232,222,196,.76) !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  padding: 8px 10px !important;
}

.re-nav .nav-link:hover,
.re-nav .nav-link.active {
  color: var(--paper-2) !important;
  background: rgba(232,222,196,.08) !important;
}

.re-nav-spacer {
  flex: 1 !important;
}

.re-nav-cta,
.nav-cta.re-nav-cta {
  background: var(--paper-2) !important;
  color: var(--ink-1) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.re-nav .nav-hamburger {
  color: var(--paper-2) !important;
  background: transparent !important;
}

.re-drawer,
.nav-drawer.re-drawer {
  background: var(--surface) !important;
  border-left: 1px solid var(--hairline) !important;
}

.re-drawer .re-brand-word,
.re-drawer .re-brand-word em,
.re-drawer .nav-drawer-logo {
  color: var(--ink-1) !important;
}

.re-drawer .nav-drawer-cta {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.re-footer {
  background: #0E1B25 !important;
  color: rgba(232,222,196,.68) !important;
  padding: 38px 22px !important;
  border-top: 1px solid rgba(232,222,196,.16) !important;
}

.re-footer-inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
}

.re-footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--paper-2) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.re-footer-brand img {
  width: 34px !important;
  height: 34px !important;
}

.re-footer-brand em {
  font-style: italic !important;
  font-weight: 400 !important;
}

.re-footer p {
  margin: 0 !important;
  color: rgba(232,222,196,.66) !important;
  font-size: 14px !important;
}

.re-footer-links {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.re-footer-links a {
  color: var(--paper-2) !important;
  font-size: 13px !important;
}

/* Mature RERAExam-style footer, recolored for the new institutional brand. */
.site-footer,
.re-site-footer {
  background: #0E1B25 !important;
  color: rgba(232,222,196,.68) !important;
  padding: 56px 24px 0 !important;
  margin-top: 80px !important;
  border-top: 1px solid rgba(232,222,196,.16) !important;
  font-family: var(--font-sans) !important;
}

.footer-inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 2fr 1fr 1.2fr 1fr !important;
  gap: 44px !important;
  padding-bottom: 48px !important;
  border-bottom: 1px solid rgba(232,222,196,.13) !important;
}

.footer-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  color: var(--paper-2) !important;
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.footer-logo img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
}

.footer-logo em {
  font-style: italic !important;
  font-weight: 400 !important;
}

.footer-tagline {
  max-width: 290px !important;
  margin: 0 0 20px !important;
  color: rgba(232,222,196,.58) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.footer-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  background: var(--paper-2) !important;
  color: var(--ink-1) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.footer-col-title {
  margin-bottom: 14px !important;
  color: rgba(232,222,196,.45) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.footer-link {
  display: block !important;
  margin-bottom: 10px !important;
  color: rgba(232,222,196,.68) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.footer-link:hover {
  color: var(--paper-2) !important;
}

.footer-bottom {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 20px 0 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  color: rgba(232,222,196,.38) !important;
  font-size: 12px !important;
}

.footer-disclaimer {
  color: rgba(232,222,196,.28) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

@media (max-width: 820px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 34px !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
  }
  .footer-tagline {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* Page-level editorial surfaces. */
.page,
.article,
.content,
main.main {
  color: var(--ink-2) !important;
}

.page h1,
.article h1,
.content h1,
.page h2,
.article h2,
.content h2,
.card-title {
  font-family: var(--font-display) !important;
  color: var(--ink-1) !important;
  letter-spacing: 0 !important;
}

.sub,
.card-sub,
.page p,
.article p,
.content p {
  color: var(--ink-3) !important;
}

.form-submit,
.btn-primary,
button[type="submit"] {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.form-submit:hover,
.btn-primary:hover,
button[type="submit"]:hover {
  background: var(--brand-ink) !important;
}

/* Clean up inherited iOS-blue article pages. */
.page-insights .hero,
.page-insight-server .insight-hero,
.page-insight-server .article-hero,
.page-pattern .exam-pattern-hero {
  background:
    radial-gradient(circle at 18% 14%, rgba(77,161,217,.2), transparent 45%),
    #0E1B25 !important;
  color: var(--paper-1) !important;
  border: 1px solid rgba(232,222,196,.14) !important;
}

.page-pattern .exam-pattern-hero {
  margin: 0 0 30px !important;
  padding: 42px 34px !important;
  border-radius: 12px !important;
}

.page-insights .hero h1 span,
.page-pattern .pattern-kicker,
.page-insight-server .insight-kicker,
.page-insight-server .article-kicker {
  color: var(--paper-2) !important;
}

.page-insights .controls {
  top: 64px !important;
  background: rgba(255,255,255,.94) !important;
  border-color: var(--hairline) !important;
}

.page-insights .search-wrap input,
.page-insights .sort-select,
.page-contact input,
.page-contact textarea,
.page-contact select {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-2) !important;
  border-radius: 8px !important;
}

.page-insights .cat-btn,
.page-insights .page-btn {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 8px !important;
  color: var(--ink-3) !important;
}

.page-insights .cat-btn.active,
.page-insights .page-btn.active,
.page-insights .featured-badge,
.page-insights .featured-new {
  background: var(--brand-tint) !important;
  border-color: var(--brand-tint) !important;
  color: var(--brand-ink) !important;
}

.page-insights .featured-accent {
  background: linear-gradient(180deg, var(--brand), var(--paper-2)) !important;
}

.page-insights .featured,
.page-insights .card,
.page-contact .contact-card,
.page-contact .form-box,
.page-pattern .summary-box,
.page-pattern .tip-card,
.page-pattern .faq-item,
.page-pattern .section-card,
.page-pattern .disclaimer,
.page-insight-server .insight-card,
.page-insight-server .article-body,
.page-insight-server .article-cta {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-1) !important;
}

.page-pattern .pattern-table th {
  background: var(--ink-1) !important;
  color: var(--paper-2) !important;
}

.page-pattern .summary-v,
.page-pattern .section-num,
.page-pattern .faq-q::after,
.page-insights .card-cat,
.page-insights .card-read,
.page-insights .featured-cta,
.page-contact .contact-card a {
  color: var(--brand) !important;
}

.page-pattern .tip-num {
  background: var(--brand-tint) !important;
  color: var(--brand-ink) !important;
  border-radius: 8px !important;
}

.page-pattern .section-card {
  border-left: 1px solid var(--hairline) !important;
}

.page-contact .contact-card-icon {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  background: var(--brand-tint) !important;
  color: var(--brand-ink) !important;
  border-radius: 8px !important;
  font-size: 0 !important;
}

.page-contact .contact-card-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.page-insight-server .insight-hero-inner,
.page-insight-server .article-hero-inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 68px 24px !important;
}

.page-insight-server .insight-hero h1,
.page-insight-server .article-hero h1,
.page-pattern .exam-pattern-hero h1 {
  max-width: 760px !important;
  margin: 14px 0 14px !important;
  color: var(--paper-1) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  line-height: 1.05 !important;
}

.page-insight-server .insight-hero p,
.page-insight-server .article-hero p,
.page-pattern .exam-pattern-hero p {
  max-width: 720px !important;
  color: rgba(255,255,255,.74) !important;
}

.page-insight-server .insight-wrap,
.page-insight-server .article-body {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 42px 24px 80px !important;
}

.page-insight-server .insight-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

.page-insight-server .insight-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 22px !important;
  color: inherit !important;
  text-decoration: none !important;
}

.page-insight-server .insight-card h2,
.page-insight-server .article-body h2,
.page-insight-server .article-cta h2 {
  font-family: var(--font-display) !important;
  color: var(--ink-1) !important;
}

.page-insight-server .insight-card-kicker,
.page-insight-server .insight-card-meta,
.page-insight-server .article-back,
.page-insight-server .insight-tag {
  color: var(--brand) !important;
  font-weight: 750 !important;
}

.page-insight-server .article-body {
  max-width: 760px !important;
}

.page-insight-server .article-body p,
.page-insight-server .article-body li {
  color: var(--ink-2) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.page-insight-server .article-back {
  display: inline-flex !important;
  margin-bottom: 26px !important;
  text-decoration: none !important;
}

.page-insight-server .article-cta {
  margin-top: 38px !important;
  padding: 28px !important;
}

.page-insight-server .article-cta a {
  display: inline-flex !important;
  min-height: 42px !important;
  align-items: center !important;
  padding: 0 18px !important;
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

/* Login/auth page hardening. */
.main .card,
main.main > .card {
  border: 1px solid var(--hairline) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-2) !important;
}

.phone-wrap:focus-within,
.field-input:focus,
.otp-digit:focus,
.pin-digit.filled {
  border-color: var(--brand) !important;
  background: var(--surface) !important;
}

.pin-digit.dot::after {
  color: var(--brand) !important;
}

.card-footer a,
.resend-btn,
.nav-back {
  color: var(--brand) !important;
}

@media (max-width: 760px) {
  .re-nav-links,
  .re-login,
  .re-nav-cta {
    display: none !important;
  }

  .re-nav .nav-hamburger {
    display: flex !important;
  }

  .re-footer-inner {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #4DA1D9;
    --brand-ink: #7FB9E0;
    --brand-tint: #15293A;
    --ink-1: #E8EEF4;
    --ink-2: #C2CDD8;
    --ink-3: #8C98A5;
    --surface: #121B24;
    --surface-2: #0B1319;
    --surface-3: #1B2632;
    --hairline: #233140;
    --hairline-2: #2E3F52;
  }

  .nav,
  .topnav,
  .d-nav {
    background: rgba(5,9,13,.92) !important;
  }

  .logo-mark,
  .auth-logo,
  .nav-logo::before {
    background: var(--paper-2) !important;
    color: var(--ink-1) !important;
  }
}

/* Legacy app hardening.
   Several inherited pages ship their own blue/iOS tokens inside page-local
   style blocks. This final layer keeps every URL on the newer institutional
   RERAExam system without editing each app surface by hand. */
:root {
  --blue: var(--brand) !important;
  --blue-dark: var(--brand-ink) !important;
  --blue-bg: var(--brand-tint) !important;
  --purple: #7A5C2E !important;
  --purple-bg: #F1E7D0 !important;
  --teal: #4D7C8A !important;
  --teal-bg: #E6EEF0 !important;
  --orange: #B87732 !important;
  --orange-bg: #F3E4CF !important;
  --gold: #B89045 !important;
  --gold-bg: #F4ECD9 !important;
  --bg: var(--surface-2) !important;
  --surface: #FFFFFF !important;
  --fill2: #F7F3EA !important;
  --fill3: #ECE3D2 !important;
  --lbl: var(--ink-1) !important;
  --lbl2: var(--ink-2) !important;
  --lbl3: var(--ink-3) !important;
  --sep: var(--hairline) !important;
  --sep2: var(--hairline-2) !important;
  --fd: var(--font-display) !important;
  --f: var(--font-sans) !important;
}

.tab-item.active .tab-icon svg,
.tab-item.active .tab-label,
.nav-logo span,
.link,
.text-blue,
.accent,
.filter-chip.active,
.chip.active {
  color: var(--brand) !important;
  stroke: var(--brand) !important;
}

.tab-bar,
.bottom-nav,
.mobile-tabs {
  background: rgba(255,255,255,.94) !important;
  border-color: var(--hairline) !important;
}

.nav-timer,
.stat-pill,
.badge,
.pill {
  border-color: var(--hairline) !important;
  background: var(--brand-tint) !important;
  color: var(--brand) !important;
}

.option.selected,
.answer-option.selected,
.choice.selected,
.topic-card.active,
.mode-card.active {
  border-color: var(--brand) !important;
  background: var(--brand-tint) !important;
}

.progress-fill,
.bar-fill,
.mastery-fill,
.score-fill,
.loader,
.spinner {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

svg [stroke="#2563eb"],
svg [stroke="#3b82f6"],
svg [stroke="#0a84ff"] {
  stroke: var(--brand) !important;
}

svg [fill="#2563eb"],
svg [fill="#3b82f6"],
svg [fill="#0a84ff"] {
  fill: var(--brand) !important;
}

[style*="#2563eb"],
[style*="#3b82f6"],
[style*="#0a84ff"],
[style*="background:#2563eb"],
[style*="background: #2563eb"] {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

.hero,
.page-hero,
.article-hero,
.calc-hero {
  background: linear-gradient(135deg, #0E1B25 0%, #18354A 54%, #E8DEC4 190%) !important;
  color: var(--paper-1) !important;
}

.hero h1,
.page-hero h1,
.article-hero h1,
.calc-hero h1 {
  color: var(--paper-1, #F1ECE0) !important;
  font-family: var(--font-display) !important;
}

/* Shared partial safety net. This keeps the fetched nav/footer from inheriting
   stronger page-local rules on older calculator/article pages. */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

#nav-placeholder,
#footer-placeholder {
  width: 100% !important;
  max-width: 100% !important;
}

.nav.re-nav {
  width: 100% !important;
  max-width: 100vw !important;
}

.nav.re-nav .re-nav-inner {
  width: 100% !important;
  max-width: 1180px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.nav-drawer.re-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(320px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  z-index: 1000 !important;
  transform: translateX(110%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: transform .24s ease, visibility .24s ease !important;
}

.nav-drawer.re-drawer.open {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.nav-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999 !important;
  background: rgba(14,27,37,.38) !important;
  display: none !important;
  opacity: 0 !important;
}

.nav-drawer-backdrop.open {
  display: block !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .nav.re-nav .nav-links,
  .nav.re-nav .re-nav-links,
  .nav.re-nav .re-login,
  .nav.re-nav .re-nav-cta,
  .re-nav .nav-links.re-nav-links {
    display: none !important;
  }

  .nav.re-nav .nav-hamburger,
  .re-nav .nav-hamburger {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  .nav.re-nav .re-nav-inner {
    height: 58px !important;
    padding-inline: 16px !important;
    gap: 10px !important;
    max-width: 100vw !important;
  }

  .nav.re-nav .re-brand {
    min-width: 0 !important;
  }

  .nav.re-nav .re-brand-word {
    font-size: 19px !important;
    white-space: nowrap !important;
  }
}

table.pattern-table,
table.info-table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

table.pattern-table th,
table.pattern-table td,
table.info-table th,
table.info-table td {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (max-width: 760px) {
  table.pattern-table,
  table.info-table {
    font-size: 12px !important;
  }

  table.pattern-table th,
  table.pattern-table td,
  table.info-table th,
  table.info-table td {
    padding: 9px 8px !important;
  }

  .hero-card::before,
  .hero-card::after,
  div[style*="right:-30px"][style*="width:120px"] {
    display: none !important;
  }
}

/* Contrast lock.
   The inherited RERAExam pages include many page-local dark-mode blocks.
   They were designed for the old blue theme and can collide with the newer
   institutional brand layer. Keep every page on one readable light system,
   even when the visitor's OS is in dark mode. */
html {
  color-scheme: light !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #1B4F72 !important;
    --brand-ink: #123855 !important;
    --brand-tint: #E8F0F7 !important;
    --brand-ring: rgba(27, 79, 114, .18) !important;
    --ink-1: #0E1B25 !important;
    --ink-2: #2B3944 !important;
    --ink-3: #5A6875 !important;
    --ink-4: #8995A2 !important;
    --ink-5: #B7C0C9 !important;
    --surface: #FFFFFF !important;
    --surface-2: #F7F9FB !important;
    --surface-3: #EEF2F6 !important;
    --paper-1: #F1ECE0 !important;
    --paper: #F1ECE0 !important;
    --paper-2: #E8DEC4 !important;
    --hairline: #E3E8ED !important;
    --hairline-2: #D6DCE3 !important;
    --pass: #1E7E46 !important;
    --pass-bg: #E7F3EC !important;
    --mid: #B07206 !important;
    --mid-bg: #FBF0DA !important;
    --fail: #B4311C !important;
    --fail-bg: #FBE9E5 !important;
    --blue: var(--brand) !important;
    --blue-dark: var(--brand-ink) !important;
    --blue-bg: var(--brand-tint) !important;
    --bg: var(--surface-2) !important;
    --fill: var(--surface) !important;
    --fill2: #F7F3EA !important;
    --fill3: #ECE3D2 !important;
    --lbl: var(--ink-1) !important;
    --lbl2: var(--ink-2) !important;
    --lbl3: var(--ink-3) !important;
    --sep: var(--hairline) !important;
    --sep2: var(--hairline-2) !important;
  }

  html,
  body {
    background:
      linear-gradient(180deg, rgba(241,236,224,.56), rgba(247,249,251,0) 280px),
      var(--surface-2) !important;
    color: var(--ink-2) !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  .calc-title,
  .faq-q,
  .result-main-value,
  .result-row-value,
  .nav-drawer-logo,
  .page-title,
  .card-title {
    color: var(--ink-1) !important;
  }

  p,
  li,
  .calc-sub,
  .result-note,
  .result-row-label,
  .faq-a,
  .page-sub,
  .muted,
  .tiny,
  .card-sub,
  .disclaimer {
    color: var(--ink-3) !important;
  }

  .calc-card,
  .faq-item,
  .disclaimer,
  .info-table,
  .contact-card,
  .form-box,
  .card,
  .panel,
  .result,
  .result-row,
  .nav-dropdown-menu,
  .nav-drawer,
  .summary-box,
  .tip-card,
  .section-card,
  .insight-card,
  .article-body,
  .article-cta,
  div[style*="background:#fff"],
  div[style*="background: #fff"],
  div[style*="background:white"],
  div[style*="background: white"] {
    background: var(--surface) !important;
    border-color: var(--hairline) !important;
    color: var(--ink-2) !important;
  }

  .field input,
  .field select,
  input,
  textarea,
  select,
  .field,
  .otp-input,
  .pin-input {
    background: var(--surface) !important;
    border-color: var(--hairline-2) !important;
    color: var(--ink-1) !important;
  }

  .field input::placeholder,
  input::placeholder,
  textarea::placeholder {
    color: var(--ink-4) !important;
  }

  .info-table td,
  .pattern-table td {
    background: var(--surface) !important;
    color: var(--ink-2) !important;
    border-color: var(--hairline) !important;
  }

  .info-table tr:nth-child(even) td,
  .pattern-table tr:nth-child(even) td {
    background: var(--surface-2) !important;
  }

  .rate-note,
  .nav-timer,
  .stat-pill,
  .badge,
  .pill,
  .result-row.total,
  .result-row.highlight,
  .result-row.grand {
    background: var(--brand-tint) !important;
    color: var(--brand-ink) !important;
    border-color: var(--brand-ring) !important;
  }

  .result-row.warn {
    background: var(--mid-bg) !important;
    color: var(--mid) !important;
  }

  .result-row.warn .result-row-label,
  .result-row.warn .result-row-value {
    color: var(--mid) !important;
  }

  .nav-dropdown-item,
  .nav-drawer-link,
  .nav-drawer-close {
    color: var(--ink-1) !important;
  }

  .nav-dropdown-item:hover,
  .nav-drawer-link:hover {
    background: var(--surface-3) !important;
  }

  .nav-drawer-section {
    color: var(--ink-4) !important;
  }

  .nav-drawer-divider {
    border-color: var(--hairline) !important;
  }

  .cta-box,
  .hero,
  .page-hero,
  .article-hero,
  .calc-hero,
  .page-insight-server .insight-hero,
  .page-insight-server .article-hero,
  .page-pattern .exam-pattern-hero {
    background:
      radial-gradient(circle at 18% 14%, rgba(77,161,217,.2), transparent 45%),
      #0E1B25 !important;
    color: var(--paper-1) !important;
  }

  .cta-box h1,
  .cta-box h2,
  .cta-box p,
  .hero h1,
  .hero h2,
  .hero p,
  .page-hero h1,
  .page-hero p,
  .article-hero h1,
  .article-hero p,
  .calc-hero h1,
  .calc-hero p,
  .page-insight-server .insight-hero h1,
  .page-insight-server .insight-hero p,
  .page-insight-server .article-hero h1,
  .page-insight-server .article-hero p,
  .page-pattern .exam-pattern-hero h1,
  .page-pattern .exam-pattern-hero p {
    color: var(--paper-1) !important;
  }

  .re-nav .re-brand-word,
  .re-nav .re-brand-word em,
  .re-brand-word,
  .re-brand-word em {
    color: var(--paper-2) !important;
  }

  .q-block,
  .q-text,
  .q-options,
  .info-card,
  .scenario-card,
  .step-card,
  .highlight-box,
  .summary-card,
  .sample-question,
  .practice-card,
  .question-card,
  .paper-card,
  .note-card,
  .rule-card,
  .topic-card,
  .mode-card,
  .module-card,
  .law-card {
    background: var(--surface) !important;
    border-color: var(--hairline) !important;
    color: var(--ink-2) !important;
  }

  .q-block *,
  .q-text,
  .q-options,
  .q-options li,
  .info-card *,
  .scenario-card *,
  .step-card *,
  .highlight-box *,
  .summary-card *,
  .sample-question *,
  .practice-card *,
  .question-card *,
  .paper-card *,
  .note-card *,
  .rule-card *,
  .topic-card *,
  .mode-card *,
  .module-card *,
  .law-card * {
    color: inherit !important;
  }

  table,
  thead,
  tbody,
  tr,
  td {
    background: var(--surface) !important;
    color: var(--ink-2) !important;
    border-color: var(--hairline) !important;
  }

  th,
  .info-table th,
  .pattern-table th {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
  }

  label,
  .field label,
  .updated,
  .contact-card-label {
    color: var(--ink-2) !important;
  }

  .contact-card-value,
  .result-main-value,
  .result-row-value {
    color: var(--ink-1) !important;
  }

  .exam-badge,
  .chapter-badge,
  .tag,
  .hub-tag {
    background: var(--brand-tint) !important;
    color: var(--brand-ink) !important;
    border-color: var(--brand-ring) !important;
  }

  .chapter-title {
    background: var(--brand) !important;
    color: #fff !important;
  }

  .hub-hero,
  .hub-header,
  .hero-section {
    background:
      radial-gradient(circle at 18% 14%, rgba(77,161,217,.2), transparent 45%),
      #0E1B25 !important;
  }

  .hub-hero *,
  .hub-header *,
  .hero-section * {
    color: var(--paper-1) !important;
  }
}

/* Final dark-mode contrast sweep. Keep this last. */
@media (prefers-color-scheme: dark) {
  .eyebrow:not(.hero-eyebrow),
  .stat-l,
  .summary-l,
  .updated,
  .divider,
  .install-close,
  .card-footer,
  .auth-shell .muted,
  .login .muted {
    color: var(--ink-2) !important;
  }

  .hero .eyebrow,
  .hero-note {
    color: rgba(241,236,224,.84) !important;
  }

  .nav-brand-word {
    color: var(--ink-1) !important;
  }

  .hub-tag {
    background: var(--brand-tint) !important;
    color: var(--brand-ink) !important;
    border-color: var(--brand-ring) !important;
  }

  .number-card,
  .q-options li,
  .study-plan-step {
    background: var(--surface) !important;
    border-color: var(--hairline) !important;
    color: var(--ink-2) !important;
  }

  .number-card *,
  .q-options li,
  .q-options li *,
  .study-plan-step * {
    color: var(--ink-2) !important;
  }

  .hero-btn,
  .full-cta-btn,
  .cta-inline-btn,
  .cta-btn {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
  }

  .step-num,
  .step-circle {
    background: var(--brand) !important;
    color: #fff !important;
  }

  .area-bar-carpet {
    background: var(--brand) !important;
    color: #fff !important;
  }

  .area-bar-loading {
    background: #8A4F00 !important;
    color: #fff !important;
  }

  .result-main-label,
  .card-cat,
  .card-read,
  .section-num,
  .summary-v {
    color: var(--brand-ink) !important;
  }
}

/* Final inline-style contrast repairs. Keep this after all page CSS. */
@media (prefers-color-scheme: dark) {
  main.main .card > div[style*="var(--lbl4)"],
  main.main .card > div[style*="var(--lbl4)"] a,
  .login [style*="color:var(--lbl4)"],
  .login [style*="color:var(--lbl4)"] a,
  [style*="color:#0a84ff"],
  [style*="color: #0a84ff"],
  [style*="color:#ff9500"],
  [style*="color: #ff9500"] {
    color: var(--ink-2) !important;
  }

  [style*="background:#0a84ff"][style*="color:#fff"],
  [style*="background: #0a84ff"][style*="color:#fff"],
  [style*="background:#0a84ff"][style*="color: #fff"],
  [style*="background: #0a84ff"][style*="color: #fff"] {
    background: var(--brand) !important;
    color: #fff !important;
  }
}

/* Ultimate generated-page dark-mode lock. CertForge pages are intentionally light themed. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --bg: var(--paper-1);
    --surface: #fff;
    --card: #fff;
    --lbl: var(--ink-1);
    --lbl2: var(--ink-2);
    --lbl3: var(--ink-3);
    --lbl4: var(--ink-3);
    --sep: var(--hairline);
    --blue: var(--brand);
    --blue-dark: var(--brand-ink);
    --blue-light: var(--brand-tint);
    --green: #216E45;
    --green-dark: #216E45;
    --green-light: #E9F5EF;
  }

  html,
  body,
  main,
  .main,
  .page,
  .content,
  .article,
  .article-content,
  .policy,
  .policy-page,
  .policy-content {
    background: var(--paper-1) !important;
    color: var(--ink-2) !important;
  }

  h1:not(.hero-title),
  h2:not(.hero-title),
  h3,
  h4,
  h5,
  h6,
  .tip-title,
  .section-title,
  .feature-title,
  .faq-q,
  .result-main-value,
  .result-value,
  .stat-value,
  .num-value,
  .pt-penalty {
    color: var(--ink-1) !important;
  }

  p,
  li,
  .tip-text,
  .section-body,
  .feature-text,
  .faq-a,
  .q-explain,
  .q-exp2,
  .disclaimer,
  .summary-box,
  .card-footer,
  .footer-disclaimer {
    color: var(--ink-2) !important;
  }

  .policy-content a,
  .article-content a,
  .page > p a,
  .page li a,
  main.main p a,
  main.main li a {
    color: var(--brand) !important;
  }

  .re-nav,
  .nav.re-nav,
  .re-nav .nav-inner,
  .re-nav-inner {
    background: #0E1B25 !important;
    color: var(--paper-2) !important;
  }

  .re-nav .nav-link,
  .re-login,
  .re-nav .nav-right a,
  .re-nav .nav-brand,
  .re-nav .re-brand,
  .re-nav .re-brand-word,
  .re-nav .re-brand-word em {
    color: rgba(232,222,196,.82) !important;
  }

  .re-nav .nav-link:hover,
  .re-nav .nav-link.active,
  .re-login.active {
    background: var(--brand) !important;
    color: #fff !important;
  }

  .stat-box,
  .info-card,
  .scenario-card,
  .q-block,
  .q-block2,
  .feature-card,
  .faq-item,
  .disclaimer,
  .section-card,
  .topic-card,
  .study-plan-step,
  .summary-box,
  .intro-box,
  .why-box,
  .result,
  .form-card,
  .auth-card {
    background: #fff !important;
    border-color: var(--hairline) !important;
    color: var(--ink-2) !important;
  }

  .q-options li,
  .q-opts2 li,
  ul.q-options li,
  ul.q-opts2 li {
    background: #fff !important;
    border-color: var(--hairline) !important;
    color: var(--ink-2) !important;
  }

  .q-options li.correct,
  .q-opts2 li.correct,
  ul.q-options li.correct,
  ul.q-opts2 li.correct {
    background: #E9F5EF !important;
    border-color: rgba(33,110,69,.28) !important;
    color: #216E45 !important;
  }

  .chapter-header {
    background: #0E1B25 !important;
    border: 1px solid rgba(232,222,196,.18) !important;
  }

  .chapter-header,
  .chapter-header *,
  .full-cta,
  .full-cta *,
  .cta-box,
  .cta-box *,
  .cta-inline,
  .cta-inline *,
  .hero,
  .hero *,
  .hero-section,
  .hero-section *,
  .hub-hero,
  .hub-hero * {
    color: var(--paper-1) !important;
  }

  .cta-box p,
  .cta-inline p,
  .full-cta p,
  .full-cta-note,
  .cta-note,
  .hero-note {
    color: rgba(241,236,224,.84) !important;
  }

  .jump-link,
  .topic-tag,
  .exam-badge,
  .paywall-feat,
  .hub-tag,
  .kicker:not(.hero .kicker) {
    background: var(--brand-tint) !important;
    border-color: var(--brand-ring) !important;
    color: var(--brand-ink) !important;
  }

  .cta-btn,
  .cta-inline-btn,
  .full-cta-btn,
  .btn-unlock,
  .nav-cta,
  .nav-drawer-cta {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
  }

  [style*="color:#c0392b"],
  [style*="color: #c0392b"],
  [style*="color:#d68910"],
  [style*="color: #d68910"],
  [style*="color:#5dda7a"],
  [style*="color: #5dda7a"],
  [style*="color:#8e8e93"],
  [style*="color: #8e8e93"],
  [style*="color:#6e6e73"],
  [style*="color: #6e6e73"],
  [style*="color:#424245"],
  [style*="color: #424245"] {
    color: var(--ink-2) !important;
  }
}

/* Link and CTA repairs after the generated-page lock. */
@media (prefers-color-scheme: dark) {
  .re-nav .nav-link,
  .re-nav .nav-link:visited,
  .re-nav .re-login,
  .re-nav .re-brand,
  .re-nav .re-brand *,
  .re-nav .nav-right,
  .re-nav .nav-right *,
  .re-nav .nav-brand,
  .re-nav .nav-brand * {
    color: rgba(232,222,196,.86) !important;
  }

  .re-nav .nav-link.active,
  .re-nav .nav-link.active:visited,
  .re-nav .nav-link:hover,
  .re-nav .re-login.active {
    background: var(--brand) !important;
    color: #fff !important;
  }

  .re-site-footer,
  .re-site-footer * {
    color: rgba(241,236,224,.82) !important;
  }

  .re-site-footer .footer-col-title,
  .re-site-footer .footer-logo,
  .re-site-footer .footer-logo *,
  .re-site-footer .footer-cta {
    color: var(--paper-1) !important;
  }

  .cta-box h2,
  .cta-box h3,
  .full-cta h2,
  .full-cta h3,
  .cta-inline h2,
  .cta-inline h3,
  .hero h1,
  .hero h2,
  .hero p,
  .hero-btn {
    color: var(--paper-1) !important;
  }

  .cta-box p,
  .cta-box .cta-note,
  .full-cta p,
  .full-cta-note,
  .cta-inline p {
    color: rgba(241,236,224,.88) !important;
  }

  .cta-box .cta-btn,
  .cta-inline .cta-inline-btn,
  .full-cta .full-cta-btn,
  a.btn-unlock,
  a.hero-btn,
  a[style*="background:#0a84ff"][style*="color:#fff"],
  a[style*="background:#0a84ff"][style*="color: #fff"] {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
  }
}

/* Final generated-page collision fixes. */
@media (prefers-color-scheme: dark) {
  .footer-cta,
  .re-site-footer .footer-cta {
    background: var(--paper-2) !important;
    color: var(--ink-1) !important;
    border-color: var(--paper-2) !important;
  }

  [style*="color:#0a84ff"]:not(a),
  [style*="color: #0a84ff"]:not(a),
  [style*="color:#ff9500"]:not(a),
  [style*="color: #ff9500"]:not(a) {
    background: transparent !important;
    color: var(--ink-2) !important;
  }

  .hero .kicker,
  .hero-eyebrow,
  .hero .btn-light {
    background: var(--paper-2) !important;
    color: var(--ink-1) !important;
    border-color: rgba(232,222,196,.4) !important;
  }

  .nav:not(.re-nav),
  .nav:not(.re-nav) .nav-inner {
    background: rgba(5,9,13,.94) !important;
    color: var(--paper-2) !important;
  }

  .nav:not(.re-nav) .nav-brand,
  .nav:not(.re-nav) .nav-brand *,
  .nav:not(.re-nav) .nav-brand-word,
  .nav:not(.re-nav) .nav-brand-word *,
  .nav:not(.re-nav) .nav-brand-tag,
  .nav:not(.re-nav) .nav-right,
  .nav:not(.re-nav) .nav-right *,
  .nav:not(.re-nav) a {
    color: var(--paper-2) !important;
  }

  .nav:not(.re-nav) .nav-brand-tag {
    background: var(--paper-2) !important;
    color: var(--ink-1) !important;
  }

  .contact-box {
    background: #fff !important;
    border-color: var(--hairline) !important;
  }

  .contact-box,
  .contact-box *,
  .warn-box,
  .warn-box * {
    color: var(--ink-2) !important;
  }

  .hero-box,
  .hero-box *,
  .cta-inline,
  .cta-inline * {
    color: var(--paper-1) !important;
  }

  .hero-box,
  .cta-inline {
    background: #0E1B25 !important;
  }

  [style*="color:#5ac8fa"],
  [style*="color: #5ac8fa"] {
    color: var(--paper-1) !important;
  }

  .hero-box h1,
  .hero-box h2,
  .hero-box h3,
  .hero-box p {
    color: var(--paper-1) !important;
  }
}

/* Sitewide mobile optimization layer. */
@media (max-width: 640px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden !important;
  }

  body,
  p,
  li {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .page,
  .content,
  .article,
  .article-content,
  .policy,
  .policy-page,
  .policy-content,
  .main,
  main.main {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  h1 {
    font-size: clamp(28px, 10vw, 42px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }

  h3 {
    font-size: clamp(18px, 5.5vw, 22px) !important;
    line-height: 1.2 !important;
  }

  img,
  svg,
  canvas,
  video {
    max-width: 100% !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .re-nav .re-nav-inner,
  .nav.re-nav .re-nav-inner,
  .nav-inner {
    min-height: 58px !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    gap: 10px !important;
  }

  .re-brand,
  .nav-logo,
  .footer-logo {
    min-height: 44px !important;
    align-items: center !important;
  }

  .re-brand-word,
  .nav-logo span,
  .footer-logo span {
    font-size: 20px !important;
    white-space: nowrap !important;
  }

  .nav-hamburger,
  .nav-drawer-close,
  button[aria-label],
  .theme-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .nav-drawer:not(.open) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .nav-drawer.open {
    visibility: visible !important;
  }

  .nav-drawer,
  .re-drawer {
    width: min(86vw, 340px) !important;
    max-width: calc(100vw - 28px) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  .nav-drawer-link,
  .nav-drawer-cta {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
  }

  label,
  .label,
  .field-label,
  .footer-col-title,
  .summary-l,
  .stat-l,
  .result-main-label,
  .updated,
  .card-cat,
  .card-read,
  .full-cta-note,
  .cta-note,
  .footer-disclaimer {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  input,
  select,
  textarea {
    min-height: 46px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  button,
  .btn,
  .hero-btn,
  .cta-btn,
  .cta-inline-btn,
  .full-cta-btn,
  .btn-unlock,
  .nav-cta,
  .footer-cta,
  a[style*="padding:8px"],
  a[style*="padding: 8px"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 16px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .page a:not(.btn):not(.hero-btn):not(.cta-btn):not(.cta-inline-btn):not(.full-cta-btn):not(.btn-unlock):not(.footer-cta),
  main.main a:not(.btn):not(.hero-btn):not(.cta-btn):not(.cta-inline-btn):not(.full-cta-btn):not(.btn-unlock):not(.footer-cta),
  .footer-link {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.35 !important;
  }

  .site-footer,
  .re-site-footer {
    padding: 34px 16px 28px !important;
  }

  .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .footer-col {
    gap: 4px !important;
  }

  .footer-link {
    width: 100% !important;
    padding: 8px 0 !important;
  }

  .footer-bottom {
    display: grid !important;
    gap: 10px !important;
    text-align: left !important;
  }

  .summary-grid,
  .stat-grid,
  .feature-grid,
  .topic-grid,
  .contact-grid,
  .badges-grid,
  .tools-grid,
  .two-fields,
  .three-fields,
  .action-grid,
  .pricing,
  .proof,
  .hero-inner {
    grid-template-columns: 1fr !important;
  }

  .summary-card,
  .stat-box,
  .info-card,
  .scenario-card,
  .q-block,
  .q-block2,
  .feature-card,
  .faq-item,
  .section-card,
  .topic-card,
  .study-plan-step,
  .result,
  .form-card,
  .card,
  .contact-card {
    border-radius: 10px !important;
    padding: 18px !important;
  }

  .hero,
  .hero-section,
  .hub-hero,
  .hero-box,
  .cta-box,
  .full-cta,
  .cta-inline {
    border-radius: 12px !important;
    padding: 26px 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .q-options,
  .q-opts2 {
    display: grid !important;
    gap: 8px !important;
  }

  .q-options li,
  .q-opts2 li {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    padding: 12px 14px !important;
  }

  .jump-links,
  .paywall-feats,
  .section-tags {
    gap: 8px !important;
  }

  .jump-link,
  .topic-tag,
  .exam-badge,
  .paywall-feat,
  .hub-tag {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .jump-link {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }

  .topic-tag,
  .exam-badge,
  .paywall-feat,
  .hub-tag,
  .hero-eyebrow,
  .hub-eyebrow,
  .section-label,
  .jump-bar-title,
  .section-num,
  .q-num,
  .q-num2,
  .num-context,
  .q-badge,
  .pt-head,
  .nav-brand-tag,
  .bn-label,
  .tab-label {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  [style*="font-size:10px"],
  [style*="font-size: 10px"],
  [style*="font-size:11px"],
  [style*="font-size: 11px"] {
    font-size: 12px !important;
  }

  .contact-card-icon,
  .page-contact .contact-card-icon {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .nav:not(.re-nav) .nav-brand,
  .nav:not(.re-nav) .nav-right a,
  .nav:not(.re-nav) .theme-toggle {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .nav:not(.re-nav) .nav-brand {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }

  .nav:not(.re-nav) .nav-brand-tag {
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .hub-page a,
  .home-page a,
  .page a:not(.footer-link):not(.nav-drawer-link):not(.nav-link):not(.re-brand):not(.nav-logo),
  body > a {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .login a,
  .auth-shell a,
  a[href*="jebuk"],
  a[style*="color:#5ac8fa"],
  a[style*="color: #5ac8fa"],
  a[style*="border-radius:99px"][style*="padding:5px"],
  a[style*="border-radius:99px"][style*="padding: 5px"] {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr"],
  [style*="grid-template-columns: 2fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .re-brand-word,
  .nav-logo span,
  .footer-logo span {
    font-size: 18px !important;
  }

  .page,
  .content,
  .article,
  .article-content,
  .policy,
  .policy-page,
  .policy-content,
  .main,
  main.main {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }
}