/* ============================================================
   MOEDATECH  ·  BECOME A VERIFIED SUPPLIER   sup.css  2026-09-17
   Loads after docs.css on /verification only.

   Same vocabulary as why.css - a two-column spread per section,
   a figures band, cards, a table - written separately because
   this page's pieces differ (levels, document groups, numbered
   steps, an expiry timeline) and a shared file would have to
   carry both pages' exceptions.

   The page keeps the SKIN's own bar, so there is nothing here
   about the header. Logical properties throughout, so Arabic
   mirrors with no RTL override.
   ============================================================ */

/* ---- the spread -------------------------------------------- */

.sup .doc-sec > .doc-in {
  display: grid;
  grid-template-columns: minmax(200px, 0.72fr) minmax(0, 2fr);
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: 10px;
  align-items: start;
}
.sup .sup-rail { grid-column: 1; grid-row: 1; }
.sup .sup-rail h2 { margin-block-end: 8px; }
.sup .sup-rail .doc-note { max-width: 34ch; }
.sup .doc-sec > .doc-in > :not(.sup-rail) { grid-column: 2; align-self: start; }
.sup #start > .doc-in { display: block; }

/* ---- hero: words in one column, the photograph in the other ---- */

/* The photograph must read as part of the page, not as a picture dropped
   beside the words - Hisham on the first attempt: "it's like a frame, like a
   photo that has been cut out and put there". What earns that is the file
   itself: no hard crop edges, and the studio floor recovered from the original
   exposure, so the machine sits on the cream instead of floating on it. The
   bleed out through the page gutter finishes it.
   It was absolutely placed behind the copy at first, which put the machine
   under the lede - "people may think there is a word that is hidden". A grid
   makes that impossible at every width instead of at the one I measured. */
/* The words lead, the photograph supports: "make the pic a littel bit smaller
   and this part bigger". So the text column takes 1.34 of the 2.34 and the
   type is set here rather than inherited - the skin was serving this h1 at
   54px, which is a section heading, not the first thing on a landing page. */
.sup .doc-hero > .doc-in {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  column-gap: clamp(14px, 2vw, 36px);
  align-items: end;
}
.sup .sup-hero-t {
  grid-column: 1;
  /* 56ch: wide enough that the bigger lede still holds three lines, and the
     two buttons sit on one (at 44ch the second one dropped under the first) */
  max-width: 56ch;
  padding-block: clamp(14px, 2.4vw, 40px);
}
html body .sup .doc-hero h1 {
  max-width: 19ch;
  font-size: clamp(2.4rem, 4.7vw, 4.5rem);
  line-height: 1.03;
}
html body .sup .doc-hero .doc-lede {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
}
.sup .doc-hero .doc-kicker { font-size: .84rem; }
.sup .doc-hero .sup-btn { height: 52px; padding-inline: 30px; font-size: 1.05rem; }
.sup-hero-img {
  grid-column: 2;
  align-self: end;
  width: calc(100% + var(--d-gut));
  margin-inline-end: calc(-1 * var(--d-gut));
  height: auto;
  max-width: none;
  pointer-events: none;
}

/* ---- buttons ----------------------------------------------- */

.sup-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 22px; }
.sup-btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding-inline: 26px;
  border-radius: var(--d-pill);
  background: var(--d-acc);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--d-ease), transform .18s var(--d-ease);
}
.sup-btn:hover { background: var(--d-acc-d); }
.sup-btn:active { transform: scale(.98); }
.sup-btn--ghost {
  background: transparent;
  color: var(--d-ink);
  border: 1px solid var(--d-line);
}
.sup-btn--ghost:hover { background: var(--d-card); border-color: var(--d-ink); }

/* ---- the figures band -------------------------------------- */

.sup-proof {
  margin: 0;
  padding: clamp(18px, 2.4vw, 30px) 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px clamp(24px, 3vw, 48px);
  border-block-start: 1px solid var(--d-line);
}
.sup-proof li {
  display: flex; flex-direction: column; gap: 2px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--d-acc);
}
.sup-proof b {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--d-ink);
}
.sup-proof span { font-size: .95rem; line-height: 1.45; color: var(--d-mut); max-width: 30ch; }

/* ---- the three levels -------------------------------------- */

.sup-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}
.sup-level {
  margin: 0;
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: calc(var(--d-r) * .62);
  background: var(--d-card);
  border: 1px solid var(--d-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* the third level is the destination, so it carries the accent edge */
.sup-level:last-child { border-inline-start: 3px solid var(--d-acc); }
.sup-level h3 { margin: 0; font-size: 1.06rem; font-weight: 650; color: var(--d-ink); }
.sup-level > p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--d-mut); }
.sup-level ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sup-level li {
  position: relative;
  padding-inline-start: 22px;
  font-size: .93rem;
  line-height: 1.45;
}
.sup-can li { color: var(--d-soft); }
.sup-cant li { color: var(--d-mut); }
.sup-can li::before,
.sup-cant li::before {
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
}
.sup-can li::before { content: "+"; color: #1c8c4c; }
.sup-cant li::before { content: "\2212"; color: var(--d-mut); }
.sup-cant { padding-block-start: 8px; border-block-start: 1px solid var(--d-line); }

/* ---- the document table ------------------------------------ */

.sup-docs-s { overflow-x: auto; }
.sup-docs { width: 100%; border-collapse: collapse; }
.sup-docs th,
.sup-docs td {
  padding: 11px 12px;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--d-line);
  font-size: .97rem;
  line-height: 1.5;
}
.sup-docs thead th {
  font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--d-mut); white-space: nowrap;
}
.sup-docs tbody th { font-weight: 650; color: var(--d-ink); min-width: 15ch; }
.sup-docs tbody td { color: var(--d-soft); }
.sup-docs-g th {
  padding-block: 16px 6px;
  font-size: .8rem !important;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--d-acc-d);
  border-block-end: 0;
}
.sup-foot { margin: 14px 0 0; font-size: .95rem; line-height: 1.6; color: var(--d-mut); }
.sup-foot a, .sup-qa a { color: var(--d-acc-d); text-underline-offset: 3px; }

/* ---- the four steps ---------------------------------------- */

.sup-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.sup-steps li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-block-end: 1px solid var(--d-line);
}
.sup-steps li:last-child { border-block-end: 0; }
.sup-step-n {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--d-acc) 12%, transparent);
  color: var(--d-acc-d);
  font-size: .85rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sup-step-b { display: grid; gap: 3px; }
.sup-step-b b { font-size: 1rem; font-weight: 650; color: var(--d-ink); }
.sup-step-b i {
  font-style: normal; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--d-acc-d);
}
.sup-step-b span { font-size: .95rem; line-height: 1.55; color: var(--d-soft); }

/* ---- the expiry timeline ----------------------------------- */

.sup-time { margin: 0; display: grid; gap: 10px; }
.sup-time > div {
  display: grid;
  grid-template-columns: minmax(120px, 18%) 1fr;
  gap: 4px 18px;
  padding: 13px 16px;
  border-radius: calc(var(--d-r) * .5);
  background: color-mix(in srgb, var(--d-sunk) 48%, transparent);
}
.sup-time dt { font-weight: 650; font-size: .95rem; color: var(--d-ink); }
.sup-time dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--d-soft); }

/* ---- short answers ----------------------------------------- */

.sup-qa { columns: 2; column-gap: clamp(28px, 3.4vw, 56px); }
.sup-qa > div { break-inside: avoid; margin-block-end: 18px; }
.sup-qa h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 650; color: var(--d-ink); }
.sup-qa p { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--d-soft); }

/* ---- the closing band -------------------------------------- */

.sup-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px;
  padding: clamp(22px, 2.8vw, 34px) clamp(22px, 3.2vw, 38px);
  border-radius: var(--d-r);
  background: var(--d-card);
  border: 1px solid var(--d-line);
}
.sup-cta p {
  margin: 0 0 4px;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.35; font-weight: 500; color: var(--d-ink); max-width: 38ch;
}
.sup-cta span { font-size: .92rem; color: var(--d-mut); }

/* ---- narrower screens -------------------------------------- */

@media (max-width: 1080px) {
  .sup .doc-sec > .doc-in { grid-template-columns: minmax(0, 1fr); }
  .sup .sup-rail { grid-column: 1; grid-row: auto; }
  .sup .sup-rail .doc-note { max-width: 60ch; }
  .sup .doc-sec > .doc-in > :not(.sup-rail) { grid-column: 1; margin-block-start: 14px; }
  .sup .doc-hero > .doc-in { grid-template-columns: minmax(0, 1fr); }
  .sup .sup-hero-t { max-width: none; }
  /* stacked: this frame is nearly square, so a full-bleed width would render it
     screen-high. Cap the HEIGHT and keep the bleed on the outer side. */
  .sup-hero-img {
    grid-column: 1;
    display: block;
    width: auto;
    max-width: calc(100% + var(--d-gut));
    max-height: min(46vh, 380px);
    margin-inline-start: auto;
    margin-inline-end: calc(-1 * var(--d-gut));
    margin-block-start: 14px;
  }
  .sup-levels { grid-template-columns: 1fr; }
  .sup-level:last-child { border-inline-start: 1px solid var(--d-line); border-block-start: 3px solid var(--d-acc); }
}

@media (max-width: 720px) {
  .sup-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sup-proof li:last-child { grid-column: 1 / -1; }
  .sup-qa { columns: 1; }
  .sup-time > div { grid-template-columns: 1fr; }
  .sup-cta { justify-content: flex-start; }
}