/* ============================================================
   TBB Academy: shared UI, scoped under .tbb-ah
   Tokens, reset, layout, type, buttons, cards, tags, stats,
   CTA panel, hero, motion, footer. Every section and the footer
   is its own .tbb-ah root, so each one can be placed on its own.

   Look: white page, near-black type, neutral greys, ONE highlight
   phrase per paragraph (.tbb-ah-hl, brown, Montserrat). Orange only
   on link hover and the hero badge glint. Cards: warm hairline,
   faint fill, 4px blur, no shadow, 14px radius. Solid button: corners
   cut top-right + bottom-left, one per screen; outline mirrored.
   Exam cards are the one dark surface (.tbb-ah-dark).

   Specificity: the reset is (0,1,2) so it beats theme element rules
   such as ".entry-content p" (0,1,1); component rules are
   ".tbb-ah .x" (0,2,0); hover rules (0,3,0) beat ".entry-content
   a:hover" (0,2,1). All sizes are px: some themes shrink rem.
   ============================================================ */

.tbb-ah {
  /* Colour */
  --tbb-ah-bg:          #ffffff;
  --tbb-ah-fg:          #0a0a0a;
  --tbb-ah-muted:       #404040;
  --tbb-ah-subtle:      #737373;
  --tbb-ah-border:      #e5e5e5;
  --tbb-ah-hl:          #854d0e;               /* highlight phrase */
  --tbb-ah-edge:        rgb(120 53 15 / .15);  /* card hairline */
  --tbb-ah-edge-hover:  rgb(120 53 15 / .3);
  --tbb-ah-fill:        rgb(255 255 255 / .7); /* card fill */
  --tbb-ah-brand:       oklch(66.6% .179 58.318); /* link hover only */
  --tbb-ah-solid-bg:    #171717;
  --tbb-ah-solid-fg:    #ffffff;
  --tbb-ah-solid-hover: #2a2a2a;
  --tbb-ah-ghost-hover: #f5f5f5;
  --tbb-ah-primary:     #262626;               /* button on cards */
  --tbb-ah-primary-fg:  #fafafa;
  --tbb-ah-viewall-bg:  rgb(212 212 216 / .4);
  --tbb-ah-viewall-fg:  #52525b;
  --tbb-ah-tag:         #e5e7eb;
  --tbb-ah-ico-bg:      rgb(255 255 255 / .8);
  --tbb-ah-badge-bg:    #fafafa;
  --tbb-ah-badge-fg:    #262626;
  --tbb-ah-ok:          #15803d;               /* text and thin lines only */
  --tbb-ah-radius:      10px;

  /* SVG art */
  --s-fg:          #171717;
  --s-muted:       #8a8a8a;
  --s-line:        rgb(120 53 15 / .16);
  --s-line-strong: rgb(120 53 15 / .3);
  --s-hl:          #854d0e;
  --s-hl-soft:     rgb(133 77 14 / .1);
  --s-card:        rgb(255 255 255 / .6);
  --s-panel:       #ffffff;
  --s-ok:          #16a34a;
  --s-on-ok:       #ffffff;

  /* Type */
  --tbb-ah-font:         'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tbb-ah-font-display: 'Montserrat', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --tbb-ah-font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion / layout */
  --tbb-ah-ease: cubic-bezier(.16, 1, .3, 1);
  --tbb-ah-wrap: 1280px;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  margin: 0;
  background: var(--tbb-ah-bg);
  color: var(--tbb-ah-fg);
  font-family: var(--tbb-ah-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light;
}

/* Dark surface: same tokens, near-black values (exam cards) */
.tbb-ah .tbb-ah-dark {
  --tbb-ah-bg:         #0a0a0a;
  --tbb-ah-fg:         #fafafa;
  --tbb-ah-muted:      #a3a3a3;
  --tbb-ah-subtle:     #8a8a8a;
  --tbb-ah-border:     rgb(255 255 255 / .1);
  --tbb-ah-hl:         #ffedd5;
  --tbb-ah-edge:       rgb(255 247 237 / .15);
  --tbb-ah-edge-hover: rgb(255 247 237 / .3);
  --tbb-ah-fill:       rgb(0 0 0 / .1);
  --tbb-ah-brand:      oklch(75% .183 55.934);
  --tbb-ah-primary:    #e5e5e5;
  --tbb-ah-primary-fg: #262626;
  --tbb-ah-tag:        #404040;
  --tbb-ah-ok:         #4ade80;
  --tbb-ah-ico-bg:     rgb(255 255 255 / .04);
  color-scheme: dark;
}

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

/* ── Theme-proof reset ───────────────────────────────────────── */
.tbb-ah :is(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, details, summary, figure, nav, aside, article, header, footer):is(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, details, summary, figure, nav, aside, article, header, footer) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}
.tbb-ah :is(ul, ol):is(ul, ol) { list-style: none; }
.tbb-ah :is(li):is(li)::marker { content: none; }
.tbb-ah :is(a, button):is(a, button):is(:link, :visited, :hover, :focus, :active, *) { text-decoration: none; box-shadow: none; }
.tbb-ah :is(a, button, summary):is(a, button, summary):focus-visible { outline: 2px solid var(--tbb-ah-fg); outline-offset: 2px; }
.tbb-ah img { display: block; max-width: 100%; height: auto; }

.tbb-ah .tbb-ah-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}
.tbb-ah .tbb-ah-icon svg { display: block; width: 100%; height: 100%; }

.tbb-ah .tbb-ah-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Layout ───────────────────────────────────────────────────── */
.tbb-ah .tbb-ah-wrap { width: 100%; max-width: var(--tbb-ah-wrap); margin-inline: auto; padding-inline: 24px; }
.tbb-ah.tbb-ah-sec { padding-block: 40px; }
.tbb-ah.tbb-ah-sec--last { padding-bottom: 96px; }
.tbb-ah .tbb-ah-grid { display: grid; gap: 16px; }
.tbb-ah .tbb-ah-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tbb-ah .tbb-ah-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tbb-ah .tbb-ah-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.tbb-ah .tbb-ah-split--solo { grid-template-columns: minmax(0, 760px); }

/* Feature row: section head beside an illustration card */
.tbb-ah .tbb-ah-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.tbb-ah .tbb-ah-feature .tbb-ah-head { margin-bottom: 0; }
.tbb-ah .tbb-ah-feature--flip .tbb-ah-art { order: -1; }
.tbb-ah .tbb-ah-feature + .tbb-ah-grid { margin-top: 40px; }

/* ── Type ─────────────────────────────────────────────────────── */
.tbb-ah .tbb-ah-hl {
  font-family: var(--tbb-ah-font-display);
  font-weight: 500;
  letter-spacing: -.025em;
  text-transform: capitalize;
  color: var(--tbb-ah-hl);
}
.tbb-ah .tbb-ah-h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--tbb-ah-fg);
  text-wrap: balance;
}
.tbb-ah .tbb-ah-lead { margin-top: 8px; max-width: 672px; font-size: 16px; line-height: 1.65; color: var(--tbb-ah-muted); text-wrap: pretty; }
.tbb-ah .tbb-ah-text { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--tbb-ah-muted); }
.tbb-ah .tbb-ah-head { margin-bottom: 32px; }
.tbb-ah .tbb-ah-head--center { text-align: center; }
.tbb-ah .tbb-ah-head--center .tbb-ah-h2 { max-width: 760px; margin-inline: auto; }
.tbb-ah .tbb-ah-head--center .tbb-ah-lead { margin-inline: auto; }

/* Diamond bullet list */
.tbb-ah .tbb-ah-points { display: grid; gap: 8px; margin-top: 20px; }
.tbb-ah .tbb-ah-points li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.6; color: var(--tbb-ah-fg); }
.tbb-ah .tbb-ah-points li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 4px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--tbb-ah-subtle);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* ── Buttons and links ────────────────────────────────────────── */
.tbb-ah .tbb-ah-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.tbb-ah .tbb-ah-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding-inline: 18px;
  border: 1px solid transparent;
  font-family: var(--tbb-ah-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.tbb-ah .tbb-ah-btn .tbb-ah-icon { margin-left: -2px; font-size: 16px; }
.tbb-ah .tbb-ah-btn--solid,
.tbb-ah .tbb-ah-btn--solid:is(:link, :visited) { border-radius: 0 var(--tbb-ah-radius) 0 var(--tbb-ah-radius); background: var(--tbb-ah-solid-bg); color: var(--tbb-ah-solid-fg); }
.tbb-ah .tbb-ah-btn--solid:is(:hover, :focus-visible) { background: var(--tbb-ah-solid-hover); color: var(--tbb-ah-solid-fg); }
.tbb-ah .tbb-ah-btn--outline,
.tbb-ah .tbb-ah-btn--outline:is(:link, :visited) { border-color: var(--tbb-ah-border); border-radius: var(--tbb-ah-radius) 0 var(--tbb-ah-radius) 0; background: transparent; color: var(--tbb-ah-fg); }
.tbb-ah .tbb-ah-btn--outline:is(:hover, :focus-visible) { background: var(--tbb-ah-ghost-hover); color: var(--tbb-ah-fg); }

/* Button on a card */
.tbb-ah .tbb-ah-btn-card,
.tbb-ah .tbb-ah-btn-card:is(:link, :visited) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 32px;
  padding-inline: 12px;
  border-radius: calc(var(--tbb-ah-radius) - 2px);
  background: var(--tbb-ah-primary);
  color: var(--tbb-ah-primary-fg);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity .2s;
}
.tbb-ah .tbb-ah-btn-card:is(:hover, :focus-visible),
.tbb-ah .tbb-ah-card:hover .tbb-ah-btn-card { opacity: .9; color: var(--tbb-ah-primary-fg); }

.tbb-ah .tbb-ah-viewall,
.tbb-ah .tbb-ah-viewall:is(:link, :visited) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin-top: 24px;
  padding-inline: 20px;
  border-radius: calc(var(--tbb-ah-radius) - 2px);
  background: var(--tbb-ah-viewall-bg);
  color: var(--tbb-ah-viewall-fg);
  font-family: var(--tbb-ah-font-display);
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
}
.tbb-ah .tbb-ah-viewall:is(:hover, :focus-visible) { color: var(--tbb-ah-brand); }

.tbb-ah .tbb-ah-link,
.tbb-ah .tbb-ah-link:is(:link, :visited) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tbb-ah-fg);
  transition: color .2s;
}
.tbb-ah .tbb-ah-link .tbb-ah-icon { font-size: 15px; }
.tbb-ah .tbb-ah-link:is(:hover, :focus-visible),
.tbb-ah .tbb-ah-card:hover .tbb-ah-link { color: var(--tbb-ah-brand); }

/* ── Cards, icons, tags ───────────────────────────────────────── */
.tbb-ah .tbb-ah-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--tbb-ah-edge);
  border-radius: calc(var(--tbb-ah-radius) + 4px);
  background: var(--tbb-ah-fill);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: var(--tbb-ah-fg);
  transition: border-color .3s, opacity .3s;
}
.tbb-ah .tbb-ah-card:hover { border-color: var(--tbb-ah-edge-hover); opacity: 1; }
.tbb-ah .tbb-ah-card__title {
  margin-top: 16px;
  font-family: var(--tbb-ah-font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--tbb-ah-fg);
}
.tbb-ah .tbb-ah-card__text { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--tbb-ah-muted); }
.tbb-ah .tbb-ah-card > .tbb-ah-link:last-child { margin-top: auto; padding-top: 14px; }

/* A card whose title link covers the whole card. Many themes give links
   position: relative, which would shrink the overlay to the title, so the
   link is pinned static here; real buttons sit above the overlay. */
.tbb-ah .tbb-ah-card .tbb-ah-stretch,
.tbb-ah .tbb-ah-card .tbb-ah-stretch:is(:link, :visited, :hover, :focus) { position: static; color: inherit; }
.tbb-ah .tbb-ah-card .tbb-ah-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tbb-ah .tbb-ah-card :is(.tbb-ah-btn-card, .tbb-ah-link, .tbb-ah-chip) { position: relative; z-index: 2; }
.tbb-ah .tbb-ah-card:has(.tbb-ah-stretch:focus-visible) { outline: 2px solid var(--tbb-ah-fg); outline-offset: 2px; }
.tbb-ah .tbb-ah-stretch:focus-visible { outline: none; }

.tbb-ah .tbb-ah-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tbb-ah-border);
  border-radius: var(--tbb-ah-radius);
  background: var(--tbb-ah-ico-bg);
  color: var(--tbb-ah-fg);
}
.tbb-ah .tbb-ah-ico svg { display: block; width: 20px; height: 20px; }

.tbb-ah .tbb-ah-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--tbb-ah-tag);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tbb-ah-muted);
  white-space: nowrap;
}
.tbb-ah .tbb-ah-free { color: var(--tbb-ah-ok); font-size: 12px; font-weight: 600; }

/* Chip links */
.tbb-ah .tbb-ah-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tbb-ah .tbb-ah-chip,
.tbb-ah .tbb-ah-chip:is(:link, :visited) {
  display: inline-flex;
  padding: 6px 14px;
  border: 1px solid var(--tbb-ah-edge);
  border-radius: 9999px;
  background: var(--tbb-ah-fill);
  color: var(--tbb-ah-muted);
  font-size: 14px;
  line-height: 1.4;
  transition: color .2s, border-color .2s;
}
.tbb-ah .tbb-ah-chip:is(:hover, :focus-visible) { color: var(--tbb-ah-brand); border-color: var(--tbb-ah-edge-hover); }

/* ── Stat strip ───────────────────────────────────────────────── */
.tbb-ah .tbb-ah-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 40px; }
.tbb-ah .tbb-ah-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 16px; text-align: center; }
.tbb-ah .tbb-ah-stat + .tbb-ah-stat { border-left: 1px solid var(--tbb-ah-border); }
.tbb-ah .tbb-ah-stat__value {
  font-family: var(--tbb-ah-font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--tbb-ah-fg);
  font-variant-numeric: tabular-nums;
}
.tbb-ah .tbb-ah-stat__label { font-size: 14px; color: var(--tbb-ah-muted); }

/* Values: icon + title + text, no card */
.tbb-ah .tbb-ah-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.tbb-ah .tbb-ah-value .tbb-ah-card__title { margin-top: 14px; }

/* ── CTA panel ────────────────────────────────────────────────── */
.tbb-ah .tbb-ah-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px 32px; padding: 32px; }
.tbb-ah .tbb-ah-cta__title { font-family: var(--tbb-ah-font-display); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--tbb-ah-fg); text-wrap: balance; }
.tbb-ah .tbb-ah-cta__text { margin-top: 6px; }
.tbb-ah .tbb-ah-cta .tbb-ah-actions { flex-shrink: 0; margin-top: 0; }

/* ── Hero: copy left, art right ───────────────────────────────── */
.tbb-ah.tbb-ah-hero { padding-block: 24px 40px; }
.tbb-ah.tbb-ah-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 640px;
  background: radial-gradient(55% 45% at 50% 35%, rgb(253 186 116 / .16), transparent 70%);
  pointer-events: none;
}
.tbb-ah .tbb-ah-hero__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; }
.tbb-ah .tbb-ah-hero__layout--solo { grid-template-columns: minmax(0, 860px); }
.tbb-ah .tbb-ah-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tbb-ah .tbb-ah-hero__title {
  margin-top: 6px;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--tbb-ah-fg);
  text-wrap: balance;
}
.tbb-ah .tbb-ah-hero__lead { margin-top: 12px; max-width: 640px; font-size: 16px; line-height: 1.65; color: var(--tbb-ah-muted); text-wrap: pretty; }
.tbb-ah .tbb-ah-hero__copy .tbb-ah-actions { margin-top: 18px; }
.tbb-ah .tbb-ah-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 14px; color: var(--tbb-ah-muted); }
.tbb-ah .tbb-ah-hero__facts li { display: inline-flex; align-items: center; gap: 6px; }
.tbb-ah .tbb-ah-hero__facts strong { font-family: var(--tbb-ah-font-display); font-weight: 600; color: var(--tbb-ah-fg); }

/* Badge with an orange glint running round its 1px border */
.tbb-ah .tbb-ah-glint { position: relative; display: inline-flex; width: fit-content; padding: 1px; overflow: hidden; border-radius: 9999px; background: var(--tbb-ah-border); }
.tbb-ah .tbb-ah-glint__spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 20px;
  border-radius: 9999px;
  background: linear-gradient(to right, transparent, transparent, #f97316);
  transform: translate(-50%, -50%);
}
.tbb-ah .tbb-ah-glint__text {
  position: relative;
  z-index: 1;
  padding: 7px 16px;
  border-radius: 9999px;
  background: var(--tbb-ah-badge-bg);
  color: var(--tbb-ah-badge-fg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

/* ── Motion (CSS only; nothing moves under reduced motion) ────── */
@keyframes tbb-ah-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tbb-ah-glint { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .tbb-ah .tbb-ah-enter { animation: tbb-ah-rise .7s var(--tbb-ah-ease) both; animation-delay: calc(var(--tbb-ah-i, 0) * 90ms); }
  .tbb-ah .tbb-ah-glint__spin { animation: tbb-ah-glint 4s linear infinite; }

  /* Cards fade up as they scroll in, where scroll-driven animation exists */
  @supports (animation-timeline: view()) {
    .tbb-ah .tbb-ah-reveal {
      animation: tbb-ah-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

/* ── Footer ───────────────────────────────────────────────────── */
.tbb-ah.tbb-ah-footer { clear: both; font-size: 15px; }
.tbb-ah.tbb-ah-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tbb-ah-edge-hover) 30%, var(--tbb-ah-edge-hover) 70%, transparent);
}
.tbb-ah-footer .tbb-ah-wrap { padding-block: 64px 32px; }
.tbb-ah .tbb-ah-footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.tbb-ah .tbb-ah-footer__logo,
.tbb-ah .tbb-ah-footer__logo:is(:link, :visited, :hover) { display: inline-flex; align-items: baseline; gap: 8px; color: var(--tbb-ah-fg); }
.tbb-ah .tbb-ah-wordmark { font-family: var(--tbb-ah-font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--tbb-ah-fg); }
.tbb-ah .tbb-ah-wordmark span { color: var(--tbb-ah-hl); }
.tbb-ah .tbb-ah-footer__sub { font-size: 14px; font-weight: 500; color: var(--tbb-ah-subtle); }
.tbb-ah .tbb-ah-footer__tagline { max-width: 320px; margin-top: 12px; color: var(--tbb-ah-muted); }
.tbb-ah .tbb-ah-footer__social { display: flex; gap: 8px; margin-top: 20px; }
.tbb-ah .tbb-ah-footer__social a,
.tbb-ah .tbb-ah-footer__social a:is(:link, :visited) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--tbb-ah-border);
  border-radius: calc(var(--tbb-ah-radius) - 2px);
  color: var(--tbb-ah-muted);
  transition: color .2s, border-color .2s;
}
.tbb-ah .tbb-ah-footer__social svg { width: 16px; height: 16px; }
.tbb-ah .tbb-ah-footer__social a:is(:hover, :focus-visible) { color: var(--tbb-ah-brand); border-color: var(--tbb-ah-edge-hover); }
.tbb-ah .tbb-ah-footer__title { font-family: var(--tbb-ah-font-display); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--tbb-ah-fg); }
.tbb-ah .tbb-ah-footer__menu { display: grid; gap: 10px; margin-top: 16px; }
.tbb-ah .tbb-ah-footer__menu a,
.tbb-ah .tbb-ah-footer__menu a:is(:link, :visited) { color: var(--tbb-ah-muted); transition: color .2s; }
.tbb-ah .tbb-ah-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--tbb-ah-border);
  font-size: 14px;
  color: var(--tbb-ah-subtle);
}
.tbb-ah .tbb-ah-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tbb-ah .tbb-ah-footer__legal a,
.tbb-ah .tbb-ah-footer__legal a:is(:link, :visited) { color: var(--tbb-ah-subtle); transition: color .2s; }
.tbb-ah .tbb-ah-footer :is(.tbb-ah-footer__menu, .tbb-ah-footer__legal) a:is(:hover, :focus-visible) { color: var(--tbb-ah-brand); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (min-width: 640px) {
  .tbb-ah .tbb-ah-wrap { padding-inline: 48px; }
  .tbb-ah.tbb-ah-sec { padding-block: 48px; }
  .tbb-ah.tbb-ah-sec--last { padding-bottom: 112px; }
  .tbb-ah.tbb-ah-hero { padding-top: 32px; }
  .tbb-ah .tbb-ah-h2 { font-size: 30px; }
  .tbb-ah .tbb-ah-lead { font-size: 18px; }
  .tbb-ah .tbb-ah-card { opacity: .9; }
  .tbb-ah .tbb-ah-hero__copy { gap: 14px; }
}
@media (min-width: 768px) {
  .tbb-ah .tbb-ah-hero__title { font-size: 60px; }
  .tbb-ah .tbb-ah-hero__lead { font-size: 20px; }
}
@media (min-width: 1024px) {
  .tbb-ah .tbb-ah-hero__title { font-size: 72px; }
}
@media (max-width: 1023px) {
  .tbb-ah .tbb-ah-grid--4,
  .tbb-ah .tbb-ah-grid--3,
  .tbb-ah .tbb-ah-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbb-ah .tbb-ah-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tbb-ah .tbb-ah-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .tbb-ah .tbb-ah-split,
  .tbb-ah .tbb-ah-feature,
  .tbb-ah .tbb-ah-hero__layout { grid-template-columns: minmax(0, 1fr); }
  .tbb-ah .tbb-ah-feature--flip .tbb-ah-art { order: 0; }
  .tbb-ah .tbb-ah-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .tbb-ah .tbb-ah-stat:nth-child(3) { border-left: 0; }
  .tbb-ah .tbb-ah-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
  .tbb-ah .tbb-ah-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbb-ah .tbb-ah-footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 639px) {
  .tbb-ah .tbb-ah-grid--4,
  .tbb-ah .tbb-ah-grid--3,
  .tbb-ah .tbb-ah-values { grid-template-columns: minmax(0, 1fr); }
}