/* ==========================================================================
   Numera - pages/how-we-work.css
   The how we work page (generator/templates/how-we-work.html). css/pages.css holds what the other pages share
   (page head, callout, band, nav) and base.html links this file after it. The three layers are listed in reading
   order (1, 2, 3) and drawn as a stack with layer 1 at the bottom: the approved lead says each layer depends on
   the one below it. Logical properties make the same rules right for Arabic; only the fonts and sizes are set
   again for it, as on the pricing page.
   ========================================================================== */

/* A link to #layers or #monthly-cycle must not land under the sticky nav */
.layers-section[id],
.cycle-section[id],
.network[id] { scroll-margin-top: 96px; }

.layers-section__title,
.cycle-section__title,
.network__title { text-wrap: balance; }

/* ---- The three layers ---- */
.layers-section {
  padding: 64px 0 72px;
  background: var(--c-ground-deep);
  border-top: 1px solid var(--c-line);
}
.layers-section__header {
  max-width: 820px;
  margin-bottom: 32px;
}
.layers-section__title {
  margin-bottom: 14px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.layers-section__lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(10,21,23,0.78);
}
/* column-reverse: the HTML reads 1, 2, 3; the page shows 3 on top and 1 at the bottom, like a stack */
.layers {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.layer {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 24px;
  align-items: start;
  padding-block: 24px 26px;
  padding-inline: 24px 28px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-inline-start: 8px solid var(--layer);
  border-radius: 16px;
}
/* --layer colours the rail, the number and the lit plate; --layer-shade is the same colour, 18% darker, for the
   sides of the lit plate */
.layer--1 {
  --layer: var(--c-primary);
  --layer-shade: #10433E;
}
.layer--2 {
  --layer: var(--c-secondary);
  --layer-shade: #227268;
}
.layer--3 {
  --layer: var(--c-accent);
  --layer-shade: #D1584B;
}
/* The drawing of the stack: the plate of this layer is filled, the other two are outlines */
.stack {
  display: block;
  width: 104px;
  height: auto;
}
.stack__plate polygon {
  fill: var(--c-ground);
  stroke: #C9C2B6;
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.stack__plate--on .stack__top {
  fill: var(--layer);
  stroke: var(--layer);
}
.stack__plate--on .stack__left,
.stack__plate--on .stack__right {
  fill: var(--layer-shade);
  stroke: var(--layer);
}
/* min-width 0: a grid item does not shrink below its longest word unless it is told it may */
.layer__body,
.layer__col { min-width: 0; }
.layer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.layer__no {
  display: inline-flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--layer);
  color: var(--c-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
/* White on coral is 2.8 to 1; the dark digit is above 6 to 1 */
.layer--3 .layer__no { color: var(--c-ink); }
.layer__name {
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--c-primary);
}
.layer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.layer__label {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.layer__text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(10,21,23,0.82);
}
.layer__text--gives {
  font-weight: 500;
  color: var(--c-primary);
}
/* The approved caveat that goes with "Valuation analysis" in layer 3, under the two columns */
.layer__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-muted);
}
.value-note {
  margin-top: 24px;
  padding: 24px 28px;
  border-radius: 16px;
  background: var(--c-white);
  border: 1px solid rgba(20,82,76,0.28);
}
.value-note__title {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.value-note__text {
  max-width: 900px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(10,21,23,0.86);
}

/* ---- The monthly cycle: four steps in a row, with an arrow between them ---- */
.cycle-section {
  padding: 64px 0 72px;
  background: var(--c-ground-deep);
}
.cycle-section__title {
  max-width: 820px;
  margin-bottom: 14px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
}
/* The one line under the heading: the full cycle belongs to the finance team plans */
.cycle-section__scope {
  max-width: 820px;
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(10,21,23,0.78);
  text-wrap: pretty;
}
.cycle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cycle__step {
  position: relative;
  padding: 22px 22px 24px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 16px;
}
/* The arrow to the next step: two borders of a small square, turned; the Arabic block turns it the other way */
.cycle__step::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: -19px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--c-secondary);
  border-inline-end: 2px solid var(--c-secondary);
  transform: translateY(-50%) rotate(45deg);
}
.cycle__step:last-child::after { display: none; }
.cycle__no {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-primary);
}
.cycle__name {
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.cycle__text {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(10,21,23,0.82);
}

/* ---- The licensed tax and audit network ---- */
.network {
  padding: 64px 0 72px;
  background: var(--c-ground);
}
.network__title {
  max-width: 820px;
  margin-bottom: 18px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.network__text {
  max-width: 820px;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.6;
  color: rgba(10,21,23,0.86);
}

/* Tablet: the four steps become two rows of two, and the stack drawing shrinks */
@media (max-width: 1000px) {
  .cycle {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .cycle__step::after { display: none; }
  .layer {
    grid-template-columns: 72px 1fr;
    gap: 18px;
  }
  .stack { width: 72px; }
}

/* Phone: one column. The stack drawing goes; the number and the colour still say which layer a card is */
@media (max-width: 760px) {
  .layers-section,
  .cycle-section,
  .network { padding: 48px 0 56px; }
  .layers-section__header { margin-bottom: 24px; }
  .layer {
    grid-template-columns: 1fr;
    padding-block: 18px 20px;
    padding-inline: 16px 18px;
    border-inline-start-width: 6px;
  }
  .stack { display: none; }
  .layer__cols {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .value-note { padding: 18px; }
  .value-note__text { font-size: 17px; }
  .cycle {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ---- Arabic: Tajawal on the labels that are set in a Latin font above, larger sizes for Arabic letters ---- */
[dir="rtl"] .layers-section__title,
[dir="rtl"] .cycle-section__title,
[dir="rtl"] .network__title,
[dir="rtl"] .layer__name,
[dir="rtl"] .cycle__name { line-height: 1.25; }
[dir="rtl"] .layer__label,
[dir="rtl"] .value-note__title {
  font-family: var(--font-arabic);
  font-size: 14px;
  text-transform: none;
}
[dir="rtl"] .layer__text,
[dir="rtl"] .cycle__text { font-size: 17px; }
[dir="rtl"] .layer__note { font-size: 16px; }
[dir="rtl"] .cycle-section__scope { font-size: 19px; }
[dir="rtl"] .layers-section__lead,
[dir="rtl"] .value-note__text { font-size: 19px; }
[dir="rtl"] .network__text { font-size: clamp(19px, 2vw, 22px); }
[dir="rtl"] .cycle__step::after { transform: translateY(-50%) rotate(-45deg); }