/* tpl-article-compliance.css: GENERATED from prototype article.css, compliance.css (same order as the prototype head). */
/* ---- article.css ---- */
/* ==========================================================================
   article.css: page-only styles for article.html (Webflow CMS template "Posts")
   Owner: Designer 2 (UI/UX). Load order: ../tokens.css → styles.css → article.css
   Scope: article-progress_*, article-header_*, article-byline_*, article_layout,
   article-answer_*, article-takeaways_*, article-toc_*, .text-rich-text.is-article,
   article-cta-card_*, article-service_*, article-figure_*, article-sources_*,
   article-author_*, article-related_*.
   Shared components (header, breadcrumb, card, table, FAQ, CTA, form, sticky
   bar, sheet, footer) come from styles.css (Designer 1) and are not restyled.
   Reading-first: minimal motion, no scroll-jacking, content visible without JS.
   Items marked [ADD] extend the design system; listed in the handover.
   ========================================================================== */

/* ---------- Reading progress (motion #26) ---------- */
/* [ADD] 3px bar under the sticky header. Fill = transform scaleX, origin at the
   reading start (right in RTL). Colour amber-700 (4.81:1 on paper, 3:1 UI). */
.article-progress_component {
  position: fixed; inset-inline: 0; inset-block-start: var(--header-height); z-index: 39;
  block-size: 3px; pointer-events: none;
}
.article-progress_bar {
  block-size: 100%; background: var(--border-accent);
  transform: scaleX(0); transform-origin: var(--origin-start); will-change: transform;
}

/* ---------- Nav: "you are in this section" (guide is a child of the «الدليل» hub) ---------- */
/* Mirrors styles.css .nav_link[aria-current="page"]. [ADD] candidate for styles.css so every child page can use it. */
.nav_link[aria-current="true"] { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--amber-700); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }

/* ---------- Sticky-bar trigger (blog-template §4: bar appears after ~40% scroll) ---------- */
/* Invisible sentinel covering the top 40% of the page. main.js shows the bar once it leaves the viewport. */
.article_sticky-sentinel { position: absolute; inset-inline-start: 0; inset-block: 0 60%; inline-size: 1px; pointer-events: none; visibility: hidden; }

/* ---------- Article container ---------- */
/* ≤991: one centred reading column. ≥992: prose column + TOC on the end side. */
.article_container { max-inline-size: var(--max-width-prose); margin-inline: auto; }
@media (min-width: 992px) { .article_container { max-inline-size: var(--container-medium); } }

/* ---------- Title block ---------- */
/* Tighter top on the article so the H1 (LCP) sits higher on a 375px screen */
.article_container.padding-section-small { padding-block-start: 1.25rem; }
@media (min-width: 992px) { .article_container.padding-section-small { padding-block-start: 2rem; } }
/* Current crumb = shortened title, one line, clipped with an ellipsis (blog-template §4 #1) */
.section_article .breadcrumb_item:last-child { min-inline-size: 0; flex: 1 1 8rem; }
.section_article .breadcrumb_item [aria-current="page"] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-inline-size: 100%; }
.article-header_component { display: grid; gap: 1.25rem; padding-block: var(--space-small) var(--space-medium); }
@media (min-width: 992px) { .article-header_component { max-inline-size: 48rem; padding-block-end: var(--space-large); } }
/* [ADD] Article H1 scale 28 → 44px. A 40–70 char question H1 at the display token (32 → 56px)
   runs 4–5 lines at 375px; this keeps it to 3–4 and reads as a title, not a banner. */
.article-header_title { font-size: clamp(1.75rem, 1.3333rem + 1.8519vw, 2.75rem); line-height: 1.35; }

.article-byline_component { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: center; }
.article-byline_avatar { inline-size: 3rem; block-size: 3rem; border-radius: var(--radius-round); overflow: hidden; flex: none; }
.article-byline_avatar img, .article-byline_avatar .placeholder-media { inline-size: 100%; block-size: 100%; aspect-ratio: 1; object-fit: cover; padding: 0; }
.article-byline_text { display: grid; gap: 0.125rem; font-size: var(--font-size-small); line-height: 1.7; color: var(--text-muted); min-inline-size: 0; }
.article-byline_author { color: var(--text-primary); }
.article-byline_author a { font-family: var(--font-heading); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .article-byline_author a:hover { text-decoration: underline; } }
.article-byline_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.625rem; padding: 0; list-style: none; }
.article-byline_meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.article-byline_meta-item + .article-byline_meta-item::before { content: "·"; color: var(--steel-400); margin-inline-end: 0.25rem; } /* decorative separator */
.article-byline_meta-item .icon-embed-xsmall { color: var(--text-accent); }
.article-byline_update { font-size: 0.8125rem; color: var(--text-muted); }

/* ---------- Layout: intro + main + TOC ---------- */
.article_layout { display: grid; gap: var(--space-medium); grid-template-columns: minmax(0, 1fr); }
/* explicit minmax(0,1fr) track: an implicit auto track would grow to a wide table's min-content and push the page sideways */
.article_intro, .article_main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-medium); min-inline-size: 0; align-content: start; }
@media (min-width: 992px) {
  .article_layout {
    grid-template-columns: minmax(0, var(--max-width-prose)) minmax(13rem, 16rem);
    grid-template-areas: "intro toc" "main toc";
    justify-content: space-between; column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: var(--space-large);
  }
  .article_intro { grid-area: intro; }
  .article_main { grid-area: main; }
  .article-toc_component { grid-area: toc; } /* end side = left in RTL (blog-template §5.3) */
}

/* ---------- Short answer box ---------- */
/* Tinted, editorial, no CTA inside (blog-template §4 #4). amber-800 label on amber-100 = 6.56:1;
   steel-900 text on amber-100 = 14.48:1. */
.article-answer_component {
  display: grid; gap: 0.5rem; padding: 1.25rem 1.25rem 1.375rem;
  background: var(--bg-accent-tint); border: 1px solid var(--amber-100); border-block-start: 2px solid var(--border-accent); border-radius: var(--radius-medium);
}
.article-answer_label { font-family: var(--font-heading); font-size: var(--font-size-small); line-height: 1.5; font-weight: 700; color: var(--text-accent); }
.article-answer_text { font-size: var(--font-size-large); line-height: var(--lh-large); color: var(--text-primary); }

/* Soft CTA: one text line, link style, not a button (blog-template §4 #5) */
.article-soft-cta { display: flex; gap: 0.625rem; align-items: flex-start; font-size: var(--font-size-medium); line-height: var(--lh-body); color: var(--text-secondary); }
.article-soft-cta .icon-embed-small { color: var(--text-accent); margin-block-start: 0.3em; }
.article-soft-cta a { color: var(--text-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
@media (hover: hover) { .article-soft-cta a:hover { text-decoration-thickness: 2px; } }

/* ---------- Key takeaways ---------- */
.article-takeaways_component { padding: 1.25rem 1.25rem 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); }
.article-takeaways_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); margin-block-end: 1rem; }
.article-takeaways_rich ul { display: grid; gap: 0.75rem; padding: 0; list-style: none; }
/* Block + positioned marker (not grid): CMS bullets mix text, <strong> and <bdi>, and a grid would split them into cells */
.article-takeaways_rich li { position: relative; padding-inline-start: 1.375rem; line-height: 1.75; }
.article-takeaways_rich li::before { /* inspection-tag diamond, decorative */
  content: ""; position: absolute; inset-inline-start: 0.0625rem; inset-block-start: 0.65em;
  inline-size: 0.5rem; block-size: 0.5rem; background: var(--border-accent); transform: rotate(45deg);
}

/* ---------- Table of contents ---------- */
.article-toc_details { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); }
.article-toc_summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-block-size: 3.25rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); border-radius: var(--radius-medium);
}
.article-toc_summary::-webkit-details-marker { display: none; }
.article-toc_summary-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.article-toc_summary-label .icon-embed-small { color: var(--text-accent); }
.article-toc_caret { color: var(--text-accent); transition: transform var(--duration-base) var(--ease-out); }
.article-toc_details[open] .article-toc_caret { transform: rotate(180deg); }
@media (hover: hover) { .article-toc_summary:hover { background: var(--bg-alt); } }

.article-toc_list { counter-reset: toc; display: grid; gap: 0.125rem; margin: 0; padding: 0 0.5rem 0.75rem; list-style: none; }
.article-toc_link {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.5rem; align-items: start;
  min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-small);
  border-inline-start: 2px solid transparent;
  font-size: var(--font-size-small); line-height: 1.6; color: var(--text-secondary); text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.article-toc_link::before { counter-increment: toc; content: counter(toc); font-family: var(--font-heading); font-weight: 600; color: var(--text-muted); }
@media (hover: hover) { .article-toc_link:hover { background: var(--bg-alt); color: var(--text-primary); } }
/* Current section: weight + start border + tint, never colour alone */
.article-toc_link[aria-current="true"] { background: var(--bg-alt); color: var(--text-primary); font-weight: 600; border-inline-start-color: var(--border-accent); }
.article-toc_link[aria-current="true"]::before { color: var(--text-accent); }

@media (min-width: 992px) {
  .article-toc_details {
    position: sticky; inset-block-start: calc(var(--header-height) + 1.5rem);
    max-block-size: calc(100dvh - var(--header-height) - 3rem); overflow-y: auto;
    background: transparent; border: 0; border-inline-start: 1px solid var(--border-subtle); border-radius: 0;
  }
  .article-toc_summary { cursor: default; min-block-size: 2.5rem; padding-block: 0 0.5rem; font-size: var(--font-size-small); color: var(--text-muted); }
  .article-toc_summary:hover { background: none; }
  .article-toc_caret { display: none; }
  .article-toc_list { padding: 0; }
  .article-toc_link { border-start-start-radius: 0; border-end-start-radius: 0; } /* flat on the marker side */
}

/* ---------- Rich text: long-form article body ---------- */
/* [ADD] Client-First .text-rich-text with an is-article combo. ~40rem measure
   (≈65–75 Arabic characters at 17px), line-height 1.8, text-align start (never justify). */
.text-rich-text.is-article { font-size: var(--font-size-medium); line-height: var(--lh-body); color: var(--text-primary); overflow-wrap: break-word; }
.text-rich-text.is-article > * + * { margin-block-start: 1.25rem; }
.text-rich-text.is-article > :first-child { margin-block-start: 0; }
.text-rich-text.is-article > h2 {
  margin-block: 3rem 1rem; font-size: clamp(1.375rem, 1.1667rem + 0.9259vw, 1.875rem); line-height: 1.4;
}
.text-rich-text.is-article > h2:first-child { margin-block-start: 0; }
.text-rich-text.is-article > h3 { margin-block: 2rem 0.75rem; font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.text-rich-text.is-article > h2 + *, .text-rich-text.is-article > h3 + * { margin-block-start: 0; }
.text-rich-text.is-article p { max-inline-size: var(--max-width-prose); }
.text-rich-text.is-article ul, .text-rich-text.is-article ol { display: grid; gap: 0.625rem; padding-inline-start: 1.5rem; }
.text-rich-text.is-article li { padding-inline-start: 0.25rem; }
.text-rich-text.is-article ul > li::marker { color: var(--text-accent); }
.text-rich-text.is-article ol > li::marker { font-family: var(--font-heading); font-weight: 700; color: var(--text-accent); }
.text-rich-text.is-article a {
  color: var(--text-accent); font-family: inherit; font-weight: inherit; /* underline + colour mark links; font and weight stay calm in running text (overrides the global .text-rich-text a) */
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
@media (hover: hover) { .text-rich-text.is-article a:hover { text-decoration-thickness: 2px; } }
.text-rich-text.is-article strong { font-weight: 600; }
/* Webflow's RTE "Quote" block, used here as a practitioner callout */
.text-rich-text.is-article blockquote {
  margin-block: 2rem; padding: 1rem 1.25rem;
  background: var(--bg-alt); border-inline-start: 4px solid var(--steel-900); border-radius: var(--radius-medium);
  font-family: var(--font-heading); font-size: var(--font-size-large); font-weight: 500; line-height: 1.75; color: var(--text-primary);
}
.text-rich-text.is-article figure { margin-block: 2rem; }
.text-rich-text.is-article figcaption, .article-figure_caption {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-block-start: 0.75rem;
  font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-muted);
}
.text-rich-text.is-article hr { border: 0; block-size: 1px; background: var(--border-subtle); margin-block: 2.5rem; }
.text-rich-text.is-article .table_wrapper { margin-block: 1.5rem 0; }
.text-rich-text.is-article .article_table-source { margin-block-start: 0.5rem; font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); }

/* ---------- Tables inside the article ---------- */
/* Tables are rich-text embeds (Webflow RTE has no native table [verify-WF]).
   The wrapper (styles.css .table_wrapper) scrolls; the page never does. */
.text-rich-text.is-article .table_wrapper { overscroll-behavior-x: contain; max-inline-size: 100%; }
/* [ADD] is-wide: 3–4 column tables keep a readable min width and scroll inside the wrapper at 375px */
.table_component.is-wide { min-inline-size: 38rem; }
.table_component.is-wide td:last-child { white-space: normal; min-inline-size: 8rem; }
/* [ADD] is-sticky-first: first column (row headers) stays put while the rest scrolls (blog-template §9 #3) */
.table_component.is-sticky-first tr > :first-child {
  position: sticky; inset-inline-start: 0; z-index: 1; inline-size: 9rem; min-inline-size: 9rem;
  background: var(--bg-surface);
}
.table_component.is-sticky-first thead tr > :first-child { background: var(--steel-900); }
.table_component.is-sticky-first tbody tr:nth-child(even) > :first-child { background: var(--steel-50); }
.table_component.is-sticky-first tr > :first-child::after { /* separator that travels with the sticky cell */
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 1px; background: var(--border-subtle);
}
.table_component tbody th { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
@media (min-width: 992px) {
  .table_component.is-sticky-first tr > :first-child { inline-size: auto; min-inline-size: 10rem; }
}
/* [ADD] is-plain-last: last column is prose, not a short value (overrides the nowrap/heading style) */
.table_component.is-plain-last td:last-child { font-family: var(--font-body); font-weight: 400; white-space: normal; }
/* Scroll hint: inserted by article.js only when the table actually overflows */
.article_table-hint { display: flex; align-items: center; gap: 0.375rem; margin-block-start: 0.5rem; font-size: 0.8125rem; color: var(--text-muted); }
.article_table-hint .icon-embed-xsmall { color: var(--text-accent); }

/* ---------- Main image / before-after figure ---------- */
.article-figure_pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.article-figure_item { position: relative; border-radius: var(--radius-medium); overflow: hidden; }
.article-figure_item img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.article-figure_tag {
  position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 1;
  font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
  padding: 0.125rem 0.5rem; border-radius: var(--radius-small); background: var(--steel-950); color: var(--white);
}
.article-figure_tag.is-after { background: var(--amber-500); color: var(--steel-950); }

/* ---------- Intent CTA card (after body-1) ---------- */
/* Quiet surface (blog-template §4 #9): steel-50, not the button colour. One button. */
.article-cta-card_component {
  display: grid; gap: 1rem; padding: 1.5rem;
  background: var(--bg-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
@media (min-width: 768px) { .article-cta-card_component { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; } .article-cta-card_content { grid-column: 2; } }
.article-cta-card_content { display: grid; gap: 0.5rem; justify-items: start; }
.article-cta-card_title { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 700; color: var(--text-primary); }
.article-cta-card_text { color: var(--text-secondary); }
.article-cta-card_content .button { margin-block-start: 0.5rem; }
@media (max-width: 478px) { .article-cta-card_content .button { inline-size: 100%; } }

/* ---------- Service box (after body-2) ---------- */
/* Dark steel surface so it can't be confused with the answer box or the CTA card. */
.article-service_component { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-large); }
@media (min-width: 768px) { .article-service_component { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; } .article-service_content { grid-column: 2; } }
.article-service_component .card_icon { background: var(--steel-800); }
.article-service_content { display: grid; gap: 0.5rem; justify-items: start; }
.article-service_name { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 700; color: var(--text-primary); }
.article-service_text { color: var(--text-secondary); }
.article-service_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-block-start: 0.5rem; }
@media (max-width: 478px) { .article-service_actions .button.is-secondary { inline-size: 100%; } }

/* ---------- FAQ inside the article column ---------- */
.article_faq .faq_list { max-inline-size: none; margin-inline: 0; }
.article_faq-title { font-size: clamp(1.375rem, 1.1667rem + 0.9259vw, 1.875rem); line-height: 1.4; margin-block-end: 1rem; }

/* ---------- Sources ---------- */
.article-sources_component { display: grid; gap: 1rem; }
.article-sources_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.article-sources_rich ol { display: grid; gap: 0.75rem; padding-inline-start: 1.5rem; font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.article-sources_rich li::marker { font-family: var(--font-heading); font-weight: 600; color: var(--text-muted); }
.article-sources_rich a { color: var(--text-accent); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 0.25em; }
.article-sources_rich cite { font-style: normal; font-weight: 600; color: var(--text-primary); }

/* ---------- Author box ---------- */
.article-author_component {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start;
  padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
.article-author_photo { inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--radius-round); overflow: hidden; }
.article-author_photo img, .article-author_photo .placeholder-media { inline-size: 100%; block-size: 100%; aspect-ratio: 1; object-fit: cover; padding: 0; }
.article-author_content { display: grid; gap: 0.375rem; min-inline-size: 0; }
.article-author_name { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 700; }
.article-author_role { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 500; color: var(--text-accent); }
.article-author_bio { color: var(--text-secondary); font-size: var(--font-size-medium); line-height: var(--lh-body); }
.article-author_credentials { margin-block-start: 0.25rem; font-size: var(--font-size-small); }
@media (max-width: 478px) { .article-author_component { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Related posts + related services ---------- */
.article-related_media { border-radius: var(--radius-medium); overflow: hidden; }
.article-related_media .placeholder-media, .article-related_media img { aspect-ratio: 16 / 9; inline-size: 100%; block-size: auto; object-fit: cover; }
.article-related_category { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--text-accent); }
.article-related_date { font-size: 0.8125rem; color: var(--text-muted); }
.article-related-services_list { display: flex; flex-wrap: wrap; gap: 0 1.5rem; padding: 0; margin-block-start: 0.25rem; list-style: none; }
.article-related-services_title { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); margin-block-start: var(--space-large); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .article-toc_caret, .article-toc_link { transition: none; }
}

/* ---- compliance.css ---- */
/* ==========================================================================
   compliance.css: new components for compliance.html (/compliance pillar)
   Owner: Designer 2 (UI/UX). Load order: fonts.css → ../tokens.css → styles.css → article.css → compliance.css
   The page reuses article.css for everything long-form (title block, byline, answer box, TOC, rich
   text, tables, FAQ column, sources, author box, reading progress). Only components the article does
   not have live here, prefixed compliance-*.
   Rules: logical properties only · transform/opacity motion only · content visible without JS ·
   no letter-spacing / text-transform on Arabic. [ADD] = design-system extension (listed in handover).
   ========================================================================== */

/* ---------- Section rhythm inside the reading column ---------- */
.compliance-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-inline-size: 0; } /* explicit track: wide tables must not widen the column */
.compliance-section > h2 { font-size: clamp(1.375rem, 1.1667rem + 0.9259vw, 1.875rem); line-height: 1.4; margin-block-start: 1rem; }
.compliance-section > .text-rich-text.is-article > :first-child { margin-block-start: 0; }
.compliance-note { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.compliance-more { font-size: var(--font-size-small); color: var(--text-secondary); }
.compliance-more a { color: var(--text-accent); font-weight: 600; }
.compliance-verify { font-size: var(--font-size-small); color: var(--text-muted); }

/* ---------- Information call-outs (copy §8: calm, information not warning) ---------- */
/* [ADD] compliance-callout: steel-50 surface, steel-700 start border, info/question icon. Distinct from the amber
   answer box, the warning-tinted stumbling points and the dark report block. */
.compliance-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.875rem; padding: 1.25rem; border-radius: var(--radius-medium); background: var(--bg-alt); border: 1px solid var(--border-subtle); }
.compliance-callout_icon { color: var(--steel-700); padding-block-start: 0.125rem; }
.compliance-callout_title { font-family: var(--font-heading); font-weight: 700; line-height: 1.5; color: var(--text-primary); margin-block-end: 0.375rem; }
.compliance-callout_text { font-size: var(--font-size-medium); line-height: var(--lh-body); color: var(--text-secondary); }
.compliance-callout_text strong { color: var(--text-primary); }
.compliance-callout_text a { color: var(--text-accent); font-weight: 600; }

/* ---------- Authority table: real <table> ≥768px, stacked cards below ---------- */
/* [ADD] compliance-table. Same stacking pattern as pricing.css .price-table (ARIA roles keep table
   semantics when rows become cards). Candidate for one shared .stack-table in styles.css. */
.compliance-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-small); line-height: var(--lh-small); margin-block: 1.5rem 0; }
.compliance-table caption { text-align: start; padding-block-end: 0.75rem; font-family: var(--font-heading); font-weight: 600; color: var(--text-secondary); }
.compliance-table th, .compliance-table td { text-align: start; vertical-align: top; }
.compliance-table tbody th { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
.compliance-table td { color: var(--text-secondary); }
.compliance-table a { color: var(--text-accent); font-weight: 600; }
.compliance-table .compliance-table_ext { display: inline-flex; align-items: center; gap: 0.25rem; }
@media (max-width: 767px) {
  .compliance-table, .compliance-table tbody, .compliance-table tr, .compliance-table th, .compliance-table td { display: block; }
  .compliance-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .compliance-table tbody { display: grid; gap: 0.75rem; }
  .compliance-table tr { padding: 1rem 1.125rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); }
  .compliance-table tbody th { font-size: 1rem; line-height: 1.5; padding-block-end: 0.5rem; margin-block-end: 0.5rem; border-block-end: 1px solid var(--border-subtle); }
  .compliance-table td + td { margin-block-start: 0.625rem; }
  .compliance-table td::before { content: attr(data-label); display: block; margin-block-end: 0.125rem; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
}
@media (min-width: 768px) {
  .compliance-table { border: 1px solid var(--border-subtle); border-radius: var(--radius-large); background: var(--bg-surface); overflow: hidden; }
  .compliance-table thead th { padding: 0.75rem 1rem; background: var(--steel-900); color: var(--white); font-family: var(--font-heading); font-weight: 600; }
  .compliance-table tbody th, .compliance-table tbody td { padding: 0.875rem 1rem; border-block-start: 1px solid var(--border-subtle); }
  .compliance-table tbody tr:nth-child(even) > * { background: var(--steel-50); }
  .compliance-table td:last-child { white-space: nowrap; }
}

/* ---------- Safety-file checklist ---------- */
/* [ADD] compliance-checklist: a document-style list. Each item = paper icon + document name + who issues it
   + where it lives. Native checkboxes let a reader tick what they already hold (no storage, no submit). */
.compliance-checklist { display: grid; gap: 0; margin-block: 1.5rem 0; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-block-start: 6px solid var(--steel-900); border-radius: var(--radius-large); overflow: hidden; }
.compliance-checklist_head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 1rem 1.25rem; border-block-end: 1px solid var(--border-subtle); font-family: var(--font-heading); font-weight: 700; color: var(--text-primary); }
.compliance-checklist_head .icon-embed-medium { color: var(--text-accent); }
.compliance-checklist_head-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.compliance-checklist_legend { display: inline-flex; gap: 0.375rem; }
.compliance-checklist_list { margin: 0; padding: 0; list-style: none; }
/* Required vs recommended: text label + tint, never colour alone. success-600 on success-50 = 4.68:1; steel-700 on steel-100 passes. */
.compliance-checklist_tag { display: inline-flex; align-items: center; margin-inline-end: 0.5rem; padding: 0 0.5rem; border-radius: var(--radius-small); font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; line-height: 1.6; }
.compliance-checklist_tag.is-required { background: var(--success-50); color: var(--success-600); }
.compliance-checklist_tag.is-recommended { background: var(--steel-100); color: var(--steel-700); }
.compliance-checklist_item { border-block-end: 1px dashed var(--steel-200); }
.compliance-checklist_item:last-child { border-block-end: 0; }
.compliance-checklist_label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.875rem; padding: 1rem 1.25rem; cursor: pointer; }
.compliance-checklist_box { inline-size: 1.375rem; block-size: 1.375rem; margin: 0.2rem 0 0; accent-color: var(--steel-900); cursor: pointer; grid-row: span 2; }
.compliance-checklist_name { font-family: var(--font-heading); font-weight: 600; line-height: 1.5; color: var(--text-primary); }
.compliance-checklist_meta { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.compliance-checklist_meta a { color: var(--text-accent); font-weight: 600; }
.compliance-checklist_item:has(.compliance-checklist_box:checked) .compliance-checklist_name { text-decoration: line-through; text-decoration-color: var(--steel-500); }
@media (hover: hover) { .compliance-checklist_label:hover { background: var(--bg-alt); } }

/* ---------- Common violations callouts ---------- */
/* [ADD] compliance-violation: warning tint + icon + label text (never colour alone).
   warning-700 on warning-50 = 5.75:1; steel-900 on warning-50 passes easily. */
.compliance-violations { display: grid; gap: 0.75rem; margin-block: 1.5rem 0; padding: 0; list-style: none; }
.compliance-violation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; padding: 1rem 1.25rem; border-radius: var(--radius-medium); background: var(--warning-50); border: 1px solid color-mix(in srgb, var(--warning-700) 35%, transparent); }
.compliance-violation .icon-embed-medium { color: var(--warning-700); grid-row: span 3; }
.compliance-violation_tag { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--warning-700); }
.compliance-violation_title { font-family: var(--font-heading); font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.compliance-violation_fix { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--steel-700); }
.compliance-violation_fix strong { color: var(--text-primary); }

/* ---------- Report contents block (→ cleaning-report) ---------- */
.compliance-report { display: grid; gap: 1rem; margin-block: 1.5rem 0; padding: 1.5rem; border-radius: var(--radius-large); }
@media (min-width: 768px) { .compliance-report { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; } .compliance-report_content { grid-column: 2; } }
.compliance-report_content { display: grid; gap: 0.75rem; justify-items: start; }
.compliance-report_title { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 700; color: var(--text-primary); }
.compliance-report_list { counter-reset: rep; display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.compliance-report_list li { counter-increment: rep; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.125rem 0.625rem; font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-primary); }
.compliance-report_list li::before { content: counter(rep); grid-row: span 2; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-round); background: var(--steel-800); color: var(--amber-500); font-family: var(--font-heading); font-weight: 700; }
.compliance-report_tag { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.compliance-report_close { color: var(--text-secondary); }
.compliance-report_links { display: grid; justify-items: start; }

/* ---------- What we do / don't do ---------- */
.compliance-scope { display: grid; gap: var(--gutter); }
@media (min-width: 768px) { .compliance-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compliance-scope_col { border: 1px solid var(--border-subtle); border-radius: var(--radius-large); background: var(--bg-surface); overflow: hidden; }
.compliance-scope_head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; font-family: var(--font-heading); font-weight: 700; }
.compliance-scope_col.is-do .compliance-scope_head { background: var(--success-50); color: var(--success-600); }
.compliance-scope_col.is-dont .compliance-scope_head { background: var(--steel-100); color: var(--steel-700); }
.compliance-scope_list { margin: 0; padding: 0; list-style: none; }
.compliance-scope_list li { padding: 0.75rem 1.25rem; border-block-start: 1px solid var(--border-subtle); font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.compliance-cta_actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.5rem; }
@media (max-width: 478px) { .compliance-cta_actions .button { inline-size: 100%; } }

/* ---------- Read also ---------- */
.compliance-readalso { display: grid; gap: 0.5rem; margin-block-start: 1rem; }
.compliance-readalso_label { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); margin-block-start: 0.5rem; }
.compliance-readalso_list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.compliance-readalso_link { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-block-size: var(--touch-min); padding: 0.5rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--text-primary); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out); }
.compliance-readalso_link .is-directional { color: var(--text-accent); }
@media (hover: hover) { .compliance-readalso_link:hover { background: var(--bg-accent-tint); } }

/* ---------- Compliance calendar: 12-month strip ---------- */
/* [ADD] compliance-calendar. 4 × 3 at 375px, 6 × 2 from 768px (a 12-up row inside the 40rem reading column
   leaves ~48px per month and the names collide). Markers carry a shape + a text label
   (diamond = licence renewal, dot = cleaning / inspection visit); legend repeats both. Static: no motion. */
.compliance-calendar { margin-block: 1.5rem 0; padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); }
.compliance-calendar_title { font-family: var(--font-heading); font-weight: 700; margin-block-end: 0.25rem; }
.compliance-calendar_sub { font-size: var(--font-size-small); color: var(--text-muted); margin-block-end: 1rem; }
.compliance-calendar_months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; padding: 0; margin: 0; list-style: none; }
@media (min-width: 768px) { .compliance-calendar_months { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.compliance-calendar_month { display: grid; grid-template-rows: auto 1fr; gap: 0.375rem; min-block-size: 4.5rem; padding: 0.5rem 0.25rem; border-radius: var(--radius-small); background: var(--bg-alt); text-align: center; }
.compliance-calendar_name { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; line-height: 1.3; color: var(--text-secondary); overflow-wrap: anywhere; }
.compliance-calendar_marks { display: flex; flex-wrap: wrap; justify-content: center; align-content: start; gap: 0.25rem; }
.compliance-calendar_mark { display: inline-block; inline-size: 0.75rem; block-size: 0.75rem; }
.compliance-calendar_mark.is-visit { border-radius: var(--radius-round); background: var(--steel-900); }
.compliance-calendar_mark.is-renewal { background: var(--amber-700); transform: rotate(45deg) scale(0.85); }
.compliance-calendar_month.has-renewal { background: var(--amber-100); outline: 1px solid var(--amber-700); outline-offset: -1px; }
.compliance-calendar_legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-block-start: 1rem; font-size: var(--font-size-small); color: var(--text-secondary); }
.compliance-calendar_legend-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.compliance-calendar_note { margin-block-start: 0.75rem; font-size: 0.8125rem; color: var(--text-muted); }

/* ---------- Checklist PDF download (lead magnet) ---------- */
.compliance-download { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-large); background: var(--bg-surface); border: 1px dashed var(--border-accent); }
@media (min-width: 768px) { .compliance-download { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1.25rem; } }
.compliance-download_icon { inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--amber-100); color: var(--amber-800); }
.compliance-download_icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.compliance-download_title { font-family: var(--font-heading); font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.compliance-download_text { font-size: var(--font-size-small); color: var(--text-secondary); }
.compliance-download_meta { font-size: 0.8125rem; color: var(--text-muted); }

/* ---------- Disclaimer ---------- */
.compliance-disclaimer { display: flex; gap: 0.625rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--radius-medium); background: var(--bg-alt); border: 1px solid var(--border-subtle); font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.compliance-disclaimer .icon-embed-small { color: var(--steel-700); margin-block-start: 0.15em; }
.compliance-disclaimer strong { color: var(--text-primary); }

/* ---------- External source links: open in a new tab, say so ---------- */
.compliance-ext { display: inline-flex; align-items: center; gap: 0.25rem; }
.compliance-ext .icon-embed-xsmall { color: currentColor; }