/* How billing works, from the phase 2 pricing concept (pr-steps): three step cards (the how-it-works step cards),
   each 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. */
.pr-steps-head { display: grid; gap: 18px; max-width: 860px; }
.pr-steps-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 stretch to one height */
.pr-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);
  corner-shape: var(--sq-shape, round);
}
@supports not (grid-template-rows: subgrid) {
  .pr-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) */
.pr-step-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);
}
.pr-step:nth-child(2) .pr-step-num { rotate: 5deg; }
[dir="rtl"] .pr-step-num { rotate: 6deg; }
[dir="rtl"] .pr-step:nth-child(2) .pr-step-num { rotate: -5deg; }
.pr-step .h3 { font-size: 1.4rem; }
.pr-step-text { font-size: 17px; color: var(--ink-soft); text-wrap: pretty; }
.pr-step-mock {
  display: flex; flex-direction: column; gap: 4px; margin-top: 4px;
  padding: 12px 14px 14px; border-radius: calc(22px * var(--sq-scale, 1));
  background: var(--sheet-bg); box-shadow: var(--shadow-sm);
  font-size: 14px; line-height: 1.35;
  corner-shape: var(--sq-shape, round);
}
/* Every panel opens with the same header row (as tall as a tag) and ends with its status tag at the foot */
.pr-step-mock-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; min-height: 30px; padding-bottom: 4px; }
.pr-step-mock-top img { width: 16px; height: 16px; }
.pr-step-mock-top > b:has(img) { display: inline-flex; align-items: center; gap: 6px; }
.pr-step-mock dl { flex: 1 0 auto; }
.pr-step-mock-top b { font-weight: 800; }
.pr-step-mock dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.pr-step-mock dt { min-width: 0; color: var(--ink-soft); }
.pr-step-mock dd { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pr-step-mock dd img { width: 16px; height: 16px; }
.pr-step-mock dd .i { width: 16px; height: 16px; color: var(--green); }
.pr-step-mock > .tag { align-self: flex-start; margin-top: 8px; }
.pr-step .link { margin-top: -2px; }
/* Verdict chips, as the billable message explainer: coral adds to the bill, mist is never counted, green is
   free in an ad's window */
.pr-chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 24px; padding: 2px 10px; border-radius: 999px;
  font: 800 12px/1.3 var(--text); white-space: nowrap;
}
.pr-chip--counted { background: var(--coral); color: var(--on-bright); }
.pr-chip--not { background: var(--surface-2); color: var(--ink-soft); }
.pr-chip--free { background: var(--field-green); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--green); }

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