/* ============================================================
   aa-site.css — what advisor accelerator's pages need that
   site-kit does not have: the site shell in BP-1171's look (the
   header, the founding bar, the phone menu, the footer and aa's
   buttons), multi-field forms and the audit's tables.

   Loaded after site-kit's tokens.css and site.css. EVERY COLOUR IS
   A TOKEN, as in site.css: a literal colour here is one no dark
   mode can invert. SiteShellTest fails on one.

   TWO PLACES TAKE NO TOKEN, ON PURPOSE: the print blocks of the two
   documents written to be filed, /compliance's and the scored
   audit's. Paper is white whatever the screen's theme, so the
   printed copy says "the paper and its ink" with CSS system colours
   (Canvas, CanvasText, GrayText) under `color-scheme: light` — still
   no literal, and CompliancePageTest pins them to those blocks alone.

   TYPE AND CONTROLS ARE B-01's (operator 2026-10-27, BP-1795), as in
   site-kit's site.css: every font-size is a role token set with the
   line height of the same name; each page's one h1 is the public
   headline and a section headline or big figure the public title
   (both sized by the window in tokens.css, so no rule here bumps them
   at a breakpoint); small capital labels are the Overline; weights are
   400 and 600, 700 only for the headline and the title (and the
   wordmark, a logotype). Heights are --control-h* and --min-target,
   which are 44px or more on touch. Two breakpoints, 600 and 1024
   (768 moved to 600 and 960 to 1024). LayoutFoundationTest holds it.
   ============================================================ */

/* ============================================================
   THE SHELL — AA-SITE-04, in the BP-1171 look (V2 Library
   sG2YVRmFBFxITjP917tLC0: 666:3370 desktop, 705:3649 phone),
   carrying AF-147's approved words.

   It lives HERE rather than in site-kit because site-kit has none of
   BP-1171's blocks yet (public-surface unit 24 is not built) and aa
   is the first site on the new look. When a second site needs these
   parts they move into site-kit and this block shrinks — hard rule 5
   and Q40, "built once, as site-kit blocks".
   ============================================================ */

/* ── aa's buttons (COLOUR, 27 Sep; BP-1072) ─────────────────── */
/* #F6801F with a #1E1E1E label, #CF6C1A on hover — the same in both
   themes, because the fill does not change between them.

   site-kit fills .sk-btn with --accent-text and labels it --accent-fg.
   That was right while aa's label was white; since the LIBRARY ruling
   made it ink it reads #1e1e1e on #a85200, about 3.1:1. In dark,
   site-kit switches to a lighter orange under a canvas-coloured label,
   which no ruling chose. `:root[data-brand]` is (0,2,0) and loads after
   site.css, so it wins over site-kit's dark rule as well; SiteShellTest
   resolves the token files and measures both themes and the hover. */
:root[data-brand="aa"] {
  --sk-btn-bg: var(--accent);
  --sk-btn-fg: var(--accent-fg);
  --aa-btn-bg-hover: var(--accent-600);
}

.sk-btn:not(.sk-btn--secondary):hover {
  background: var(--aa-btn-bg-hover);
}

/* ── The page's width (BP-1171 666:3370, Round 20) ────────────── */
/* BP-1171 lays every block on a 1200px column: x 120 to 1320 on its 1440
   frame, the header, the hero, the sections and the footer alike. site-kit's
   container is 1120 with its gutters, which left aa 1056 wide; this is 1200
   inside the same 32px gutters. A phone and a tablet never reach it.
   site-kit's own --sk-max is every brand's; aa sets its own here until the
   kit takes BP-1171's width for all of them. */
:root[data-brand="aa"] {
  --sk-max: 1264px;
}

/* The secondary button wears the brand-colour outline (Q215, which D-19
   extended to the public pages), as the Library's Button draws it: the
   edge and the label in --accent-text, no fill. Not --accent: the outline
   is the only edge the button has, so it needs 3:1 (WCAG 1.4.11), and
   #F6801F reads about 2.6:1 on the canvas. */
.sk-btn--secondary {
  border-color: var(--accent-text);
  background: transparent;
  color: var(--accent-text);
}

/* ── The header ─────────────────────────────────────────────── */
.aa-masthead {
  /* The phone menu's panel hangs from the bottom of the whole header. */
  position: relative;
  background: var(--canvas);
}

/* The brand-only header (/welcome, /audit/{slug}, /compliance) is the
   wordmark alone on the canvas, so nothing else marks where the header ends
   and the page begins. A hairline does (S2, AA-SITE-04 review). The full
   header is left as it is. */
.aa-masthead--brand {
  border-bottom: 1px solid var(--border);
}

/* The row wraps rather than squeezes: on a narrow phone whatever sits beside
   the wordmark drops to its own line at its natural width instead of folding
   the wordmark in two (S1, AA-SITE-04 review — found on the forwarded
   header's "Book a call with us", which AQ-112 removed). */
.aa-masthead__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  row-gap: var(--sp-2);
  min-height: var(--topbar-h);
  padding-block: var(--sp-1);
}

/* The wordmark: lowercase, bold, the whole name in aa's orange-to-cyan
   gradient (Library "Wordmark / aa"). It is a logotype, which WCAG 1.4.3
   sets no contrast floor for; where background-clip: text is missing it
   falls back to plain ink, never to invisible text. A logotype is one
   word to the eye, so it never breaks and never shrinks. */
.aa-wordmark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: var(--min-target);
  white-space: nowrap;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--lh-lg);
  text-decoration: none;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .aa-wordmark__name {
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ── The founding bar (BP-1171 666:3371) ───────────────────── */
/* Inverse ink: dark on a light page, light on a dark one, so it reads
   at the same strength in both themes. */
.aa-banner {
  padding-block: var(--sp-3);
  background: var(--ink);
  color: var(--canvas);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-banner strong {
  font-weight: 600;
}

.aa-banner__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--sp-2);
  border-radius: var(--r-full);
  background: var(--accent);
  vertical-align: 1px;
}

/* ── The menu: a disclosure on a phone, an open row from 1024px */
.aa-menu > summary {
  list-style: none;
}

.aa-menu > summary::-webkit-details-marker {
  display: none;
}

.aa-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* An icon button: the default (md) control, 40 on a desktop, 48 on touch. */
  width: var(--control-h-md);
  height: var(--control-h-md);
  border-radius: var(--r-md);
  color: var(--ink);
  cursor: pointer;
}

.aa-menu__glyph {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.aa-menu__glyph--close,
.aa-menu[open] .aa-menu__glyph--menu {
  display: none;
}

.aa-menu[open] .aa-menu__glyph--close {
  display: block;
}

/* The open panel hangs OVER the page, so a keyboard user who tabs on past the
   menu lands on links hidden beneath it — the "get the free audit instead"
   link on /book, under the panel at 390 and 768px (WCAG 2.4.11, found by the
   browser gate, AA-SITE-06). There is no JavaScript to close the menu, so it
   steps aside instead: while keyboard focus is anywhere outside the header,
   the panel is not drawn and the button shows the menu glyph again, and
   Shift+Tab back to the button brings the open panel straight back.

   Tapping a link or the button never triggers it: they do not match
   :focus-visible. Tapping into a text field does, in every engine, and the
   panel steps aside while the field has focus — which is where the visitor
   has gone. Two limits, written down rather than discovered: the button still
   says "expanded" to a screen reader while the panel is set aside, and the
   alternative, a panel in the page's flow that pushes it down, departs from
   BP-1171's overlay — a design call, not this rule's. From 1024px the panel is
   the header's own row, and the rule is undone there (below). */
body:has(:focus-visible:not(.aa-masthead, .aa-masthead *)) .aa-menu[open] > .aa-menu__panel,
body:has(:focus-visible:not(.aa-masthead, .aa-masthead *)) .aa-menu[open] .aa-menu__glyph--close {
  display: none;
}

body:has(:focus-visible:not(.aa-masthead, .aa-masthead *)) .aa-menu[open] .aa-menu__glyph--menu {
  display: block;
}

.aa-menu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 10;
  padding: var(--sp-2) var(--sk-gutter) var(--sp-5);
  /* The panel spans the whole header, but its content keeps to the page's
     container — the same left and right edges as the row above it. That
     matters in a browser without ::details-content, which shows this panel
     at every width (N1, AA-SITE-04 review). */
  padding-inline: max(var(--sk-gutter), calc((100% - var(--sk-max)) / 2 + var(--sk-gutter)));
  border-block: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}

.aa-nav {
  display: flex;
  flex-direction: column;
}

/* A default (md) control's height, 48px on touch, like the kit's own header links. */
.aa-nav a,
.aa-signin {
  display: flex;
  align-items: center;
  min-height: var(--control-h-md);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.aa-nav a:hover,
.aa-signin:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The page you are on: ink and an underline in the text-safe accent, so
   the marker clears 3:1 as well as being announced by aria-current. */
.aa-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.aa-masthead__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

/* On a phone the call to action runs the panel's width, a full-width
   thumb target. From 600px that would be a bar the width of a tablet, so
   "Sign in" and the button keep their own widths (N1). */
@media (min-width: 600px) {
  .aa-masthead__actions {
    align-items: flex-start;
  }
}

/* From 1024px the row has room for everything, so the menu stands open.
   ::details-content is how a closed <details> is shown without
   JavaScript. A browser without it keeps the menu button at every width:
   the same links one tap away, never a header with no navigation. */
@media (min-width: 1024px) {
  .aa-masthead__row {
    padding-block: var(--sp-4);
  }

  @supports selector(::details-content) {
    .aa-menu {
      flex: 1;
    }

    .aa-menu > .aa-menu__toggle {
      display: none;
    }

    .aa-menu::details-content {
      content-visibility: visible;
    }

    /* The phone rule above sets an OPEN panel aside while focus is in the
       page. Here the panel is the header's own row, and a menu left open at a
       narrower width (a tablet turned, a window widened) would otherwise lose
       its whole row with no button to bring it back. */
    body:has(:focus-visible:not(.aa-masthead, .aa-masthead *)) .aa-menu[open] > .aa-menu__panel {
      display: flex;
    }

    .aa-menu__panel {
      position: static;
      display: flex;
      align-items: center;
      gap: var(--sp-6);
      padding: 0;
      border: 0;
      background: none;
      box-shadow: none;
    }

    .aa-nav {
      flex-direction: row;
      gap: var(--sp-6);
      margin-inline: auto;
    }

    .aa-nav a {
      color: var(--ink-muted);
    }

    .aa-nav a[aria-current="page"] {
      color: var(--ink);
    }

    .aa-masthead__actions {
      flex-direction: row;
      align-items: center;
      gap: var(--sp-5);
      margin: 0;
      padding: 0;
      border: 0;
    }

    .aa-signin {
      font-weight: 600;
    }
  }
}

@media (min-width: 600px) {
  .aa-banner {
    text-align: center;
  }
}

/* ── The footer ─────────────────────────────────────────────── */
.aa-footer {
  margin-top: var(--sp-12);
  padding-block: var(--sp-10) var(--sp-8);
  border-top: 1px solid var(--border);
  background: var(--canvas);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* A page that closes on the full-width band meets the footer at the band's
   edge, as 666:3542 sits on 666:3535 (Round 20): no strip of page between. */
:root:has(.aa-offer__start, .aa-audit__call) .aa-footer {
  margin-top: 0;
}

.aa-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

.aa-footer__brand p {
  max-width: 44ch;
  margin-top: var(--sp-2);
}

/* The target floor's height, like the wordmark beside it, so the column's first line sits
   level with the brand's. It is an <h2> so a screen reader can jump to it
   (N2), and it takes the footer's small type rather than a heading's. */
.aa-footer__heading {
  display: flex;
  align-items: center;
  min-height: var(--min-target);
  margin: 0;
  color: var(--ink);
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aa-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every footer link is a 44px target. S1 found Terms and Privacy at 15px
   on every page: "terms nobody can find are terms nobody agreed to", and on
   a phone a 15px target is the finding part. 44 WIDE as well as tall: the
   browser gate measured "About" at 32.5 × 44 and "Terms" at 35.1 × 44 on a
   390px phone (AA-SITE-06). The extra width is empty and sits after the word,
   so a short link's text stays where it was — except at the END of the legal
   row, which is held against the row's end below. */
.aa-footer__link {
  display: inline-flex;
  align-items: center;
  min-width: var(--min-target);
  min-height: var(--min-target);
  color: var(--ink-muted);
  font-weight: 400;
  text-decoration: none;
}

.aa-footer__link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.aa-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.aa-footer__legal {
  flex: 1 1 min(100%, 32rem);
}

.aa-footer__legal > * + * {
  margin-top: var(--sp-1);
}

.aa-footer__legal-links {
  display: flex;
  gap: var(--sp-5);
}

@media (min-width: 600px) {
  .aa-footer__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  /* Here the legal links end the footer's bottom row, so "Terms" keeps its
     text against the row's end rather than 9px short of it. */
  .aa-footer__legal-links .aa-footer__link:last-child {
    justify-content: flex-end;
  }
}

/* Read by a screen reader, not drawn: the menu button's name. */
.aa-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.aa-stack > * + * {
  margin-top: var(--sp-3);
}

/* ── Forms ────────────────────────────────────────────────── */
.aa-form {
  max-width: 560px;
  color: var(--ink);
}

.aa-field,
.aa-fieldset {
  margin-top: var(--sp-5);
}

.aa-fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

.aa-fieldset legend {
  margin-bottom: var(--sp-2);
  padding: 0;
  font-weight: 600;
}

.aa-optional {
  color: var(--ink-muted);
  font-weight: 400;
}

.aa-choice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--min-target);
}

.sk-form label,
.aa-form label {
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: 600;
}

/* The label is the tap target for its 20px box, so it is the one that has to
   reach 44: the row already stood 44 tall, but the label inside it measured
   25.6 on a phone, and a tap on the rest of the row did nothing (AA-SITE-06).
   It now fills the row, centred as before, so nothing moves. It is a flex box
   for that, so a link put INSIDE a label would become a column of its own —
   today's labels are plain words. */
.aa-form .aa-choice label {
  display: flex;
  align-items: center;
  /* 44 wide as well: AF-124 draws /book's answers as one word ("Yes",
     "No"), which alone are narrower than a phone's target (AA-SITE-21). */
  min-width: var(--min-target);
  min-height: var(--min-target);
  margin-bottom: 0;
  font-weight: 400;
}

.aa-choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent-text);
}

/* A hint read before typing (AF-148): between the label and the input. */
.aa-form .aa-hint--above {
  margin-top: calc(-1 * var(--sp-1));
  margin-bottom: var(--sp-2);
}

.aa-field-error {
  margin-top: var(--sp-2);
  padding-left: var(--sp-2);
  border-left: 3px solid var(--danger);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-form .sk-actions {
  margin-top: var(--sp-6);
}

.aa-form .sk-status > * + * {
  margin-top: var(--sp-2);
}

/* ── Lists and the form's small print ─────────────────────── */
/* The scored audit's own parts moved into the AF-151 block below
   (AA-SITE-18); these two are the other pages'. */
.aa-list {
  max-width: 72ch;
  margin: 0;
  padding-left: var(--sp-5);
}

.aa-list > li + li {
  margin-top: var(--sp-3);
}

.aa-list p {
  margin-top: var(--sp-1);
  color: var(--ink-muted);
}

.aa-disclaimer {
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* ── Section rhythm ───────────────────────────────────────── */
/* Content straight after a section title needs a gap site.css does not give
   it. The kit's own intro paragraph keeps its spacing. */
.sk-section__title + :not(.sk-section__intro) {
  margin-top: var(--sp-4);
}

/* ── Long-form prose: the legal pages ─────────────────────── */
/* site.css sets `p { margin: 0 }` and the only rhythm rule above it applies to
   whatever follows a section title — fine on a marketing section of one
   paragraph, wrong on a page of clauses. On /legal/terms eight paragraph pairs
   touched at 0px, so the quarterly price, the renewal term, the January list
   price and the renewal-only commitment rendered as ONE unbroken block on the
   page that tells a buyer when their US$2,640 renews.

   A heading needs more space above it than below, or it reads as the tail of
   the clause before it rather than the head of the one after.

   SCOPED to .aa-prose, not global: the other five pages were built to the
   current spacing and re-rhythming them is a separate decision with its own
   screenshots. `ul` is here because it is otherwise at browser defaults —
   40px of padding, the only indent on the page not coming from a token. */
.aa-prose > * + * {
  margin-top: var(--sp-4);
}

.aa-prose > * + h2 {
  margin-top: var(--sp-10);
}

.aa-prose ul {
  margin: 0;
  padding-left: var(--sp-5);
}

.aa-prose li + li {
  margin-top: var(--sp-2);
}

/* ============================================================
   / — HOME, AA-SITE-07: BP-1171's AA landing (V2 Library
   sG2YVRmFBFxITjP917tLC0: 666:3370 desktop, 667:3378 phone),
   with the hero in motion's still (705:3513, 705:3649, Q41),
   carrying AF-147's words (HOME WORDS, AQ-41).

   The hero is dark in every theme, as 705:3513 draws it: the
   section carries data-theme="dark", which scopes tokens.css's
   dark values to it, so every colour below is still a token and
   the header above it (x-page :dark-header) is dark with it.
   ============================================================ */

.aa-masthead[data-theme="dark"],
.aa-home-hero {
  color-scheme: dark;
}

.aa-home-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-10) var(--sp-16);
  background: var(--canvas);
  color: var(--ink);
}

/* The ignition field, still: embers off a warm horizon at the far
   corner, cooled by cyan from the near one (707:3291) — the two ends
   of aa's own gradient, from tokens. The motion is site-kit's shared
   hero, not built (public-surface unit 24). The cool light is centred
   a third of the way down, not on the corner: the header above is
   the plain dark canvas, and a light that reaches the hero's top edge
   draws a seam along the header's foot (UI review, 12 Oct).

   A PSEUDO-ELEMENT, NOT THE SECTION'S BACKGROUND, for the same reason
   as the wash below: the browser gate cannot read type over a
   gradient and walks ancestors only, so it measures the hero's type
   against the dark canvas, and HomePageTest measures it against the
   field at its strongest, both lights at full strength, from the
   token files. */
.aa-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 72% 105%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(60% 60% at 0% 35%, color-mix(in srgb, var(--cyan-500) 10%, transparent), transparent 70%);
  pointer-events: none;
}

.aa-home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: center;
}

.aa-home-hero .sk-hero__title {
  max-width: none;
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: var(--lh-headline);
}

.aa-home-hero__lead {
  max-width: 62ch;
  margin-top: var(--sp-6);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-home-hero .sk-actions {
  margin-top: var(--sp-8);
}

/* The one button, as drawn: a larger target, the panel's width on a
   phone (705:3649), its own width from 600px. */
.aa-home-hero .sk-btn {
  width: 100%;
  min-height: var(--control-h-lg);
  padding-inline: var(--sp-6);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.aa-home-hero__after {
  max-width: 52ch;
  margin-top: var(--sp-6);
  color: var(--ink-muted);
}

/* A short link at the end of a lead sentence keeps its words on one line: split
   across two, its focus ring is two small boxes at opposite ends of the
   paragraph, which the browser gate measured as too little ring for the
   control's width once L-09's 2px ring replaced the 3px one (28 Oct). */
.aa-home-hero__after a,
.aa-book-hero__lead a {
  white-space: nowrap;
}

/* ── The hero's LinkedIn field (AA-SITE-10, AF-190) ─────────── */
/* The one call to action is the field and its button (AUDIT +): side
   by side from 600px (#1), stacked full width on a phone (#3). The
   rest of the request opens below it with the script (#2). */
.aa-hero-request {
  max-width: 660px;
  margin-top: var(--sp-8);
}

.aa-hero-request [hidden] {
  display: none;
}

.aa-hero-request__label {
  font-weight: 600;
}

.aa-hero-request__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.aa-hero-request__control {
  position: relative;
}

/* The drawn link glyph inside the field: a graphic beside the words
   the label already says, so --ink-muted at its 3:1 floor. */
.aa-hero-request__glyph {
  position: absolute;
  top: 50%;
  left: var(--sp-4);
  width: 22px;
  height: 22px;
  color: var(--ink-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.aa-hero-request__input {
  min-height: var(--control-h-lg);
  padding-left: calc(var(--sp-4) + 22px + var(--sp-3));
}

/* The drawn placeholder (503:315) is a sample of what to paste, so it
   is read: --ink-muted, not the browser's grey, which measures 4.19:1
   on the hero's dark canvas (the browser gate). */
.aa-hero-request__input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.aa-hero-request__ok:not([hidden]) {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-hero-request__ok-glyph {
  width: 16px;
  height: 16px;
  margin-top: var(--sp-1);
  color: var(--success-text);
}

.aa-hero-request__rest {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* The button as AF-190 draws it beside the field (503:316): the
   button's own size (--fs-base, --sp-5), not the hero's larger one,
   so the field keeps room for a pasted link beside it. */
.aa-home-hero .aa-hero-request__button {
  padding-inline: var(--sp-5);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Opened in place, the one button sits under the request (#2). */
.aa-hero-request__end {
  margin-top: var(--sp-6);
}

.aa-home-hero__stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-6);
}

/* The embers (707:3291): sparks off the warm horizon, drifting up
   the stage — site-kit's `drift` part (public-surface unit 24),
   which moves this background one tile up at a time. Three layers
   of one tile height, so the drift loops without a seam. Behind the
   mark and the card only: no ember passes under a line of the
   hero's text, whose contrast is measured on the field without
   them (HomePageTest). Still, they are the still's embers. */
.aa-home-hero__embers {
  --sk-drift-tile: 260px;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 22% 30%, color-mix(in srgb, var(--accent) 70%, transparent) 0 1.5px, transparent 4px),
    radial-gradient(circle at 68% 62%, color-mix(in srgb, var(--accent) 55%, transparent) 0 1px, transparent 3px),
    radial-gradient(circle at 45% 88%, color-mix(in srgb, var(--accent) 45%, transparent) 0 2px, transparent 5px);
  background-size: 190px 260px, 150px 260px, 230px 260px;
  mask-image: linear-gradient(to top, var(--ink) 35%, transparent);
  pointer-events: none;
}

/* Q41's Pause button, under the card it stops. */
.aa-home-hero__pause {
  justify-self: end;
}

/* The five bars fill one after another (site-kit's `fill`). */
.aa-scorecard__part:nth-child(2) { --sk-motion-i: 1; }
.aa-scorecard__part:nth-child(3) { --sk-motion-i: 2; }
.aa-scorecard__part:nth-child(4) { --sk-motion-i: 3; }
.aa-scorecard__part:nth-child(5) { --sk-motion-i: 4; }

/* The mark's still (705:3574) stands above the scorecard on a
   computer. On a phone 705:3649 draws it behind the headline, where
   it would sit under type; it is left out there instead. */
.aa-home-hero__mark {
  display: none;
}

/* The hero's day-0 moment (705:3532): our own audit, labelled. */
.aa-sample {
  width: 100%;
  margin: 0;
  padding: var(--sp-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-xl);
}

.aa-sample__eyebrow {
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aa-sample__title {
  margin-top: var(--sp-3);
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-lg);
}

.aa-sample .aa-scorecard {
  margin-top: var(--sp-6);
}

.aa-sample__caption {
  margin-top: var(--sp-6);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* ── One scorecard: the ring and the five parts ─────────────── */
.aa-scorecard {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
}

.aa-ring {
  position: relative;
  width: calc(var(--sp-24) + var(--sp-6));
  aspect-ratio: 1;
}

/* Drawn from twelve o'clock, as the ring is drawn (666:3402). */
.aa-ring__svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.aa-ring__track,
.aa-ring__arc {
  fill: none;
  stroke-width: 10;
}

.aa-ring__track {
  stroke: var(--surface-3);
}

.aa-ring__arc {
  stroke: var(--accent);
}

.aa-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.aa-stat__value {
  color: var(--ink);
  font-size: var(--fs-public-title);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-public-title);
}

.aa-stat__label {
  margin-top: var(--sp-1);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-xs);
}

.aa-scorecard__parts {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aa-scorecard__part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-scorecard__name {
  color: var(--ink);
  font-weight: 600;
}

.aa-scorecard__points {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The bars repeat the figures beside them. A phone shows the figures
   alone, as 705:3649 draws them; from 600px the bars come back. */
.aa-scorecard__meter {
  display: none;
  grid-column: 1 / -1;
  width: 100%;
  height: var(--sp-2);
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-3);
  appearance: none;
}

.aa-scorecard__meter::-webkit-meter-bar {
  height: var(--sp-2);
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-3);
}

.aa-scorecard__meter::-webkit-meter-optimum-value {
  border-radius: var(--r-full);
  background: var(--ink-muted);
}

.aa-scorecard__meter::-moz-meter-bar {
  border-radius: var(--r-full);
  background: var(--ink-muted);
}

/* ── Who it is for (666:3439) ─────────────────────────────── */
.aa-home-band {
  padding-block: var(--sp-10);
  background: var(--surface);
  text-align: center;
}

.aa-home-band__line {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-lg-loose);
}

/* ── The two sections (666:3441, 666:3455) ────────────────── */
.aa-home-section {
  padding-block: var(--sp-16);
  background: var(--surface);
}

.aa-home-section--tint {
  background: var(--surface-2);
}

.aa-home-section__title {
  font-size: var(--fs-public-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-public-title);
}

.aa-home-section__intro {
  max-width: 62ch;
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-home-section__note {
  max-width: 72ch;
  margin-top: var(--sp-6);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* The section before the closing band (since AA-SITE-11 the FAQ, .aa-faq)
   ends with its own full padding: the band starts straight after it, as
   666:3535 starts 96 below the last line of 666:3455 (Round 20). It ended
   short while the panel sat inset in a padded section of its own. */

/* ── The FAQ (AA-SITE-11, AF-191 #1, #2) ──────────────────── */
/* A <details> per question, on the canvas as drawn, 880 wide at most
   (503:667); a rule between questions, the answer in --ink-muted. */
.aa-faq {
  background: var(--canvas);
}

.aa-faq__list {
  max-width: 880px;
  margin-top: var(--sp-8);
}

.aa-faq__item {
  border-top: 1px solid var(--border);
}

.aa-faq__item:last-child {
  border-bottom: 1px solid var(--border);
}

/* The question is the summary: the whole row is the target, 44px and
   more, and the browser's own marker gives way to the drawn glyph. */
.aa-faq__question {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--min-target);
  padding-block: var(--sp-5);
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-lg);
  list-style: none;
  cursor: pointer;
}

.aa-faq__question::-webkit-details-marker {
  display: none;
}

.aa-faq__words {
  flex: 1 1 auto;
  min-width: 0;
}

/* expand_more turns over when the answer is open: one glyph for both
   (the ledger has no expand_less). A graphic, so --accent-text's
   colour, never the brand orange as a mark carrying meaning alone. */
.aa-faq__glyph {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--accent-text);
}

.aa-faq__item[open] .aa-faq__glyph {
  transform: rotate(180deg);
}

.aa-faq__answer {
  max-width: 72ch;
  padding-bottom: var(--sp-5);
  color: var(--ink-muted);
  /* Long reading, as site-kit's accordion answers. */
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

/* The quote cards: the drawn quote mark is the line's own opening
   quote, set large, so the words are AF-147's to the letter. */
.aa-quotes,
.aa-proof-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}

.aa-quote {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.aa-quote__thought {
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-lg);
}

.aa-quote__open {
  display: block;
  height: var(--sp-8);
  color: var(--accent-text);
  font-size: var(--fs-public-title);
  font-weight: 700;
  line-height: 1;
}

.aa-quote__detail {
  margin-top: var(--sp-3);
  color: var(--ink-muted);
}

/* Before and after: the after card outlined in the brand, its bars in
   the brand fill (666:3497). */
.aa-proof-pair__card {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
}

.aa-proof-pair__card--after {
  border-color: var(--accent-text);
}

.aa-proof-pair__card--after .aa-scorecard__meter::-webkit-meter-optimum-value {
  background: var(--accent);
}

.aa-proof-pair__card--after .aa-scorecard__meter::-moz-meter-bar {
  background: var(--accent);
}

@media (min-width: 600px) {
  .aa-home-hero .sk-btn {
    width: auto;
  }

  .aa-hero-request__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .aa-sample {
    padding: var(--sp-8);
  }

  .aa-ring {
    width: calc(var(--sp-24) + var(--sp-12));
  }

  .aa-scorecard__parts {
    gap: var(--sp-3);
  }

  .aa-scorecard__meter {
    display: block;
  }
}

@media (min-width: 600px) {
  /* 666:3440: one line of 900 at most, so the sentence takes two lines where
     46ch took three. */
  .aa-home-band__line {
    max-width: 900px;
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
  }

  .aa-home-section {
    padding-block: var(--sp-24);
  }

  /* 666:3441, 666:3455: the label, the title and the line under it stand
     about 32 apart, as drawn, where the kit's 12 and 16 set them close. */
  .aa-home-section .sk-eyebrow {
    margin-bottom: var(--sp-8);
  }

  .aa-home-section__intro {
    margin-top: var(--sp-8);
  }

  .aa-proof-pair__card {
    padding: var(--sp-8);
  }
}

@media (min-width: 1024px) {
  .aa-home-hero {
    padding-block: var(--sp-12) var(--sp-20);
  }

  /* 666:3389 and 666:3398: the words in a 660 column at the left edge, the
     card 440 wide at the right, whatever lies between them. */
  .aa-home-hero__grid {
    grid-template-columns: minmax(0, 660px) minmax(0, 440px);
    justify-content: space-between;
    gap: var(--sp-16);
  }

  .aa-home-hero__lead {
    max-width: none;
  }

  .aa-home-hero__after {
    max-width: 560px;
  }

  .aa-home-hero__mark {
    display: block;
    width: calc(var(--sp-24) * 3);
    height: auto;
  }

  .aa-quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  /* Side by side only from 1024 (960 before B-01): at 768 each card left the parts about
     110px beside a 144px ring, and "Compliance" ran into "13 / 15"
     (UI review, 12 Oct). Stacked below that, each card has the width. */
  .aa-proof-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .aa-quote {
    padding: var(--sp-8);
  }

  /* 666:3447, 666:3448: the mark, a gap, then the line at 22 on 28. */
  .aa-quote__open {
    margin-bottom: var(--sp-3);
  }

  .aa-quote__thought {
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
  }
}

/* ── Copy blocks ──────────────────────────────────────────── */
.aa-callout {
  max-width: 72ch;
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-left: 4px solid var(--accent-text);
  border-radius: var(--r-md);
  background: var(--accent-50);
  color: var(--ink);
}

.aa-callout > * + * {
  margin-top: var(--sp-3);
}

/* ============================================================
   /audit — AF-148 (approved 27 Sep, SCREENS), built in the new
   look without a redraw (NEW LOOK). AA-SITE-08.

   Two columns from 1024px: what the audit scores and promises on
   the left, the form in a card on the right, so neither half is
   empty. Stacked below that, in reading order: the promise, the
   five parts, then the form (AF-148 #6).

   AF-148 draws "a hundred." and "on its way." in the brand orange
   and a gradient. #F6801F is a FILL (COLOUR): as type it reads
   2.6:1, under even the 3:1 large text needs, and text on a
   gradient cannot be measured at all. So the emphasis is
   --accent-text, the orange this file uses for every word.
   ============================================================ */

.aa-glyph {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* The eyebrow: a dot and a small capital label on the brand tint. */
.aa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--accent-50);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aa-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--accent);
}

.aa-em {
  color: var(--accent-text);
}

/* ── The warm wash behind the hero (AF-148) ───────────────────
   AF-148 draws a peach wash behind the form page and behind the
   confirmation, fading into the page. Tokens only: --accent-50
   into --canvas, both themed, so in dark it is a low brown that
   fades into the dark canvas rather than a glare.

   DRAWN AT 60%, NOT AT FULL STRENGTH. --accent-50 is also the
   eyebrow chip's and the points badges' fill, and their
   --accent-text label on that tint, laid over a full-strength
   wash, measures 4.37:1 in light: under 4.5. At 60% it is 4.52,
   and the wash matches the drawing's (about 6% orange at the top).
   AuditRequestTest computes every colour on the wash, at its
   strongest point, from the token files.

   A PSEUDO-ELEMENT, NOT THE SECTION'S BACKGROUND, because of the
   measurement. The browser gate cannot read text over a gradient
   (it reports it as unmeasurable) and walks ancestors only, so it
   measures the hero's type against the canvas. The wash's own
   contribution is measured by the test above instead. */
.aa-request,
.aa-received,
.aa-compliance__head,
.aa-audit__hero,
.aa-lost,
.aa-proof__hero,
.aa-welcome__hero,
.aa-book-hero,
.aa-offer__hero {
  position: relative;
  isolation: isolate;
}

/* /compliance's title block wears the same wash (AF-150 #1, AA-SITE-14), and
   so do the scored audit's hero (AF-151 #1) and the audit's private 404
   (AF-146 #4), both AA-SITE-18, /linkedin's hero (AF-149 #1, AA-SITE-12),
   /proof's (AF-152 #1, AA-SITE-20) and /welcome's (AF-146 #1, #2,
   AA-SITE-23) and /book's and its manage link's (AF-124; AA-SITE-21,
   AA-SITE-22) — so the measurement above covers their eyebrows, titles,
   scores, band pills and leads too. */
.aa-request::before,
.aa-received::before,
.aa-compliance__head::before,
.aa-audit__hero::before,
.aa-lost::before,
.aa-proof__hero::before,
.aa-welcome__hero::before,
.aa-book-hero::before,
.aa-offer__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--accent-50), var(--canvas) 30rem);
  opacity: 0.6;
  pointer-events: none;
}

/* ── The form page ────────────────────────────────────────── */
.aa-request {
  padding-block: var(--sp-10) var(--sp-12);
}

.aa-request__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}

.aa-request__title {
  margin-top: var(--sp-4);
  font-size: var(--fs-headline);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-headline);
}

.aa-request__lead {
  max-width: 62ch;
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-parts {
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}

.aa-part {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.aa-part__points {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  border-radius: var(--r-md);
  background: var(--accent-50);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.aa-part__text {
  min-width: 0;
}

.aa-part__name {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.aa-part__line {
  display: block;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-promises {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-promises li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.aa-promises .aa-glyph {
  width: 18px;
  height: 18px;
  color: var(--success-text);
}

.aa-request__card {
  /* The site's form measure, kept while the page is one column (below
     1024px); from 1024 the grid's 480px column is narrower anyway. */
  max-width: 560px;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}

.aa-request__card .aa-form {
  max-width: none;
}

.aa-request__card-title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: 600;
}

/* The first field sits straight under the card's title, or under the
   outcome box when there is one. (`:first-of-type` matched the first DIV,
   which is the outcome box whenever one shows.) */
.aa-request__card :is(.aa-request__card-title, .sk-status) + .aa-field {
  margin-top: 0;
}

.aa-request__card .sk-actions {
  margin-top: var(--sp-5);
}

.aa-request__submit {
  gap: var(--sp-2);
  width: 100%;
}

/* "Sending…" (AF-148 #3), set by public/js/audit-request.js: the fields rest
   and the button says so. Without the script the browser's own loading shows. */
.aa-form--sending .sk-input {
  background: var(--surface-2);
  color: var(--ink-muted);
}

.aa-request__submit[aria-disabled="true"] {
  cursor: progress;
}

/* R028: the privacy link beside the form. A link on its own line, not inside
   a sentence, so a 44px target on a phone. */
.aa-request__legal {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-request__privacy {
  display: inline-flex;
  align-items: center;
  min-width: var(--min-target);
  min-height: var(--min-target);
}

/* AF-148's error glyph, beside each field's message and in the outcome box.
   Opt-in (`x-field :error-glyph`, `x-form-status :glyph`), so /book is as it
   was. --danger, a GRAPHIC: 3:1 is its floor, and AuditRequestTest computes it
   on the card and on the error box in both themes. The words stay ink. */
.aa-field-error--glyph,
.aa-status--glyph {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.aa-field-error__glyph {
  width: 16px;
  height: 16px;
  margin-top: var(--sp-1);
  color: var(--danger);
}

.aa-status__glyph {
  margin-top: var(--sp-1);
  color: var(--danger);
}

.aa-form .aa-status--glyph > * + * {
  margin-top: 0;
}

/* The contact address in an outcome box ("…or email hello@…") has nowhere
   to break, so it may break anywhere rather than push a phone sideways. */
.sk-status a {
  overflow-wrap: anywhere;
}

@media (min-width: 600px) {
  .aa-request {
    padding-block: var(--sp-16);
  }

  .aa-request__card {
    padding: var(--sp-8);
  }
}

@media (min-width: 1024px) {
  .aa-request__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: var(--sp-12);
  }
}

/* ── The confirmation (AF-148 #4) ─────────────────────────── */
.aa-received {
  padding-block: var(--sp-10) var(--sp-12);
}

.aa-received__summary:focus {
  /* The outcome takes focus so a screen reader reads it (components/form-status);
     it is not a control, and a ring round the whole confirmation would read as
     one. Every control on the page keeps its own ring. */
  outline: none;
}

.aa-received__head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.aa-received__glyph {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto var(--sp-6);
  color: var(--success-text);
}

.aa-received__title {
  margin-top: var(--sp-5);
  font-size: var(--fs-headline);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-headline);
}

.aa-received__lead {
  max-width: 62ch;
  margin: var(--sp-5) auto 0;
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-expect {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-10) 0 0;
  padding: 0;
  list-style: none;
}

.aa-tile {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.aa-tile__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aa-tile__label .aa-glyph {
  width: 18px;
  height: 18px;
}

.aa-tile__value {
  margin-top: var(--sp-3);
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

/* An address has no spaces to break at, and a long one must wrap rather than
   push the page sideways on a phone. `break-word`, not `anywhere`: it breaks
   only when the address cannot fit its tile, and leaves the tile's own
   minimum width alone (the grid's tracks are minmax(0, 1fr), so nothing
   needs it smaller). The ~60-character state in states.json proves it. */
.aa-tile__value--address {
  overflow-wrap: break-word;
}

.aa-tile__note {
  margin-top: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-wait__title {
  margin-top: var(--sp-12);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aa-ways {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.aa-way {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.aa-way__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--accent-50);
  color: var(--accent-text);
}

.aa-way__text {
  min-width: 0;
}

.aa-way__title {
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 600;
}

.aa-way__text p {
  margin-top: var(--sp-1);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* A link on its own line, not inside a sentence: a 44px target on a phone. */
.aa-way__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--min-target);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  text-decoration: none;
}

.aa-way__link:hover {
  text-decoration: underline;
}

.aa-way__link .aa-glyph {
  width: 18px;
  height: 18px;
}

@media (min-width: 600px) {
  .aa-received {
    padding-block: var(--sp-16);
  }

  .aa-expect {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .aa-ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   /linkedin — AF-149 (approved 27 Sep, SCREENS), built in the new
   look without a redraw (NEW LOOK). AA-SITE-12.

   The offer and the published price side by side from 1024px (#1),
   stacked on a phone with the price card after what you get (#2).
   Then the client's time by access mode, how a month runs, what we
   deliberately don't do (below the price, at equal weight: R112),
   and the closing panel.

   AF-149 draws four phrases in a gradient and the closing panel as
   a gradient. #F6801F is a FILL (COLOUR): as type it reads 2.6:1,
   and type on a gradient cannot be measured. So the emphasised
   words are --accent-text (.aa-em), and the panel is solid brand
   colour under its ink label (Q42), as AA-SITE-18 drew AF-151's.
   ============================================================ */

/* The hero wears AF-148's warm wash (above), as AF-149 draws it — fading
   to nothing within the hero itself, on the surface the offer below sits on,
   so the two meet with no edge (UI review). The wash is strongest at the top,
   where OfferPageTest measures every colour on it, in both themes. */
.aa-offer__hero {
  padding-block: var(--sp-12) var(--sp-8);
  background: var(--surface);
}

/* /proof's hero (AF-152 #1) is drawn with the same fade, on the same surface
   as the body under it. */
.aa-proof__hero::before,
.aa-offer__hero::before {
  background: linear-gradient(to bottom, var(--accent-50), transparent);
}

.aa-offer__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.aa-offer__title {
  max-width: 900px;
  margin-top: var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: var(--lh-headline);
  letter-spacing: -0.02em;
}

.aa-offer__lead {
  max-width: 640px;
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

/* A section's small capital label: the brand's text colour, never #F6801F. */
.aa-offer__kicker {
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── What you get, and the price ── */
/* The page's bands alternate as drawn: the offer, how a month runs and the
   closing panel on the surface, your time and the scope on the canvas. */
.aa-offer__offer {
  padding-block: var(--sp-4) var(--sp-16);
  background: var(--surface);
}

.aa-offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.aa-offer__name {
  margin-top: var(--sp-3);
  color: var(--ink);
  font-size: var(--fs-public-title);
  font-weight: 700;
  line-height: var(--lh-public-title);
  letter-spacing: -0.02em;
}

.aa-offer__items {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.aa-offer__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}

.aa-offer__check {
  margin-top: 0;
  color: var(--success-text);
}

.aa-offer__item-title {
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-base);
}

/* The included items' words and the exclusions' are one size (R112). */
.aa-offer__item-text,
.aa-offer__not {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.aa-offer__item-text {
  margin-top: var(--sp-1);
  color: var(--ink-muted);
}

/* The price card (AF-149 #1, #3): the brand's edge, on the surface. */
.aa-offer__price {
  padding: var(--sp-6);
  border: 1.5px solid var(--accent);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}

.aa-offer__price-label {
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aa-offer__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.aa-offer__figure {
  color: var(--ink);
  font-size: var(--fs-public-title);
  font-weight: 700;
  line-height: var(--lh-public-title);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.aa-offer__per {
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
}

.aa-offer__billed {
  margin-top: var(--sp-3);
  color: var(--ink);
  font-weight: 600;
}

.aa-offer__price-note {
  margin-top: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-offer__terms {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.aa-offer__term {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-offer__term + .aa-offer__term {
  margin-top: var(--sp-3);
}

.aa-offer__term-glyph {
  color: var(--ink-muted);
}

.aa-offer__button,
.aa-offer__panel-button {
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-5);
}

.aa-offer__after {
  margin-top: var(--sp-3);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  text-align: center;
}

/* ── The bands: your time, how a month runs, what we don't do ── */
.aa-offer__band {
  padding-block: var(--sp-16);
  background: var(--surface);
}

.aa-offer__band--alt {
  background: var(--canvas);
}

.aa-offer__h2 {
  max-width: 820px;
  margin-top: var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-public-title);
  font-weight: 700;
  line-height: var(--lh-public-title);
  letter-spacing: -0.02em;
}

.aa-offer__intro {
  max-width: 720px;
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-offer__modes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  width: 100%;
  max-width: 1000px;
  margin-top: var(--sp-6);
  text-align: left;
}

.aa-offer__mode {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.aa-offer__mode-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}

.aa-offer__mode-title {
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

.aa-offer__tag {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aa-offer__tag--default {
  background: var(--accent-50);
  color: var(--accent-text);
}

.aa-offer__mode-text {
  margin-top: var(--sp-3);
  color: var(--ink-muted);
}

.aa-offer__time {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--canvas);
}

.aa-offer__time-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  font-weight: 600;
}

.aa-offer__time-glyph {
  color: var(--accent-text);
}

.aa-offer__time-text {
  margin-top: var(--sp-1);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* A sentence with its link inside it (AF-149 #1), when Connected returns. */
.aa-offer__route {
  max-width: 720px;
  margin-top: var(--sp-5);
  color: var(--ink);
}

.aa-offer__route a {
  color: var(--accent-text);
}

/* How a month runs: four cards, numbered as drawn — the number is decoration,
   the list numbers itself for a reader. */
.aa-offer__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  width: 100%;
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.aa-offer__step {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

/* The drawn orange disc: #F6801F is a fill here, under the ink COLOUR rules
   for it (6.37:1), never type on its own. */
.aa-offer__step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}

.aa-offer__step-title {
  margin-top: var(--sp-3);
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

.aa-offer__step-text {
  margin-top: var(--sp-2);
  color: var(--ink-muted);
}

/* What we deliberately don't do: one pill per exclusion. */
.aa-offer__nots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  max-width: 900px;
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.aa-offer__not {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink);
}

.aa-offer__not-glyph {
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
}

/* Start with the audit. Q42: solid brand colour, ink on it (6.37:1). The
   button is the surface under ink, as drawn; its hover keeps that fill,
   because aa's hover orange under a light dark-theme label reads under 3:1.
   /proof closes on the same panel with the same words (AF-152 253:108),
   so it wears these rules rather than a second copy of them.

   THE BAND RUNS THE PAGE'S FULL WIDTH (BP-1171 666:3535, Round 20): a
   band between the last section and the footer, its words centred in the
   page's column, 88 above and below them on a computer. The panel is the
   band and the container sits inside it, so the colour reaches both edges
   with no 100vw arithmetic to scroll sideways. 666:3535 draws the band in
   ink; Q42 (every panel that carries words is a solid BRAND colour) is the
   ruling, so the fill stays aa's orange. */
.aa-offer__start {
  background: var(--surface);
}

.aa-offer__panel {
  padding-block: var(--sp-16);
  background: var(--accent);
  color: var(--accent-fg);
  text-align: center;
}

.aa-offer__panel-title {
  color: var(--accent-fg);
  font-size: var(--fs-public-title);
  font-weight: 700;
  line-height: var(--lh-public-title);
  letter-spacing: -0.02em;
}

.aa-offer__panel-line {
  max-width: 640px;
  margin: var(--sp-4) auto 0;
  color: var(--accent-fg);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

/* The one button, at the hero's size (666:3538 is 666:3392's 54px button). */
.aa-offer__panel-button {
  min-height: var(--control-h-lg);
  padding-inline: var(--sp-6);
  background: var(--surface);
  color: var(--ink);
}

.aa-offer__panel .aa-offer__panel-button:hover {
  background: var(--surface);
  text-decoration: underline;
}

.aa-offer__panel :focus-visible {
  outline-color: var(--accent-fg);
}

@media (min-width: 600px) {
  .aa-offer__price {
    padding: var(--sp-8);
  }

  .aa-offer__modes:not(.aa-offer__modes--one) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aa-offer__modes--one {
    max-width: 490px;
  }

  .aa-offer__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aa-offer__panel {
    padding-block: calc(var(--sp-20) + var(--sp-2));
  }

  .aa-offer__panel-button {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .aa-offer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: var(--sp-12);
  }

  /* One row of equal cards, however many steps are true today (AF-149 draws
     four; the held ones are not drawn as gaps). */
  .aa-offer__steps {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
}

/* ============================================================
   /proof — AF-152 (approved 27 Sep, SCREENS), built in the new
   look without a redraw (NEW LOOK). AA-SITE-20.

   The words and the photo side by side from 1024px (#1), the photo
   after the headline on a phone (#2). Then the account beside what
   we don't have yet, the two records side by side from 600px, where
   things stand now, the founding case studies as an honest empty
   state (R118), and /linkedin's closing panel.

   AF-152 draws "currently helping." in a gradient and the closing
   panel as one. #F6801F is a FILL (COLOUR), so the words are
   --accent-text (.aa-em) and the panel is solid brand colour under
   ink (Q42). "What we don't have yet" is drawn in the info hue's
   text shade, which site-kit's tokens do not carry (there is --info,
   2.9:1 on --info-50, and no --info-text): its label is ink, and the
   glyph beside it, which is decoration, keeps --info.
   ============================================================ */

.aa-proof__hero {
  padding-block: var(--sp-10) var(--sp-8);
  background: var(--surface);
}

.aa-proof__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}

.aa-proof__title {
  margin-top: var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: var(--lh-headline);
  letter-spacing: -0.02em;
}

.aa-proof__lead {
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-proof__name {
  margin-top: var(--sp-4);
  color: var(--ink-muted);
}

.aa-proof__name strong {
  color: var(--ink);
  font-weight: 600;
}

/* The headshot: a circle, 200px on a phone and 320px from 1024px, as drawn.
   The file is the live site's own, 1024px square, unaltered: the circle is
   drawn here, as the live site draws it, and the square's corners are never
   shown. With images blocked the browser writes the alt text inside the
   circle, centred on one line, so the circle's edge never cuts the name. */
.aa-proof__photo {
  justify-self: center;
  width: 200px;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--surface-2);
  color: var(--ink-muted);
  line-height: 200px;
  text-align: center;
}

/* It ends with a section's full padding: the closing band starts straight
   after it (BP-1171 666:3535, Round 20), where the band's own padded section
   used to give the room. */
.aa-proof__body {
  padding-block: var(--sp-6) var(--sp-16);
  background: var(--surface);
}

@media (min-width: 600px) {
  .aa-proof__body {
    padding-bottom: var(--sp-24);
  }
}

.aa-proof__column {
  max-width: 1000px;
  margin-inline: auto;
}

.aa-proof__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

.aa-proof__pair + .aa-proof__pair {
  margin-top: var(--sp-6);
}

/* The account: on the surface, inside a hairline. */
.aa-proof__account {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
}

/* A small capital label: the brand's text colour, never #F6801F. */
.aa-proof__kicker {
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aa-proof__big {
  margin-top: var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-public-title);
  font-weight: 700;
  line-height: var(--lh-public-title);
  letter-spacing: -0.02em;
}

.aa-proof__account-text {
  margin-top: var(--sp-3);
  color: var(--ink-muted);
}

/* "See the profile on LinkedIn" — held until the operator gives the address.
   A link on its own line, so a 44px target on a phone. */
.aa-proof__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--min-target);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}

.aa-proof__link .aa-glyph {
  width: 18px;
  height: 18px;
}

/* What we don't have yet, as visible as the account and beside it. */
.aa-proof__gap {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--info-50);
  color: var(--ink);
}

.aa-proof__gap > * + * {
  margin-top: var(--sp-3);
}

.aa-proof__gap-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aa-proof__gap-glyph {
  color: var(--info);
}

.aa-proof__gap-strong {
  font-weight: 600;
}

/* The two records, on the canvas. */
.aa-proof__record {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--canvas);
}

.aa-proof__h2 {
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

.aa-proof__items {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.aa-proof__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--ink);
}

.aa-proof__check {
  width: 18px;
  height: 18px;
  margin-top: var(--sp-1);
  color: var(--accent-text);
}

.aa-proof__note {
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-proof__now {
  margin-top: var(--sp-10);
}

.aa-proof__now-text {
  margin-top: var(--sp-3);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

/* The founding case studies (R118): an empty state that says why, inside a
   dashed edge, centred. */
.aa-proof__cases {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
  padding: var(--sp-8) var(--sp-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  text-align: center;
}

.aa-proof__cases-glyph {
  width: 28px;
  height: 28px;
  color: var(--ink-muted);
}

.aa-proof__cases-text {
  max-width: 640px;
  color: var(--ink-muted);
}

@media (min-width: 600px) {
  /* "currently helping." whole on the second line, as both frames set it. Not
     nowrap: at 36px the phrase is wider than a 320px phone. */
  .aa-proof__title .aa-em {
    display: block;
  }

  .aa-proof__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .aa-proof__hero {
    padding-block: var(--sp-16) var(--sp-12);
  }

  .aa-proof__hero-grid {
    grid-template-columns: minmax(0, 640px) auto;
    gap: var(--sp-16);
  }

  .aa-proof__photo {
    width: 320px;
    line-height: 320px;
  }
}

/* ============================================================
   /compliance — AF-150 (approved 27 Sep, SCREENS), built in the
   new look without a redraw (NEW LOOK). AA-SITE-14.

   A DOCUMENT, NOT A LANDING PAGE (AF-150's note): no marketing
   rhythm, no founding bar, the brand only in the header. The
   statement a compliance officer is looking for sits at the top,
   then the three facts, each skimmable. Forwarding is the first
   action. From 1024px the contents list stays beside the text; on
   a phone it folds away and the page is one column.
   ============================================================ */

/* Printed only: the running head and the call as a written address. */
.aa-print-only {
  display: none;
}

.aa-compliance__head {
  padding-block: var(--sp-10) var(--sp-8);
}

.aa-compliance__title {
  max-width: 860px;
  margin-top: var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: var(--lh-headline);
  letter-spacing: -0.02em;
}

/* The register's line, prominent and boxed (AF-150 #1): the brand's edge,
   heavier on the left, on the surface. */
.aa-statement {
  max-width: 860px;
  margin-top: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border: 1.5px solid var(--accent);
  border-left-width: 5px;
  border-radius: var(--r-lg);
  background: var(--surface);
}

.aa-statement__lead {
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

.aa-statement__body {
  margin-top: var(--sp-2);
  color: var(--ink-muted);
}

/* "Email this page" and "Print or save as PDF": full width on a phone, as
   AF-150's phone frame draws them, their own width from 600px. */
.aa-forward {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.aa-forward > .sk-btn {
  flex: 1 1 100%;
}

/* .sk-btn sets `display`, which outranks the browser's own [hidden] rule:
   without this the print button would show, and do nothing, with
   JavaScript off. */
.aa-forward > [hidden] {
  display: none;
}

.aa-forward__note {
  max-width: 860px;
  margin-top: var(--sp-3);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-compliance__body {
  padding-block: var(--sp-6) var(--sp-16);
}

.aa-compliance__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}

/* The contents list folds away on a phone and a tablet (AF-150 #2). */
.aa-toc {
  display: none;
}

.aa-toc__title {
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aa-toc__list {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}

.aa-toc__link {
  display: block;
  padding-block: var(--sp-1);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  text-decoration: none;
}

.aa-toc__link:hover {
  text-decoration: underline;
}

/* A document written to be read and filed: its running text is Long reading
   (the headings and small print inside it set their own roles). */
.aa-compliance__text {
  min-width: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-compliance__section + .aa-compliance__section {
  margin-top: var(--sp-10);
}

/* A heading the contents list jumps to clears the top of the window. */
.aa-compliance__section {
  scroll-margin-top: var(--sp-6);
}

.aa-compliance__h2 {
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

.aa-compliance__lede,
.aa-compliance__muted {
  margin-top: var(--sp-4);
}

.aa-compliance__muted {
  color: var(--ink-muted);
}

/* The three facts, numbered, in one box edged in the brand colour. */
.aa-facts {
  margin: var(--sp-4) 0 0;
  padding: 0;
  border: 1.5px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--surface);
  list-style: none;
}

.aa-fact {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}

.aa-fact + .aa-fact {
  border-top: 1px solid var(--border);
}

.aa-fact__n {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--accent-50);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}

.aa-fact__text {
  min-width: 0;
}

.aa-fact__title,
.aa-receive__title,
.aa-mode__title,
.aa-checklist__title,
.aa-call__title {
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-base);
}

.aa-fact__text p,
.aa-receive__item p {
  margin-top: var(--sp-1);
  color: var(--ink-muted);
}

.aa-receive {
  display: grid;
  gap: var(--sp-5);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.aa-receive__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.aa-receive__item > .aa-glyph {
  margin-top: 0;
  color: var(--accent-text);
}

/* How the account is reached: Connected on the quiet surface, Managed in the
   caution colours with the caution mark (R-06). */
.aa-mode {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.aa-mode p {
  margin-top: var(--sp-2);
  color: var(--ink-muted);
}

.aa-mode--caution {
  border: 1.5px solid var(--warning);
  background: var(--warning-50);
}

.aa-mode--caution p {
  color: var(--ink);
}

.aa-mode__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.aa-mode__head .aa-glyph {
  color: var(--accent-text);
}

.aa-mode--caution strong {
  font-weight: 600;
}

/* The jurisdiction checklist: stacked on a phone, and its three cards side by
   side from 600px (768 before B-01), as AF-150 draws them — SEC, FINRA 2210 (FINRA CARD, AQ-416)
   and CIRO. Two columns would leave one card alone on a row. */
.aa-checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.aa-checklist__item {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

/* The country is the first line of its card's heading, in the eyebrow's
   small capitals, so a reader moving by heading hears both. */
.aa-checklist__where {
  display: block;
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aa-checklist__rule {
  display: block;
  margin-top: var(--sp-1);
}

.aa-checklist__line {
  margin-top: var(--sp-1);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* Talk to us: on a phone the brand tint holds the words and the button sits
   under it, full width, as AF-150's phone frame draws it; from 600px the
   tint holds both, the button at the end of the row. */
.aa-call {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.aa-call__text {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--accent-50);
}

.aa-call__line {
  margin-top: var(--sp-1);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-call__button {
  gap: var(--sp-2);
}

@media (min-width: 600px) {
  .aa-forward > .sk-btn {
    flex: 0 0 auto;
  }

  .aa-call {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--accent-50);
  }

  .aa-call__text {
    padding: 0;
    background: none;
  }
}

@media (min-width: 600px) {
  .aa-compliance__head {
    padding-block: var(--sp-16) var(--sp-10);
  }

  .aa-checklist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* From 1024px the contents list stays beside the text (AF-150 #1). */
@media (min-width: 1024px) {
  .aa-compliance__grid {
    grid-template-columns: 240px minmax(0, 760px);
    gap: var(--sp-12);
  }

  .aa-toc {
    display: block;
    position: sticky;
    top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--surface-2);
  }
}

/* ── /compliance, printed or saved as a PDF (AF-150 #3) ───────
   "Black on white, no colour or furniture, the address and the
   date printed on top, and the call as a written address. This is
   the copy that gets filed."

   One column, whatever the width it is printed at. No header,
   footer, contents list or buttons. Paper is white in either
   theme, so the colours are the paper's and its ink: CSS system
   colours under `color-scheme: light`, never the theme's tokens,
   which in dark would print near-white type on white paper.
   Scoped to the page with :has() and its own classes, so no other
   page's printing changes — which is also why there is no @page
   rule here: it cannot be scoped, and the browser's own margins
   stand. */
@media print {
  :root:has(.aa-compliance) {
    color-scheme: light only;
    background: Canvas !important;
  }

  :root:has(.aa-compliance) body {
    background: Canvas !important;
    color: CanvasText !important;
  }

  :root:has(.aa-compliance) body *,
  :root:has(.aa-compliance) body *::before,
  :root:has(.aa-compliance) body *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: CanvasText !important;
    text-shadow: none !important;
  }

  :root:has(.aa-compliance) :is(.sk-skip, .aa-masthead, .aa-footer, .aa-toc, .aa-forward, .aa-forward__note, .aa-call, .aa-compliance__title, .aa-eyebrow__dot) {
    display: none !important;
  }

  .aa-compliance .aa-print-only {
    display: block;
  }

  .aa-compliance .aa-print-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-1) var(--sp-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }

  .aa-print-top__name {
    font-weight: 600;
  }

  .aa-compliance .aa-print-call {
    margin-top: var(--sp-3);
  }

  .aa-compliance__head {
    padding-block: 0 var(--sp-4);
  }

  /* The eyebrow is the printed title: "For compliance officers". */
  .aa-compliance__head .aa-eyebrow {
    display: block;
    margin-top: var(--sp-4);
    padding: 0;
    border-radius: 0;
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: normal;
    line-height: var(--lh-2xl);
    text-transform: none;
  }

  /* The statement, as one paragraph: the register's line in bold, then the rest. */
  .aa-statement {
    margin-top: var(--sp-3);
    padding: 0;
    border: 0;
  }

  .aa-statement > p {
    display: inline;
    font-size: inherit;
  }

  .aa-compliance__body {
    padding-block: 0;
  }

  .aa-compliance__grid,
  .aa-checklist {
    display: block;
  }

  .aa-checklist__item + .aa-checklist__item {
    margin-top: var(--sp-3);
  }

  .aa-compliance__section + .aa-compliance__section {
    margin-top: var(--sp-6);
  }

  .aa-facts,
  .aa-fact + .aa-fact,
  .aa-mode,
  .aa-checklist__item {
    border-color: GrayText !important;
  }

  .aa-compliance__h2 {
    break-after: avoid;
  }

  .aa-fact,
  .aa-receive__item,
  .aa-mode,
  .aa-checklist__item {
    break-inside: avoid;
  }
}

/* ============================================================
   /legal/terms and /legal/privacy — AF-154 (approved 27 Sep,
   SCREENS; redrawn from the v3 drafts, TERMS and PRIVACY).
   AA-SITE-27, AA-SITE-28. components/legal-document.blade.php.

   "The two pages a compliance officer will actually read", set
   for reading: the date and the draft notice first, one column of
   about 70 characters, numbered sections, a contents list beside
   the text from 1024px and folded into one disclosure below it, and
   no sales furniture (the brand-only header, no call to action).
   ============================================================ */

/* Printed only (AF-154 #4): the running head and the address at the foot. */
.aa-legal__print {
  display: none;
}

.aa-legal__head {
  padding-block: var(--sp-10) var(--sp-6);
}

.aa-legal__inner {
  max-width: calc(984px + 2 * var(--sp-4));
}

.aa-legal__title {
  margin-top: var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: var(--lh-headline);
  letter-spacing: -0.02em;
}

.aa-legal__lede {
  max-width: 680px;
  margin-top: var(--sp-3);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

/* The date, then the print button and the way to the other page. */
.aa-legal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-5);
}

.aa-legal__date {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  font-weight: 600;
}

.aa-legal__date .aa-glyph {
  color: var(--accent-text);
}

.aa-legal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}

/* .sk-btn sets `display`, which outranks the browser's own [hidden] rule:
   without this the print button would show, and do nothing, with
   JavaScript off (as on /compliance). */
.aa-legal__actions > [hidden] {
  display: none;
}

.aa-legal__other,
.aa-legal__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--min-target);
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The draft notice: the drawn note, its glyph beside the words. */
.aa-legal__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: 984px;
}

.aa-legal__notice > * + * {
  margin-top: 0;
}

.aa-legal__notice .aa-glyph {
  margin-top: 0;
  color: var(--accent-text);
}

.aa-legal__body {
  padding-block: var(--sp-4) var(--sp-16);
}

.aa-legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  max-width: calc(984px + 2 * var(--sp-4));
}

/* The contents, folded on a phone and a tablet (AF-154 #3). */
.aa-legal__fold {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.aa-legal__fold-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--min-target);
  padding: var(--sp-2) var(--sp-4);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.aa-legal__fold-toggle::-webkit-details-marker {
  display: none;
}

/* chevron_right turned to point down, and up once open (AF-154 #3 draws
   expand_less on the open list): the Library's own glyph, turned. */
.aa-legal__fold-toggle .aa-glyph {
  transform: rotate(90deg);
}

.aa-legal__fold[open] .aa-legal__fold-toggle .aa-glyph {
  transform: rotate(-90deg);
}

.aa-legal__fold > .aa-legal__toc-list {
  padding: 0 var(--sp-4) var(--sp-3);
}

/* Beside the text from 1024px (AF-154 #1, #2). */
.aa-legal__toc {
  display: none;
}

.aa-legal__toc-title {
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aa-legal__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aa-legal__toc-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--min-target);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  text-decoration: none;
}

.aa-legal__toc-link:hover {
  text-decoration: underline;
}

.aa-legal__toc-n {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--accent-50);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}

/* One readable column: about 70 characters (AF-154 #1). */
.aa-legal__text {
  min-width: 0;
  max-width: 680px;
}

.aa-legal__section + .aa-legal__section {
  margin-top: var(--sp-10);
}

/* A heading the contents list jumps to clears the top of the window. */
.aa-legal__section {
  scroll-margin-top: var(--sp-6);
}

.aa-legal__h2 {
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

.aa-legal__n {
  color: var(--accent-text);
}

.aa-legal__h2 + .aa-prose {
  margin-top: var(--sp-4);
}

.aa-legal .aa-prose {
  color: var(--ink);
  line-height: var(--lh-lg-loose);
  font-size: var(--fs-lg);
}

.aa-legal__back {
  margin-top: var(--sp-10);
}

@media (min-width: 600px) {
  .aa-legal__head {
    padding-block: var(--sp-16) var(--sp-8);
  }
}

@media (min-width: 1024px) {
  .aa-legal__grid {
    grid-template-columns: 240px minmax(0, 680px);
    gap: var(--sp-16);
  }

  .aa-legal__fold {
    display: none;
  }

  .aa-legal__toc {
    display: block;
    position: sticky;
    top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--surface-2);
  }

  .aa-legal__toc .aa-legal__toc-list {
    margin-top: var(--sp-2);
  }
}

/* ── The legal pages, printed or saved as a PDF (AF-154 #4) ───
   "What 'Print or save as PDF' gives a compliance officer who
   files it: no header, footer or buttons; the title, the date and
   the draft notice on page 1; the address on every page."

   One column, black on white in either theme, from a block scoped
   to these pages with :has() and their own classes — as /compliance
   and the audit do, and for the same reason there is no @page rule:
   it cannot be scoped to a page. The page count and the address on
   EVERY page are the browser's own print header and footer, which
   the browser's margins leave room for; the address is printed once
   more at the foot of the copy. */
@media print {
  :root:has(.aa-legal) {
    color-scheme: light only;
    background: Canvas !important;
  }

  :root:has(.aa-legal) body {
    background: Canvas !important;
    color: CanvasText !important;
  }

  :root:has(.aa-legal) body *,
  :root:has(.aa-legal) body *::before,
  :root:has(.aa-legal) body *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: CanvasText !important;
    text-shadow: none !important;
  }

  :root:has(.aa-legal) :is(.sk-skip, .aa-masthead, .aa-footer, .aa-legal__fold, .aa-legal__toc, .aa-legal__actions, .aa-legal__back, .aa-eyebrow, .aa-legal__date) {
    display: none !important;
  }

  /* A link that prints (the privacy page's address) keeps a focus ring in the
     paper's ink: the dark theme's ring is a light orange, which on white paper
     is no ring (as on /proof; the browser gate found it, 16 Oct). */
  :root:has(.aa-legal) :focus-visible {
    outline-color: CanvasText !important;
  }

  .aa-legal .aa-legal__print {
    display: block;
  }

  .aa-legal .aa-legal__running {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-1) var(--sp-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }

  .aa-legal__running-name {
    font-weight: 600;
  }

  .aa-legal .aa-legal__foot {
    margin-top: var(--sp-6);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }

  .aa-legal__head {
    padding-block: 0 var(--sp-4);
  }

  .aa-legal__title {
    margin-top: var(--sp-3);
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
  }

  .aa-legal__notice {
    border-color: GrayText !important;
  }

  .aa-legal__body {
    padding-block: 0;
  }

  .aa-legal__grid {
    display: block;
  }

  .aa-legal__text {
    max-width: none;
  }

  .aa-legal__section + .aa-legal__section {
    margin-top: var(--sp-6);
  }

  .aa-legal__h2 {
    break-after: avoid;
  }

  .aa-legal .aa-prose li,
  .aa-legal .aa-prose p {
    break-inside: avoid;
  }
}

/* ============================================================
   /audit/{slug} — AF-151 (approved 27 Sep, SCREENS), built in the
   new look without a redraw (NEW LOOK). AA-SITE-18.

   One advisor's audit, opened after two days of waiting and often
   forwarded. The score first, in plain words; the price beside it
   as information, never a gate (PRICE); one primary action, a call.
   From 1024px the price sits beside the result; below that it
   follows it, and the audit reads in one column.

   AF-151 draws the weaker areas' bars and points in the brand
   orange and the stronger in grey. Which areas are weak is the
   API's `weak` flag (WEAK LINE, AQ-250 A), and the page makes no
   judgement of its own: .aa-area--weak is set exactly where the API
   says so, and never on Compliance readiness. The bars are <meter>s:
   the browser draws the API's points against its maximum.
   ============================================================ */

.aa-score {
  font-variant-numeric: tabular-nums;
}

/* Printed only (AF-151 #4): the running head and the page's address. */
.aa-audit__print-head,
.aa-audit__print-address {
  display: none;
}

.aa-audit__hero {
  padding-block: var(--sp-10) var(--sp-8);
}

.aa-audit__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.aa-audit__result {
  min-width: 0;
}

/* Not scored yet (AF-151 #3): a title and what happens next. */
.aa-audit__title {
  max-width: 860px;
  margin-top: var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: var(--lh-headline);
  letter-spacing: -0.02em;
}

.aa-audit__score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
  color: var(--ink);
  line-height: 1;
}

.aa-audit__score .aa-score {
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* The top band in green (AF-151 #3): large type, and --success-text, the
   green made for type. */
.aa-audit__score--good .aa-score {
  color: var(--success-text);
}

.aa-audit__out-of {
  color: var(--ink-muted);
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: 400;
}

.aa-audit__band {
  display: inline-flex;
  margin-top: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}

.aa-audit__band--brand {
  background: var(--accent-50);
  color: var(--accent-text);
}

.aa-audit__band--good {
  background: var(--success-50);
  color: var(--success-text);
}

.aa-audit__lead {
  max-width: 680px;
  margin-top: var(--sp-3);
  color: var(--ink);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-audit__title + .aa-audit__lead {
  color: var(--ink-muted);
}

.aa-audit__expires {
  margin-top: var(--sp-3);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* The call and "Print or save as PDF": full width on a phone, as AF-151 #2
   draws them, side by side from 600px. */
.aa-audit__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.aa-audit__actions > .sk-btn {
  gap: var(--sp-2);
}

/* .sk-btn sets `display`, which outranks the browser's own [hidden] rule:
   the print button stays hidden until the script shows it. */
.aa-audit__actions > [hidden] {
  display: none;
}

/* The price, for information (AF-151 #1): a card beside the result. */
.aa-audit__price {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
}

.aa-audit__price-label {
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aa-audit__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.aa-audit__figure {
  color: var(--ink);
  font-size: var(--fs-public-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-public-title);
}

.aa-audit__per {
  color: var(--ink-muted);
}

.aa-audit__price-line {
  margin-top: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-audit__yours {
  margin-top: var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}

/* A link on its own line, not inside a sentence: a 44px target on a phone. */
.aa-audit__included {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--min-target);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  text-decoration: none;
}

.aa-audit__included:hover {
  text-decoration: underline;
}

.aa-audit__included .aa-glyph {
  width: 18px;
  height: 18px;
}

/* ── The audit itself, in one column ── */
.aa-audit__body {
  padding-block: var(--sp-6) var(--sp-12);
}

.aa-audit__column {
  max-width: 880px;
}

.aa-audit__section + .aa-audit__section {
  margin-top: var(--sp-10);
}

.aa-audit__h2 {
  color: var(--ink);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-2xl);
  letter-spacing: -0.01em;
}

.aa-audit__h2 + * {
  margin-top: var(--sp-4);
}

.aa-audit__text {
  max-width: 72ch;
  /* Long reading: the audit is read, and often forwarded, as a document. */
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-audit__muted {
  color: var(--ink-muted);
}

/* What's working (AF-151 #1): green cards, three across when they fit. */
.aa-strengths {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-3);
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.aa-strength {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--success-50);
}

.aa-strength__title {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-base);
}

.aa-strength__glyph {
  margin-top: 0;
  color: var(--success-text);
}

.aa-strength__detail {
  margin-top: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* Your score by area: the name, the bar, the figure. ONE grid for every row
   (each row a subgrid), so the bars line up and each column is as wide as its
   longest entry — "Not scored", a long name, text at 200% — and never a
   number of pixels a word can outgrow. */
.aa-areas {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.aa-area {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

.aa-area__name {
  color: var(--ink);
}

.aa-area__points {
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.aa-area__meter,
.aa-area__bar {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--surface-3);
}

.aa-area__meter {
  appearance: none;
  border: 0;
}

.aa-area__meter::-webkit-meter-bar {
  height: 10px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-3);
}

.aa-area__meter::-webkit-meter-optimum-value {
  border-radius: var(--r-full);
  background: var(--ink-muted);
}

.aa-area__meter::-moz-meter-bar {
  border-radius: var(--r-full);
  background: var(--ink-muted);
}

/* WEAK LINE (AQ-250 A): a weak area's bar is the brand orange, a
   FILL, and its figure the orange for type (--accent-text, 5.20:1
   on the canvas). #F6801F never carries a word (COLOUR). */
.aa-area--weak .aa-area__points {
  color: var(--accent-text);
}

.aa-area--weak .aa-area__meter::-webkit-meter-optimum-value {
  background: var(--accent);
}

.aa-area--weak .aa-area__meter::-moz-meter-bar {
  background: var(--accent);
}

/* What we found: a pointing mark before each. */
.aa-found {
  max-width: 72ch;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.aa-found__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.aa-found__item + .aa-found__item {
  margin-top: var(--sp-3);
}

.aa-found__glyph {
  margin-top: 0;
  color: var(--accent-text);
}

/* FINDING PER PART (AQ-411): the part a finding is on leads it, and
   the one to fix first carries FIX FIRST's words (AQ-129) as a quiet
   pill — the Library's Muted pill, grey fill and ink words (Q12), so
   it reads 4.5:1 in both themes. Its thin rule in the line token is
   what keeps it a pill on paper, where the print block drops every
   fill (UI review, 16 Oct). */
.aa-found__part {
  color: var(--ink);
  font-weight: 600;
}

.aa-found__first {
  display: inline-block;
  margin-left: var(--sp-1);
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* The cadence uplift, on the brand tint. */
.aa-uplift {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--accent-50);
  color: var(--ink);
}

.aa-uplift__glyph {
  margin-top: 0;
  color: var(--accent-text);
}

/* Compliance observations, and the disclaimer under them on every scored
   audit (DISCLAIM). */
.aa-observations {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.aa-observation + .aa-observation {
  margin-top: var(--sp-3);
}

.aa-observation__title {
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 600;
}

.aa-observation__detail {
  margin-top: var(--sp-1);
  color: var(--ink-muted);
}

.aa-observations__score {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
}

.aa-observations__score + .aa-audit__text {
  margin-top: var(--sp-2);
}

.aa-audit__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-audit__disclaimer-glyph {
  margin-top: 0;
  color: var(--ink-muted);
}

/* Your first 30 days: a bordered table, the heads in small capitals. */
.aa-plan {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.aa-plan__table {
  width: 100%;
  border-collapse: collapse;
}

.aa-plan__table th,
.aa-plan__table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
}

.aa-plan__table tbody tr {
  border-top: 1px solid var(--border);
}

.aa-plan__table thead th {
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aa-plan__table td:last-child,
.aa-plan__table th:last-child {
  width: 30%;
}

/* Share it with your compliance officer: the form at the drawn width. */
.aa-audit__form {
  max-width: 420px;
}

.aa-audit__form .sk-actions {
  margin-top: var(--sp-5);
}

/* TICK HAS ITS BUTTON (AQ-339): the tick's own button, under the form, at the
   form's width so its label wraps as the send button's does. AF-151 draws no
   place for it; 12px under the form's last line, as the section's other
   follow-on lines sit. */
.aa-audit__self {
  max-width: 420px;
  margin-top: var(--sp-3);
}

/* AA-SITE-19: what follows the outcome — THIRD ADDRESS's sentence, or the
   button that opens the form in place. The two lines are one outcome
   (.aa-audit__said), focused together. The button is a <details>, so a tap,
   Enter or Space opens it with no script; AF-151 draws it 12px under the line
   it follows. */
.aa-audit__said > .aa-audit__text + .aa-audit__text,
.aa-audit__said + .aa-audit__more {
  margin-top: var(--sp-3);
}

.aa-audit__more > summary {
  list-style: none;
  cursor: pointer;
}

.aa-audit__more > summary::-webkit-details-marker {
  display: none;
}

.aa-audit__more[open] > summary {
  margin-bottom: var(--sp-5);
}

/* R028: the privacy link under the form. A link on its own line, not inside
   a sentence, so a 44px target on a phone. */
.aa-audit__legal {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-audit__privacy {
  display: inline-flex;
  align-items: center;
  min-width: var(--min-target);
  min-height: var(--min-target);
}

/* Go through it with us (AF-151 #1). Q42: a panel that carries words is SOLID
   brand colour — AF-151 draws a gradient, and type on a gradient cannot be
   measured. --accent is #F6801F in both themes and --accent-fg is the ink
   COLOUR rules for it (6.37:1), so the words and the focus ring are that ink. */
/* The band runs the page's full width, as /linkedin's closing panel does
   (BP-1171 666:3535, Round 20): the walkthrough is the band, the container
   sits inside it, and the footer follows straight after. */
.aa-audit__call {
  padding-top: var(--sp-12);
}

.aa-walkthrough {
  padding-block: var(--sp-16);
  background: var(--accent);
  color: var(--accent-fg);
  text-align: center;
}

.aa-walkthrough__title {
  color: var(--accent-fg);
  font-size: var(--fs-public-title);
  font-weight: 700;
  line-height: var(--lh-public-title);
  letter-spacing: -0.02em;
}

.aa-walkthrough__line {
  max-width: 640px;
  margin: var(--sp-4) auto 0;
  color: var(--accent-fg);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

/* The button on the panel is the surface under ink, as drawn: --surface and
   --ink are a pair in each theme. Its hover keeps that fill, because aa's
   hover orange under a light dark-theme label would read under 3:1. */
.aa-walkthrough__button {
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--control-h-lg);
  margin-top: var(--sp-5);
  padding-inline: var(--sp-6);
  background: var(--surface);
  color: var(--ink);
}

.aa-walkthrough .aa-walkthrough__button:hover {
  background: var(--surface);
  text-decoration: underline;
}

.aa-walkthrough :focus-visible {
  outline-color: var(--accent-fg);
}

/* The audit's private 404 (AF-146 #4): centred, two ways on. The site's own
   error pages wear it too (AF-146 #3, #5, #6; AA-SITE-24): the same drawing. */
.aa-lost {
  padding-block: var(--sp-12) var(--sp-16);
}

.aa-lost__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.aa-lost__title {
  max-width: 760px;
  margin-top: var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: var(--lh-headline);
  letter-spacing: -0.02em;
}

.aa-lost__lead {
  max-width: 760px;
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-lost__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-6);
}

.aa-lost__actions > .sk-btn {
  gap: var(--sp-2);
}

/* The 404's three ways on (AF-146 #3, AA-SITE-24): AF-146 #2's cards, as wide
   as the drawing's row (1000 of 1280) and no wider. */
.aa-lost__ways {
  width: 100%;
  max-width: 1000px;
}

@media (min-width: 600px) {
  .aa-audit__actions,
  .aa-lost__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .aa-lost__actions {
    justify-content: center;
    width: auto;
  }

  .aa-walkthrough__button {
    width: auto;
  }
}

@media (min-width: 600px) {
  .aa-audit__hero {
    padding-block: var(--sp-16) var(--sp-10);
  }

  .aa-walkthrough {
    padding-block: calc(var(--sp-20) + var(--sp-2));
  }

  /* The band's title, as 666:3536 sets it: one size on every page's band. */
}

@media (min-width: 1024px) {
  .aa-audit__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--sp-12);
  }
}

/* ── /audit/{slug}, printed or saved as a PDF (AF-151 #4) ─────
   "The copy a compliance officer files: black on white, the name
   and date on top, the disclaimer kept." The name and the date are
   held (the API sends neither), so the head names the brand and the
   document. One column; no header, footer, buttons, price, form or
   call; the areas as lines of text; the page's address at the foot.

   Paper is white in either theme, so the colours are the paper's and
   its ink — CSS system colours under `color-scheme: light`, as
   /compliance's print block does and for the same reason: dark
   tokens would print near-white type on white paper. Scoped to this
   page with :has() and its own classes, and no @page rule. */
@media print {
  :root:has(.aa-audit) {
    color-scheme: light only;
    background: Canvas !important;
  }

  :root:has(.aa-audit) body {
    background: Canvas !important;
    color: CanvasText !important;
  }

  :root:has(.aa-audit) body *,
  :root:has(.aa-audit) body *::before,
  :root:has(.aa-audit) body *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: CanvasText !important;
    text-shadow: none !important;
  }

  :root:has(.aa-audit) :is(.sk-skip, .aa-masthead, .aa-footer, .aa-eyebrow, .aa-audit__actions, .aa-audit__price, .aa-audit__forward, .aa-audit__call, .aa-area__meter, .aa-area__bar, .aa-audit__expires) {
    display: none !important;
  }

  /* "Fix this first" keeps its rule on paper in the paper's ink: the
     line token measures 1.2:1 on white, which no printer shows. */
  .aa-audit .aa-found__first {
    border-color: CanvasText !important;
  }

  .aa-audit .aa-audit__print-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-1) var(--sp-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }

  .aa-audit__print-name {
    font-weight: 600;
  }

  .aa-audit .aa-audit__print-address {
    display: block;
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }

  .aa-audit__hero {
    padding-block: 0;
  }

  .aa-audit__body {
    padding-block: var(--sp-6) 0;
  }

  .aa-audit__top {
    display: block;
  }

  /* "47 out of 100 · Dormant", one line, as AF-151 #4 prints it. */
  .aa-audit__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--sp-2);
    margin-top: var(--sp-3);
  }

  .aa-audit__score {
    display: block;
    margin-top: 0;
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    font-weight: 600;
  }

  .aa-audit__score .aa-score,
  .aa-audit__out-of {
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    font-weight: 600;
    letter-spacing: normal;
  }

  .aa-audit__band {
    display: block;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    font-weight: 600;
  }

  .aa-audit__band::before {
    content: "· ";
  }

  .aa-strengths,
  .aa-areas,
  .aa-area {
    display: block;
  }

  .aa-area + .aa-area {
    margin-top: var(--sp-2);
  }

  .aa-strength {
    padding: var(--sp-2) 0;
  }

  .aa-area__points {
    margin-left: var(--sp-2);
  }

  .aa-audit__disclaimer {
    padding: var(--sp-3);
    border-color: CanvasText !important;
  }

  .aa-audit__disclaimer-glyph {
    display: none;
  }

  .aa-plan,
  .aa-plan__table tbody tr {
    border-color: GrayText !important;
  }

  .aa-audit__h2 {
    break-after: avoid;
  }

  .aa-strength,
  .aa-observation,
  .aa-audit__disclaimer,
  .aa-plan__table tr {
    break-inside: avoid;
  }
}

/* ── /proof, printed ──────────────────────────────────────────
   AF-152 draws no printed copy; the build spec gives print to this
   unit (§6's state matrix, "O → 20"). So the narrowest: every
   sentence printed and nothing hidden, the paper's colours in either
   theme — dark tokens would print near-white type on white paper —
   and one column at any width. CSS system colours under
   `color-scheme: light`, as the two documents' print blocks above
   do, scoped to this page with :has() and its own classes, and no
   @page rule. */
@media print {
  :root:has(.aa-proof) {
    color-scheme: light only;
    background: Canvas !important;
  }

  :root:has(.aa-proof) body {
    background: Canvas !important;
    color: CanvasText !important;
  }

  :root:has(.aa-proof) body *,
  :root:has(.aa-proof) body *::before,
  :root:has(.aa-proof) body *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: CanvasText !important;
    text-shadow: none !important;
  }

  /* The header and footer print too, so their focus ring is the paper's ink:
     the dark theme's ring is a light orange, which on white paper is no ring. */
  :root:has(.aa-proof) :focus-visible {
    outline-color: CanvasText !important;
  }

  .aa-proof__hero-grid,
  .aa-proof__pair {
    display: block;
  }

  .aa-proof__photo {
    display: block;
    margin-top: var(--sp-4);
  }

  .aa-proof__pair > * + * {
    margin-top: var(--sp-5);
  }

  .aa-proof__account,
  .aa-proof__cases {
    border-color: GrayText !important;
  }

  /* On screen the gap card's edge is its fill, which paper drops: drawn here,
     so it stays as visible as the account beside it (AF-152's review card). */
  .aa-proof__gap {
    border: 1px solid GrayText;
  }

  /* The eyebrow's chip is gone on paper, so it sits in line with the title,
     and its dot is the ink. */
  :root:has(.aa-proof) .aa-proof__hero .aa-eyebrow {
    padding-inline: 0;
  }

  :root:has(.aa-proof) .aa-eyebrow__dot {
    background: CanvasText !important;
  }

  /* The header prints too: its current-page underline in the paper's ink. */
  :root:has(.aa-proof) .aa-nav a[aria-current="page"] {
    text-decoration-color: CanvasText !important;
  }

  .aa-proof__h2 {
    break-after: avoid;
  }

  .aa-proof__account,
  .aa-proof__gap,
  .aa-proof__record,
  .aa-proof__cases {
    break-inside: avoid;
  }
}

/* ============================================================
   /welcome — AF-146 #1 and #2 (approved 26 Sep), built in the new
   look without a redraw (NEW LOOK). AA-SITE-23.

   #1, where checkout lands: one centred column, as drawn (760px) —
   the title, "Watch your inbox" first, then what happens next as a
   timeline with step 7 flagged before she reaches it (GATES), then
   the two closing lines. #2, the same address without the checkout
   reference: the title, the lead and AF-146's three ways on, in a
   row from 1024px (1000px, as drawn) and stacked below that.

   AF-146 draws "the paperwork done." and "who have just paid." in a
   gradient. #F6801F is a FILL (COLOUR): as type it reads 2.6:1, and
   type on a gradient cannot be measured, so the words are
   --accent-text (.aa-em), as on every page. The brand orange appears
   here only as fills and edges: the inbox card's edge, step 7's disc
   (under its ink label, 6.37:1) and step 7's outline.
   ============================================================ */

/* The space above the content and below it, as AF-146 draws them once the
   footer's own top margin (--sp-12) is counted. */
.aa-welcome__hero {
  padding-block: var(--sp-12) var(--sp-3);
}

.aa-welcome__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin-inline: auto;
}

.aa-welcome__inner--wide {
  max-width: 1000px;
}

/* 700, the heaviest weight the layout loads (Fira Sans 400–700), as on the
   audit's private 404 from the same drawing. Balanced, so no word is left
   alone on a line — AF-146 breaks its headlines and leads evenly. */
.aa-welcome__title {
  max-width: 760px;
  margin-top: var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: var(--lh-headline);
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

.aa-welcome__lead {
  max-width: 760px;
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
  text-align: center;
  text-wrap: balance;
}

/* "Watch your inbox": the brand's tint with the brand's edge, as drawn. */
.aa-welcome__inbox {
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--accent-50);
  color: var(--ink);
}

.aa-welcome__inbox-glyph {
  width: 24px;
  height: 24px;
  margin-top: 0;
  color: var(--accent-text);
}

/* The three kinds of card title are 22px at every width, as AF-146 draws
   them on the phone too, and as /linkedin's step titles are. */
.aa-welcome__inbox-title {
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

.aa-welcome__inbox p {
  margin-top: var(--sp-1);
}

/* A small capital label: the brand's text colour, never #F6801F. */
.aa-welcome__kicker {
  align-self: stretch;
  margin-top: var(--sp-8);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── What happens next: a timeline ── */
.aa-steps {
  align-self: stretch;
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.aa-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
  padding-bottom: var(--sp-6);
}

/* The rail runs from under each number to the next; the last step has none. */
.aa-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: var(--sp-8);
  bottom: 0;
  /* The 2px rail centred under the 32px disc. */
  left: calc(var(--sp-4) - 1px);
  width: 2px;
  background: var(--border-strong);
}

.aa-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}

.aa-step__text {
  min-width: 0;
  padding-top: var(--sp-1);
}

.aa-step__title {
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

.aa-step__text p {
  margin-top: var(--sp-1);
  color: var(--ink-muted);
}

/* Step 7, flagged before she reaches it (GATES): the number on the brand's
   fill under its ink label (COLOUR, 6.37:1), and the words inside the brand's
   edge on the surface, with the gap AF-146 draws after it. */
.aa-step--flag {
  margin-bottom: var(--sp-4);
}

.aa-step--flag .aa-step__n {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}

.aa-step--flag .aa-step__text {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1.5px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
}

.aa-welcome__note {
  align-self: stretch;
  margin-top: var(--sp-2);
  color: var(--ink);
}

.aa-welcome__small {
  align-self: stretch;
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* ── The ways on (#2): .aa-way's parts, with the icon above the words, one
   column until there is room for three in a row, all three the row's height
   (AF-146 #2, made equal on 26 Sep). ── */
.aa-ways--routes {
  align-self: stretch;
  margin-top: var(--sp-8);
}

.aa-ways--routes .aa-way {
  flex-direction: column;
  gap: var(--sp-3);
}

.aa-ways--routes .aa-way__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

/* The page's body size, as drawn (/audit's cards are smaller on purpose). */
.aa-ways--routes .aa-way__text p {
  color: var(--ink-muted);
  font-size: inherit;
}

@media (min-width: 600px) {
  .aa-welcome__hero {
    padding-block: var(--sp-20) var(--sp-12);
  }

  /* .aa-ways has two columns from 600px for /audit's two cards; three would
     leave one alone on a row, so these stay stacked until all three fit. */
  .aa-ways--routes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .aa-ways--routes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   /book ON OUR OWN CALENDAR (AF-124; AA-SITE-21, AA-SITE-22)

   #1's three columns — who and where, the days, the times — in one
   card on the warm wash, as Cal.com and Amie lay it out; stacked on
   a phone and a tablet (#7: "who and what, then the days, then the
   times"), side by side from 1024px. Every target is 44px or more on touch.
   The day open on the page is the solid brand fill with an ink
   label (the button's own pair, COLOUR); a day read and found empty
   and a day out of range are --ink-subtle and not links.
   ============================================================ */
.aa-book-hero {
  padding-block: var(--sp-10) var(--sp-6);
}

.aa-book-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.aa-book-hero__title {
  max-width: 760px;
  margin-top: var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: var(--lh-headline);
  letter-spacing: -0.02em;
}

.aa-book-hero__lead {
  max-width: 62ch;
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg-loose);
}

.aa-book-hero__lead > * + * {
  margin-top: var(--sp-2);
}

.aa-book-section {
  padding-block: var(--sp-4) var(--sp-12);
}

.aa-book {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}

.aa-book > * {
  min-width: 0;
  padding: var(--sp-4);
}

.aa-book > * + * {
  border-top: 1px solid var(--border);
}

.aa-book__who {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.aa-book__avatar {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--canvas);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}

.aa-book__name {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-base);
}

.aa-book__name span {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-book__what {
  margin-top: var(--sp-4);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-xl);
}

.aa-book__facts {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}

.aa-book__facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.aa-book__facts .aa-glyph,
.aa-book__zone .aa-glyph,
.aa-book__chosen .aa-glyph {
  color: var(--ink-muted);
}

.aa-book__month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.aa-book__month-name,
.aa-book__day-name {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
}

.aa-book__arrows {
  display: flex;
  gap: var(--sp-1);
}

.aa-book__arrow {
  display: inline-grid;
  place-items: center;
  width: var(--control-h-md);
  height: var(--control-h-md);
  border-radius: var(--r-md);
  color: var(--ink);
}

.aa-book__grid {
  width: 100%;
  margin-top: var(--sp-3);
  border-collapse: collapse;
  table-layout: fixed;
}

.aa-book__grid th {
  padding-bottom: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.aa-book__grid td {
  padding: 1px 0;
  text-align: center;
}

.aa-book__day {
  display: inline-grid;
  place-items: center;
  width: 100%;
  max-width: var(--control-h-md);
  min-height: var(--control-h-md);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}

a.aa-book__day {
  background: var(--accent-50);
  color: var(--accent-text);
  text-decoration: none;
}

a.aa-book__day:hover {
  box-shadow: inset 0 0 0 1px var(--accent-text);
}

.aa-book__day--open,
a.aa-book__day--open {
  background: var(--accent);
  color: var(--accent-fg);
}

.aa-book__day--off,
.aa-book__day--empty {
  color: var(--ink-subtle);
  font-weight: 400;
}

.aa-book__zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.aa-book__change {
  flex-basis: auto;
}

.aa-book__change[open] {
  flex-basis: 100%;
}

.aa-book__change summary {
  display: inline-flex;
  align-items: center;
  min-width: var(--min-target);
  min-height: var(--min-target);
  color: var(--accent-text);
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
}

.aa-book__change summary::-webkit-details-marker {
  display: none;
}

.aa-book__zones {
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  list-style: none;
}

.aa-book__zones a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--min-target);
  padding-inline: var(--sp-3);
  color: var(--ink);
  text-decoration: none;
}

.aa-book__zones li + li {
  border-top: 1px solid var(--border);
}

.aa-book__other {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.aa-book__other label {
  flex-basis: 100%;
  color: var(--ink);
  font-weight: 600;
}

.aa-book__other select {
  flex: 1 1 12rem;
  min-width: 0;
}

.aa-book__slots {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.aa-book__slot {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.aa-book__slot > form {
  display: flex;
}

.aa-book__time {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h-md);
  /* An outline with no fill is the control's only edge: 3:1 (Q215), so
     --ink-muted, as site-kit's secondary button, never --border-strong. */
  border: 1px solid var(--ink-muted);
  border-radius: var(--r-md);
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
}

.aa-book__slot--picked .aa-book__time {
  border: 2px solid var(--accent-text);
}

.aa-book__none,
.aa-book__gone {
  margin-top: var(--sp-4);
  color: var(--ink);
}

.aa-book__gone {
  padding-left: var(--sp-3);
  border-left: 3px solid var(--danger);
}

.aa-book__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  color: var(--ink);
}

.aa-book__notice--busy {
  background: var(--info-50);
}

.aa-book__notice--down {
  background: var(--warning-50);
}

.aa-book__notice strong {
  display: block;
}

.aa-book__card {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}

.aa-book__card .aa-form {
  max-width: none;
}

.aa-book__card .aa-form > .aa-field:first-of-type {
  margin-top: var(--sp-4);
}

.aa-book__submit {
  gap: var(--sp-2);
}

.aa-book__chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--accent-50);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}

.aa-book__chosen p {
  flex: 1 1 14rem;
  min-width: 0;
}

.aa-book__chosen-change {
  display: inline-flex;
  align-items: center;
  min-width: var(--min-target);
  min-height: var(--min-target);
  color: var(--accent-text);
}

.aa-book__booked > * + * {
  margin-top: var(--sp-4);
}

.aa-book__booked-glyph {
  width: 40px;
  height: 40px;
  color: var(--success-text);
}

.aa-book__booked-title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.aa-book__booked-when {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
}

.aa-book__booked-meet a {
  overflow-wrap: anywhere;
}

.aa-book__booked-mail,
.aa-book__booked-move {
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.aa-book__calendar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.aa-book__moved {
  margin-bottom: var(--sp-6);
}

.aa-book__calendar--manage {
  justify-content: center;
  margin-bottom: var(--sp-6);
}

.aa-book__moved > * + * {
  margin-top: var(--sp-3);
}

.aa-book__decide {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  max-width: 560px;
  margin-inline: auto;
}

.aa-book__decide form,
.aa-book__decide form .sk-btn {
  width: 100%;
}

/* AF-124 #8 draws "Yes, cancel the call" in red. #EF4444 is a GRAPHIC
   colour (3.8:1 on the surface): it can be the button's edge, never its
   words, which stay ink. */
.aa-book__cancel.sk-btn--secondary {
  border-color: var(--danger);
  color: var(--ink);
}

.aa-book__instead {
  text-align: center;
}

.aa-book__instead a {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-target);
  color: var(--accent-text);
  font-weight: 600;
}

@media (min-width: 600px) {
  .aa-book > * {
    padding: var(--sp-6);
  }
}

@media (min-width: 1024px) {
  .aa-book {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .aa-book > * + * {
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}