/* ============================================================
   Emirae.Pro - Editorial ARTICLE single (design-system re-skin)

   FAITHFUL port of ui_kits/emirae-guide-article/index.html +
   guide-article.css, which itself builds on the approved editorial
   system in ui_kits/emirae-audience-freelancers/audience.css
   (.au-article, .au-list, .au-steps-list, .au-table, .au-callout,
   .au-scard, .au-form) and the shared shell (.shero, .section).

   Everything is scoped under `.emirae-article-page` (the wrapper div
   also carries `.uaec-ds`, which supplies the tokens). The legacy
   Tailwind `.uaec-prose` / `.uaec-editorial-article` /
   `.uaec-audience-layout` classes are NOT used by the new template,
   so those rules in the compiled main.css can never match here - no
   overriding, no !important, and no other page that still uses them
   (single-tools.php) is affected.

   IMPORTANT - the article body comes from the_content(), i.e. BARE
   tags (h2/h3/p/ul/ol/table/blockquote/figure). Tailwind Preflight in
   main.css strips heading sizes, list markers and margins from those
   tags site-wide, so §5 below restates every typographic property
   explicitly instead of relying on any UA default.

   Routes: single uae_guide / uae_work / uae_basics / uae_resource /
   uae_comparison (+ uae_document, uae_use_case, uae_compliance, which
   already share template-parts/editorial/single-content.php).
   Palette: navy + blues + white. Reduced motion honored.
   ============================================================ */

.emirae-article-page { background: var(--surface); }
.emirae-article-page [id] { scroll-margin-top: 150px; }

/* ============================================================
   1. HERO - navy band (.shero), ported from the audience port
   ============================================================ */
.emirae-article-page .shero {
  position: relative; overflow: hidden; color: #fff; padding-top: 76px; margin-top: -76px;
  background: linear-gradient(168deg, #0c1325 0%, #122039 52%, #16243f 100%);
}
.emirae-article-page .shero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(820px 440px at 82% -20%, color-mix(in srgb, var(--blue-600) 56%, transparent), transparent 60%),
    radial-gradient(640px 420px at 4% 12%, color-mix(in srgb, var(--blue-stroke) 22%, transparent), transparent 60%);
}
.emirae-article-page .shero::after {
  content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 82%); mask-image: linear-gradient(180deg, #000, transparent 82%);
}
/* kit: .shero__inner padding-top = --page-hero-top-spacing (26px), and
   .ga-hero .shero__inner { padding-bottom: 46px } */
.emirae-article-page .shero__inner { position: relative; z-index: 1; padding-top: 26px; padding-bottom: 46px; }
@media (max-width: 640px) { .emirae-article-page .shero__inner { padding-top: 18px; } }

/* breadcrumbs - kit .crumbs, --breadcrumb-to-title-gap: 26px */
.emirae-article-page .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-xs); margin-bottom: 26px; }
@media (max-width: 640px) { .emirae-article-page .crumbs { margin-bottom: 22px; } }
.emirae-article-page .crumbs a { color: rgba(255,255,255,.6); transition: color var(--dur) var(--ease); }
.emirae-article-page .crumbs a:hover { color: #fff; }
.emirae-article-page .crumbs span[aria-current] { color: rgba(255,255,255,.92); font-weight: var(--fw-medium); }
.emirae-article-page .crumbs svg { width: 14px; height: 14px; color: rgba(255,255,255,.32); flex: none; }

.emirae-article-page .ga-hero__grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 960px) { .emirae-article-page .ga-hero__grid { grid-template-columns: 1.15fr 1fr; gap: 50px; } }
.emirae-article-page .ga-hero__lead { min-width: 0; }
.emirae-article-page .ga-hero__media { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.emirae-article-page .ga-hero h1 {
  font-size: clamp(29px, 3.9vw, 44px); line-height: 1.06; letter-spacing: -0.03em;
  font-weight: var(--fw-bold); color: #fff; margin: 0 0 18px; text-wrap: balance;
}
/* no quick-answer card → the H1 is the whole left column, so it must not
   sit tight against the hero floor */
.emirae-article-page .ga-hero h1:last-child { margin-bottom: 0; }

/* ---- Quick answer card (hero, on dark) ---- */
.emirae-article-page .ga-quickans {
  position: relative; isolation: isolate; margin: 0 0 20px; padding: 18px 22px 16px 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.025) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 44px -30px rgba(0,0,0,.6);
}
.emirae-article-page .ga-quickans:last-child { margin-bottom: 0; }
.emirae-article-page .ga-quickans::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--navy-tint));
}
.emirae-article-page .ga-quickans__label {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--navy-tint);
}
.emirae-article-page .ga-quickans__label svg { width: 15px; height: 15px; flex: none; }
.emirae-article-page .ga-quickans p { font-size: var(--fs-sm); line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 10px; max-width: 62ch; }
.emirae-article-page .ga-quickans p:last-of-type { margin-bottom: 0; }
.emirae-article-page .ga-quickans a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.emirae-article-page .ga-quickans__jump {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .01em;
  color: var(--navy-tint); text-decoration: none; transition: color var(--dur) var(--ease);
}
.emirae-article-page .ga-quickans__jump svg { width: 14px; height: 14px; flex: none; transition: transform var(--dur) var(--ease); }
.emirae-article-page .ga-quickans__jump:hover { color: #fff; text-decoration: none; }
.emirae-article-page .ga-quickans__jump:hover svg { transform: translateY(2px); }

/* ---- author metadata row above the featured image ---- */
.emirae-article-page .ga-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.emirae-article-page .ga-meta__author { display: inline-flex; align-items: center; gap: 10px; text-align: right; }
.emirae-article-page .ga-meta__who { display: flex; flex-direction: column; min-width: 0; }
.emirae-article-page .ga-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: linear-gradient(155deg, #24344f, #16243f); border: 1px solid rgba(255,255,255,.22);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--navy-tint); overflow: hidden;
}
.emirae-article-page .ga-meta__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #fff; line-height: 1.2; }
.emirae-article-page .ga-meta__role { display: block; font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }
.emirae-article-page .ga-meta__facts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; color: rgba(255,255,255,.6); }
.emirae-article-page .ga-meta__facts > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.emirae-article-page .ga-meta__facts svg { width: 13px; height: 13px; flex: none; color: var(--navy-tint); }
.emirae-article-page .ga-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); flex: none; }

/* ---- layered / geometric image composition ---- */
.emirae-article-page .ga-figure-wrap { position: relative; isolation: isolate; }
.emirae-article-page .ga-figure-wrap__accent {
  position: absolute; z-index: 0; right: -18px; bottom: -18px; width: 118px; height: 118px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%);
  transform: rotate(18deg);
}
.emirae-article-page .ga-figure-wrap__lines {
  position: absolute; z-index: 0; left: -12px; top: -12px; width: 112px; height: 112px;
  border-radius: 8px; opacity: .5;
  background-image: repeating-linear-gradient(135deg, var(--navy-tint) 0 1px, transparent 1px 9px);
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 72%); mask-image: linear-gradient(135deg, #000, transparent 72%);
}
.emirae-article-page .ga-figure {
  position: relative; z-index: 1; margin: 0; border-radius: var(--radius-2xl); overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 34px 70px -34px rgba(0,0,0,.7);
  background: #0e1626; isolation: isolate;
}
.emirae-article-page .ga-figure::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); border-radius: inherit;
}
.emirae-article-page .ga-figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.emirae-article-page .ga-figure__slant {
  position: absolute; z-index: 3; top: 0; right: 0; width: 48%; height: 62%; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 1px, transparent 1px 11px);
  opacity: .32;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 62%); mask-image: linear-gradient(225deg, #000 0%, transparent 62%);
}

/* ============================================================
   2. HERO VARIANT B - no featured image (animated panel)
   ============================================================ */
.emirae-article-page .ga-noimg {
  position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: 210px; padding: 6px 2px;
}
.emirae-article-page .ga-noimg::after {
  content: ""; position: absolute; z-index: -2; top: 50%; right: 8%; width: 250px; height: 250px;
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 62%);
  filter: blur(10px); animation: emArtGlow 7s ease-in-out infinite;
}
@keyframes emArtGlow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .5; }
  50% { transform: translate(-6%, 4%) scale(1.12); opacity: .82; }
}
.emirae-article-page .ga-noimg__rings {
  position: absolute; z-index: -1; top: 50%; right: 9%; transform: translateY(-50%);
  width: 176px; height: 176px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 26px rgba(255,255,255,.05), 0 0 0 56px rgba(255,255,255,.03);
  animation: emArtPulse 6s ease-in-out infinite;
}
@keyframes emArtPulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: .7; }
  50% { transform: translateY(-50%) scale(1.06); opacity: 1; }
}
.emirae-article-page .ga-noimg__inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; width: 100%; }
.emirae-article-page .ga-noimg__eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--navy-tint); }
.emirae-article-page .ga-noimg__author { display: flex; align-items: center; gap: 15px; }
.emirae-article-page .ga-noimg__avatar {
  flex: none; width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
  background: linear-gradient(155deg, #24344f, #16243f); border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.7);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--navy-tint); overflow: hidden;
}
.emirae-article-page .ga-noimg__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.emirae-article-page .ga-noimg__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: #fff; letter-spacing: -0.01em; }
.emirae-article-page .ga-noimg__role { font-size: var(--fs-xs); color: rgba(255,255,255,.6); }
.emirae-article-page .ga-noimg__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.emirae-article-page .ga-noimg__pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: rgba(255,255,255,.82);
}
.emirae-article-page .ga-noimg__pill svg { width: 14px; height: 14px; flex: none; color: var(--navy-tint); }
/* kit rule: the no-image variant carries author + meta inside the panel */
.emirae-article-page[data-hero-variant="noimage"] .ga-hero__media > .ga-meta { display: none; }

/* ============================================================
   3. LAYOUT - article + sticky sidebar
   ============================================================ */
.emirae-article-page .au-layout { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; padding-block: 60px 80px; }
@media (min-width: 1000px) {
  .emirae-article-page .au-layout { grid-template-columns: minmax(0, 1fr) 352px; gap: 48px; padding-block: 72px 96px; }
}
.emirae-article-page .au-article { min-width: 0; color: var(--text); }
.emirae-article-page .au-block + .au-block { margin-top: 60px; }
.emirae-article-page .au-block--tint { background: var(--tint, #f1f6fd); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 30px 32px; }
@media (max-width: 560px) { .emirae-article-page .au-block--tint { padding: 24px 20px; } }

/* ============================================================
   4. ON THIS PAGE - TOC card
   ============================================================ */
.emirae-article-page .ga-toc {
  margin: 0 0 33px; border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--tint, #f1f6fd) 0%, var(--surface) 78%);
  box-shadow: var(--shadow-xs); overflow: hidden;
}
.emirae-article-page .ga-toc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong);
}
.emirae-article-page .ga-toc > summary::-webkit-details-marker { display: none; }
.emirae-article-page .ga-toc__ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center;
  justify-content: center; background: var(--accent-soft); color: var(--accent);
}
.emirae-article-page .ga-toc__ico svg { width: 17px; height: 17px; }
.emirae-article-page .ga-toc__label { flex: 1; }
.emirae-article-page .ga-toc__count { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.emirae-article-page .ga-toc__caret { flex: none; width: 18px; height: 18px; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.emirae-article-page .ga-toc[open] .ga-toc__caret { transform: rotate(180deg); }
.emirae-article-page .ga-toc__list {
  list-style: none; margin: 0; padding: 4px 12px 16px; counter-reset: emtoc;
  display: grid; grid-template-columns: 1fr; gap: 1px 24px;
}
@media (min-width: 620px) { .emirae-article-page .ga-toc__list { grid-template-columns: 1fr 1fr; } }
.emirae-article-page .ga-toc__list li { counter-increment: emtoc; }
.emirae-article-page .ga-toc__list a {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md);
  font-size: var(--fs-sm); line-height: 1.4; color: var(--text-secondary); text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.emirae-article-page .ga-toc__list a::before {
  content: counter(emtoc, decimal-leading-zero); flex: none; font-size: 11px;
  font-weight: var(--fw-bold); color: var(--accent); opacity: .7; font-variant-numeric: tabular-nums;
}
.emirae-article-page .ga-toc__list a:hover { background: var(--accent-soft); color: var(--accent-hover); }

/* ============================================================
   5. ARTICLE PROSE - the_content() emits BARE tags, so every
      typographic property is restated here. Values are taken
      verbatim from the kit's .au-article / .au-list /
      .au-steps-list / .au-table / .ga-quote rules.
   ============================================================ */
.emirae-article-page .au-prose { min-width: 0; }
/* Scope discipline: every rule below is anchored on `.au-prose`, never on
   `.au-article`. `.au-article` is the column ROOT, so an element selector on
   it (e.g. `.au-article p`) would outrank the component rules further down
   (.ga-sources__note, .ga-author__bio, .au-table-swipe, …) and reset them to
   body size. Components live outside `.au-prose` by design. */

/* ---- headings ---- */
.emirae-article-page .au-prose h2 {
  font-size: clamp(24px, 2.6vw, 31px); line-height: 1.14; letter-spacing: -0.025em;
  font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 14px; text-wrap: balance;
}
/* content H2s are not wrapped in .au-block sections, so the 60px block
   rhythm is reproduced as a top margin on every H2 after the first */
.emirae-article-page .au-prose > h2 { margin-top: 60px; }
.emirae-article-page .au-prose > *:first-child { margin-top: 0; }

.emirae-article-page .au-prose h3 {
  font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em;
  font-weight: var(--fw-bold); color: var(--text-strong); margin: 36px 0 12px;
}
.emirae-article-page .au-prose h4 {
  font-size: var(--fs-body); line-height: 1.35; letter-spacing: -0.01em;
  font-weight: var(--fw-bold); color: var(--text-strong); margin: 28px 0 10px;
}
/* heading → first paragraph gap is the heading's own bottom margin; a heading
   that is immediately followed by text must not add the paragraph's top gap */
.emirae-article-page .au-prose :is(h2, h3, h4) + p { margin-top: 0; }

/* ---- paragraphs ---- */
.emirae-article-page .au-prose p {
  font-size: var(--fs-body); line-height: 1.72; color: var(--text-secondary); margin: 0 0 18px;
}
.emirae-article-page .au-prose p:last-child { margin-bottom: 0; }
.emirae-article-page .au-prose .au-lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.66; color: var(--text); }

.emirae-article-page .au-prose strong { color: var(--text-strong); font-weight: var(--fw-medium); }
.emirae-article-page .au-prose em { font-style: italic; }

/* ---- inline links (kit: .au-article a.inline, guide override) ---- */
.emirae-article-page .au-prose a,
.emirae-article-page .au-article a.inline {
  color: var(--accent); font-weight: var(--fw-medium); border-bottom: 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2.5px;
  text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.emirae-article-page .au-prose a:hover,
.emirae-article-page .au-article a.inline:hover {
  color: var(--accent-hover); text-decoration-color: var(--accent-hover); text-decoration-thickness: 2px;
}

/* ---- bullet lists (kit: .au-list.au-list--dot + guide indent override) ---- */
.emirae-article-page .au-prose ul,
.emirae-article-page .au-article .au-list {
  list-style: none; margin: 6px 0 20px; padding: 0 0 0 35px;
  display: flex; flex-direction: column; gap: 13px;
}
.emirae-article-page .au-prose ul li,
.emirae-article-page .au-article .au-list li {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); padding-left: 0;
}
/* refined circle bullet (kit replaces the rotated diamond on guide pages) */
.emirae-article-page .au-prose ul > li::before,
.emirae-article-page .au-article .au-list--dot li::before {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%;
  background: var(--accent); transform: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.emirae-article-page .au-prose ul li > p { margin: 0; font-size: inherit; line-height: inherit; }
.emirae-article-page .au-prose ul b,
.emirae-article-page .au-article .au-list b { color: var(--text-strong); font-weight: var(--fw-medium); }

/* ---- numbered lists (kit: .au-steps-list) ---- */
.emirae-article-page .au-prose ol,
.emirae-article-page .au-article .au-steps-list {
  list-style: none; counter-reset: emstep; margin: 10px 0 12px; padding: 0 0 0 35px;
  display: flex; flex-direction: column; gap: 16px;
}
.emirae-article-page .au-prose ol > li,
.emirae-article-page .au-article .au-steps-list li {
  display: flex; gap: 16px; align-items: flex-start;
  font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary);
}
.emirae-article-page .au-prose ol > li::before,
.emirae-article-page .au-article .au-steps-list li::before {
  counter-increment: emstep; content: counter(emstep);
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-hover);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
}
/* the number badge is 34px tall; nudge the text onto its optical centre */
.emirae-article-page .au-prose ol > li > * { margin-top: 0; }
.emirae-article-page .au-prose ol > li > p:first-child { padding-top: 5px; }
.emirae-article-page .au-prose ol li > p { margin: 0 0 6px; font-size: inherit; line-height: inherit; }
.emirae-article-page .au-prose ol li > p:last-child { margin-bottom: 0; }
.emirae-article-page .au-article .au-steps-list li h4 { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); margin: 5px 0 4px; }
.emirae-article-page .au-article .au-steps-list li p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }

/* ---- nested lists ----
   No published article currently nests a list; these rules keep the
   rhythm consistent if one is added, using a lighter second-level
   marker so the levels read apart. */
.emirae-article-page .au-prose li > ul,
.emirae-article-page .au-prose li > ol { margin: 10px 0 0; padding-left: 22px; gap: 9px; width: 100%; }
.emirae-article-page .au-prose li > ul > li,
.emirae-article-page .au-prose li > ol > li { font-size: var(--fs-sm); line-height: 1.6; }
.emirae-article-page .au-prose li > ul > li::before {
  width: 6px; height: 6px; margin-top: 8px;
  background: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: none;
}
.emirae-article-page .au-prose li > ol { counter-reset: emsubstep; }
.emirae-article-page .au-prose li > ol > li::before {
  counter-increment: emsubstep; content: counter(emsubstep);
  width: 24px; height: 24px; border-radius: 7px; font-size: var(--fs-xs);
}
.emirae-article-page .au-prose li > ol > li > p:first-child { padding-top: 1px; }

/* ---- tables (kit: .au-table-wrap / .au-table-scroll / .au-table) ---- */
.emirae-article-page .au-table-wrap {
  margin: 22px 0 20px; border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden;
}
.emirae-article-page .au-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.emirae-article-page .au-table-wrap table,
.emirae-article-page .au-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--fs-sm); }
.emirae-article-page .au-table-wrap thead th,
.emirae-article-page .au-table thead th {
  text-align: left; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
  background: var(--gray-50); padding: 14px 18px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.emirae-article-page .au-table-wrap tbody td,
.emirae-article-page .au-table tbody td {
  padding: 15px 18px; border-bottom: 1px solid var(--border); color: var(--text-secondary);
  line-height: 1.55; vertical-align: top;
}
.emirae-article-page .au-table-wrap tbody tr:last-child td,
.emirae-article-page .au-table tbody tr:last-child td { border-bottom: 0; }
.emirae-article-page .au-table-wrap tbody tr,
.emirae-article-page .au-table tbody tr { transition: background var(--dur) var(--ease); }
.emirae-article-page .au-table-wrap tbody tr:hover,
.emirae-article-page .au-table tbody tr:hover { background: var(--accent-soft); }
.emirae-article-page .au-table-wrap :is(td, th):first-child,
.emirae-article-page .au-table :is(td, th):first-child { font-weight: var(--fw-bold); color: var(--text-strong); }
/* Sticky first column, td and th together. Sticking only td let the header of
   column one scroll away from the cells it labels. */
.emirae-article-page .au-table-wrap :is(td, th):first-child,
.emirae-article-page .au-table :is(td, th):first-child { position: sticky; left: 0; }
.emirae-article-page .au-table-wrap td:first-child,
.emirae-article-page .au-table td:first-child { background: var(--surface); }
.emirae-article-page .au-table-wrap tbody tr:hover td:first-child,
.emirae-article-page .au-table tbody tr:hover td:first-child { background: var(--accent-soft); }
.emirae-article-page .au-table-wrap td p { margin: 0 0 6px; font-size: inherit; line-height: inherit; }
.emirae-article-page .au-table-wrap td p:last-child { margin-bottom: 0; }
.emirae-article-page .au-table-swipe {
  display: none; align-items: center; gap: 7px; padding: 10px 16px; font-size: 11px;
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-muted); border-top: 1px solid var(--border); background: var(--gray-50);
}
.emirae-article-page .au-table-swipe svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 640px) { .emirae-article-page .au-table-swipe { display: flex; } }
/* Phones: cap the first column so the data is reachable. Measured before this
   rule, the first column ran from 100px to 473px inside a 340px scroller, so on
   the worst page the whole screen was labels. 40vw leaves the rest of the row
   visible. Same breakpoint as .au-table-swipe, and nothing here applies above it. */
@media (max-width: 640px) {
  .emirae-article-page .au-table-wrap :is(td, th):first-child,
  .emirae-article-page .au-table :is(td, th):first-child {
    width: 40vw; max-width: 40vw; white-space: normal; overflow-wrap: break-word; hyphens: auto;
  }
}

/* ---- pull quote (kit: .ga-quote) - bare <blockquote> in content ---- */
.emirae-article-page .au-prose blockquote,
.emirae-article-page .ga-quote {
  position: relative; margin: 26px 0; padding: 26px 28px 26px 30px;
  border-radius: var(--radius-xl); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.emirae-article-page .au-prose blockquote::before,
.emirae-article-page .ga-quote::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  border-radius: 3px; background: var(--accent);
}
.emirae-article-page .au-prose blockquote p,
.emirae-article-page .ga-quote p {
  font-size: clamp(18px, 1.9vw, 21px); line-height: 1.5; font-weight: var(--fw-medium);
  color: var(--text-strong); letter-spacing: -0.01em; margin: 0 0 12px; max-width: 46ch;
}
.emirae-article-page .au-prose blockquote p:last-child,
.emirae-article-page .ga-quote p:last-child { margin-bottom: 0; }
.emirae-article-page .ga-quote__mark {
  position: absolute; top: 16px; right: 22px; width: 34px; height: 34px;
  color: color-mix(in srgb, var(--accent) 24%, transparent);
}
.emirae-article-page .au-prose blockquote cite {
  display: block; margin-top: 10px; font-size: var(--fs-sm); font-style: normal;
  font-weight: var(--fw-medium); color: var(--text-secondary);
}

/* ---- callouts (kit: .au-callout) - content ships aside/div.callout ---- */
.emirae-article-page .au-callout {
  display: flex; gap: 14px; align-items: flex-start; margin: 24px 0; padding: 20px 22px;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-alt);
}
.emirae-article-page .au-callout__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.emirae-article-page .au-callout__ic svg { width: 18px; height: 18px; }
.emirae-article-page .au-callout__b { min-width: 0; }
.emirae-article-page .au-callout__b h4 { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); margin: 3px 0 5px; }
.emirae-article-page .au-callout__b p { font-size: var(--fs-sm); line-height: 1.62; color: var(--text-secondary); margin: 0 0 8px; }
.emirae-article-page .au-callout__b p:last-child { margin-bottom: 0; }
.emirae-article-page .au-callout__b ul { margin: 8px 0 0; }
.emirae-article-page .au-callout--note { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.emirae-article-page .au-callout--note .au-callout__ic { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.emirae-article-page .au-callout--info { background: var(--info-50); border-color: color-mix(in srgb, var(--info-500) 24%, transparent); }
.emirae-article-page .au-callout--info .au-callout__ic { background: color-mix(in srgb, var(--info-500) 14%, #fff); color: var(--info-500); }
.emirae-article-page .au-callout--caution { background: var(--warning-50); border-color: color-mix(in srgb, var(--warning-500) 34%, transparent); }
.emirae-article-page .au-callout--caution .au-callout__ic { background: color-mix(in srgb, var(--warning-500) 24%, #fff); color: #9a7511; }
.emirae-article-page .au-callout--caution .au-callout__b h4 { color: #7a5c0a; }

/* ---- in-body images + captions ----
   The kit has no in-article figure; this reuses the kit's own image
   frame tokens (.ga-figure radius/border/shadow) on the light band. */
.emirae-article-page .au-prose figure { margin: 26px 0; }
.emirae-article-page .au-prose figure img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-xl);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); background: var(--surface-alt);
}
.emirae-article-page .au-prose figcaption {
  margin-top: 10px; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-muted); text-align: center;
}
.emirae-article-page .au-prose figcaption a { font-size: inherit; }
.emirae-article-page .au-prose > img { display: block; margin: 26px 0; width: 100%; height: auto; border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.emirae-article-page .au-prose p > img { border-radius: var(--radius-lg); border: 1px solid var(--border); }
/* a table wrapped in <figure class="table-wrap"> keeps the table frame, not the image frame */
.emirae-article-page .au-prose figure.au-table-wrap { margin: 22px 0 20px; }

.emirae-article-page .au-prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--border); }
.emirae-article-page .au-prose code {
  font-family: var(--font-mono); font-size: .92em; padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--surface-alt); color: var(--text-strong);
}

/* ============================================================
   6. FAQ - editorial, inline with the body (no box, no accordion)
   ============================================================ */
.emirae-article-page .ga-faq h2 { margin-bottom: 6px; }
.emirae-article-page .ga-faq h3:first-of-type { margin-top: 28px; }
.emirae-article-page .ga-faq h3 + p { margin-top: 0; }
.emirae-article-page .ga-faq h3:not(:first-of-type) {
  margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--border);
}
.emirae-article-page .ga-faq p { margin-bottom: 14px; }
.emirae-article-page .ga-faq p:last-child { margin-bottom: 0; }

/* ============================================================
   7. SOURCES
   ============================================================ */
.emirae-article-page .ga-sources {
  margin-top: 26px; border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-xs); padding: 22px 24px;
}
.emirae-article-page .ga-sources__h { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: 4px; }
.emirae-article-page .ga-sources__h svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
.emirae-article-page .ga-sources__note { font-size: var(--fs-xs); color: var(--text-muted); margin: 0 0 14px; }
.emirae-article-page .ga-sources ol { list-style: none; counter-reset: emsrc; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.emirae-article-page .ga-sources li { counter-increment: emsrc; border-top: 1px solid var(--border); display: block; }
.emirae-article-page .ga-sources li:first-child { border-top: 0; }
.emirae-article-page .ga-sources li::before { content: none; }
.emirae-article-page .ga-sources a {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: var(--fs-sm);
  font-weight: var(--fw-medium); color: var(--text); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.emirae-article-page .ga-sources a::before {
  content: counter(emsrc); flex: none; width: 24px; height: 24px; border-radius: 7px;
  background: var(--surface-alt); color: var(--text-secondary); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center;
}
.emirae-article-page .ga-sources a .dom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emirae-article-page .ga-sources a .ext { flex: none; width: 15px; height: 15px; color: var(--text-muted); transition: color var(--dur) var(--ease); }
.emirae-article-page .ga-sources a:hover { color: var(--accent); }
.emirae-article-page .ga-sources a:hover::before { background: var(--accent-soft); color: var(--accent-hover); }
.emirae-article-page .ga-sources a:hover .ext { color: var(--accent); }
.emirae-article-page .ga-sources .ga-sources__plain { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.emirae-article-page .ga-sources .ga-sources__plain::before {
  content: counter(emsrc); flex: none; width: 24px; height: 24px; border-radius: 7px;
  background: var(--surface-alt); color: var(--text-secondary); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   8. AUTHOR BIO CARD
   ============================================================ */
.emirae-article-page .ga-author {
  margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 20px;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, var(--tint, #f1f6fd) 0%, var(--surface) 60%);
  box-shadow: var(--shadow-sm); padding: 28px 30px;
}
@media (min-width: 620px) { .emirae-article-page .ga-author { grid-template-columns: auto 1fr; gap: 26px; } }
.emirae-article-page .ga-author__avatar {
  flex: none; width: 84px; height: 84px; border-radius: 20px; object-fit: cover;
  border: 1px solid var(--border-strong);
  background: linear-gradient(155deg, var(--accent-soft), #fff);
  box-shadow: 0 10px 24px -12px rgba(56,132,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: var(--fw-bold); color: var(--accent); overflow: hidden;
}
.emirae-article-page .ga-author__eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); }
.emirae-article-page .ga-author__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; margin: 6px 0 2px; }
.emirae-article-page .ga-author__role { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); margin-bottom: 12px; }
.emirae-article-page .ga-author__bio { font-size: var(--fs-sm); line-height: 1.66; color: var(--text-secondary); margin: 0 0 10px; }
.emirae-article-page .ga-author__more {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  font-weight: var(--fw-bold); color: var(--accent); text-decoration: none;
}
.emirae-article-page .ga-author__more svg { width: 15px; height: 15px; flex: none; transition: transform var(--dur) var(--ease); }
.emirae-article-page .ga-author__more:hover svg { transform: translateX(3px); }
.emirae-article-page .ga-author__reviewed { margin-top: 10px; font-size: var(--fs-xs); color: var(--text-muted); }

/* ============================================================
   9. IN-ARTICLE CTA - "Need help with this?"
   ============================================================ */
.emirae-article-page .ga-cta {
  position: relative; overflow: hidden; isolation: isolate; margin: 26px 0 0;
  border-radius: var(--radius-2xl); padding: 34px; color: #fff;
  background: linear-gradient(150deg, #0b1220 0%, #122039 58%, #16243f 100%);
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 34px 74px -40px rgba(6,14,30,.7);
}
.emirae-article-page .ga-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 0, #000, transparent 72%);
  mask-image: radial-gradient(120% 120% at 100% 0, #000, transparent 72%);
}
.emirae-article-page .ga-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 300px at 92% -20%, color-mix(in srgb, var(--accent) 44%, transparent), transparent 60%);
}
.emirae-article-page .ga-cta__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--navy-tint);
}
.emirae-article-page .ga-cta__eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--accent); }
.emirae-article-page .ga-cta h2 { font-size: clamp(22px, 2.5vw, 28px); line-height: 1.12; letter-spacing: -0.02em; color: #fff; margin: 0 0 10px; }
.emirae-article-page .ga-cta p { font-size: var(--fs-sm); line-height: 1.6; color: rgba(255,255,255,.76); margin: 0 0 22px; max-width: 58ch; }
.emirae-article-page .ga-cta p:last-of-type { margin-bottom: 22px; }
.emirae-article-page .ga-cta a:not(.uaec-btn) { color: #fff; text-decoration: underline; text-underline-offset: 2.5px; text-decoration-color: rgba(255,255,255,.45); }
.emirae-article-page .ga-cta a:not(.uaec-btn):hover { text-decoration-color: #fff; }
.emirae-article-page .ga-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.emirae-article-page .ga-cta .btn-on-blue { background: #fff; color: var(--accent-hover); border-color: #fff; }
.emirae-article-page .ga-cta .btn-on-blue:hover { color: var(--accent-pressed); transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(8,18,42,.5); }
.emirae-article-page .ga-cta .btn-ghost-blue { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.24); }
.emirae-article-page .ga-cta .btn-ghost-blue:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
@media (max-width: 460px) {
  .emirae-article-page .ga-cta { padding: 28px 22px; }
  .emirae-article-page .ga-cta__btns { flex-direction: column; }
  .emirae-article-page .ga-cta__btns .uaec-btn { width: 100%; }
}

/* ============================================================
   10. STICKY SIDEBAR
   ============================================================ */
.emirae-article-page .au-layout > aside { min-width: 0; }
.emirae-article-page .au-side { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1000px) {
  .emirae-article-page .au-layout > aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}
.emirae-article-page .au-scard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.emirae-article-page .au-scard__head--form {
  position: relative; overflow: hidden; isolation: isolate; padding: 17px 20px 15px; color: #fff;
  background: linear-gradient(158deg, #16243f 0%, var(--navy-800) 100%);
}
.emirae-article-page .au-scard__head--form::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
}
.emirae-article-page .au-scard__head--form::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 0, #000, transparent 72%);
  mask-image: radial-gradient(120% 120% at 100% 0, #000, transparent 72%);
}
.emirae-article-page .au-headrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.emirae-article-page .au-scard__head--form h2,
.emirae-article-page .au-scard__head--form h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: #fff; margin: 0; letter-spacing: -0.01em; }
.emirae-article-page .au-hbadge {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: var(--radius-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .01em; color: #fff;
}
.emirae-article-page .au-hbadge svg { width: 12px; height: 12px; flex: none; color: var(--navy-tint); }
.emirae-article-page .au-scard__head--form p { font-size: var(--fs-xs); line-height: 1.55; color: rgba(255,255,255,.74); margin: 6px 0 0; }
.emirae-article-page .au-trustline { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11px; font-weight: var(--fw-medium); color: rgba(255,255,255,.8); }
.emirae-article-page .au-trustline svg { flex: none; width: 13px; height: 13px; color: var(--success-500); }
.emirae-article-page .au-scard__body { padding: 15px 20px 18px; }

/* sidebar link-list cards */
.emirae-article-page .au-scard__title { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 4px; }
.emirae-article-page .au-scard__title svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.emirae-article-page .au-slinks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.emirae-article-page .au-slinks li::before { content: none; }
.emirae-article-page .au-slink {
  display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); text-decoration: none;
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.emirae-article-page .au-slinks li:first-child .au-slink { border-top: 0; }
.emirae-article-page .au-slink .lead { width: 16px; height: 16px; color: var(--accent); opacity: .85; flex: none; }
.emirae-article-page .au-slink > span { min-width: 0; }
.emirae-article-page .au-slink .go { width: 15px; height: 15px; color: var(--text-muted); margin-left: auto; flex: none; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.emirae-article-page .au-slink:hover { color: var(--accent); gap: 13px; }
.emirae-article-page .au-slink:hover .go { color: var(--accent); transform: translateX(2px); }

/* ============================================================
   11. QUICK REQUEST - the canonical Tailwind partial
       (template-parts/forms/quick-request-compact.php) rendered
       inside .au-scard__body and re-skinned to the kit's .au-form.
       Markup, field names, JS and submit pipeline are untouched;
       only presentation is mapped here.
   ============================================================ */
.emirae-article-page .au-scard__body .uaec-qrc-card { border: 0; box-shadow: none; padding: 0; border-radius: 0; background: transparent; }
/* the card's own heading + intro are rendered by the dark head above */
.emirae-article-page .au-scard__body .uaec-qrc-card > h2,
.emirae-article-page .au-scard__body .uaec-qrc-card > p:first-of-type { display: none; }
.emirae-article-page .uaec-qrc-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 0; }
.emirae-article-page .uaec-qrc-card .qrc-step > div + div { margin-top: 10px; }
.emirae-article-page .uaec-qrc-card label.sr-only,
.emirae-article-page .uaec-qrc-card .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Field skin.
   Matched ONLY through the partial's own .uaec-input / .uaec-select classes,
   never through bare `input[type=...]` / `select` / `textarea` selectors.

   Why that matters: contact-fields.js rewrites the phone input's class to
   `pf__num` and wraps it in the `.pf` shell, which draws the border. A bare
   `input[type="tel"]` selector here (0,3,1) outranks the shell's own
   `.uaec-ds .pf__num` reset (0,2,0), so the input kept its border, radius and
   focus ring INSIDE the shell - the double outline. The same rule also hit the
   country panel's unclassed search input.

   Every field the partial renders carries .uaec-input or .uaec-select, so the
   element selectors were redundant as well as harmful. Before the script
   mounts, the phone input still has .uaec-input and is styled normally, which
   keeps the no-JS fallback looking right. */
.emirae-article-page .uaec-qrc-card .uaec-input,
.emirae-article-page .uaec-qrc-card .uaec-select {
  width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 10px 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.emirae-article-page .uaec-qrc-card textarea.uaec-input { resize: vertical; min-height: 58px; }
.emirae-article-page .uaec-qrc-card .uaec-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px;
}
.emirae-article-page .uaec-qrc-card :is(.uaec-input, .uaec-select)::placeholder { color: var(--text-muted); }
.emirae-article-page .uaec-qrc-card :is(.uaec-input, .uaec-select):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.emirae-article-page .uaec-qrc-card p { font-size: 11px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.emirae-article-page .uaec-qrc-card .qrc-step > div > p { margin-top: 4px; }
/* stepper: the partial's dot row, restyled into the kit's .au-steps track */
.emirae-article-page .uaec-qrc-card #\.progress,
.emirae-article-page .uaec-qrc-card [id$="-progress"] { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.emirae-article-page .uaec-qrc-card .qrc-dot {
  display: inline-flex; width: 10px; height: 10px; border-radius: 50%;
  background: var(--border-strong); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.emirae-article-page .uaec-qrc-card .qrc-dot.is-active { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.emirae-article-page .uaec-qrc-card [id$="-progress-label"] { font-size: 11.5px; font-weight: var(--fw-medium); color: var(--text-secondary); }
/* nav row + buttons */
.emirae-article-page .uaec-qrc-card .qrc-nav { display: flex; gap: 9px; margin-top: 4px; }
.emirae-article-page .uaec-qrc-card .qrc-nav.justify-end { justify-content: flex-end; }
.emirae-article-page .uaec-qrc-card .qrc-nav .uaec-btn { flex: 1; justify-content: center; }
.emirae-article-page .uaec-qrc-card .qrc-nav .uaec-btn--outline,
.emirae-article-page .uaec-qrc-card .qrc-nav .uaec-btn--secondary { flex: 0 0 34%; }
.emirae-article-page .uaec-qrc-card .uaec-btn--outline {
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
}
.emirae-article-page .uaec-qrc-card .uaec-btn--outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* consent row */
.emirae-article-page .uaec-qrc-card [id$="-consent"] { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--accent); }
.emirae-article-page .uaec-qrc-card label[for$="-consent"] { font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.emirae-article-page .uaec-qrc-card label[for$="-consent"] a { color: var(--accent); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 2px; }
/* messages + fallback banners */
.emirae-article-page .uaec-qrc-card [id$="-messages"] { font-size: 12px; line-height: 1.45; border-radius: var(--radius-md); }
.emirae-article-page .uaec-qrc-card [id$="-messages"] ul { padding-left: 18px; margin: 0; list-style: disc; display: block; }
.emirae-article-page .uaec-qrc-card [id$="-messages"] li { display: list-item; }
.emirae-article-page .uaec-qrc-card [id$="-messages"] li::before { content: none; }
/* "Open Full Request Form" line */
.emirae-article-page .uaec-qrc-card form > p:last-of-type { text-align: center; font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; }
.emirae-article-page .uaec-qrc-card form > p:last-of-type a { color: var(--accent); font-weight: var(--fw-bold); text-decoration: none; }
.emirae-article-page .uaec-qrc-card form > p:last-of-type a:hover { text-decoration: underline; }

/* ============================================================
   12. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .emirae-article-page .ga-noimg::after,
  .emirae-article-page .ga-noimg__rings { animation: none; }
  .emirae-article-page .ga-toc__caret,
  .emirae-article-page .ga-author__more svg,
  .emirae-article-page .ga-quickans__jump svg,
  .emirae-article-page .au-slink,
  .emirae-article-page .au-slink .go,
  .emirae-article-page .au-table tbody tr,
  .emirae-article-page .au-table-wrap tbody tr { transition: none; }
}

/* ============================================================
   13. NARROW SCREENS
   ============================================================ */
@media (max-width: 640px) {
  .emirae-article-page .au-prose ul,
  .emirae-article-page .au-prose ol,
  .emirae-article-page .au-article .au-list,
  .emirae-article-page .au-article .au-steps-list { padding-left: 10px; }
  .emirae-article-page .au-prose blockquote,
  .emirae-article-page .ga-quote { padding: 22px 20px 22px 24px; }
  .emirae-article-page .ga-sources,
  .emirae-article-page .ga-author { padding: 22px 20px; }
  .emirae-article-page .ga-toc > summary { padding: 14px 16px; }
  .emirae-article-page .ga-toc__list { padding: 4px 8px 14px; }
  .emirae-article-page .au-block + .au-block { margin-top: 44px; }
  .emirae-article-page .au-prose > h2 { margin-top: 44px; }
}

/* ============================================================
   14. SHARE ROW - hero (dark) + end of article (light)

   Ported from the kit's SHARE ROW section
   (ui_kits/emirae-guide-article/guide-article.share.css). Two changes:

     - every selector is scoped with .emirae-article-page, like every other
       rule in this file, so nothing here can reach a page that does not
       render the block;

     - the kit's `[data-hero-variant="noimage"] .ga-hero__media > .ga-share--hero
       { display: none }` rule is dropped. The kit ships BOTH hero variants in
       one document and hides the one the toggle is not showing. The template
       resolves the variant server-side and renders exactly one branch, so that
       selector can never match here.

   Tap target is 44x44; the visible pill is inset 2px via a transparent border
   plus background-clip, so the hit area stays legal on a phone while the pill
   still looks the size the design asked for.
   ============================================================ */
.emirae-article-page .ga-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.emirae-article-page .ga-share__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.emirae-article-page .ga-share__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0; background-clip: padding-box; background-color: transparent; border: 2px solid transparent; border-radius: var(--radius-pill); font-family: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.emirae-article-page .ga-share__btn > svg { width: 18px; height: 18px; flex: none; }
.emirae-article-page .ga-share__btn--text > svg { margin-left: 12px; }
.emirae-article-page .ga-share__btn--text > .ga-share__txt { margin-right: 14px; white-space: nowrap; }
.emirae-article-page .ga-share__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.emirae-article-page .ga-share__ico--check { display: none; }
.emirae-article-page .ga-share__btn.is-copied .ga-share__ico--link { display: none; }
.emirae-article-page .ga-share__btn.is-copied .ga-share__ico--check { display: inline-block; }
.emirae-article-page .ga-share__btn--native { display: none; }
.emirae-article-page .ga-share.is-native .ga-share__btn--native { display: inline-flex; }

/* per-network tint (muted, used for the icon and the hover wash only) */
.emirae-article-page .ga-share__btn[data-share="whatsapp"] { --sh: #1da851; }
.emirae-article-page .ga-share__btn[data-share="telegram"] { --sh: #229ed9; }
.emirae-article-page .ga-share__btn[data-share="linkedin"] { --sh: #0a66c2; }
.emirae-article-page .ga-share__btn[data-share="x"] { --sh: var(--text-strong); }
.emirae-article-page .ga-share__btn[data-share="facebook"] { --sh: #1877f2; }
.emirae-article-page .ga-share__btn[data-share="email"],
.emirae-article-page .ga-share__btn[data-share="copy"],
.emirae-article-page .ga-share__btn[data-share="native"] { --sh: var(--accent); }

/* hero - dark background, inverse fills */
.emirae-article-page .ga-share--hero .ga-share__btn { background-color: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: color-mix(in srgb, var(--sh) 45%, #fff); }
.emirae-article-page .ga-share--hero .ga-share__btn[data-share="x"] { color: #fff; }
.emirae-article-page .ga-share--hero .ga-share__btn:hover { background-color: color-mix(in srgb, var(--sh) 26%, rgba(255,255,255,.10)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sh) 45%, rgba(255,255,255,.16)); color: #fff; }
.emirae-article-page .ga-share--hero .ga-share__btn.is-copied { background-color: var(--accent); color: #fff; }
.emirae-article-page .ga-noimg__inner .ga-share--hero { margin-top: 2px; }

/* end of article - light background */
.emirae-article-page .ga-share--footer { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.emirae-article-page .ga-share__label { font-size: var(--fs-sm); color: var(--text-secondary); margin-right: auto; }
.emirae-article-page .ga-share--footer .ga-share__btn { background-color: color-mix(in srgb, var(--sh) 7%, var(--surface-alt)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sh) 22%, var(--border-strong)); color: var(--sh); }
.emirae-article-page .ga-share--footer .ga-share__btn:hover { background-color: var(--sh); box-shadow: inset 0 0 0 1px var(--sh); color: #fff; }
.emirae-article-page .ga-share--footer .ga-share__btn.is-copied { background-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: #fff; }

@media (max-width: 560px) {
  .emirae-article-page .ga-share--footer { gap: 10px; }
  .emirae-article-page .ga-share__label { flex: 0 0 100%; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .emirae-article-page .ga-share__btn { transition: none; }
}

/* Both rows are hidden on a phone from 2026-08-10: the mobile bottom bar
   carries a Share button with the same eight destinations, and two share
   controls one scroll apart is one too many. The rule could not exist before
   the bar did - hiding the rows on their own would have left the phone with no
   way to share at all - which is why it ships with it and not earlier.

   Hidden, not removed: the desktop rows are untouched, and the breakpoint is
   the bar's own, so the two can never both be absent. */
@media (max-width: 1023px) {
  .emirae-article-page .ga-share--hero,
  .emirae-article-page .ga-share--footer { display: none; }
}

/* ---- prose list items: keep the inline content in one flow ----
   `.au-prose ul li` and `.au-prose ol > li` are flex containers with a gap. A
   flex container turns every inline chunk into its own flex item, so a link or
   a <strong> inside a sentence gets the whole gap opened before and after it,
   and each chunk wraps on its own line. The gap was only ever meant to separate
   the marker from the text, so the marker is taken out of flow and the item
   goes back to being an ordinary block.
   Diagnosed 2026-08-04, fixed 2026-08-11. Scope is deliberately the prose lists
   only: the kit lists (.au-list, .au-steps-list) hold block children, where the
   flex gap is the intended spacing between them. */
.emirae-article-page .au-prose ul li {
  display: block;
  padding-left: 21px;            /* 9px bullet plus the 12px gap it used to sit in */
}
.emirae-article-page .au-prose ul > li::before {
  position: absolute;
  left: 0;
  top: 7px;                      /* replaces the margin-top it had as a flex item */
  margin-top: 0;
}
.emirae-article-page .au-prose ol > li {
  display: block;
  position: relative;
  padding-left: 50px;            /* 34px badge plus the 16px gap it used to sit in */
  min-height: 34px;              /* a single-line item must not collapse under the badge */
}
.emirae-article-page .au-prose ol > li::before {
  position: absolute;
  left: 0;
  top: 0;
}
/* the nested lists were sized as flex items; as blocks they take their own width */
.emirae-article-page .au-prose li > ul,
.emirae-article-page .au-prose li > ol { width: auto; }