/* COVERAGE (41 ba-* hooks): ba-page, ba-progress, ba-hero, ba-wrap, ba-breadcrumb,
   ba-hero-grid, ba-kicker, ba-title, ba-lead, ba-meta, ba-image, ba-panel, ba-answer,
   ba-search, ba-btn, ba-primary, ba-action, ba-stats, ba-stat, ba-section, ba-grid,
   ba-info, ba-layout, ba-content, ba-side, ba-card, ba-toc, ba-chips, ba-chip,
   ba-service, ba-service-card, ba-service-top, ba-avatar, ba-price, ba-faq, ba-related,
   ba-article-card, ba-article-img, ba-final, ba-final-box, ba-mobile-cta */

/* =====================================================================
   askaide.com — blog article / conseil editorial — akmk 3D reskin (2026)
   Scope  : everything inside main.ba-page (root wrapper), reading col .ba-wrap
   Markup : frozen — this sheet only restyles existing .ba-* hooks (CSS-only)
   Theme  : light tokens on main.ba-page; dark declared TWICE —
            html[data-theme="dark"] main.ba-page AND
            @media(prefers-color-scheme:dark){html:not([data-theme="light"]) main.ba-page}
   Guards : shared public-deep-pages sheet + legacy 2026 sheet force fills/borders
            (and h1 font via !important, tokens not flipped in dark → white-on-light).
            The GUARD block at the bottom (html body main.ba-page …!important) wins.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,600;10..48,700;10..48,800&family=Figtree:wght@400;500;600;700;800&display=swap');

/* ── 1. TOKENS (akmk light) — main.ba-page (0,1,1) beats shared .ba-page (0,1,0) ── */
main.ba-page {
  --ground:#FAF7F2; --surface:#FFFFFF; --surface-2:#F4F0E8; --raise:#FBF9F5;
  --ink:#191C26; --ink-soft:#565B6B; --ink-faint:#8B8F9C; --line:#ECE6DC; --line-2:#DED7C9;
  --primary:#2B4CF0; --primary-ink:#FFFFFF; --primary-soft:#EAEEFF; --primary-line:#CFD8FF; --violet:#6A4BF2;
  --accent:#FF6A45; --accent-soft:#FFEDE7; --accent-ink:#B33A1E;
  --trust:#0FA968; --trust-soft:#E3F6ED; --trust-ink:#0A7A4B; --gold:#F5A623;
  --shadow:0 1px 1px rgba(25,28,38,.05),0 4px 8px -3px rgba(25,28,38,.10),0 16px 30px -12px rgba(25,28,38,.16);
  --lift:0 24px 44px -14px rgba(25,28,38,.24),0 46px 100px -30px rgba(43,76,240,.28);
  --edge:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(25,28,38,.03);
  --r:26px; --r-sm:15px; --r-pill:999px;
  --display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --measure:70ch; --ring:rgba(43,76,240,.4); color-scheme:light;
}
html[data-theme="dark"] main.ba-page {
  --ground:#0E1017; --surface:#171A22; --surface-2:#1E2230; --raise:#1B1F29;
  --ink:#F1EFEA; --ink-soft:#A7ABB8; --ink-faint:#767B8B; --line:#272B37; --line-2:#353B4B;
  --primary:#6B84FF; --primary-ink:#0C1024; --primary-soft:#1A2242; --primary-line:#2C3768; --violet:#8B78FF;
  --accent:#FF7E5C; --accent-soft:#39241D; --accent-ink:#FFB59F;
  --trust:#34D399; --trust-soft:#122A20; --trust-ink:#7EE9BE; --gold:#FBBF52;
  --shadow:0 1px 1px rgba(0,0,0,.5),0 6px 14px -6px rgba(0,0,0,.6),0 20px 40px -16px rgba(0,0,0,.72);
  --lift:0 28px 54px -16px rgba(0,0,0,.8),0 56px 116px -34px rgba(107,132,255,.42);
  --edge:inset 0 1.5px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35); --ring:rgba(107,132,255,.5);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) main.ba-page {
    --ground:#0E1017; --surface:#171A22; --surface-2:#1E2230; --raise:#1B1F29;
    --ink:#F1EFEA; --ink-soft:#A7ABB8; --ink-faint:#767B8B; --line:#272B37; --line-2:#353B4B;
    --primary:#6B84FF; --primary-ink:#0C1024; --primary-soft:#1A2242; --primary-line:#2C3768; --violet:#8B78FF;
    --accent:#FF7E5C; --accent-soft:#39241D; --accent-ink:#FFB59F;
    --trust:#34D399; --trust-soft:#122A20; --trust-ink:#7EE9BE; --gold:#FBBF52;
    --shadow:0 1px 1px rgba(0,0,0,.5),0 6px 14px -6px rgba(0,0,0,.6),0 20px 40px -16px rgba(0,0,0,.72);
    --lift:0 28px 54px -16px rgba(0,0,0,.8),0 56px 116px -34px rgba(107,132,255,.42);
    --edge:inset 0 1.5px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35); --ring:rgba(107,132,255,.5);
    color-scheme:dark;
  }
}

/* ── 2. PAGE GROUND — aurora + dot grid ── */
main.ba-page {
  position:relative; isolation:isolate; overflow-x:clip; min-height:100vh;
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6; letter-spacing:0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
main.ba-page *, main.ba-page *::before, main.ba-page *::after{ box-sizing:border-box; }
main.ba-page::before,
main.ba-page::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; }
main.ba-page::before {
  background:
    radial-gradient(46% 34% at 6% 2%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 70%),
    radial-gradient(38% 30% at 24% 8%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 72%),
    radial-gradient(42% 34% at 96% 3%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%),
    radial-gradient(40% 40% at 92% 98%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 72%);
  filter:blur(6px);
}
main.ba-page::after {
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) .6px,transparent .7px);
  background-size:24px 24px; opacity:.4;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 46%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 46%);
}
main.ba-page :is(a,p,span,small,strong,em,li,b,summary,time,figcaption){ font-family:var(--body); }
main.ba-page :is(h1,h2,h3,h4,.ba-title,.ba-btn){ font-family:var(--display); }

/* wrapper — comfortable editorial width */
.ba-page .ba-wrap{ width:min(1180px,calc(100% - 40px)); margin-inline:auto; }

/* ── 3. READING PROGRESS BAR ── */
.ba-page .ba-progress {
  position:fixed; inset-block-start:0; inset-inline-start:0; height:3px; width:0; z-index:10000;
  background:linear-gradient(90deg,var(--primary),var(--violet),var(--accent));
  box-shadow:0 0 12px color-mix(in srgb,var(--primary) 55%,transparent);
}

/* ── 4. HERO ── */
.ba-page .ba-hero{ padding:40px 0 20px; }
.ba-page .ba-breadcrumb {
  display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:0 0 20px; padding:0;
  list-style:none; color:var(--ink-faint); font-size:.86rem; font-weight:600;
}
.ba-page .ba-breadcrumb a {
  display:inline-flex; align-items:center; min-height:34px; color:var(--ink-soft);
  text-decoration:none; border-radius:var(--r-pill); transition:color .2s;
}
.ba-page .ba-breadcrumb a:hover{ color:var(--primary); }
.ba-page .ba-breadcrumb li:not(:last-child)::after{ content:"/"; margin-inline-start:8px; color:var(--line-2); }
.ba-page .ba-breadcrumb li:last-child{ color:var(--ink-soft); }

.ba-page .ba-hero-grid {
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr); gap:36px; align-items:start;
}
.ba-page .ba-kicker {
  display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:5px 14px; margin:0 0 6px;
  border-radius:var(--r-pill); background:var(--primary-soft); border:1px solid var(--primary-line);
  color:var(--primary); font-size:.74rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:var(--edge);
}
.ba-page .ba-kicker::before {
  content:""; width:7px; height:7px; border-radius:50%; background:var(--primary);
  box-shadow:0 0 0 3px var(--primary-line);
}
.ba-page .ba-title {
  margin:16px 0 0; font-family:var(--display); font-size:clamp(2.1rem,4vw,3.4rem); font-weight:800;
  line-height:1.06; letter-spacing:-.025em; color:var(--ink); text-wrap:balance;
}
.ba-page .ba-lead {
  max-width:var(--measure); margin:18px 0 0; color:var(--ink-soft);
  font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.6;
}
.ba-page .ba-meta{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.ba-page .ba-meta span {
  display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 13px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface);
  color:var(--ink-soft); font-size:.84rem; font-weight:600; box-shadow:var(--edge);
}
.ba-page .ba-meta span:first-child{ color:var(--ink); font-weight:700; }
.ba-page .ba-image {
  margin-top:28px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:var(--surface-2); box-shadow:var(--shadow); aspect-ratio:16/8;
}
.ba-page .ba-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── 5. HERO PANEL — sticky "quick answer" card ── */
.ba-page .ba-panel {
  position:sticky; top:18px; padding:24px; border-radius:var(--r);
  border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow:var(--shadow),var(--edge);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
}
.ba-page .ba-panel h2 {
  margin:0 0 12px; font-family:var(--display); font-size:1.12rem; font-weight:800;
  letter-spacing:-.01em; color:var(--ink);
}
.ba-page .ba-panel h2::before {
  content:""; display:inline-block; width:9px; height:9px; margin-inline-end:9px; border-radius:50%;
  background:var(--trust); box-shadow:0 0 0 4px var(--trust-soft); vertical-align:middle;
}
.ba-page .ba-answer {
  padding:16px 18px; border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink); font-size:.98rem; line-height:1.6;
}
.ba-page .ba-search{ margin-top:16px; display:grid; gap:10px; }

/* buttons */
.ba-page .ba-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:12px 22px; border:1.5px solid transparent; border-radius:14px;
  font-family:var(--display); font-size:1rem; font-weight:700; letter-spacing:-.01em; line-height:1.2;
  text-decoration:none; cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.8,.3,1.1),box-shadow .25s,filter .2s,border-color .2s,background .2s,color .2s;
}
.ba-page .ba-primary {
  background:linear-gradient(135deg,var(--primary),var(--violet)); color:var(--primary-ink);
  box-shadow:var(--shadow),0 8px 20px -8px color-mix(in srgb,var(--primary) 70%,transparent),inset 0 1.5px 0 rgba(255,255,255,.28);
}
.ba-page .ba-primary::after {
  content:""; position:absolute; top:-20%; inset-inline-start:-70%; width:45%; height:140%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-18deg);
  transition:inset-inline-start .6s cubic-bezier(.2,.8,.2,1); pointer-events:none;
}
.ba-page .ba-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); color:var(--primary-ink); box-shadow:var(--lift),inset 0 1.5px 0 rgba(255,255,255,.28); }
.ba-page .ba-primary:hover::after{ inset-inline-start:130%; }
.ba-page .ba-primary:active{ transform:translateY(0) scale(.99); }
.ba-page .ba-action {
  background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--gold)));
  color:#2A0F06; border-color:transparent;
  box-shadow:var(--shadow),0 8px 20px -8px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 1.5px 0 rgba(255,255,255,.3);
}
html[data-theme="dark"] .ba-page .ba-action{ color:#2A0F06; }
.ba-page .ba-action:hover{ transform:translateY(-2px); filter:brightness(1.05); color:#2A0F06; box-shadow:var(--lift),inset 0 1.5px 0 rgba(255,255,255,.3); }
.ba-page .ba-action:active{ transform:translateY(0) scale(.99); }

.ba-page .ba-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:16px; }
.ba-page .ba-stat {
  padding:12px 10px; border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--line); box-shadow:var(--edge); text-align:center;
}
.ba-page .ba-stat b{ display:block; font-family:var(--display); font-size:1.15rem; font-weight:800; color:var(--ink); }
.ba-page .ba-stat span{ display:block; margin-top:3px; color:var(--ink-soft); font-size:.72rem; font-weight:600; }

/* ── 6. INTRO STRIP — key-takeaway cards ── */
.ba-page .ba-section{ padding:28px 0; }
.ba-page .ba-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ba-page .ba-info {
  padding:20px 22px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow),var(--edge);
}
.ba-page .ba-info b {
  display:block; margin-bottom:9px; font-family:var(--display); font-weight:800; font-size:1.02rem;
  color:var(--ink); letter-spacing:-.01em;
}
.ba-page .ba-info p{ margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.6; }

/* ── 7. ARTICLE LAYOUT + TOC ── */
.ba-page .ba-layout {
  width:min(1180px,calc(100% - 40px)); margin-inline:auto; display:grid;
  grid-template-columns:minmax(0,1fr) 288px; gap:36px; align-items:start;
}
.ba-page .ba-content {
  padding:clamp(28px,3.4vw,54px); border-radius:var(--r); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow),var(--edge);
}
/* editorial measure: prose ~68-72ch, media allowed full card width */
.ba-page .ba-content > :is(p,ul,ol,h2,h3,h4,blockquote,dl){ max-width:var(--measure); }
.ba-page .ba-content :is(p,li){ color:var(--ink); font-size:1.08rem; line-height:1.78; }
.ba-page .ba-content > p:first-of-type{ font-size:1.2rem; line-height:1.7; color:var(--ink); }
.ba-page .ba-content h2 {
  font-family:var(--display); font-size:clamp(1.5rem,2.6vw,1.95rem); font-weight:800; line-height:1.18;
  letter-spacing:-.02em; margin:2.1em 0 .5em; color:var(--ink); scroll-margin-top:84px; text-wrap:balance;
}
.ba-page .ba-content h2::before {
  content:""; display:block; width:44px; height:4px; margin-bottom:.5em; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--primary),var(--violet));
}
.ba-page .ba-content h3 {
  font-family:var(--display); font-size:clamp(1.2rem,1.9vw,1.4rem); font-weight:700; line-height:1.28;
  letter-spacing:-.01em; margin:1.7em 0 .45em; color:var(--ink); scroll-margin-top:84px;
}
.ba-page .ba-content h4{ font-family:var(--display); font-size:1.1rem; font-weight:700; margin:1.4em 0 .4em; color:var(--ink); }
.ba-page .ba-content :is(ul,ol){ padding-inline-start:1.35em; margin:1.1em 0; }
.ba-page .ba-content li{ margin:.5em 0; padding-inline-start:.2em; }
.ba-page .ba-content li::marker{ color:var(--primary); font-weight:700; }
.ba-page .ba-content a {
  color:var(--primary); font-weight:600; text-decoration:underline;
  text-decoration-color:var(--primary-line); text-underline-offset:3px; text-decoration-thickness:2px;
  transition:text-decoration-color .2s,color .2s;
}
.ba-page .ba-content a:hover{ text-decoration-color:var(--primary); }
.ba-page .ba-content strong{ color:var(--ink); font-weight:700; }
.ba-page .ba-content img {
  max-width:100%; height:auto; border-radius:var(--r-sm); border:1px solid var(--line);
  box-shadow:var(--shadow); margin:1.6em 0;
}
.ba-page .ba-content blockquote {
  margin:1.8em 0; padding:18px 24px; border-radius:var(--r-sm); background:var(--primary-soft);
  border-inline-start:4px solid var(--primary); color:var(--ink); font-size:1.12rem; line-height:1.65;
}
.ba-page .ba-content blockquote p{ margin:0; color:var(--ink); }
.ba-page .ba-content :is(hr){ margin:2.4em auto; max-width:var(--measure); border:0; height:1px; background:var(--line-2); }
.ba-page .ba-content table {
  width:100%; margin:1.6em 0; border-collapse:separate; border-spacing:0; font-size:.98rem;
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--edge);
}
.ba-page .ba-content thead th{ background:var(--surface-2); color:var(--ink); font-family:var(--display); }
.ba-page .ba-content :is(td,th){ padding:12px 14px; text-align:start; border-bottom:1px solid var(--line); color:var(--ink); }
.ba-page .ba-content tr:last-child :is(td,th){ border-bottom:0; }
.ba-page .ba-content :is(code,kbd) {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
  padding:.15em .4em; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); color:var(--accent-ink);
}
.ba-page .ba-content pre {
  margin:1.6em 0; padding:18px 20px; overflow-x:auto; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line); box-shadow:var(--edge);
}
.ba-page .ba-content pre code{ padding:0; border:0; background:none; color:var(--ink); }

/* sidebar */
.ba-page .ba-side{ display:grid; gap:16px; position:sticky; top:18px; }
.ba-page .ba-card {
  padding:20px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow),var(--edge);
}
.ba-page .ba-card h3 {
  margin:0 0 14px; font-family:var(--display); font-size:1.02rem; font-weight:800; letter-spacing:-.01em; color:var(--ink);
}
.ba-page .ba-toc{ display:grid; gap:4px; }
.ba-page .ba-toc a {
  display:flex; align-items:center; min-height:40px; padding:8px 12px; border-radius:12px;
  color:var(--ink-soft); text-decoration:none; font-size:.9rem; font-weight:600; line-height:1.35;
  border-inline-start:2px solid transparent; transition:background .2s,color .2s,border-color .2s;
}
.ba-page .ba-toc a.active, .ba-page .ba-toc a:hover {
  background:var(--primary-soft); color:var(--primary); border-inline-start-color:var(--primary);
}
.ba-page .ba-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ba-page .ba-chip {
  display:inline-flex; align-items:center; min-height:36px; padding:6px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink); text-decoration:none;
  font-size:.84rem; font-weight:600; line-height:1.3; white-space:normal;
  transition:transform .2s,background .2s,border-color .2s,color .2s,box-shadow .2s;
}
a.ba-chip:hover {
  transform:translateY(-2px); background:var(--primary-soft); border-color:var(--primary-line);
  color:var(--primary); box-shadow:var(--shadow);
}

/* ── 8. NEARBY SERVICES ── */
.ba-page .ba-service{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ba-page .ba-service-card, .ba-page .ba-article-card {
  display:block; padding:18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line);
  color:var(--ink); text-decoration:none; box-shadow:var(--shadow),var(--edge);
  transition:transform .24s cubic-bezier(.2,.8,.3,1.1),box-shadow .24s,border-color .2s;
}
.ba-page .ba-service-card:hover, .ba-page .ba-article-card:hover {
  transform:translateY(-4px); box-shadow:var(--lift),var(--edge); border-color:var(--primary-line);
}
.ba-page .ba-service-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ba-page .ba-avatar {
  width:44px; height:44px; border-radius:50%; object-fit:cover; display:block;
  background:var(--surface-2); border:1px solid var(--line);
}
.ba-page .ba-price {
  display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:var(--r-pill);
  background:var(--trust-soft); color:var(--trust-ink); font-family:var(--display); font-weight:800; font-size:.86rem;
  border:1px solid color-mix(in srgb,var(--trust) 30%,transparent);
}
.ba-page .ba-service-card h3, .ba-page .ba-article-card h3 {
  margin:0 0 8px; font-family:var(--display); font-size:1.05rem; font-weight:700; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ba-page .ba-service-card p, .ba-page .ba-article-card p {
  margin:0; color:var(--ink-soft); font-size:.9rem; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── 9. FAQ ── */
.ba-page .ba-faq{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ba-page .ba-faq details {
  border-radius:var(--r); background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow),var(--edge); overflow:hidden; transition:border-color .2s;
}
.ba-page .ba-faq details[open]{ border-color:var(--primary-line); }
.ba-page .ba-faq summary {
  display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
  padding:18px 20px; font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink);
  list-style:none;
}
.ba-page .ba-faq summary::-webkit-details-marker{ display:none; }
.ba-page .ba-faq summary::after {
  content:""; flex:0 0 auto; width:11px; height:11px; border-inline-end:2.4px solid var(--ink-soft);
  border-block-end:2.4px solid var(--ink-soft); transform:rotate(45deg); transition:transform .25s; margin-inline-start:auto;
}
.ba-page .ba-faq details[open] summary::after{ transform:rotate(-135deg); }
.ba-page .ba-faq p{ margin:0; padding:0 20px 20px; color:var(--ink-soft); font-size:.96rem; line-height:1.6; }

/* ── 10. RELATED ── */
.ba-page .ba-related{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ba-page .ba-article-card .ba-chip{ margin-bottom:10px; }
.ba-page .ba-article-img {
  aspect-ratio:16/9; margin:-2px -2px 14px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line);
}
.ba-page .ba-article-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── 11. FINAL CTA ── */
.ba-page .ba-final{ padding:34px 0 56px; }
.ba-page .ba-final-box {
  display:flex; align-items:center; justify-content:space-between; gap:22px; padding:32px 34px;
  border-radius:var(--r); border:1px solid var(--primary-line); color:var(--primary-ink);
  background:linear-gradient(135deg,var(--primary),var(--violet));
  box-shadow:var(--lift); overflow:hidden; position:relative;
}
.ba-page .ba-final-box::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 120% at 90% 0%,rgba(255,255,255,.18),transparent 60%);
}
.ba-page .ba-final-box > *{ position:relative; }
.ba-page .ba-final-box h2{ margin:0; font-family:var(--display); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; letter-spacing:-.02em; color:var(--primary-ink); }
.ba-page .ba-final-box p{ margin:8px 0 0; color:color-mix(in srgb,var(--primary-ink) 84%,transparent); font-size:1rem; }
.ba-page .ba-final .ba-action{ flex:0 0 auto; }

/* ── 12. MOBILE STICKY CTA ── */
.ba-page .ba-mobile-cta{ display:none; }

/* ── 13. RESPONSIVE ── */
@media (max-width: 1024px) {
  .ba-page .ba-hero-grid{ grid-template-columns:1fr; gap:26px; }
  .ba-page .ba-panel{ position:static; }
  .ba-page .ba-layout{ grid-template-columns:minmax(0,1fr) 252px; gap:26px; }
  .ba-page .ba-service, .ba-page .ba-related{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .ba-page .ba-layout{ grid-template-columns:1fr; }
  .ba-page .ba-side{ position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .ba-page .ba-wrap, .ba-page .ba-layout{ width:min(1180px,calc(100% - 28px)); }
  .ba-page .ba-hero{ padding:26px 0 14px; }
  .ba-page .ba-grid{ grid-template-columns:1fr; }
  .ba-page .ba-content{ padding:26px 22px; }
  .ba-page .ba-content :is(p,li){ font-size:1.02rem; line-height:1.72; }
  .ba-page .ba-faq{ grid-template-columns:1fr; }
  .ba-page .ba-final-box{ flex-direction:column; align-items:flex-start; }
  .ba-page .ba-final .ba-action{ width:100%; }
}
@media (max-width: 640px) {
  .ba-page .ba-side{ grid-template-columns:1fr; }
  .ba-page .ba-service, .ba-page .ba-related{ grid-template-columns:1fr; }
  .ba-page .ba-stats{ grid-template-columns:repeat(3,1fr); }
  .ba-page .ba-image{ aspect-ratio:16/10; border-radius:20px; }
  .ba-page .ba-content{ border-radius:20px; }
  main.ba-page{ padding-bottom:84px; }
  .ba-page .ba-mobile-cta {
    position:fixed; inset-inline:12px; inset-block-end:12px; z-index:60; display:grid;
    grid-template-columns:1fr 1fr; gap:8px; padding:8px;
    background:color-mix(in srgb,var(--surface) 82%,transparent); border:1px solid var(--line);
    border-radius:var(--r-sm); box-shadow:var(--lift);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
  .ba-page .ba-mobile-cta .ba-btn{ min-height:46px; padding:10px 12px; font-size:.9rem; }
}
@media (max-width: 380px) {
  .ba-page .ba-wrap, .ba-page .ba-layout{ width:calc(100% - 20px); }
  .ba-page .ba-stats{ grid-template-columns:1fr; }
  .ba-page .ba-mobile-cta{ grid-template-columns:1fr; }
  main.ba-page{ padding-bottom:128px; }
}

/* ── 14. A11Y — focus, reduced-motion, RTL ── */
html body main.ba-page :is(a,button,summary,input,select,textarea):focus-visible {
  outline:3px solid var(--primary); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce) {
  main.ba-page *, main.ba-page *::before, main.ba-page *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}
/* RTL — the frozen markup carries dir on <main class="ba-page">, not on <html>;
   :is() also covers a layout that may stamp html[dir] as well. */
:is(html[dir="rtl"] main.ba-page, main.ba-page[dir="rtl"]) .ba-primary::after{ transform:skewX(18deg); }
:is(html[dir="rtl"] main.ba-page, main.ba-page[dir="rtl"]) .ba-faq summary::after{ transform:rotate(135deg); }
:is(html[dir="rtl"] main.ba-page, main.ba-page[dir="rtl"]) .ba-faq details[open] summary::after{ transform:rotate(-45deg); }

/* =====================================================================
   GUARD — the shared public-deep-pages sheet and the legacy 2026 sheet
   force fills/borders/colours (h1 font via !important) with tokens that
   never flip in dark → white-on-light. Every selector below is
   html body main.ba-page … (0,3,2)+ and !important where the source is,
   so it wins in both themes. Card containers → surface tokens; no forced
   full-width section bands exist here, so none need transparent.
   ===================================================================== */

/* h1 title — shared forces Fraunces + colour + size !important (0,3,1); reclaim akmk display */
html body .ba-page .ba-hero h1.ba-title {
  font-family:var(--display) !important; color:var(--ink) !important;
  font-size:clamp(2.1rem,4vw,3.4rem) !important; font-weight:800 !important;
  line-height:1.06 !important; letter-spacing:-.025em !important; max-width:none !important;
}
@media (max-width: 640px){
  html body .ba-page .ba-hero h1.ba-title{ font-size:clamp(1.55rem,8vw,2.05rem) !important; line-height:1.1 !important; }
}
@media (max-width: 380px){
  html body .ba-page .ba-hero h1.ba-title{ font-size:1.55rem !important; }
}
/* restore site-wide Arabic heading policy (Bricolage has no Arabic glyphs) */
:is(html[dir="rtl"] body main.ba-page, html body main.ba-page[dir="rtl"]) .ba-hero h1.ba-title{ font-family:Tahoma,Arial,sans-serif !important; }

/* forced card/container fills → akmk surfaces (both themes) */
html body main.ba-page :is(.ba-panel,.ba-card,.ba-content,.ba-info,.ba-article-card,.ba-service-card) {
  background:var(--surface) !important; border-color:var(--line) !important;
}
html body main.ba-page .ba-panel{ background:color-mix(in srgb,var(--surface) 88%,transparent) !important; }
html body main.ba-page .ba-faq details{ background:var(--surface) !important; border-color:var(--line) !important; }
html body main.ba-page .ba-faq details[open]{ border-color:var(--primary-line) !important; }
html body main.ba-page .ba-image{ border-color:var(--line) !important; }
html body main.ba-page .ba-answer{ background:var(--surface-2) !important; border-color:var(--line) !important; color:var(--ink) !important; }

/* forced kicker / toc active fills → tokened (avoid pale-on-pale in dark) */
html body main.ba-page .ba-kicker{ background:var(--primary-soft) !important; color:var(--primary) !important; }
html body main.ba-page :is(.ba-toc a.active,.ba-toc a:hover){ background:var(--primary-soft) !important; color:var(--primary) !important; }

/* forced link colour → token primary (dark-safe) */
html body main.ba-page :is(.ba-content a,.ba-breadcrumb a){ color:var(--primary) !important; }
html body main.ba-page .ba-breadcrumb a{ color:var(--ink-soft) !important; }
html body main.ba-page .ba-breadcrumb a:hover{ color:var(--primary) !important; }

/* forced button fills → akmk gradients/tokens */
html body main.ba-page .ba-primary{ background:linear-gradient(135deg,var(--primary),var(--violet)) !important; color:var(--primary-ink) !important; }
html body main.ba-page .ba-action{ background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--gold))) !important; color:#2A0F06 !important; border-color:transparent !important; }

/* forced final box (navy literal) → akmk primary gradient, light ink */
html body main.ba-page .ba-final-box{ background:linear-gradient(135deg,var(--primary),var(--violet)) !important; border-color:var(--primary-line) !important; }
html body main.ba-page .ba-final-box :is(h2,p){ color:var(--primary-ink) !important; }
html body main.ba-page .ba-final .ba-action{ background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--gold))) !important; color:#2A0F06 !important; }