/* VILAR — iOS region help (WEBSITE-IOS-RU-REGION-INSTALL-HELPER-1).
   Three surfaces, one vocabulary:
   - the trigger by an App Store CTA (page theme): a quiet line, not a warning;
   - the instruction body (.rh-*), rendered identically in the sheet (dark
     tokens from sheet.css) and on /help/iphone-russia/ (page theme);
   - the link inside the campaign sheet's iPhone card (.promo-region).
   Help, not an error: no red, no alert box, no purple slab — the accent only
   on the action and the step numbers. Every text a customer reads is ≥ 15 px
   on a phone (R289); every control there is ≥ 44 px tall. */

/* ---------------------------------------------------------------- trigger */
/* the pin hangs in its own column and the words flow beside it, wrapping at
   word boundaries — a second line starts under «iPhone», never under the pin
   (WEBSITE-VILAR-SIMPLE-ONBOARDING-POLISH-1). The words and the action are
   one inline flow inside .rh-trig-b, so a host rule that makes the text
   larger (.plat-row p) can only wrap them, never orphan the pin. */
.rh-trig {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45;
}
.rh-pin { flex: none; margin-top: calc((1.45em - 16px) / 2); color: var(--accent); }
.rh-trig-b { min-width: 0; }
.rh-trig-t { margin-right: 8px; }
.rh-trig-n { white-space: nowrap; }
.rh-trig-t b { font-weight: 600; color: var(--ink); }
.rh-trig-a {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; vertical-align: middle;
  color: var(--accent); font-weight: 500; white-space: nowrap;
}
.rh-trig-a:hover { color: var(--accent-press); }
.rh-arrow { flex: none; transition: transform 0.15s ease; }
.rh-trig-a:hover .rh-arrow, .promo-region-a:hover .rh-arrow { transform: translateX(2px); }
/* by the hero store row / on a platform card / under the download row */
.stores-hero + .rh-trig { margin-top: 16px; }
.get-ios .rh-trig { margin-top: 12px; }
/* /download/: inside the CTA row, right after the App Store badge — beside it
   on desktop, directly under it on a phone (the row is a column there) */
.plat-cta .rh-trig { margin-top: 0; font-size: 0.9375rem; }

/* --------------------------------------------- instruction (sheet + page) */
.rh-lead { margin-top: 10px; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.rh-official { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; color: var(--ink); font-size: 0.9375rem; line-height: 1.5; }
.rh-ok { flex: none; margin-top: 3px; color: var(--ok); }

/* the reassurance: a calm surface with the lane on its edge */
.rh-easy {
  position: relative; margin-top: 18px; padding: 14px 16px 14px 20px;
  background: var(--wash); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 14px;
}
.rh-easy::before {
  content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px;
  border-radius: 2px; background: var(--accent);
}
.rh-easy p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.rh-easy .rh-easy-h { color: var(--ink); font-weight: 600; font-size: 1rem; margin-bottom: 4px; }

.rh-steps-h { margin-top: 24px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.rh-steps { list-style: none; counter-reset: rh; margin-top: 12px; padding: 0; display: grid; gap: 10px; }
.rh-steps li {
  counter-increment: rh; position: relative; padding-left: 38px; min-height: 26px;
  color: var(--ink-2); font-size: 0.9688rem; line-height: 1.5;
}
.rh-steps li::before {
  content: counter(rh); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}
.rh-time { margin-top: 12px; color: var(--ink-3); font-size: 0.9375rem; line-height: 1.5; }

.rh-cta { --bh: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 16px; }
.rh-store { display: flex; }
.rh-apple, .rh-apple-inline {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: 500; font-size: 0.9375rem;
}
.rh-apple { min-height: 44px; }
.rh-apple:hover, .rh-apple-inline:hover { color: var(--accent-press); }
.rh-ext { flex: none; }

.rh-bonus { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.rh-bonus p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.rh-bonus b { color: var(--ink); font-weight: 600; }
.rh-bonus .rh-foot { margin-top: 6px; color: var(--ink-3); }

/* «Не получается сменить регион?» — collapsed, out of the main path */
.rh-blocked { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; }
.rh-blocked summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 0 16px; border-radius: 13px;
  font-weight: 500; color: var(--ink); cursor: pointer; list-style: none;
}
.rh-blocked summary::-webkit-details-marker { display: none; }
.rh-blocked summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-top: -4px;
  border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.rh-blocked[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.rh-blocked summary:hover { background: var(--wash); }
.rh-blocked > p { padding: 0 16px; margin-top: 6px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.rh-blocked ul { margin: 8px 0 0; padding: 0 16px 0 34px; display: grid; gap: 6px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.rh-blocked .rh-blocked-apple { margin: 10px 0 14px; }

/* ----------------------------------------------------------------- page */
.rh-page .rh-page-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.rh-page .rh-lead { font-size: 1.0625rem; margin-top: 16px; }
.rh-page .rh-steps-h { font-size: 1.25rem; margin-top: 30px; }
.rh-page .rh-cta { --bh: 48px; }

/* ------------------------------------------- the campaign sheet's link */
/* inline, so the arrow follows the last word when the line wraps; the
   padding keeps the tap area at 44 px */
.promo-region { margin-top: 6px; }
.promo-region-a {
  display: inline-block; padding: 11px 0;
  color: var(--accent); font-weight: 500; font-size: 0.9375rem; line-height: 1.45;
}
.promo-region-a .rh-arrow { display: inline-block; vertical-align: -2px; margin-left: 5px; }
.promo-region-a:hover { color: var(--accent-press); }

/* ------------------------------------------------------------------ phone */
@media (max-width: 720px) {
  .rh-trig-a, .rh-apple-inline { min-height: 44px; }
  /* the action takes its own line: a 44 px target inside a text line would
     open a gap between the lines */
  .rh-trig-a { display: flex; width: fit-content; }
  .rh-steps li { font-size: 1rem; }
  .rh-page .rh-page-eyebrow { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-arrow, .rh-blocked summary::after { transition: none; }
  .rh-trig-a:hover .rh-arrow, .promo-region-a:hover .rh-arrow { transform: none; }
}