/* ============================================================================
   MOEDATECH — COMPLIANCE                                           2026-08-27
   Hosted, so changes ship with a deploy and NO Webflow publish.

   WHY THIS FILE NO LONGER LEANS ON faq.css
   The first version reused the FAQ's furniture wholesale - the sticky "on this
   page" rail and the rounded card list - and the result was a page that read as
   a second FAQ. It is not one. An FAQ is a bag of unordered questions; a
   compliance page is a RECORD, and a record has shapes of its own: a ladder of
   levels that only makes sense in order, a register of documents that only
   makes sense in columns, and a clock. So every structure below encodes
   something true about the content instead of decorating it:

     .cmp-spec    hard facts, stated once, in tabular figures
     .cmp-steps   a ladder - numbered because the order IS the information
     .cmp-reg     a table - because each document has the same five attributes
     .cmp-clock   proportional segments - the widths are the real durations
     .cmp-decay   a single rule with dated marks - a countdown is a line
     .cmp-ledger  two facing columns - the content is inherently comparative

   The palette, type and radii are v4's. Nothing here restates the system; it
   only adds the pieces v4.css has no equivalent for.
   ========================================================================= */

.cmp {
  --c-ink:    var(--ink, #0e0f10);
  --c-soft:   var(--ink-soft, #323232);
  --c-mut:    var(--ink-muted, #4e4e4e);
  --c-line:   var(--hairline, #ddd3c7);
  --c-card:   var(--bg-raised, #fff);
  --c-sunk:   var(--bg-sunk, #e8dfd5);
  --c-acc:    #e65d00;
  --c-acc-d:  #c04d00;            /* white on this is 4.9:1 */
  --c-yes:    #1f6b3f;            /* 5.9:1 on the cream ground */
  --c-no:     #8a7f74;            /* deliberately quiet, never alarming */
  --c-r:      var(--radius-card, 26px);
  --c-pill:   var(--radius-pill, 999px);
  --c-ease:   var(--ease-out, cubic-bezier(.23, 1, .32, 1));
  --c-gut:    clamp(18px, 4vw, 56px);
  --c-max:    1180px;

  color: var(--c-ink);
  font-family: var(--font, "Figtree", ui-sans-serif, system-ui, sans-serif);
}

.cmp-in {
  max-width: var(--c-max);
  margin-inline: auto;
  padding-inline: var(--c-gut);
}

/* Section rhythm. Set here rather than per-block so the page keeps one
   cadence; the v4 skin's sweep inflates anything it finds at 0. */
.cmp-sec { padding-block: clamp(46px, 6vw, 86px); }
.cmp-sec + .cmp-sec { border-block-start: 1px solid var(--c-line); }

.cmp-sec h2 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.cmp-sec .cmp-note {
  margin: 0 0 clamp(24px, 3vw, 38px);
  max-width: 64ch;
  color: var(--c-mut);
  font-size: 1.02rem;
  line-height: 1.62;
}

/* Arabic sets no negative tracking - it breaks the joins between letters. */
html[lang="ar"] .cmp-sec h2 { letter-spacing: normal; line-height: 1.28; }

/* ================================================================== hero ==
   Not the FAQ's hero: no button pair, no eyebrow-over-headline-over-lede
   stack ending in two pills. The headline is followed immediately by the
   facts, because on a compliance page the facts ARE the summary. */
.cmp-hero { padding-block: clamp(44px, 6vw, 84px) clamp(30px, 3.4vw, 44px); }

.cmp-hero .cmp-kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--c-acc-d);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html[lang="ar"] .cmp-hero .cmp-kicker { letter-spacing: normal; font-size: .9rem; }

.cmp-hero h1 {
  margin: 0;
  max-width: 19ch;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
html[lang="ar"] .cmp-hero h1 {
  letter-spacing: normal;
  line-height: 1.32;
  max-width: 22ch;
  font-size: clamp(2rem, 4.6vw, 3.35rem);
}

.cmp-hero .cmp-lede {
  margin: 18px 0 0;
  max-width: 60ch;
  color: var(--c-soft);
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.62;
}

/* ---- the fact strip ----
   Rules, not cards. A card would make these look like four more things to
   read; they are one line of specification. */
.cmp-spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(28px, 3.6vw, 46px);
  border-block: 1px solid var(--c-line);
}
.cmp-spec > div {
  padding: 20px 22px;
  border-inline-start: 1px solid var(--c-line);
}
.cmp-spec > div:first-child { border-inline-start: 0; padding-inline-start: 0; }

.cmp-spec b {
  display: block;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.cmp-spec span {
  display: block;
  margin-top: 6px;
  color: var(--c-mut);
  font-size: .86rem;
  line-height: 1.45;
}
html[lang="ar"] .cmp-spec b { letter-spacing: normal; }

@media (max-width: 860px) {
  .cmp-spec { grid-template-columns: repeat(2, 1fr); }
  .cmp-spec > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .cmp-spec > div:nth-child(-n+2) { border-block-end: 1px solid var(--c-line); }
}
@media (max-width: 480px) {
  .cmp-spec { grid-template-columns: 1fr; }
  .cmp-spec > div { border-inline-start: 0; padding-inline: 0; }
  .cmp-spec > div + div { border-block-start: 1px solid var(--c-line); }
  .cmp-spec > div:nth-child(-n+2) { border-block-end: 0; }
}

/* ------------------------------------------------------- review banner --
   Visible on purpose. The SEO rules require a placeholder to be legible on the
   page, not buried in a comment, so nobody publishes a draft by accident. */
.cmp-draft {
  display: block;
  margin: 0 0 clamp(26px, 3vw, 38px);
  padding: 14px 18px;
  border: 1px solid var(--c-acc);
  border-inline-start: 4px solid var(--c-acc);
  border-radius: 14px;
  background: color-mix(in srgb, var(--c-acc) 7%, transparent);
  font-size: .95rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------- chip --
   Marks a line the compliance team still has to confirm. Quiet - a note to
   the reviewer, not a warning to a visitor - but it carries a border so it
   survives a greyscale print. */
.cmp-chip {
  display: inline-block;
  flex: none;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--c-acc) 55%, var(--c-line));
  border-radius: var(--c-pill);
  background: color-mix(in srgb, var(--c-acc) 9%, transparent);
  color: var(--c-acc-d);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
html[lang="ar"] .cmp-chip { letter-spacing: normal; font-size: .78rem; }

/* ============================================== 1. the ladder of levels ==
   Numbered because a supplier passes through these in order and cannot skip
   one. That is the rare case where 01/02/03 is information, not decoration. */
.cmp-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lvl;
}

/* the spine: one line behind the nodes, drawn only between the first and last
   node rather than across the whole row, so it reads as a track with ends */
.cmp-steps::before {
  content: "";
  position: absolute;
  inset-inline: calc(100% / 6);
  top: 19px;
  height: 1px;
  background: var(--c-line);
}

.cmp-step { position: relative; counter-increment: lvl; }

.cmp-step .cmp-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--bg, #f3efea);
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cmp-step .cmp-node::before { content: counter(lvl); }

.cmp-step h3 {
  margin: 16px 0 4px;
  text-align: center;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
}
.cmp-step h3 .cmp-chip { margin-inline-start: 8px; }

.cmp-step > p {
  margin: 0 auto 16px;
  max-width: 34ch;
  text-align: center;
  color: var(--c-mut);
  font-size: .93rem;
  line-height: 1.58;
}

.cmp-can {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: var(--c-card);
  list-style: none;
}
.cmp-can li {
  display: flex;
  gap: 9px;
  padding-block: 6px;
  font-size: .92rem;
  line-height: 1.5;
}
.cmp-can li + li { border-block-start: 1px solid color-mix(in srgb, var(--c-line) 60%, transparent); }

/* The marks are drawn, not typed: a glyph would be read aloud by a screen
   reader as "check mark" in the middle of a sentence. */
.cmp-can li::before {
  flex: none;
  width: 1.05em;
  font-weight: 700;
  line-height: 1.5;
}
.cmp-can li[data-y]::before { content: "\2713"; color: var(--c-yes); }
.cmp-can li[data-n]::before { content: "\2715"; color: var(--c-no); }
.cmp-can li[data-n] { color: var(--c-mut); }

@media (max-width: 820px) {
  .cmp-steps { grid-template-columns: 1fr; gap: 26px; }
  .cmp-steps::before {
    inset-inline: auto;
    inset-inline-start: 19px;
    top: 19px;
    bottom: 19px;
    width: 1px;
    height: auto;
  }
  .cmp-step { padding-inline-start: 58px; }
  .cmp-step .cmp-node { position: absolute; inset-inline-start: 0; top: 0; margin-inline: 0; }
  .cmp-step h3, .cmp-step > p { text-align: start; margin-inline: 0; }
  .cmp-step h3 { margin-top: 6px; }
}

/* ================================================ 2. the document register ==
   A table because every row genuinely has the same five attributes, and a
   reader hunting one document should be able to run a finger down a column
   instead of opening five cards. */
.cmp-scroll {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: var(--c-card);
  -webkit-overflow-scrolling: touch;
}

.cmp-reg {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: .93rem;
  text-align: start;
}
.cmp-reg th, .cmp-reg td {
  padding: 14px 18px;
  text-align: start;
  vertical-align: top;
  line-height: 1.55;
}
.cmp-reg thead th {
  position: sticky;
  top: 0;
  background: var(--c-sunk);
  color: var(--c-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
html[lang="ar"] .cmp-reg thead th { letter-spacing: normal; font-size: .82rem; }

.cmp-reg tbody tr { border-block-start: 1px solid var(--c-line); }
.cmp-reg tbody tr:hover { background: color-mix(in srgb, var(--c-sunk) 45%, transparent); }

.cmp-reg td:first-child {
  font-weight: 600;
  color: var(--c-ink);
}
.cmp-reg td { color: var(--c-soft); }
.cmp-reg .cmp-valid {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--c-mut);
}

/* The hint only exists while the table is actually cut off. */
.cmp-swipe {
  margin: 10px 0 0;
  color: var(--c-mut);
  font-size: .84rem;
}
@media (min-width: 860px) { .cmp-swipe { display: none; } }

/* ========================================================= 3. the clock ==
   The segment widths are the real day counts, so the picture cannot disagree
   with the numbers underneath it. */
.cmp-clock { display: flex; gap: 3px; margin: 0 0 16px; }
.cmp-clock > div {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--c-sunk);
  font-size: .86rem;
  line-height: 1.4;
}
.cmp-clock > div:first-child { border-start-start-radius: var(--c-r); border-end-start-radius: var(--c-r); }
.cmp-clock > div:last-child  { border-start-end-radius: var(--c-r);   border-end-end-radius: var(--c-r); }
.cmp-clock > div[data-hot] { background: color-mix(in srgb, var(--c-acc) 16%, var(--c-sunk)); }
.cmp-clock b { display: block; font-weight: 600; }
.cmp-clock span {
  display: block;
  margin-top: 3px;
  color: var(--c-mut);
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
}

@media (max-width: 700px) {
  .cmp-clock { flex-direction: column; }
  .cmp-clock > div { border-radius: 12px !important; }
}

/* ======================================================== 4. the decay ==
   A countdown is a line. Three dated marks on one rule says in a glance what
   six sentences would take a paragraph to say. */
.cmp-decay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 2px solid var(--c-line);
}
.cmp-decay li { position: relative; padding-block-start: 24px; }
.cmp-decay li::before {
  content: "";
  position: absolute;
  inset-block-start: -6px;
  inset-inline-start: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-line);
}
.cmp-decay li:last-child::before { background: var(--c-acc); }
.cmp-decay b {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: 1.02rem;
  font-weight: 700;
}
.cmp-decay p {
  margin: 5px 0 0;
  color: var(--c-mut);
  font-size: .92rem;
  line-height: 1.55;
}
@media (max-width: 700px) { .cmp-decay { grid-template-columns: 1fr; } }

/* ======================================================= 5. the ledger ==
   Two facing columns, because the whole point of the section is the contrast
   between what the badge proves and what it does not. */
.cmp-ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 30px);
}
.cmp-col {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: var(--c-card);
}
.cmp-col[data-kind="no"] { background: transparent; }
.cmp-col h3 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}
.cmp-col ul { margin: 0; padding: 0; list-style: none; }
.cmp-col li {
  display: flex;
  gap: 10px;
  padding-block: 9px;
  font-size: .95rem;
  line-height: 1.55;
}
.cmp-col li + li { border-block-start: 1px solid color-mix(in srgb, var(--c-line) 60%, transparent); }
.cmp-col li::before { flex: none; width: 1.05em; font-weight: 700; }
.cmp-col[data-kind="yes"] li::before { content: "\2713"; color: var(--c-yes); }
.cmp-col[data-kind="no"]  li::before { content: "\2715"; color: var(--c-no); }
.cmp-col[data-kind="no"]  li { color: var(--c-mut); }

@media (max-width: 780px) { .cmp-ledger { grid-template-columns: 1fr; } }

/* ======================================================= 6. the report ==
   Ordered, because reporting a problem is a procedure. */
.cmp-report {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
}
.cmp-proc { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.cmp-proc li {
  position: relative;
  counter-increment: step;
  padding: 0 0 18px 40px;
  line-height: 1.58;
}
html[dir="rtl"] .cmp-proc li { padding: 0 40px 18px 0; }
.cmp-proc li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cmp-proc b { font-weight: 600; }
.cmp-proc p { margin: 3px 0 0; color: var(--c-mut); font-size: .93rem; }

.cmp-box {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: var(--c-sunk);
}
.cmp-box h3 { margin: 0 0 10px; font-size: 1.02rem; font-weight: 600; }
.cmp-box p { margin: 0 0 14px; color: var(--c-soft); font-size: .94rem; line-height: 1.6; }
.cmp-box a.cmp-act {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--c-pill);
  background: var(--c-acc-d);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s var(--c-ease);
}
.cmp-box a.cmp-act:hover { background: var(--c-acc); }

@media (max-width: 820px) { .cmp-report { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- meta --
   The date a compliance page was last reviewed is load-bearing information,
   so it is stated on the page and not only in the sitemap. */
.cmp-meta {
  margin: 0;
  padding-block: 26px 40px;
  color: var(--c-mut);
  font-size: .87rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .cmp-box a.cmp-act, .cmp-reg tbody tr { transition: none; }
}

/* ========================== the header shell ==============================
   Ported verbatim from faq.css when this page stopped loading it. The page
   hands the skin a <header class="hdr"> and the skin fills it, but header.hdr's
   own flex rules come from the equipment pages' Webflow stylesheet, which this
   page does not load - so they have to live here. The numbers were measured off
   /en/equipment-light rather than guessed: flex, padding 16px 30px, gap 16px,
   66px tall, brand with a 24px logo, language pill 23px high pushed to the far
   side by the PAIRED auto margins.

   Paired auto margin: the brand AND the nav each take margin-inline-end:auto,
   so the free space splits in two and the nav lands in the middle. With only
   one of the pair the nav never centres - and in Arabic, where the nav is
   lifted out of flow, this is the only thing keeping the language pill away
   from the logo. Logical properties throughout, so RTL mirrors on its own. */
body.clean { background: var(--bg, #f3efea); }

header.hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 30px;
  background: transparent;
}
header.hdr .brand {
  display: flex;
  align-items: center;
  min-height: 34px;
  flex: 0 1 auto;
  text-decoration: none;
  margin-inline-end: auto;
}
header.hdr .brand img {
  display: block;
  width: auto;
  height: 24px;
  /* the file is dark-on-transparent already; brightness(0) is what the other
     pages apply to flatten it to ink */
  filter: brightness(0);
}
header.hdr .v4nav { margin-inline-end: auto; }

header.hdr .ctl-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  margin-inline-start: 10px;
  height: 23px;
  padding: 0 14px;
  border: 1px solid var(--ink, #000);
  border-radius: var(--radius-pill, 999px);
  color: var(--ink, #000);
  font-family: var(--font, Inter, sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.15px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
header.hdr .ctl-lang:hover { background: var(--ink, #000); color: var(--bg, #f3efea); }

@media (max-width: 900px) {
  /* the skin's own breakpoint wraps .v4nav to its own row; match it */
  header.hdr { flex-wrap: wrap; padding: 12px 18px; gap: 10px; }
  header.hdr .v4nav { order: 3; width: 100%; margin-inline-end: 0 !important; }
}

/* ---- align the three ladder cards to one baseline ----
   The blurbs run to different line counts, so without this the cards start at
   three different heights and the row reads as ragged rather than as a track.
   Subgrid is the honest tool: the step inherits the ol's rows, so node, title,
   blurb and card each line up across all three columns no matter how the copy
   is edited later. Where subgrid is missing the cards simply sit where they
   fall, which is what shipped before, so nothing breaks. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 821px) {
    .cmp-steps { grid-template-rows: auto auto auto auto; }
    .cmp-step {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
    }
    /* the card stretches to fill its row so the three bottoms agree too */
    .cmp-can { align-self: stretch; }
  }
}