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;
  /* THE DIALOG CAN BE TALLER THAN THE SCREEN, SO THE OVERLAY SCROLLS.
     Measured 22 Sep 2026 on a 1280x420 screen: the dialog stood 424px tall under
     a 120px top margin, the "Update password" button sat at 464-508, and the page
     could not scroll at all -- body.aa-login-open sets overflow:hidden to stop the
     page BEHIND the modal moving, and nothing ever gave the modal its own scroll.
     The button was simply unreachable. It was already unreachable below 444px
     before the hint and the refusal were added; those took the floor to 544px,
     which is why it was found. CLAUDE.md rule 25: the first check is "can he see
     all of it?". overscroll-behavior keeps the page behind still while it scrolls. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.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 40px;
  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;
}

/* MODIFIERS FOR THE SET-A-NEW-PASSWORD SCREEN (mock v1, Paul-approved 22 Sep 2026;
   catalogue entry 12G). The two sign-in screens keep the 44px title and the 18px line
   they have — these are worn only by the password screen, where a 44px heading over a
   short form read as a marketing banner rather than an instruction. Tokens only. */
.aa-login-modal__title--compact {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: normal;
  margin: 0 0 var(--aa-space-4);
}

.aa-login-modal__subtitle--quiet {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--aa-color-text-label);
}


.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 FROM ITS OWN TEXT (Paul, 22 Sep 2026). It was a fixed 104px, built for the
     word "Log In", so "Update password" wrapped onto two lines. Paul accepts the two
     sign-in buttons becoming auto-width with it. Padding, not a second fixed width. */
  padding: 0 20px;
  min-height: 44px;
  white-space: nowrap;
  /* .aa-login-modal__form is a grid, so a button that is a DIRECT child stretches to the
     full column once the fixed width goes. Measured 22 Sep 2026: the staff sign-in button
     became 414px wide. justify-self keeps it the width of its own words on both screens. */
  justify-self: start;
  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;

  /* Tokens for the moved form-message rules (form_kit.css), added
     22 Sep 2026. Those two RULES have one definition and are not copied; these
     four VALUES are mirrored here because the signed-out pages do not load
     shell.css, exactly as the focus ring above is. The password-screen guard
     test asserts all four stay byte-identical to shell.css. */
  --aa-color-text-label: #667085;
  --aa-color-danger: #A12626;
  --aa-text-xs: 12px;
  --aa-space-4: 4px;
  --aa-space-12: 12px; /* the row refusal line's inset (form_kit.css, 12 Oct 2026) */
  --aa-space-24: 24px; /* the row refusal line's inset in a FLUSH register (form_kit.css, 24 Oct 2026, slice B) */

  /* The canonical input family moved into form_kit.css on 22 Sep 2026 and these pages
     load it, so the tokens ITS rules read must resolve here too — otherwise the rules
     load and do nothing, which is the exact failure this screen shipped with. Values are
     shell.css's own, resolved through their aliases to the literal, and a guard derives
     the required list from form_kit.css itself so it can never go stale. */
  --aa-color-bg-field: #F9FBFB;
  --aa-color-bg-input: #FFFFFF;
  --aa-color-border-field: #D9E1E4;
  --aa-color-brand: #247f86;
  --aa-color-danger-border: #F2C7C7;
  --aa-color-text: #333333;
  --aa-control-height: 40px;
  --aa-primary-50: #e6f4f3;
  --aa-radius: 8px;
}

: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);
}