/* ===========================================================================
   Section 03 — "Focus on People, Not Paper" (node 1:248)
   Section: 1710 x 757.9. Inner text column 672px wide, offset within the
   1056px global container. All coords from Figma.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');

.s03 {
  height: 1180px;
  background: #ffffff;
}

/* Figma: inner Container at x=495 (global 327 + 168), heading/body align at +24,
   so text column begins at global-container left + 192px; section top pad 80px.
   Column width = 672px. */
.s03-inner {
  position: absolute;
  left: 192px;
  top: 80px;
  width: 672px;
}

/* Heading 2 (1:251) — Inter Medium 32/48, tracking -0.4 */
.s03-heading {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: var(--section-heading-weight);
  font-size: var(--section-heading-size-narrow);
  line-height: var(--section-heading-line-height-narrow);
  letter-spacing: var(--section-heading-letter-spacing-narrow);
  color: var(--section-heading-color);
}

/* Body (1:253) — Inter Italic 22/35.2, #222 @ 40% opacity.
   Body container sits 88px below heading top (48px heading frame + 40px gap). */
.s03-body {
  margin-top: 40px;
}

.s03-para {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 35.2px;
  color: rgba(34, 34, 34, 0.75);
}

.s03-para + .s03-para {
  margin-top: 35.2px;
}

/* Problem/questions table */
.s03-table {
  width: 100%;
  margin-top: 48px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f7f9;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #222222;
}

.s03-table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.s03-table tr:last-child {
  border-bottom: none;
}

.s03-table td {
  padding: 20px 24px;
  vertical-align: top;
}

.s03-table-q {
  width: 46%;
  padding-right: 32px;
  font-weight: 500;
}

.s03-table-a {
  width: 54%;
  color: rgba(34, 34, 34, 0.7);
}

/* Signature block (1:1825) — container margin at y=475.148 (rel. inner) */
.s03-sign {
  position: absolute;
  top: 475.148px;
  left: 0;
  width: 672px;
}

/* Image (1:1826) — 200 x 44.766, negative left -10, image top 48px */
.s03-sign-img {
  position: absolute;
  top: 48px;
  left: -10px;
  width: 200px;
  height: 44.766px;
}
.s03-sign-img img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Heading 3 caption (1:1831) — Caveat Regular 20/30, black; top 92.766px */
.s03-sign-name {
  position: absolute;
  top: 92.766px;
  left: 0;
  margin: 0;
  font-family: 'Caveat', cursive;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #000000;
  white-space: nowrap;
}

/* ===========================================================================
   Responsive — tablet/mobile. Desktop rules above stay untouched.
   Remove the fixed height, drop the absolute offset, center the text column,
   and let paragraphs wrap to the fluid container. Signature flows in-document.
   =========================================================================== */
@media (max-width: 1024px) {
  .s03 {
    height: auto;
    padding: 64px 0;
  }

  .s03-inner {
    position: static;
    left: auto;
    top: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
  }

  .s03-body,
  .s03-para {
    width: 100%;
    max-width: 100%;
  }

  /* Signature: in normal flow, left-aligned, sitting below the body */
  .s03-sign {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 40px;
  }

  .s03-sign-img {
    position: static;
    top: auto;
    left: 0;
    width: 200px;
    max-width: 100%;
    height: auto;
  }
  .s03-sign-img img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .s03-sign-name {
    position: static;
    top: auto;
    left: auto;
    margin-top: 12px;
  }
}

@media (max-width: 600px) {
  .s03 {
    height: auto;
    padding: 48px 0;
  }

  .s03-inner {
    position: static;
    left: auto;
    top: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
  }

  .s03-heading {
    font-size: 24px;
    line-height: 32px;
    white-space: normal;
  }

  .s03-body {
    margin-top: 28px;
    width: 100%;
    max-width: 100%;
  }

  .s03-para {
    width: 100%;
    max-width: 100%;
    font-size: 17px;
    line-height: 27px;
  }

  .s03-para + .s03-para {
    margin-top: 24px;
  }

  .s03-table {
    margin-top: 28px;
    font-size: 15px;
    line-height: 22px;
  }

  .s03-table td {
    display: block;
    width: 100%;
    padding: 12px 0;
  }

  .s03-table tr {
    padding: 8px 0;
  }

  .s03-table-q {
    padding-right: 0;
    padding-bottom: 4px;
    font-weight: 500;
  }

  .s03-table-a {
    padding-top: 0;
    padding-bottom: 16px;
  }

  .s03-sign {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 32px;
  }

  .s03-sign-img {
    position: static;
    top: auto;
    left: 0;
    width: 180px;
    max-width: 100%;
    height: auto;
  }
  .s03-sign-img img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .s03-sign-name {
    position: static;
    top: auto;
    left: auto;
    margin-top: 10px;
  }
}