/* ═══════════════════════════════════════════════════════════════════════════
   julienlescure.io — Offer 3 body, Option B ("Deploy your Product agentic
   workforce"). ADDITIONS ONLY. Load after styles.css + additions.css +
   offers.css. Every selector is new and prefixed .o3-*.

   Palette: --purple #401f4c, --turquoise #2dffd9, white (+ purple at low
   alpha for the light purple ground). No other colours, no gradients.
   Type: Urbanist 500 / 700 / 800, inherited from styles.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Shared atoms ─────────────────────────────────────────────────────── */
.o3-tiret { width: 40px; height: 7px; background: var(--turquoise); flex: none; }
.o3-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
}
.o3-eyebrow--turq { color: var(--turquoise); }

/* Mode glyphs — the shape carries the meaning, colour only reinforces it.
   Bar = async workflow · diamond = human gate · ring = synced collaboration. */
.o3-glyph { flex: none; }
.o3-glyph--async { width: 15px; height: 4px; background: var(--purple); margin-top: 7px; }
.o3-glyph--gates { width: 10px; height: 10px; background: var(--purple); transform: rotate(45deg); margin: 4px 0 0 1px; }
.o3-glyph--synced { width: 11px; height: 11px; border: 2.5px solid var(--purple); border-radius: 999px; margin-top: 4px; }

/* ── 2 · Overview card (dark purple, holds the six step cards) ───────────── */
.o3-overview {
  background: var(--purple);
  color: var(--white);
  border-radius: 22px;
  padding: 48px 44px 52px;
}
.o3-overview__title {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}
.o3-overview__lead {
  margin: 0 0 30px;
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  max-width: 84%;
  text-wrap: pretty;
}

/* Six step cards, 3-up / 2-up / 1-up.
   `subgrid` is what keeps the header and the three mode boxes of every card in
   a row on the same baselines and at the same height. Column gap only: the
   vertical gap comes from the card's own margin-bottom so the card's internal
   rows stay flush (the header must bleed to the card edges). */
.o3-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  gap: 0 20px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: stretch;
}
.o3-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  min-width: 0;
  margin-bottom: 20px;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(20, 8, 26, 0.26);
}
@supports not (grid-template-rows: subgrid) {
  /* Fallback: cards keep their own intrinsic heights, zones no longer align. */
  .o3-grid { grid-template-rows: none; }
  .o3-card { grid-row: auto; display: flex; flex-direction: column; }
  .o3-zone--synced { margin-top: auto; }
}

/* Card header — the step marker, full card width, turquoise ground */
.o3-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: var(--turquoise);
  color: var(--purple);
}
.o3-marker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--purple);
}
.o3-marker__num {
  display: grid;
  place-content: center;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  background: var(--purple);
  color: var(--white);
  font-style: normal;
  font-size: 13px;
  flex: none;
}

/* The three modes inside a card: no boxes, separated by a thin light purple
   rule (async > gates, gates > synced). Glyphs carry the mode. */
.o3-zone {
  min-width: 0;
  box-sizing: border-box;
  margin: 0 14px;
  padding: 13px 0;
  background: var(--white);
}
.o3-zone--gates,
.o3-zone--synced { border-top: 1px solid rgba(64, 31, 76, 0.18); }
.o3-zone--synced { padding-bottom: 15px; }
.o3-zone__label {
  margin: 0 0 9px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(64, 31, 76, 0.72);
}
.o3-zone--gates .o3-zone__label,
.o3-zone--synced .o3-zone__label { color: var(--purple); }

.o3-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.o3-item {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  text-decoration: none;
  color: var(--purple);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}
.o3-item--gates { font-weight: 800; }
.o3-item:hover { color: rgba(64, 31, 76, 0.62); }
.o3-item:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; }

/* ── 3 · Legend, folded into the overview footer ─────────────────────────── */
.o3-legend {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  flex-wrap: wrap;
  gap: 26px 44px;
}
.o3-legend__col { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.o3-legend__markers { display: flex; flex-wrap: wrap; gap: 8px; }
.o3-legend__markers .o3-marker {
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  background: var(--turquoise);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.o3-legend__markers .o3-marker__num { width: 24px; height: 24px; }
.o3-legend__note,
.o3-legend__label { margin: 0; text-wrap: pretty; }
.o3-legend__note { font-weight: 500; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.o3-legend__label {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.o3-key {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}
/* Swatches show each mode's real ground. The white base matters: the light
   purple and turquoise grounds are alpha values meant to sit on white. */
.o3-swatch {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  box-sizing: border-box;
  background: var(--white);
  flex: none;
}
.o3-swatch--gates { border: 0; }
.o3-swatch--synced { border: 0; }
.o3-swatch .o3-glyph { margin: 0; }

/* ── 4 · The three detail sections ───────────────────────────────────────── */
.o3-sec { border-radius: 22px; padding: 48px 44px 52px; }
.o3-sec--async { background: var(--white); color: var(--purple); border: 1.5px solid rgba(64, 31, 76, 0.16); }
.o3-sec--gates { background: var(--purple); color: var(--white); }
.o3-sec--synced { background: var(--turquoise); color: var(--purple); }
.o3-sec--gates .o3-eyebrow { color: var(--turquoise); }
.o3-sec--synced .o3-tiret { background: var(--purple); }

.o3-sec__title {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.o3-sec__lead {
  margin: 0 0 26px;
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
  max-width: 84%;
  text-wrap: pretty;
}
.o3-sec--async .o3-sec__lead { color: rgba(64, 31, 76, 0.74); }
.o3-sec--gates .o3-sec__lead { color: rgba(255, 255, 255, 0.86); }
.o3-sec--synced .o3-sec__lead { color: rgba(64, 31, 76, 0.86); }

/* One row per lifecycle step: marker column + that step's activities.
   flex-basis (not a media query) is what stacks the marker above the list
   on narrow cards, so the row survives +25% translated copy. */
.o3-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 26px 0;
  border-top: 1px solid rgba(64, 31, 76, 0.14);
}
.o3-sec--gates .o3-row { border-top-color: rgba(255, 255, 255, 0.16); }
.o3-sec--synced .o3-row { border-top-color: rgba(64, 31, 76, 0.3); }
.o3-row:last-child { padding-bottom: 0; }
.o3-row__marker { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.o3-row__items { flex: 3 1 340px; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }

.o3-step { display: flex; align-items: center; gap: 10px; }
.o3-step__num {
  display: grid;
  place-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--turquoise);
  color: var(--purple);
  font-style: normal;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  flex: none;
}
.o3-sec--synced .o3-step__num { background: var(--purple); color: var(--white); }
.o3-step__name { font-weight: 800; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; }
.o3-step__meta {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(64, 31, 76, 0.74);
}
.o3-sec--gates .o3-step__meta { color: rgba(255, 255, 255, 0.8); }
.o3-sec--synced .o3-step__meta { color: rgba(64, 31, 76, 0.8); }

.o3-detail {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  scroll-margin-top: 96px; /* clears the sticky .offer-nav on anchor jumps */
}
.o3-detail__text {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(64, 31, 76, 0.85);
  text-wrap: pretty;
}
.o3-detail__text b { font-weight: 800; color: var(--purple); }
.o3-sec--gates .o3-detail__text { color: rgba(255, 255, 255, 0.86); }
.o3-sec--gates .o3-detail__text b { color: var(--white); }
.o3-sec--gates .o3-glyph--gates { background: var(--turquoise); }
.o3-sec--synced .o3-detail__text { color: rgba(64, 31, 76, 0.9); }

/* Detail glyphs sit on a wider gutter than the compact card lists */
.o3-detail .o3-glyph--async { width: 18px; height: 4px; margin-top: 9px; }
.o3-detail .o3-glyph--gates { width: 11px; height: 11px; margin: 6px 0 0 3px; }
.o3-detail .o3-glyph--synced { width: 12px; height: 12px; margin: 6px 0 0 3px; }

/* ── 5 · Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .o3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .o3-overview,
  .o3-sec { padding: 38px 28px 42px; border-radius: 18px; }
  .o3-overview__lead,
  .o3-sec__lead { max-width: 100%; }
}
@media (max-width: 620px) {
  .o3-grid { grid-template-columns: minmax(0, 1fr); }
  .o3-row { gap: 14px; padding: 22px 0; }
  .o3-row__marker,
  .o3-row__items { flex: 1 1 100%; }
  .o3-legend { gap: 22px; }
}