/* ============================================================================
   ALMEER SECURITIES — components & layout
   Depends on tokens.css. No brand colour is written literally below.
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
p  { margin: 0 0 var(--sp-4); }
img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--color-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus is always visible. Do not remove. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow    { max-width: var(--container-narrow); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-accent); color: var(--color-on-accent);
  padding: var(--sp-3) var(--sp-5); font-weight: var(--fw-semi);
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ TOP BAR */
.topbar {
  background: var(--chrome-bg-deep);
  color: rgba(255,255,255,.82);
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__inner {
  min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.topbar__group { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.topbar a { color: inherit; display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar a:hover { color: var(--color-accent); text-decoration: none; }
.topbar svg { width: 14px; height: 14px; flex: none; }

.topbar__socials { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__socials a {
  width: 26px; height: 26px; justify-content: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill);
}
.topbar__socials a:hover { border-color: var(--color-accent); }

/* Market status: a labelled placeholder, never invented data. */
.market-status {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 3px var(--sp-3); border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); font-variant-numeric: tabular-nums;
}
.market-status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-text-subtle); flex: none;
}
.market-status[data-state="open"]   .market-status__dot { background: var(--color-success); }
.market-status[data-state="closed"] .market-status__dot { background: var(--color-text-subtle); }

@media (max-width: 900px) { .topbar { display: none; } }

/* ------------------------------------------------------------------- HEADER */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--chrome-bg-blur);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--chrome-border);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header[data-stuck="true"] { box-shadow: var(--shadow-sm); }

.header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-5);
  transition: min-height var(--dur) var(--ease);
}
.site-header[data-stuck="true"] .header__inner { min-height: var(--header-h-compact); }

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand img { height: 42px; width: auto; transition: height var(--dur) var(--ease); }
.site-header[data-stuck="true"] .brand img { height: 36px; }
/* Two stacked lines. Both children must be block-level — as inline spans they
   sit side by side and the lockup reads as one long run of text. */
.brand__text  { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.brand__name  { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--chrome-ink); line-height: 1.1; }
.brand__sub   { display: block; font-size: 0.64rem; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase; color: var(--chrome-ink-subtle); }
@media (max-width: 420px) { .brand__text { display: none; } }

.primary-nav { margin-inline: auto; }
.primary-nav ul { display: flex; align-items: center; gap: clamp(.5rem, .1rem + 1vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  display: inline-block; padding: var(--sp-2) var(--sp-1);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--chrome-ink-muted); letter-spacing: .02em; white-space: nowrap;
  position: relative;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.primary-nav a:hover { color: var(--chrome-ink); text-decoration: none; }
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--chrome-ink); font-weight: var(--fw-semi); }
@media (max-width: 1120px) { .primary-nav { display: none; } }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; margin-left: auto; flex-wrap: wrap; }
@media (min-width: 1121px) { .header__actions { margin-left: 0; } }

.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--chrome-border); border-radius: var(--r-pill);
  background: transparent; color: var(--chrome-ink); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.icon-btn:hover { border-color: var(--chrome-ink); background: var(--chrome-surface); }
.icon-btn svg { width: 18px; height: 18px; }

.link-quiet { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--chrome-ink); white-space: nowrap; }
@media (max-width: 620px) { .link-quiet { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: .72rem 1.4rem; border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  cursor: pointer; white-space: nowrap; line-height: 1;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--brand-primary); color: var(--color-text); border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }
.btn--primary:hover { background: #114C2C; border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.btn--accent  { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-xs); }
.btn--accent:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); }
.btn--ghost   { background: transparent; color: var(--color-primary); border-color: var(--color-border-strong); }
.btn--ghost:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }
.btn--lg { padding: .95rem 1.9rem; font-size: 1rem; }
@media (max-width: 480px) { .btn--header-cta { padding: .68rem 1rem; } }

/* -------------------------------------------------------------- SEARCH PANE */
.search-panel {
  display: none; border-top: 1px solid var(--chrome-border);
  background: var(--chrome-bg); padding-block: var(--sp-4);
}
.search-panel[data-open="true"] { display: block; }
.search-form { display: flex; gap: var(--sp-3); }
.search-form input {
  flex: 1; min-width: 0; padding: .8rem 1.1rem; font: inherit;
  border: 1px solid var(--chrome-border-strong); border-radius: var(--r-pill);
  background: var(--chrome-surface); color: var(--chrome-ink);
}
.search-form input::placeholder { color: var(--chrome-ink-subtle); }

/* ---------------------------------------------------------- MOBILE DRAWER */
.nav-toggle { display: none; }
@media (max-width: 1120px) { .nav-toggle { display: inline-flex; } }

.drawer-overlay {
  position: fixed; inset: 0; background: rgba(7,42,33,.42);
  opacity: 0; pointer-events: none; z-index: var(--z-overlay);
  transition: opacity var(--dur) var(--ease);
}
.drawer-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; inset-block: 0; right: 0; width: min(360px, 88vw);
  background: var(--chrome-bg); z-index: var(--z-drawer);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.drawer[data-open="true"] { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--chrome-border);
}
.drawer__body { padding: var(--sp-4) var(--sp-5) var(--sp-8); overflow-y: auto; flex: 1; }
.drawer__body ul { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.drawer__body li + li { border-top: 1px solid var(--chrome-border); }
.drawer__body a {
  display: block; padding: var(--sp-4) 0; font-size: 1.05rem;
  font-weight: var(--fw-medium); color: var(--chrome-ink);
}
.drawer__cta { display: grid; gap: var(--sp-3); }
.drawer__meta { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--chrome-ink-muted); }
.drawer__meta a { color: var(--color-accent); }

/* --------------------------------------------------------------------- HERO */
.hero { position: relative; overflow: hidden; background: var(--color-bg); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 65% at 80% 14%, rgba(243, 186, 38, .10), transparent 70%),
    radial-gradient(70% 80% at 12% 90%, rgba(12, 61, 34, .55), transparent 72%),
    linear-gradient(180deg, var(--color-bg-alt), var(--color-bg) 62%);
  pointer-events: none;
}
.hero__inner {
  position: relative; display: grid; gap: var(--sp-8);
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(3rem, 1.5rem + 5vw, 5.5rem);
  align-items: center;
}
@media (min-width: 960px) { .hero__inner { grid-template-columns: 1.05fr .95fr; gap: var(--sp-9); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-secondary);
  background: var(--color-bg-tint); border-radius: var(--r-pill);
  padding: .38rem .85rem; margin-bottom: var(--sp-5);
}
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

.hero h1 { font-size: var(--fs-display); margin-bottom: var(--sp-5); }
.hero h1 .accent { color: var(--color-secondary); font-style: italic; }
.hero__lead { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: 54ch; margin-bottom: var(--sp-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7);
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}
.trust-item__value {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--color-primary);
}
.trust-item__label {
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--color-text-subtle);
}

.hero__visual { position: relative; }
.hero__visual svg { width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }

/* ----------------------------------------------------------------- SECTIONS */
.section { padding-block: var(--section-y); }
.section--alt  { background: var(--color-bg-alt); }
.section--tint { background: var(--color-bg-tint); }
.section--dark { background: var(--color-bg-inverse); color: rgba(255,255,255,.86); }
.section--dark h2 { color: var(--color-text); }
.section--dark .section-head p { color: rgba(255,255,255,.7); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-7); }
.section-head .eyebrow { margin-bottom: var(--sp-4); }
.section-head p { color: var(--color-text-muted); font-size: var(--fs-lead); margin: 0; }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--color-bg-tint); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--sp-2); }
.card p  { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }

/* A placeholder block, honestly labelled — never filler prose pretending to
   be content. Phase 2 replaces these with real sections. */
.placeholder {
  border: 1px dashed var(--color-border-strong); border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, var(--color-bg-alt) 12px 24px);
  padding: var(--sp-8) var(--sp-6); text-align: center;
}
.placeholder__tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-text-subtle); border: 1px solid var(--color-border-strong);
  background: var(--color-bg); border-radius: var(--r-pill);
  padding: .25rem .8rem; margin-bottom: var(--sp-3);
}
.placeholder p { color: var(--color-text-muted); margin: 0; font-size: var(--fs-sm); }
.section--dark .placeholder { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); }
.section--dark .placeholder__tag { background: transparent; border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.7); }
.section--dark .placeholder p { color: rgba(255,255,255,.65); }

/* CTA band */
.cta-band { background: var(--color-bg-inverse); border-radius: var(--r-xl); padding: clamp(2rem, 1rem + 4vw, 3.5rem); }
.cta-band h2 { color: var(--color-text); }
.cta-band p  { color: rgba(255,255,255,.75); max-width: 56ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
/* The four placeholder sections that used to sit above this block carried the
   only homepage links to Research, the Learning Hub and the Investor Hub.
   Removing them would have cut those paths, so they are carried here instead. */
.cta-band__more {
  margin: var(--sp-6) 0 0; padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-sm); color: rgba(255, 255, 255, .7);
}
.cta-band__more a { color: var(--color-accent); }

/* ------------------------------------------------------------------- FOOTER */
.site-footer { background: var(--chrome-bg-deep); color: rgba(255,255,255,.72); padding-block: var(--sp-9) var(--sp-6); }
/* MOBILE (default): one column, everything stacked in reading order.
   The company description sits first, then each navigation column. */
.footer__grid { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; }
.footer__brand { grid-column: 1 / -1; max-width: 34ch; }

/* TABLET: two by two. The brand block spans both tracks so the four nav
   columns pair up cleanly underneath rather than one being orphaned. */
@media (min-width: 620px) and (max-width: 999px) {
  .footer__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
  .footer__brand { grid-column: 1 / -1; }
}

/* DESKTOP: brand, then the navigation columns on one line.
   grid-auto-columns rather than a fixed track count, because the Downloads &
   Documents column only exists when there are real documents to link — the row
   must lay out correctly with three nav columns or with four.

   Reach Us is the last child either way, so it always ends on the right edge,
   and it gets the wider track because the address needs the room. */
@media (min-width: 1000px) {
  .footer__grid {
    grid-template-columns: 1.5fr;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--sp-6) var(--sp-5);
  }
  .footer__brand { grid-column: 1; grid-row: 1; }
  .footer__grid > nav:last-of-type { min-width: 15rem; }
}
.footer__brand img { height: 46px; margin-bottom: var(--sp-4); }
.footer__brand p { font-size: var(--fs-sm); color: rgba(255,255,255,.66); }

.site-footer h3 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--color-accent); }

/* Partner and investor-awareness marks. Each logo is a different shape and a
   different source resolution, so the row is sized per-image rather than by a
   shared height: forcing one height would crop or stretch at least two of the
   three. height:auto with an explicit width preserves every aspect ratio. */
/* Full width of the footer, not inside the brand column — at ~260px that
   column forced the three marks onto two rows. */
.footer__partners {
  margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer__partners-label {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-accent);
}
.footer__partners-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.footer__partners-row a {
  display: inline-flex; align-items: center;
  border-radius: var(--r-sm);
  /* The marks are dark-on-white, so on a black footer they need their own
     light plate to stay legible — the alternative is an invisible logo. */
  background: #FFFFFF;
  padding: 5px 7px;
  transition: box-shadow var(--dur) var(--ease);
}
.footer__partners-row a:hover { box-shadow: 0 0 0 2px var(--color-accent); }
.footer__partners-row img { display: block; height: auto; }
@media (prefers-reduced-motion: reduce) { .footer__partners-row a { transition: none; } }

/* The whole address is one link. It keeps the ivory body colour so it does not
   shout, and earns the gold + underline on hover and keyboard focus. */
.footer__addr {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  color: rgba(255, 255, 255, .72);
  /* Comfortable to tap on a phone without changing how it looks on desktop. */
  padding: 2px 0;
}
.footer__addr:hover { color: var(--color-accent); text-decoration: underline; }
.footer__addr:focus-visible {
  outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: var(--r-sm);
}
.footer__pin { flex: none; margin-top: 2px; color: var(--color-accent); }
.footer__pin svg { width: 15px; height: 15px; display: block; }
.footer__doc-meta { color: rgba(255, 255, 255, .45); font-size: var(--fs-xs); }

.footer__socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer__socials a {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill);
}
.footer__socials a:hover { border-color: var(--color-accent); }
.footer__socials svg { width: 16px; height: 16px; }

.footer__legal {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-xs); color: rgba(255,255,255,.55);
}
.footer__legal p { margin-bottom: var(--sp-3); max-width: 100ch; }
.footer__base { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: space-between; }
.footer__base ul { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__base li { margin: 0; }

body.is-locked { overflow: hidden; }

/* ============================================================================
   MEGA MENU
   ----------------------------------------------------------------------------
   Markup pattern per item:

     <li class="has-menu">
       <a href="/about/">About Us</a>          <- crawlable link to the hub
       <button aria-expanded aria-controls>    <- the actual disclosure
       <div class="mega" id="...">             <- panel

   The label is a real <a>, not a button, so search engines follow it to the
   section hub and keyboard users can reach the hub without opening anything.
   The chevron <button> owns aria-expanded, which is what screen readers
   announce. Hover opens it for mice; focus-within opens it for keyboards.

   The panel is display:none until open, so its links cost nothing at paint
   time and there is no layout shift.
   ========================================================================= */

.primary-nav li.has-menu { position: static; display: flex; align-items: center; gap: 2px; }

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--chrome-ink-muted); cursor: pointer;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.menu-toggle svg { width: 11px; height: 11px; }
.menu-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--color-accent); }
.has-menu:hover .menu-toggle { color: var(--chrome-ink); }

.mega {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--chrome-surface);
  border-top: 1px solid var(--chrome-border);
  border-bottom: 1px solid var(--chrome-border);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-header);
}
.mega[data-open="true"] { display: block; }

/* THE HOVER GAP.
   The nav item sits vertically centred in the header, but the panel is
   anchored to the header's bottom edge - leaving ~18px of dead space between
   them. Moving the pointer down towards the menu crossed that space, dropped
   :hover, and the panel vanished before it could be reached.

   ::before extends the panel's own hover area upward across the gap and over
   the nav item itself, so there is no uncovered pixel on the way down. It is
   invisible and sits behind the panel content. */
.mega::before {
  content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 34px;
}
@media (hover: hover) {
  .has-menu:hover .mega, .has-menu:focus-within .mega, .mega:hover { display: block; }
}

/* Lead column + link grid as two separate tracks. A single auto-fit grid put
   the lead block in the flow with the links, so the 5th link wrapped onto its
   own row and left a hole in the panel. */
.mega__inner {
  display: grid; gap: var(--sp-6) var(--sp-7);
  grid-template-columns: 1fr;
  padding-block: var(--sp-6) var(--sp-7);
}
@media (min-width: 900px) { .mega__inner { grid-template-columns: 260px 1fr; } }
.mega__links {
  display: grid;
  gap: var(--sp-3) var(--sp-5);        /* wider gutter: columns must not touch */
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  align-content: start;
}
/* A grid item defaults to min-width:auto, which lets a long unbroken line push
   past its own track and sit on top of the next column. Pinning it to 0 keeps
   every card inside its lane no matter how long the description is. */
.mega__links > * { min-width: 0; }
.mega__title {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 1.15rem; line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--chrome-ink); margin: 0 0 var(--sp-2);
}
.mega__lead p { font-size: var(--fs-sm); color: var(--chrome-ink-muted); margin-bottom: var(--sp-4); }
.mega__lead .btn { font-size: var(--fs-xs); padding: .55rem 1.1rem; }

.mega__item {
  display: block; padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  /* .primary-nav a sets white-space:nowrap so top-level labels never wrap.
     The mega panel's cards are also .primary-nav descendants, so they were
     inheriting it — the description could not wrap, ran straight out of its
     column and printed on top of the neighbouring card. Reset it here. */
  white-space: normal;
}
.mega__item:hover { background: var(--chrome-bg); border-color: var(--chrome-border); text-decoration: none; }
.mega__item strong {
  display: block; font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: var(--fw-semi); color: var(--chrome-ink); margin-bottom: 3px;
  white-space: normal; overflow-wrap: break-word;
}
/* `> span:not(.mega__ico)` rather than a bare `span`: an icon card also has a
   <span> for its glyph, and the plain descendant selector was styling it as a
   description - clamping it to two lines and forcing display:-webkit-box,
   which knocked the icon out of its grid cell and onto its own row. */
.mega__item > span:not(.mega__ico) {
  display: block; font-size: var(--fs-xs); color: var(--chrome-ink-muted);
  line-height: 1.5; white-space: normal; overflow-wrap: break-word;
  /* Two lines keeps every card the same height, so the rows sit on a clean
     baseline instead of staggering. A longer blurb is trimmed with an ellipsis
     rather than being allowed to unbalance the panel. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --------------------------------------------------- GROUPED LINK COLUMNS --
   Sections with more links than fit one comfortable row can split them into
   titled columns (Services does: Trading, then Specialised & Support). The
   grouped variant replaces the auto-fit grid with one track per group, so a
   column keeps its own heading and its own links together instead of the
   links reflowing across group boundaries. */
.mega__links--grouped {
  display: grid; gap: var(--sp-5) var(--sp-7);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .mega__links--grouped { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mega__links--grouped > * { min-width: 0; }
.mega__coltitle {
  margin: 0 0 var(--sp-2); padding: 0 var(--sp-4) var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 1px solid var(--chrome-border);
  white-space: normal;
}
.mega__col { min-width: 0; }

/* Icon cards. The icon occupies its own column and spans both text rows, so
   the title and the description stay aligned to a single left edge. */
.mega__item.mega__item--icon {
  display: grid; align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3);
}
.mega__item--icon > strong,
.mega__item--icon > span:not(.mega__ico) { grid-column: 2; }
/* Icon cards sit in a wider two-column panel than the plain link grid, so they
   can carry a third line before clamping. Two lines was cutting the longest
   service description mid-sentence. */
.mega__item--icon > span:not(.mega__ico) { -webkit-line-clamp: 3; }
.mega__item--icon > .mega__ico {
  grid-column: 1; grid-row: 1 / span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-top: 1px;
  border: 1px solid var(--chrome-border); border-radius: var(--r-md);
  color: var(--color-accent);
  background: var(--chrome-bg);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mega__ico svg { width: 17px; height: 17px; display: block; }
.mega__item--icon:hover .mega__ico { border-color: var(--color-accent); }

/* ------------------------------------------------------- PANEL TRANSITION --
   An entry animation rather than a two-way transition: the panel is
   display:none when closed (so its links cost nothing at paint time and
   cannot be tabbed into), and display cannot be transitioned. Animating only
   the open state keeps that guarantee and still gives the short fade-and-slide
   the design calls for.

   Desktop only. Inside the drawer the same panel is an accordion, where a
   downward slide on every tap reads as jitter rather than polish. */
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 1121px) {
  .mega[data-open="true"],
  .has-menu:hover .mega,
  .has-menu:focus-within .mega,
  .mega:hover {
    animation: mega-in 200ms cubic-bezier(.16, .84, .44, 1) both;
  }
}
/* Someone who has asked their system to reduce motion gets the panel with no
   movement at all - not a shorter version of the same slide. */
@media (prefers-reduced-motion: reduce) {
  .mega[data-open="true"],
  .has-menu:hover .mega,
  .has-menu:focus-within .mega,
  .mega:hover { animation: none; }
  .menu-toggle { transition: none; }
}

/* Mobile: the panel becomes an accordion inside the drawer. */
.drawer__body .has-menu { display: block; }
.drawer__body .menu-row { display: flex; align-items: center; justify-content: space-between; }
.drawer__body .menu-row > a { flex: 1; }
.drawer__body .menu-toggle {
  width: 40px; height: 40px; border: 1px solid var(--chrome-border); border-radius: var(--r-pill);
}
.drawer__body .menu-toggle svg { width: 13px; height: 13px; }
.drawer__body .mega {
  position: static; display: none; box-shadow: none; border: 0;
  background: transparent; padding-bottom: var(--sp-3);
}
.drawer__body .mega[data-open="true"] { display: block; }
.drawer__body .mega__inner { display: block; padding: 0 0 var(--sp-2); }
.drawer__body .mega__links { display: block; }
.drawer__body .mega__lead { display: none; }
.drawer__body .mega__links--grouped { display: block; }
.drawer__body .mega__coltitle {
  margin: var(--sp-4) 0 var(--sp-2); padding: 0 0 var(--sp-2);
}
.drawer__body .mega__col + .mega__col .mega__coltitle { margin-top: var(--sp-5); }
.drawer__body .mega__item {
  padding: var(--sp-3) var(--sp-4); background: var(--chrome-surface);
  margin-bottom: var(--sp-2);
  /* A finger needs a target, not a line of text. 44px is the documented
     minimum; the padding above already clears it, and min-height guarantees
     it even for the shortest label. */
  min-height: 44px; display: flex; flex-direction: column; justify-content: center;
}
/* Descriptions are hidden in the drawer by default - ten two-line cards turn
   the Learning Hub accordion into a scroll marathon. Icon cards keep theirs,
   because a service name alone ("Account & Settlement Services") does not tell
   a first-time visitor what is behind it. */
.drawer__body .mega__item > span:not(.mega__ico) { display: none; }
.drawer__body .mega__item.mega__item--icon {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: var(--sp-3);
}
.drawer__body .mega__item--icon > span:not(.mega__ico) {
  display: block; -webkit-line-clamp: 3;
}

/* ============================================================================
   THEME SWITCHER (internal — injected by app.js only in preview mode)
   ----------------------------------------------------------------------------
   Deliberately styled from --chrome-* so it stays legible on the dark header
   no matter which candidate theme is being previewed. It is never present in
   the production markup.
   ========================================================================= */
.theme-switch {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px;
  padding: 6px var(--gutter);
  background: #0A1F12;
  border-bottom: 1px solid var(--chrome-border-strong);
}
.theme-switch__tag {
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-accent); padding: 0 5px; white-space: nowrap;
}
.theme-switch__b, .theme-switch__off {
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  padding: 5px 10px; font: inherit; font-size: .68rem; font-weight: var(--fw-medium);
  background: transparent; color: var(--chrome-ink-muted); white-space: nowrap;
}
.theme-switch__b:hover, .theme-switch__off:hover { color: var(--chrome-ink); background: rgba(255,255,255,.08); }
.theme-switch__b.on { background: var(--brand-accent); color: #04150A; font-weight: var(--fw-semi); }
.theme-switch__off { color: var(--chrome-ink-subtle); border-left: 1px solid var(--chrome-border-strong); border-radius: 0; margin-left: 2px; }
.theme-switch__note {
  font-size: .58rem; color: var(--chrome-ink-subtle); padding: 0 6px; white-space: nowrap;
}
/* The header is sticky; the strip is not, so it scrolls away and the sticky
   header still pins to the top exactly as it does in production. */
.theme-switch__b, .theme-switch__off { min-height: 30px; }
/* Revert the wrap allowance added for the earlier in-header placement. */
.header__actions { flex-wrap: nowrap; }

/* ============================================================================
   THEME PREVIEW (internal chooser page only)
   ========================================================================= */
.tp-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.tp-card {
  min-width: 0; background: var(--color-bg-tint);
  border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--sp-5);
}
.tp-card h2 { font-size: 1.15rem; margin: var(--sp-4) 0 var(--sp-2); }
.tp-swatch { border: 1px solid; border-radius: var(--r-md); padding: var(--sp-4); }
.tp-inner { border: 1px solid; border-radius: var(--r-sm); padding: var(--sp-4); }
.tp-h { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: 1.15rem; }
.tp-b { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.6; }
.tp-btn {
  display: inline-block; background: var(--brand-accent); color: #04150A;
  border-radius: var(--r-pill); padding: .45rem 1rem;
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
}
.tp-why { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0 0 var(--sp-4); }
.tp-vals { display: grid; gap: var(--sp-2) var(--sp-4); grid-template-columns: repeat(2, 1fr); margin: 0 0 var(--sp-4); }
.tp-vals dt { font-size: var(--fs-xs); color: var(--color-text-subtle); }
.tp-vals dd { margin: 0; font-size: var(--fs-xs); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-primary); }
.tp-open { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.tp-card ul { margin: 0; padding-left: 1.1rem; }
.tp-card li { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

/* ============================================================================
   INVESTOR HUB
   ========================================================================= */
.mega__safety {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--chrome-border);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--chrome-ink-subtle);
  white-space: normal;
}

/* Numbered process. The number comes from a counter rather than an <ol>
   marker so it can be styled as a gold chip without losing the semantics of
   an ordered list for assistive tech. */
.steps { list-style: none; counter-reset: step; margin: 0 0 var(--sp-6); padding: 0; }
.steps li {
  counter-increment: step;
  position: relative; padding: 0 0 var(--sp-5) var(--sp-8);
  border-left: 1px solid var(--color-border); margin-left: 15px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute; left: -16px; top: -2px;
  width: 31px; height: 31px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg); border: 1px solid var(--color-accent);
  color: var(--color-accent); font-size: var(--fs-xs); font-weight: var(--fw-semi);
}
.steps strong { display: block; color: var(--color-primary); margin-bottom: 3px; }
.steps span { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); }

.riskbox {
  background: var(--color-bg-tint); border: 1px solid var(--color-accent);
  border-left-width: 4px; border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0;
}
.riskbox p { margin: 0; font-size: var(--fs-sm); color: var(--color-primary); }

.fee-tbc { font-size: var(--fs-xs); color: var(--color-text-subtle); }
.esc-role {
  display: inline-block; margin-left: var(--sp-2);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: var(--fw-medium); color: var(--color-text-subtle);
  border: 1px solid var(--color-border); border-radius: var(--r-pill); padding: 1px 8px;
}

/* ============================================================================
   RESEARCH LISTING + FILTERS
   ========================================================================= */
.rc-list { display: grid; gap: var(--sp-4); }
.rc {
  background: var(--color-bg-tint); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--sp-5); min-width: 0;
}
.rc__cat {
  display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent);
}
.rc__flag {
  font-size: .62rem; letter-spacing: .1em; color: var(--color-text-subtle);
  border: 1px solid var(--color-border); border-radius: var(--r-pill); padding: 1px 8px;
}
.rc h3 { margin: 0 0 var(--sp-2); font-size: 1.1rem; }
.rc h3 a { color: var(--color-primary); }
.rc h3 a:hover { color: var(--color-accent); }
.rc__sum { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.rc__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs); color: var(--color-text-subtle);
}
.rc__rev { color: var(--color-accent); }
.rc__act { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; }
.btn--sm { font-size: var(--fs-xs); padding: .5rem 1rem; }

.rfilter {
  background: var(--color-bg-tint); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-5);
}
.rfilter__row {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  align-items: end;
}
.rfilter__f { display: block; min-width: 0; }
.rfilter__f > span {
  display: block; margin-bottom: 5px;
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-subtle);
}
.rfilter input, .rfilter select {
  width: 100%; padding: .6rem .75rem; border-radius: var(--r-md);
  border: 1px solid var(--color-border); background: var(--color-bg);
  color: var(--color-primary); font: inherit; font-size: var(--fs-sm);
  /* 44px minimum so these are usable with a thumb, not just a mouse. */
  min-height: 44px;
}
.rfilter button { min-height: 44px; }
.rfilter__count { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--color-text-subtle); }

/* ============================================================================
   SEARCH RESULTS PAGE
   ========================================================================= */
.search-page-form {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.search-page-form input {
  flex: 1 1 300px; min-width: 0; min-height: 48px;
  padding: .75rem 1rem; border-radius: var(--r-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-tint); color: var(--color-primary);
  font: inherit;
}
.search-page-form button { min-height: 48px; }
#search-results .rc h2 { margin: 0 0 var(--sp-2); font-size: 1.1rem; }
#search-results .rc h2 a { color: var(--color-primary); }
#search-results .rc h2 a:hover { color: var(--color-accent); }

/* ============================================================================
   SCROLL BUTTONS (floating, right side)
   ----------------------------------------------------------------------------
   The Ask Almeer launcher occupies the bottom-LEFT corner, so this stack takes
   the right and the two never collide.

   Colours come from --chrome-* rather than --color-*: these float above the
   page on every route, including the light-theme previews, and they must stay
   dark emerald with ivory arrows in all of them.
   ========================================================================= */
.scrollnav {
  position: fixed; right: 24px; bottom: 24px;
  z-index: var(--z-float);
  display: flex; flex-direction: column; gap: 12px;
}
/* Hidden until the script decides the page is long enough to need them.
   visibility (not display) so the transition has something to animate, and so
   a hidden button cannot be tabbed to. */
.scrollnav[data-show="false"] { opacity: 0; visibility: hidden; }
.scrollnav__btn[hidden] { display: none; }

.scrollnav__btn {
  position: relative;
  width: 48px; height: 48px;              /* well above the 44px minimum */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--chrome-bg);
  border: 1px solid rgba(243, 186, 38, .38);
  color: var(--chrome-ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.scrollnav__btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-accent);
  color: var(--brand-accent);
  text-decoration: none;
}
.scrollnav__btn:focus-visible {
  outline: 3px solid var(--brand-accent); outline-offset: 3px;
}
.scrollnav__btn svg { width: 20px; height: 20px; display: block; }

/* Tooltip sits to the LEFT: to the right there is only the viewport edge. */
.scrollnav__tip {
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px; border-radius: var(--r-sm);
  background: var(--chrome-bg-deep); color: var(--chrome-ink);
  border: 1px solid var(--chrome-border-strong);
  font-size: var(--fs-xs); line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.scrollnav__btn:hover .scrollnav__tip,
.scrollnav__btn:focus-visible .scrollnav__tip { opacity: 1; }

@media (max-width: 700px) {
  .scrollnav { right: 15px; bottom: 19px; gap: 10px; }
  .scrollnav__btn { width: 44px; height: 44px; }
  .scrollnav__btn svg { width: 18px; height: 18px; }
  /* A tooltip is a pointer affordance. On touch it would flash on tap and add
     nothing, so it is dropped; the sr-only label still names the control. */
  .scrollnav__tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scrollnav, .scrollnav__btn, .scrollnav__tip { transition: none; }
}

/* ============================================================================
   CONTACT
   ========================================================================= */
.channels {
  display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.channel {
  display: block; min-width: 0; padding: var(--sp-5);
  background: var(--color-bg-tint); border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease);
  /* Comfortably above the 44px minimum: these are the controls a client
     reaches for when something has gone wrong. */
  min-height: 88px;
}
.channel:hover { border-color: var(--color-accent); text-decoration: none; }
.channel__k {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent);
}
.channel__v {
  display: block; font-size: 1.05rem; color: var(--color-primary);
  overflow-wrap: anywhere;
}
.channels--compact .channel { padding: var(--sp-4); min-height: 0; }
@media (prefers-reduced-motion: reduce) { .channel { transition: none; } }

/* Verified contact details inside the Contact mega panel. */
.mega__contact {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--chrome-border);
  display: grid; gap: var(--sp-2);
}
.mega__contact div { display: flex; gap: var(--sp-3); align-items: baseline; }
.mega__contact dt {
  flex: 0 0 74px; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--chrome-ink-subtle);
}
.mega__contact dd {
  margin: 0; font-size: var(--fs-xs); color: var(--chrome-ink);
  overflow-wrap: anywhere; white-space: normal;
}
.mega__contact a { color: var(--color-accent); }

/* ============================================================================
   HOMEPAGE SECTIONS 01-05
   ========================================================================= */
.cred {
  background: var(--color-bg-tint); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--sp-5); min-width: 0;
}
.cred__value {
  margin: 0 0 var(--sp-1); font-family: var(--font-display);
  font-size: 1.25rem; line-height: var(--lh-tight); color: var(--color-primary);
}
.cred__body {
  margin: 0 0 var(--sp-3); font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent);
}
.cred__what {
  margin: 0 0 var(--sp-4); font-size: var(--fs-sm);
  line-height: var(--lh-normal); color: var(--color-text-muted);
}
.cred .lh-card__more { font-size: var(--fs-xs); }

/* Figures beside the movers table above 900px; stacked below, because a
   five-column table and a stat block side by side on a phone is unreadable. */
.home-market { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
.home-market > * { min-width: 0; }
@media (min-width: 900px) { .home-market { grid-template-columns: 1fr 1fr; align-items: start; } }
.home-market .kse { margin-bottom: 0; }

/* The homepage shows four milestones rather than the full eight, so the steps
   sit in a row on desktop instead of a tall vertical timeline. */
@media (min-width: 800px) {
  .steps--home {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
  }
  .steps--home li {
    border-left: 0; border-top: 1px solid var(--color-border);
    margin-left: 0; padding: var(--sp-7) 0 0;
  }
  .steps--home li::before { left: 0; top: -16px; }
}

/* ============================================================================
   MARKET FIGURES
   ----------------------------------------------------------------------------
   Movement uses an accessible green/red tint, but never colour alone: the
   markup also carries an arrow glyph and a +/- sign, so direction survives
   greyscale, colour-blindness and a high-contrast theme.
   ========================================================================= */
.kse {
  background: var(--color-bg-tint); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-6);
}
.kse__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.kse__name {
  margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .13em; text-transform: uppercase; color: var(--color-accent);
  flex-basis: 100%;
}
.kse__value {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1.05;
  letter-spacing: var(--ls-tight); color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.kse__delta {
  margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
}
.kse__delta[data-dir="up"]   { color: #6FCF97; }
.kse__delta[data-dir="down"] { color: #E4675E; }
.kse__stats {
  display: grid; gap: var(--sp-3) var(--sp-5); margin: var(--sp-5) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.kse__stats > div { min-width: 0; }
.kse__stats dt {
  font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-subtle); margin-bottom: 2px;
}
.kse__stats dd {
  margin: 0; font-size: var(--fs-sm); color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.kse__src {
  margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--color-text-subtle);
}
.kse--compact .kse__value { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); }

/* Announcement rows: symbol chip, then the exchange's own title as the link. */
.ann-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.ann {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border);
}
.ann:last-child { border-bottom: 0; }
.ann__sym {
  flex: 0 0 auto; min-width: 72px;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .08em;
  color: var(--color-accent);
}
.ann a { flex: 1 1 260px; font-size: var(--fs-sm); color: var(--color-primary); }
.ann a:hover { color: var(--color-accent); }
.ann__type {
  font-size: .62rem; letter-spacing: .1em; color: var(--color-text-subtle);
  border: 1px solid var(--color-border); border-radius: var(--r-sm); padding: 1px 5px;
}

/* Session indicator inside the Market mega panel. */
.mega__status { display: inline-flex; margin-top: var(--sp-4); }

/* ============================================================================
   SERVICES LANDING GRID
   ========================================================================= */
.svc-grouphead {
  margin: var(--sp-7) 0 var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-accent);
}
.svc-grouphead:first-child { margin-top: 0; }
.svc-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.svc-grid > * { min-width: 0; }
.svc-card {
  display: block; padding: var(--sp-5);
  background: var(--color-bg-tint);
  border: 1px solid var(--color-border); border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svc-card:hover { border-color: var(--color-accent); text-decoration: none; }
.svc-card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  color: var(--color-accent); background: var(--color-bg);
}
.svc-card__ico svg { width: 21px; height: 21px; display: block; }
.svc-card h3 { margin: 0 0 var(--sp-2); font-size: 1.05rem; color: var(--color-primary); }
.svc-card p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) { .svc-card { transition: none; } }

/* ============================================================================
   INNER PAGE SHELL
   ========================================================================= */

.page-head {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1.2rem + 3vw, 3.5rem);
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(243, 186, 38, .08), transparent 70%),
    linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
  border-bottom: 1px solid var(--color-border);
}
.page-head h1 { max-width: 20ch; margin-bottom: var(--sp-4); }
.page-head .lead { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: 62ch; margin: 0; }

.crumbs { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-bottom: var(--sp-5); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: var(--sp-2); color: var(--color-border-strong); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--color-text-muted); }
.crumbs a:hover { color: var(--color-accent); }

.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--sp-8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-6); }
.prose p, .prose li { color: var(--color-text-muted); }
.prose strong { color: var(--color-text); font-weight: var(--fw-semi); }
.prose ul { padding-left: 1.15rem; margin-bottom: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }

.fact-list { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-block: var(--sp-6); }
.fact { border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--color-bg-tint); }
.fact dt { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--sp-2); }
.fact dd { margin: 0; font-size: var(--fs-sm); color: var(--color-text); }

/* Leadership profiles: real people, real photos, full bios in the HTML so
   they are indexable - not hidden behind a JS-only modal. */
.people { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.person {
  display: grid; gap: var(--sp-5); align-items: start;
  border: 1px solid var(--color-border); border-radius: var(--r-lg);
  background: var(--color-bg-tint); padding: var(--sp-6);
}
@media (min-width: 720px) { .person { grid-template-columns: 148px 1fr; } }
.person__photo {
  width: 148px; height: 148px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(243, 186, 38, .55);
}
.person__name { font-size: 1.3rem; margin-bottom: var(--sp-1); }
.person__role {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--sp-4);
}
.person p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.person p:last-child { margin-bottom: 0; }

/* A nav label whose section is not built yet. Present so the header keeps its
   full shape, but deliberately not an <a>: no href means no crawlable URL,
   so it cannot become a soft 404 while we build the pages behind it. */
.nav-soon {
  display: inline-block; padding: var(--sp-2) var(--sp-1);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--chrome-ink-subtle); letter-spacing: .02em; white-space: nowrap;
  cursor: default; opacity: .62;
}
.drawer__body .nav-soon { display: block; padding: var(--sp-4) 0; font-size: 1.05rem; }

/* ============================================================================
   HOMEPAGE HERO CAROUSEL
   ----------------------------------------------------------------------------
   From the supplied "Almeer Hero Carousel" design. Colours, motifs, timings and
   easing are the design's own and are left untouched — the emerald here is a
   deliberately richer green than the page behind it so the hero reads as a
   distinct panel.

   The design was authored on a fixed 1300x600 artboard with absolute px
   positions. On a real site that would either overflow small screens or leave
   dead space on large ones, so the box is expressed as an aspect-ratio with a
   height clamp, and every type size that was a fixed px value is now a clamp()
   between the design's mobile artboard value and its desktop artboard value.
   At the design's own 1300px width the numbers resolve to the original design.

   There are no images in the artwork — every motif is CSS or inline SVG — so
   the whole hero costs zero extra network requests.
   ========================================================================= */

.hero-carousel { --hero-pad: 1.25rem; --emerald:#063F36; --rich:#08705B; --gold:#C9A227; --softgold:#E0C568; --ivory:#F7F3E8; --char:#17201E; }

.carousel {
  position: relative; width: 100%;
  aspect-ratio: 13 / 6;
  min-height: 460px; max-height: 78vh;
  overflow: hidden; outline: none;
  background: var(--emerald);
}
@media (max-width: 780px) { .carousel { aspect-ratio: 4 / 5; max-height: none; min-height: 560px; } }
/* 88px clears the arrows (20px offset + 44px wide) with room to spare. */
@media (min-width: 900px)  { .hero-carousel { --hero-pad: 5.5rem; } }
@media (min-width: 1500px) { .hero-carousel { --hero-pad: 6.5rem; } }
.carousel:focus-visible { box-shadow: inset 0 0 0 3px rgba(201,162,39,.7); }

.cslide {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.035);
  transition: opacity .8s ease, transform 1.4s ease; pointer-events: none;
}
.cslide.active { opacity: 1; transform: scale(1); pointer-events: auto; }

.hero-carousel .slide {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: linear-gradient(135deg,#08705B 0%,#063F36 55%,#052E28 100%);
}
.hero-carousel .grid-bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(247,243,232,.035) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(247,243,232,.035) 1px,transparent 1px);
  background-size: 64px 64px;
}
.hero-carousel .amb { position: absolute; inset: 0; transform-origin: 62% 62%; }
.carousel.live .cslide.active .amb { animation: amZoom 14s ease-in-out infinite alternate; }

.hero-carousel .scrim-d {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,rgba(5,46,40,.93) 0%,rgba(5,46,40,.62) 44%,rgba(5,46,40,0) 78%);
}
@media (max-width: 780px) {
  .hero-carousel .scrim-d {
    background: linear-gradient(180deg,rgba(5,46,40,.94) 0%,rgba(5,46,40,.72) 46%,rgba(5,46,40,.35) 100%);
  }
}

/* Wordmark block */
.hero-carousel .logo-d {
  position: absolute; left: var(--hero-pad); top: clamp(1.5rem,1rem + 1.6vw,2.75rem);
  display: flex; align-items: center; gap: 16px; z-index: 3;
}
.hero-carousel .logo-d img { width: clamp(40px,3.4vw,54px); height: auto; object-fit: contain; }
.hero-carousel .wm1 { font-family: Manrope,Inter,Arial,sans-serif; font-weight: 800; font-size: clamp(16px,1.4vw,21px); letter-spacing: 3px; color: var(--ivory); line-height: 1.1; }
.hero-carousel .wm2 { font-weight: 500; font-size: clamp(9px,.75vw,11px); letter-spacing: 5.5px; color: var(--gold); line-height: 1.3; }
.hero-carousel .slogan-d {
  position: absolute; right: var(--hero-pad); top: clamp(1.9rem,1.2rem + 2vw,3.7rem);
  font-style: italic; font-size: 14px; letter-spacing: 1px; color: rgba(224,197,104,.85); z-index: 3;
}
@media (max-width: 980px) { .hero-carousel .slogan-d { display: none; } }

/* Copy block */
.hero-carousel .copy-d {
  position: absolute; left: var(--hero-pad); right: var(--hero-pad);
  top: 47%; transform: translateY(-50%);
  max-width: 600px; display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(.7rem,.4rem + .9vw,1.125rem); z-index: 3;
}
@media (max-width: 780px) {
  .hero-carousel .copy-d { top: auto; bottom: clamp(4.5rem,3rem + 8vw,7rem); transform: none; max-width: none; align-items: center; text-align: center; }
  .hero-carousel .chips { justify-content: center; }
}

.hero-carousel .eyebrow {
  /* The site-wide .eyebrow is a pill with a background; the design's hero
     eyebrow is plain text. Explicitly undo the pill here. */
  display: block; background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
  font-size: clamp(11px,.35rem + .55vw,13px); font-weight: 600; letter-spacing: 4px;
  color: var(--softgold); text-transform: uppercase;
}
.hero-carousel .head {
  margin: 0; font-family: Manrope,Inter,Arial,sans-serif; font-weight: 700;
  font-size: clamp(1.85rem,1.1rem + 2.9vw,3.125rem); line-height: 1.12;
  color: #fff; letter-spacing: -0.01em; text-wrap: pretty;
}
.hero-carousel .support {
  margin: 0; font-size: clamp(.95rem,.85rem + .35vw,1.125rem); line-height: 1.55;
  color: rgba(247,243,232,.82); max-width: 470px; text-wrap: pretty;
}
.hero-carousel .chips { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-carousel .chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid rgba(224,197,104,.35); border-radius: 999px;
  background: rgba(5,46,40,.35); font-size: clamp(11px,.35rem + .5vw,13px); color: rgba(247,243,232,.9);
}
.hero-carousel .chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
@media (max-width: 560px) { .hero-carousel .chip:nth-child(n+3) { display: none; } }

.hero-carousel .cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
  padding: clamp(.75rem,.5rem + .7vw,.94rem) clamp(1.3rem,.8rem + 1.6vw,2rem);
  background: var(--gold); color: var(--char); font-weight: 600;
  font-size: clamp(.9rem,.8rem + .3vw,1rem); text-decoration: none; border-radius: 3px;
  box-shadow: 0 4px 18px rgba(201,162,39,.28);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.hero-carousel .cta:hover { background: var(--softgold); color: var(--char); text-decoration: none; transform: translateY(-1px); }

/* Motifs */
.hero-carousel .m-bars { position: absolute; display: flex; align-items: flex-end; transform-origin: bottom; }
.hero-carousel .m-bars > div { flex: 1; }
.hero-carousel .horizon {
  position: absolute; left: 0; right: 0; bottom: 24%; height: 1px;
  background: linear-gradient(90deg,transparent 30%,rgba(201,162,39,.4) 70%,rgba(224,197,104,.6) 100%);
}
.hero-carousel .beam {
  position: absolute; right: -10%; bottom: -30%; width: 70%; height: 160%;
  background: linear-gradient(65deg,rgba(8,112,91,0) 30%,rgba(8,112,91,.45) 60%,rgba(8,112,91,0) 90%);
  transform: skewX(-12deg);
}
.hero-carousel .ring { position: absolute; top: 50%; border-radius: 50%; }

@keyframes amZoom   { from { transform: scale(1); }   to { transform: scale(1.055); } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes growUp   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes drawLine { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes drawShort{ from { stroke-dashoffset: 600; }  to { stroke-dashoffset: 0; } }
@keyframes ringIn   { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes sweepIn  { from { opacity: 0; transform: skewX(-12deg) translateX(14%); } to { opacity: 1; transform: skewX(-12deg) translateX(0); } }

.cslide.active .logo-d, .cslide.active .slogan-d { animation: fadeIn 1s cubic-bezier(.22,1,.36,1) .1s both; }
.cslide.active .st1 { animation: fadeUp .8s cubic-bezier(.22,1,.36,1) .15s both; }
.cslide.active .st2 { animation: fadeUp .9s cubic-bezier(.22,1,.36,1) .3s both; }
.cslide.active .st3 { animation: fadeUp .9s cubic-bezier(.22,1,.36,1) .5s both; }
.cslide.active .st4 { animation: fadeUp .9s cubic-bezier(.22,1,.36,1) .7s both; }
.cslide.active .st5 { animation: fadeUp .9s cubic-bezier(.22,1,.36,1) .9s both; }
.cslide.active .m-bars      { animation: growUp 1.2s cubic-bezier(.22,1,.36,1) .25s both; }
.cslide.active .m-soft      { animation: fadeIn 1.4s cubic-bezier(.22,1,.36,1) .8s both; }
.cslide.active .m-draw      { animation: drawLine 1.8s cubic-bezier(.22,1,.36,1) .35s both; }
.cslide.active .m-draw2     { animation: drawLine 2.2s cubic-bezier(.22,1,.36,1) .6s both; }
.cslide.active .m-drawshort { animation: drawShort 1.4s cubic-bezier(.22,1,.36,1) .4s both; }
.cslide.active .m-dots      { animation: fadeIn .6s ease 1.6s both; }
.cslide.active .m-beam      { animation: sweepIn 1.4s cubic-bezier(.22,1,.36,1) .2s both; }
.cslide.active .m-r1        { animation: ringIn 1s cubic-bezier(.22,1,.36,1) .25s both; }
.cslide.active .m-r2        { animation: ringIn 1.1s cubic-bezier(.22,1,.36,1) .4s both; }
.cslide.active .m-r3        { animation: ringIn 1.2s cubic-bezier(.22,1,.36,1) .55s both; }

/* Controls */
.hero-carousel .arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(247,243,232,.35); background: rgba(5,46,40,.45);
  color: var(--ivory); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 5;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-carousel .arrow--prev { left: 20px; }
.hero-carousel .arrow--next { right: 20px; }
.hero-carousel .arrow:hover { background: rgba(5,46,40,.75); border-color: rgba(224,197,104,.7); }
.hero-carousel .arrow:focus-visible { outline: 2px solid var(--softgold); outline-offset: 2px; }
@media (max-width: 899px) { .hero-carousel .arrow { display: none; } }

.hero-carousel .dots { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 10px; z-index: 5; }
.hero-carousel .dot {
  width: 10px; height: 10px; border-radius: 5px; border: none; padding: 0;
  background: rgba(247,243,232,.4); cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.hero-carousel .dot.on { width: 30px; background: var(--gold); }
.hero-carousel .dot:focus-visible { outline: 2px solid var(--softgold); outline-offset: 3px; }

.trust-band { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); }
.trust-band .hero__trust { margin: 0; padding-block: var(--sp-6); border-top: 0; justify-content: space-between; }

/* Reduced motion: the carousel still advances, but nothing moves or zooms. */
@media (prefers-reduced-motion: reduce) {
  .cslide { transition: none; transform: none; }
  .cslide.active *, .carousel.live .cslide.active .amb { animation: none !important; }
}

/* Regulatory table. Wrapped in an overflow container so a narrow phone scrolls
   the table sideways instead of the whole page. */
.table-wrap { overflow-x: auto; margin-block: var(--sp-6); -webkit-overflow-scrolling: touch; }
.reg-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: var(--fs-sm); }
.reg-table th, .reg-table td { text-align: left; padding: var(--sp-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.reg-table thead th {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-accent);
  border-bottom-color: var(--color-border-strong);
}
.reg-table tbody th { font-family: var(--font-body); font-weight: var(--fw-semi); color: var(--color-text); width: 38%; }
.reg-table tbody td { color: var(--color-text-muted); }
.reg-table tbody tr:last-child th, .reg-table tbody tr:last-child td { border-bottom: 0; }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block: var(--sp-6); }

/* ============================================================================
   LEARNING HUB
   ========================================================================= */
.lh-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: var(--sp-6); }
.lh-card {
  display: block; padding: var(--sp-6); border-radius: var(--r-lg);
  border: 1px solid var(--color-border); background: var(--color-bg-tint);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lh-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.lh-card h2, .lh-card h3 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.lh-card p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
.lh-card__more { display: inline-block; margin-top: var(--sp-4); font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-accent); }

/* Article layout: sticky contents rail beside the text on wide screens. */
.article-wrap { display: grid; gap: var(--sp-7); }
@media (min-width: 1040px) { .article-wrap { grid-template-columns: 250px 1fr; } }
.toc { align-self: start; }
@media (min-width: 1040px) { .toc { position: sticky; top: calc(var(--header-h) + 1rem); } }
.toc h2 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--sp-3); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.toc a { color: var(--color-text-muted); }
.toc a:hover { color: var(--color-accent); }
.toc a::before { content: counter(toc) ". "; color: var(--color-text-subtle); }

.article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-xs); color: var(--color-text-subtle); margin-bottom: var(--sp-5); }
.article-meta strong { color: var(--color-text-muted); font-weight: var(--fw-medium); }
.lead-para { font-size: var(--fs-lead); color: var(--color-text); }

.prose h2[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose ol.steps { padding-left: 1.3rem; margin-bottom: var(--sp-5); }
.prose ol.steps li { margin-bottom: var(--sp-3); color: var(--color-text-muted); }

.note {
  border-left: 3px solid var(--color-accent); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--color-bg-tint); padding: var(--sp-4) var(--sp-5); margin-block: var(--sp-5);
}
.note p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.callout {
  border: 1px solid var(--color-accent); border-radius: var(--r-lg);
  background: var(--brand-accent-soft); padding: var(--sp-5); margin-block: var(--sp-6);
}
.callout p { margin: 0; color: var(--color-text); font-weight: var(--fw-medium); }

.takeaways { border: 1px solid var(--color-border-strong); border-radius: var(--r-lg); background: var(--color-bg-tint); padding: var(--sp-6); margin-block: var(--sp-7); }
.takeaways h2 { margin-top: 0; }
.takeaways ul { padding-left: 1.15rem; margin: 0; }
.takeaways li { margin-bottom: var(--sp-2); color: var(--color-text-muted); }

.faq-item { border-bottom: 1px solid var(--color-border); padding-block: var(--sp-4); }
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 { font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-semi); color: var(--color-text); margin-bottom: var(--sp-2); }
.faq-item p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

.disclaimer { border-top: 1px solid var(--color-border); margin-top: var(--sp-8); padding-top: var(--sp-5); font-size: var(--fs-xs); color: var(--color-text-subtle); }
.pager { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; margin-top: var(--sp-7); }