/* Text blocks converted from slide images on the Grofers case study.
   Sizes are expressed in "design pixels" at a 1440px wide viewport (--tx-u = 1/1440 of viewport width),
   so on desktop each block scales exactly like the image did; max() floors keep text readable on small screens. */
.tx-slide {
  --tx-u: calc(100vw / 1440);
  --tx-navy: #10203c;
  --tx-blue: #0000f4;
  --tx-body: #454a5b;
  --tx-tint: #f4f5fd;
  display: block;
  box-sizing: border-box;
  font-family: Generalsans, sans-serif;
  color: var(--tx-navy);
  height: auto;
  object-fit: initial;
}
.tx-slide *, .tx-slide *::before, .tx-slide *::after { box-sizing: border-box; }
.tx-slide h2, .tx-slide h3, .tx-slide p, .tx-slide ul, .tx-slide li { margin: 0; padding: 0; list-style: none; }
.tx-slide h2 { font-family: Generalsans, sans-serif; font-weight: 700; color: var(--tx-navy); letter-spacing: 0.01em; }
.tx-slide p, .tx-slide li { font-weight: 300; color: var(--tx-body); }
.tx-slide strong { font-weight: 700; }

/* ---------- 1.4 Insights ---------- */
.tx-insights { background: #fff; padding: calc(123 * var(--tx-u)) 16px calc(73 * var(--tx-u)); text-align: center; }
.tx-insights h2 { font-size: max(32px, calc(58 * var(--tx-u))); line-height: 1.1; }
.tx-insights .tx-insights-sub { margin-top: calc(20 * var(--tx-u)); font-size: max(14px, calc(13.5 * var(--tx-u))); line-height: 1.5; font-weight: 400; color: var(--tx-navy); }
.tx-insights ul { width: calc(984 * var(--tx-u)); max-width: 100%; min-width: min(100%, 360px); margin: calc(75 * var(--tx-u)) auto 0; text-align: left; }
.tx-insights li { background: var(--tx-tint); border-radius: max(18px, calc(28 * var(--tx-u))); padding: max(22px, calc(40 * var(--tx-u))) max(18px, calc(30 * var(--tx-u))); margin-bottom: max(14px, calc(28 * var(--tx-u))); color: var(--tx-blue); font-weight: 500; font-size: max(17px, calc(22 * var(--tx-u))); line-height: 1.37; letter-spacing: 0.01em; }
.tx-insights li:last-child { margin-bottom: 0; }

/* ---------- Understanding from the market study ---------- */
.tx-market { background: var(--tx-tint); padding: calc(65 * var(--tx-u)) calc(203 * var(--tx-u)) calc(100 * var(--tx-u)); }
.tx-market h2 { font-size: max(28px, calc(36 * var(--tx-u))); line-height: 1.2; }
.tx-star { display: inline-block; width: 1em; height: 1em; vertical-align: top; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2fd0' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 1v22M1 12h22M4.2 4.2l15.6 15.6M19.8 4.2L4.2 19.8'/%3E%3C/svg%3E"); }
.tx-market h2 .tx-star { width: 0.62em; height: 0.62em; margin: -0.05em 0 0 0.04em; }
.tx-market .tx-market-sub { margin-top: calc(34 * var(--tx-u)); font-size: max(14.5px, calc(14.3 * var(--tx-u))); line-height: 1.5; max-width: calc(1010 * var(--tx-u)); min-width: min(100%, 320px); }
.tx-market ul { display: grid; grid-template-columns: repeat(4, calc(204 * var(--tx-u))); column-gap: calc(38 * var(--tx-u)); margin: calc(52 * var(--tx-u)) 0 0 calc(5 * var(--tx-u)); }
.tx-market li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tx-market .tx-card { width: 100%; min-height: calc(97 * var(--tx-u)); display: flex; align-items: center; justify-content: center; text-align: center; background: #fff; border-radius: calc(24 * var(--tx-u)); padding: 10px calc(16 * var(--tx-u)); font-weight: 600; font-size: max(14px, calc(13.6 * var(--tx-u))); line-height: 1.8; color: #1a0fd0; }
.tx-market .tx-dots { width: 0; height: calc(43 * var(--tx-u)); min-height: 22px; border-left: 3px dotted #7478dc; margin: 0 auto; }
.tx-market .tx-note { margin-top: calc(18 * var(--tx-u)); padding: 0 calc(8 * var(--tx-u)); font-size: max(13px, calc(12.2 * var(--tx-u))); line-height: 1.45; font-weight: 300; color: var(--tx-body); }
.tx-market .tx-note strong { display: block; font-size: max(16px, calc(17 * var(--tx-u))); line-height: 1.3; margin-bottom: 2px; color: var(--tx-navy); }
.tx-market .tx-note strong.tx-inline { display: inline; font-size: inherit; margin: 0; font-weight: 700; }

/* ---------- Whats next? + Learnings ---------- */
.tx-wrap { background: #fff; }
.tx-next { background: var(--tx-tint); padding: calc(71 * var(--tx-u)) calc(163 * var(--tx-u)) calc(59 * var(--tx-u)); display: grid; grid-template-columns: calc(241 * var(--tx-u)) minmax(0, calc(700 * var(--tx-u))); }
.tx-next h2 { font-size: max(19px, calc(18.5 * var(--tx-u))); line-height: 1.5; color: var(--tx-blue); letter-spacing: 0; }
.tx-next p { font-size: max(15px, calc(14.4 * var(--tx-u))); line-height: 2; }
.tx-learn { background: #fff; padding: calc(92 * var(--tx-u)) calc(163 * var(--tx-u)) calc(150 * var(--tx-u)); }
.tx-learn h2 { font-size: max(28px, calc(35 * var(--tx-u))); line-height: 1.2; }
.tx-learn ul { max-width: calc(715 * var(--tx-u)); min-width: min(100%, 320px); margin-top: calc(87 * var(--tx-u)); }
.tx-learn li { position: relative; padding-left: max(22px, calc(22 * var(--tx-u))); margin-bottom: calc(41 * var(--tx-u)); font-size: max(15px, calc(14 * var(--tx-u))); line-height: 2.07; }
.tx-learn li:last-child { margin-bottom: 0; }
.tx-learn li .tx-star { position: absolute; left: 0; top: calc(8 * var(--tx-u)); width: max(13px, calc(13 * var(--tx-u))); height: max(13px, calc(13 * var(--tx-u))); }

/* ---------- Overview ---------- */
.tx-overview { background: #fff; padding: calc(98 * var(--tx-u)) calc(60 * var(--tx-u)) calc(110 * var(--tx-u)) calc(101 * var(--tx-u)); display: grid; grid-template-columns: calc(410 * var(--tx-u)) calc(536 * var(--tx-u)) minmax(0, calc(300 * var(--tx-u))); grid-template-areas: "info head head" "info role results"; align-items: start; }
.tx-overview .tx-info { grid-area: info; margin-top: calc(82 * var(--tx-u)); max-width: calc(330 * var(--tx-u)); min-width: min(100%, 240px); }
.tx-overview .tx-head { grid-area: head; }
.tx-overview .tx-role { grid-area: role; margin-top: calc(63 * var(--tx-u)); padding-right: calc(40 * var(--tx-u)); }
.tx-overview .tx-results { grid-area: results; margin-top: calc(63 * var(--tx-u)); }
.tx-overview h2 { font-size: max(30px, calc(37 * var(--tx-u))); line-height: 1.2; }
.tx-overview .tx-head p { margin-top: calc(24 * var(--tx-u)); max-width: calc(820 * var(--tx-u)); font-size: max(15px, calc(13.5 * var(--tx-u))); line-height: 1.83; }
.tx-overview h3 { font-weight: 700; color: var(--tx-navy); font-family: Generalsans, sans-serif; letter-spacing: 0.01em; }
.tx-overview .tx-info h3 { font-size: max(15px, calc(13 * var(--tx-u))); font-weight: 600; line-height: 1.4; }
.tx-overview .tx-info h4 { margin: calc(26 * var(--tx-u)) 0 calc(6 * var(--tx-u)); font-family: Generalsans, sans-serif; font-weight: 500; font-size: max(12px, calc(11.3 * var(--tx-u))); line-height: 1.4; letter-spacing: 0.01em; color: #2b25b8; }
.tx-overview .tx-info h3 + h4 { margin-top: calc(24 * var(--tx-u)); }
.tx-overview .tx-info p { margin: 0; font-size: max(14px, calc(12.8 * var(--tx-u))); line-height: 1.28; }
.tx-overview .tx-info h4 + p { line-height: 1.28; }
.tx-overview .tx-role h3, .tx-overview .tx-results h3 { font-weight: 600; font-size: max(15px, calc(13 * var(--tx-u))); line-height: 1.4; margin-bottom: calc(16 * var(--tx-u)); }
.tx-overview li { position: relative; font-size: max(15px, calc(13.5 * var(--tx-u))); line-height: 1.8; }
.tx-overview li::before { content: ""; position: absolute; left: calc(-20 * var(--tx-u)); top: 0.3em; width: 14px; height: 14px; margin-left: 0; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8.5l4 5.5L14.5 1.5' fill='none' stroke='%231a0fd0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tx-overview ul { padding-left: 0; }
.tx-br-d { display: inline; }

/* ---------- Mobile ---------- */
@media screen and (max-width: 991px) {
  .tx-insights { padding: 48px 16px 40px; }
  .tx-insights .tx-insights-sub { margin-top: 10px; }
  .tx-insights ul { width: 100%; margin-top: 28px; }
  .tx-insights li { padding: 20px 18px; }

  .tx-market { padding: 40px 20px 44px; }
  .tx-market .tx-market-sub { margin-top: 16px; }
  .tx-market ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; margin: 28px 0 0; }
  .tx-market .tx-card { min-height: 88px; padding: 10px 12px; border-radius: 18px; }
  .tx-market .tx-dots { height: 26px; }
  .tx-market .tx-note { margin-top: 12px; padding: 0; }

  .tx-next { padding: 32px 20px; grid-template-columns: 1fr; row-gap: 8px; }
  .tx-next p { line-height: 1.7; }
  .tx-learn { padding: 40px 20px 56px; }
  .tx-learn ul { margin-top: 24px; max-width: none; min-width: 0; }
  .tx-market .tx-market-sub { max-width: none; min-width: 0; }
  .tx-learn li { margin-bottom: 22px; line-height: 1.7; padding-left: 24px; }
  .tx-learn li .tx-star { top: 4px; }

  .tx-overview { padding: 44px 20px 52px; display: flex; flex-direction: column; }
  .tx-overview .tx-head { order: 1; }
  .tx-overview .tx-info { order: 2; }
  .tx-overview .tx-role { order: 3; }
  .tx-overview .tx-results { order: 4; }
  .tx-overview .tx-head p { margin-top: 14px; line-height: 1.65; max-width: none; }
  .tx-overview .tx-info { margin-top: 32px; max-width: none; min-width: 0; }
  .tx-overview .tx-info h4 { margin-top: 20px; }
  .tx-overview .tx-role, .tx-overview .tx-results { margin-top: 32px; padding-right: 0; }
  .tx-overview li { padding-left: 24px; }
  .tx-overview li::before { left: 0; }
  .tx-br-d { display: none; }
}