/* Three steps, ported from the phase 2 /hubspot concept (hs-how), which copies the pricing step cards: each card on its
   own colour field with a numbered badge on its top edge and a white panel. Logical properties throughout, so Arabic
   (dir="rtl") mirrors; the badges' tilts mirror with it. */
.hs-how-head { display: grid; gap: 18px; max-width: 860px; }
.hs-how-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(48px, 5vw, 72px); padding-top: 34px; }
/* Each card spans four rows of the list grid (title, text, panel, link), so the white panels start level across the
   three cards whatever the length of the text above them, and share one height */
.hs-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) {
  .hs-how-step { display: flex; flex-direction: column; gap: 12px; }
}
/* Centred on the card's top edge (physical left plus a translate centres it in both directions) */
.hs-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);
}
.hs-how-step:nth-child(2) .hs-how-num { rotate: 5deg; }
[dir="rtl"] .hs-how-num { rotate: 6deg; }
[dir="rtl"] .hs-how-step:nth-child(2) .hs-how-num { rotate: -5deg; }
.hs-how-step .h3 { font-size: 1.4rem; }
.hs-how-text { font-size: 17px; color: var(--ink-soft); text-wrap: pretty; }
.hs-how-text a { color: var(--accent-ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.hs-how-mock {
  display: flex; flex-direction: column; gap: 4px; margin-top: 4px;
  padding: 12px 14px 14px; border-radius: 22px;
  background: var(--sheet-bg); box-shadow: var(--shadow-sm);
  font-size: 14px; line-height: 1.35;
}
/* Every panel opens with the same header row (as tall as a tag) and ends with its status tag at the foot */
.hs-how-mock-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; min-height: 30px; padding-bottom: 4px; }
.hs-how-mock-top b { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.hs-how-mock-top img { width: 16px; height: 16px; }
.hs-how-mock dl { flex: 1 0 auto; }
/* A row keeps its label and value on one line while the label's longest word still fits beside the value; the label
   wraps there as before. When it would not (a phone, the wider Arabic face, a long German compound), the value moves
   under the label, pinned to the end, instead of the label spilling out of its box; a value that is still too long
   wraps too. Rows that already fitted lay out exactly as before. */
.hs-how-mock dl > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.hs-how-mock dt { flex: 1 1 0%; color: var(--ink-soft); overflow-wrap: break-word; }
.hs-how-mock dd { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-align: end; overflow-wrap: anywhere; }
.hs-how-mock dd .i { flex: none; width: 16px; height: 16px; color: var(--green); }
/* A value takes its direction from its own words, so a number such as +44 7700 900860 or a code such as 482 913
   keeps its order on right-to-left pages */
.hs-how-v { unicode-bidi: plaintext; }
.hs-how-mock > .tag { align-self: flex-start; margin-top: 8px; }
.hs-how-step .link { margin-top: -2px; }

/* Responsive */
@media (max-width: 1023px) {
  .hs-how-list { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 640px; }
  .hs-how-step { display: flex; flex-direction: column; gap: 12px; }
}