/* Set it up in three steps (igd-how), ported from the phase 2 Customer.io and n8n concepts: each card spans four rows of
   the list grid (title, text, panel, link), so the white panels start level across the cards whatever the length of
   the text above them, and share one height. A panel value that is code reads left to right in every language; a
   value in words follows the page. Logical properties, so Arabic mirrors. */
.igd-how .igd-head { display: grid; gap: 18px; max-width: 900px; }
.igd-how .igd-head .lede { max-width: 64ch; }
.igd-how-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(48px, 5vw, 72px); padding-top: 34px; }
.igd-how-step {
  position: relative; min-width: 0;
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px;
  padding: 50px clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-xl);
  background: var(--s);
}
@supports not (grid-template-rows: subgrid) {
  .igd-how-step { display: flex; flex-direction: column; gap: 12px; }
}
.igd-how-num {
  position: absolute; top: -34px; left: 50%; translate: -50% 0;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sc); color: var(--on-bright);
  border: 4px solid var(--ground);
  font: 800 27px/1 var(--display);
  rotate: -6deg;
  box-shadow: var(--shadow-sm);
}
.igd-how-step:nth-child(2) .igd-how-num { rotate: 5deg; }
[dir="rtl"] .igd-how-num { rotate: 6deg; }
[dir="rtl"] .igd-how-step:nth-child(2) .igd-how-num { rotate: -5deg; }
.igd-how-step .h3 { font-size: 1.4rem; }
.igd-how-text { font-size: 17px; color: var(--ink-soft); text-wrap: pretty; }
.igd-how-text code { padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--sheet-bg) 70%, transparent); color: var(--ink); font: 600 0.82em/1.4 var(--mono); direction: ltr; unicode-bidi: isolate; }
/* Every panel opens with the same header row and ends with its status tag at the foot */
.igd-how-mock {
  display: flex; flex-direction: column; gap: 8px; margin-top: 4px; min-width: 0;
  padding: 12px 14px 14px; border-radius: 22px;
  background: var(--sheet-bg); box-shadow: var(--shadow-sm);
  font-size: 14px; line-height: 1.35;
}
.igd-how-mock-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; min-height: 30px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.igd-how-mock-top b { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.igd-how-mock-top img, .igd-how-mock-top .i { width: 16px; height: 16px; }
.igd-how-mock dl { flex: 1 0 auto; display: grid; gap: 0; margin: 0; }
.igd-how-mock dl > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 4px 12px; padding-block: 7px; border-bottom: 1px solid var(--line); }
.igd-how-mock dl > div:last-child { border-bottom: 0; }
.igd-how-mock dt { color: var(--ink-soft); }
.igd-how-mock dd { min-width: 0; margin: 0; font: 700 13.5px/1.45 var(--text); overflow-wrap: break-word; }
/* Inline, so the row's label lines up with the value's first line, as in the concept */
.igd-how-mock dd .is-code { font: 600 12.5px/1.45 var(--mono); direction: ltr; unicode-bidi: isolate; }
.igd-how-mock > .tag { align-self: flex-start; margin-top: auto; }
.igd-how-step .link { margin-top: -2px; }
@media (max-width: 1023px) {
  .igd-how-list { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 640px; }
  .igd-how-step { display: flex; flex-direction: column; gap: 12px; }
}