html, body {
  margin: 0;
  padding: 0;
  font-family: Inter, sans-serif;
  background: #F9F9F9;
  color: #333333;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

.aa-home {
  background: #F9F9F9;
  color: #333333;
}

.aa-home__header,
.aa-home__main,
.aa-home__footer {
  width: 100%;
}

.aa-home__header-inner,
.aa-home__hero,
.aa-home__section,
.aa-home__newsletter,
.aa-home__footer-inner {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
}

.aa-home__header {
  padding: 24px 0 12px;
}

.aa-home__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.aa-home__brand {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #333333;
}

.aa-home__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 600;
}

/* :not(.aa-btn) — the header's plain nav pills must not out-rank the
   canonical button classes on the Login link (14 Jul 2026). */
.aa-home__nav a:not(.aa-btn) {
  padding: 10px 14px;
  border-radius: 999px;
}

.aa-home__nav a:not(.aa-btn):hover {
  background: #E6F4F3;
}

.aa-home__login,
.aa-home__cta,
.aa-home__newsletter-form button {
  border: 0;
  border-radius: 10px;
  background: #247f86;
  color: #FFFFFF;
  font-weight: 700;
  cursor: pointer;
}

.aa-home__login {
  padding: 10px 18px;
}

.aa-home__main {
  padding-bottom: 64px;
}

.aa-home__hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding: 36px 0 48px;
}

.aa-home__eyebrow {
  margin: 0 0 20px;
  color: #247f86;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aa-home__hero-title {
  margin: 0 0 20px;
  font-size: clamp(52px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 9ch;
}

.aa-home__hero-text {
  margin: 0 0 28px;
  max-width: 640px;
  font-size: 28px;
  line-height: 1.45;
  color: #4D4D4D;
}

.aa-home__cta {
  padding: 16px 28px;
  font-size: 16px;
}

.aa-home__hero-panel {
  min-height: 420px;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(230,244,243,0.9), rgba(204,232,230,0.95)),
    #CCE8E6;
  box-shadow: inset 0 0 0 1px rgba(0,122,107,0.08);
}


.aa-home__hero-panel img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  object-fit: cover;
  border-radius: 32px;
}

.aa-home__card-visual {
  width: 100%;
  height: 168px;
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: #F2F2F2;
}

.aa-home__card-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.aa-home__partners {
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto 72px;
  padding: 44px 32px;
  border-radius: 12px;
  background: #247f86;
  color: #FFFFFF;
  text-align: center;
}

.aa-home__partners-title {
  margin: 0 0 12px;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.aa-home__partners-text {
  margin: 0 0 26px;
  font-size: 16px;
  color: rgba(255,255,255,0.88);
}

.aa-home__partner-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.aa-home__partner-pill {
  min-width: 132px;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.aa-home__section {
  padding: 0 0 72px;
}

.aa-home__section-title {
  margin: 0 0 14px;
  text-align: center;
  font-size: 54px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.aa-home__section-title--left,
.aa-home__section-text--left {
  text-align: left;
}

.aa-home__section-text {
  margin: 0 auto 32px;
  max-width: 820px;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  color: #4D4D4D;
}

.aa-home__feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.aa-home__card,
.aa-home__highlight-card {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  padding: 24px;
}

.aa-home__card h3,
.aa-home__highlight-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
}

.aa-home__card p,
.aa-home__highlight-card p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.5;
  color: #4D4D4D;
}

.aa-home__card a,
.aa-home__highlight-card a {
  color: #247f86;
  font-weight: 700;
}

.aa-home__highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.aa-home__highlight-visual {
  height: 220px;
  margin-bottom: 18px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(230,244,243,0.95), rgba(204,232,230,0.9)),
    #E6F4F3;
  border: 1px solid #CCE8E6;
}


.aa-home__highlight-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}

.aa-home__newsletter {
  margin-bottom: 72px;
  padding: 44px 32px;
  border-radius: 12px;
  background: #247f86;
  color: #FFFFFF;
  text-align: center;
}

.aa-home__newsletter h2 {
  margin: 0 0 12px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.aa-home__newsletter p {
  margin: 0 0 24px;
  font-size: 18px;
  color: rgba(255,255,255,0.88);
}

.aa-home__newsletter-form {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.aa-home__newsletter-form input {
  width: min(460px, 100%);
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 10px;
  background: #FFFFFF;
  color: #333333;
}

.aa-home__newsletter-form button {
  min-height: 48px;
  padding: 0 20px;
  background: #FFFFFF;
  color: #247f86;
}

.aa-home__footer {
  padding: 0 0 40px;
}

.aa-home__footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}

.aa-home__footer-logo {
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 800;
}

.aa-home__footer-copy {
  color: #4D4D4D;
  font-size: 14px;
}

.aa-home__footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.aa-home__footer-links h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
}

.aa-home__footer-links a {
  display: block;
  margin-bottom: 8px;
  color: #4D4D4D;
}

@media (max-width: 1080px) {
  .aa-home__hero,
  .aa-home__feature-grid,
  .aa-home__highlight-grid,
  .aa-home__footer-inner,
  .aa-home__footer-links {
    grid-template-columns: 1fr;
  }

  .aa-home__hero {
    gap: 28px;
  }

  .aa-home__hero-panel {
    min-height: 280px;
  }

  .aa-home__section-title,
  .aa-home__newsletter h2,
  .aa-home__partners-title {
    font-size: 36px;
  }
}

@media (max-width: 720px) {
  .aa-home__header-inner,
  .aa-home__nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .aa-home__header-inner,
  .aa-home__hero,
  .aa-home__section,
  .aa-home__newsletter,
  .aa-home__footer-inner,
  .aa-home__partners {
    width: min(100% - 32px, 1280px);
  }

  .aa-home__hero-title {
    font-size: 52px;
  }

  .aa-home__hero-text,
  .aa-home__section-text {
    font-size: 18px;
  }
}

body.aa-login-open {
  overflow: hidden;
}

.aa-login-modal[hidden] {
  display: none;
}

.aa-login-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.aa-login-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.aa-login-modal__dialog {
  position: relative;
  width: min(100%, 486px);
  margin: 120px auto 0;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
  padding: 40px 36px 36px;
  z-index: 1;
}

.aa-login-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #666666;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.aa-login-modal__title {
  margin: 0 0 12px;
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #333333;
}

.aa-login-modal__subtitle {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.4;
  color: #333333;
}

.aa-login-modal__form {
  display: grid;
  gap: 14px;
}

.aa-login-modal__label {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.aa-login-modal__input {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  background: #FFFFFF;
  color: #333333;
  font-size: 16px;
}

.aa-login-modal__input::placeholder {
  color: #999999;
}

.aa-login-modal__forgot {
  margin-top: 2px;
  margin-bottom: 10px;
  font-size: 15px;
  color: #247f86;
}

.aa-login-modal__submit {
  width: 104px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: #247f86;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 640px) {
  .aa-login-modal__dialog {
    width: calc(100% - 32px);
    margin-top: 56px;
    padding: 28px 20px 24px;
  }

  .aa-login-modal__title {
    font-size: 36px;
  }
}

/* Local workbench banner — "TEST COPY — NOT THE DEMO" (local builds only).
   Same component as .aa-local-banner in shell.css; the standalone pages that
   load home.css (login / password reset / home) do not load shell.css, so it
   is defined here too. Colour values mirror the shell.css tokens:
   #A12626 = --aa-color-danger, #FFFFFF = --aa-color-text-on-brand. */
.aa-local-banner {
  padding: 5px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  background: #A12626;
}

/* --------------------------------------------------------------------------
   Keyboard focus (Phase 3, 9 Jul 2026 — WCAG 2.1 AA). These public pages do
   not load shell.css, so the ring token is mirrored here; the focus guard
   test asserts it stays byte-identical to shell.css --aa-primary-500.
   -------------------------------------------------------------------------- */
:root {
  --aa-focus-ring: #247f86;
}

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

/* Canonical Array button (Paul-approved 14 Jul 2026) — mirrors shell.css
   .aa-btn / .aa-btn--primary exactly. The public home page loads ONLY this
   stylesheet (shell.css is built for the fixed app shell), so the canonical
   recipe is mirrored here with the token values written out as literals —
   the same precedent as the local-workbench banner and the focus ring above.
   The parity guard test (test_home_login_button_guard.py) asserts these
   declarations stay identical to shell.css's canonical block. */
.aa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 38px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.aa-btn--primary {
  background: linear-gradient(90deg, #247f86, #2f9aa0);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 0 #1d666c, 0 6px 10px rgba(26, 26, 26, 0.12);
}

.aa-btn--primary:hover {
  background: linear-gradient(90deg, #2f9aa0, #33A498);
}