/* ============================================================================
   MEANING OF iKULUTU.com — page-specific styles
   Every value measured off reference/spec/meaning-of-ikulutu.desktop.json.
   Duda builds this page from plain rows (15px 40px) with two "parallax" card
   rows (50px 40px); the venn-diagram artwork is a fixed, cover-sized page
   background, which is why it only paints across the first viewport.
   ========================================================================== */

/* The live page paints the artwork on the page wrapper with
   background-attachment:fixed, so it covers exactly the first 1440x900 of the
   document and the page background (#eee) shows below it. */
.page-meaning-of-ikulutu main {
  background-color: var(--white);
  background-image: url(../assets/Clickfunnels-ideal-dimensions-2880w.png);
  background-repeat: no-repeat;
  background-position: 0% 50%;
  background-size: cover;
  background-attachment: fixed;
}

/* ---------- local patches to shared chrome (see report) --------------------
   These reproduce live details that site.css/the shared partials do not carry
   yet. They are scoped to this page so no other build is affected. */

/* The live fixed header casts a shadow over the page. */
.page-meaning-of-ikulutu .site-header {
  box-shadow: rgba(0, 0, 0, .25) 0 3px 11px 0;
}
/* The live footer CTA is the same widget as this page's CTA: 3px black border,
   10px radius, drop shadow. */
.page-meaning-of-ikulutu .footer-cta {
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, .25) 0 3px 11px 0;
}
/* The live footer divider paints 1px of rule inside a 3px-tall box. */
.page-meaning-of-ikulutu .footer-rule {
  border-top-width: 1px;
  height: 3px;
}
/* Live footer nav sits 1px higher than the shared 37px gap puts it. */
.page-meaning-of-ikulutu .footer-nav-wrap { margin-top: 36px; }
/* Live footer title baseline sits 1px lower than the shared 95px padding puts it. */
.page-meaning-of-ikulutu .footer-title { padding-top: .5px; }
/* Live copyright line keeps a space between the year and the sentence. */
.page-meaning-of-ikulutu .footer-legal__year { padding-right: 4px; }
/* …and the shared 136px tail runs 1px past the live page. */
.page-meaning-of-ikulutu .footer-legal { padding-bottom: 135px; }

/* ---------- rows ---------- */
.page-meaning-of-ikulutu .mi-sec { padding: 15px 40px; }
.page-meaning-of-ikulutu .mi-cardsec { padding: 50px 40px; }

/* ---------- section headings (24px Inter bold, centred) ---------- */
.page-meaning-of-ikulutu .mi-h {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  color: #000;
  text-align: center;
  margin: 28px 0 0;
  padding: 2px 0;
}

/* ---------- body copy ---------- */
.page-meaning-of-ikulutu .mi-prose {
  max-width: 725px;
  margin: 28px 0 8px;
  padding: 2px 0;
  font-size: 18px;
  line-height: normal;
  color: var(--body-text);
}
/* Duda separates paragraphs with an empty 16px paragraph = an 18px blank line. */
.page-meaning-of-ikulutu .mi-prose p { margin: 0 0 18px; }
/* …and with an empty 18px paragraph = a 21px blank line, further down. */
.page-meaning-of-ikulutu .mi-prose p.mi-gap-line { margin-bottom: 21px; }
.page-meaning-of-ikulutu .mi-prose p:last-child { margin-bottom: 0; }
.page-meaning-of-ikulutu .mi-prose em { font-style: italic; }
.page-meaning-of-ikulutu .mi-prose strong { font-weight: 700; }
/* Duda's underline runs through descenders. */
.page-meaning-of-ikulutu .mi-underline {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.page-meaning-of-ikulutu .mi-key { color: var(--gold); font-weight: 700; }

/* ---------- three-up cards ----------
   Duda's columns are the cards: 308.33px wide with 20px / 15px gaps, summing
   to the 960px container exactly. They stretch to a common height. */
.page-meaning-of-ikulutu .mi-cards { align-items: stretch; }
.page-meaning-of-ikulutu .mi-card {
  width: 308.33px;
  padding: 0 15px;
  background: var(--white);
  border: 3px solid var(--gold);
  box-shadow: rgba(0, 0, 0, .25) 0 3px 11px 0;
}
.page-meaning-of-ikulutu .mi-card:nth-child(1) { margin-right: 20px; }
.page-meaning-of-ikulutu .mi-card:nth-child(2) { margin-right: 15px; }
.page-meaning-of-ikulutu .mi-card--deep { padding-bottom: 30px; }

/* The card heading's line box is set by a 70px Inter strut: that is what puts
   the 48px number 21px below the top of the heading box. */
.page-meaning-of-ikulutu .mi-card__head {
  font-family: var(--font-display);
  font-size: 70px;
  font-weight: 400;
  line-height: normal;
  margin: 8px 0;
  padding: 2px 0;
  text-align: left;
}
.page-meaning-of-ikulutu .mi-card__num {
  font-size: 48px;
  font-weight: 700;
  color: var(--gold);
}
.page-meaning-of-ikulutu .mi-card__name {
  margin-left: 13.5px;      /* the collapsed space, rendered at 48px */
  font-size: 30px;
  font-weight: 700;
  color: #000;
  vertical-align: 8px;      /* the live title does not sit on the number's baseline */
}

.page-meaning-of-ikulutu .mi-card__body {
  margin-top: 16px;
  padding: 2px 0;
  font-size: 18px;
  line-height: normal;
  color: var(--body-text);
  text-align: left;
}
.page-meaning-of-ikulutu .mi-card__body p { margin: 0; }
.page-meaning-of-ikulutu .mi-card__body p + p { margin-top: 21px; }
.page-meaning-of-ikulutu .mi-card__body strong { font-weight: 700; }
/* Cards 1 and 2 of the first row carry Duda's Verdana stack, whose lines are
   pitched at 22.667px on the live page rather than the 22px the same stack
   resolves to here — pinned so the four wrapped lines land on the live rows. */
.page-meaning-of-ikulutu .mi-card__body--verdana {
  font-family: Verdana, "Segoe UI Emoji", "Segoe UI Symbol", Symbola, EmojiSymbols;
  line-height: 22.6px;
  margin-top: 16.81px;
}
.page-meaning-of-ikulutu .mi-card__body--verdana p + p { margin-top: 22.6px; }
/* Card 3 of the first row ends on an empty 16px line. */
.page-meaning-of-ikulutu .mi-card__body--pad { padding-bottom: 20px; }

/* ---------- CTA ---------- */
.page-meaning-of-ikulutu .mi-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 47px;
  margin: 40px auto 50px;
  background: var(--gold-btn);
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, .25) 0 3px 11px 0;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.page-meaning-of-ikulutu .mi-cta__text { padding: 0 7px; }
.page-meaning-of-ikulutu .mi-cta:hover { background: var(--gold-btn-hover); }

/* ============================================================================
   MOBILE — same content, stacked. Duda drops the copy to 13/14px, the section
   headings to 17px and the card numbers to 50px.
   ========================================================================== */
@media (max-width: 767px) {
  .page-meaning-of-ikulutu main { background-attachment: scroll; }

  .page-meaning-of-ikulutu .mi-sec { padding: 0 15px; }
  .page-meaning-of-ikulutu .mi-cardsec { padding: 50px 5px; }

  .page-meaning-of-ikulutu .mi-h { font-size: 17px; margin-top: 23px; }

  .page-meaning-of-ikulutu .mi-prose {
    max-width: none;
    margin-top: 9px;
    font-size: 14px;
  }
  .page-meaning-of-ikulutu .mi-prose--13 { font-size: 13px; }
  .page-meaning-of-ikulutu .mi-prose p { margin-bottom: 16px; }
  .page-meaning-of-ikulutu .mi-prose p.mi-gap-line { margin-bottom: 16px; }

  .page-meaning-of-ikulutu .mi-card,
  .page-meaning-of-ikulutu .mi-card:nth-child(1),
  .page-meaning-of-ikulutu .mi-card:nth-child(2) {
    width: 100%;
    margin-right: 0;
  }
  .page-meaning-of-ikulutu .mi-card__head { font-size: 36px; }
  .page-meaning-of-ikulutu .mi-card__num { font-size: 50px; }
  .page-meaning-of-ikulutu .mi-card__name { vertical-align: baseline; }

  .page-meaning-of-ikulutu .mi-cta { width: 100%; }

  /* the desktop-only footer patches above must not leak into the mobile footer */
  .page-meaning-of-ikulutu .footer-legal { padding-bottom: 32px; }
  .page-meaning-of-ikulutu .footer-legal__year { padding-right: 0; }
}