/* ============================================================
   MOEDATECH  ·  WHY MOEDATECH          why.css        2026-09-16
   Loads AFTER docs.css and adds what this page has that
   /resources and /policies do not: the figures band, the
   two-column comparison, the rate table and the closing band.

   LAYOUT (rewritten 2026-09-16 after Hisham: "it is all on the
   left and there is a lot of empty space"). docs.css is built
   for a single reading column, which on a wide screen leaves
   the right half of every section empty. Here each section is a
   two-column editorial spread instead: the heading and its note
   hold a narrow left rail, the content takes the wide side, and
   the rail is sticky so the heading stays with what it labels.
   The hero does the same - standfirst beside the title, not
   under it - and the prose sections run in two text columns so
   the measure stays readable while the width gets used.

   Everything uses LOGICAL properties, so Arabic mirrors with no
   RTL override. Tokens come from docs.css's .doc scope.
   ============================================================ */

/* ---- the header, matched to the skin's own bar -------------- */
/* The docs-family header (docs.css's own copy of the shell) centres the menu
   with auto margins, so its position depends on how wide the logo and the
   language button happen to be: measured at 1440px, the nav's middle sat at
   706px here against 720px - dead centre - on the skin-built pages, and the
   open panel therefore looked shifted left. Centring on the header itself
   removes the dependency, and the panel (translateX(-50%) under its own
   trigger) lands where it does everywhere else. */
.why-hdr { position: relative; }
.why-hdr > .v4nav {
  position: absolute;
  /* PHYSICAL left, and 50vw rather than 50%: the skin's bar centres on the
     full viewport, a percentage resolves against the header's padding box
     (8px off), and the logical inset flips in Arabic and put it 8px off the
     other way. left + translateX(-50%) centres identically in both. */
  left: 50vw;
  transform: translateX(-50%);
  margin-inline-end: 0 !important;
  /* THE TRANSFORM ABOVE MAKES THIS A STACKING CONTEXT, which trapped the
     panel's own z-index:9999 inside it - the hero image (a stacking context
     too, because it carries a drop-shadow filter) then painted over the open
     menu. The nav has to carry the priority itself. */
  z-index: 9999;
}

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

.why .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;
}
/* heading + note travel together in the rail: as separate grid children the
   note fell to the bottom of a tall section, away from its own heading */
.why .why-rail { grid-column: 1; grid-row: 1; }
.why .why-rail h2 { margin-block-end: 8px; }
.why .why-rail .doc-note { max-width: 34ch; }
/* everything else: the wide side. Column is fixed, the ROW is left to
   auto-placement on purpose - a fixed span made the rate table and its
   footnote share one cell and print on top of each other. */
.why .doc-sec > .doc-in > :not(.why-rail) {
  grid-column: 2;
  align-self: start;
}

/* the closing band is one full-width element, not a spread */
.why #start > .doc-in { display: block; }

/* ---- hero: the title block, and the brand's cut-out beside it ---- */

.why .doc-hero { padding-block-end: clamp(18px, 2vw, 28px); }
.why .doc-hero > .doc-in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.why .why-hero-t { grid-column: 1; }
.why .doc-hero h1 { max-width: 16ch; }
.why .doc-hero .doc-lede { max-width: 44ch; }
.why-hero-img {
  grid-column: 2;
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  justify-self: end;
  /* the file is a cut-out, so it stands on the cream with no card around it */
  filter: drop-shadow(0 18px 34px rgba(23, 20, 15, .10));
}

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

.why-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);
}
.why-proof li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--d-acc);
}
.why-proof b {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--d-ink);
}
.why-proof span {
  font-size: .95rem;
  line-height: 1.45;
  color: var(--d-mut);
  max-width: 28ch;
}

/* ---- the scene: cut-out, call chips, two result cards ------- */
/* the old artwork was navy with all of this baked in; here only the man is
   the image and the rest is markup, so it sits on the site's sand */

.why-scene { margin: clamp(26px, 3.4vw, 44px) 0 0; }
.why-scene-in {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: clamp(330px, 34vw, 470px);
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: var(--d-r);
  background:
    radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--d-acc) 7%, transparent), transparent 62%),
    var(--d-sunk);
  overflow: hidden;
}
.why-scene-man {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: clamp(300px, 31vw, 430px);
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* the missed calls: pills on the sand, tilted like the original */
.why-chip {
  position: absolute;
  z-index: 1;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--d-card) 72%, transparent);
  border: 1px solid var(--d-line);
  color: var(--d-mut);
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(23, 20, 15, .04);
}
.why-chip:nth-child(1) { inset-block-start: 14%; inset-inline-start: 6%;  transform: rotate(-7deg); }
.why-chip:nth-child(2) { inset-block-start: 42%; inset-inline-start: 2%;  transform: rotate(5deg); }
.why-chip:nth-child(3) { inset-block-start: 22%; inset-inline-end: 8%;   transform: rotate(6deg); }
.why-chip:nth-child(4) { inset-block-end: 26%;  inset-inline-end: 4%;    transform: rotate(-5deg); }

/* the two result cards, rebuilt as cards rather than pixels */
.why-card {
  position: absolute;
  z-index: 3;
  margin: 0;
  width: clamp(168px, 17vw, 208px);
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: var(--d-card);
  border: 1px solid var(--d-line);
  box-shadow: 0 10px 26px -14px rgba(23, 20, 15, .3);
}
.why-card--money { inset-block-start: 8%;  inset-inline-end: 4%; }
.why-card--time  { inset-block-end: 8%;   inset-inline-start: 4%; }
.why-card-dot {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-block-end: 10px;
}
.why-card--money .why-card-dot { background: color-mix(in srgb, #1c8c4c 22%, var(--d-card)); }
.why-card--time  .why-card-dot { background: color-mix(in srgb, var(--d-acc) 24%, var(--d-card)); }
.why-card figcaption {
  font-size: .95rem;
  font-weight: 600;
  color: var(--d-ink);
  margin-block-end: 8px;
}
.why-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  margin-block-end: 8px;
}
.why-bars em {
  display: block;
  flex: 1 1 auto;
  height: var(--h);
  border-radius: 1px;
  background: color-mix(in srgb, var(--d-ink) 55%, transparent);
}
.why-card-f {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.why-card-f b {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}
.why-card-f i { font-style: normal; font-size: .85rem; color: var(--d-mut); }
.why-scene-cap {
  margin-block-start: 10px;
  max-width: 62ch;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--d-mut);
}

/* ---- the photograph (kept for any future wide image) -------- */

.why-band {
  margin: clamp(26px, 3.4vw, 44px) 0 0;
}
.why-band img {
  display: block;
  width: 100%;
  /* height:auto is required, not tidiness: the <img height> attribute is a
     presentational hint and wins over aspect-ratio without it, which rendered
     the band at the file's full height */
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 42%;      /* hold the figure, trim the empty navy */
  border-radius: var(--d-r);
  background: #12314f;              /* the artwork's own navy, for the letterbox */
}
.why-band figcaption {
  margin-block-start: 10px;
  max-width: 58ch;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--d-mut);
}

/* ---- the comparison ---------------------------------------- */

.why-cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px clamp(12px, 1.4vw, 18px);
  align-items: stretch;
}
.why-cmp-h {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--d-mut);
  padding-block-end: 2px;
}
.why-cmp-h--b { color: var(--d-acc-d); }

.why-cmp-c {
  padding: clamp(13px, 1.5vw, 18px);
  border-radius: calc(var(--d-r) * .6);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.why-cmp-c b { font-size: .99rem; font-weight: 650; line-height: 1.35; color: var(--d-ink); }
.why-cmp-c span { font-size: .93rem; line-height: 1.5; color: var(--d-soft); }
/* left: how it is done today - sunk, no border, reads as the past */
.why-cmp-c--a { background: color-mix(in srgb, var(--d-sunk) 55%, transparent); }
.why-cmp-c--a b { color: var(--d-soft); font-weight: 600; }
.why-cmp-c--a span { color: var(--d-mut); }
/* right: raised card with the accent edge - reads as the answer */
.why-cmp-c--b {
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-inline-start: 3px solid var(--d-acc);
  box-shadow: 0 1px 2px rgba(23, 20, 15, .04);
}

/* ---- the rate table ---------------------------------------- */

.why-rates-s { overflow-x: auto; }
.why-rates { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.why-rates th,
.why-rates td {
  padding: 12px 10px;
  text-align: start;
  border-block-end: 1px solid var(--d-line);
  white-space: nowrap;
}
.why-rates thead th {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--d-mut);
}
.why-rates th.num,
.why-rates td.num { text-align: end; }
/* the machine cell carries its own photograph, so a rate has a face */
.why-rates tbody th {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 14px;
}
.why-thumb {
  flex: none;
  width: 64px;
  height: 48px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  background: var(--d-sunk);
}
.why-mn { display: flex; flex-direction: column; }
.why-rates tbody th b { display: block; font-size: 1rem; font-weight: 650; color: var(--d-ink); }
.why-rates tbody th .why-mn span { display: block; font-size: .85rem; color: var(--d-mut); }
.why-rates td { font-size: 1rem; color: var(--d-soft); }
.why-rates td.strong { font-weight: 650; color: var(--d-ink); }
.why-rates td.soft { color: var(--d-mut); }
.why-rates tbody tr:last-child th,
.why-rates tbody tr:last-child td { border-block-end: 0; }

.why-foot { margin: 14px 0 0; font-size: .95rem; line-height: 1.6; color: var(--d-mut); }
.why-foot a { color: var(--d-acc-d); text-underline-offset: 3px; }

/* ---- prose on the wide side -------------------------------- */

.why .doc-prose { max-width: none; }
/* the network paragraphs and the four answers run in two columns:
   the measure stays readable and the width stops being empty */
.why #network .doc-prose,
.why #questions .doc-prose {
  columns: 2;
  column-gap: clamp(28px, 3.4vw, 56px);
}
.why #network .doc-prose p,
.why #questions .doc-prose p { break-inside: avoid; }
.why #questions .doc-prose h3 {
  break-inside: avoid;
  break-after: avoid;
  margin-block-start: 0;
}
.why #questions .doc-prose h3 + p { margin-block-end: 20px; }
.why #questions .doc-prose > h3:not(:first-child) { margin-block-start: 0; }

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

.why-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);
}
.why-cta p {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.35;
  font-weight: 500;
  color: var(--d-ink);
  max-width: 40ch;
}
.why-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);
}
.why-btn:hover { background: var(--d-acc-d); }
.why-btn:active { transform: scale(.98); }

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

@media (max-width: 1080px) {
  /* the rail stops paying for itself: heading over content again */
  .why .doc-sec > .doc-in { grid-template-columns: minmax(0, 1fr); }
  .why .why-rail { grid-column: 1; grid-row: auto; }
  .why .why-rail .doc-note { max-width: 60ch; }
  .why .doc-sec > .doc-in > :not(.why-rail) { grid-column: 1; margin-block-start: 14px; }
  .why .doc-hero > .doc-in { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .why .why-hero-t, .why-hero-img { grid-column: 1; }
  .why .doc-hero h1, .why .doc-hero .doc-lede { max-width: 46ch; }
  .why-hero-img { max-width: 420px; justify-self: center; }
  .why #network .doc-prose,
  .why #questions .doc-prose { columns: 2; }
}

@media (max-width: 720px) {
  .why-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-proof li:last-child { grid-column: 1 / -1; }
  /* one column, so each pair reads as today-then-here rather than
     as two disconnected lists */
  .why-cmp { grid-template-columns: 1fr; gap: 8px; }
  .why-cmp-h { display: none; }
  .why-cmp-c--a { border-radius: calc(var(--d-r) * .6) calc(var(--d-r) * .6) 0 0; }
  .why-cmp-c--b { border-radius: 0 0 calc(var(--d-r) * .6) calc(var(--d-r) * .6); margin-block-end: 8px; }
  .why #network .doc-prose,
  .why #questions .doc-prose { columns: 1; }
  .why-cta { justify-content: flex-start; }
}