/* Home «چطور کار می‌کند» (3 steps) style presets — registry: inc/how-style.php.
   Loaded on the front page only, and only when the chosen style is not "original" (the original look is main.css).
   Switch: <html data-how="rail|ring|mark|sage|edit">. The markup never changes:
   .how-grid > .how-step > .how-step__num + h3 + p. Numbering is real here (the steps ARE a sequence). */

/* ---------------------------------------------------------------- 1) rail — a dotted rail joins the three steps */
html[data-how="rail"] .how-step { position: relative; background: transparent; border: 0; border-radius: 0; padding: 62px 0 0; gap: 8px; }
html[data-how="rail"] .how-step__num {
  position: absolute; top: 0; inset-inline-start: 0; inline-size: 40px; block-size: 40px;
  background: var(--fill-700, var(--lc-2a4335, #2a4335)); color: var(--lt-ffffff, #fff); font-size: 16px; font-weight: 700;
  box-shadow: 0 0 0 6px var(--surface-alt);
}
html[data-how="rail"] .how-step:not(:last-child)::after {
  content: ""; position: absolute; top: 19px; inset-inline-start: 54px; width: calc(100% + var(--space-lg) - 66px); height: 2px;
  background: repeating-linear-gradient(to left, rgba(77,124,98,.55) 0 8px, transparent 8px 14px);
}
html[data-how="rail"] .how-step h3 { font-size: 20px; font-weight: 700; }
@media (max-width: 860px) {
  html[data-how="rail"] .how-step { padding: 0 0 26px; padding-inline-start: 62px; min-height: 40px; }
  html[data-how="rail"] .how-step:not(:last-child)::after {
    top: 46px; inset-inline-start: 19px; width: 2px; height: calc(100% - 46px + var(--space-lg) - 6px);
    background: repeating-linear-gradient(to bottom, rgba(77,124,98,.55) 0 8px, transparent 8px 14px);
  }
  html[data-how="rail"] .how-step:last-child { padding-bottom: 0; }
}

/* ---------------------------------------------------------------- 2) ring — the number sits in a ring that fills 1/3, 2/3, 3/3 */
html[data-how="ring"] .how-step__num {
  --p: 33; position: relative; isolation: isolate; inline-size: 54px; block-size: 54px;
  background: conic-gradient(var(--fill-500, var(--lc-4d7c62, #4d7c62)) calc(var(--p) * 1%), rgba(77,124,98,.16) 0);
  color: var(--ink); font-size: 19px; font-weight: 700;
}
html[data-how="ring"] .how-step__num::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg); z-index: -1; }
html[data-how="ring"] .how-step:nth-child(2) .how-step__num { --p: 66; }
html[data-how="ring"] .how-step:nth-child(3) .how-step__num { --p: 100; }
html[data-how="ring"] .how-step h3 { font-size: 20px; font-weight: 700; }

/* ---------------------------------------------------------------- 3) mark — a huge soft numeral in the corner + a green top edge */
html[data-how="mark"] .how-step { position: relative; overflow: hidden; box-shadow: inset 0 3px 0 var(--fill-500, var(--lc-4d7c62, #4d7c62)); }
html[data-how="mark"] .how-step__num {
  position: absolute; top: -14px; inset-inline-end: 16px; inline-size: auto; block-size: auto; background: transparent;
  font-family: var(--font-display); font-size: 128px; font-weight: 700; line-height: 1; color: rgba(77,124,98,.13); pointer-events: none;
}
html[data-how="mark"] .how-step h3 { position: relative; margin-top: 30px; font-size: 20px; font-weight: 700; }
html[data-how="mark"] .how-step p { position: relative; }
html[data-theme="dark"][data-how="mark"] .how-step__num { color: rgba(134,195,163,.16); }

/* ---------------------------------------------------------------- 4) sage — soft green cards, solid rounded-square numeral */
html[data-how="sage"] .how-step { background: var(--lc-eef5f0, #eef5f0); border: 0; padding: 28px; }
html[data-how="sage"] .how-step__num {
  inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--fill-700, var(--lc-2a4335, #2a4335)); color: var(--lt-ffffff, #fff);
  font-size: 20px; font-weight: 700; box-shadow: 0 12px 18px -10px rgba(36,74,57,.65);
}
html[data-how="sage"] .how-step h3 { margin-top: 6px; font-size: 20px; font-weight: 700; color: var(--mpt-green-deep, var(--lt-244a39, #244a39)); }
html[data-how="sage"] .how-step p { color: var(--lt-4b5a52, #4b5a52); }
html[data-theme="dark"][data-how="sage"] .how-step { background: rgba(134,195,163,.09); }
html[data-theme="dark"][data-how="sage"] .how-step__num { background: var(--fill-600, var(--lc-3b604c, #3b604c)); }
html[data-theme="dark"][data-how="sage"] .how-step h3 { color: var(--ink); }
html[data-theme="dark"][data-how="sage"] .how-step p { color: var(--muted); }

/* ---------------------------------------------------------------- 5) edit — editorial columns: an ink rule on top, a large light numeral, no boxes */
html[data-how="edit"] .how-step { background: transparent; border: 0; border-radius: 0; border-top: 2px solid var(--ink); padding: 20px 0 6px; gap: 8px; }
html[data-how="edit"] .how-step__num {
  inline-size: auto; block-size: auto; justify-content: flex-start; background: transparent;
  font-family: var(--font-display); font-size: 52px; font-weight: 300; line-height: 1; color: var(--fill-500, var(--lt-4d7c62, #4d7c62));
}
html[data-how="edit"] .how-step h3 { font-size: 22px; font-weight: 700; }
html[data-how="edit"] .how-step p { max-width: 34ch; }
@media (max-width: 860px) {
  html[data-how="edit"] .how-step__num { font-size: 42px; }
  html[data-how="edit"] .how-step { padding-top: 16px; }
  html[data-how="mark"] .how-step__num { font-size: 104px; }
}


/* ############################################################################################################
   ROUND 2 (2026-09-22) — mostly GREY (green was rejected as too heavy: at most one very light green tint) and built
   around ARROWS between the steps. Round 1 above (rail/ring/mark/sage/edit) was rejected; kept for history only.
   RTL flow: step 1 is on the right and the flow runs to the LEFT; on phones it runs DOWN.
   ############################################################################################################ */

/* ---------------------------------------------------------------- 6) chevron: arrow-shaped cards that nest tip-into-notch */
html[data-how="chevron"] .how-grid { gap: 6px; }
html[data-how="chevron"] .how-step {
  border: 0; border-radius: 0; gap: 8px; padding: 34px 50px 34px 56px;
  background: var(--lc-f2f2f3, #f2f2f3);
  clip-path: polygon(30px 0, 100% 0, calc(100% - 30px) 50%, 100% 100%, 30px 100%, 0 50%);
}
html[data-how="chevron"] .how-step:nth-child(2) { background: var(--lc-ebebed, #ebebed); margin-inline-start: -24px; }
html[data-how="chevron"] .how-step:nth-child(3) { background: var(--lc-e3e4e7, #e3e4e7); margin-inline-start: -24px; }
html[data-how="chevron"] .how-step__num { background: var(--lc-ffffff, #fff); color: var(--ink); font-weight: 700; box-shadow: 0 0 0 1px rgba(23,25,28,.08); }
html[data-how="chevron"] .how-step h3 { font-size: 19px; font-weight: 700; }
html[data-how="chevron"] .how-step p { color: var(--lt-5f636c, #5f636c); }
html[data-theme="dark"][data-how="chevron"] .how-step { background: rgba(255,255,255,.05); }
html[data-theme="dark"][data-how="chevron"] .how-step:nth-child(2) { background: rgba(255,255,255,.075); }
html[data-theme="dark"][data-how="chevron"] .how-step:nth-child(3) { background: rgba(255,255,255,.10); }
html[data-theme="dark"][data-how="chevron"] .how-step__num { background: rgba(255,255,255,.12); color: var(--ink); box-shadow: none; }
html[data-theme="dark"][data-how="chevron"] .how-step p { color: var(--muted); }
@media (max-width: 860px) {
  html[data-how="chevron"] .how-grid { gap: 4px; }
  html[data-how="chevron"] .how-step { padding: 42px 26px 46px; clip-path: polygon(0 0, 50% 24px, 100% 0, 100% calc(100% - 24px), 50% 100%, 0 calc(100% - 24px)); }
  html[data-how="chevron"] .how-step:nth-child(2), html[data-how="chevron"] .how-step:nth-child(3) { margin-inline-start: 0; margin-top: -20px; }
  html[data-how="chevron"] .how-step:first-child { padding-top: 26px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 50% 100%, 0 calc(100% - 24px)); }
  html[data-how="chevron"] .how-step:last-child { padding-bottom: 28px; clip-path: polygon(0 0, 50% 24px, 100% 0, 100% 100%, 0 100%); }
}

/* ---------------------------------------------------------------- 7) badge: plain white cards; a round arrow badge sits on the gap between them */
html[data-how="badge"] .how-grid { gap: 46px; }
html[data-how="badge"] .how-step { position: relative; }
html[data-how="badge"] .how-step__num { background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-weight: 700; }
html[data-how="badge"] .how-step h3 { font-size: 19px; font-weight: 700; }
html[data-how="badge"] .how-step:not(:last-child)::after {
  content: "\2190"; position: absolute; top: 50%; inset-inline-end: -42px; inline-size: 38px; block-size: 38px; margin-top: -19px;
  display: grid; place-items: center; border-radius: 50%; z-index: 2;
  background: var(--card); border: 1px solid var(--border); color: var(--muted); font-size: 18px; line-height: 1;
  box-shadow: 0 6px 14px -8px rgba(23,25,28,.35);
}
@media (max-width: 860px) {
  html[data-how="badge"] .how-grid { gap: 48px; }
  html[data-how="badge"] .how-step:not(:last-child)::after { content: "\2193"; top: auto; bottom: -43px; inset-inline-end: auto; left: 50%; margin: 0 0 0 -19px; }
}

/* ---------------------------------------------------------------- 8) track: one thin grey line with an arrowhead, three nodes on it */
html[data-how="track"] .how-grid { position: relative; }
html[data-how="track"] .how-grid::before { content: ""; position: absolute; top: 19px; inset-inline: 0; height: 2px; background: var(--lc-d6d8dc, #d6d8dc); }
html[data-how="track"] .how-grid::after { content: ""; position: absolute; top: 13px; left: 0; inline-size: 12px; block-size: 12px; border-left: 2px solid var(--lc-c2c5cb, #c2c5cb); border-bottom: 2px solid var(--lc-c2c5cb, #c2c5cb); transform: rotate(45deg); }
html[data-how="track"] .how-step { position: relative; background: transparent; border: 0; border-radius: 0; padding: 56px 0 0; padding-inline-end: 22px; gap: 8px; }
html[data-how="track"] .how-step__num {
  position: absolute; top: 0; inset-inline-start: 0; inline-size: 40px; block-size: 40px; z-index: 1;
  background: var(--card); border: 2px solid var(--lc-c2c5cb, #c2c5cb); color: var(--ink); font-weight: 700; font-size: 16px; box-shadow: 0 0 0 8px var(--surface-alt);
}
html[data-how="track"] .how-step:last-child .how-step__num { background: var(--lc-e9f2ec, #e9f2ec); border-color: var(--lc-9fbfae, #9fbfae); }
html[data-how="track"] .how-step h3 { font-size: 19px; font-weight: 700; }
html[data-theme="dark"][data-how="track"] .how-grid::before { background: rgba(255,255,255,.16); }
html[data-theme="dark"][data-how="track"] .how-grid::after { border-color: rgba(255,255,255,.28); }
html[data-theme="dark"][data-how="track"] .how-step__num { border-color: rgba(255,255,255,.28); }
html[data-theme="dark"][data-how="track"] .how-step:last-child .how-step__num { background: rgba(134,195,163,.16); border-color: rgba(134,195,163,.5); }
@media (max-width: 860px) {
  html[data-how="track"] .how-grid::before { top: 20px; bottom: 6px; inset-inline: auto; inset-inline-start: 19px; inline-size: 2px; block-size: auto; }
  html[data-how="track"] .how-grid::after { top: auto; bottom: 2px; left: auto; inset-inline-start: 13px; transform: rotate(-45deg); }
  html[data-how="track"] .how-step { padding: 0 0 30px; padding-inline-start: 62px; min-height: 40px; }
  html[data-how="track"] .how-step:last-child { padding-bottom: 22px; }
}

/* ---------------------------------------------------------------- 9) pill: number + title in a grey pill, a long thin arrow to the next step */
html[data-how="pill"] .how-grid { gap: 52px; }
html[data-how="pill"] .how-step { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0; row-gap: 16px; background: transparent; border: 0; border-radius: 0; padding: 0; }
html[data-how="pill"] .how-step__num { grid-column: 1; grid-row: 1; z-index: 1; inline-size: 40px; block-size: 40px; background: var(--ink); color: var(--on-ink); font-weight: 700; }
html[data-how="pill"] .how-step h3 { grid-column: 2; grid-row: 1; margin: 0; margin-inline-start: -20px; padding: 10px 20px; padding-inline-start: 30px; font-size: 17px; font-weight: 700; background: var(--surface); border-radius: 999px; }
html[data-how="pill"] .how-step p { grid-column: 1 / -1; grid-row: 2; padding-inline: 4px; }
html[data-how="pill"] .how-step:not(:last-child)::before { content: ""; position: absolute; top: 19px; inset-inline-end: -40px; inline-size: 30px; block-size: 2px; background: var(--lc-b5b8be, #b5b8be); }
html[data-how="pill"] .how-step:not(:last-child)::after { content: ""; position: absolute; top: 14px; inset-inline-end: -40px; inline-size: 10px; block-size: 10px; border-left: 2px solid var(--lc-b5b8be, #b5b8be); border-bottom: 2px solid var(--lc-b5b8be, #b5b8be); transform: rotate(45deg); }
html[data-theme="dark"][data-how="pill"] .how-step:not(:last-child)::before { background: rgba(255,255,255,.28); }
html[data-theme="dark"][data-how="pill"] .how-step:not(:last-child)::after { border-color: rgba(255,255,255,.28); }
@media (max-width: 860px) {
  html[data-how="pill"] .how-grid { gap: 54px; }
  html[data-how="pill"] .how-step:not(:last-child)::before { top: auto; bottom: -44px; inset-inline-end: auto; inset-inline-start: 19px; inline-size: 2px; block-size: 30px; }
  html[data-how="pill"] .how-step:not(:last-child)::after { top: auto; bottom: -46px; inset-inline-end: auto; inset-inline-start: 15px; transform: rotate(-45deg); }
}

/* ---------------------------------------------------------------- 10) stairs: each step sits one stair higher; a diagonal arrow between; only the last card has a hint of green */
html[data-how="stairs"] .how-grid { gap: 46px; align-items: start; }
html[data-how="stairs"] .how-step { position: relative; box-shadow: 0 14px 26px -22px rgba(23,25,28,.5); }
html[data-how="stairs"] .how-step:nth-child(1) { margin-top: 64px; }
html[data-how="stairs"] .how-step:nth-child(2) { margin-top: 32px; }
html[data-how="stairs"] .how-step:nth-child(3) { background: var(--lc-f1f7f3, #f1f7f3); border-color: var(--lc-dcebe2, #dcebe2); }
html[data-how="stairs"] .how-step__num { background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-weight: 700; }
html[data-how="stairs"] .how-step:nth-child(3) .how-step__num { background: var(--lc-ffffff, #fff); border-color: var(--lc-cfe3d7, #cfe3d7); }
html[data-how="stairs"] .how-step h3 { font-size: 19px; font-weight: 700; }
html[data-how="stairs"] .how-step:not(:last-child)::after {
  content: "\2196"; position: absolute; top: 26px; inset-inline-end: -40px; inline-size: 34px; block-size: 34px;
  display: grid; place-items: center; border-radius: 50%; background: var(--card); border: 1px solid var(--border); color: var(--muted); font-size: 16px; line-height: 1;
}
html[data-theme="dark"][data-how="stairs"] .how-step:nth-child(3) { background: rgba(134,195,163,.08); border-color: rgba(134,195,163,.22); }
html[data-theme="dark"][data-how="stairs"] .how-step:nth-child(3) .how-step__num { background: rgba(255,255,255,.08); border-color: rgba(134,195,163,.3); }
@media (max-width: 860px) {
  html[data-how="stairs"] .how-grid { gap: 46px; }
  html[data-how="stairs"] .how-step:nth-child(1), html[data-how="stairs"] .how-step:nth-child(2) { margin-top: 0; }
  html[data-how="stairs"] .how-step:not(:last-child)::after { content: "\2193"; top: auto; bottom: -40px; inset-inline-end: auto; left: 50%; margin-left: -17px; }
}


/* ############################################################################################################
   ROUND 3 (2026-09-22) — the number + its circle sit centred ON the top edge of each card, and a pale-green outlined
   double-chevron ("forward") sits between the cards. Rounds 1-2 above were rejected; kept for history only.
   The chevron is assets/how-forward.svg used as a mask. It is drawn pointing right; here it is flipped to point LEFT
   (the reading direction in RTL). To get the right-pointing version instead, delete the scaleX(-1) in --how-flip.
   On phones the flow runs down, so the chevron is rotated to point down.
   ############################################################################################################ */

html[data-how="halo"], html[data-how="tint"], html[data-how="line"], html[data-how="float"], html[data-how="notch"] { --how-flip: scaleX(-1); }

/* shared: the number circle on the top edge, the chevron between cards */
html[data-how="halo"] .how-grid, html[data-how="tint"] .how-grid, html[data-how="line"] .how-grid,
html[data-how="float"] .how-grid, html[data-how="notch"] .how-grid { margin-top: 30px; }
html[data-how="halo"] .how-step, html[data-how="tint"] .how-step, html[data-how="line"] .how-step,
html[data-how="float"] .how-step, html[data-how="notch"] .how-step { position: relative; padding: 48px 30px 34px; }
html[data-how="halo"] .how-step__num, html[data-how="tint"] .how-step__num, html[data-how="line"] .how-step__num,
html[data-how="float"] .how-step__num, html[data-how="notch"] .how-step__num {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  inline-size: 48px; block-size: 48px; font-size: 19px; font-weight: 700; color: var(--ink); z-index: 2;
}
html[data-how="halo"] .how-step h3, html[data-how="tint"] .how-step h3, html[data-how="line"] .how-step h3,
html[data-how="float"] .how-step h3, html[data-how="notch"] .how-step h3 { font-size: 19px; font-weight: 700; }
html[data-how="halo"] .how-step:not(:last-child)::after, html[data-how="tint"] .how-step:not(:last-child)::after,
html[data-how="line"] .how-step:not(:last-child)::after, html[data-how="float"] .how-step:not(:last-child)::after,
html[data-how="notch"] .how-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; inset-inline-end: -47px; inline-size: 36px; block-size: 26px; margin-top: -13px;
  background: var(--lc-a9d0b9, #a9d0b9); transform: var(--how-flip);
  -webkit-mask: url("how-forward.svg") center / contain no-repeat; mask: url("how-forward.svg") center / contain no-repeat;
}
@media (max-width: 860px) {
  html[data-how="halo"] .how-grid, html[data-how="tint"] .how-grid, html[data-how="line"] .how-grid,
  html[data-how="float"] .how-grid, html[data-how="notch"] .how-grid { gap: 66px; }
  html[data-how="halo"] .how-step:not(:last-child)::after, html[data-how="tint"] .how-step:not(:last-child)::after,
  html[data-how="line"] .how-step:not(:last-child)::after, html[data-how="float"] .how-step:not(:last-child)::after,
  html[data-how="notch"] .how-step:not(:last-child)::after {
    top: auto; bottom: -50px; inset-inline-end: auto; left: 50%; margin: 0 0 0 -18px; transform: rotate(90deg);
  }
}

/* ---------------------------------------------------------------- 11) halo: white card, hairline border, white circle with a pale-green rim and a white halo; text centred */
html[data-how="halo"] .how-grid { gap: 58px; }
html[data-how="halo"] .how-step { align-items: center; text-align: center; background: var(--card); border: 1px solid var(--border); }
html[data-how="halo"] .how-step__num { background: var(--card); border: 2px solid var(--lc-cfe3d7, #cfe3d7); box-shadow: 0 0 0 6px var(--card); }

/* ---------------------------------------------------------------- 12) tint: soft grey card without border, circle filled with very light green; text centred */
html[data-how="tint"] .how-grid { gap: 58px; }
html[data-how="tint"] .how-step { align-items: center; text-align: center; background: var(--lc-f4f4f5, #f4f4f5); border: 0; }
html[data-how="tint"] .how-step__num { background: var(--lc-dcebe2, #dcebe2); box-shadow: 0 0 0 7px var(--surface-alt); }
html[data-how="tint"] .how-step:not(:last-child)::after { background: var(--lc-b6d8c4, #b6d8c4); }
html[data-how="tint"] .how-step p { color: var(--lt-5f636c, #5f636c); }
html[data-theme="dark"][data-how="tint"] .how-step { background: rgba(255,255,255,.05); }
html[data-theme="dark"][data-how="tint"] .how-step__num { background: rgba(134,195,163,.22); }
html[data-theme="dark"][data-how="tint"] .how-step p { color: var(--muted); }

/* ---------------------------------------------------------------- 13) line: hairline card with a pale-green top accent; white circle with a 2px pale-green ring; text stays right-aligned; bigger chevron */
html[data-how="line"] .how-grid { gap: 64px; }
html[data-how="line"] .how-step { background: var(--card); border: 1px solid var(--border); box-shadow: inset 0 3px 0 var(--lc-cfe3d7, #cfe3d7); padding-top: 52px; }
html[data-how="line"] .how-step__num { background: var(--card); border: 2px solid var(--lc-b6d8c4, #b6d8c4); box-shadow: 0 0 0 6px var(--surface-alt); }
html[data-how="line"] .how-step:not(:last-child)::after { inline-size: 44px; block-size: 32px; margin-top: -16px; inset-inline-end: -54px; background: var(--lc-9fcbb2, #9fcbb2); }
html[data-theme="dark"][data-how="line"] .how-step { box-shadow: inset 0 3px 0 rgba(134,195,163,.35); }

/* ---------------------------------------------------------------- 14) float: floating shadow cards, the circle floats too; text centred; small pale chevron */
html[data-how="float"] .how-grid { gap: 56px; }
html[data-how="float"] .how-step { align-items: center; text-align: center; background: var(--card); border: 0; border-radius: 28px; box-shadow: 0 24px 40px -26px rgba(23,25,28,.42), 0 1px 0 rgba(23,25,28,.04); }
html[data-how="float"] .how-step__num { background: var(--card); box-shadow: 0 12px 20px -10px rgba(23,25,28,.4); font-size: 20px; }
html[data-how="float"] .how-step:not(:last-child)::after { inline-size: 30px; block-size: 22px; margin-top: -11px; inset-inline-end: -43px; background: var(--lc-c3ddd0, #c3ddd0); }

/* ---------------------------------------------------------------- 15) notch: the circle bites a notch out of the card's top border; very light green fill; text centred */
html[data-how="notch"] .how-grid { gap: 60px; }
html[data-how="notch"] .how-step { align-items: center; text-align: center; background: var(--card); border: 1px solid var(--border); padding-top: 54px; }
html[data-how="notch"] .how-step__num { background: var(--lc-e6f2ea, #e6f2ea); box-shadow: 0 0 0 10px var(--surface-alt); }
html[data-theme="dark"][data-how="notch"] .how-step__num { background: rgba(134,195,163,.22); }


/* ---------------------------------------------------------------- round 3: the text inside the cards
   Title: bold, balanced wrapping, reserves two lines on desktop so all three descriptions start on the same line
   (a one-line title is centred in that space). A short pale-green rule separates title and description.
   Description: calm grey, generous line height, capped line length so it never runs edge to edge. */
html[data-how="halo"] .how-step, html[data-how="tint"] .how-step, html[data-how="line"] .how-step,
html[data-how="float"] .how-step, html[data-how="notch"] .how-step { gap: 12px; }

html[data-how="halo"] .how-step h3, html[data-how="tint"] .how-step h3, html[data-how="line"] .how-step h3,
html[data-how="float"] .how-step h3, html[data-how="notch"] .how-step h3 {
  display: flex; align-items: center; justify-content: center; margin: 0; font-size: 20px; line-height: 1.5;
  color: var(--ink); text-wrap: balance;
}
html[data-how="line"] .how-step h3 { justify-content: flex-start; }
@media (min-width: 861px) {
  html[data-how="halo"] .how-step h3, html[data-how="tint"] .how-step h3, html[data-how="line"] .how-step h3,
  html[data-how="float"] .how-step h3, html[data-how="notch"] .how-step h3 { min-block-size: 3em; }
}

html[data-how="halo"] .how-step p, html[data-how="tint"] .how-step p, html[data-how="line"] .how-step p,
html[data-how="float"] .how-step p, html[data-how="notch"] .how-step p {
  margin: 0; max-inline-size: 31ch; margin-inline: auto; font-size: 14.5px; line-height: 2.05; color: var(--lt-5f636c, #5f636c); text-wrap: pretty;
}
html[data-how="line"] .how-step p { margin-inline: 0; }

html[data-how="halo"] .how-step p::before, html[data-how="tint"] .how-step p::before, html[data-how="line"] .how-step p::before,
html[data-how="float"] .how-step p::before, html[data-how="notch"] .how-step p::before {
  content: ""; display: block; inline-size: 30px; block-size: 2px; border-radius: 2px; margin: 0 auto 14px; background: var(--lc-cfe3d7, #cfe3d7);
}
html[data-how="line"] .how-step p::before { margin-inline: 0; }
html[data-how="float"] .how-step p::before { inline-size: 6px; block-size: 6px; border-radius: 50%; box-shadow: -12px 0 0 var(--lc-cfe3d7, #cfe3d7), 12px 0 0 var(--lc-cfe3d7, #cfe3d7); background: var(--lc-b6d8c4, #b6d8c4); margin-bottom: 16px; }
html[data-how="notch"] .how-step p::before { inline-size: 44px; background: linear-gradient(90deg, transparent, var(--lc-b6d8c4, #b6d8c4), transparent); }

html[data-theme="dark"][data-how="halo"] .how-step p, html[data-theme="dark"][data-how="tint"] .how-step p, html[data-theme="dark"][data-how="line"] .how-step p,
html[data-theme="dark"][data-how="float"] .how-step p, html[data-theme="dark"][data-how="notch"] .how-step p { color: var(--muted); }
html[data-theme="dark"][data-how="halo"] .how-step p::before, html[data-theme="dark"][data-how="tint"] .how-step p::before,
html[data-theme="dark"][data-how="line"] .how-step p::before, html[data-theme="dark"][data-how="notch"] .how-step p::before { background-color: rgba(134,195,163,.4); }
html[data-theme="dark"][data-how="notch"] .how-step p::before { background: linear-gradient(90deg, transparent, rgba(134,195,163,.5), transparent); }

@media (max-width: 860px) {
  html[data-how="halo"] .how-step:not(:last-child)::after, html[data-how="tint"] .how-step:not(:last-child)::after,
  html[data-how="line"] .how-step:not(:last-child)::after, html[data-how="float"] .how-step:not(:last-child)::after,
  html[data-how="notch"] .how-step:not(:last-child)::after { inline-size: 42px; block-size: 30px; margin-left: -21px; }
}


/* phones: the chevron always sits centred BELOW the card and points down. Placed last so it also beats the per-style
   desktop tweaks of `line` and `float` (same specificity, later wins). */
@media (max-width: 860px) {
  html[data-how="halo"] .how-step:not(:last-child)::after, html[data-how="tint"] .how-step:not(:last-child)::after,
  html[data-how="line"] .how-step:not(:last-child)::after, html[data-how="float"] .how-step:not(:last-child)::after,
  html[data-how="notch"] .how-step:not(:last-child)::after {
    /* standard spacing: the chevron is centred in the free space between this card's bottom edge and the top of the next
       card's number circle (gap minus the circle's upper half, 24px), so the space above and below it is always equal.
       36x26 box rotated 90deg = 26 wide x 36 tall visually, centred on left:50% / top:(gap-24)/2 below the card. */
    top: calc(100% + (var(--how-gap, 92px) - 24px) / 2); bottom: auto; inset-inline-end: auto; left: 50%;
    inline-size: 36px; block-size: 26px; margin: -13px 0 0 -18px; transform: rotate(90deg);
  }
  html[data-how="halo"] .how-grid, html[data-how="tint"] .how-grid, html[data-how="line"] .how-grid,
  html[data-how="float"] .how-grid, html[data-how="notch"] .how-grid { --how-gap: 92px; gap: var(--how-gap); }
}