/* ==========================================================================
   UPDATED 10 September 2026      css/styles.css      ?v=483  ->  ?v=549
   ==========================================================================
   227 KB -> 250 KB of stylesheet.  1318 selectors -> 1380, 68 added, 6 removed.
   Drop in replacement: nothing that already worked was renamed or changed.
   Full write up in CHANGES.md.

   >> ALL NEW CSS IS IN ONE BLOCK AT THE END OF THIS FILE. <<
      Search for  NEW CSS 10 September 2026
      76 rules, grouped by media query. Everything before that block is exactly
      as you already have it, apart from the two declarations in section 7.

      One new rule stayed where it was rather than moving:
      .aa-modal-video keeps its position because .aa-modal-overlay has equal
      specificity and currently wins by sitting later. Moving it would have
      flipped that and changed the modal padding. Verified against a before
      and after snapshot of 6,171 elements across five pages.

   --------------------------------------------------------------------------
   1. COURSE PAGE SYLLABUS ROWS            26 new selectors    .aa-syl-*
   --------------------------------------------------------------------------
   The syllabus block on all 45 course pages. One row per topic: a number, a
   2160x400 banner, the subtopic count, and a chevron that opens the subtopics.

   .aa-syl-visual            base, banner stacked above its bar
   .aa-syl-inline            banner, number and count on ONE line, from 768px
   .aa-syl-mini              same row with a fixed 21rem banner instead of one
                             that stretches, for pages with many topics

   Two things in here are load bearing, please do not simplify them:

     - .aa-syl-shot img declares  aspect-ratio: 27 / 5  (that is 5.4, the exact
       ratio the banner files are drawn at). Declared, not measured, so the row
       reserves its height before the image arrives and the page does not jump.

     - .aa-syl-inline .aa-syl-bar uses  display: contents  so its children join
       the summary's own flex line rather than forming a second row. The bar
       then has no box left to draw the open state divider on, which is why
       that border moved to  .aa-syl-item[open] > summary.

   .aa-syl-n has a fixed width. Poppins has no tabular figures, so "01" measures
   13.3px against "04" at 16.7px, and without the fixed box every row started
   its banner at a slightly different x.

   --------------------------------------------------------------------------
   2. RESOURCE SUB PAGE DOWNLOAD ROWS      14 new selectors    .aa-br-*
   --------------------------------------------------------------------------
   The numbered download list on nine of the resource pages. Row, number,
   title, free or locked tag, and a button.

   Below 768px the row wraps: the number sits with the title, and the button
   goes full width on its own line. That is the  @media (max-width: 767px)
   block, and it is deliberate, not a fallback.

   --------------------------------------------------------------------------
   3. RESOURCE SUB PAGE INTRO BAND          9 new selectors    .aa-rp-*
   --------------------------------------------------------------------------
   Picture one side, heading and copy the other, two buttons underneath. The
   buttons are a 2 column grid that drops to 1 column below 576px, so they
   never end up as two thin stubs on a phone.

   --------------------------------------------------------------------------
   4. VIDEO MODAL                           6 new selectors    .aa-modal-video
   --------------------------------------------------------------------------
   Used by the book preview. The card is transparent and borderless, the frame
   holds a 16 / 9 iframe.

   Its max-width is capped against the VIEWPORT HEIGHT, not just a fixed rem
   value:

       max-width: min(56rem, calc((100dvh - 9rem) * 16 / 9));

   Without that, on a short window the video overflowed the bottom of the
   screen and the close button was pushed off the top, leaving no way to shut
   it. Keep the dvh version and the vh fallback both.

   --------------------------------------------------------------------------
   5. RESOURCE TILES AND HERO CROPS         9 new selectors
   --------------------------------------------------------------------------
   .aa-fr-card is now one tile per row from 768px, picture left, text right.
   The blue radial background behind the device mockups was removed.

   .aa-hero-low and .aa-hero-lower shift  object-position  down to 70% and 79%
   on the resource page heroes, so faces are not cropped at the chin.

   --------------------------------------------------------------------------
   6. EXAM BOARD LOGOS ON THE BOOK CARDS    4 new selectors    .aa-bk-mark
   --------------------------------------------------------------------------
   The white board logos were being inverted for the light theme. That works
   for a plain wordmark but turned the Cambridge crest navy and lost its red
   and gold. Cambridge now ships a real light mode file and swaps on theme
   (.aa-lm / .aa-dm). Edexcel and AQA still invert, which is why the invert
   rule is now scoped to  img.aa-inv  rather than every img in the mark.

   --------------------------------------------------------------------------
   7. TWO CHANGES TO EXISTING RULES
   --------------------------------------------------------------------------
   html { scrollbar-gutter: stable; }
       Opening a modal sets  body { overflow: hidden }, which removed the
       scrollbar and widened the document by 15px, shifting everything behind
       the overlay sideways by half that. The gutter reserves the space.

   html.aa-dark { --muted-foreground: #a1a1a1 -> #e1e7f0; }
       Secondary text was reading as grey rather than as quiet text on the
       black background. Contrast against #000 goes from 8.13:1 to 16.89:1,
       close to body text at 18.43:1. ONE token, 123 rules follow it.
       The light theme value is untouched.

   --------------------------------------------------------------------------
   8. THE 6 REMOVED SELECTORS
   --------------------------------------------------------------------------
   .aa-fr-tick, .aa-fr-card h3, .aa-fr-body p, .aa-fr-body img, .aa-fr-ace h3
       superseded by the one tile per row layout in section 5.
   html:not(.aa-dark) .aa-bk-mark img
       replaced by the scoped version in section 6.

   None of them is referenced by any page in this folder.
   ========================================================================== */

/* ==========================================================================
   Akbar Academy — plain HTML/CSS build (WordPress-ready)
   Hand-written from the original Next.js/Tailwind prototype.
   Brand: Electric #02BAFD, Mandarin #F9B602, Midnight #000, White #F0F0F0.
   Typeface: Poppins.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,700&display=swap");

/* --- Design tokens -------------------------------------------------------- */
/* Light theme (default :root). The site ships dark by default — the <html>
   element gets the `dark` class from js/main.js, which swaps these tokens. */
:root {
  --background: #f4f5f7;
  --foreground: #232629;
  --card: #ffffff;
  --card-foreground: #232629;
  --section-alt: #ecedf1;
  --popover: #ffffff;

  --primary: #02bafd;
  --primary-foreground: #04222e;

  --secondary: #f0f0f0;
  --secondary-foreground: #16191d;
  --muted: #f0f0f0;
  --muted-foreground: #5b6672;
  --accent: #e2f6ff;
  --accent-foreground: #04222e;
  --border: #e4e7ea;
  --input: #e4e7ea;
  --ring: #02bafd;

  --brand: #02bafd;
  --gold: #f9b602;
  --gold-foreground: #2a1d00;

  --radius: 0.85rem;
  --radius-lg: 0.85rem;
  --radius-xl: 1.19rem;
  --radius-2xl: 1.53rem;
  --radius-3xl: 1.87rem;

  --container: 72rem;
  --header-h: 82px;

  color-scheme: light;
}

html.aa-dark {
  --background: #000000;
  --foreground: #f0f0f0;
  --card: #000000;
  --card-foreground: #f0f0f0;
  --section-alt: #000000;
  --popover: #000000;

  --primary: #02bafd;
  --primary-foreground: #04222e;

  --secondary: #0d0d0d;
  --secondary-foreground: #f0f0f0;
  --muted: #0d0d0d;
  /* Lifted from #a1a1a1, which was reading as grey rather than as quiet text.
     Not a contrast failure: #a1a1a1 measured 8.13:1 on black, more than the
     light theme's 5.85:1. The problem was the gap to body text. Light mode runs
     body at 15.21:1 and muted at 5.85, and on white that reads as a hierarchy.
     Dark mode ran body at 18.43:1 and muted at 8.13, and on pure black the same
     ratio reads as dimmed. This is 12.21:1, and slightly cool rather than
     neutral, so it sits under #f0f0f0 as quieter text instead of flat grey. */
  --muted-foreground: #e1e7f0;
  --accent: #0a2430;
  --accent-foreground: #cdeeff;
  --border: rgba(255, 255, 255, 0.18);
  --input: rgba(255, 255, 255, 0.2);
  --ring: #02bafd;

  --brand: #02bafd;
  --gold: #ffc21f;
  --gold-foreground: #241a00;

  color-scheme: dark;
}

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--border);
}
* {
  margin: 0;
  padding: 0;
}
/* Host themes (Bootstrap 3, Divi) style bare ELEMENTS, which beat the universal
   reset above. Restate it at element level so their margins/borders cannot leak in. */
blockquote,
address,
p,
ul,
ol,
dl,
dd,
figure,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
blockquote {
  border-left: 0;
  font-size: inherit;
}
/* Bootstrap 3 styles bare elements too. It gives every <legend> a bottom border
   and full width, which drew a rule under "Are you a parent or student?" in the
   enrol form, and it puts a bottom margin on every <label>. Neutralise both so
   only this stylesheet decides how the forms look. */
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
label {
  margin-bottom: 0;
}
html {
  /* Some themes (Bootstrap 3, Divi) set html{font-size:10px}, which would
     shrink every rem in this design to 62.5%. Re-assert the browser default. */
  font-size: 100%;
  font-family: Poppins, Helvetica, Arial, Lucida, sans-serif;
  scroll-behavior: smooth;
  /* Opening a modal sets overflow hidden on the body, which takes the
     scrollbar away and lets the document widen by its width, so everything
     centred jumps sideways as the modal appears. Reserving the gutter means
     the width never changes, so nothing behind the overlay moves. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  /* An explicit body rule in a host theme beats what body inherits from
     html, so restate family and weight here. */
  font-family: Poppins, Helvetica, Arial, Lucida, sans-serif;
  font-weight: 400;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  font-size: 16px;
}
img,
svg,
iframe {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
button:not(:disabled),
[role="button"],
a[href],
label[for],
summary,
select:not(:disabled) {
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
main {
  flex: 1;
}

/* --- Layout helpers ------------------------------------------------------- */
.aa-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) {
  .aa-container {
    padding-inline: 1.5rem;
  }}
@media (min-width: 1024px) {
  .aa-container {
    padding-inline: 2rem;
  }}
.aa-container.aa-narrow {
  max-width: 48rem;
}

.aa-section {
  padding-block: 3rem;
}
@media (min-width: 640px) {
  .aa-section {
    padding-block: 4rem;
  }}
/* Alternating shading, mirroring the original site */
main > section:nth-of-type(even) {
  background-color: var(--section-alt);
}

.aa-text-center {
  text-align: center;
}
.aa-section-head {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.aa-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.aa-section-title {
  margin-top: 0.75rem;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .aa-section-title {
    font-size: 2.25rem;
  }}
.aa-section-title.aa-xl {
  font-weight: 800;
}
.aa-section-lead {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.aa-text-primary {
  color: var(--primary);
}
.aa-text-gold {
  color: var(--gold);
}

/* --- Buttons -------------------------------------------------------------- */
.aa-btn {
  /* Default size mirrors the original's h-8 button (32px tall, compact
     padding, text-sm font-medium). Size modifiers below match sm/md/lg. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  height: 2rem;
  padding-inline: 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s,
    transform 0.05s;
  cursor: pointer;
}
.aa-btn:active {
  transform: translateY(1px);
}
.aa-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.aa-btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.aa-btn-primary:hover {
  background: color-mix(in oklab, var(--primary) 85%, black);
}
.aa-btn-outline {
  border-color: var(--border);
  background: var(--background);
  color: var(--foreground);
}
.aa-btn-outline:hover {
  background: var(--muted);
}
.aa-btn-ghost {
  background: transparent;
  color: var(--foreground);
}
.aa-btn-ghost:hover {
  background: var(--muted);
}
.aa-btn-gold {
  background: var(--gold);
  color: var(--gold-foreground);
}
.aa-btn-gold:hover {
  filter: brightness(0.95);
}
.aa-btn-sm {
  height: 1.75rem;
  padding-inline: 0.75rem;
  font-size: 0.8rem;
  /* Smaller radius so the short button reads as a rounded square, not a pill,
     matching the original's size="sm" rounded-[min(radius-md,12px)]. */
  border-radius: calc(var(--radius) * 0.8);
}
.aa-btn-md {
  height: 2.5rem;
  padding-inline: 1.25rem;
}
.aa-btn-lg {
  height: 2.75rem;
  padding-inline: 1.5rem;
}
.aa-btn-block {
  width: 100%;
}
/* 260px on mobile, auto (hug the label) on desktop — matches the original's
   w-[260px] sm:w-auto on the call-to-action buttons. */
.aa-btn-fixed {
  width: 260px;
  max-width: 100%;
}
@media (min-width: 640px) {
  .aa-btn-fixed {
    width: auto;
  }}
/* On dark photo overlays (hero) — white outline */
.aa-btn-on-dark {
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
}
.aa-btn-on-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
/* On the electric-blue band (final CTA) — dark outline in primary-foreground,
   matching the section's dark copy. Identical in light and dark mode. */
.aa-btn-on-electric {
  border-color: color-mix(in oklab, var(--primary-foreground) 40%, transparent);
  background: transparent;
  color: var(--primary-foreground);
}
.aa-btn-on-electric:hover {
  background: color-mix(in oklab, var(--primary-foreground) 10%, transparent);
  color: var(--primary-foreground);
}

.aa-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}
.aa-link-arrow svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.15s;
}
.aa-link-arrow:hover svg {
  transform: translateX(2px);
}

/* --- Announcement ticker -------------------------------------------------- */
.aa-announcement {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}
.aa-announcement-accent {
  height: 2px;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--primary),
    var(--gold),
    var(--primary)
  );
  opacity: 0.8;
}
.aa-announcement-track-wrap {
  display: flex;
  overflow: hidden;
  padding-block: 0.5rem;
}
.aa-marquee {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  white-space: nowrap;
  animation: marquee 95s linear infinite;
}
.aa-announcement .aa-marquee-item {
  display: inline-flex;
  align-items: center;
}
.aa-announcement .aa-msg {
  margin-inline: 1.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
}
.aa-announcement .aa-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  flex-shrink: 0;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- Header --------------------------------------------------------------- */
.aa-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}
.aa-site-header .aa-container {
  display: flex;
  height: var(--header-h);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.aa-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.aa-logo img {
  height: 3.5rem;
  width: auto;
}
.aa-logo .aa-logo-light {
  display: block;
}
.aa-logo .aa-logo-dark {
  display: none;
}
html.aa-dark .aa-logo .aa-logo-light {
  display: none;
}
html.aa-dark .aa-logo .aa-logo-dark {
  display: block;
}

.aa-nav-desktop {
  display: none;
  align-items: center;
  gap: 0.125rem;
  white-space: nowrap;
}
@media (min-width: 1200px) {
  .aa-nav-desktop {
    display: flex;
  }}
.aa-nav-link,
.aa-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
  background: transparent;
  transition: color 0.15s;
}
.aa-nav-link:hover,
.aa-nav-trigger:hover {
  color: var(--foreground);
}
.aa-nav-trigger svg {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.6;
  transition: transform 0.2s;
}

/* Dropdown */
.aa-nav-item {
  position: relative;
}
.aa-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  padding-top: 0.5rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.aa-nav-item:hover .aa-dropdown,
.aa-nav-item:focus-within .aa-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.aa-nav-item:hover .aa-nav-trigger svg,
.aa-nav-item:focus-within .aa-nav-trigger svg {
  transform: rotate(180deg);
}
.aa-dropdown-panel {
  min-width: 236px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--popover);
  padding: 0.375rem;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
}
.aa-dropdown-panel.aa-wide {
  min-width: 272px;
}
.aa-menu-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--foreground) 85%, transparent);
  transition: background 0.15s, color 0.15s;
}
.aa-menu-row:hover {
  background: var(--muted);
  color: var(--foreground);
}
.aa-menu-row.aa-all {
  font-weight: 600;
  color: var(--primary);
}
.aa-menu-row.aa-med {
  font-weight: 500;
}
.aa-menu-row .aa-ico {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 0.375rem;
  background: var(--muted);
  color: color-mix(in oklab, var(--foreground) 70%, transparent);
}
/* Small icon inside the chip (size-4), matching the original */
.aa-menu-row .aa-ico svg {
  width: 1rem;
  height: 1rem;
}
.aa-menu-sep {
  height: 1px;
  background: var(--border);
  margin-block: 0.25rem;
}
/* Subject fly-out */
.aa-flyout {
  position: relative;
}
.aa-flyout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s;
}
.aa-flyout-row:hover {
  background: var(--muted);
}
.aa-flyout-row svg {
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
}
.aa-flyout-panel {
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 50;
  padding-left: 0.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s, visibility 0.15s;
}
/* Child selector, not descendant: flyouts nest now, so ".flyout:hover
   .flyout-panel" would open a subject AND all three of its board panels at the
   same time. Each level must only reveal its own direct panel. */
.aa-flyout:hover > .aa-flyout-panel,
.aa-flyout:focus-within > .aa-flyout-panel {
  visibility: visible;
  opacity: 1;
}
.aa-flyout-panel .aa-dropdown-panel {
  min-width: 190px;
}
/* Third level (board to level). The desktop nav only exists at 1200px and up,
   where the panel ends at roughly 963px, so no edge flip is needed. */
.aa-flyout .aa-flyout .aa-flyout-panel .aa-dropdown-panel { min-width: 200px; }

/* Header right */
.aa-header-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.aa-icon-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  border: 0;
  transition: background 0.15s;
}
.aa-icon-btn:hover {
  background: var(--muted);
}
.aa-icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.aa-theme-toggle .aa-moon {
  display: none;
}
html.aa-dark .aa-theme-toggle .aa-sun {
  display: none;
}
html.aa-dark .aa-theme-toggle .aa-moon {
  display: block;
}
.aa-hide-sm {
  display: none;
}
@media (min-width: 640px) {
  .aa-hide-sm {
    display: inline-flex;
  }}
.aa-menu-btn {
  display: grid;
}
@media (min-width: 1200px) {
  .aa-menu-btn {
    display: none;
  }}

/* --- Mobile drawer -------------------------------------------------------- */
.aa-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.aa-drawer-overlay.aa-open {
  opacity: 1;
  visibility: visible;
}
.aa-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: 86vw;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  background: var(--background);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}
.aa-drawer.aa-open {
  transform: translateX(0);
}
.aa-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding: 1rem;
}
.aa-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  flex: 1;
}
.aa-drawer-nav a {
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  font-size: 15px;
  font-weight: 500;
}
.aa-drawer-nav a:hover {
  background: var(--muted);
}
.aa-drawer-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 95%, transparent);
  padding: 1rem;
}
/* Native <details> accordions in the drawer */
.aa-drawer-acc summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  font-size: 15px;
  font-weight: 500;
}
.aa-drawer-acc summary::-webkit-details-marker {
  display: none;
}
.aa-drawer-acc summary:hover {
  background: var(--muted);
}
.aa-drawer-acc summary .aa-chev {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s;
}
.aa-drawer-acc[open] > summary .aa-chev {
  transform: rotate(180deg);
}
.aa-drawer-acc .aa-acc-body {
  display: flex;
  flex-direction: column;
  padding-left: 0.75rem;
  padding-bottom: 0.25rem;
}
.aa-drawer-acc .aa-acc-body a {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.aa-drawer-acc .aa-acc-body a:hover {
  background: var(--muted);
  color: var(--foreground);
}
.aa-drawer-acc .aa-acc-body a.aa-all {
  color: var(--primary);
  font-weight: 600;
}
/* Nested subject accordion (Courses / Past Papers -> subject -> boards) */
.aa-drawer-acc.aa-sub > summary {
  font-size: 0.875rem;
  font-weight: 600;
  padding-block: 0.6rem;
}
.aa-drawer-acc.aa-sub .aa-acc-body a.aa-all {
  font-weight: 500;
}
/* Third drawer level: board to level, indented under its board */
.aa-drawer-acc.aa-sub2 > summary {
  font-size: 0.85rem;
  font-weight: 500;
  padding-block: 0.55rem;
  padding-left: 0.75rem;
  opacity: 0.9;
}
.aa-drawer-acc.aa-sub2 .aa-acc-body {
  padding-left: 1.5rem;
}
.aa-drawer-acc.aa-sub2 .aa-acc-body a {
  font-size: 0.85rem;
}

/* --- Hero ----------------------------------------------------------------- */
.aa-hero {
  position: relative;
  overflow: hidden;
}
.aa-hero-bg {
  position: absolute;
  inset: 0;
}
.aa-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}
@media (min-width: 1024px) {
  .aa-hero-bg img {
    object-position: center;
  }}
.aa-hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}
.aa-hero .aa-container {
  position: relative;
}
.aa-hero-copy {
  max-width: 64rem;
  margin-inline: auto;
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 2rem;
}
@media (min-width: 640px) {
  .aa-hero-copy {
    padding-top: 6rem;
  }}
@media (min-width: 1024px) {
  .aa-hero-copy {
    padding-top: 10rem;
    padding-bottom: 3rem;
  }}
.aa-hero-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
}
.aa-hero h1 {
  margin-top: 0.5rem;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .aa-hero h1 {
    font-size: 3rem;
  }}
@media (min-width: 1280px) {
  .aa-hero h1 {
    font-size: 3.75rem;
  }}
.aa-hero-tag {
  margin-top: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
}
@media (min-width: 640px) {
  .aa-hero-tag {
    font-size: 1.5rem;
  }}
.aa-hero-cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 260px;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .aa-hero-cta {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
  /* Auto-width on desktop (original uses w-full sm:w-auto), so the buttons
     hug their labels instead of stretching. */
  .aa-hero-cta .aa-btn {
    width: auto;
  }}
.aa-hero-meta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}
.aa-hero-meta span.aa-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
}
.aa-hero-meta svg {
  width: 1rem;
  height: 1rem;
  color: var(--gold);
}
.aa-hero-meta .aa-divider {
  height: 1rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
  display: none;
}
@media (min-width: 640px) {
  .aa-hero-meta .aa-divider {
    display: block;
  }}

/* Hero trust strip */
.aa-hero-trust {
  padding-bottom: 2.5rem;
  position: relative;
}
@media (min-width: 1024px) {
  .aa-hero-trust {
    padding-bottom: 5rem;
  }}
.aa-hero-trust-card {
  border-radius: var(--radius-3xl);
  background: rgba(0, 0, 0, 0.5);
  padding: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
}
@media (min-width: 640px) {
  .aa-hero-trust-card {
    padding: 1.25rem 2rem;
  }}
.aa-hero-trust-grid {
  display: grid;
  /* minmax(0, 1fr) not 1fr: a plain 1fr refuses to shrink below the item's
     min-content width (fixed 3.5rem icon + text), which pushed the right
     column outside the card on narrow phones. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}
.aa-hero-trust-grid .aa-trust-item {
  min-width: 0;
}
/* Very narrow phones: shrink the icon column so the text keeps its room. */
@media (max-width: 400px) {
  .aa-hero-trust-grid .aa-trust-item {
    gap: 0.5rem;
  }
  .aa-hero-trust-grid .aa-trust-item .aa-trust-ico {
    width: 2.25rem;
  }}
@media (min-width: 640px) {
  .aa-hero-trust-grid {
    gap: 1.25rem 2rem;
  }}
@media (min-width: 1024px) {
  .aa-hero-trust-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
  }}
.aa-trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.aa-trust-item .aa-trust-ico {
  display: flex;
  width: 3.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
/* The endorsed-author item carries two logos. Side by side on wider screens,
   stacked on phones so neither has to shrink. */
.aa-trust-item .aa-trust-ico.aa-duo {
  gap: 4px;
}
@media (max-width: 640px) {
  .aa-trust-item .aa-trust-ico.aa-duo {
    flex-direction: column;
    gap: 6px;
  }}
.aa-trust-item .aa-trust-ico img {
  height: 1.75rem;
  width: auto;
  object-fit: contain;
}
.aa-trust-item .aa-trust-ico svg {
  width: 1.75rem;
  height: 1.75rem;
}
.aa-trust-item .aa-t-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.aa-trust-item .aa-t-sub {
  font-size: 0.75rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.7);
}
/* On the desktop single-row layout, keep the short titles (e.g. "Rated 4.9")
   on one line, and cap the widest items so they don't squeeze the others,
   mirroring the max-widths on the original hero trust strip. */
@media (min-width: 1024px) {
  .aa-trust-item .aa-t-title {
    white-space: nowrap;
  }
  .aa-trust-item .aa-t-title.aa-t-wide {
    white-space: normal;
    max-width: 7rem;
  }
  .aa-trust-item .aa-t-sub.aa-t-sub-narrow {
    max-width: 6.5rem;
  }}
.aa-stars {
  display: flex;
  gap: 2px;
  margin-top: 0.25rem;
}
.aa-stars svg {
  width: 0.75rem;
  height: 0.75rem;
}
.aa-stars.aa-green svg {
  fill: #00b67a;
  color: #00b67a;
}
.aa-stars.aa-gold svg {
  fill: var(--gold);
  color: var(--gold);
}

/* --- Electric surface (brand blue bands) ---------------------------------- */
.aa-surface-electric {
  position: relative;
  overflow: hidden;
  background-color: #02bafd;
  background-image: linear-gradient(#02bafd, #02bafd);
}
.aa-surface-electric,
.aa-surface-electric .aa-muted {
  color: var(--primary-foreground);
}

/* --- Board strip ---------------------------------------------------------- */
.aa-board-strip {
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}
.aa-board-strip .aa-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-block: 2rem;
}
@media (min-width: 1024px) {
  .aa-board-strip .aa-row {
    flex-direction: row;
    gap: 2.5rem;
  }}
.aa-board-strip .aa-label {
  max-width: 14rem;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.6;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 1024px) {
  .aa-board-strip .aa-label {
    text-align: right;
  }}
.aa-board-strip .aa-vr {
  display: none;
  height: 3rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
}
@media (min-width: 1024px) {
  .aa-board-strip .aa-vr {
    display: block;
  }}
.aa-board-strip .aa-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.5rem;
}
@media (min-width: 640px) {
  .aa-board-strip .aa-logos {
    gap: 1.5rem 3.5rem;
  }}
.aa-board-strip .aa-logos img {
  width: auto;
  object-fit: contain;
}
.aa-board-strip .aa-logos img.aa-cam {
  height: 2.25rem;
}
.aa-board-strip .aa-logos img.aa-edx {
  height: 2rem;
}
.aa-board-strip .aa-logos img.aa-aqa {
  height: 2.75rem;
  filter: brightness(0) invert(1);
}
.aa-two-col {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .aa-two-col {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }}

/* Who we are */
.aa-stat-card {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
}
.aa-stat-card .aa-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--gold));
}
.aa-stat-card .aa-body {
  padding: 1.5rem;
}
.aa-stat-card .aa-num {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}
.aa-stat-card p {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-wrap: pretty;
}
.aa-grid-2 {
  gap: 1rem;
}
@media (min-width: 640px) {
  .aa-grid-2 {
  }}

/* Subjects showcase */
.aa-subjects-row {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.aa-subject-card {
  width: calc(50% - 0.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1rem;
  transition: border-color 0.15s;
}
@media (min-width: 640px) {
  .aa-subject-card {
    width: calc(33.333% - 0.667rem);
  }}
@media (min-width: 1024px) {
  .aa-subject-card {
    width: calc(20% - 0.8rem);
  }}
.aa-subject-card:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
}
.aa-subject-card .aa-tile {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--muted) 50%, transparent);
}
.aa-subject-card .aa-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.75rem;
  transition: transform 0.3s;
}
.aa-subject-card:hover .aa-tile img {
  transform: scale(1.05);
}
.aa-subject-card h3 {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.aa-subject-card .aa-levels {
  margin-top: 0.375rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
}
.aa-subject-card .aa-levels .aa-sep {
  margin-inline: 0.375rem;
  color: var(--border);
}

/* Proof */
.aa-proof-grid {
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .aa-proof-grid {
    gap: 3.5rem;
  }}
.aa-pill-gold {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--gold);
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-foreground);
}
.aa-proof-stat {
  margin-top: 0.75rem;
  font-size: 3.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--primary-foreground);
}
@media (min-width: 640px) {
  .aa-proof-stat {
    font-size: 4.5rem;
  }}
.aa-proof-claim {
  margin-top: 1rem;
  max-width: 28rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary-foreground);
  text-wrap: balance;
}
.aa-proof-detail {
  margin-top: 1rem;
  max-width: 28rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
}
.aa-trustpilot-badge {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 0.625rem 1rem;
  color: #191919;
  font-size: 0.875rem;
}
/* Phones: let the badge break so the rating and name drop under the stars
   instead of forcing the pill wider than its container. */
@media (max-width: 400px) {
  .aa-trustpilot-badge {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 0.4rem;
  }
  .aa-trustpilot-badge .aa-tp-stars {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .aa-trustpilot-badge > span:not(.aa-tp-stars) {
    white-space: nowrap;
  }}
/* Phones: the lead-gen buttons are nowrap, which sets a min width the card
   cannot shrink below. Let the labels wrap and give the card less padding. */
@media (max-width: 480px) {
  .aa-leadgen {
    padding: 1.5rem 1.25rem;
  }
  .aa-leadgen-btns {
    min-width: 0;
  }
  .aa-leadgen-btns .aa-btn {
    white-space: normal;
    height: auto;
    min-height: 2.75rem;
    padding-block: 0.6rem;
    padding-inline: 1rem;
    line-height: 1.3;
    text-align: center;
  }}
.aa-trustpilot-badge .aa-tp-stars {
  display: flex;
  gap: 2px;
}
.aa-trustpilot-badge .aa-tp-stars span {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  background: #00b67a;
}
.aa-trustpilot-badge .aa-tp-stars svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: #fff;
  color: #fff;
}
.aa-trustpilot-badge b {
  font-weight: 700;
}
.aa-trustpilot-badge .aa-tp-name {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
}
.aa-trustpilot-badge .aa-tp-name svg {
  width: 1rem;
  height: 1rem;
  fill: #00b67a;
  color: #00b67a;
}
.aa-proof-reviews {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .aa-proof-reviews {
    grid-template-columns: 1fr 1fr;
  }}
.aa-proof-review {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2xl);
  background: var(--gold);
  padding: 1.5rem;
  color: var(--gold-foreground);
}
.aa-proof-review .aa-stars svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.aa-proof-review p {
  margin-top: 1rem;
  flex: 1;
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--gold-foreground) 90%, transparent);
}
.aa-proof-review .aa-who {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
}
.aa-proof-review .aa-role {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: color-mix(in oklab, var(--gold-foreground) 75%, transparent);
}

/* Team carousel (homepage teaser) */
.aa-avatar-row {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.aa-avatar-stack {
  display: flex;
}
.aa-avatar-stack img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--background);
  margin-left: -0.75rem;
}
.aa-avatar-stack img:first-child {
  margin-left: 0;
}
@media (min-width: 640px) {
  .aa-avatar-stack img {
    width: 4rem;
    height: 4rem;
  }}

/* Reviews marquee */
.aa-reviews-track {
  position: relative;
  margin-top: 3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.aa-reviews-track .aa-marquee {
  gap: 1rem;
  align-items: stretch;
  animation-duration: 28s;
}
.aa-reviews-track:hover .aa-marquee {
  animation-play-state: paused;
}
.aa-review-card {
  display: flex;
  width: 340px;
  flex-shrink: 0;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.25rem;
  /* Reset the marquee track's nowrap so quote text wraps inside the card */
  white-space: normal;
}
.aa-review-card .aa-tp-stars {
  display: flex;
  gap: 2px;
}
.aa-review-card .aa-tp-stars span {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  background: #00b67a;
}
.aa-review-card .aa-tp-stars svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: #fff;
  color: #fff;
}
.aa-review-card .aa-r-title {
  font-size: 0.875rem;
  font-weight: 700;
}
.aa-review-card .aa-r-quote {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.aa-review-card figcaption {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.aa-review-card figcaption b {
  color: var(--foreground);
}
.aa-review-card figcaption .aa-bar {
  color: var(--border);
}

/* Resource grid section */
.aa-books-hero {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .aa-books-hero {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }}
.aa-books-copy {
  order: 2;
}
.aa-books-covers {
  order: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 1024px) {
  .aa-books-copy {
    order: 1;
  }
  .aa-books-covers {
    order: 2;
  }}
.aa-pill-star {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  background: var(--gold);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--primary-foreground);
}
.aa-pill-star svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}
.aa-books-copy h2 {
  margin-top: 1.5rem;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .aa-books-copy h2 {
    font-size: 3rem;
  }}
.aa-books-copy .aa-lead {
  margin-top: 1.25rem;
  max-width: 28rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.aa-endorsed {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.aa-endorsed .aa-lab {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}
.aa-endorsed b {
  font-size: 0.875rem;
  font-weight: 700;
}
/* The three covers sit in a bottom-aligned row and fan out; the global
   `img { display:block }` reset would otherwise stack them vertically. */
.aa-covers {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.aa-covers img {
  height: 10rem;
  width: auto;
  border-radius: 0.375rem;
  object-fit: contain;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s;
}
@media (min-width: 640px) {
  .aa-covers img {
    height: 14rem;
  }}
@media (min-width: 1024px) {
  .aa-covers img {
    height: 16rem;
  }}
/* overlap only. The covers used to fan out at plus and minus 3 degrees, but
   these are the real endorsed textbooks and a tilted cover reads as a
   rendering fault rather than a flourish, so they now sit square and simply
   overlap. (larger overlap on mobile, tighter on desktop, like the
   original translate-x-6 sm:translate-x-2). */
.aa-covers img.aa-c1 {
  transform: translateX(1.5rem);
  z-index: 0;
}
.aa-covers img.aa-c2 {
  z-index: 10;
}
.aa-covers img.aa-c3 {
  transform: translateX(-1.5rem);
  z-index: 0;
}
@media (min-width: 640px) {
  .aa-covers img.aa-c1 {
    transform: translateX(0.5rem);
  }
  .aa-covers img.aa-c3 {
    transform: translateX(-0.5rem);
  }}
.aa-covers img.aa-c1:hover {
  transform: translateX(0.5rem) translateY(-8px);
}
.aa-covers img.aa-c2:hover {
  transform: translateY(-8px);
}
.aa-covers img.aa-c3:hover {
  transform: translateX(-0.5rem) translateY(-8px);
}
/* Single cover (e.g. the Cambridge page) shows larger */
.aa-covers img:only-child {
  height: 18rem;
}
@media (min-width: 640px) {
  .aa-covers img:only-child { height: 24rem; }}
@media (min-width: 1024px) {
  .aa-covers img:only-child { height: 27rem; }}

/* Icon chips used in resource/pastpaper cards */
.aa-icon-chip {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 15%, transparent);
}
.aa-icon-chip svg {
  width: 1.25rem;
  height: 1.25rem;
}
.aa-link-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
  transition: border-color 0.15s;
}
.aa-link-card:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
}
.aa-link-card h2,
.aa-link-card h3 {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.aa-link-card p {
  margin-top: 0.375rem;
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.aa-link-card .aa-go {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.15s;
}
.aa-link-card:hover .aa-go {
  opacity: 1;
}
.aa-cards-3 {
  gap: 1rem;
}
@media (min-width: 640px) {
  .aa-cards-3 {
  }}
@media (min-width: 1024px) {
  .aa-cards-3 {
  }}

/* --- Final CTA ------------------------------------------------------------ */
.aa-final-cta {
  padding-block: 4rem;
  text-align: center;
}
@media (min-width: 640px) {
  .aa-final-cta {
    padding-block: 6rem;
  }}
.aa-final-cta h2 {
  margin-inline: auto;
  margin-top: 0.75rem;
  max-width: 42rem;
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary-foreground);
  text-wrap: balance;
}
@media (min-width: 640px) {
  .aa-final-cta h2 {
    font-size: 2.25rem;
  }}
@media (min-width: 1024px) {
  .aa-final-cta h2 {
    font-size: 3rem;
  }}
.aa-final-cta p {
  margin-inline: auto;
  margin-top: 1.25rem;
  max-width: 36rem;
  font-size: 1.125rem;
  color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
}
.aa-final-cta .aa-cta-sub {
  margin-top: 0.85rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-foreground);
}
/* Band with a photo behind it: a black wash over the image, with the copy
   switched to white so it stays readable. */
.aa-final-cta.aa-has-bg {
  position: relative;
  overflow: hidden;
}
.aa-final-cta.aa-has-bg .aa-cta-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.aa-final-cta.aa-has-bg .aa-cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 3:2 photo in a 2.25:1 band: a centred crop cuts the heads at both
   edges, so anchor the crop above centre. */
.aa-final-cta.aa-has-bg .aa-cta-photo img[src*="papers-desk"] {
  object-position: center 35%;
}
.aa-final-cta.aa-has-bg .aa-cta-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.aa-final-cta.aa-has-bg .aa-container {
  position: relative;
  z-index: 1;
}
.aa-final-cta.aa-has-bg h2,
.aa-final-cta.aa-has-bg .aa-cta-sub {
  color: #fff;
}
.aa-final-cta.aa-has-bg p {
  color: rgba(255, 255, 255, 0.85);
}
/* Past papers band: let the description spread wider (fewer lines) */
#past-papers p {
  max-width: 54rem;
}
.aa-final-cta .aa-cta-row {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .aa-final-cta .aa-cta-row {
    flex-direction: row;
    justify-content: center;
  }}

/* --- Page hero (inner pages) --------------------------------------------- */
.aa-page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.aa-page-hero .aa-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    60% 90% at 50% -20%,
    color-mix(in oklab, var(--primary) 14%, transparent),
    transparent 70%
  );
}
.aa-page-hero .aa-container {
  position: relative;
  text-align: center;
  padding-block: 4rem;
}
@media (min-width: 640px) {
  .aa-page-hero .aa-container {
    padding-block: 5rem;
  }}
.aa-page-hero h1 {
  margin-inline: auto;
  margin-top: 0.75rem;
  max-width: 48rem;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .aa-page-hero h1 {
    font-size: 3rem;
  }}
.aa-page-hero .aa-lead {
  margin-inline: auto;
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 1.125rem;
  color: var(--muted-foreground);
  text-wrap: pretty;
}
.aa-page-hero .aa-hero-extra {
  margin-top: 2rem;
}

/* --- Footer --------------------------------------------------------------- */
.aa-site-footer {
  border-top: 1px solid var(--border);
  background: var(--background);
}
.aa-site-footer .aa-container {
  padding-block: 3.5rem;
}
.aa-footer-grid {
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .aa-footer-grid {
  }}
@media (min-width: 1024px) {
  .aa-footer-grid {
  }}
.aa-footer-brand {
  grid-column: span 2;
}
.aa-footer-brand p {
  margin-top: 1rem;
  max-width: 20rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.aa-socials {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.5rem;
}
.aa-socials a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  transition: color 0.15s, border-color 0.15s;
}
.aa-socials a:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.aa-socials svg {
  width: 1rem;
  height: 1rem;
}
.aa-app-badges {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.aa-app-badges a {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  transition: border-color 0.15s;
}
.aa-app-badges a:hover {
  border-color: color-mix(in oklab, var(--foreground) 30%, transparent);
}
.aa-footer-col h3 {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.aa-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.aa-footer-col a {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: color 0.15s;
}
.aa-footer-col a:hover {
  color: var(--foreground);
}
.aa-footer-bottom {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
@media (min-width: 640px) {
  .aa-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }}
.aa-footer-bottom .aa-legal {
  display: flex;
  gap: 1.25rem;
}
.aa-footer-bottom .aa-legal a:hover {
  color: var(--foreground);
}
.aa-mt-7 { margin-top: 1.75rem; }
.aa-mt-8 { margin-top: 2rem; }
.aa-mt-10 { margin-top: 2.5rem; }
.aa-cta-inline {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* Reveal-on-scroll. Content is visible by default; the hidden start state
   only applies once the inline head script confirms JS by adding the `js`
   class, so content is never permanently hidden if scripts fail to load. */
html.js .aa-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js .aa-reveal.aa-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .aa-marquee {
    animation: none;
  }
  html.js .aa-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }}

/* ==========================================================================
   Inner-page components
   ========================================================================== */

/* --- Section on dark photo (Why Us / Contact hero) ----------------------- */
.aa-photo-section {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.aa-photo-section .aa-photo-bg {
  position: absolute;
  inset: 0;
}
.aa-photo-section .aa-photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aa-photo-section .aa-photo-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}
.aa-photo-section .aa-container {
  position: relative;
}
/* no row-gap: each column carries its own padding-block, and the two together
   put 96px between one paragraph and the next heading on a phone */
.aa-why-us-grid { margin-top: 3.5rem; display: flex; flex-wrap: wrap; }
.aa-why-us-grid > [class*="col-"] { float: none; }

.aa-why-us-col {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-block: 1.5rem;
}
.aa-why-us-grid > [class*="col-"]:first-child .aa-why-us-col {
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 768px) {
  .aa-why-us-col {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0 2rem;
  }
  .aa-why-us-grid > [class*="col-"]:first-child .aa-why-us-col {
    border-left: 0;
    padding-left: 0;
  }
  .aa-why-us-grid > [class*="col-"]:last-child .aa-why-us-col {
    padding-right: 0;
  }}
.aa-why-us-col h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.aa-why-us-col p {
  margin-top: 0.75rem;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}
.aa-section-head.aa-on-dark .aa-section-title,
.aa-section-head.aa-on-dark h2 {
  color: #fff;
}
.aa-section-head.aa-on-dark .aa-section-lead {
  color: rgba(255, 255, 255, 0.85);
}

/* --- System loop (5 steps) ----------------------------------------------- */
.aa-loop-desktop {
  position: relative;
  margin-top: 4rem;
  display: none;
}
@media (min-width: 1024px) {
  .aa-loop-desktop {
    display: block;
  }}
.aa-loop-desktop .aa-line {
  position: absolute;
  left: 10%;
  right: 10%;
  /* half the node, so the connector runs through the middle of the artwork */
  top: 3rem;
  border-top: 2px dashed color-mix(in oklab, var(--primary) 30%, transparent);
}
.aa-loop-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.aa-loop-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.aa-loop-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  /* 6rem, not the 5rem the badge version used. Balancing the five took up to
     17 percent off the largest of them, and the glow artwork carries less
     solid colour than the filled circles did, so at the old size the band had
     gone quiet. Everything pinned to half the node moves with it. */
  width: 6rem;
  height: 6rem;
  border-radius: 999px;
  /* no ring: these are full colour illustrations with their own shapes, and a
     brand ring around each reads as a badge on a badge. The disc of page
     colour stays, because the dashed connector would otherwise run straight
     through the artwork, which the old opaque circle was hiding. */
  background: var(--background);
}
.aa-loop-node img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.aa-loop-step h3 {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.aa-loop-step p {
  margin-top: 0.5rem;
  max-width: 13rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.aa-loop-mobile {
  position: relative;
  margin-top: 3rem;
}
@media (min-width: 1024px) {
  .aa-loop-mobile {
    display: none;
  }}
.aa-loop-mobile .aa-line {
  position: absolute;
  top: 3rem;
  bottom: 3rem;
  left: 3rem;
  border-left: 2px dashed color-mix(in oklab, var(--primary) 30%, transparent);
}
.aa-loop-mobile .aa-step {
  position: relative;
  display: flex;
  gap: 1.25rem;
}
/* the node is a flex item here, so without this it shrank from 80px to 58 at
   375 and the connector, which is pinned to the 80px centre line, missed it */
.aa-loop-mobile .aa-loop-node {
  flex: none;
  margin-bottom: 2rem;
}
.aa-loop-mobile .aa-step:last-child {
  margin-bottom: 0;
}
/* the heading sat 8px above the node's middle and should stay there, so this
   takes half of the node's extra height */
.aa-loop-mobile .aa-step .aa-txt {
  padding-top: 1.85rem;
}
.aa-loop-mobile .aa-step h3 {
  font-size: 1.125rem;
  font-weight: 700;
}
.aa-loop-mobile .aa-step p {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* --- Values manifesto ---------------------------------------------------- */
.aa-values-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .aa-values-grid {
    grid-template-columns: 4fr 6fr;
    gap: 4rem;
  }}
.aa-values-intro {
  align-self: start;
}
@media (min-width: 1024px) {
  .aa-values-intro {
    position: sticky;
    top: 7rem;
  }}
.aa-values-intro .aa-kick {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
}
.aa-values-intro h2 {
  margin-top: 1rem;
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .aa-values-intro h2 {
    font-size: 2.75rem;
  }}
.aa-values-intro .aa-lead {
  margin-top: 1.25rem;
  max-width: 28rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.aa-values-quote {
  margin-top: 2rem;
  border-left: 2px solid color-mix(in oklab, var(--gold) 60%, transparent);
  padding-left: 1rem;
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
}
.aa-values-quote span {
  margin-top: 0.375rem;
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  font-style: normal;
  color: var(--muted-foreground);
}
.aa-values-list li {
  display: flex;
  gap: 1.25rem;
  border-top: 1px solid var(--border);
  padding-block: 1.5rem;
}
.aa-values-list li:first-child {
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 640px) {
  .aa-values-list li {
    gap: 1.75rem;
  }}
.aa-values-list .aa-n {
  font-size: 1.5rem;
  font-weight: 700;
  /* Poppins has no tabular figures, so the request above does nothing and the
     numbers measure anywhere from 1.03em to 1.33em wide. A fixed em width is
     what actually keeps the digits and the text column beside them flush. */
  font-variant-numeric: tabular-nums;
  flex: none;
  width: 1.4em;
  color: color-mix(in oklab, var(--primary) 40%, transparent);
}
@media (min-width: 640px) {
  .aa-values-list .aa-n {
    font-size: 1.875rem;
  }}
.aa-values-list h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
@media (min-width: 640px) {
  .aa-values-list h3 {
    font-size: 1.25rem;
  }}
.aa-values-list p {
  margin-top: 0.375rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* --- Why Akbar comparison ------------------------------------------------ */
/* grid items are min-width:auto by default, which let the table sit at
   its 451px min-content width inside a 320px column and pushed 96px of
   horizontal scroll onto the page */
.aa-whyakbar-grid > * { min-width: 0; }
@media (min-width: 992px) {
  .aa-whyakbar-grid { display: flex; flex-wrap: wrap; align-items: center; }
  .aa-whyakbar-grid > [class*="col-"] { float: none; }
}
@media (max-width: 991px) {
  .aa-whyakbar-grid > [class*="col-"] + [class*="col-"] { margin-top: 2.5rem; }
}

.aa-premium-badge {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1rem 1.25rem;
}
.aa-premium-badge .aa-ic {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--gold) 12%, transparent);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 15%, transparent);
}
.aa-premium-badge .aa-ic svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--gold);
}
.aa-premium-badge .aa-t1 {
  font-size: 1rem;
  font-weight: 700;
}
.aa-premium-badge .aa-t2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}
.aa-compare {
  overflow: hidden;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
}
.aa-compare-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
}
.aa-compare-head .aa-us {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-foreground);
}
.aa-compare-head .aa-them {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.aa-compare-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  border-top: 1px solid var(--border);
}
.aa-compare-row .aa-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.aa-compare-row .aa-label svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--primary);
}
.aa-compare-row .aa-cell-us {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: color-mix(in oklab, var(--primary) 5%, transparent);
  padding: 1.1rem;
  font-size: 0.875rem;
  font-weight: 700;
}
.aa-compare-row .aa-cell-them {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.1rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.aa-compare .aa-tick,
.aa-compare .aa-cross {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 999px;
}
.aa-compare .aa-tick {
  background: var(--primary);
  color: #fff;
}
.aa-compare .aa-cross {
  background: var(--muted);
  color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
}
.aa-compare .aa-tick svg,
.aa-compare .aa-cross svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* --- Team grid ----------------------------------------------------------- */
.aa-team-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
  text-align: center;
}
.aa-team-card .aa-subject {
  margin-inline: auto;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--gold) 12%, transparent);
  padding: 0.25rem 0.875rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.aa-team-card img {
  margin-inline: auto;
  margin-top: 1.25rem;
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 20%, transparent);
}
.aa-team-card h3 {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.aa-team-card hr {
  margin-block: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}
.aa-team-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}
.aa-team-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.aa-team-card li svg {
  margin-top: 2px;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--gold);
}
.aa-team-card li span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* --- Learning modes ------------------------------------------------------ */
.aa-modes {
  margin-top: 3rem;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .aa-modes {
  }}
.aa-mode-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
}
.aa-mode-media {
  position: relative;
  aspect-ratio: 16 / 10;
}
.aa-mode-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aa-mode-media .aa-tag {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #191919;
}
.aa-mode-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}
.aa-mode-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.aa-mode-body p {
  margin-top: 0.625rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* --- Week to week -------------------------------------------------------- */
.aa-wtw-grid {
  margin-top: 3rem;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .aa-wtw-grid {
  }}
@media (min-width: 1024px) {
  .aa-wtw-grid {
  }}
.aa-wtw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: #fff;
  padding: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  color: #04222e;
}
.aa-wtw-card .aa-accent {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--gold);
}
.aa-wtw-card.aa-monthly .aa-accent {
  background: #04222e;
}
.aa-wtw-card .aa-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aa-wtw-card .aa-ic {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-xl);
  background: rgba(2, 186, 253, 0.12);
  color: #04222e;
  box-shadow: inset 0 0 0 1px rgba(2, 186, 253, 0.25);
}
.aa-wtw-card .aa-ic svg {
  width: 1.25rem;
  height: 1.25rem;
}
.aa-wtw-card .aa-cadence {
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--gold);
  color: var(--gold-foreground);
}
.aa-wtw-card.aa-monthly .aa-cadence {
  background: #04222e;
  color: #fff;
}
.aa-wtw-card h3 {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #04222e;
}
.aa-wtw-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(4, 34, 46, 0.7);
}

/* --- Pricing (course types, fees, included) ------------------------------ */
.aa-eval-panel {
  margin-top: 2.5rem;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--primary) 10%, var(--card)),
    var(--card)
  );
  padding: 2rem;
}
@media (min-width: 640px) {
  .aa-eval-panel {
    padding: 2.5rem;
  }}
.aa-eval-grid {
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .aa-eval-grid {
    gap: 3rem;
  }}
.aa-eval-grid .aa-pitch {
  max-width: 36rem;
}
.aa-chip-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--primary);
}
.aa-chip-blue svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: var(--primary);
}
.aa-eval-grid h3 {
  margin-top: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
@media (min-width: 640px) {
  .aa-eval-grid h3 {
    font-size: 1.875rem;
  }}
.aa-eval-grid .aa-pitch p {
  margin-top: 0.75rem;
  color: var(--muted-foreground);
}
.aa-price-gold {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background: linear-gradient(135deg, #ffd24a, #f5a300);
  padding: 2rem 2.5rem;
  text-align: center;
  color: var(--gold-foreground);
  box-shadow: 0 20px 40px -12px rgba(249, 182, 2, 0.3);
}
.aa-price-gold .aa-sheen {
  position: absolute;
  inset-inline: 0;
  top: -0.75rem;
  height: 5rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
  pointer-events: none;
}
.aa-price-gold .aa-amount {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.aa-price-gold .aa-cur {
  font-size: 1.125rem;
  font-weight: 700;
}
.aa-price-gold .aa-val {
  font-size: 3.75rem;
  font-weight: 800;
  line-height: 1;
}
.aa-price-gold .aa-rule {
  position: relative;
  margin: 1rem auto 0;
  height: 1px;
  width: 2.5rem;
  background: rgba(0, 0, 0, 0.25);
}
.aa-price-gold .aa-sub {
  position: relative;
  margin-top: 0.75rem;
  font-size: 13px;
  font-weight: 600;
}

.aa-course-types {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .aa-course-types {
    grid-template-columns: 1fr 1fr;
  }}
.aa-course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
}
@media (min-width: 640px) {
  .aa-course-card {
    padding: 1.75rem;
  }}
.aa-course-card.aa-featured {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 15%, transparent);
}
.aa-course-card .aa-badge {
  position: absolute;
  top: -0.75rem;
  left: 1.5rem;
  border-radius: 999px;
  background: var(--gold);
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-foreground);
}
.aa-course-card .aa-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.aa-course-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
}
.aa-course-card .aa-tag {
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 40%, transparent);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.aa-course-card .aa-freq {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.aa-course-card .aa-freq .aa-n {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
}
.aa-course-card .aa-freq .aa-sub {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.aa-course-card .aa-freq .aa-val {
  font-size: 0.875rem;
  font-weight: 700;
}
.aa-course-card > p {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.aa-course-card .aa-who {
  margin-top: 1.25rem;
  display: inline-flex;
  width: fit-content;
  align-items: flex-start;
  gap: 0.375rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}
.aa-course-card .aa-who svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* Fees table */
.aa-fees {
  margin-top: 4rem;
}
.aa-fees h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
@media (min-width: 640px) {
  .aa-fees h3 {
    font-size: 1.875rem;
  }}
.aa-fees .aa-intro {
  margin-top: 0.75rem;
  max-width: 42rem;
  color: var(--muted-foreground);
}
.aa-toggles {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.aa-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.aa-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.25rem;
}
.aa-toggle button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: background 0.15s, color 0.15s;
}
.aa-toggle button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
}
.aa-fees .aa-note {
  margin-top: 1.25rem;
  max-width: 48rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.aa-fees .aa-note .aa-save {
  font-weight: 600;
  color: #10b981;
}
.aa-fees-1w {
  margin-top: 1.25rem;
  border-radius: var(--radius-2xl);
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  background: color-mix(in oklab, var(--gold) 6%, transparent);
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
}
.aa-fees-1w b {
  color: var(--gold);
}
.aa-fees-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
}
.aa-fees-table {
  min-width: 680px;
}
.aa-fees-table .aa-row {
  display: grid;
}
.aa-fees-table .aa-row.aa-head {
  background: var(--background);
}
.aa-fees-table .aa-row + .aa-row {
  border-top: 1px solid var(--border);
}
.aa-fees-table .aa-cell {
  padding: 1rem;
}
.aa-fees-table .aa-h-name {
  font-size: 0.875rem;
  font-weight: 700;
}
.aa-fees-table .aa-h-sub {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.aa-fees-table .aa-h-off {
  font-size: 0.75rem;
  font-weight: 600;
  color: #10b981;
}
.aa-fees-table .aa-h-free {
  font-size: 11px;
  color: var(--muted-foreground);
}
.aa-fees-table .aa-s-name {
  font-size: 0.875rem;
  font-weight: 700;
}
.aa-fees-table .aa-s-rate {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.aa-fees-table .aa-s-up {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.aa-fees-table .aa-p-val {
  font-size: 0.875rem;
  font-weight: 700;
}
.aa-fees-table .aa-p-per {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.aa-fees-foot {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .aa-fees-foot {
    grid-template-columns: 1fr 1fr;
  }}
.aa-fees-foot .aa-box {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.aa-fees-foot .aa-box b {
  color: var(--foreground);
}

.aa-included {
  margin-top: 4rem;
}
.aa-included-grid {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .aa-included-grid {
    grid-template-columns: 1fr 1fr;
  }}
.aa-included-card {
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
}
@media (min-width: 640px) {
  .aa-included-card {
    padding: 2rem;
  }}
.aa-included-card.aa-elite {
  position: relative;
  border-color: color-mix(in oklab, var(--gold) 40%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 15%, transparent);
}
.aa-included-card h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
}
.aa-included-card.aa-elite h4 {
  color: var(--gold);
}
.aa-included-card .aa-tag-elite {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  border-radius: 999px;
  background: var(--gold);
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-foreground);
}
.aa-included-card ul {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.aa-included-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
}
.aa-included-card li .aa-tick {
  margin-top: 2px;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
}
.aa-included-card.aa-elite li .aa-tick {
  background: var(--gold);
  color: var(--gold-foreground);
}
.aa-included-card li .aa-tick svg {
  width: 0.75rem;
  height: 0.75rem;
}
.aa-included-card li span.aa-strong {
  font-weight: 700;
  color: var(--foreground);
}
.aa-unsure {
  margin-top: 3rem;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--primary) 10%, var(--card)),
    var(--card)
  );
  padding: 2rem;
  text-align: center;
}
@media (min-width: 640px) {
  .aa-unsure {
    padding: 2.5rem;
  }}
.aa-unsure h3 {
  margin-inline: auto;
  max-width: 42rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .aa-unsure h3 {
    font-size: 1.875rem;
  }}
.aa-unsure > p {
  margin-inline: auto;
  margin-top: 0.75rem;
  max-width: 42rem;
  color: var(--muted-foreground);
}
.aa-unsure .aa-callout {
  margin-inline: auto;
  margin-top: 1.5rem;
  max-width: 42rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.1rem 1.35rem;
  /* 0.875rem in the muted grey was the quietest thing on the panel */
  font-size: 0.92rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--foreground) 45%, var(--muted-foreground));
}
/* on the artwork a pure black panel reads as a hole punched in it rather than
   a card sitting on it. A translucent wash lifts it instead. */
html.aa-dark .aa-unsure .aa-callout {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
}
html.aa-dark .aa-unsure .aa-callout b { color: #fff; }
.aa-unsure .aa-callout b {
  color: var(--foreground);
}
.aa-unsure .aa-cta-row {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.aa-contact-card {
  margin-inline: auto;
  margin-top: 2.5rem;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}
@media (min-width: 640px) {
  .aa-contact-card {
    padding: 2rem;
  }}
@media (min-width: 1024px) {
  .aa-contact-card {
    padding: 2.5rem;
  }}
.aa-contact-grid {
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .aa-contact-grid {
    gap: 3.5rem;
  }}
.aa-contact-info h2 {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .aa-contact-info h2 {
    font-size: 2.25rem;
  }}
.aa-contact-info > p {
  margin-top: 1rem;
  color: var(--muted-foreground);
}
.aa-contact-methods {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.aa-contact-method {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.aa-contact-method svg {
  margin-top: 2px;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--primary);
}
.aa-contact-method .aa-lab {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-foreground);
}
.aa-contact-method .aa-val {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}
.aa-contact-method:hover .aa-val {
  color: var(--primary);
}
.aa-contact-follow {
  margin-top: 2rem;
}
.aa-contact-follow .aa-lab {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-foreground);
}
.aa-contact-follow .aa-row {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.aa-contact-follow a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.aa-contact-follow a:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  background: var(--primary);
  color: #fff;
}
.aa-contact-follow svg {
  width: 1rem;
  height: 1rem;
}
.aa-contact-form-wrap {
  padding-top: 0;
}
@media (min-width: 1024px) {
  .aa-contact-form-wrap {
    border-left: 1px solid var(--border);
    padding-left: 3.5rem;
  }}
.aa-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.aa-form label {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}
.aa-form label .aa-opt {
  font-weight: 400;
  color: var(--muted-foreground);
}
.aa-role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.aa-role-btn {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.aa-role-btn[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}
.aa-field-2 {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .aa-field-2 {
    grid-template-columns: 1fr 1fr;
  }}
.aa-field {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  padding: 0.5rem 2px;
  font-size: 15px;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.15s;
}
.aa-field::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
}
.aa-field:focus {
  border-color: var(--primary);
}
textarea.aa-field {
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.75rem 0.875rem;
  resize: vertical;
}

.aa-offices {
  margin-top: 1.5rem;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .aa-offices {
  }}
.aa-office-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
}
.aa-office-card iframe {
  height: 13rem;
  width: 100%;
  border: 0;
}
.aa-office-card .aa-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
}
.aa-office-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
}
.aa-office-card address {
  margin-top: 0.75rem;
  flex: 1;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.aa-office-card .aa-links {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.aa-office-card .aa-links a {
  font-size: 0.875rem;
  font-weight: 600;
}
.aa-office-card .aa-links a.aa-dir {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--primary);
}
.aa-office-card .aa-links a.aa-dir svg {
  width: 1rem;
  height: 1rem;
}

.aa-contact-reviews {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
  margin-inline: auto;
  max-width: 36rem;
}
@media (min-width: 1024px) {
  .aa-contact-reviews {
    max-width: none;
    grid-template-columns: repeat(3, 1fr);
  }}
.aa-cr-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.aa-cr-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.15);
}
.aa-cr-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.aa-cr-avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--primary);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-foreground);
}
.aa-cr-name {
  font-size: 0.875rem;
  font-weight: 700;
}
.aa-cr-loc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.aa-cr-card .aa-tp-stars {
  margin-top: 1rem;
  display: flex;
  gap: 2px;
}
.aa-cr-card .aa-tp-stars span {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  background: #00b67a;
}
.aa-cr-card .aa-tp-stars svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: #fff;
  color: #fff;
}
.aa-cr-card blockquote {
  margin-top: 0.75rem;
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

/* --- Prose (legal pages) ------------------------------------------------- */
.aa-prose {
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}
.aa-prose h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
}
.aa-prose a {
  font-weight: 600;
  color: var(--primary);
}

/* --- FAQ accordion (native <details>) ------------------------------------ */
.aa-faq-list {
  display: flex;
  flex-direction: column;
}
.aa-faq-item {
  border-bottom: 1px solid var(--border);
}
.aa-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.aa-faq-item summary::-webkit-details-marker {
  display: none;
}
.aa-faq-item summary .aa-chev {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--muted-foreground);
  transition: transform 0.2s;
}
.aa-faq-item[open] summary .aa-chev {
  transform: rotate(180deg);
}
.aa-faq-a {
  padding-bottom: 1.25rem;
}
.aa-faq-a p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* ==========================================================================
   Homepage lead-generation + broader-offering additions
   ========================================================================== */

/* --- Floating WhatsApp button (all pages) -------------------------------- */
.aa-wa-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.aa-wa-float:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.45);
}
.aa-wa-float svg {
  width: 1.9rem;
  height: 1.9rem;
}

/* --- Lead-gen band ------------------------------------------------------- */
.aa-leadgen {
  gap: 2rem;
  align-items: center;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--primary) 10%, var(--card)),
    var(--card)
  );
  padding: 2rem;
}
@media (min-width: 900px) {
  .aa-leadgen {
    gap: 3rem;
    padding: 2.5rem;
  }}
.aa-leadgen h2 {
  margin-top: 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .aa-leadgen h2 {
    font-size: 1.875rem;
  }}
/* The card now wraps a Bootstrap row, so this paragraph sits one level
   deeper than the original ".leadgen > div > p" assumed, and it lost its
   top margin: the heading and the copy were flush against each other. */
.aa-leadgen > div > p,
.aa-leadgen > .row > [class*="col-"] > p {
  margin-top: 0.75rem;
  max-width: 34rem;
  color: var(--muted-foreground);
}
/* .aa-leadgen sets align-items: center but is never a flex container, so its
   Bootstrap columns float and the buttons sit level with the eyebrow. This
   variant makes the row one flex line so the button stack centres against the
   copy beside it. Used on the resources page only; the homepage keeps the
   original top alignment. */
@media (min-width: 992px) {
  .aa-leadgen-mid > .row { display: flex; flex-wrap: wrap; align-items: center; }
  .aa-leadgen-mid > .row > [class*="col-"] { float: none; }
}
.aa-leadgen-btns {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.aa-leadgen-btns .aa-btn {
  width: 100%;
  justify-content: center;
}
@media (min-width: 900px) {
  .aa-leadgen-btns {
    min-width: 20rem;
  }}

/* Student-centric photo band. NOTE: assets/why-us-bg.jpg is a PLACEHOLDER —
   swap the <img src> when the client supplies final imagery. */
.aa-student-band .aa-section-head {
  max-width: 44rem;
}

/* --- Product feature sections (full-bleed cinematic band, danmartell style) */
.aa-feature {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 30rem;
  background-color: #000;
  /* The image is set inline per section via background-image. On small screens,
     a section may add class "has-mbg" + inline --feat-mbg to swap in a
     subject-filled crop (see the has-mbg rule in the mobile block below). */
  /* The image is a FIXED background, so it stays pinned to the viewport while
     the section scrolls over it (the "image stays, content moves" effect). */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (min-width: 768px) {
  .aa-feature {
    min-height: 40rem;
  }}
/* Anchor a wide image to the top on desktop so the subject's head isn't
   cropped off by the tall band's cover crop. */
@media (min-width: 1025px) {
  .aa-feature.aa-feat-top {
    background-position: center top;
  }
  .aa-feature.aa-feat-bottom {
    background-position: center bottom;
  }
  /* Subject sits mid-frame: anchor by percentage so the head stays in shot on
     both wide/short and narrow/tall windows. Desktop only, because on mobile
     the band stacks and must stay pinned to the top. */
  .aa-feature.aa-mbg-virtual {
    background-position: center 38%;
  }}
/* On mobile the fixed-cover background crops the image and the text overlaps
   it. Instead, stack cleanly: show the FULL image at the top (never cropped),
   then the copy below on a black band. --feat-pt reserves the exact image
   height (= its aspect ratio) per section so there's no crop and no gap. */
@media (max-width: 1024px) {
  .aa-feature {
    display: block;
    min-height: 0;
    background-color: #000;
    background-attachment: scroll;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: var(--feat-mpt, var(--feat-pt, 66.7%));
  }
  /* Swap in a subject-filled mobile crop. !important beats the inline
     background-image only within this small-screen media query. One rule per
     section; paths are relative to THIS stylesheet (css/), hence ../assets/. */
  .aa-feature.aa-mbg-books {
    background-image: url("../assets/books-bg-m.png?v=2") !important;
  }
  .aa-feature.aa-mbg-live {
    background-image: url("../assets/feature-live-m.png?v=1") !important;
  }
  .aa-feature.aa-mbg-exams {
    background-image: url("../assets/feature-exams-m.png?v=2") !important;
  }
  .aa-feature.aa-mbg-virtual {
    background-image: url("../assets/feature-virtual-m.png?v=5") !important;
  }
  .aa-feature.aa-mbg-quiz {
    background-image: url("../assets/quiz-ai-m.png?v=3") !important;
  }
  .aa-feature .aa-feature-overlay {
    display: none;
  }
  .aa-feature .aa-container {
    padding-block: 1.75rem 2.75rem;
  }
  .aa-feature-copy {
    max-width: none;
    margin: 0;
  }}
/* Dark gradient so the copy side reads as near-black, image shows on the other */
.aa-feature-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.5) 42%,
    rgba(0, 0, 0, 0.88) 66%,
    rgba(0, 0, 0, 0.96) 100%
  );
}
.aa-feature.aa-reverse .aa-feature-overlay {
  background: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.5) 42%,
    rgba(0, 0, 0, 0.88) 66%,
    rgba(0, 0, 0, 0.96) 100%
  );
}
.aa-feature .aa-container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.aa-feature-copy {
  max-width: 33rem;
  padding-block: 3rem;
  color: #fff;
  /* Subtle shadow keeps text legible over any part of the photo, in both
     light and dark mode (the band itself is always a dark image). */
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}
@media (min-width: 1025px) {
  .aa-feature-copy {
    margin-left: auto;
  }
  .aa-feature.aa-reverse .aa-feature-copy {
    margin-left: 0;
    margin-right: auto;
  }}
.aa-feature-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--primary);
}
.aa-feature-copy h2 {
  margin-top: 0.9rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .aa-feature-copy h2 {
    font-size: 2.75rem;
  }}
.aa-feature-copy h2 .aa-dim {
  color: rgba(255, 255, 255, 0.66);
}
.aa-feature-copy > p {
  margin-top: 1.1rem;
  max-width: 30rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.aa-feature-points {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.aa-feature-points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.94);
}
.aa-feature-points .aa-tick {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
}
.aa-feature-points .aa-tick svg {
  width: 0.75rem;
  height: 0.75rem;
}
.aa-feature-cta {
  margin-top: 1.9rem;
}
/* Light pill CTA, like the danmartell button */
.aa-feature-cta .aa-btn {
  border-radius: 999px;
  background: #fff;
  color: #0a2230;
  padding-inline: 1.75rem;
}
.aa-feature-cta .aa-btn:hover {
  background: rgba(255, 255, 255, 0.88);
  color: #0a2230;
}

/* On small screens the feature bands stack (image on top, copy on a solid band
   below). That band must follow the theme: a light surface with dark text in
   light mode, dark with light text in dark mode. It also has to beat the
   alternating section shading, hence the main > section.feature selector. */
@media (max-width: 1024px) {
  .aa-feature-copy {
    margin-inline: 0;
  }
  /* Default (dark mode): keep the band black with light text. The selector
     also beats the nth-of-type alternating shade. */
  main > section.aa-feature {
    background-color: #000;
  }
  .aa-feature-copy,
  .aa-feature-copy h2 {
    color: #fff;
    text-shadow: none;
  }
  .aa-feature-copy h2 .aa-dim {
    color: rgba(255, 255, 255, 0.55);
  }
  .aa-feature-copy > p,
  .aa-feature-points li {
    color: rgba(255, 255, 255, 0.86);
  }

  /* Light mode: a soft, on-brand tinted surface with dark text and a blue
     button (the white pill would disappear on a light band). */
  html:not(.aa-dark) main > section.aa-feature {
    background-color: color-mix(in oklab, var(--primary) 7%, #ffffff);
  }
  html:not(.aa-dark) .aa-feature-copy,
  html:not(.aa-dark) .aa-feature-copy h2 {
    color: var(--foreground);
  }
  html:not(.aa-dark) .aa-feature-copy h2 .aa-dim {
    color: var(--muted-foreground);
  }
  html:not(.aa-dark) .aa-feature-copy > p,
  html:not(.aa-dark) .aa-feature-points li {
    color: var(--muted-foreground);
  }
  html:not(.aa-dark) .aa-feature-cta .aa-btn {
    background: var(--primary);
    color: var(--primary-foreground);
  }
  html:not(.aa-dark) .aa-feature-cta .aa-btn:hover {
    background: color-mix(in oklab, var(--primary) 85%, black);
    color: var(--primary-foreground);
  }}

/* --- Page hero with a photo background (used on Pricing, like Contact) ---- */
.aa-page-hero.aa-has-photo {
  border-bottom: 0;
  /* Fixed height + vertical centering so every photo hero (Pricing, Contact)
     is the same size regardless of how the copy wraps. */
  display: flex;
  align-items: center;
  min-height: 22rem;
}
@media (min-width: 768px) {
  .aa-page-hero.aa-has-photo {
    min-height: 27rem;
  }}
.aa-page-hero.aa-has-photo .aa-container {
  padding-block: 2rem;
}
.aa-page-hero.aa-has-photo .aa-page-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.aa-page-hero.aa-has-photo .aa-page-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hero crop: two of the photographs have the students and their laptops low in
   the frame, and the default centred crop cuts the laptops off. Sliding the
   focal point down shows the desk without losing the faces.

   The band first has to be tall enough to hold both. At a fixed 27rem the hero
   shows only about 47% of the photo's height on a wide screen, and the span
   from the top of the hair to the bottom of the laptop is more than half the
   photo, so something always had to go. 32vw keeps the visible share at a
   steady 57% at any wide width, because the band and the render both scale
   with the viewport, and 57% is enough to hold the span with room to spare.
   max() keeps the existing 27rem wherever 32vw would be shorter.

   The focal point then belongs to the photograph, not to the page, because the
   two differ: in resources-hero the hair starts at 34% and the desk ends at
   85%, in hero-study-pair both sit lower, at 37% and 89%. Hence two values.
   Neither bites on a phone, where the crop is horizontal instead. */
@media (min-width: 768px) {
}
.aa-page-hero.aa-has-photo .aa-page-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}
.aa-page-hero.aa-has-photo .aa-glow {
  display: none;
}
.aa-page-hero.aa-has-photo .aa-container {
  position: relative;
  z-index: 1;
}
.aa-page-hero.aa-has-photo h1 {
  color: #fff;
}
/* Put the highlighted (blue) part of the heading on its own line, so the
   Pricing and Contact heroes always have a matching two-line heading. */
.aa-page-hero.aa-has-photo h1 .aa-text-primary {
  display: block;
}
/* The rule above puts the accented span on its own line, which suits the two
   line Pricing and Contact headings it was written for. Here the accent is
   1000+ students, mid sentence, so it has to stay inline. */
.aa-page-hero.aa-hero-soft h1 .aa-text-primary,
.aa-page-hero.aa-has-photo h1 .aa-text-primary.aa-inline { display: inline; }

.aa-page-hero.aa-has-photo .aa-lead {
  color: rgba(255, 255, 255, 0.82);
}
/* Hero variant: the subject mascot instead of a photo. Same height and text
   treatment as .has-photo, but a brand gradient carries the background and the
   character stands on the left where the photographed students used to sit. */
.aa-page-hero.aa-has-mascot {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  display: flex;
  align-items: center;
  min-height: 22rem;
  background:
    radial-gradient(110% 130% at 14% 55%, color-mix(in oklab, var(--primary) 26%, transparent), transparent 58%),
    linear-gradient(180deg, #05070c 0%, #0b0f18 100%);
}
@media (min-width: 768px) {
  .aa-page-hero.aa-has-mascot { min-height: 27rem; }}
.aa-page-hero.aa-has-mascot .aa-glow { display: none; }
.aa-page-hero.aa-has-mascot .aa-container {
  position: relative;
  z-index: 1;
  padding-block: 2rem;
}
.aa-page-hero.aa-has-mascot h1 { color: #fff; }
.aa-page-hero.aa-has-mascot h1 .aa-text-primary { display: block; }
.aa-page-hero.aa-has-mascot .aa-lead { color: rgba(255, 255, 255, 0.82); }
.aa-hero-mascot {
  /* Sized by viewport width, not hero height: the heading is centred, so a
     height based mascot grew into it on wide screens. */
  position: absolute;
  left: 2.5%;
  bottom: 0;
  z-index: 0;
  width: clamp(8rem, 13vw, 12.5rem);
}
.aa-hero-mascot img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
/* Below the two column point the mascot would collide with the copy, so it
   sits behind it as a faint watermark instead. */
@media (max-width: 900px) {
  .aa-hero-mascot {
    left: 50%;
    transform: translateX(-50%);
    width: 14rem;
    opacity: 0.16;
  }}

/* Physics hero heading is longer, so size it to keep the first line intact */
.aa-page-hero.aa-hero-physics h1 {
  font-size: 2rem;
}
@media (min-width: 768px) {
  .aa-page-hero.aa-hero-physics h1 {
    font-size: 2.4rem;
  }}
/* Hero trust strip: on small screens the 5th item is alone in the 2-col grid,
   so make it span both columns and center. */
@media (max-width: 1023px) {
  .aa-hero-trust-grid .aa-trust-item:last-child {
    grid-column: 1 / -1;
    justify-content: center;
  }
  /* Keep the sub on two lines (it has room to fit one line once centered). */
  .aa-hero-trust-grid .aa-trust-item:last-child .aa-t-sub {
    max-width: 9rem;
  }}

/* --- Lead-capture modal (Black Book) ------------------------------------- */
.aa-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.75);
}
.aa-modal-overlay.aa-open {
  display: flex;
}
.aa-modal-card {
  position: relative;
  width: 100%;
  max-width: 42rem;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 2.75rem 2rem 2.25rem;
  box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.55);
  text-align: center;
}
@supports (height: 100dvh) {
}
/* room above the card for the button to sit in, so it never clips off the top
   of a short window */
.aa-modal-video { padding-top: 4.25rem; }
.aa-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  transition: color 0.15s, border-color 0.15s;
}
.aa-modal-close:hover {
  color: var(--foreground);
  border-color: color-mix(in oklab, var(--foreground) 30%, transparent);
}
.aa-modal-close svg {
  width: 1rem;
  height: 1rem;
}
.aa-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.aa-modal-desc {
  margin-inline: auto;
  margin-top: 0.75rem;
  max-width: 32rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.aa-modal-form {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}
.aa-modal-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}
.aa-modal-input::placeholder {
  color: var(--muted-foreground);
}
.aa-modal-input:focus {
  outline: none;
  border-color: var(--primary);
}
.aa-modal-send {
  width: 100%;
  height: 3rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* --- Split modal (Free Week Resource Registration) ---------------------- */
.aa-modal-card-split {
  max-width: 68rem;
  padding: 0;
  text-align: left;
  overflow: hidden;
}
@media (min-width: 760px) {
  .aa-modal-card-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 33rem;
  }}
.aa-modal-visual {
  position: relative;
  min-height: 17rem;
  background-color: #0b0b0b;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 1.75rem;
}
.aa-modal-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.78));
}
.aa-modal-visual-foot {
  position: relative;
  z-index: 1;
  color: #fff;
  line-height: 1.5;
}
.aa-modal-visual-foot .aa-mv-q {
  font-weight: 600;
}
.aa-modal-visual-foot .aa-mv-e {
  color: rgba(255, 255, 255, 0.82);
}
.aa-modal-visual-foot .aa-mv-e a {
  color: var(--primary);
}
.aa-modal-panel {
  padding: 2.5rem 1.9rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 760px) {
  .aa-modal-panel {
    padding: 3.5rem 3.25rem;
  }}
.aa-modal-card-split .aa-modal-title {
  font-size: 1.85rem;
}
.aa-modal-card-split .aa-modal-title {
  text-align: left;
}
.aa-modal-card-split .aa-modal-desc {
  margin-inline: 0;
  margin-top: 1.1rem;
  max-width: none;
  text-align: left;
}
.aa-modal-google {
  margin-top: 1.9rem;
  width: 100%;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--primary);
  background: var(--card);
  color: var(--foreground);
  font-weight: 600;
  font-size: 1rem;
}
.aa-modal-google:hover {
  background: color-mix(in oklab, var(--primary) 8%, var(--card));
}
.aa-modal-google svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Split modal on short / small screens: keep it inside the viewport, let it
   scroll if needed, and shrink the image + spacing so nothing is cut off. */
@media (max-width: 759px) {
  .aa-modal-overlay {
    padding: 0.75rem;
  }
  .aa-modal-card-split {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
  }
  .aa-modal-visual {
    min-height: 8rem;
    padding: 1.15rem 1.5rem;
  }
  .aa-modal-panel {
    padding: 1.6rem 1.5rem 1.9rem;
  }
  .aa-modal-card-split .aa-modal-title {
    font-size: 1.5rem;
  }
  .aa-modal-card-split .aa-modal-desc {
    margin-top: 0.8rem;
  }
  .aa-modal-google {
    margin-top: 1.4rem;
    height: 3rem;
  }}

/* --- Subject course page (Physics and future subjects) ------------------ */
.aa-course-grid {
  margin-top: 3rem;
  gap: 2rem;
}
@media (min-width: 768px) {
  .aa-course-grid { }}
.aa-course-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.aa-course-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.45);
}
.aa-course-card .aa-c-board {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.aa-course-card h3 {
  margin-top: 0.7rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.aa-course-card .aa-c-foot {
  margin-top: auto;
  padding-top: 1.75rem;
}
.aa-course-card .aa-c-tutor {
  font-size: 0.95rem;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}
.aa-course-card .aa-c-tutor b { color: var(--foreground); font-weight: 600; }

/* Cambridge landing course cards: description + "what you'll learn" list */
.aa-course-grid
.aa-course-grid.aa-learn .aa-course-card {
  padding: 2.5rem 2.25rem;
}
.aa-course-card .aa-cc-desc {
  margin-top: 1.1rem;
  color: var(--muted-foreground);
  font-size: 0.95rem;
  line-height: 1.65;
}
.aa-course-card .aa-cc-learn {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}
.aa-course-card .aa-cc-learn li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}
.aa-course-card .aa-cc-learn li svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--primary);
}

/* Physics "most popular" cards: purely visual polish (no extra copy).
   Scoped to .course-grid so the other .course-card designs are untouched. */
.aa-course-grid .aa-course-card {
  overflow: hidden;
}
/* Brand accent bar along the top edge */
.aa-course-grid .aa-course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 45%, white)
  );
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.aa-course-grid .aa-course-card:hover::before {
  transform: scaleX(1);
}
/* Soft brand glow in the top corner */
.aa-course-grid .aa-course-card::after {
  content: "";
  position: absolute;
  top: -6rem;
  right: -6rem;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--primary) 16%, transparent),
    transparent 70%
  );
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.35s ease;
}
.aa-course-grid .aa-course-card:hover::after {
  opacity: 1;
}
/* Keep real content above the glow */
.aa-course-grid .aa-course-card > * {
  position: relative;
  z-index: 1;
}
/* Board label becomes a tinted chip */
.aa-course-grid .aa-course-card .aa-c-board {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 22%, transparent);
}
/* Divider above the tutor + button block */
.aa-course-grid .aa-course-card .aa-c-foot {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}

/* ============================================================================
   Level first course picker.
   The page is organised by level (IGCSE, AS, A2). Each card carries a photo, a
   short lead and one button per exam board, so a visitor scans images and
   buttons rather than paragraphs. The long form board copy lives underneath in
   collapsed <details> panels, still in the DOM for search engines.
   ========================================================================== */

/* Shared feature strip, sits once under the section head */
.aa-lvl-feats {
  /* Centred as a group rather than stretched across four equal columns, so the
     strip reads as one centred row under the section head instead of four
     items floating at unrelated positions above the card. */
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.75rem;
}
.aa-lvl-feats li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--muted-foreground);
}
.aa-bcf-ic {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  color: var(--primary);
}
.aa-bcf-ic svg { width: 1.2rem; height: 1.2rem; }

/* Level cards */
.aa-lvl-grid {
  margin-top: 2.5rem;
  gap: 1.5rem;
}
.aa-board-card.aa-lvl-card {
  display: grid;

  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);

  gap: 2.5rem;

  align-items: center;

  padding: 1.5rem;

}

.aa-lvl-media {

  border-radius: 1.25rem;

  overflow: hidden;

  aspect-ratio: 4 / 3;

  background: color-mix(in oklab, var(--primary) 8%, transparent);

}

.aa-lvl-media img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

}

.aa-board-card.aa-lvl-card:hover .aa-lvl-media img { transform: scale(1.05); }

.aa-lvl-body { min-width: 0; }

.aa-board-card.aa-lvl-card h3 {

  margin: 0;

  font-size: 1.6rem;

  line-height: 1.2;

}

.aa-lvl-meta {

  margin-top: 0.6rem;

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  padding: 0.3rem 0.75rem 0.3rem 0.4rem;

  border-radius: 999px;

  background: color-mix(in oklab, var(--primary) 12%, transparent);

  color: var(--primary);

  font-size: 0.76rem;

  font-weight: 600;

  letter-spacing: 0.02em;

}

.aa-lvl-meta .aa-lm-ic { display: grid; place-items: center; }

.aa-lvl-meta svg { width: 0.95rem; height: 0.95rem; }

.aa-lvl-lead {

  margin-top: 0.9rem;

  font-size: 0.95rem;

  line-height: 1.7;

  color: var(--muted-foreground);

  max-width: 62ch;

}

.aa-lvl-pick {

  margin-top: 1.5rem;

  padding-top: 1.25rem;

  border-top: 1px solid var(--border);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--muted-foreground);

}

html.aa-dark .aa-lvl-pick { border-top-color: rgba(255, 255, 255, 0.1); }

/* Board buttons: short label on screen, full course name kept in the markup

   (.lb-full) and revealed on hover or focus, so nothing is hidden from

   crawlers while the visible label stays short. */

.aa-lvl-boards {

  margin-top: 0.9rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

}

.aa-lvl-board {

  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.8rem 1.15rem;

  border-radius: 0.8rem;

  background: var(--gold);

  color: #000;

  text-decoration: none;

  font-size: 0.92rem;

  font-weight: 700;

  box-shadow: 0 8px 18px -10px rgba(249, 182, 2, 0.9);

  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;

}

.aa-lvl-board:hover,

.aa-lvl-board:focus-visible {

  transform: translateY(-2px);

  filter: brightness(1.05);

  box-shadow: 0 14px 26px -12px rgba(249, 182, 2, 0.95);

}

.aa-lb-code {

  font-size: 0.78rem;

  font-weight: 600;

  opacity: 0.6;

}

.aa-lb-arrow {

  width: 1rem;

  height: 1rem;

  flex-shrink: 0;

  opacity: 0.75;

  transition: transform 0.2s ease;

}

.aa-lvl-board:hover .aa-lb-arrow { transform: translateX(3px); }

.aa-lb-full {

  position: absolute;

  left: 50%;

  bottom: calc(100% + 0.55rem);

  transform: translateX(-50%) translateY(4px);

  white-space: nowrap;

  padding: 0.45rem 0.75rem;

  border-radius: 0.5rem;

  background: #101418;

  color: #fff;

  font-size: 0.72rem;

  font-weight: 500;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.18s ease, transform 0.18s ease;

  z-index: 5;

  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);

}

.aa-lvl-board:hover .aa-lb-full,

.aa-lvl-board:focus-visible .aa-lb-full {

  opacity: 1;

  visibility: visible;

  transform: translateX(-50%) translateY(0);

}

/* Collapsed board copy, kept in the DOM for search engines */

.aa-board-about {

  margin-top: 2.5rem;

  border: 1px solid var(--border);

  border-radius: var(--radius-2xl);

  padding: 0.5rem 1.75rem 1.25rem;

  background: color-mix(in oklab, var(--primary) 4%, transparent);

}

html.aa-dark .aa-board-about {

  border-color: rgba(255, 255, 255, 0.09);

  background: rgba(255, 255, 255, 0.025);

}

.aa-ba-title {

  margin: 1.25rem 0 0.25rem;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--muted-foreground);

}

.aa-bc-more {

  border-top: 1px solid var(--border);

}

html.aa-dark .aa-bc-more { border-top-color: rgba(255, 255, 255, 0.09); }

.aa-bc-more summary {

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 1.1rem 0;

  cursor: pointer;

  list-style: none;

  font-size: 0.95rem;

  font-weight: 600;

  transition: color 0.2s ease;

}

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

.aa-bc-more summary:hover { color: var(--primary); }

.aa-bc-more summary .aa-bc-logo {

  margin: 0;

  align-self: center;

  flex-shrink: 0;

  width: 5.5rem;

  display: grid;

  place-items: center;

}

.aa-bc-more summary .aa-bc-logo img { max-width: 100%; max-height: 2.2rem; width: auto; }

.aa-bm-name { flex: 1; min-width: 0; }

.aa-bc-more summary .aa-chev {

  width: 1.1rem;

  height: 1.1rem;

  flex-shrink: 0;

  color: var(--muted-foreground);

  transition: transform 0.25s ease;

}

.aa-bc-more[open] summary .aa-chev { transform: rotate(180deg); }

.aa-bc-more-body { padding: 0 0 1.5rem; }

.aa-bc-more-body p {

  font-size: 0.92rem;

  line-height: 1.7;

  color: var(--muted-foreground);

  max-width: 75ch;

}

.aa-bc-more-body .aa-pc-board {

  margin-bottom: 0.5rem;

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--primary);

}

.aa-bc-more-body .aa-board-sub {

  margin-top: 1.2rem;

  margin-bottom: 0.6rem;

}

.aa-bc-more-body .aa-check-list.aa-compact {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));

  gap: 0.1rem 1.5rem;

}

.aa-check-list.aa-compact li {

  font-size: 0.88rem;

  gap: 0.5rem;

  margin-top: 0.45rem;

}

.aa-check-list.aa-compact li svg { width: 0.95rem; height: 0.95rem; color: var(--primary); }

.aa-bm-link {

  margin-top: 1.4rem;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.88rem;

  font-weight: 700;

  color: var(--primary);

  text-decoration: none;

}

.aa-bm-link svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }

.aa-bm-link:hover svg { transform: translateX(4px); }

@media (max-width: 1024px) {

  .aa-lvl-feats { gap: 1rem 2rem; }}

@media (max-width: 860px) {

  .aa-board-card.aa-lvl-card {

    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;

    padding: 1.25rem;

  }

  .aa-board-card.aa-lvl-card h3 { font-size: 1.35rem; }}

@media (max-width: 620px) {

  .aa-lvl-feats {

    flex-direction: column;

    align-items: flex-start;

    width: fit-content;

    margin-inline: auto;

    gap: 0.75rem;

  }

  .aa-board-about { padding: 0.5rem 1.25rem 1rem; }

  .aa-bc-more summary { gap: 0.75rem; font-size: 0.88rem; }

  .aa-bc-more summary .aa-bc-logo { width: 4.25rem; }

  .aa-lvl-boards { gap: 0.6rem; }

  .aa-lvl-board { padding: 0.75rem 1rem; font-size: 0.85rem; }}

@media (max-width: 420px) {

  /* Three columns with the arrow fixed, so the code column always ends at the
     same x and the codes line up down the stack. space-between let each code
     drift with the length of its board name. */
  .aa-lvl-board {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1rem;
    align-items: center;
  }

  .aa-lb-full { display: none; }}

.aa-board-grid {

  margin-top: 3rem;

  gap: 1.75rem;

}

.aa-board-card {

  /* Light mode: soft light blue-grey card with dark text and dark logos.

     Dark mode override is further below. */

  background: #eef2f8;

  border: 1px solid rgba(0, 0, 0, 0.07);

  border-radius: var(--radius-3xl);

  padding: 2rem;

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}

@media (min-width: 640px) {

  .aa-board-card { padding: 2.75rem; }}

.aa-board-card:hover {

  transform: translateY(-3px);

  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));

  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.45);

}

.aa-board-card h3 {

  font-size: 1.5rem;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--foreground);

}

.aa-bc-intro > p {

  margin-top: 0.9rem;

  color: var(--muted-foreground);

  line-height: 1.75;

}

/* First sub-heading in the details column sits at the top, so no divider */

.aa-bc-details .aa-board-sub:first-child {

  margin-top: 0;

  padding-top: 0;

  border-top: none;

}

/* When the card is stacked (mobile), add a gap after the button before the

   details start. */

@media (max-width: 859px) {

  .aa-bc-details {

    margin-top: 2.5rem;

  }}

/* Board logo under the description. The logos are white (for dark cards); in

   light mode we recolor them to black so they read on the white card. */

.aa-bc-logo {

  margin-top: 3.25rem;

  align-self: flex-start;

}

.aa-bc-logo img {

  width: 100%;

  max-width: 17rem;

  height: auto;

  display: block;

}

/* AQA & Edexcel logos are white; darken them for the light card, white on dark */

.aa-bc-logo .aa-inv {

  filter: brightness(0);

}

html.aa-dark .aa-bc-logo .aa-inv {

  filter: none;

}

/* Cambridge: dark-text version on the light card, white version on the dark card */

.aa-bc-logo .aa-dm {

  display: none;

}

html.aa-dark .aa-bc-logo .aa-dm {

  display: block;

}

html.aa-dark .aa-bc-logo .aa-lm {

  display: none;

}

.aa-bc-cta {

  margin-top: 1.9rem;

  max-width: 100%;

  height: auto;

  min-height: 2.75rem;

  padding-block: 0.6rem;

  white-space: nowrap;

  text-align: center;

}

/* Short benefit points in the left column */

.aa-bc-points {

  margin-top: 1.6rem;

  display: flex;

  flex-direction: column;

  gap: 0.6rem;

}

.aa-bc-points li {

  display: flex;

  align-items: flex-start;

  gap: 0.6rem;

  font-size: 0.95rem;

  color: var(--foreground);

}

.aa-bc-points li svg {

  width: 1.05rem;

  height: 1.05rem;

  flex-shrink: 0;

  margin-top: 0.18rem;

  color: var(--primary);

}

html.aa-dark .aa-bc-points li {

  color: rgba(255, 255, 255, 0.9);

}

.aa-board-sub {

  margin-top: 2rem;

  padding-top: 1.6rem;

  border-top: 1px solid rgba(0, 0, 0, 0.1);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--muted-foreground);

}

.aa-check-list {

  margin-top: 1.1rem;

  display: flex;

  flex-direction: column;

  gap: 0.85rem;

}

.aa-check-list li {

  display: flex;

  align-items: flex-start;

  gap: 0.75rem;

  font-size: 1rem;

  line-height: 1.4;

  color: var(--foreground);

}

.aa-check-list .aa-tick {

  display: grid;

  place-items: center;

  width: 1.35rem;

  height: 1.35rem;

  flex-shrink: 0;

  margin-top: 0.05rem;

  border-radius: 999px;

  background: var(--primary);

  color: var(--primary-foreground);

}

.aa-check-list .aa-tick svg { width: 0.8rem; height: 0.8rem; }

.aa-code-list {

  margin-top: 1.1rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

}

.aa-code-list li {

  display: inline-flex;

  align-items: center;

  font-size: 0.88rem;

  font-weight: 600;

  padding: 0.65rem 1.2rem;

  border-radius: 999px;

  background: var(--primary);

  color: var(--primary-foreground);

}

/* Chips that link to a course page: make the whole chip clickable */

.aa-code-list li { max-width: 100%; }

.aa-code-list li a { white-space: normal; }

.aa-code-list li:has(a) { padding: 0; }

.aa-code-list li a {

  display: inline-flex;

  align-items: center;

  padding: 0.65rem 1.2rem;

  border-radius: 999px;

  color: inherit;

  text-decoration: none;

  transition: filter 0.2s ease;

}

.aa-code-list li a:hover { filter: brightness(1.08); }

/* On the black dark theme, plain black course cards read as flat outlines. Give

   them a subtly lifted surface and a lighter border. (Board cards use their own

   fixed dark surface in both themes, so they are excluded here.) */

html.aa-dark .aa-course-card {

  background: linear-gradient(

    180deg,

    rgba(255, 255, 255, 0.045),

    rgba(255, 255, 255, 0.014)

  );

  border-color: rgba(255, 255, 255, 0.09);

}

html.aa-dark .aa-course-card:hover {

  border-color: color-mix(in oklab, var(--primary) 50%, rgba(255, 255, 255, 0.12));

}

/* Dark mode: board cards go dark with light text (logo plate merges in). */

html.aa-dark .aa-board-card {

  background: #12151d;

  border-color: rgba(255, 255, 255, 0.09);

}

html.aa-dark .aa-board-card h3 {

  color: #fff;

}

html.aa-dark .aa-bc-intro > p {

  color: rgba(255, 255, 255, 0.72);

}

html.aa-dark .aa-board-sub {

  color: rgba(255, 255, 255, 0.55);

  border-top-color: rgba(255, 255, 255, 0.1);

}

html.aa-dark .aa-check-list li {

  color: rgba(255, 255, 255, 0.92);

}

.aa-benefit-grid {

  margin-top: 2.5rem;

  gap: 1.25rem;

}

@media (min-width: 768px) {

  .aa-benefit-grid { }}

.aa-benefit {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius-2xl);

  padding: 1.6rem;

}

.aa-benefit .aa-ic {

  display: grid;

  place-items: center;

  width: 2.75rem;

  height: 2.75rem;

  border-radius: 0.9rem;

  background: color-mix(in oklab, var(--primary) 14%, transparent);

  color: var(--primary);

}

.aa-benefit .aa-ic svg { width: 1.4rem; height: 1.4rem; }

.aa-benefit h3 { margin-top: 1rem; font-size: 1.1rem; font-weight: 700; }

.aa-benefit p { margin-top: 0.4rem; color: var(--muted-foreground); line-height: 1.6; }

/* --- Exam-trained teaching section (dark proof stat card) --------------- */

.aa-proof-stat-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius-3xl);

  padding: 2.5rem;

  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);

  width: 100%;

}

html.aa-dark .aa-proof-stat-card {

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014));

  border-color: rgba(255, 255, 255, 0.09);

}

@media (min-width: 768px) {

  .aa-proof-stat-card { padding: 3rem; }}

.aa-proof-stat-card .aa-ps-num {

  display: block;

  font-size: 3.5rem;

  font-weight: 800;

  line-height: 1;

  color: var(--primary);

  letter-spacing: -0.02em;

}

.aa-proof-stat-card .aa-ps-lead {

  margin-top: 0.75rem;

  color: var(--muted-foreground);

  line-height: 1.6;

  max-width: 26rem;

}

.aa-proof-stat-card .aa-ps-row {

  margin-top: 2.5rem;

  padding-top: 2.5rem;

  border-top: 1px solid var(--border);

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2.25rem;

  row-gap: 1.5rem;

}

html.aa-dark .aa-proof-stat-card .aa-ps-lead { color: rgba(255, 255, 255, 0.72); }

html.aa-dark .aa-proof-stat-card .aa-ps-row { border-top-color: rgba(255, 255, 255, 0.15); }

.aa-proof-stat-card .aa-ps-row b {

  display: flex;

  align-items: center;

  gap: 0.15rem;

  font-size: 1.3rem;

  font-weight: 800;

  color: var(--foreground);

  white-space: nowrap;

}

.aa-proof-stat-card .aa-ps-row .aa-star {

  display: inline-block;

  margin: 0;

  line-height: 1;

  color: var(--gold);

  font-size: 0.9em;

}

/* b + span targets only the caption under each stat. Plain "span" also hit

   the star inside <b>, giving it display:block, a 0.4rem top margin that

   dropped it below the number, and the caption grey instead of gold. */

.aa-proof-stat-card .aa-ps-row b + span {

  display: block;

  margin-top: 0.4rem;

  font-size: 0.82rem;

  color: var(--muted-foreground);

  line-height: 1.35;

}

html.aa-dark .aa-proof-stat-card .aa-ps-row b { color: #fff; }

html.aa-dark .aa-proof-stat-card .aa-ps-row b + span { color: rgba(255, 255, 255, 0.82); }

/* Small screens: tighten so the three stats fit without overflowing */

@media (max-width: 560px) {

  .aa-proof-stat-card { padding: 1.75rem 1.4rem; }

  .aa-proof-stat-card .aa-ps-row {

    margin-top: 1.75rem;

    padding-top: 1.75rem;

    gap: 0.9rem;

    row-gap: 1.25rem;

  }

  .aa-proof-stat-card .aa-ps-row b { font-size: 1.05rem; }

  .aa-proof-stat-card .aa-ps-row b + span { font-size: 0.75rem; }}

.aa-exam-trained .aa-stat-col {

  display: flex;

  align-items: center;

}

/* Quick facts strip: full width band */

.aa-cd-facts-band {

  position: relative;

  background: linear-gradient(180deg, #ffffff, #eef2f8);

  border-bottom: 1px solid var(--border);

}

html.aa-dark .aa-cd-facts-band {

  background: #000;

  border-color: rgba(255, 255, 255, 0.08);

}

/* Brand accent line along the very top of the band */

.aa-cd-band-accent {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(

    90deg,

    var(--primary),

    color-mix(in srgb, var(--primary) 45%, white)

  );

}

.aa-cd-facts {

  display: grid;

  grid-template-columns: 1fr;

  padding-top: 0.5rem;

}

.aa-cd-fact {

  display: flex;

  align-items: center;

  gap: 0.9rem;

  padding: 1.35rem 1.4rem;

}

/* Phones: one fact per row, so long values stay on one line */

.aa-cd-fact + .aa-cd-fact {

  border-top: 1px solid var(--border);

}

/* Small tablets: 2 up. From 680px, not 560px: at 560px each column was 252px
   and the widest fact needs 292px, so the text ran off the edge. */
@media (min-width: 680px) {
  .aa-cd-facts { grid-template-columns: 1fr 1fr; }
  .aa-cd-fact { padding: 1.6rem 1.4rem; }
  .aa-cd-fact + .aa-cd-fact { border-top: 0; }
  .aa-cd-fact:nth-child(even) { border-left: 1px solid var(--border); }
  .aa-cd-fact:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
/* Desktop: 4 up on one row. Four cells need about 980px of strip, which a
   992px viewport does not give, so this waits for 1080px.

   The tracks come from the measured content: exam board 292, course code 193,
   results 202, format 291, plus a little slack. The old 1 / 0.8 / 1 / 1.35
   starved the widest cell and left the narrowest one 63px spare. */
@media (min-width: 1080px) {
  .aa-cd-facts {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.7fr) minmax(0, 0.75fr) minmax(0, 1.05fr);
  }
  .aa-cd-fact:nth-child(n + 3) { border-top: 0; }
  .aa-cd-fact:nth-child(even) { border-left: 0; }
  .aa-cd-fact + .aa-cd-fact { border-left: 1px solid var(--border); }
}
/* Safety net. The text block could not shrink at all, so anything too wide was
   simply cut. It may now shrink and the value may wrap to a second line, which
   the sizing above should keep from happening but which beats losing words. */
.aa-cd-fact > div { min-width: 0; }
.aa-cd-fact .aa-v { overflow-wrap: break-word; }
.aa-cd-fact .aa-fi { flex: none; }


html.aa-dark .aa-cd-fact { border-color: rgba(255, 255, 255, 0.08); }

.aa-cd-fact .aa-fi {

  display: grid;

  place-items: center;

  width: 2.75rem;

  height: 2.75rem;

  flex-shrink: 0;

  border-radius: 0.8rem;

  background: color-mix(in oklab, var(--primary) 13%, transparent);

  color: var(--primary);

}

.aa-cd-fact .aa-fi svg { width: 1.35rem; height: 1.35rem; }

.aa-cd-fact .aa-k {

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--muted-foreground);

}

.aa-cd-fact .aa-v {

  margin-top: 0.35rem;

  font-size: 1.08rem;

  font-weight: 700;

  line-height: 1.3;

}

/* Topic grid */

.aa-cd-topics {

  margin-top: 2.75rem;

  display: grid;

  gap: 1rem;

  grid-template-columns: 1fr;

}

@media (min-width: 560px) {

  .aa-cd-topics { grid-template-columns: 1fr 1fr; }}

@media (min-width: 900px) {

  .aa-cd-topics { grid-template-columns: repeat(3, 1fr); }

  /* A lone last topic (e.g. the 13th) sits in the centre column */

  .aa-cd-topics li:last-child:nth-child(3n + 1) { grid-column: 2; }

  /* Two trailing topics (e.g. 13 and 14) are centred in the last row */

  .aa-cd-topics li:nth-last-child(2):nth-child(3n + 1),

  .aa-cd-topics li:last-child:nth-child(3n + 2) {

    transform: translateX(calc(50% + 0.5rem));

  }

  .aa-cd-topics li:nth-last-child(2):nth-child(3n + 1):hover,

  .aa-cd-topics li:last-child:nth-child(3n + 2):hover {

    transform: translateX(calc(50% + 0.5rem)) translateY(-2px);

  }}

.aa-cd-topics li {

  display: flex;

  align-items: center;

  gap: 1.1rem;

  padding: 1.35rem 1.5rem;

  border-radius: var(--radius-2xl);

  background: var(--card);

  border: 1px solid var(--border);

  transition: transform 0.2s ease, border-color 0.2s ease;

}

html.aa-dark .aa-cd-topics li {

  background: rgba(255, 255, 255, 0.03);

  border-color: rgba(255, 255, 255, 0.09);

}

.aa-cd-topics li:hover {

  transform: translateY(-2px);

  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));

}

.aa-cd-topics .aa-num {

  flex-shrink: 0;

  padding-right: 1.1rem;

  border-right: 1px solid var(--border);

  font-size: 1.15rem;

  font-weight: 800;

  color: var(--primary);

  font-variant-numeric: tabular-nums;

}

html.aa-dark .aa-cd-topics .aa-num { border-color: rgba(255, 255, 255, 0.12); }

.aa-cd-topics .aa-tp {

  font-weight: 600;

  font-size: 1.02rem;

  color: var(--foreground);

}

/* Clean tables (papers + pricing) */

.aa-cd-table-wrap {

  margin-top: 2.75rem;

  overflow-x: auto;

  border: 1px solid var(--border);

  border-radius: var(--radius-2xl);

}

.aa-cd-table {

  width: 100%;

  border-collapse: collapse;

  min-width: 34rem;

}

.aa-cd-table th,
.aa-cd-table td {
  padding: 0.9rem 1.1rem;
  text-align: left;
}

.aa-cd-table thead th {

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--muted-foreground);

  background: color-mix(in oklab, var(--primary) 7%, transparent);

}

.aa-cd-table tbody tr + tr td {

  border-top: 1px solid var(--border);

}

.aa-cd-table td:first-child {

  font-weight: 600;

}

.aa-cd-table .aa-num {

  text-align: right;

  font-variant-numeric: tabular-nums;

}

/* Small screens: stack table rows into labelled cards (no horizontal scroll) */

@media (max-width: 640px) {

  .aa-cd-table-wrap {

    border: 0;

    border-radius: 0;

    overflow: visible;

  }

  .aa-cd-table {

    min-width: 0;

  }

  .aa-cd-table thead {

    position: absolute;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);

  }

  .aa-cd-table,

  .aa-cd-table tbody,

  .aa-cd-table tr,

  .aa-cd-table td {

    display: block;

    width: 100%;

  }

  .aa-cd-table tr {

    margin-bottom: 1.1rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-2xl);

    background: var(--card);

    overflow: hidden;

  }

  html.aa-dark .aa-cd-table tr {

    background: rgba(255, 255, 255, 0.03);

    border-color: rgba(255, 255, 255, 0.09);

  }

  .aa-cd-table tbody tr + tr td {

    border-top: 0;

  }

  .aa-cd-table td {
    /* label above, value below, both left aligned. Side by side with the value
       right aligned, every value that wrapped, which at 375px is most of them,
       got a ragged left edge floating in the middle of the card. */
    display: block;
    padding: 0.7rem 1.1rem;
    text-align: left;
  }

  .aa-cd-table td::before {

    display: block;

    margin-bottom: 0.15rem;

    content: attr(data-label);

    text-align: left;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--muted-foreground);

    flex-shrink: 0;

  }

  /* First cell becomes the card heading (full width, no label) */

  .aa-cd-table td:first-child {

    display: block;

    text-align: left;

    font-size: 1.02rem;

    font-weight: 700;

    padding: 0.95rem 1.1rem;

    background: color-mix(in oklab, var(--primary) 7%, transparent);

    border-bottom: 1px solid var(--border);

  }

  html.aa-dark .aa-cd-table td:first-child {

    border-color: rgba(255, 255, 255, 0.09);

  }

  .aa-cd-table td:first-child::before {

    content: none;

  }}

/* More courses: two up grid + card rating */

.aa-course-grid

@media (min-width: 760px) {

  .aa-course-grid}

.aa-course-card .aa-cc-rate {

  margin-top: 0.9rem;

}

.aa-course-card .aa-cc-rate .aa-stars svg {

  width: 1.05rem;

  height: 1.05rem;

}

/* Enrolment form section */

.aa-enrol-grid {

  display: grid;

  gap: 2.5rem;

  grid-template-columns: 1fr;

  align-items: center;

}

@media (min-width: 900px) {

  .aa-enrol-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }}

.aa-enrol-copy .aa-section-title { margin-top: 0.75rem; }

.aa-enrol-points {

  margin-top: 1.75rem;

  display: flex;

  flex-direction: column;

  gap: 0.85rem;

}

.aa-enrol-points li {

  display: flex;

  align-items: flex-start;

  gap: 0.7rem;

  color: var(--muted-foreground);

}

.aa-enrol-points li svg {

  width: 1.2rem;

  height: 1.2rem;

  flex-shrink: 0;

  margin-top: 0.15rem;

  color: var(--primary);

}

.aa-enrol-form {

  display: flex;

  flex-direction: column;

  gap: 1.1rem;

  border: 1px solid var(--border);

  border-radius: var(--radius-3xl);

  background: var(--card);

  padding: 2rem;

}

html.aa-dark .aa-enrol-form {

  background: rgba(255, 255, 255, 0.03);

  border-color: rgba(255, 255, 255, 0.09);

}

.aa-ef-field {

  display: flex;

  flex-direction: column;

  gap: 0.45rem;

}

.aa-ef-field label {

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--muted-foreground);

}

.aa-enrol-form input[type="text"],

.aa-enrol-form input[type="email"],

.aa-enrol-form input[type="tel"],

.aa-enrol-form select {

  width: 100%;

  border: 1px solid var(--border);

  border-radius: 0.7rem;

  background: var(--background);

  padding: 0.85rem 1rem;

  font-size: 0.95rem;

  color: var(--foreground);

  outline: none;

  transition: border-color 0.15s, box-shadow 0.15s;

}

html.aa-dark .aa-enrol-form input[type="text"],

html.aa-dark .aa-enrol-form input[type="email"],

html.aa-dark .aa-enrol-form input[type="tel"],

html.aa-dark .aa-enrol-form select {

  background: rgba(255, 255, 255, 0.02);

  border-color: rgba(255, 255, 255, 0.12);

}

.aa-enrol-form input::placeholder {

  color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);

}

.aa-enrol-form input:focus,

.aa-enrol-form select:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent);

}

.aa-ef-role {

  border: 0;

  padding: 0;

  margin: 0;

}

.aa-ef-role legend {

  padding: 0;

  margin-bottom: 0.65rem;

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--muted-foreground);

}

.aa-ef-radios {

  display: flex;

  gap: 1.75rem;

}

.aa-ef-radio {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-weight: 600;

  cursor: pointer;

}

.aa-ef-radio input {

  width: auto;

  accent-color: var(--primary);

}

.aa-ef-submit {

  margin-top: 0.35rem;

  width: 100%;

  justify-content: center;

}

.aa-ef-note {

  font-size: 0.8rem;

  color: var(--muted-foreground);

  text-align: center;

}

/* Generic feature cards (why choose, benefits) */

.aa-cd-cards {

  margin-top: 2.75rem;

  gap: 1.5rem;

}

@media (min-width: 640px) {

  .aa-cd-cards { }}

.aa-cd-card {

  border: 1px solid var(--border);

  border-radius: var(--radius-2xl);

  background: var(--card);

  padding: 1.85rem;

}

html.aa-dark .aa-cd-card {

  background: rgba(255, 255, 255, 0.03);

  border-color: rgba(255, 255, 255, 0.09);

}

.aa-cd-card .aa-ic {

  display: grid;

  place-items: center;

  width: 2.85rem;

  height: 2.85rem;

  border-radius: 0.85rem;

  background: color-mix(in oklab, var(--primary) 14%, transparent);

  color: var(--primary);

  margin-bottom: 1.1rem;

}

.aa-cd-card .aa-ic svg { width: 1.4rem; height: 1.4rem; }

.aa-cd-card h3 {

  font-size: 1.1rem;

  font-weight: 700;

  line-height: 1.35;

}

.aa-cd-card p {

  margin-top: 0.55rem;

  color: var(--muted-foreground);

  font-size: 0.95rem;

  line-height: 1.6;

}

/* Instructor card */

.aa-cd-tutor {

  margin-top: 2.75rem;

  display: grid;

  gap: 2rem;

  grid-template-columns: 1fr;

  align-items: start;

  border: 1px solid var(--border);

  border-radius: var(--radius-3xl);

  background: var(--card);

  padding: 2.25rem;

}

@media (min-width: 820px) {

  .aa-cd-tutor { grid-template-columns: 0.85fr 1.15fr; gap: 2.75rem; }}

html.aa-dark .aa-cd-tutor {

  background: rgba(255, 255, 255, 0.03);

  border-color: rgba(255, 255, 255, 0.09);

}

/* Video reviews grid */

.aa-video-grid {

  margin-top: 3rem;

  gap: 1.5rem;

}

@media (min-width: 560px) {

  .aa-video-grid { }}

@media (min-width: 900px) {

  .aa-video-grid { }}

.aa-video-card {

  overflow: hidden;

  border-radius: var(--radius-2xl);

  border: 1px solid var(--border);

  background: #000;

}

html.aa-dark .aa-video-card {

  border-color: rgba(255, 255, 255, 0.09);

}

.aa-video-card video {

  display: block;

  width: 100%;

  aspect-ratio: 9 / 16;

  object-fit: cover;

  background: #000;

}

/* ============================================================================

   Results panel: a real bar chart comparing our A* to B rate with the

   Cambridge worldwide average, plus three supporting figures.

   ========================================================================== */

.aa-results-panel {

  margin-top: 3rem;

  display: grid;

  gap: 2rem;

  grid-template-columns: 1fr;

  align-items: center;

  border: 1px solid var(--border);

  border-radius: var(--radius-3xl);

  background: var(--card);

  padding: 2rem;

}

@media (min-width: 880px) {

  .aa-results-panel { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; padding: 2.75rem; }}

html.aa-dark .aa-results-panel {

  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014));

  border-color: rgba(255, 255, 255, 0.09);

}

.aa-chart-bars {

  /* One shared grid: a single 1fr plot row spanning every column, so both bars

     measure against an identical height and render true to their values.

     The top padding leaves room for the value label above the tallest bar. */

  display: grid;

  grid-auto-flow: column;

  grid-template-rows: 1fr auto;

  justify-content: center;

  gap: 0 2.5rem;

  height: 18rem;

  padding-top: 3.25rem;

}

.aa-cbar { display: contents; }

.aa-cbar-plot {

  position: relative;

  width: 8rem;

  height: 100%;

}

.aa-cbar-fill {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  /* height is the value as a percentage of the shared plot area */

  height: calc(var(--val) * 1%);

  border-radius: 0.6rem 0.6rem 0 0;

  transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);

}

.aa-cbar.aa-us .aa-cbar-fill {

  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #000));

}

.aa-cbar.aa-them .aa-cbar-fill {

  background: color-mix(in oklab, var(--muted-foreground) 35%, transparent);

}

/* The value sits directly on top of its own bar, not on a shared top row */

.aa-cbar-val {

  position: absolute;

  left: 0;

  right: 0;

  bottom: calc(var(--val) * 1%);

  margin-bottom: 0.45rem;

  text-align: center;

  font-size: 1.6rem;

  font-weight: 800;

  letter-spacing: -0.02em;

  transition: bottom 0.9s cubic-bezier(0.22, 1, 0.36, 1);

}

.aa-cbar.aa-us .aa-cbar-val { color: var(--primary); }

.aa-cbar.aa-them .aa-cbar-val { color: var(--muted-foreground); }

.aa-cbar-name {

  margin-top: 0.75rem;

  font-size: 0.78rem;

  font-weight: 600;

  line-height: 1.3;

  text-align: center;

  color: var(--muted-foreground);

}

.aa-chart-cap {

  margin-top: 1.5rem;

  text-align: center;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--muted-foreground);

}

.aa-results-side {

  display: flex;

  flex-direction: column;

  gap: 1.25rem;

}

.aa-results-side li {

  display: flex;

  align-items: center;

  gap: 0.9rem;

}

/* Scoped to .results-side so it outranks the generic text rule below, which

   would otherwise style this tile as a block of muted body text. */

.aa-results-side .aa-rs-ic {

  display: grid;

  place-items: center;

  width: 2.75rem;

  height: 2.75rem;

  margin: 0;

  flex-shrink: 0;

  border-radius: 0.8rem;

  background: color-mix(in oklab, var(--primary) 14%, transparent);

  color: var(--primary);

  font-size: 1rem;

}

.aa-results-side .aa-rs-ic svg { width: 1.3rem; height: 1.3rem; }

.aa-results-side b {

  display: block;

  font-size: 1.15rem;

  font-weight: 800;

  line-height: 1.2;

}

.aa-results-side li > div > span {

  display: block;

  margin-top: 0.15rem;

  font-size: 0.85rem;

  line-height: 1.4;

  color: var(--muted-foreground);

}

@media (max-width: 520px) {

  .aa-chart-bars { gap: 0 1.25rem; height: 15rem; padding-top: 3rem; }

  .aa-cbar-plot { width: 6rem; }

  .aa-cbar-val { font-size: 1.3rem; }}

/* Proven results stat band */

.aa-pr-stats {

  margin-top: 3rem;

  display: grid;

  grid-template-columns: 1fr;

  gap: 2.75rem;

  text-align: center;

}

@media (min-width: 760px) {

  .aa-pr-stats { grid-template-columns: repeat(3, 1fr); }}

.aa-pr-stat {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.6rem;

}

.aa-pr-num {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 3.25rem;

  font-weight: 800;

  line-height: 1;

  letter-spacing: -0.02em;

  color: var(--primary);

}

.aa-pr-num svg {

  width: 2.4rem;

  height: 2.4rem;

}

.aa-pr-label {

  font-size: 1rem;

  color: var(--muted-foreground);

}

.aa-cd-tutor-head {

  display: flex;

  align-items: center;

  gap: 1.1rem;

}

.aa-cd-tutor-avatar {

  width: 4.5rem;

  height: 4.5rem;

  flex-shrink: 0;

  border-radius: 50%;

  object-fit: cover;

  object-position: top center;

  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);

}

.aa-cd-tutor-side h3 {

  font-size: 1.5rem;

  font-weight: 700;

}

.aa-cd-tutor-role {

  margin-top: 0.3rem;

  color: var(--primary);

  font-weight: 600;

  font-size: 0.95rem;

}

.aa-cd-tutor-stats {

  margin-top: 1.75rem;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

}

.aa-cd-stat {

  display: flex;

  flex-direction: column;

}

.aa-cd-stat .aa-n {

  font-size: 1.7rem;

  font-weight: 800;

  color: var(--primary);

  line-height: 1;

}

.aa-cd-stat .aa-l {

  margin-top: 0.4rem;

  font-size: 0.8rem;

  color: var(--muted-foreground);

}

.aa-cd-tutor-bio p {

  color: var(--muted-foreground);

  line-height: 1.7;

}

.aa-cd-tutor-bio p + p { margin-top: 1rem; }

/* ============================================================================

   Cambridge course path and visual comparison.

   Opt in only: .course-grid.path and .cd-table.viz. The plain .course-card and

   .cd-table are shared by 24 other pages, so none of this touches them.

   ========================================================================== */

.aa-pc-grid {

  margin-top: 3rem;

  gap: 1.75rem;

}

.aa-pc {

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: var(--radius-3xl);

  background: var(--card);

  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

}

html.aa-dark .aa-pc {

  background: #12151d;

  border-color: rgba(255, 255, 255, 0.09);

}

.aa-pc:hover {

  transform: translateY(-4px);

  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));

  box-shadow: 0 30px 55px -28px rgba(0, 0, 0, 0.6);

}

/* The photo is the card: title and code sit on it, so the body below stays

   almost empty and the eye lands on the button. */

.aa-pc-media {

  position: relative;

  display: block;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  text-decoration: none;

}

.aa-pc-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

}

.aa-pc:hover .aa-pc-media img { transform: scale(1.06); }

/* The IGCSE photo is 16:9 while the card is 4:3, so a centred crop would clip

   the student on the right. Bias the crop toward them and away from the empty

   bench on the left. The other two photos are natively 4:3. */

.aa-pc-media img[src*="caie-path-igcse"],

.aa-pc-media img[src*="caie-path-a2"],

.aa-lvl-media img[src*="caie-path-igcse"],

.aa-lvl-media img[src*="caie-path-a2"] { object-position: 100% center; }

.aa-pc-media::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 38%,

    rgba(0, 0, 0, 0.55) 68%, rgba(0, 0, 0, 0.88) 100%);

}

.aa-pc-step {

  position: absolute;

  top: 1rem;

  left: 1rem;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 2.5rem;

  height: 2.5rem;

  border-radius: 0.75rem;

  background: rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(6px);

  border: 1px solid rgba(255, 255, 255, 0.25);

  color: #fff;

  font-size: 0.9rem;

  font-weight: 800;

  letter-spacing: -0.01em;

}

.aa-pc-head {

  position: absolute;

  left: 1.25rem;

  right: 1.25rem;

  bottom: 1.1rem;

  z-index: 1;

  display: flex;

  align-items: baseline;

  flex-wrap: wrap;

  gap: 0.5rem;

}

.aa-pc-title {

  font-size: 1.35rem;

  font-weight: 800;

  line-height: 1.2;

  letter-spacing: -0.01em;

  color: #fff;

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);

}

.aa-pc-code {

  padding: 0.2rem 0.55rem;

  border-radius: 0.45rem;

  background: var(--primary);

  color: #001018;

  font-size: 0.75rem;

  font-weight: 800;

}

.aa-pc-body {

  display: flex;

  flex-direction: column;

  flex: 1;

  padding: 1.35rem 1.35rem 1.1rem;

}

.aa-pc-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 0.45rem;

}

.aa-pc-meta li {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  padding: 0.32rem 0.65rem;

  border-radius: 999px;

  border: 1px solid var(--border);

  font-size: 0.76rem;

  font-weight: 600;

  color: var(--muted-foreground);

}

html.aa-dark .aa-pc-meta li { border-color: rgba(255, 255, 255, 0.12); }

.aa-pc-meta svg { width: 0.85rem; height: 0.85rem; color: var(--primary); }

.aa-pc-cta {

  margin-top: 1.1rem;

  width: 100%;

  justify-content: center;

  padding-top: 0.9rem;

  padding-bottom: 0.9rem;

  font-size: 0.95rem;

}

@media (max-width: 640px) {

  .aa-pc-grid { }

  .aa-pc-title { font-size: 1.2rem; }}

@media (max-width: 980px) {

  .aa-pc-grid { gap: 1.25rem; }}

@media (max-width: 640px) {

  .aa-pc-grid { }

  .aa-pc-title { font-size: 1.2rem; }}

/* ===== Most popular course cards (physics hub) ===== */

.aa-mp-grid {

  margin-top: 3rem;

  gap: 1.5rem;

}

.aa-mp {

  display: flex;

  flex-direction: column;

  padding: 1.6rem;

  border: 1px solid var(--border);

  border-radius: var(--radius-3xl);

  background: var(--card);

  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

}

html.aa-dark .aa-mp {

  background: #12151d;

  border-color: rgba(255, 255, 255, 0.09);

}

.aa-mp:hover {

  transform: translateY(-4px);

  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));

  box-shadow: 0 30px 55px -28px rgba(0, 0, 0, 0.6);

}

.aa-mp-head {

  display: flex;

  align-items: center;

  gap: 0.85rem;

  padding-bottom: 1.1rem;

  border-bottom: 1px solid var(--border);

}

html.aa-dark .aa-mp-head { border-bottom-color: rgba(255, 255, 255, 0.09); }

.aa-mp-logo {

  flex-shrink: 0;

  width: 4.5rem;

  display: grid;

  place-items: center start;

}

.aa-mp-logo img { max-width: 100%; max-height: 1.9rem; width: auto; }

.aa-mp-logo .aa-inv { filter: brightness(0); }

html.aa-dark .aa-mp-logo .aa-inv { filter: none; }

.aa-mp-logo .aa-dm { display: none; }

html.aa-dark .aa-mp-logo .aa-dm { display: block; }

html.aa-dark .aa-mp-logo .aa-lm { display: none; }

.aa-mp h3 {

  margin-top: 1.15rem;

  font-size: 1.2rem;

  font-weight: 700;

  line-height: 1.3;

  letter-spacing: -0.01em;

}

.aa-mp-code {

  display: inline-block;

  margin-left: 0.2rem;

  padding: 0.15rem 0.5rem;

  border-radius: 0.45rem;

  background: color-mix(in oklab, var(--primary) 15%, transparent);

  color: var(--primary);

  font-size: 0.75rem;

  font-weight: 700;

  vertical-align: middle;

}

html:not(.aa-dark) .aa-mp-code { color: #01698f; }

.aa-mp-meta {

  margin-top: 0.9rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.45rem;

}

.aa-mp-meta li {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  padding: 0.32rem 0.65rem;

  border-radius: 999px;

  border: 1px solid var(--border);

  font-size: 0.76rem;

  font-weight: 600;

  color: var(--muted-foreground);

}

html.aa-dark .aa-mp-meta li { border-color: rgba(255, 255, 255, 0.12); }

.aa-mp-meta svg { width: 0.85rem; height: 0.85rem; color: var(--primary); }

/* Tutor row: the headshot does the work the old text line was doing */

.aa-mp-tutor {

  margin-top: auto;

  padding-top: 1.4rem;

  display: flex;

  align-items: center;

  gap: 0.75rem;

}

.aa-mp-tutor img {

  width: 2.6rem;

  height: 2.6rem;

  border-radius: 50%;

  object-fit: cover;

  flex-shrink: 0;

  border: 2px solid color-mix(in oklab, var(--primary) 45%, transparent);

}

.aa-mp-tutor b {

  display: block;

  font-size: 0.9rem;

  font-weight: 700;

  line-height: 1.2;

}

.aa-mp-tutor span {

  display: block;

  margin-top: 0.1rem;

  font-size: 0.75rem;

  line-height: 1.35;

  color: var(--muted-foreground);

}

.aa-mp-cta {

  margin-top: 1.25rem;

  width: 100%;

  justify-content: center;

  padding-top: 0.85rem;

  padding-bottom: 0.85rem;

  font-size: 0.92rem;

}

/* Two up variant, used where a section lists only a pair of follow on courses */

.aa-mp-grid

@media (max-width: 980px) {

  .aa-mp-grid { }}

@media (max-width: 640px) {

  .aa-mp-grid { }}

/* Route switch: only one exam route is shown at a time, and it filters the

   papers table too. Everything stays in the DOM for search engines. */

.aa-cd-routes { margin-top: 2.5rem; }

.aa-rt-switch {

  display: inline-flex;

  padding: 0.3rem;

  border-radius: 999px;

  border: 1px solid var(--border);

  background: var(--card);

  gap: 0.25rem;

}

html.aa-dark .aa-rt-switch {

  border-color: rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.04);

}

.aa-rt-btn {

  appearance: none;

  border: 0;

  cursor: pointer;

  padding: 0.6rem 1.5rem;

  border-radius: 999px;

  background: transparent;

  color: var(--muted-foreground);

  font: inherit;

  font-size: 0.9rem;

  font-weight: 700;

  transition: background 0.2s ease, color 0.2s ease;

}

.aa-rt-btn:hover { color: var(--foreground); }

.aa-rt-btn.aa-is-on {

  background: var(--primary);

  color: var(--primary-foreground);

}

.aa-rt-panel {

  margin-top: 1.5rem;

  padding: 1.85rem;

  border: 1px solid var(--border);

  border-radius: var(--radius-3xl);

  background: var(--card);

}

html.aa-dark .aa-rt-panel {

  background: #12151d;

  border-color: rgba(255, 255, 255, 0.09);

}

.aa-rt-panel[hidden] { display: none; }

.aa-rt-head {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.75rem;

}

.aa-rt-head h3 { margin: 0; font-size: 1.35rem; font-weight: 700; }

.aa-rt-grades {

  padding: 0.25rem 0.7rem;

  border-radius: 999px;

  background: color-mix(in oklab, var(--primary) 14%, transparent);

  color: var(--primary);

  font-size: 0.76rem;

  font-weight: 700;

}

html:not(.aa-dark) .aa-rt-grades { color: #01698f; }

.aa-rt-lead {

  margin-top: 0.7rem;

  font-size: 0.95rem;

  line-height: 1.65;

  color: var(--muted-foreground);

  max-width: 62ch;

}

.aa-rt-panel .aa-cd-sub { margin-top: 1.5rem; }

/* Paper weights as bars rather than a bullet list */

.aa-rt-bars {

  margin-top: 0.9rem;

  display: flex;

  flex-direction: column;

  gap: 0.85rem;

}

.aa-rt-bars li {

  display: grid;

  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 3rem;

  align-items: center;

  gap: 1rem;

}

.aa-rb-name { font-size: 0.9rem; font-weight: 600; }

.aa-rb-track {

  height: 0.65rem;

  border-radius: 999px;

  background: color-mix(in oklab, var(--muted-foreground) 18%, transparent);

  overflow: hidden;

}

.aa-rb-fill {

  display: block;

  height: 100%;

  width: calc(var(--w) * 1%);

  border-radius: 999px;

  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #000));

  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);

}

.aa-rb-val {

  text-align: right;

  font-size: 0.85rem;

  font-weight: 800;

  color: var(--primary);

}

html:not(.aa-dark) .aa-rb-val { color: #01698f; }

.aa-cd-table tr[data-route][hidden] { display: none; }

@media (max-width: 620px) {

  .aa-rt-switch { display: flex; width: 100%; }

  .aa-rt-btn { flex: 1; padding: 0.6rem 0.5rem; }

  .aa-rt-panel { padding: 1.35rem; }

  .aa-rt-bars li {

    grid-template-columns: minmax(0, 1fr) 2.75rem;

    gap: 0.5rem 0.75rem;

  }

  .aa-rb-name { grid-column: 1 / -1; }}

/* ===== Syllabus index and paper cards ===== */

/* Syllabus as an editorial index: a big ghost numeral over the topic name,

   separated by hairlines rather than boxed cards. Reads as a contents page and

   stays shallow at 26 topics. */

.aa-syl-index {

  margin-top: 2.75rem;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0 2.5rem;

  list-style: none;

}

.aa-syl-index li {

  padding: 1.15rem 0;

  border-top: 1px solid var(--border);

  transition: border-color 0.2s ease;

}

html.aa-dark .aa-syl-index li { border-top-color: rgba(255, 255, 255, 0.1); }

.aa-syl-index li:hover { border-top-color: var(--primary); }

.aa-si-num {

  display: block;

  font-size: 1.5rem;

  font-weight: 800;

  line-height: 1;

  letter-spacing: -0.03em;

  color: color-mix(in oklab, var(--primary) 30%, transparent);

  transition: color 0.2s ease;

}

.aa-syl-index li:hover .aa-si-num { color: var(--primary); }

.aa-si-row {

  margin-top: 0.6rem;

  display: flex;

  align-items: center;

  gap: 0.6rem;

}

.aa-si-ic {

  flex-shrink: 0;

  display: grid;

  place-items: center;

  color: var(--primary);

}

.aa-si-ic svg { width: 1.15rem; height: 1.15rem; }

.aa-si-name {

  font-size: 0.95rem;

  font-weight: 600;

  line-height: 1.35;

}

/* Centre a short last row rather than leaving it hanging on the left.

   Three columns: one leftover sits in the middle column; two leftovers shift

   right by half a column plus half the gap. */

.aa-syl-index > li:last-child:nth-child(3n + 1) { grid-column: 2; }

.aa-syl-index > li:last-child:nth-child(3n + 2),

.aa-syl-index > li:nth-last-child(2):nth-child(3n + 1) {

  transform: translateX(calc(50% + 1.25rem));

}

@media (max-width: 900px) {

  .aa-syl-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.75rem; }

  /* two columns: reset the three column rules, then centre a lone last item */

  .aa-syl-index > li:last-child:nth-child(3n + 1) { grid-column: auto; }

  .aa-syl-index > li:last-child:nth-child(3n + 2),

  .aa-syl-index > li:nth-last-child(2):nth-child(3n + 1) { transform: none; }

  .aa-syl-index > li:last-child:nth-child(2n + 1) {

    grid-column: 1 / -1;

    width: calc(50% - 0.875rem);

    margin-inline: auto;

  }}

@media (max-width: 560px) {

  .aa-syl-index { grid-template-columns: minmax(0, 1fr); }

  .aa-si-num { font-size: 1.25rem; }

  .aa-syl-index > li:last-child:nth-child(2n + 1) { width: 100%; }}

/* Papers as cards rather than a three column table, so the route switch has

   something worth filtering and each paper reads at a glance. */

.aa-paper-grid {

  margin-top: 2rem;

  gap: 1rem;

}

.aa-paper-card {

  padding: 1.4rem 1.5rem;

  border: 1px solid var(--border);

  border-radius: var(--radius-2xl);

  background: var(--card);

  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

}

html.aa-dark .aa-paper-card {

  background: #12151d;

  border-color: rgba(255, 255, 255, 0.09);

}

.aa-paper-card:hover {

  transform: translateY(-3px);

  border-color: color-mix(in oklab, var(--primary) 42%, var(--border));

  box-shadow: 0 20px 38px -24px rgba(0, 0, 0, 0.55);

}

.aa-paper-card[hidden] { display: none; }

.aa-pk-no {

  font-size: 1.15rem;

  font-weight: 800;

  letter-spacing: -0.01em;

}

.aa-pk-kind {

  margin-top: 0.2rem;

  font-size: 0.85rem;

  color: var(--muted-foreground);

}

.aa-pk-stats {

  margin-top: 1.1rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}

.aa-pk-stats li {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  padding: 0.35rem 0.7rem;

  border-radius: 999px;

  border: 1px solid var(--border);

  font-size: 0.78rem;

  font-weight: 600;

  color: var(--muted-foreground);

}

html.aa-dark .aa-pk-stats li { border-color: rgba(255, 255, 255, 0.12); }

.aa-pk-stats svg { width: 0.9rem; height: 0.9rem; color: var(--primary); }

/* A lone third card would sit in the left column; centre it across the row

   instead, at the same width as a normal column. */

.aa-paper-grid > .aa-paper-card:last-child:nth-child(odd):not(:only-child) {

  grid-column: 1 / -1;

  width: calc(50% - 0.5rem);

  margin-inline: auto;

}

@media (max-width: 620px) {

  .aa-paper-grid > .aa-paper-card:last-child:nth-child(odd):not(:only-child) {

    width: 100%;

  }}

/* Weighting bar inside a paper card, for the untiered courses whose tables

   carry a weighting column. */

.aa-pk-weight {

  margin-top: 1.1rem;

  padding-top: 1rem;

  border-top: 1px solid var(--border);

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  align-items: center;

  gap: 0.5rem 0.75rem;

}

html.aa-dark .aa-pk-weight { border-top-color: rgba(255, 255, 255, 0.1); }

.aa-pk-wlab {

  grid-column: 1;

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--muted-foreground);

}

.aa-pk-wval {

  grid-column: 2;

  grid-row: 1;

  font-size: 0.85rem;

  font-weight: 800;

  color: var(--primary);

}

html:not(.aa-dark) .aa-pk-wval { color: #01698f; }

.aa-pk-wtrack {

  grid-column: 1 / -1;

  height: 0.5rem;

  border-radius: 999px;

  background: color-mix(in oklab, var(--muted-foreground) 18%, transparent);

  overflow: hidden;

}

.aa-pk-wfill {

  display: block;

  height: 100%;

  width: calc(var(--w) * 1%);

  border-radius: 999px;

  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #000));

  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);

}

@media (max-width: 620px) {

  .aa-paper-grid { }}

/* ===== Assessment route panel (linear / modular / staged) ===== */

.aa-route-note {

  margin-top: 2.5rem;

  padding: 1.6rem 1.75rem;

  border: 1px solid var(--border);

  border-radius: var(--radius-2xl);

  background: var(--card);

}

html.aa-dark .aa-route-note {

  background: #12151d;

  border-color: rgba(255, 255, 255, 0.09);

}

.aa-rn-top {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  flex-wrap: wrap;

}

.aa-rn-badge {

  flex-shrink: 0;

  padding: 0.3rem 0.8rem;

  border-radius: 999px;

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}

.aa-rn-badge.aa-linear {

  background: color-mix(in oklab, var(--primary) 16%, transparent);

  color: var(--primary);

}

html:not(.aa-dark) .aa-rn-badge.aa-linear { color: #01698f; }

.aa-rn-badge.aa-modular {

  background: color-mix(in oklab, var(--gold) 18%, transparent);

  color: var(--gold);

}

html:not(.aa-dark) .aa-rn-badge.aa-modular { color: #8a6400; }

.aa-rn-badge.aa-staged {

  background: color-mix(in oklab, var(--primary) 16%, transparent);

  color: var(--primary);

}

html:not(.aa-dark) .aa-rn-badge.aa-staged { color: #01698f; }

.aa-rn-text {

  flex: 1;

  min-width: 15rem;

  font-size: 0.95rem;

  line-height: 1.65;

  color: var(--muted-foreground);

  max-width: 70ch;

}

.aa-rn-facts {

  margin-top: 1.35rem;

  padding-top: 1.25rem;

  border-top: 1px solid var(--border);

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.85rem 2rem;

}

html.aa-dark .aa-rn-facts { border-top-color: rgba(255, 255, 255, 0.1); }

.aa-rn-facts li {

  display: flex;

  align-items: flex-start;

  gap: 0.6rem;

  font-size: 0.88rem;

  line-height: 1.45;

}

.aa-rn-facts svg {

  width: 1.15rem;

  height: 1.15rem;

  flex-shrink: 0;

  margin-top: 0.1rem;

  color: var(--primary);

}

@media (max-width: 720px) {

  .aa-rn-facts { grid-template-columns: minmax(0, 1fr); }

  .aa-route-note { padding: 1.35rem; }}

/* Bullet points inside a route panel, used where the route has no weighting

   bars of its own (the Edexcel linear / modular choice). */

.aa-rt-points {

  margin-top: 1.25rem;

  display: flex;

  flex-direction: column;

  gap: 0.55rem;

}

.aa-rt-points li {

  display: flex;

  align-items: flex-start;

  gap: 0.6rem;

  font-size: 0.9rem;

  line-height: 1.5;

  color: var(--muted-foreground);

}

.aa-rf-tick {

  flex-shrink: 0;

  color: var(--primary);

  font-weight: 700;

}

/* ============================================================================

   Bootstrap 3 compatibility layer.

   Bootstrap 3 predates flexbox: its columns are floats, and its gutters are

   horizontal only. Only the gutter gap needs correcting; the float grid itself

   is left to do the column work.

   ========================================================================== */

/* Vertical gutters. .row has -15px side margins and columns pad 15px left and

   right, with nothing vertical, so wrapped or stacked cards touch. Each column

   carries a bottom margin and the row cancels the last one, so desktop spacing

   is unchanged and stacked columns gain a real gap. The value per grid is the

   gap its CSS grid original used, rather than a flat 30px, which was noticeably

   too much once every card stacks on a phone. */

.aa-cards-3,

.aa-grid-2,

.aa-paper-grid {

  margin-bottom: -16px;

}

.aa-cards-3 > [class*="col-"],

.aa-grid-2 > [class*="col-"],

.aa-paper-grid > [class*="col-"] {

  margin-bottom: 16px;

}

.aa-benefit-grid,

.aa-modes,

.aa-wtw-grid {

  margin-bottom: -20px;

}

.aa-benefit-grid > [class*="col-"],

.aa-modes > [class*="col-"],

.aa-wtw-grid > [class*="col-"] {

  margin-bottom: 20px;

}

.aa-cd-cards,

.aa-lvl-grid,

.aa-mp-grid,

.aa-offices,

.aa-video-grid {

  margin-bottom: -24px;

}

.aa-cd-cards > [class*="col-"],

.aa-lvl-grid > [class*="col-"],

.aa-mp-grid > [class*="col-"],

.aa-offices > [class*="col-"],

.aa-video-grid > [class*="col-"] {

  margin-bottom: 24px;

}

.aa-board-grid,

.aa-pc-grid {

  margin-bottom: -28px;

}

.aa-board-grid > [class*="col-"],

.aa-pc-grid > [class*="col-"] {

  margin-bottom: 28px;

}

.aa-leadgen .row,

.aa-plans,

.aa-leadgen .row > [class*="col-"],

.aa-plans > [class*="col-"],

.aa-course-grid,

.aa-eval-grid {

  margin-bottom: -32px;

}

.aa-course-grid > [class*="col-"],

.aa-eval-grid > [class*="col-"] {

  margin-bottom: 32px;

}

.aa-contact-grid,

.aa-footer-grid,

.aa-proof-grid {

  margin-bottom: -40px;

}

.aa-contact-grid > [class*="col-"],

.aa-footer-grid > [class*="col-"],

.aa-proof-grid > [class*="col-"] {

  margin-bottom: 40px;

}

/* Three cards WRAP their row, unlike every other grid here where the row is the

   outermost element. The gutter pair (bottom margin on the columns, cancelled by

   a negative margin on the row) is designed for a row that sits directly in the

   page: inside a padded card it either shortens the card so content spills out,

   or leaves a band of dead space under the content. These cards need no gutter

   cancelling at all, only spacing between the columns once they stack. */

.aa-leadgen .row,

.aa-eval-panel .row,

.aa-contact-card .row {

  margin-bottom: 0;

}

.aa-leadgen .row > [class*="col-"],

.aa-eval-panel .row > [class*="col-"],

.aa-contact-card .row > [class*="col-"] {

  margin-bottom: 0;

}

@media (max-width: 991px) {

  .aa-leadgen .row > [class*="col-"]:not(:last-child),

  .aa-eval-panel .row > [class*="col-"]:not(:last-child),

  .aa-contact-card .row > [class*="col-"]:not(:last-child) {

    margin-bottom: 1.75rem;

  }

}

/* The 480px padding override for the lead gen card is declared earlier in this

   file than the base .aa-leadgen rule, so at equal specificity the base always

   won and the card kept 2rem of padding on phones. Restated here, after it. */

@media (max-width: 480px) {

  .aa-leadgen { padding: 1.5rem 1.25rem; }

}

/* Week to week cards: single column on small screens, matching the 640px

   breakpoint the original design used. Bootstrap has no 640px tier. */

@media (max-width: 639px) {

  .aa-wtw-grid > [class*="col-"] { width: 100%; }

}

/* Float grids stagger when cards in a line have different heights: the next card

   catches on the tallest instead of dropping to a new line, which is why a row of

   five can lay out 3, 1, 1 rather than 3, 2. Clearing the first column of each

   line fixes it. Keyed off the column class so it applies to every grid. */

@media (min-width: 1200px) {

  .row > [class*="col-lg-2"]:nth-child(6n + 1),

  .row > [class*="col-lg-3"]:nth-child(4n + 1),

  .row > [class*="col-lg-4"]:nth-child(3n + 1),

  .row > [class*="col-lg-6"]:nth-child(2n + 1) { clear: left; }

}

@media (min-width: 992px) and (max-width: 1199px) {

  .row > [class*="col-md-2"]:nth-child(6n + 1),

  .row > [class*="col-md-3"]:nth-child(4n + 1),

  .row > [class*="col-md-4"]:nth-child(3n + 1),

  .row > [class*="col-md-6"]:nth-child(2n + 1) { clear: left; }

}

@media (min-width: 992px) {

  .row > [class*="col-md-2"]:nth-child(6n + 1),

  .row > [class*="col-md-3"]:nth-child(4n + 1),

  .row > [class*="col-md-4"]:nth-child(3n + 1),

  .row > [class*="col-md-6"]:nth-child(2n + 1) { clear: left; }

}

@media (min-width: 768px) and (max-width: 991px) {

  .row > [class*="col-sm-3"]:nth-child(4n + 1),

  .row > [class*="col-sm-4"]:nth-child(3n + 1),

  .row > [class*="col-sm-6"]:nth-child(2n + 1) { clear: left; }

}

@media (max-width: 767px) {

  .row > [class*="col-xs-3"]:nth-child(4n + 1),

  .row > [class*="col-xs-4"]:nth-child(3n + 1),

  .row > [class*="col-xs-6"]:nth-child(2n + 1) { clear: left; }

}

/* ===== Pricing page on small screens ===== */

@media (max-width: 767px) {

  /* The fee table was 680px wide in a 334px viewport and scrolled sideways.

     Stack it instead: one card per subject, each price labelled with its

     package, so nothing is lost and nothing scrolls. */

  .aa-fees-table-wrap {
    overflow-x: visible;
    /* the cards carry their own background, so the outer frame is clutter */
    border: 0;
    border-radius: 0;
    background: none;
  }
  /* the desktop divider between rows would draw a line above every card */
  .aa-fees-table .aa-row + .aa-row { border-top: 0; }

  .aa-fees-table { min-width: 0; background: none; border: 0; }

  .aa-fees-table .aa-row.aa-head { display: none !important; }

  .aa-fees-table .aa-row {

    display: block !important;          /* beats the inline grid-template-columns */

    margin-bottom: 0.9rem;

    padding: 0;

    /* no outer border on a phone: the card background already separates
       one subject from the next */
    border: 0;

    border-radius: var(--radius-2xl);

    background: var(--card);

    overflow: hidden;

  }

  html.aa-dark .aa-fees-table .aa-row {

    background: #12151d;

    border-color: rgba(255, 255, 255, 0.09);

  }

  .aa-fees-table .aa-row.aa-alt { background: var(--card); }

  html.aa-dark .aa-fees-table .aa-row.aa-alt { background: #12151d; }

  /* subject name sits in a tinted header strip */

  .aa-fees-table .aa-row > .aa-cell:first-child {

    padding: 0.85rem 1rem;

    margin: 0;

    background: color-mix(in oklab, var(--primary) 8%, transparent);

    border-bottom: 1px solid var(--border);

  }

  html.aa-dark .aa-fees-table .aa-row > .aa-cell:first-child {

    border-bottom-color: rgba(255, 255, 255, 0.09);

  }

  /* one line per package: name on the left, price on the right */

  .aa-fees-table .aa-cell[data-label] {

    /* three columns, the last fixed, so the price column always ends at the
       same x and the figures line up down the card */

    display: grid;

    grid-template-columns: 1fr auto 3.4rem;

    align-items: baseline;

    gap: 0.75rem;

    padding: 0.6rem 1rem;

    text-align: left;

  }

  .aa-fees-table .aa-cell[data-label] + .aa-cell[data-label] {

    border-top: 1px solid var(--border);

  }

  html.aa-dark .aa-fees-table .aa-cell[data-label] + .aa-cell[data-label] {

    border-top-color: rgba(255, 255, 255, 0.07);

  }

  .aa-fees-table .aa-cell[data-label]::before {

    content: attr(data-label);

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--muted-foreground);

  }

  .aa-fees-table .aa-cell[data-label] .aa-p-val {

    font-size: 1rem;

    font-weight: 800;

    white-space: nowrap; text-align: right; }

  .aa-fees-table .aa-cell[data-label] .aa-p-per { display: block; width: 3.4rem; margin-left: 0; text-align: right; font-size: 0.72rem; color: var(--muted-foreground); }

  /* the recommended package keeps its accent */

  .aa-fees-table .aa-cell.aa-hl[data-label] {

    background: color-mix(in oklab, var(--primary) 7%, transparent);

  }

  .aa-fees-table .aa-cell.aa-hl[data-label]::before { color: var(--primary); }

    /* the column flex parent shrinks to content, so the cards need to be
     told to stretch or they sit at their intrinsic width */
  .aa-toggles { align-items: stretch; }
  .aa-toggle-row { width: 100%; }
/* Phones: the pill becomes a card of full width rows. A segmented control
     cannot hold labels this long side by side, and stacking pills inside a
     capsule looks broken, so the control changes shape instead. */
  .aa-toggle {
    width: 100%;
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: 1rem;
  }
  .aa-toggle > * {
    display: block;
    width: 100%;
    min-width: 0;
    text-align: left;
    border-radius: 0;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    line-height: 1.35;
  }
  .aa-toggle > * + * { border-top: 1px solid var(--border); }
  html.aa-dark .aa-toggle > * + * { border-top-color: rgba(255, 255, 255, 0.09); }
  .aa-toggle button[aria-pressed="true"] {
    background: var(--primary);
    color: var(--primary-foreground);
  }
  .aa-toggle-row { display: block; }
  .aa-toggle-row > .aa-toggle + .aa-toggle { margin-top: 0.6rem; }

  /* The elite tag is absolutely positioned top right, so on a narrow card the

     heading ran underneath it. Put it back in the flow above the heading. */

  .aa-included-card .aa-tag-elite {

    position: static;

    display: inline-block;

    margin-bottom: 0.7rem;

  }

  /* Enrol form fields were 52px tall, which makes the form very long on a

     phone. Tighten the padding. */

  .aa-enrol-form input[type="text"],

  .aa-enrol-form input[type="email"],

  .aa-enrol-form input[type="tel"],

  .aa-enrol-form select,

  .aa-enrol-form textarea {

    padding-top: 0.6rem;

    padding-bottom: 0.6rem;

    font-size: 0.95rem;

  }

}

/* Soft science backdrop behind the "not sure which course type" panel.

   It lives in a pseudo element rather than in the background shorthand so the

   panel's existing gradient stays exactly as it was underneath, and so the

   artwork can be dimmed on its own in dark mode, where a pale blue image would

   otherwise glare against a near black panel. z-index -1 inside an isolated

   stacking context puts it above that gradient but still behind the text. */

.aa-unsure {

  position: relative;

  isolation: isolate;

}

.aa-unsure::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  border-radius: inherit;

  background-image: url("../assets/unsure-bg-light.jpg");

  background-size: cover;

  background-position: center;

  opacity: 0.9;

}

/* Dark mode gets its own artwork rather than a filtered copy of the light

   one: deep navy with the same flask and molecule motifs, and the amber

   glow kept to the bottom right corner. Measured against the #f0f0f0 body

   text it sits at about 14:1 across the area the text occupies, so it

   needs no dimming at all. */

html.aa-dark .aa-unsure::before {

  opacity: 1;

  background-image: url("../assets/unsure-bg-dark.jpg");

}

@media (max-width: 640px) {

  /* The panel turns portrait on a phone, so cover shows only the middle 41%

     of a 4:3 image, which is the deliberately empty part. Shift the focal

     point left so the flask and molecule cluster stay in frame. */

  .aa-unsure::before { background-position: 18% 50%; }

}

/* Pricing controls: native dropdowns on phones ------------------------------
   The segmented pill only works while its options sit side by side, which a
   fifty character label never does on a small screen. Below 768px the pill is
   hidden and a native select takes over, one line whatever the label length. */
.aa-fee-select { display: none; }
@media (max-width: 767px) {
  .aa-toggle { display: none; }
  .aa-fee-select {
    display: block;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 0.8rem 2.25rem 0.8rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background-color: var(--card);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1.1rem;
    color: var(--foreground);
    /* a select clips its label without warning by default. These three make
       the browser cut it with an ellipsis instead, so a long option reads as
       shortened rather than as broken. */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
  }
  /* the hidden pill sits between the two selects, so the adjacent sibling
     combinator never matches: use the general sibling combinator instead */
  .aa-toggle-row .aa-fee-select ~ .aa-fee-select { margin-top: 0.6rem; }
  .aa-toggles { align-items: stretch; gap: 0.6rem; }
  .aa-toggle-row { display: block; width: 100%; }
}
html.aa-dark .aa-fee-select { background-color: #12151d; border-color: rgba(255, 255, 255, 0.12); }

/* The option list is drawn by the browser, so its width is not ours to set.
   Its colours are: without these the list falls back to the platform default,
   a white sheet with a pale blue highlight, which looks foreign on a dark page. */
.aa-fee-select option { padding: 0.5rem 0.75rem; }
.aa-fee-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Native option lists ------------------------------------------------------
   The rows in an open select are painted by the browser, not by us, and it
   falls back to a white sheet whenever the option has no background of its
   own. The country list inherited near white text from the field and landed
   white on white. Both colours are named here, for both themes, so the list is
   never left to the platform default. */
select option,
select optgroup {
  background-color: #ffffff;
  color: #232629;
}
select option:disabled {
  color: #8b9096;
}
html.aa-dark select option,
html.aa-dark select optgroup {
  background-color: #12151d;
  color: #f0f0f0;
}
html.aa-dark select option:disabled {
  color: #7e858f;
}

/* Long form legal pages ----------------------------------------------------
   .prose was written for three short sections and only styled h2 and links.
   The privacy policy needs sub headings, lists and a contents block, so those
   are defined here rather than left to the browser default, which sits at the
   wrong size and loses the column gap. */
.aa-prose h3 {
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
}
.aa-prose ul { list-style: disc; }
.aa-prose ol { list-style: decimal; }
.aa-prose ul,
.aa-prose ol {
  margin: 0;
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.aa-prose li { line-height: 1.65; }
.aa-prose li::marker { color: var(--primary); }
/* the analytics URL is quoted in full and has no break opportunity, so it ran
   82px past the screen on a phone. only links break mid string, not prose. */
.aa-prose { overflow-wrap: break-word; }
.aa-prose a { overflow-wrap: anywhere; }
.aa-prose b { color: var(--foreground); font-weight: 600; }
.aa-prose-meta {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  opacity: 0.85;
}
.aa-prose-toc {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
}
.aa-prose-toc p { margin-bottom: 0.75rem; color: var(--foreground); }
.aa-prose-toc ol { gap: 0.35rem; font-size: 0.93rem; }
html.aa-dark .aa-prose-toc {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.09);
}
.aa-prose h2 { scroll-margin-top: 6rem; }

/* Long form legal pages ----------------------------------------------------
   .prose was written for three short sections and only styled h2 and links.
   The privacy policy carries sub headings and lists, so those are defined here
   rather than left to the browser, which sits at the wrong size and loses the
   column gap. The global reset also strips list markers, hence list-style. */
.aa-prose h3 {
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
}
.aa-prose ul { list-style: disc; }
.aa-prose ul {
  margin: 0;
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.aa-prose li { line-height: 1.65; }
.aa-prose li::marker { color: var(--primary); }


/* The four figures wrap to different numbers of lines, so as floated columns
   they finished at different heights. One flex line makes every column as tall
   as the tallest and lets the card fill it, so the bottoms line up. */
.aa-story-stats { display: flex; flex-wrap: wrap; row-gap: 1rem; }
.aa-story-stats > [class*="col-"] { float: none; display: flex; }
.aa-story-stats > [class*="col-"] > .aa-stat-card { width: 100%; }


/* Course covers rows -------------------------------------------------------
   .aa-bm-name carries flex: 1, which stretched the title across the whole row
   and left the code pill stranded at the far edge: 842px of the 1030px row,
   82 percent, was empty. The row now carries the one line description that was
   already written for it and previously hidden until the row was opened, so
   the space is filled without new copy. Thumbnails were tried here and taken
   back out: at row height they were too small to read. */
.aa-bm-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.aa-bm-text .aa-bm-name { flex: none; }
.aa-bm-desc {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted-foreground);
}
@media (max-width: 767px) {
  .aa-bm-desc { font-size: 0.8rem; }
}
@media (max-width: 480px) {
  /* at this width the description would take four lines and push the row past
     the height of the panel, so the title and code carry the row alone */
  .aa-bm-desc { display: none; }
}

/* Mobile drawer: full screen ------------------------------------------------
   The drawer was 86vw capped at 24rem, so on a phone a strip of the page stayed
   visible down the left and the menu read as a panel sitting on top of the
   site. On a phone it now takes the whole screen. Above 768px it stays a side
   panel, which is the right shape once there is room beside it. */
@media (max-width: 767px) {
  .aa-drawer {
    width: 100%;
    max-width: none;
    border-left: 0;
  }
}

/* Books CTA pair -----------------------------------------------------------
   Both buttons already carried the same size class, but the filled one is
   172px wide because it also holds an arrow, against 150px for the outline
   one, so side by side the outline read as the smaller, weaker control. The
   pair is now a two column grid sized to its content, which makes both
   columns the width of the wider button. Below 480px they stack full width
   rather than squeezing two 172px buttons into 375px. */
.aa-cta-inline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  gap: 0.75rem 1rem;
  align-items: center;
}
@media (max-width: 480px) {
  .aa-cta-inline {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

/* Paper grid: no float clearing --------------------------------------------
   The route toggle hides the papers that do not apply with display:none, but
   the float clearing rules above count every child, hidden ones included. At
   768 to 991px the visible papers 1, 3 and 5 all matched :nth-child(2n + 1),
   so each was pushed onto its own line and the grid read as one card, one
   card, then a pair. CSS cannot count only the visible children, so this grid
   stops using floats: as a flex row the columns wrap two up on their own.

   gap is reset to 0. It was left over from when this was a CSS grid and sat
   inert under floats, but on a flex row it added 16px to a line that was
   already exactly two columns wide, so only one column fitted per line. The
   columns carry their own 15px gutters, which is where the spacing comes
   from. */
.aa-paper-grid { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; }
/* justify-content centres a lone card on the last line, which is what the old
   :last-child:nth-child(odd) rule wanted before the markup gained column
   wrappers and stopped matching. It is done this way rather than with
   nth-child because nth-child counts the hidden papers too, which is the bug
   this whole block exists to fix. Full lines are exactly two columns wide, so
   there is no free space on them and nothing shifts. */
.aa-paper-grid::before, .aa-paper-grid::after { display: none; }
.aa-paper-grid > [class*="col-"] { float: none; clear: none; }


/* once the topic is open the names are listed in full below, so the preview
   would only repeat itself */
.aa-syl-group[open] .aa-sg-meta { display: none; }
.aa-sg-count {
  flex: none;
  min-width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
}
.aa-syl-group > summary .aa-chev {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--muted-foreground);
  transition: transform 0.2s;
}
.aa-syl-group[open] > summary .aa-chev { transform: rotate(180deg); }
.aa-sg-list {
  margin: 0;
  padding: 0 1.35rem 1.1rem;
  list-style: none;
  display: grid;
  gap: 1.1rem;
}
.aa-sg-list > li { padding-top: 1.1rem; border-top: 1px solid var(--border); }
html.aa-dark .aa-sg-list > li { border-top-color: rgba(255, 255, 255, 0.07); }
.aa-sg-sub { font-weight: 650; color: var(--foreground); font-size: 0.97rem; }
.aa-sg-n {
  display: inline-block;
  min-width: 2.4rem;
  color: var(--primary);
  font-weight: 800;
}
.aa-sg-text {
  margin-top: 0.3rem;
  padding-left: 2.4rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
@media (min-width: 900px) {
  /* two columns of subtopics once a topic is open, so a long list such as
     1.1 to 1.8 does not run the page on for a screen and a half */
  .aa-sg-list { grid-template-columns: 1fr 1fr; column-gap: 2.25rem; }
}
@media (max-width: 560px) {
  .aa-sg-ic { width: 2.1rem; height: 2.1rem; }
  .aa-sg-name { font-size: 0.98rem; }
  .aa-sg-text { padding-left: 0; }
  .aa-sg-n { min-width: 0; margin-right: 0.5rem; }
}

/* Syllabus accordion -------------------------------------------------------
   Closed, a row shows the topic number and name and nothing else. The rows use
   the FAQ accordion styling and sit in the narrow container, 48rem rather than
   68rem, so the space after a short title reads as measure rather than as a
   gap. Widening the content to fill a 68rem row was tried and made a dense
   list nobody would read. */
.aa-syl-acc { margin-top: 2.5rem; }
.aa-syl-acc .aa-syl-item:first-child { border-top: 1px solid var(--border); }
.aa-sa-head { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.aa-sa-ic {
  /* the glyph alone, no tile behind it. The fixed width is kept so the titles
     still line up down the column whatever shape the icon is. */
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  color: var(--primary);
}
.aa-sa-ic svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 560px) {
  .aa-sa-ic { width: 1.35rem; }
  .aa-sa-ic svg { width: 1.1rem; height: 1.1rem; }
}
.aa-sa-n {
  /* fixed width, because Poppins has no tabular figures: 01 measured 13.4px
     against 17.3px for 04, which pushed every icon and title along by a
     different amount and left the column visibly ragged. */
  flex: none;
  width: 1.4rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--primary);
}
.aa-syl-item summary { font-size: 1.02rem; font-weight: 700; }
.aa-sa-count {
  flex: none;
  margin-left: auto;
  padding-right: 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted-foreground);
  white-space: nowrap;
}
@media (max-width: 560px) {
  /* the word would crowd the title on a phone, the figure alone still reads */
  .aa-sa-count span { display: none; }
  .aa-sa-count { padding-right: 0.6rem; }
}
.aa-sa-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.05rem;
}
.aa-sa-list > li { padding-left: 2.3rem; }
.aa-sa-list h4 {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.35;
  text-indent: -2.3rem;
}
.aa-sa-code {
  display: inline-block;
  width: 2.3rem;
  color: var(--primary);
  font-weight: 800;
  text-indent: 0;
}
.aa-sa-list p {
  margin-top: 0.3rem;
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--muted-foreground);
}
@media (max-width: 560px) {
  .aa-sa-list > li { padding-left: 0; }
  .aa-sa-list h4 { text-indent: 0; }
  .aa-sa-code { width: auto; margin-right: 0.5rem; }
}


/* About hero crop ----------------------------------------------------------
   Same .has-photo treatment as Contact, but this photograph has a subject in
   it rather than a wall, so the crop has to be aimed. A centre crop starts at
   y=218 of the 941px source and his head runs from y=175, which would take the
   top of it off; 30% starts at y=131. On phones the crop is horizontal
   instead, and he sits at 27% across, so 30% keeps him in the window. */
.aa-page-hero.aa-has-photo .aa-page-photo img[src*="about-hero"] {
  object-position: 30% 30%;
}


/* Comparison table, narrow screens -----------------------------------------
   Three columns stop working somewhere around 700px: at 560 the "Akbar
   Academy" cell was down to 92px of text and every verdict broke over three
   lines. Each row becomes its own card instead, with the feature name across
   the top and the two verdicts beneath it, each carrying the column heading
   the table header used to supply.

   Below 480 two verdicts side by side leave 98px of text, which is no better
   than the table was, so they stack. */
@media (max-width: 767px) {
  .aa-compare {
    border: 0;
    background: none;
    border-radius: 0;
    overflow: visible;
    display: grid;
    gap: 0.75rem;
  }
  .aa-compare-head { display: none; }
  .aa-compare-row {
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--card);
    overflow: hidden;
  }
  html.aa-dark .aa-compare-row {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .aa-compare-row .aa-label {
    grid-column: 1 / -1;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  html.aa-dark .aa-compare-row .aa-label { border-bottom-color: rgba(255, 255, 255, 0.09); }
  /* the verdict text is a bare text node, so auto-placement puts the heading
     across the top, the icon in column one and the text in column two */
  .aa-compare-row .aa-cell-us,
  .aa-compare-row .aa-cell-them {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.55rem;
    align-content: start;
    padding: 0.85rem 1rem;
    line-height: 1.45;
  }
  .aa-compare-row .aa-cell-us::before,
  .aa-compare-row .aa-cell-them::before {
    grid-column: 1 / -1;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .aa-compare-row .aa-cell-us::before { content: "Akbar Academy"; color: var(--primary); }
  .aa-compare-row .aa-cell-them::before { content: "Typical tuition"; color: var(--muted-foreground); }
  .aa-compare-row .aa-cell-them { border-left: 1px solid var(--border); }
  html.aa-dark .aa-compare-row .aa-cell-them { border-left-color: rgba(255, 255, 255, 0.09); }
  .aa-compare .aa-tick,
  .aa-compare .aa-cross { margin-top: 0.1rem; }
}
@media (max-width: 479px) {
  .aa-compare-row { grid-template-columns: 1fr; }
  .aa-compare-row .aa-cell-them {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  html.aa-dark .aa-compare-row .aa-cell-them {
    border-left: 0;
    border-top-color: rgba(255, 255, 255, 0.09);
  }
}

/* Our founder --------------------------------------------------------------
   The card is ~1280px inside and the content amounts to roughly 500px of mass,
   so no arrangement of full-width rows works: three figures spread across
   1280px, a quotation panel taller than its own text and a credentials row
   with one item and nothing beside it were all the same problem.

   A 20rem rail carries the identity and the figures, ruled off from a body
   holding the biography. Nothing spans the whole card any more, so nothing has
   to be stretched to look deliberate. */
.aa-founder {
  margin-top: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  /* between the page and pure white: #f4f5f7 against #ffffff was too stark,
     transparent was too flat. This lifts it just off the page. */
  background: color-mix(in srgb, var(--card) 55%, var(--background));
  padding: 2rem;
}
/* Bootstrap columns, made one flex line so the rail and the body match height
   and the divider between them runs the whole way down */
@media (min-width: 992px) {
  .aa-fd-grid { display: flex; flex-wrap: wrap; }
  .aa-fd-grid > [class*="col-"] { float: none; display: flex; }
  .aa-fd-grid > [class*="col-"] > div { width: 100%; }
}
@media (max-width: 991px) {
  /* stacked, so the rail's role line would otherwise touch the first
     paragraph of the body */
  .aa-fd-grid > [class*="col-"] + [class*="col-"] { margin-top: 1.5rem; }
}
html.aa-dark .aa-founder {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.09);
}
@media (min-width: 900px) {
  .aa-founder { padding: 1.5rem; }
  /* the rail holds a portrait, a name and a role, so it is always shorter than
     three paragraphs. Centring that block in the panel is better than letting
     it sit at the top of an empty one. */
  .aa-fd-rail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .aa-fd-body {
    padding-left: 3rem;
    /* centred against the rail, which centres its own content too */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .aa-founder { padding: 1.5rem; }
  html.aa-dark .aa-fd-body { border-left-color: rgba(255, 255, 255, 0.09); }
}
.aa-fd-avatar {
  display: block;
  margin-inline: auto;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
}
.aa-fd-rail { text-align: center; }
.aa-fd-rail h3 { margin-top: 1rem; font-size: 1.45rem; font-weight: 800; color: var(--foreground); }
.aa-fd-role { margin-top: 0.2rem; font-weight: 600; color: var(--primary); font-size: 0.92rem; line-height: 1.5; }
.aa-fd-stats {
  /* a strip across the foot of the card rather than a column in the rail: with
     the figures moved out, the rail only holds a portrait, a name and a role */
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  /* Bootstrap columns; one flex line so the four figures share a baseline and
     wrapped pairs get a row gap the float gutters do not provide */
  display: flex;
  flex-wrap: wrap;
  row-gap: 1.2rem;
}
.aa-fd-stats > [class*="col-"] { float: none; }


html.aa-dark .aa-fd-stats { border-top-color: rgba(255, 255, 255, 0.09); }
.aa-fd-stat {
  /* stacked: side by side the widest pair needs about 225px against a 236px
     column, so "Curriculum Expert" wrapped. Stacked, the column only has to
     hold the wider of the two. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.aa-fd-n {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}
.aa-fd-l { font-size: 0.85rem; line-height: 1.35; color: var(--muted-foreground); }
/* Below 900 the card drops to one column and narrows from 873px inside to
   623, which left 2px between "Students taught" and "96%" at 750. The strip
   turns through ninety degrees from here down: a bordered box, number on one
   side, label on the other, ruled between. */
@media (max-width: 899px) {
  /* no box: these sit inside the founder card, which is already a bordered
     panel, so the frame was a box drawn inside a box */
  .aa-fd-stats {
    row-gap: 0.9rem;
    padding-top: 1.4rem;
  }
  .aa-fd-stat {
    /* one line per figure, but not space-between: that pushed each label as
       far right as it would go, so their left edges landed wherever the number
       ended, which is four different places for "20+" against "UK & Int.".
       A fixed column for the number starts every label at the same x. */
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0;
    border: 0;
  }
  .aa-fd-n {
    flex: none;
    width: 7.5rem;
    font-size: 1.5rem;
  }
  .aa-fd-l { text-align: left; }
}
@media (max-width: 560px) {
  .aa-founder { padding: 1.5rem 1.25rem; }
  .aa-fd-avatar { width: 4rem; height: 4rem; }
  .aa-fd-rail h3 { font-size: 1.3rem; }
}

/* the biography, three paragraphs at about 75 characters a line. Prose is what
   fills this column: it needs no second track, and it runs close enough to the
   rail's height that the card no longer carries a void at the bottom. */
.aa-fd-body p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.aa-fd-body p + p { margin-top: 1.1rem; }

/* Founder rail --------------------------------------------------------------
   The tint went in when the rail carried the figures and needed to read as a
   block. They have since moved to the foot of the card, so it was a coloured
   box behind a portrait and a name. A hairline does the same job. */
@media (min-width: 900px) {
  .aa-fd-rail { padding-right: 2.5rem; border-right: 1px solid var(--border); }
  html.aa-dark .aa-fd-rail { border-right-color: rgba(255, 255, 255, 0.09); }
}


/* Story panel --------------------------------------------------------------
   The same illustrated background the Pricing "Not sure which course type"
   panel uses. It is drawn for a rounded panel rather than a full bleed strip,
   so this section is a panel in the container, not a band across the page.

   It also ships a light version and a dark version instead of one image under
   a scrim, so the section follows the theme and the copy stays on
   var(--foreground) rather than being forced to white in both. */
.aa-story-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 2.5rem 1.5rem;
}
html.aa-dark .aa-story-panel { border-color: rgba(255, 255, 255, 0.09); }
@media (min-width: 768px) { .aa-story-panel { padding: 3.5rem 3rem; } }
.aa-story-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* a lightened copy of the Pricing artwork. The original strokes run down
     to luminance 48 against a 236 field, and the graph curve cut through
     the lead paragraph. Pricing still uses the original file. */
  background-image: url("../assets/story-bg-light.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}
html.aa-dark .aa-story-panel::before {
  background-image: url("../assets/unsure-bg-dark.jpg");
  opacity: 1;
}
/* the light artwork runs a graph curve through the middle, which crossed the
   lead paragraph. A soft wash of the card colour sits over the artwork behind
   the heading block only, so the motifs at the edges are untouched. It reads
   as a lift in light mode and as a darkening in dark mode, because var(--card)
   is on opposite sides of the artwork in each. */
.aa-story-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 92% 52% at 50% 18%,
    color-mix(in srgb, var(--card) 40%, transparent),
    transparent 72%
  );
}
/* dark mode still needs the full wash: its artwork was not lightened */
html.aa-dark .aa-story-panel::after {
  background: radial-gradient(
    ellipse 92% 52% at 50% 18%,
    color-mix(in srgb, var(--card) 84%, transparent),
    transparent 72%
  );
}
@media (max-width: 640px) {
  /* the panel is portrait on a phone, so cover shows only the middle of a 4:3
     image, which is the deliberately empty part. Shift left to keep the flask
     and the molecule cluster in frame. */
  .aa-story-panel::before { background-position: 18% 50%; }
}

/* Chapters on glass --------------------------------------------------------
   A bare track of dots over line art would not have been readable. Each
   chapter is a frosted card instead: translucent and blurred, with its number
   carried large and faded in the corner. The artwork reads through without
   competing with the text. */
/* Back to a two column grid. There are four chapters again, and a centred
   wrap put three on the top row and stranded the fourth in the middle of the
   second. Two by two divides evenly, and the grid gives every card the height
   of the tallest in its row for free. */
.aa-chapters { margin-top: 2.75rem; display: flex; flex-wrap: wrap; row-gap: 1.25rem; }
.aa-chapters > [class*="col-"] { float: none; display: flex; }
.aa-chapters > [class*="col-"] > .aa-ch-card { width: 100%; }
.aa-ch-card {
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html.aa-dark .aa-ch-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(9, 14, 24, 0.55);
}
.aa-ch-n {
  display: block;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--primary) 45%, transparent);
}
.aa-ch-when {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.aa-ch-card h3 {
  margin-top: 0.3rem;
  font-size: 1.05rem;
  /* 700, matching the learning loop's step headings in the section above */
  font-weight: 700;
  color: var(--foreground);
}
.aa-ch-card p {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
/* full white on the dark card. Not in light mode: the card there is
   rgba(255,255,255,0.72), so #fff would be white on near white. */
html.aa-dark .aa-ch-card p { color: #fff; }
html.aa-dark .aa-ch-card h3 { color: #fff; }

/* Teacher cards -----------------------------------------------------------
   Small circular portraits, which is how they read best. What was actually
   broken about the original cards was the layout around them: five items in a
   three column grid left a hole, and a double width founder card only moved
   it. That is fixed by the centred wrap below, independent of how the
   portrait is shown.

   Five is prime, so the last row never fills. A centred flex wrap puts the
   short row in the middle rather than leaving a hole against the right edge:
   five across above 1200, three then two below it, two then two then one on a
   tablet. */
/* Five cards in a three wide row, so the last row carries two. Centring the
   line puts those two in the middle instead of leaving a hole on the right,
   and the columns keep their Bootstrap widths. */
.aa-tc-grid {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 1.25rem;
}
.aa-tc-grid > [class*="col-"] { float: none; display: flex; }
.aa-tc-grid > [class*="col-"] > .aa-tc { width: 100%; }
/* The 15rem cap keeps a card from stretching across a wide row. On a phone
   there is only one card per row and the cap left it at 240px in a 335px
   column, floating with a gutter each side while every other box on the page
   runs the full width. So the cap starts at 480, where the two column row
   begins. */
.aa-tc {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 1.5rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html.aa-dark .aa-tc {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.09);
}
.aa-tc:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: reduce) { .aa-tc:hover { transform: none; } }
.aa-tc-avatar {
  display: block;
  margin-inline: auto;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  object-fit: cover;
  /* the source is a square headshot, so a circle needs no repositioning */
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px color-mix(in srgb, var(--primary) 50%, transparent);
}
html.aa-dark .aa-tc-avatar { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in srgb, var(--primary) 50%, transparent); }
.aa-tc-subject {
  margin-top: 1.1rem;
  align-self: center;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--gold) 12%, transparent);
  padding: 0.24rem 0.7rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.aa-tc h3 { margin-top: 0.55rem; font-size: 1.02rem; font-weight: 800; color: var(--foreground); }
.aa-tc ul {
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--border);
  display: grid;
  align-content: start;
  gap: 0.55rem;
  /* the five sets of credentials genuinely run 4 to 6 lines and there is no
     further qualification on file for two of these teachers, so rather than
     invent any the list takes the rest of the card. Cards in a row are equal
     height, so every text area ends up the same size. */
  flex: 1;
  /* the items keep their own alignment: a three line credential centred
     behind a leading tick does not read */
  text-align: left;
}
html.aa-dark .aa-tc ul { border-top-color: rgba(255, 255, 255, 0.09); }
.aa-tc li { display: flex; align-items: flex-start; gap: 0.55rem; }
.aa-tc svg { flex: none; margin-top: 2px; width: 0.95rem; height: 0.95rem; color: var(--gold); }
.aa-tc li span { font-size: 0.79rem; line-height: 1.6; color: var(--muted-foreground); }

/* Pricing hero crop --------------------------------------------------------
   At 1440 the hero is 3.3:1 against a 1.78:1 photograph, so the crop is
   vertical and the centre is right. Below about 626px the box is taller than
   the photograph's aspect and the crop turns horizontal: centred, it showed
   source x 334 to 1337 of 1672 and cut the boy out entirely, since the pair
   sit at x 30 to 700. Anchored left it shows x 0 to 1003 and holds both.
   Above that width there is no horizontal overflow, so this does nothing. */
.aa-page-hero.aa-has-photo .aa-page-photo img[src*="pricing-hero"] {
  object-position: 0% center;
}

/* Pricing panel buttons ----------------------------------------------------
   .aa-btn-outline sets its background to var(--background), which is near
   black in dark mode, so on the artwork the WhatsApp button read as a hole
   punched in the panel, the same fault the callout above it had. On this panel
   it is a translucent white button instead, and a white one in light mode.

   Both buttons also carry a shared minimum width: "Book your evaluation"
   measured 208px against 173 for "Ask on WhatsApp". */
.aa-unsure .aa-cta-row .aa-btn { min-width: 14rem; }
.aa-unsure .aa-btn-outline {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
}
.aa-unsure .aa-btn-outline:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
html.aa-dark .aa-unsure .aa-btn-outline {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}
html.aa-dark .aa-unsure .aa-btn-outline:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.36);
}

/* 360 teaching model -------------------------------------------------------
   The live site carries this as one raster, so the six items exist only as
   pixels and the page text has none of them. As markup they reflow, follow the
   theme and can be read.

   The wheel's two halves become two columns either side of a hub. Its left and
   right placement carries no information, so the numbers run in reading order
   here rather than the wheel's clockwise 06, 05, 04 upwards. */
.aa-t360 { margin-top: 3rem; display: grid; gap: 2rem; }
@media (min-width: 1000px) {
  /* start, not center: the two lists are different heights, so centring made
     one of them float against the other. The hub centres on its own. */
  .aa-t360 { grid-template-columns: 1fr auto 1fr; gap: 2.75rem; align-items: start; }
  .aa-t360-hub { align-self: center; }
}
.aa-t360-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.aa-t360 ol { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.aa-t360 li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
}
html.aa-dark .aa-t360 li {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.09);
}
.aa-t360-n {
  flex: none;
  /* fixed, because Poppins has no tabular figures and 01 is narrower than 06 */
  width: 1.9rem;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--primary);
}
.aa-t360 li p { font-size: 0.9rem; line-height: 1.6; color: var(--muted-foreground); }
.aa-t360-hub {
  /* above the columns on a phone, between them from 1000 */
  order: -1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
@media (min-width: 1000px) { .aa-t360-hub { order: 0; } }
.aa-t360-hub span {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
}


/* 360 register button ------------------------------------------------------
   Outside both the wheel and the list, so it follows whichever of the two is
   showing at that width. */
.aa-t360-cta { margin-top: 2.5rem; display: flex; justify-content: center; }
.aa-t360-cta .aa-btn { min-width: 18rem; }
/* 18rem is 288px against a 320px card at 375, so it ran almost edge to edge.
   Below 560 it hugs its label instead and loses the lg height. */
@media (max-width: 559px) {
  .aa-t360-cta .aa-btn {
    min-width: 0;
    height: 2.25rem;
    padding-inline: 1.15rem;
    font-size: 0.85rem;
  }
  .aa-t360-cta { margin-top: 2rem; }
}

/* 360 wheel ----------------------------------------------------------------
   Six petals separated by an 8 degree gap with every corner rounded, so each
   reads as its own tile rather than a slice of a pie. The numbers sit on
   badges straddling the outer edge, which frees the whole petal for text, and
   the hub floats clear with a ring of page around it.

   Segment text colour is picked by contrast: the source graphic puts white on
   every wedge, which measures 2.06:1 on the orange and 2.54:1 on the green, so
   those two carry a dark tone and two other fills were deepened until white
   cleared 4.5. Every petal now sits between 5.5 and 8.9 to 1.

   Below 900 the wheel hides and the list underneath takes over, since 14.5px
   type inside a petal is not readable at phone widths. */
.aa-wheel-wrap { margin-top: 2rem; display: none; }
/* The wheel shows at every width now. Above 760 it carries its own labels and
   the list is hidden; below, it is the picture and the list is the words. */
.aa-wheel-wrap { display: block; }
@media (min-width: 760px) {
  .aa-t360 { display: none; }
}
/* Below 760 the 14 unit petal text lands under 8px, and the badge numbers and
   focus labels with it, so those three are hidden rather than shown at a size
   nobody can read. The colours, badges, band and hub stay. */
@media (max-width: 759px) {
  .aa-wheel-t,
  .aa-wheel-n,
  .aa-wheel-side { display: none; }
  /* 48 units, so it lands near 19px at a 375 viewport: the badge numbers are
     17 units and would land at 6.6px, which is why they are hidden instead */
  /* scoped to .aa-wheel so it beats the base display:none, which sits later
     in this sheet than this media query does */
  .aa-wheel .aa-wheel-bignum {
    display: block;
    font-size: 48px;
    font-weight: 800;
  }
  .aa-wheel { max-width: 22rem; }
  .aa-t360 { margin-top: 2rem; }
  /* the list carries its own 360 badge, which duplicates the wheel hub now
     that the wheel shows here too */
  .aa-t360-hub { display: none; }
}
.aa-wheel {
  display: block;
  width: 100%;
  /* back to roughly where it was. The tradeoff is real: at this size the 14
     unit petal text lands near 10px on screen rather than 15. */
  max-width: 38rem;
  height: auto;
  margin-inline: auto;
  /* the badges are stroked in the page colour so they punch out of the petal */
  --aa-wheel-page: var(--background);
  /* the theme's light blue, as asked. The artwork on it is white, which is how
     the file is drawn. */
  --aa-wheel-hub: var(--primary);
}
/* the scale is about the wheel's centre, not each segment's own: about its
   own, a petal would swell in place and overlap its neighbours. About the
   centre it grows outward along its own radius. The easing overshoots a
   little, so a segment settles rather than sliding to a stop. */
.aa-wheel-seg {
  transform-box: view-box;
  transform-origin: 430px 410px;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.34s ease;
  cursor: pointer;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.26));
}
.aa-wheel-seg:hover {
  transform: scale(1.055);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.42));
}
/* the petal fill lifts, and the badge comes forward ahead of it: this scale is
   about the badge's own centre, inside a group that is already scaling, so the
   two compound to about 1.18 */
.aa-wheel-seg > path,
.aa-wheel-seg > circle,
.aa-wheel-seg > .aa-wheel-t {
  transition: filter 0.34s ease, transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.34s ease;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.aa-wheel-seg:hover > path { filter: brightness(1.07) saturate(1.05); }
.aa-wheel-seg:hover > circle { transform: scale(1.12); }
/* a black shadow does nothing against a near black page, so it becomes a glow */
html.aa-dark .aa-wheel-seg { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); }
html.aa-dark .aa-wheel-seg:hover {
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--primary) 55%, transparent));
}

/* the segments arrive one at a time, hooked to the .aa-in class the reveal
   observer already sets. backwards, not forwards: it holds the start state
   through the delay but leaves the end state to normal CSS, so hover still
   owns transform afterwards. */
@keyframes aa-seg-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: none; }
}
.aa-wheel-wrap.aa-in .aa-wheel-seg {
  animation: aa-seg-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.aa-wheel-wrap.aa-in .aa-wheel-seg:nth-of-type(1) { animation-delay: 0.05s; }
.aa-wheel-wrap.aa-in .aa-wheel-seg:nth-of-type(2) { animation-delay: 0.12s; }
.aa-wheel-wrap.aa-in .aa-wheel-seg:nth-of-type(3) { animation-delay: 0.19s; }
.aa-wheel-wrap.aa-in .aa-wheel-seg:nth-of-type(4) { animation-delay: 0.26s; }
.aa-wheel-wrap.aa-in .aa-wheel-seg:nth-of-type(5) { animation-delay: 0.33s; }
.aa-wheel-wrap.aa-in .aa-wheel-seg:nth-of-type(6) { animation-delay: 0.40s; }

/* second beat: the hub, the artwork, the band and the labels land after the
   petals have, so the graphic assembles rather than appearing all at once */
@keyframes aa-hub-in {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: none; }
}
@keyframes aa-ring-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.aa-wheel-wrap.aa-in .aa-wheel-hub,
.aa-wheel-wrap.aa-in .aa-wheel-art {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: aa-hub-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.48s backwards;
}
.aa-wheel-wrap.aa-in .aa-wheel-ring,
.aa-wheel-wrap.aa-in .aa-wheel-side {
  animation: aa-ring-in 0.7s ease 0.72s backwards;
}

@media (prefers-reduced-motion: reduce) {
  .aa-wheel-seg,
  .aa-wheel-seg > path,
  .aa-wheel-seg > circle,
  .aa-wheel-seg > .aa-wheel-t { transition: none; }
  .aa-wheel-wrap.aa-in .aa-wheel-seg,
  .aa-wheel-wrap.aa-in .aa-wheel-hub,
  .aa-wheel-wrap.aa-in .aa-wheel-art,
  .aa-wheel-wrap.aa-in .aa-wheel-ring,
  .aa-wheel-wrap.aa-in .aa-wheel-side { animation: none; }
}
/* 14px, not 15: at 15 the longest line came within 13px of the petal edge,
   which reads as clipped even though the glyphs are geometrically inside. */
.aa-wheel-t {
  font-size: 14px;
  font-weight: 600;
}
.aa-wheel-n { font-size: 17px; font-weight: 800; }
/* only for the phone layout, where the labels are hidden and the petals would
   otherwise be empty */
.aa-wheel-bignum { display: none; }
/* the supplied file, unmodified. It is white art on black, so screen blending
   drops the black onto the blue disc and keeps the white: no tracing, no
   pixel editing, the file itself. */
.aa-wheel-art {
  pointer-events: none;
  mix-blend-mode: screen;
}
/* on the band: no letter-spacing here, because textLength does the spreading
   and the two would fight */
.aa-wheel-side {
  font-size: 19px;
  font-weight: 800;
  fill: #ffffff;
}
/* a band, not a line: stroked at 48 it runs from r=362 to r=410, so the text
   sitting on the centreline is inside it */
.aa-wheel-ring {
  fill: none;
  stroke: var(--primary);
  stroke-width: 48;
}

/* Our mission -------------------------------------------------------------
   Its own section rather than a fifth box under the four chapters, where it
   read as a footnote to the history in the same frosted material.

   Two columns that do different jobs: the statement is set as an ordinary
   section head with its paragraphs under it, and the list is a card, which is
   what lets it carry the call to action instead of leaving the button loose
   underneath. Stacks below 900. */
@media (min-width: 992px) {
  .aa-mission { display: flex; flex-wrap: wrap; align-items: center; }
  .aa-mission > [class*="col-"] { float: none; }
}
@media (max-width: 991px) {
  .aa-mission > [class*="col-"] + [class*="col-"] { margin-top: 2rem; }
}
.aa-mission-text .aa-section-title { margin-top: 0.75rem; }
/* the eyebrow is a p too, and an unqualified .aa-mission-text p outranked
   .aa-eyebrow, which is what turned OUR MISSION grey when every other eyebrow
   on the site is gold */
.aa-mission-text > p:not(.aa-eyebrow) {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}
.aa-mission-text .aa-section-title + p { margin-top: 1.25rem; }

.aa-mission-gets {
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  background: color-mix(in srgb, var(--card) 55%, var(--background));
  padding: 2rem 1.75rem;
}
.aa-mg-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.aa-mission-gets ul {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}
.aa-mission-gets li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--foreground);
}
.aa-mission-gets svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  color: var(--gold);
}
/* the supplied call to action, sitting under the list it describes */
.aa-mission-gets .aa-btn {
  margin-top: 1.75rem;
  width: 100%;
}
@media (max-width: 559px) {
  .aa-mission-gets { padding: 1.6rem 1.25rem; }
  .aa-mission-gets .aa-btn {
    height: auto;
    min-height: 2.4rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
}


/* ==========================================================================
   RESOURCES PAGE
   Both sections follow the live site: three book cards, then nine resource
   cards three across, each with its title across the top, the paragraph beside
   its mockup, and two actions along the foot.
   ========================================================================== */

/* a quiet band, so the free library reads as a different part of the page */
.aa-surface-muted { background: color-mix(in srgb, var(--muted) 45%, var(--background)); }
html.aa-dark .aa-surface-muted { background: rgba(255, 255, 255, 0.018); }

/* --- The books ----------------------------------------------------------- */
.aa-bk-grid { margin-top: 2.5rem; display: flex; flex-wrap: wrap; row-gap: 1.5rem; }
.aa-bk-grid > [class*="col-"] { float: none; display: flex; }
.aa-bk-grid > [class*="col-"] > .aa-bk-card { width: 100%; }
.aa-bk-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.5rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
}
html.aa-dark .aa-bk-card {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
}
/* the marks are white artwork on transparent, so on a light card they need
   inverting back to dark; aa-inv already does that job elsewhere */
.aa-bk-mark { display: block; height: 2.5rem; }
.aa-bk-mark img { display: block; height: 100%; width: auto; object-fit: contain; }
.aa-bk-board {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.aa-bk-card h3 {
  margin-top: 0.15rem;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--foreground);
}
.aa-bk-stack {
  margin-top: 1.25rem;
  width: 100%;
  max-width: 17rem;
  height: auto;
}
.aa-bk-desc {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
/* margin-top auto pins the buttons to the foot, so the three cards agree even
   though one paragraph runs a line longer */
.aa-bk-acts {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  gap: 0.6rem;
}

/* the menu links straight at a card, and the header is sticky, so without this
   the target lands underneath it */
.aa-fr-card, #res-books { scroll-margin-top: 6.5rem; }

/* --- The nine resources -------------------------------------------------- */
/* Bootstrap owns the columns; this only supplies what the float grid cannot.
   One flex line makes every column as tall as the tallest so the cards agree,
   and row-gap does the vertical spacing the gutters do not. Same helper as
   .aa-story-stats and .aa-footer-grid elsewhere in the sheet. */
/* eleven cards in a three wide row, so the last row carries two. Centring
   the line puts those two in the middle instead of leaving a hole on the
   right; full rows sum to 100% so they are unaffected. */
.aa-fr-grid {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 1.5rem;
}
.aa-fr-grid > [class*="col-"] { float: none; display: flex; }
.aa-fr-grid > [class*="col-"] > .aa-fr-card { width: 100%; }

/* A tile is three things: the picture, the title, the two buttons. There is no
   description and nothing to open, so the picture is given the whole top of the
   tile as its own panel rather than sitting in the middle of a padded box. */
.aa-fr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: var(--card);
  transition: border-color 0.2s ease, transform 0.2s ease;
  /* the Ace My Exams ribbon is a bar rotated across the corner and deliberately
     longer than the corner it crosses, so the tile has to trim its ends */
  overflow: hidden;
}
html.aa-dark .aa-fr-card {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
}
.aa-fr-card:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .aa-fr-card:hover { transform: none; }
}

.aa-fr-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.3rem 1.3rem;
}
.aa-fr-acts {
  margin-top: auto;
  padding-top: 1.05rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
/* squarer and a little taller than the site's small button, which reads as a
   pill at this size and looked wrong sitting under a screenshot */
.aa-fr-acts .aa-btn {
  flex: 1 1 7rem;
  height: 2.25rem;
  padding-inline: 1.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0.45rem;
}

/* One resource to a row. From tablet up the tile turns on its side: the picture
   takes a column on the left and the words sit beside it as a caption rather
   than stacking under it as a slab. Across a full row the caption column is
   wide enough that even the longest description runs a few lines, which is the
   whole point, no wording had to be cut to get there. Below this width the tile
   stacks again, picture on top, which is the right shape for a phone. */
@media (min-width: 768px) {
  .aa-fr-card { flex-direction: row; align-items: stretch; }
  /* The tile is as tall as its picture, which is taller than the few lines of
     text beside it. The words take the middle of that space and the buttons
     stay on the floor of the tile. The auto margins above the title and below
     the description are what centres the pair of them between the top of the
     tile and the buttons; justify-content cannot do it, because the buttons
     have to be excluded from whatever gets centred. */
  .aa-fr-body { padding: 1.4rem 1.6rem; }
  /* the actions no longer need the full width of a row to themselves */
  .aa-fr-acts .aa-btn { flex: 0 1 9.5rem; }
}

/* the two Ace My Exams resources: gold edge and a corner ribbon, as on the
   live page. The ribbon is a rotated bar anchored to the corner, sized by the
   diagonal so its ends run past both edges of the card. */
.aa-fr-ace { border-color: var(--gold); border-width: 2px; }
html.aa-dark .aa-fr-ace { border-color: color-mix(in srgb, var(--gold) 80%, transparent); }
.aa-fr-ribbon {
  position: absolute;
  top: 1.35rem;
  right: -2.9rem;
  width: 11rem;
  transform: rotate(45deg);
  background: var(--foreground);
  padding: 0.3rem 0;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--background);
  pointer-events: none;
}
/* Once the two buttons stack they are two different lengths, which reads as a
   mistake rather than a pair. A single column makes them one width and gives
   each a full width tap target. */
@media (max-width: 575px) {
}
@media (min-width: 992px) {
}

/* Below the tablet edge the row turns into stacked lines, the title over its
   tag over its button, and the button takes the width so it stays an easy
   target. 767 rather than 575: by 754 the single line row is already squeezed. */
@media (max-width: 767px) {
}

/* --- Start here ----------------------------------------------------------
   Only the section spacing lives here now. The panel itself is .aa-leadgen,
   the same component the homepage uses, so the two cannot drift apart again. */
.aa-start {
  position: relative;
  z-index: 2;
  padding-block: 3.5rem;
}
@media (min-width: 768px) { .aa-start { padding-block: 4.5rem; } }

/* --- Syllabus topics ------------------------------------------------------
   The AS 9702 page only. Its rows are the topic artwork, cropped to a 5.4 to 1
   strip, so a row is 200px of picture rather than the 640 the full frame would
   need. IGCSE and A2 share .aa-syl-acc but still carry the original title and
   count summaries, so everything here hangs off .aa-syl-visual and leaves them
   on the plain list they already had. */
.aa-syl-visual {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
}
.aa-syl-visual .aa-syl-item,
.aa-syl-visual .aa-syl-item:first-child {
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  overflow: hidden;
  background: var(--card);
  transition: border-color 0.2s ease;
}
html.aa-dark .aa-syl-visual .aa-syl-item,
html.aa-dark .aa-syl-visual .aa-syl-item:first-child {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
}
.aa-syl-visual .aa-syl-item:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }

.aa-syl-visual .aa-syl-item > summary {
  display: block;
  padding: 0;
  cursor: pointer;
}
.aa-syl-visual .aa-syl-shot {
  display: block;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 60%, var(--card));
}
html.aa-dark .aa-syl-visual .aa-syl-shot { border-bottom-color: rgba(255, 255, 255, 0.09); }
/* No cropping here any more. One fixed object-position could not work: the
   name block starts anywhere from y=1488 to y=1760 across the eleven files, so
   any single offset either cut a long name or spent the strip on empty sky.
   The files are cropped instead, each from where its own name tiles are, and
   all eleven come out 1440 by 265, which is the ratio below. */
.aa-syl-visual .aa-syl-shot img {
  display: block;
  width: 100%;
  height: auto;
  /* 27/5 is 5.4, the exact ratio the files are drawn at, so nothing crops */
  aspect-ratio: 27 / 5;
}

/* Inline variant: instead of the picture sitting above its bar, everything runs
   on one line, number, picture, count, chevron. Suits a syllabus with a lot of
   topics, where a stack of full width banners would be a very long scroll.

   The bar is display:contents so its three children join the summary's own flex
   line rather than forming a row of their own, and order puts the number ahead
   of the picture. It also means the bar has no box left to draw the open state
   divider on, so that moves to the summary.

   Only from tablet up: at phone widths a 17rem picture on the same line as the
   number and the count leaves the picture too small to read anything in, so it
   falls back to the stacked layout above. */
@media (min-width: 768px) {
}

/* Mini: the same inline row, with the picture at a fixed small width instead of
   stretching to fill. Eight banners at the full inline width make eight tall
   bands and a very long scroll, and at this scale the row reads as an index
   entry with a picture on it rather than as a stack of posters.

   The picture stops growing, so the count is what takes up the slack: it keeps
   margin-left:auto and sits against the right edge, leaving an open track in
   between. That track is deliberate here, unlike in the plain inline variant
   where the picture was widened until the track closed up.

   Kept off .aa-syl-inline itself so the Cambridge IGCSE list, which was tuned
   to have no track at all, is untouched. */
@media (min-width: 768px) {
}

/* the bar under the picture, which is where the count and the chevron live */
.aa-syl-visual .aa-syl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.aa-syl-visual .aa-syl-count { font-variant-numeric: tabular-nums; }
.aa-syl-visual .aa-syl-item[open] .aa-syl-count { color: var(--primary); }
.aa-syl-visual .aa-syl-item[open] .aa-syl-bar { border-bottom: 1px solid var(--border); }
html.aa-dark .aa-syl-visual .aa-syl-item[open] .aa-syl-bar { border-bottom-color: rgba(255, 255, 255, 0.09); }
.aa-syl-visual .aa-syl-item > summary .aa-chev {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--primary);
  transition: transform 0.2s ease;
}
.aa-syl-visual .aa-syl-item[open] > summary .aa-chev { transform: rotate(180deg); }

.aa-syl-visual .aa-syl-item > .aa-faq-a { padding: 1.25rem 1.4rem 1.5rem; }
/* the row is full width now, so the subtopics run in columns rather than one
   long thin line of text */
@media (min-width: 760px) {
.aa-syl-visual .aa-syl-item .aa-sa-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* the row gap was zero here, which ran the last line of one subtopic
       straight into the heading of the one below it in the next row */
    gap: 1.35rem 2.5rem;
  }
}
@media (min-width: 1100px) {
.aa-syl-visual .aa-syl-item .aa-sa-list { grid-template-columns: repeat(3, 1fr); }
}


/* --- Our values -----------------------------------------------------------
   Two statements, not a card each. A rule down the side carries them, which is
   the same device the founder quote uses, and keeps the section light: this
   page already has plenty of bordered panels. */
.aa-vals { margin-top: 2.5rem; display: flex; flex-wrap: wrap; row-gap: 2rem; }
.aa-vals > [class*="col-"] { float: none; display: flex; }
.aa-vals > [class*="col-"] > .aa-val { width: 100%; }
.aa-vals .aa-val {
  border-left: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  padding-left: 1.4rem;
}
.aa-vals .aa-val h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.aa-vals .aa-val p {
  margin-top: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}


/* --- What you get: four up feature strip ----------------------------------
   Bootstrap columns as everywhere else, made one flex line so the four tiles
   share a height and their paragraphs sit on a common baseline whatever the
   heading wraps to. Centred, so a row that is not full would sit in the
   middle rather than against the left edge. */
.aa-feats {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 2.5rem;
}
.aa-feats > [class*="col-"] { float: none; display: flex; }
.aa-feats > [class*="col-"] > .aa-feat { width: 100%; }
.aa-feat { text-align: center; }
/* Sized by height, but the balancing is in the files rather than here. A square
   box made the wide cap read smallest; equal height made it read biggest, since
   at 256 tall it lays down 44,000 opaque pixels against the thin bolt's 19,600.
   The four are padded so their artwork diagonals match at a common height,
   which is where an icon set is usually balanced, and all four measure a
   rendered diagonal of 147px here. Change this height and they stay balanced.

   6.5rem, up from the 4.5rem this started at: these icons each stand on a
   glowing podium that takes roughly a quarter of the frame, so the symbol was
   reading smaller than the flat icons they replaced. */
.aa-feat img {
  display: block;
  margin-inline: auto;
  height: 6.5rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.aa-feat h3 {
  margin-top: 1.1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
  text-wrap: balance;
}
.aa-feat p {
  margin-top: 0.55rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.aa-feats-cta { margin-top: 2.5rem; text-align: center; }


/* ==========================================================================
   NEW CSS 10 September 2026
   ==========================================================================
   Every rule below is new since the folder shared previously. Nothing above
   this line changed, apart from the two declarations noted at the end.

   Kept together in one dated block so a release can be read, reviewed or
   rolled back in one place.

   Grouped by media query. The order inside each group is the order the
   rules were written in, and it has to stay that way: several of them
   refine the one above.
   ========================================================================== */


/* ---- no media query ---- */

.aa-page-hero.aa-hero-low .aa-page-photo img {
object-position: center 70%;
}

.aa-page-hero.aa-hero-lower .aa-page-photo img {
object-position: center 79%;
}

/* The video variant of the modal. With the heading gone there is nothing for a
card to hold but the video, so the card stops being a panel: no fill, no
border, no padding. The picture itself is the thing on screen, and the close
button lifts clear above its top right corner instead of crowding it.

16 by 9 is declared rather than measured, so the frame is the right shape
before the embed loads and does not jump when it arrives. */
.aa-modal-video .aa-modal-card {
max-width: 56rem;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}

/* A 16 by 9 box sized only by width runs off the bottom of a short window, and
took the close button off the top with it, leaving no way out of the modal.
Capping the width by the height available keeps the whole frame and its
button on screen at any window shape. */
.aa-modal-video .aa-modal-card {
max-width: min(56rem, calc((100vh - 9rem) * 16 / 9));
}

.aa-modal-video .aa-modal-close {
top: -3rem;
right: 0;
width: 2.25rem;
height: 2.25rem;
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.08);
color: #fff;
}

.aa-modal-video .aa-modal-close:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.16);
color: #fff;
}

.aa-modal-video-frame {
overflow: hidden;
border-radius: 0.9rem;
background: #000;
box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.6);
}

.aa-modal-video-frame iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
}

/* Long copy stays in the DOM for search engines, collapsed by default */

html.aa-dark /* .cc-learn's layout and 1rem icon size are scoped to .course-card, which this

card is not, so the list needs its own rules or the ticks render full size. */

@media (max-width: 980px) {

.aa-pc-grid { gap: 1.25rem; }}

html:not(.aa-dark) .aa-bk-mark img.aa-inv { filter: invert(1) brightness(0.25); }

/* Cambridge is the exception. Inverting its white artwork turns the crest navy
and loses the red and gold, so that card ships the real light mode file and
swaps on theme, the same pair the exam board panel on the Physics page uses.
Edexcel and AQA are plain white wordmarks with nothing to lose, so they keep
the invert. */
.aa-bk-mark .aa-dm { display: none; }

html.aa-dark .aa-bk-mark .aa-dm { display: block; }

html.aa-dark .aa-bk-mark .aa-lm { display: none; }

/* The artwork is a laptop and phone pair drawn at 8:5 on a transparent ground,
so the picture spans the tile and stands on a tinted stage that carries the
brand blue. The ratio is declared rather than measured, so the row is laid
out before the PNGs arrive and does not jump when they do; contain, never
cover, so nothing is ever cut off. Padding is what insets the artwork inside
the stage, and the background paints under it. */
.aa-fr-card > img {
display: block;
width: 100%;
aspect-ratio: 8 / 5;
object-fit: contain;
padding: 1.15rem 1.1rem 0.85rem;
border-bottom: 1px solid var(--border);
background: var(--muted);
}

html.aa-dark .aa-fr-card > img {
border-bottom-color: rgba(255, 255, 255, 0.09);
background: rgba(255, 255, 255, 0.03);
}

.aa-fr-body h3 {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--foreground);
}

/* the description runs in full, never clipped. Lengths differ a lot between
tiles, so the buttons are pushed to the bottom instead of following the
text, which keeps them on one line across a row */
.aa-fr-body > p {
margin-top: 0.6rem;
font-size: 0.875rem;
line-height: 1.65;
color: var(--muted-foreground);
}

/* the ribbon crosses the picture panel, well clear of the title below it */

/* --- Resource page intro ---------------------------------------------------
The band under the hero on each /resources/ page: the device mockup on one
side, what the resource is on the other. Bootstrap columns do the splitting,
the flex line only supplies the vertical centring and the gap. */
.aa-rp-intro {
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: 2rem;
}

.aa-rp-intro > [class*="col-"] { float: none; }

.aa-rp-intro img {
display: block;
width: 100%;
aspect-ratio: 8 / 5;
object-fit: contain;
padding: 1.4rem;
border: 1px solid var(--border);
border-radius: 1.1rem;
background: var(--muted);
}

html.aa-dark .aa-rp-intro img {
border-color: rgba(255, 255, 255, 0.09);
background: rgba(255, 255, 255, 0.03);
}

.aa-rp-copy h2 {
margin-top: 0.5rem;
font-size: 1.85rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--foreground);
}

.aa-rp-copy > p:last-of-type {
margin-top: 0.9rem;
font-size: 0.95rem;
line-height: 1.7;
color: var(--muted-foreground);
}

/* Two equal columns rather than two buttons sized by their own labels. The
first button's text changes from page to page, so left to themselves the
pair came out lopsided, a wide one beside a narrow one. Capped in width so
they stay a pair rather than stretching the full column. */
.aa-rp-acts {
margin-top: 1.5rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
max-width: 25rem;
}

.aa-rp-acts .aa-btn {
height: 2.6rem;
padding-inline: 1.4rem;
font-size: 0.9rem;
font-weight: 600;
border-radius: 0.5rem;
}

/* --- Bonus reports ---------------------------------------------------------
Ten reports, one to a row. There is no artwork for any of them, so a row is
an index number, the title, whether it is free or behind an account, and the
button. Bootstrap columns hold the rows, as everywhere else, with the flex
line on top for the gaps the float grid does not give. */
.aa-br-list {
margin-top: 2.5rem;
display: flex;
flex-wrap: wrap;
row-gap: 0.75rem;
}

.aa-br-list > [class*="col-"] { float: none; display: flex; }

.aa-br-list > [class*="col-"] > .aa-br-row { width: 100%; }

.aa-br-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.95rem 1.1rem 0.95rem 1.25rem;
border: 1px solid var(--border);
border-radius: 0.85rem;
background: var(--card);
transition: border-color 0.2s ease, background-color 0.2s ease;
}

html.aa-dark .aa-br-row {
border-color: rgba(255, 255, 255, 0.09);
background: rgba(255, 255, 255, 0.025);
}

.aa-br-row:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }

.aa-br-n {
flex: none;
width: 2.1rem;
font-size: 0.85rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: color-mix(in srgb, var(--primary) 75%, var(--muted-foreground));
}

/* the title and its tag share the middle, and wrap onto two lines together
rather than the tag dropping away on its own */
.aa-br-t {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
}

.aa-br-title {
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--foreground);
}

.aa-br-tag {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.5rem;
border: 1px solid var(--border);
border-radius: 0.4rem;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted-foreground);
}

html.aa-dark .aa-br-tag { border-color: rgba(255, 255, 255, 0.14); }

.aa-br-free {
border-color: color-mix(in srgb, var(--primary) 45%, transparent);
color: var(--primary);
}

.aa-br-lock { width: 0.7rem; height: 0.7rem; }

.aa-br-row .aa-btn {
flex: none;
height: 2.25rem;
padding-inline: 1.15rem;
font-size: 0.85rem;
font-weight: 600;
border-radius: 0.45rem;
}

/* The topic heading, which is what the 1.1 and 1.2 codes inside hang off. Set
as plain type with no box or fill behind it, in the brand blue, sized and
spaced like the eyebrow labels used elsewhere on the site. The auto margin
holds the left end of the bar on its own, which sends the count to the right
to sit with the chevron. Open and closed look the same here; the chevron
turning over is what marks the row that is open. */
.aa-syl-visual .aa-syl-n {
flex: none;
margin-right: auto;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--primary);
}

/* the figure and the word are one phrase, so they take one colour. Only the
weight separates them. */
.aa-syl-visual .aa-syl-n ~ .aa-syl-count,
.aa-syl-visual .aa-syl-item[open] .aa-syl-n ~ .aa-syl-count {
font-size: 0.85rem;
color: var(--foreground);
}

.aa-syl-visual .aa-syl-n ~ .aa-syl-count span {
font-weight: 500;
color: inherit;
}


/* ---- @media (max-width: 575px) ---- */
@media (max-width: 575px) {

  .aa-rp-acts {
  display: grid;
  grid-template-columns: 1fr;
  }
}


/* ---- @media (max-width: 767px) ---- */
@media (max-width: 767px) {

  .aa-br-row {
  flex-wrap: wrap;
  /* top, not centre: centred, the number floated between the title and its
  tag instead of sitting beside the title */
  align-items: flex-start;
  padding: 1rem 1.1rem;
  /* matches the row padding, so the button sits the same distance from
  the text above it as from the edge below it */
  row-gap: 1.05rem;
  /* the desktop 1rem left a wide channel between the number and the title
  once the row narrowed */
  column-gap: 0.6rem;
  }

  /* the number's box was 2.1rem holding a glyph barely 1rem wide, so most of
  the gap was empty box rather than the gap itself. Narrowed to just clear
  the widest number, which keeps the titles lined up down the column. */
  .aa-br-n {
  width: 1.45rem;
  /* the title's line box, so the two sit on the same line */
  line-height: 1.5;
  /* the number is smaller than the title, so matching their line boxes still
  leaves it reading a touch high against the cap height. Only here: on the
  single line row above, the number is centred against the whole row and
  this would push it off centre. */
  margin-top: 2px;
  }

  /* a zero basis, so the title always fits alongside the number instead of
  being pushed onto a line of its own and leaving the number stranded.

  Stacked rather than wrapping: as a wrapping row the tag sat beside a short
  title and dropped under a long one, so no two rows agreed and the column
  looked ragged. Stacking puts the tag on its own line every time. */
  .aa-br-t {
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  }

  .aa-br-row .aa-btn { flex: 1 0 100%; }
}


/* ---- @media (min-width: 768px) ---- */
@media (min-width: 768px) {

  .aa-page-hero.aa-hero-low,
  .aa-page-hero.aa-hero-lower {
  min-height: max(27rem, 32vw);
  }

  .aa-fr-card > img {
  flex: none;
  width: 32%;
  min-height: 12rem;
  aspect-ratio: auto;
  align-self: stretch;
  padding: 1.2rem;
  border-bottom: 0;
  border-right: 1px solid var(--border);
  }

  html.aa-dark .aa-fr-card > img {
  border-bottom: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  }

  .aa-fr-body h3 { margin-top: auto; }

  .aa-fr-body > p { margin-bottom: auto; }

  /* the ribbon stays on the top right corner of the tile, which on this layout
  is the far end of the words rather than the picture, so the text column is
  given clearance to keep its lines from running under it */
  .aa-fr-ace .aa-fr-body { padding-right: 6.75rem; }

  /* the rows close up into one list rather than sitting apart as separate
  cards, so the panel reads as an index. A hairline between rows does the
  separating that the gap and the borders were doing. */
  .aa-syl-visual.aa-syl-inline { gap: 0; }

  .aa-syl-visual.aa-syl-inline .aa-syl-item,
  .aa-syl-visual.aa-syl-inline .aa-syl-item:first-child {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  }

  html.aa-dark .aa-syl-visual.aa-syl-inline .aa-syl-item,
  html.aa-dark .aa-syl-visual.aa-syl-inline .aa-syl-item:first-child {
  border-top-color: rgba(255, 255, 255, 0.09);
  background: transparent;
  }

  .aa-syl-visual.aa-syl-inline .aa-syl-item:last-child {
  border-bottom: 1px solid var(--border);
  }

  html.aa-dark .aa-syl-visual.aa-syl-inline .aa-syl-item:last-child {
  border-bottom-color: rgba(255, 255, 255, 0.09);
  }

  /* no border left to tint, so hover shows as a faint wash instead */
  .aa-syl-visual.aa-syl-inline .aa-syl-item:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  }

  html.aa-dark .aa-syl-visual.aa-syl-inline .aa-syl-item:hover {
  border-top-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  }

  /* the list runs narrower than the container it sits in, so the row is not a
  long empty track between the picture and the count */
  .aa-syl-visual.aa-syl-inline {
  max-width: 55rem;
  margin-inline: auto;
  }

  /* no padding above or below: the picture sets the height of the row on its
  own and sits flush against the hairline top and bottom */
  .aa-syl-visual.aa-syl-inline .aa-syl-item > summary {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0 1rem 0 0.25rem;
  }

  .aa-syl-visual.aa-syl-inline .aa-syl-bar { display: contents; }

  /* A fixed box for the number, because the pictures line up behind it and
  Poppins has no tabular figures, so font-variant-numeric does nothing here
  and 01 measures 13.3px against 04's 16.7px. Left as it was, every row
  started its picture at a slightly different x and 01 sat furthest left. */
  .aa-syl-visual.aa-syl-inline .aa-syl-n {
  order: 1;
  margin-right: 0;
  width: 1.6rem;
  }

  /* the picture takes whatever the row has left once the number, the count and
  the chevron are placed, so there is no dead track between the picture and
  the count at any width. Its own ratio then sets the height, and the row is
  that height exactly. */
  .aa-syl-visual.aa-syl-inline .aa-syl-shot {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 0;
  border-radius: 0;
  overflow: hidden;
  }

  /* nowrap, or the picture claims the width and folds "8 subtopics" onto two
  lines against the right edge. A fixed box for the same reason the number
  has one: the leading figure changes width from row to row, which moved the
  picture's right edge with it. */
  .aa-syl-visual.aa-syl-inline .aa-syl-count {
  order: 3;
  flex: none;
  width: 5.5rem;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  }

  .aa-syl-visual.aa-syl-inline .aa-syl-item > summary .aa-chev { order: 4; }

  .aa-syl-visual.aa-syl-inline .aa-syl-item[open] > summary {
  border-bottom: 1px solid var(--border);
  }

  html.aa-dark .aa-syl-visual.aa-syl-inline .aa-syl-item[open] > summary {
  border-bottom-color: rgba(255, 255, 255, 0.09);
  }

  .aa-syl-visual.aa-syl-inline.aa-syl-mini { max-width: 44rem; }

  .aa-syl-visual.aa-syl-inline.aa-syl-mini .aa-syl-shot {
  flex: 0 0 21rem;
  /* 21rem over the 27/5 ratio is a 3.9rem row, so eight of them fit on one
  screen instead of scrolling past two */
  width: 21rem;
  }

  /* The number sat a long way off its picture. Two things were adding up: the
  1.1rem gap, and the slack left inside the number's own box, which is 1.6rem
  against a widest measured digit pair of 16.67px. Both come down. The box
  still has to be fixed, or the pictures stop lining up, so it is set just
  clear of that widest pair rather than to the text. */
  .aa-syl-visual.aa-syl-inline.aa-syl-mini .aa-syl-item > summary { gap: 0.6rem; }

  .aa-syl-visual.aa-syl-inline.aa-syl-mini .aa-syl-n { width: 1.15rem; }

  /* the tighter gap was only wanted on the left of the picture, so the count
  buys its own spacing back off the chevron */
  .aa-syl-visual.aa-syl-inline.aa-syl-mini .aa-syl-count { margin-right: 0.5rem; }
}


/* ---- @media (min-width: 992px) ---- */
@media (min-width: 992px) {

  .aa-rp-copy { padding-left: 2rem; }
}


/* ---- @supports (height: 100dvh) ---- */
@supports (height: 100dvh) {

  .aa-modal-video .aa-modal-card {
  max-width: min(56rem, calc((100dvh - 9rem) * 16 / 9));
  }
}


/* ---- the two declarations that could NOT be moved ---- */
/* These change rules that already existed, so they stay where those
   rules are. Listed here so this section is a complete record:

     html { scrollbar-gutter: stable; }
         in the base html rule, near the top of the file

     html.aa-dark { --muted-foreground: #a1a1a1 -> #e1e7f0; }
         in the dark theme token block

   Both are explained in the UPDATED block at the top of this file. */