/* =====================================================================
   InstaFarm · Chapter 05 "How impact scales" (revenue streams + flywheel)
   Drop-in component, measured from model-reference.png (stage = 1536px).
   Inner sizes use container-query units (cqi = 1% of .model__stage width)
   with px floors. DO NOT replace cqi values with px / vw / clamp.
   ===================================================================== */

.model {
  --md-bg: #FEF9F7;
  --md-ink: #17171D;
  --md-text: #5E5654;
  --md-red: #C4161C;
  --md-num: #E58F89;
  --md-line: #F2DEDA;

  background: var(--md-bg);
  scroll-margin-top: 80px;
}
.model__stage { container-type: inline-size; max-width: 1600px; margin: 0 auto; }
.model__inner { padding: 3.1cqi 3.2cqi 2.6cqi 3.3cqi; }

/* ---------- shared bits ---------- */
.model__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .8cqi;
  font: 600 max(12px, .94cqi)/1 'Instrument Sans', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-red);
}
.model__eyebrow::before { content: ""; width: 2.9cqi; height: 1.5px; background: currentColor; flex: none; }
.model h2 em, .model h3 em { font-style: normal; color: var(--md-red); }

/* ---------- header ---------- */
.model__head {
  display: grid;
  grid-template-columns: 58.2cqi 1px 25.5cqi;
  column-gap: 2cqi;
  justify-content: start;
  align-items: start;
  padding-left: 1.9cqi;
}
.model__title {
  margin: 1.7cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(32px, 4.3cqi);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--md-ink);
  white-space: nowrap;
}
.model__rule { width: 1px; height: 4.1cqi; margin-top: 2cqi; background: #E7B6B2; }
.model__lede {
  margin: 1.65cqi 0 0;
  font: 400 max(15px, 1.07cqi)/1.52 'Instrument Sans', system-ui, sans-serif;
  color: var(--md-text);
}

/* ---------- 4 revenue cards ---------- */
.model__cards {
  list-style: none;
  margin: 2.4cqi 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.35cqi;
}
.model__card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 22.3cqi;
  padding: 1.43cqi 1.5cqi 1.35cqi 1.76cqi;
  border: 1px solid var(--md-line);
  border-radius: 1.05cqi;
  background: #FFFBFA;
  box-shadow: 0 12px 30px rgba(150, 60, 50, .05);
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1);
}
.model__card-img {
  position: absolute;
  right: -9%;
  bottom: -5%;
  width: 128%;
  height: auto;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(52% 80% at 76% 70%, #000 55%, transparent 88%);
          mask-image: radial-gradient(52% 80% at 76% 70%, #000 55%, transparent 88%);
}
.model__card > :not(.model__card-img) { position: relative; }
.model__card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.model__num {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 500;
  font-size: max(20px, 1.8cqi);
  line-height: 1;
  color: var(--md-num);
}
.model__icon {
  width: max(40px, 3.9cqi);
  height: max(40px, 3.9cqi);
  border-radius: 50%;
  background: #FCE4E0;
  display: grid;
  place-items: center;
  color: var(--md-red);
  margin-top: .1cqi;
}
.model__icon svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.model__card h3 {
  margin: -.9cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(19px, 1.76cqi);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--md-ink);
}
.model__card p {
  margin: 1.8cqi 0 0;
  max-width: 12.6cqi;
  font: 400 max(14px, 1.04cqi)/1.5 'Instrument Sans', system-ui, sans-serif;
  color: var(--md-text);
}
.model__card a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .9cqi;
  font: 600 max(12px, .94cqi)/1 'Instrument Sans', system-ui, sans-serif;
  color: var(--md-red);
  text-decoration: none;
  width: fit-content;
  padding: .25cqi .9cqi .25cqi .25cqi;
  margin-left: -.25cqi;
  border-radius: 999px;
  background: rgba(255, 251, 250, .9);
  box-shadow: 0 2px 10px rgba(150, 60, 50, .06);
}
.model__card--red a { background: rgba(178, 19, 26, .92); box-shadow: none; }
.model__card a span[aria-hidden] {
  width: max(28px, 2.2cqi);
  height: max(28px, 2.2cqi);
  border-radius: 50%;
  border: 1.3px solid currentColor;
  display: grid;
  place-items: center;
  font-size: max(13px, 1cqi);
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.model__card a:hover span[aria-hidden] { transform: translateX(3px); background: var(--md-red); color: #FFFFFF; border-color: var(--md-red); }
.model__card a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* red SaaS card */
.model__card--red { background: linear-gradient(155deg, #C8171E 0%, #B2131A 100%); border-color: #B2131A; box-shadow: 0 18px 40px rgba(196, 22, 28, .25); }
.model__card--red .model__num,
.model__card--red h3,
.model__card--red p,
.model__card--red a { color: #FFFFFF; }
.model__card--red p { color: #FFE9E6; }
.model__card--red .model__icon { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.model__card--red a:hover span[aria-hidden] { background: #FFFFFF; color: var(--md-red); border-color: #FFFFFF; }
.model__card--red .model__card-img {
  width: 128%;
  -webkit-mask-image: radial-gradient(40% 62% at 74% 76%, #000 50%, transparent 85%);
          mask-image: radial-gradient(40% 62% at 74% 76%, #000 50%, transparent 85%);
}
@media (hover: hover) {
  .model__card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(150, 60, 50, .12); }
}

/* ---------- flywheel panel ---------- */
.model__fly {
  margin-top: 1.9cqi;
  box-sizing: border-box;
  padding: 2.7cqi 2.4cqi 2.7cqi 2.7cqi;
  border: 1px solid var(--md-line);
  border-radius: 1.3cqi;
  background: linear-gradient(180deg, #FCF1EE 0%, #FCEDE9 100%);
}
.model__fly-head {
  display: grid;
  grid-template-columns: 33.6cqi 1px 29cqi;
  column-gap: 2cqi;
  justify-content: start;
  align-items: start;
}
.model__fly-title {
  margin: 1.6cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(26px, 2.73cqi);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--md-ink);
}
.model__fly-title span { display: block; white-space: nowrap; }
.model__fly .model__rule { height: 4.1cqi; margin-top: 2.1cqi; }
.model__fly .model__lede { margin-top: 1.7cqi; }

.model__loop-wrap { position: relative; margin: 2.5cqi .4cqi 0 .9cqi; padding-bottom: 3.6cqi; }
.model__steps {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3.1cqi;
}
.model__step {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 10.9cqi;
  padding: 1cqi 1.2cqi 1.3cqi 1.5cqi;
  border: 1px solid var(--md-line);
  border-radius: .95cqi;
  background: #FFFFFF;
}
.model__step + .model__step::before {
  content: "→";
  position: absolute;
  left: -2.1cqi;
  top: 50%;
  transform: translateY(-50%);
  font: 400 max(18px, 1.6cqi)/1 'Instrument Sans', system-ui, sans-serif;
  color: var(--md-red);
}
.model__step-icon {
  width: max(38px, 3.65cqi);
  height: max(38px, 3.65cqi);
  border-radius: 50%;
  background: #FCE4E0;
  display: grid;
  place-items: center;
  color: var(--md-red);
}
.model__step-icon svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.model__step h4 {
  margin: .95cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(15px, 1.2cqi);
  line-height: 1.2;
  color: var(--md-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.model__step p {
  overflow-wrap: break-word;
  margin: .35cqi 0 0;
  font: 400 max(13px, 1.04cqi)/1.5 'Instrument Sans', system-ui, sans-serif;
  color: var(--md-text);
}
.model__step--hi { background: #FCE2DE; border-color: #F8D2CC; }
.model__step--hi .model__step-icon { background: var(--md-red); color: #FFFFFF; }
.model__step--hi h4 { color: var(--md-red); }

/* dashed return loop: from the last card, round the bottom, back into the first */
.model__loop {
  position: absolute;
  left: -2.3cqi;
  right: -2.3cqi;
  top: 5.4cqi;
  bottom: 1.8cqi;
  border: 1.3px dashed var(--md-red);
  border-top: 0;
  border-radius: 0 0 3.4cqi 3.4cqi;
  pointer-events: none;
  opacity: .8;
}
.model__loop::before {                 /* arrowhead into card 1 */
  content: "";
  position: absolute;
  left: -1px;
  top: -2px;
  width: .7cqi;
  height: .7cqi;
  border-left: 1.3px solid var(--md-red);
  border-top: 1.3px solid var(--md-red);
  transform: translate(-45%, 0) rotate(45deg);
}
.model__loop-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.model__loop-caption p {
  margin: 0;
  padding: 0 1cqi;
  background: #FCEDE9;
  font: 500 max(12px, .92cqi)/1.4 'Instrument Sans', system-ui, sans-serif;
  color: var(--md-red);
  transform: translateY(-.95cqi);
}
.model__loop-icon {
  display: grid;
  place-items: center;
  box-sizing: content-box;
  position: absolute;
  left: 8.6cqi;
  bottom: 0;
  transform: translateY(-.6cqi);
  padding: 0 .6cqi;
  background: #FCEDE9;
  color: var(--md-red);
  width: max(18px, 1.5cqi);
  height: max(18px, 1.5cqi);
}
.model__loop-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- reveal ---------- */
.model [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.model [data-reveal].is-in { opacity: 1; transform: none; }
.model__card[data-reveal]:nth-child(2) { transition-delay: .06s; }
.model__card[data-reveal]:nth-child(3) { transition-delay: .12s; }
.model__card[data-reveal]:nth-child(4) { transition-delay: .18s; }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .model__inner { padding: 48px 28px 52px; }
  .model__head, .model__fly-head { display: block; padding-left: 0; }
  .model__title { font-size: clamp(34px, 6vw, 52px); white-space: normal; }
  .model__rule { display: none; }
  .model__lede, .model__fly .model__lede { margin-top: 14px; max-width: 38rem; }
  .model__cards { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .model__card { height: auto; min-height: 320px; padding: 20px 20px 18px 22px; border-radius: 18px; }
  .model__card h3 { margin-top: -6px; }
  .model__card p { margin-top: 14px; max-width: 60%; }
  .model__card-img { width: 100%; right: -6%; bottom: -4%; }
  .model__fly { margin-top: 20px; padding: 28px 24px; border-radius: 20px; }
  .model__fly-title { font-size: clamp(26px, 4.4vw, 36px); }
  .model__loop-wrap { margin: 22px 0 0; padding-bottom: 0; }
  .model__steps { grid-template-columns: 1fr; gap: 26px; }
  .model__step { min-height: 0; padding: 16px 18px; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; border-radius: 14px; }
  .model__step-icon { grid-row: span 2; width: 44px; height: 44px; }
  .model__step h4 { margin: 0; white-space: normal; }
  .model__step p { margin: 2px 0 0; }
  .model__step + .model__step::before { content: "↓"; left: 50%; top: -20px; transform: translateX(-50%); font-size: 16px; }
  .model__loop, .model__loop-icon { display: none; }
  .model__loop-caption { position: static; margin-top: 16px; justify-content: flex-start; }
  .model__loop-caption p { background: none; padding: 0; transform: none; font-size: 13px; }
}
@media (max-width: 639px) {
  .model__inner { padding: 40px 20px 44px; }
  .model__title { font-size: clamp(30px, 8.6vw, 40px); }
  .model__fly-title span { white-space: normal; display: inline; }
  .model__cards { grid-template-columns: 1fr; }
  .model__card { min-height: 290px; }
}

@media (prefers-reduced-motion: reduce) {
  .model *, .model [data-reveal] { transition: none !important; }
  .model [data-reveal] { opacity: 1; transform: none; }
  .model__card:hover { transform: none; }
}