@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --aa-font-sans: "Plus Jakarta Sans", Arial, sans-serif;
  --aa-ink: #0d1b2a;
  --aa-ink-hover: #1b3147;
  --aa-copy: #344452;
  --aa-muted: #5d6873;
  --aa-teal: #0f766e;
  --aa-page: #f9f8f4;
  --aa-surface: #ffffff;
  --aa-border: #dedbd2;
  --aa-focus: #0f766e;
  --aa-radius-control: 0.7rem;
  --aa-radius-pill: 999px;
  --aa-space-1: 0.5rem;
  --aa-space-2: 0.75rem;
  --aa-space-3: 1rem;
  --aa-space-4: 1.5rem;
  --aa-space-5: 2rem;
  --aa-space-6: 2.5rem;
  --bs-body-font-family: var(--aa-font-sans);
  --bs-body-color: var(--aa-ink);
  --bs-link-color: var(--aa-teal);
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #0a5d57;
  --bs-link-hover-color-rgb: 10, 93, 87;
}

body {
  color: var(--aa-ink);
  font-family: var(--aa-font-sans);
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body.learn-page {
  font-family: var(--aa-font-sans);
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: var(--aa-ink);
  font-family: var(--aa-font-sans);
}

h1,
.h1 {
  font-size: clamp(2rem, 1.65rem + 1.5vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

h2,
.h2 {
  font-size: clamp(1.55rem, 1.35rem + 0.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
}

h3,
.h3 {
  font-size: clamp(1.3rem, 1.18rem + 0.45vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 700;
  line-height: 1.3;
}

.lead {
  color: var(--aa-copy);
  font-weight: 400;
  line-height: 1.6;
}

.text-muted {
  color: var(--aa-muted) !important;
}

.btn {
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-padding-y: 0.65rem;
  --bs-btn-font-family: var(--aa-font-sans);
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.25;
  --bs-btn-border-radius: var(--aa-radius-control);
  min-height: 2.75rem;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.btn-sm {
  --bs-btn-padding-x: 0.8rem;
  --bs-btn-padding-y: 0.45rem;
  --bs-btn-font-size: 0.875rem;
  min-height: 2.5rem;
}

.btn-primary {
  --bs-btn-bg: var(--aa-ink);
  --bs-btn-border-color: var(--aa-ink);
  --bs-btn-hover-bg: var(--aa-ink-hover);
  --bs-btn-hover-border-color: var(--aa-ink-hover);
  --bs-btn-active-bg: #08131e;
  --bs-btn-active-border-color: #08131e;
  --bs-btn-disabled-bg: var(--aa-ink);
  --bs-btn-disabled-border-color: var(--aa-ink);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--aa-focus);
  outline-offset: 3px;
}

#navbar-placeholder {
  min-height: 4.5rem;
}

#navbar-placeholder .aa-site-navbar {
  min-height: 4.5rem;
  padding-block: 0.375rem;
  padding-inline: clamp(1rem, 2.5vw, 2rem) !important;
  border-bottom: 1px solid rgba(13, 27, 42, 0.09);
}

#navbar-placeholder .aa-site-brand {
  position: relative;
  width: 9.75rem;
  height: 3.75rem;
  flex: 0 0 auto;
  margin-right: 1rem;
  overflow: hidden;
}

#navbar-placeholder .aa-site-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 1.75rem);
  max-width: none !important;
  height: auto;
  margin: 0 !important;
  transform: translate(-50%, -50%);
}

#navbar-placeholder .navbar-nav {
  align-items: center;
  gap: 0.1rem;
}

#navbar-placeholder .navbar .nav-link {
  padding: 0.55rem 0.65rem;
  color: var(--aa-ink);
  font-family: var(--aa-font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

#navbar-placeholder .navbar .nav-link.fw-semibold,
#navbar-placeholder .navbar .nav-link.fw-bold {
  font-weight: 600 !important;
}

#navbar-placeholder .navbar .nav-link:hover,
#navbar-placeholder .navbar .nav-link:focus-visible,
#navbar-placeholder .navbar .nav-link.show {
  color: var(--aa-teal);
}

#navbar-placeholder .navbar-toggler {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.45rem;
  border-color: rgba(13, 27, 42, 0.22);
  border-radius: var(--aa-radius-control);
}

#navbar-placeholder .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.2);
}

#navbar-placeholder .aa-nav-icons {
  align-items: center;
  gap: 0.35rem;
}

#navbar-placeholder .aa-nav-right {
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* Desktop only: center the collapsible link list in the space between the
   brand and the always-visible icon zone, Tesla-nav style. Scoped to
   Bootstrap's own lg breakpoint so mobile's stacked/collapsed layout is
   untouched. */
@media (min-width: 992px) {
  #navbar-placeholder .aa-nav-links-wrap {
    flex-grow: 1;
    justify-content: center;
  }
}

#navbar-placeholder .navbar .nav-link.aa-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  color: var(--aa-ink);
  transition: background-color 150ms ease, color 150ms ease;
}

#navbar-placeholder .aa-flag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: default;
}

#navbar-placeholder .navbar .nav-link.aa-icon-btn:hover,
#navbar-placeholder .navbar .nav-link.aa-icon-btn:focus-visible,
#navbar-placeholder .navbar .nav-link.aa-icon-btn.show {
  color: var(--aa-teal);
  background-color: rgba(15, 118, 110, 0.08);
}

#navbar-placeholder .aa-account-icon {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

/* Explicit width/height (rather than the library's default font-size/
   line-height sizing) so the box is exactly as tall as .aa-account-icon and
   the two sit on the same visual center inside their matching 2.5rem
   circular buttons. Aspect ratio matches flag-icons' 4:3 artwork. */
#navbar-placeholder .aa-flag-icon {
  display: block;
  width: 1.8333rem;
  height: 1.375rem;
  line-height: 0;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.12);
}

#navbar-placeholder .aa-account-name {
  display: block;
  max-width: 14rem;
  color: var(--aa-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

#navbar-placeholder .navbar .dropdown-menu {
  border: 1px solid rgba(13, 27, 42, 0.08) !important;
  border-radius: 0.85rem;
  transition: opacity 150ms ease, transform 150ms ease;
}

#navbar-placeholder .navbar .dropdown-item {
  border-radius: 0.5rem;
  color: var(--aa-ink);
  font-size: 0.95rem;
  line-height: 1.4;
}

#navbar-placeholder .navbar .dropdown-item:hover,
#navbar-placeholder .navbar .dropdown-item:focus {
  color: var(--aa-ink);
  background-color: #eef4ff;
}

#navbar-placeholder .mega-menu {
  min-width: 26.25rem;
}

#navbar-placeholder .mega-menu .menu-columns {
  display: flex;
  gap: 1rem;
}

#navbar-placeholder .mega-menu .menu-col {
  flex: 1;
}

#navbar-placeholder .menu-section-title {
  margin: 0.375rem 0.625rem 0.5rem;
  color: var(--aa-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

#navbar-placeholder .nav-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.08rem 0.45rem;
  border-radius: var(--aa-radius-pill);
  color: var(--aa-ink);
  background-color: #e9f2ff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}

.referral-banner {
  margin-top: 0.25rem;
}

.referral-banner-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #a3cfbb;
  border-radius: 0.75rem;
  background-color: #d1e7dd;
  color: #0f5132;
  box-shadow: 0 3px 10px rgba(15, 81, 50, 0.08);
}

.referral-banner-icon {
  display: inline-flex;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #198754;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.referral-banner-copy {
  min-width: 0;
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.35;
}

.referral-banner-copy strong {
  display: block;
  margin-bottom: 0.05rem;
}

.referral-banner-dismiss {
  min-height: 2.25rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #0f5132;
  font-size: 1.35rem;
  line-height: 1;
}

.referral-banner-dismiss:hover,
.referral-banner-dismiss:focus-visible {
  background-color: rgba(15, 81, 50, 0.1);
}

.referral-banner-dismiss:focus-visible {
  outline: 2px solid #0f5132;
  outline-offset: 2px;
}

#navbar-placeholder + .page-hero,
#navbar-placeholder + .referral-banner + .page-hero {
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

@media (hover: hover) and (min-width: 992px) {
  #navbar-placeholder .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  /* Bootstrap only right-aligns .dropdown-menu-end through Popper
     ([data-bs-popper]), which never initializes for this CSS-only hover
     trigger -- only the real click-driven Bootstrap JS toggle uses Popper.
     Without it the menu falls back to left-anchored positioning at the
     toggle's left edge, which overflows off-screen for a toggle near the
     viewport's right edge (e.g. the account menu). Force the same
     right-alignment Popper would have applied. */
  #navbar-placeholder .navbar .dropdown:hover > .dropdown-menu.dropdown-menu-end {
    right: 0;
    left: auto;
  }
}

@media (max-width: 991.98px) {
  #navbar-placeholder {
    min-height: 4.125rem;
  }

  #navbar-placeholder .aa-site-navbar {
    min-height: 4.125rem;
    padding-block: 0.3125rem;
  }

  #navbar-placeholder .aa-site-brand {
    width: 9rem;
    height: 3.5rem;
  }

  #navbar-placeholder .navbar-collapse {
    padding: 0.5rem 0 0.75rem;
  }

  #navbar-placeholder .navbar-nav {
    align-items: stretch;
    gap: 0;
  }

  #navbar-placeholder .navbar .nav-link {
    min-height: 2.75rem;
    padding: 0.65rem 0.25rem;
  }

  /* Flag + account now live in the always-visible .aa-nav-right zone next to
     the hamburger, not stacked inside the collapsible link panel. */
  #navbar-placeholder .aa-nav-icons {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  #navbar-placeholder .navbar .nav-link.aa-icon-btn {
    min-height: 2.5rem;
  }

  #navbar-placeholder .mega-menu {
    width: 100%;
    min-width: 0;
  }

  #navbar-placeholder .mega-menu .menu-columns {
    flex-direction: column;
    gap: 0.5rem;
  }

  #navbar-placeholder .navbar .dropdown-menu {
    max-width: 100%;
    margin-top: 0;
    border: 0 !important;
    box-shadow: none !important;
  }

  #navbar-placeholder .navbar .dropdown-item {
    white-space: normal;
  }
}

/* Phase 2: approved visual system propagated by public page family. */
.aa-interior-page {
  background-color: var(--aa-page);
}

.aa-interior-page :where(.lead, .section-subtitle) {
  color: var(--aa-copy);
  line-height: 1.6;
}

.aa-interior-page :where(.section-heading, .section-title) {
  color: var(--aa-ink);
  font-size: clamp(1.5rem, 1.38rem + 0.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
}

.aa-interior-page :where(.form-label, .filter-label, .plan-label, .pack-tag, .roadmap-pill-label, .profile-label) {
  font-family: var(--aa-font-sans);
  font-weight: 700;
}

.aa-interior-page :where(.form-control, .form-select) {
  min-height: 2.75rem;
  border-color: #d6d2c8;
  border-radius: var(--aa-radius-control);
  background-color: var(--aa-surface);
  color: var(--aa-ink);
  font-family: var(--aa-font-sans);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.aa-interior-page :where(.form-control, .form-select):focus {
  border-color: var(--aa-teal);
  box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.16);
}

.aa-interior-page .btn-custom,
.aa-interior-page .btn-primary-aa,
.aa-interior-page .btn-download {
  border-color: var(--aa-ink);
  border-radius: var(--aa-radius-pill);
  background-color: var(--aa-ink);
  color: #fff;
  font-family: var(--aa-font-sans);
  font-weight: 700;
}

.aa-interior-page .btn-custom:hover,
.aa-interior-page .btn-custom:focus-visible,
.aa-interior-page .btn-primary-aa:hover,
.aa-interior-page .btn-primary-aa:focus-visible,
.aa-interior-page .btn-download:hover,
.aa-interior-page .btn-download:focus-visible {
  border-color: var(--aa-ink-hover);
  background-color: var(--aa-ink-hover);
  color: #fff;
}

.aa-pricing-page .page-hero h1,
.aa-grade-page .page-hero h1,
.aa-account-page .page-hero h1 {
  font-size: clamp(2rem, 1.65rem + 1.25vw, 2.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.aa-pricing-page .page-hero,
.aa-account-page .page-hero {
  padding-bottom: 1.5rem;
}

.aa-interior-page .page-hero p {
  max-width: 68ch;
  color: var(--aa-copy);
  line-height: 1.65;
}

/* Pricing keeps its comparison-first structure while matching the shared type system. */
.aa-pricing-page .plan-card {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-color: var(--aa-border);
  border-radius: 1.125rem;
  box-shadow: 0 4px 16px rgba(13, 27, 42, 0.035);
}

.aa-pricing-page .plan-card.popular {
  border-color: var(--aa-ink);
  box-shadow: 0 8px 24px rgba(13, 27, 42, 0.075);
}

.aa-pricing-page .plan-card h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

.aa-pricing-page .price-amount {
  color: var(--aa-ink);
  font-size: clamp(1.9rem, 1.75rem + 0.55vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.aa-pricing-page .feature-list {
  color: var(--aa-copy);
  line-height: 1.5;
}

.aa-pricing-page .comparison-table {
  border-color: var(--aa-border);
  border-radius: 1rem;
}

.aa-pricing-page .comparison-table :where(th, td) {
  line-height: 1.45;
}

.aa-pricing-page .faq-item h5 {
  color: var(--aa-ink);
  font-weight: 700;
  line-height: 1.35;
}

.aa-pricing-page .plan-card .d-flex.align-items-center {
  flex-wrap: wrap;
}

/* Grade hubs retain their roadmaps, pack cards, and subscription gating. */
.aa-grade-page .section-heading {
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.7rem);
}

.aa-grade-page :where(.pack-card, .bridge-card) {
  border-color: var(--aa-border);
  border-radius: 1rem;
  box-shadow: 0 3px 12px rgba(13, 27, 42, 0.025);
}

.aa-grade-page .roadmap-card {
  min-height: 2.75rem;
  border-color: var(--aa-border);
  border-radius: 0.75rem;
}

.aa-grade-page .roadmap-card-title {
  color: var(--aa-ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.aa-grade-page .roadmap-panel {
  color: var(--aa-copy);
  line-height: 1.6;
}

.aa-grade-page .roadmap-panel h4 {
  font-size: 1.05rem;
  font-weight: 700;
}

/* Worksheet library controls stay compact, searchable, and touch-friendly. */
.aa-library-page main > header h1 {
  font-size: clamp(2rem, 1.72rem + 0.9vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.aa-library-page main > header {
  padding-top: 1.5rem !important;
  padding-bottom: 0.75rem !important;
}

.aa-library-page .search-bar .flex-grow-1 {
  min-width: min(100%, 18rem);
}

.aa-library-page .filter-pill {
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border-color: #d6d2c8;
  color: var(--aa-copy);
  font-family: var(--aa-font-sans);
  font-size: 0.84rem;
  font-weight: 600;
}

.aa-library-page .filter-pill:hover,
.aa-library-page .filter-pill:focus-visible {
  border-color: var(--aa-ink);
}

.aa-library-page .filter-pill.active {
  border-color: var(--aa-ink);
  background-color: var(--aa-ink);
  color: #fff;
}

.aa-library-page :where(.download-card, .pack-card, .grade-card) {
  border: 1px solid var(--aa-border);
  border-radius: 0.9rem;
  box-shadow: 0 3px 12px rgba(13, 27, 42, 0.035);
}

.aa-library-page :where(.download-card, .pack-card, .grade-card) h5 {
  font-weight: 700;
  line-height: 1.3;
}

/* The generator remains a functional tool, with only shared visual refinements. */
.aa-generator-page .hero-section {
  padding-top: 1rem;
}

.aa-generator-page .hero-title {
  font-size: clamp(2rem, 1.72rem + 0.95vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.aa-generator-page :where(.hero-card, .generator-card, .preview-card, .download-card, .tip-card) {
  border-color: var(--aa-border);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(13, 27, 42, 0.035);
}

.aa-generator-page :where(.preview-question, .download-link-box) {
  border-color: var(--aa-border);
  border-radius: 0.8rem;
}

/* Informational and legal pages retain readable, restrained content containers. */
.aa-info-page .container-box,
.aa-legal-page:not(.aa-legacy-header-page) > .container {
  max-width: 51.25rem;
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--aa-border);
  border-radius: 0.9rem;
  box-shadow: 0 4px 16px rgba(13, 27, 42, 0.04);
}

.aa-info-page .container-box > h1,
.aa-legal-page > .container > h1 {
  font-size: clamp(2rem, 1.72rem + 1vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.aa-info-page .container-box h2,
.aa-legal-page > .container h2 {
  margin-top: 2rem;
  font-size: clamp(1.35rem, 1.25rem + 0.4vw, 1.6rem);
  font-weight: 700;
}

.aa-info-page .container-box :where(p, li),
.aa-legal-page > .container :where(p, li) {
  color: var(--aa-copy);
  line-height: 1.7;
}

.aa-info-page :where(.highlight-box, .support-box) {
  border-left-color: var(--aa-teal);
  background-color: #f1f6f4;
}

.aa-info-page .btn-submit {
  min-height: 2.75rem;
  border-radius: var(--aa-radius-control);
  background-color: var(--aa-ink);
  font-weight: 700;
}

.aa-info-page .btn-submit:hover,
.aa-info-page .btn-submit:focus-visible {
  background-color: var(--aa-ink-hover);
}

.aa-legacy-header-page .content-section {
  max-width: 56.25rem;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.aa-legacy-header-page .content-section :where(p, li) {
  color: var(--aa-copy);
  line-height: 1.7;
}

/* Blog pages stay reading-first rather than adopting a marketing layout. */
.aa-blog-page #navbar-placeholder + main {
  padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.aa-blog-page main h1 {
  font-size: clamp(2rem, 1.68rem + 1.15vw, 2.75rem);
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.aa-blog-page main h2 {
  font-size: clamp(1.45rem, 1.34rem + 0.45vw, 1.7rem);
  font-weight: 700 !important;
  letter-spacing: -0.018em;
}

.aa-blog-page main h3 {
  font-weight: 700;
}

.aa-article-page main :where(p, li) {
  color: var(--aa-copy);
  line-height: 1.72;
}

.aa-blog-index-page main :where(.bg-light.rounded, .border.rounded),
.aa-article-page main .bg-light.rounded {
  border: 1px solid var(--aa-border) !important;
  border-radius: 0.85rem !important;
  background-color: #f6f5ef !important;
}

/* Competition discovery retains its specialized sub-navigation and card taxonomy. */
.aa-competition-page .page-hero {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: clamp(2rem, 3vw, 2.75rem);
}

.aa-competition-page .page-hero h1 {
  font-size: clamp(2rem, 1.6rem + 1.45vw, 2.875rem);
  font-weight: 800;
  line-height: 1.1;
}

.aa-competition-page .page-hero .lead {
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
  line-height: 1.65;
}

.aa-competition-page .section-title {
  font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.85rem);
}

.aa-competition-page :where(.grade-card, .competition-card, .editorial-card) {
  border-color: var(--aa-border);
  border-radius: 0.85rem;
  box-shadow: 0 3px 12px rgba(13, 27, 42, 0.035);
}

.aa-competition-page :where(.grade-card, .competition-card, .editorial-card) h3 {
  font-weight: 700;
  line-height: 1.3;
}

.aa-competition-page .prep-callout {
  margin-top: 3rem;
  border-radius: 1rem;
}

.aa-competition-page .competition-subnav .nav-link:focus-visible {
  outline-offset: -2px;
}

/* Focused landing and account/status surfaces use the same density without changing flows. */
.aa-landing-page .hero-section {
  padding-top: 1rem;
}

.aa-landing-page .hero-section h1 {
  font-size: clamp(2rem, 1.7rem + 1vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.aa-landing-page .preview-img,
.aa-landing-page .soft-section {
  border-color: var(--aa-border);
  border-radius: 1rem;
}

.aa-account-page .profile-container {
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

.aa-account-page :where(.profile-card, .onboarding-card) {
  border-color: var(--aa-border);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(13, 27, 42, 0.035);
}

.aa-account-page .profile-heading {
  font-size: clamp(1.75rem, 1.62rem + 0.55vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.aa-status-page #navbar-placeholder + main {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.aa-status-page .card {
  border: 1px solid var(--aa-border);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(13, 27, 42, 0.04);
}

.aa-status-page .card h1 {
  font-size: clamp(1.75rem, 1.58rem + 0.7vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
}

/* Login intentionally keeps its focused auth layout but shares the compact brand treatment. */
.aa-auth-page > header {
  padding-block: 0.375rem !important;
}

.aa-auth-page > header .navbar-brand {
  position: relative;
  width: 9.75rem;
  height: 3.75rem;
  flex: 0 0 auto;
  overflow: hidden;
}

.aa-auth-page > header .navbar-brand img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11.5rem;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
}

.aa-auth-page .card {
  margin-top: 0;
  border-color: var(--aa-border);
  border-radius: 1rem;
  box-shadow: 0 6px 20px rgba(13, 27, 42, 0.06);
}

.aa-auth-page .page-title {
  color: var(--aa-ink);
  font-family: var(--aa-font-sans);
  font-weight: 800;
}

@media (min-width: 992px) {
  .aa-interior-page #navbar-placeholder + .page-hero,
  .aa-interior-page #navbar-placeholder + .referral-banner + .page-hero {
    padding-top: 1rem;
  }
}

@media (max-width: 767.98px) {
  .aa-info-page .container-box,
  .aa-legal-page:not(.aa-legacy-header-page) > .container {
    width: calc(100% - 1.5rem);
    margin-top: 1rem;
    padding: 1.25rem;
  }

  .aa-pricing-page .plan-card,
  .aa-generator-page :where(.hero-card, .generator-card, .preview-card, .download-card) {
    padding: 1.25rem;
  }

  .aa-library-page .search-bar .flex-grow-1 {
    width: 100%;
    margin-right: 0 !important;
  }

  .aa-status-page #navbar-placeholder + main {
    padding-top: 1.5rem !important;
  }

  .aa-status-page .card .btn {
    display: block;
    width: 100%;
    margin-left: 0 !important;
  }

  .aa-status-page .card .btn + .btn {
    margin-top: 0.75rem;
  }

  .aa-landing-page .hero-section .btn {
    max-width: 100%;
    white-space: normal;
  }

  .aa-landing-page .soft-section .d-flex {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
  }

  .aa-landing-page .soft-section .form-control {
    max-width: none !important;
    margin-right: 0 !important;
  }

  .aa-auth-page {
    padding: 0 !important;
  }

  .aa-auth-page main {
    padding: 1.25rem;
  }

  .aa-auth-page .card {
    margin-top: 0;
    padding: 2rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  #navbar-placeholder .navbar .dropdown-menu {
    transition: none;
  }
}