/* Help centre: visual blocks built from HTML + inline SVG icons, so they follow text direction (RTL) automatically */
.help-search{display:flex;flex-direction:column;gap:8px;max-inline-size:560px}
.help-search label{font:700 .875rem/1 var(--font-body);color:var(--text-strong)}
.help-search input{inline-size:100%;min-block-size:3rem;padding:.7rem 1rem;border-radius:14px;border:1.5px solid rgba(255,255,255,.28);background:var(--night-800);color:var(--text-strong);font:inherit}
.help-search input:focus-visible{border-color:var(--cyan-300)}
.help-empty{color:var(--text-muted)}
.cards.help a.card{gap:10px}
.cards.help .ic,.flow .ic,.vs .ic{inline-size:48px;block-size:48px;border-radius:14px;background:var(--esim-tint);border:1px solid var(--esim-line);display:grid;place-items:center;color:var(--esim);flex:none}
.cards.help .ic svg,.flow .ic svg,.vs .ic svg{inline-size:26px;block-size:26px}
.cards.help a.card[hidden]{display:none}

/* numbered journey / checklist flow */
.flow{list-style:none;margin:0;padding:0;counter-reset:f;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.flow li{counter-increment:f;position:relative;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--border-subtle)}
.flow li::after{content:counter(f);position:absolute;inset-block-start:14px;inset-inline-end:16px;font:800 .8125rem/1 var(--font-display);color:var(--text-muted)}
.flow h3{font-size:1.0625rem;font-weight:700}
.flow p{font-size:.9375rem;color:var(--text-body)}
.flow.stack{grid-template-columns:1fr;max-inline-size:760px}
.flow.stack li{flex-direction:row;align-items:flex-start}
.flow.stack li>div{display:flex;flex-direction:column;gap:6px}
.flow li.alt-end{border-color:var(--esim-line);background:var(--esim-tint)}

/* side by side comparison */
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.vs .box{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--border-subtle)}
.vs .box.good{border-color:var(--esim-line);background:var(--esim-tint)}
.vs h3{font-size:1.1875rem;font-weight:700}
.vs ul{margin:0;padding-inline-start:1.1rem;display:flex;flex-direction:column;gap:6px;font-size:.9375rem}
.vs figure{margin:0}
.vs figure svg{inline-size:100%;max-inline-size:220px;block-size:auto;display:block}
.fig{margin:0;padding:20px;border-radius:20px;background:var(--night-800);border:1px solid var(--border-subtle);max-inline-size:760px}
.fig svg{inline-size:100%;block-size:auto;display:block}
.fig figcaption{margin-block-start:10px;font-size:.875rem;color:var(--text-muted)}
.help-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.875rem;color:var(--text-muted)}
.related{display:flex;flex-wrap:wrap;gap:10px}
.related a{padding:.55rem 1rem;border-radius:999px;border:1px solid var(--border-subtle);font:600 .875rem/1 var(--font-body)}
.related a:hover{border-color:rgba(79,163,255,.45)}
.help-prose{max-inline-size:760px;display:flex;flex-direction:column;gap:16px}
.help-prose h2{font-size:1.5rem;margin-block-start:12px}
.help-prose ul,.help-prose ol{margin:0;padding-inline-start:1.3rem;display:flex;flex-direction:column;gap:8px}
.help-prose .kbd{white-space:nowrap}