/* ==========================================================================
   Help & support (/help) — scoped to body.page-help
   Hero search · sticky topic rail · FAQ · quick links · contact (mail composer)
   ========================================================================== */

/* ---------- hero ---------- */
.page-help .hc-hero { isolation: isolate; padding-block: clamp(44px, 7vw, 104px) clamp(36px, 5vw, 64px); }
.page-help .hc-hero::before { /* fine dot texture, fading out from the centre */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(22, 19, 45, 0.085) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 58% 72% at 50% 42%, #000 18%, transparent 74%);
  mask-image: radial-gradient(ellipse 58% 72% at 50% 42%, #000 18%, transparent 74%);
}
.page-help .hc-hero__inner {
  position: relative; z-index: 2; max-width: calc(720px + var(--gutter) * 2);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.page-help .hc-hero__title { margin-top: 22px; font-size: clamp(2.6rem, 1.35rem + 4.6vw, 4.9rem); line-height: 1.02; }
[data-script="arabic"] .page-help .hc-hero__title, [data-script="devanagari"] .page-help .hc-hero__title { line-height: 1.25; }
[data-script="cjk"] .page-help .hc-hero__title { line-height: 1.18; }
.page-help .hc-hero__title .hl { display: inline-block; }
.page-help .hc-hero__title .hl::after { /* hand-drawn lime underline */
  content: ""; position: absolute; inset-inline: -3%; bottom: -0.04em; height: 0.2em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C36 4 70 3.2 104 5.6s64 4.6 93-1.4' fill='none' stroke='%2384d645' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin: left center;
  animation: hc-draw 1s var(--ease-out) 0.55s both;
}
[dir="rtl"] .page-help .hc-hero__title .hl::after { transform-origin: right center; }
@keyframes hc-draw { from { transform: scaleX(0); opacity: 0.4; } to { transform: scaleX(1); opacity: 1; } }
.page-help .hc-hero__lead { margin-inline: auto; max-width: 54ch; }

/* search field */
.page-help .hc-search { position: relative; width: 100%; max-width: 640px; margin-top: clamp(28px, 4vw, 40px); }
.page-help .hc-search::before {
  content: ""; position: absolute; inset: -22px -6px; z-index: -1; border-radius: 999px; pointer-events: none;
  background: radial-gradient(55% 70% at 50% 55%, rgba(90, 69, 255, 0.24), transparent 72%);
  filter: blur(14px); opacity: 0.5; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.page-help .hc-search:focus-within::before { opacity: 1; transform: scale(1.05); }
.page-help .hc-search__input {
  width: 100%; height: 68px; padding-inline: 62px 66px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  font-size: 1.125rem; font-weight: 500; letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, var(--shadow);
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.25s, box-shadow 0.4s var(--ease-out);
}
.page-help .hc-search__input::placeholder { color: var(--ink-3); opacity: 1; }
.page-help .hc-search__input::-webkit-search-cancel-button,
.page-help .hc-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.page-help .hc-search__input:hover { border-color: rgba(22, 19, 45, 0.26); }
.page-help .hc-search__input:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 5px var(--iris-100), var(--shadow-lg); }
.page-help .hc-search__icon { position: absolute; inset-inline-start: 24px; top: 50%; translate: 0 -50%; display: grid; color: var(--iris); pointer-events: none; }
.page-help .hc-search__kbd {
  position: absolute; inset-inline-end: 20px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-3);
  font: 600 0.9rem/1 var(--font-sans); box-shadow: inset 0 -2px 0 var(--line);
  transition: opacity 0.2s;
}
.page-help .hc-search.has-value .hc-search__kbd, .page-help .hc-search:focus-within .hc-search__kbd { opacity: 0; }
@media (hover: none), (max-width: 640px) { .page-help .hc-search__kbd { display: none; } }
.page-help .hc-search__clear {
  position: absolute; inset-inline-end: 12px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--mist); color: var(--ink-2);
  transition: background-color 0.2s, color 0.2s, transform 0.3s var(--ease-spring);
  animation: pop-in 0.25s var(--ease-out);
}
.page-help .hc-search__clear:hover { background: var(--iris-100); color: var(--iris-700); transform: rotate(90deg); }

/* popular questions / jump to results */
.page-help .hc-hero__below { display: flex; justify-content: center; align-items: flex-start; min-height: 74px; margin-top: 22px; width: 100%; }
.page-help .hc-popular { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; }
.page-help .hc-popular__label { width: 100%; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
.page-help .hc-popular__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-help .hc-pop {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.35s var(--ease-out);
}
.page-help .hc-pop:hover { color: var(--iris-700); background: #fff; border-color: rgba(90, 69, 255, 0.35); transform: translateY(-2px); }
.page-help .hc-jump {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding-block: 0; padding-inline: 16px 20px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 650; font-size: var(--fs-small); text-decoration: none;
  box-shadow: 0 12px 30px -12px rgba(22, 19, 45, 0.6); animation: pop-in 0.3s var(--ease-out);
}
.page-help .hc-jump:hover { background: #2a2650; }
.page-help .hc-jump .icon { animation: hc-nudge 1.8s var(--ease-in-out) infinite; }
.page-help .hc-jump.is-none .icon { animation: none; }
@keyframes hc-nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }

/* floating word tiles (decorative, wide screens only) */
.page-help .hc-float { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
@media (min-width: 1120px) { .page-help .hc-float { display: block; } }
.page-help .hc-tile {
  --tw: clamp(112px, 9.6vw, 158px);
  position: absolute; top: var(--y); width: var(--tw); rotate: var(--r);
  animation: hc-tile-in 1.1s var(--ease-out) both; animation-delay: calc(var(--fd) * 90ms + 250ms);
}
/* --x is a 0..1 fraction of the free space beside the centred column, so tiles never cover the text */
.page-help .hc-tile--start { inset-inline-start: calc((50% - 384px - var(--tw)) * var(--x)); }
.page-help .hc-tile--end { inset-inline-end: calc((50% - 384px - var(--tw)) * var(--x)); }
.page-help .hc-tile__in {
  padding: 7px 7px 10px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(22, 19, 45, 0.05), 0 22px 44px -18px rgba(22, 19, 45, 0.28);
  animation: hc-bob 7s var(--ease-in-out) infinite; animation-delay: calc(var(--fd) * -1);
}
.page-help .hc-tile__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: var(--paper-2); }
.page-help .hc-tile__word { display: block; margin-top: 8px; text-align: center; font-size: 0.78rem; color: var(--ink); line-height: 1.2; }
.page-help .hc-hero.is-paused .hc-tile__in { animation-play-state: paused; }
@keyframes hc-tile-in { from { opacity: 0; scale: 0.86; } }
@keyframes hc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- answers: layout ---------- */
.page-help .hc-answers { padding-block: clamp(12px, 2vw, 28px) clamp(56px, 7vw, 104px); scroll-margin-top: var(--header-h); }
.page-help .hc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); }
.page-help .hc-main, .page-help .hc-rail { min-width: 0; }
@media (min-width: 1024px) {
  .page-help .hc-layout { grid-template-columns: 264px minmax(0, 1fr); align-items: start; }
  .page-help .hc-main { max-width: 820px; }
}

/* ---------- topic rail ---------- */
.page-help .hc-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.page-help .hc-cats__label { padding-inline: 14px; margin-bottom: 10px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
[data-script="arabic"] .page-help .hc-cats__label, [data-script="cjk"] .page-help .hc-cats__label, [data-script="devanagari"] .page-help .hc-cats__label { letter-spacing: 0.02em; text-transform: none; }
.page-help .hc-cats__list { position: relative; display: grid; gap: 2px; padding: 6px; border-radius: 22px; background: var(--paper-2); border: 1px solid var(--line); }
.page-help .hc-cats__pill {
  position: absolute; top: 0; inset-inline: 6px; height: 46px; border-radius: 16px; pointer-events: none;
  background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
}
.page-help .hc-cats__pill.is-ready { transition: transform 0.55s var(--ease-out), height 0.3s var(--ease-out); }
.page-help .hc-cat {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px;
  padding-block: 0; padding-inline: 8px 10px; border-radius: 16px; text-align: start;
  font-size: 0.96rem; font-weight: 600; line-height: 1.25; color: var(--ink-2);
  transition: color 0.2s, opacity 0.25s;
}
.page-help .hc-cat:hover { color: var(--ink); }
.page-help .hc-cat[aria-pressed="true"] { color: var(--ink); }
.page-help .hc-cat:focus-visible { outline-offset: -2px; border-radius: 16px; }
.page-help .hc-cat__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; color: var(--ink-3); transition: background-color 0.3s, color 0.3s; }
.page-help .hc-cat__label { flex: 1; min-width: 0; }
.page-help .hc-cat__n {
  display: grid; place-items: center; flex: none; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: rgba(22, 19, 45, 0.05); color: var(--ink-3); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color 0.3s, color 0.3s;
}
.page-help .hc-cat.is-zero { opacity: 0.5; }
.page-help .hc-cat--all .hc-cat__icon { color: var(--ink-2); }
.page-help .hc-cat--iris .hc-cat__icon { color: var(--iris-600); }
.page-help .hc-cat--lime .hc-cat__icon { color: var(--leaf-700); }
.page-help .hc-cat--sky .hc-cat__icon { color: #087fb6; }
.page-help .hc-cat--sun .hc-cat__icon { color: #a86d00; }
.page-help .hc-cat--rose .hc-cat__icon { color: #c8317a; }
.page-help .hc-cat--coral .hc-cat__icon { color: #d43c2c; }
.page-help .hc-cat--ink .hc-cat__icon { color: var(--ink-2); }
.page-help .hc-cat[aria-pressed="true"] .hc-cat__n { background: var(--iris-100); color: var(--iris-700); }
.page-help .hc-cat--all[aria-pressed="true"] .hc-cat__icon { background: var(--mist); }
.page-help .hc-cat--iris[aria-pressed="true"] .hc-cat__icon { background: var(--iris-100); }
.page-help .hc-cat--lime[aria-pressed="true"] .hc-cat__icon { background: var(--lime-100); }
.page-help .hc-cat--sky[aria-pressed="true"] .hc-cat__icon { background: var(--sky-100); }
.page-help .hc-cat--sun[aria-pressed="true"] .hc-cat__icon { background: var(--sun-100); }
.page-help .hc-cat--rose[aria-pressed="true"] .hc-cat__icon { background: var(--rose-100); }
.page-help .hc-cat--coral[aria-pressed="true"] .hc-cat__icon { background: var(--coral-100); }
.page-help .hc-cat--ink[aria-pressed="true"] .hc-cat__icon { background: var(--paper-2); }

/* "still stuck" card */
.page-help .hc-stuck { position: relative; overflow: hidden; isolation: isolate; padding: 22px; border-radius: 22px; background: var(--night); color: var(--on-night); }
.page-help .hc-stuck::before {
  content: ""; position: absolute; z-index: -1; inset-block-start: -70px; inset-inline-end: -60px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 214, 69, 0.32), transparent 68%);
}
.page-help .hc-stuck::after {
  content: ""; position: absolute; z-index: -1; inset-block-end: -90px; inset-inline-start: -50px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 69, 255, 0.45), transparent 68%);
}
.page-help .hc-stuck__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: var(--lime); }
.page-help .hc-stuck__title { margin-top: 14px; font-size: 1.08rem; font-weight: 700; color: #fff; }
.page-help .hc-stuck__body { margin-top: 4px; font-size: var(--fs-small); line-height: 1.5; color: var(--on-night-2); }
.page-help .hc-stuck__cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; padding: 0 18px; border-radius: 999px;
  background: var(--lime); color: #11240a; font-size: var(--fs-small); font-weight: 700; text-decoration: none;
  transition: background-color 0.2s, transform 0.35s var(--ease-out);
}
.page-help .hc-stuck__cta:hover { background: #95e25b; transform: translateY(-2px); }

@media (min-width: 1024px) {
  .page-help .hc-rail { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .page-help .hc-stuck__body, .page-help .hc-stuck__icon { display: none; }
  .page-help .hc-stuck__title { margin-top: 0; }
}

/* below 1024px the rail becomes a sticky, swipeable chip row */
@media (max-width: 1023.98px) {
  .page-help .hc-rail {
    position: sticky; top: var(--header-h); z-index: 30;
    margin-inline: calc(var(--gutter) * -1); padding-block: 10px;
    background: rgba(251, 250, 246, 0.9); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
    transition: box-shadow 0.3s;
  }
  .page-help .hc-rail.is-stuck { box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgba(22, 19, 45, 0.4); }
  .page-help .hc-cats__label, .page-help .hc-cats__pill, .page-help .hc-stuck { display: none; }
  .page-help .hc-cats__list {
    display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    padding: 2px var(--gutter); scroll-padding-inline: var(--gutter);
    background: none; border: 0; border-radius: 0; scrollbar-width: none;
  }
  .page-help .hc-cats__list::-webkit-scrollbar { display: none; }
  .page-help .hc-cats__list > li { flex: none; scroll-snap-align: start; }
  .page-help .hc-cat {
    width: auto; min-height: 44px; gap: 8px; padding-block: 0; padding-inline: 7px 12px; border-radius: 999px; white-space: nowrap;
    background: #fff; border: 1px solid var(--line); font-size: 0.93rem;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
  }
  .page-help .hc-cat__icon { width: 30px; height: 30px; border-radius: 50%; }
  .page-help .hc-cat[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .page-help .hc-cat[aria-pressed="true"] .hc-cat__icon { background: rgba(255, 255, 255, 0.14); color: #fff; }
  .page-help .hc-cat[aria-pressed="true"] .hc-cat__n { background: rgba(255, 255, 255, 0.16); color: #fff; }
}

/* ---------- status bar ---------- */
.page-help .hc-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  min-height: 44px; margin-bottom: clamp(24px, 3vw, 32px); padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.page-help .hc-status__text { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.page-help .hc-status__clear {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--iris-50); color: var(--iris-700); font-size: var(--fs-small); font-weight: 650;
  transition: background-color 0.2s; animation: pop-in 0.25s var(--ease-out);
}
.page-help .hc-status__clear:hover { background: var(--iris-100); }

/* ---------- FAQ groups + items ---------- */
.page-help .hc-groups { display: grid; gap: clamp(44px, 5vw, 64px); }
.page-help .hc-group, .page-help .hq { scroll-margin-top: calc(var(--header-h) + 84px); }
@media (min-width: 1024px) { .page-help .hc-group, .page-help .hq { scroll-margin-top: calc(var(--header-h) + 24px); } }
.page-help .hc-group__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.page-help .hc-group__head .icon-tile { flex: none; }
.page-help .hc-group__title { font-size: clamp(1.3rem, 1.12rem + 0.65vw, 1.6rem); font-weight: 720; letter-spacing: -0.018em; }
.page-help .hc-group__desc { margin-top: 3px; font-size: var(--fs-small); color: var(--ink-3); }
.page-help .icon-tile--ink { background: var(--paper-2); color: var(--ink-2); }
.page-help .hc-group__list { gap: 10px; }
.page-help .hc-groups.is-swapping .hc-group:not([hidden]) { animation: hc-in 0.55s var(--ease-out) both; animation-delay: calc(var(--gi, 0) * 60ms); }
@keyframes hc-in { from { opacity: 0; transform: translateY(14px); } }

.page-help .hq { transition: border-color 0.3s, box-shadow 0.35s var(--ease-out); }
.page-help .hq:hover { border-color: var(--line-2); }
.page-help .hq summary { gap: 18px; padding: 18px 18px 18px 24px; padding-inline: 24px 18px; font-size: 1.0625rem; line-height: 1.4; border-radius: var(--r); transition: color 0.2s; }
.page-help .hq summary:hover { color: var(--iris-700); }
.page-help .hq summary:hover .faq__icon { background: var(--iris-100); }
.page-help .hq summary:focus-visible { outline-offset: -3px; }
.page-help .hq[open] summary { color: var(--ink); }
.page-help .hq__q { display: grid; gap: 6px; min-width: 0; }
.page-help .hq__qt { text-wrap: pretty; }
.page-help .hq__snip {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: var(--fs-small); font-weight: 450; line-height: 1.5; color: var(--ink-3);
}
.page-help .hq[open] .hq__snip { display: none; }
.page-help .hq.is-target { animation: hq-target 2.1s var(--ease-out); }
@keyframes hq-target {
  0% { border-color: var(--iris); box-shadow: 0 0 0 0 rgba(90, 69, 255, 0.4); }
  35% { border-color: var(--iris); box-shadow: 0 0 0 7px rgba(90, 69, 255, 0.14); }
  100% { box-shadow: 0 0 0 14px rgba(90, 69, 255, 0); }
}

/* answer typography */
.page-help .hq__body { padding: 0 24px 18px; font-size: 1rem; line-height: 1.7; }
.page-help .hq__a { max-width: 68ch; }
.page-help .hq__a > * + * { margin-top: 12px; }
.page-help .hq__a a { color: var(--iris-600); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(90, 69, 255, 0.35); text-underline-offset: 0.2em; transition: text-decoration-color 0.2s; }
.page-help .hq__a a:hover { text-decoration-color: currentColor; }
.page-help .hq__a strong { color: var(--ink); font-weight: 650; }
.page-help .hq__a em { font-style: normal; font-weight: 600; color: var(--ink); }
.page-help .hq__a ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.page-help .hq__a ul li { position: relative; padding-inline-start: 24px; }
.page-help .hq__a ul li::before {
  content: ""; position: absolute; inset-inline-start: 5px; top: 0.66em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 3px var(--lime-100);
}
.page-help .hq__a ol { list-style: none; padding: 0; counter-reset: hq; display: grid; gap: 8px; }
@media (min-width: 700px) { .page-help .hq__a ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-help .hq__a ol li {
  counter-increment: hq; position: relative; display: flex; align-items: center; min-height: 52px;
  padding: 10px 14px; padding-inline-start: 52px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); line-height: 1.4;
}
.page-help .hq__a ol li::before {
  content: counter(hq); position: absolute; inset-inline-start: 13px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  background: var(--iris); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.page-help .ui {
  padding: 0.08em 0.5em; border-radius: 7px; background: var(--iris-50); border: 1px solid var(--iris-100);
  color: var(--iris-700); font-weight: 600; font-size: 0.93em; white-space: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.page-help .hq__a code {
  padding: 0.12em 0.5em; border-radius: 6px; background: var(--ink); color: #fff;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, Menlo, monospace; font-size: 0.86em; letter-spacing: 0.06em;
}
.page-help mark {
  padding: 0 0.06em; border-radius: 4px; background: #ffe29a; color: var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* answer footer */
.page-help .hq__foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 6px; border-top: 1px dashed var(--line-2); }
.page-help .hq__copy {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; margin-inline-end: -10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); transition: color 0.2s, background-color 0.2s;
}
.page-help .hq__copy:hover { color: var(--iris-700); background: var(--iris-50); }
.page-help .hq__copy.is-done { color: var(--leaf-700); }

/* memory ladder mini chart (inside the ladder answer) */
.page-help .hc-ladder { max-width: 560px; margin: 20px 0 0; padding: 18px 18px 14px; border-radius: 18px; background: linear-gradient(180deg, var(--iris-50), #fff 80%); border: 1px solid var(--iris-100); }
.page-help .hc-ladder__steps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: clamp(4px, 1vw, 8px); height: 150px; }
.page-help .hc-ladder__step { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.page-help .hc-ladder__bar {
  width: 100%; max-width: 38px; height: calc(14px + var(--i) * 12px); border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #8a7bff, var(--iris)); transform-origin: bottom;
}
.page-help .hc-ladder__step:nth-child(n + 6) .hc-ladder__bar { background: linear-gradient(180deg, var(--lime), var(--leaf)); }
.page-help .hc-ladder__n { margin-top: 7px; font-size: 0.95rem; font-weight: 750; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.page-help .hc-ladder__u { margin-top: 3px; font-size: 0.7rem; line-height: 1.15; color: var(--ink-3); text-align: center; overflow-wrap: anywhere; }
.page-help .hc-ladder__cap { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.page-help .hq[open] .hc-ladder__bar { animation: hc-grow 0.9s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes hc-grow { from { transform: scaleY(0.06); opacity: 0.35; } }

/* empty state */
.page-help .hc-empty { padding: clamp(32px, 5vw, 56px) 24px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-2); background: rgba(255, 255, 255, 0.6); text-align: center; animation: hc-in 0.5s var(--ease-out); }
.page-help .hc-empty__art { width: 160px; height: 120px; margin: 0 auto 14px; }
.page-help .hc-empty__art .e-card { fill: #fff; stroke: var(--line-2); }
.page-help .hc-empty__art .e-line { fill: var(--mist); }
.page-help .hc-empty__art .e-lens { fill: var(--iris-50); stroke: var(--iris); stroke-width: 5; }
.page-help .hc-empty__art .e-handle { stroke: var(--iris); stroke-width: 7; stroke-linecap: round; fill: none; }
.page-help .hc-empty__art .e-q { fill: none; stroke: var(--iris-700); stroke-width: 3.5; stroke-linecap: round; }
.page-help .hc-empty__art .e-qdot { fill: var(--iris-700); }
.page-help .hc-empty__art .e-lime { fill: var(--lime); }
.page-help .hc-empty__art .e-sun { fill: var(--sun); }
.page-help .hc-empty__title { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); overflow-wrap: anywhere; }
.page-help .hc-empty__body { max-width: 46ch; margin: 8px auto 0; color: var(--ink-2); }
.page-help .hc-empty__actions { justify-content: center; margin-top: 22px; }

/* ---------- quick links ---------- */
.page-help .hc-actions { padding-block: 0 clamp(56px, 7vw, 104px); }
.page-help .hc-actions__title { margin-bottom: 20px; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; }
.page-help .hc-actions__grid > li { display: flex; }
.page-help .hc-action { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 22px 22px 24px; padding-inline: 24px 22px; text-decoration: none; color: inherit; }
.page-help .hc-action .icon-tile { flex: none; transition: transform 0.45s var(--ease-out); }
.page-help .hc-action:hover .icon-tile { transform: rotate(-6deg) scale(1.06); }
.page-help .hc-action__text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.page-help .hc-action__title { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.page-help .hc-action__body { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-3); }
.page-help .hc-action__arrow {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); color: var(--ink);
  transition: background-color 0.3s, color 0.3s, translate 0.45s var(--ease-out);
}
.page-help .hc-action:hover .hc-action__arrow { background: var(--ink); color: #fff; translate: 4px 0; }
[dir="rtl"] .page-help .hc-action:hover .hc-action__arrow { translate: -4px 0; }
@media (min-width: 641px) and (max-width: 960px) { .page-help .hc-actions__grid { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.page-help .hc-contact { overflow: hidden; isolation: isolate; margin-bottom: clamp(8px, 1.5vw, 20px); scroll-margin-top: calc(var(--header-h) - 8px); }
.page-help .hc-contact__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 52% at 8% 0%, rgba(90, 69, 255, 0.38), transparent 70%),
    radial-gradient(38% 46% at 100% 100%, rgba(132, 214, 69, 0.16), transparent 70%),
    radial-gradient(30% 40% at 70% 10%, rgba(255, 126, 182, 0.1), transparent 70%);
}
.page-help .hc-contact__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 1024px) {
  .page-help .hc-contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .page-help .hc-contact__intro { position: sticky; top: calc(var(--header-h) + 32px); }
}
.page-help .hc-contact__title { margin-top: 12px; }
.page-help .hc-contact .lead { margin-top: 18px; }
.page-help .hc-notes { display: grid; gap: 20px; margin-top: 34px; }
.page-help .hc-note { display: flex; align-items: flex-start; gap: 14px; }
.page-help .hc-note__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--night-line); color: var(--lime); }
.page-help .hc-note__title { display: block; font-weight: 650; color: var(--on-night); }
.page-help .hc-note__body { display: block; margin-top: 2px; font-size: var(--fs-small); line-height: 1.55; color: var(--on-night-2); }
.page-help .hc-direct { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--night-line); }
.page-help .hc-direct__label { font-size: var(--fs-small); color: var(--on-night-2); }
.page-help .hc-direct__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 8px; }
.page-help .hc-direct__mail { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); font-weight: 700; letter-spacing: -0.01em; color: #fff; text-decoration: none; overflow-wrap: anywhere; transition: color 0.2s; }
.page-help .hc-direct__mail:hover { color: var(--lime); text-decoration: underline; text-decoration-thickness: 2px; }
.page-help .hc-copy-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--night-line); color: var(--on-night); font-size: var(--fs-small); font-weight: 600; text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.page-help .hc-copy-btn:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); }
.page-help .hc-copy-btn.is-done { color: var(--lime); border-color: rgba(132, 214, 69, 0.5); }
.page-help .hc-copy-btn--light { border-color: rgba(22, 19, 45, 0.18); color: var(--ink); background: #fff; }
.page-help .hc-copy-btn--light:hover { border-color: var(--ink); background: #fff; }
.page-help .hc-copy-btn--light.is-done { color: var(--leaf-700); border-color: var(--leaf); }

/* the composer card */
.page-help .hc-form {
  position: relative; padding: clamp(22px, 3.2vw, 40px); border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 100px -40px rgba(0, 0, 0, 0.7), 0 30px 60px -30px rgba(90, 69, 255, 0.45);
}
.page-help .hc-form__head { margin-bottom: 24px; }
.page-help .hc-form__title { font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem); letter-spacing: -0.015em; }
.page-help .hc-form__sub { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: var(--fs-small); color: var(--ink-3); }
.page-help .hc-form__sub .icon { color: var(--iris); }
.page-help .hc-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.page-help .hc-field--full { grid-column: 1 / -1; }
@media (max-width: 560px) { .page-help .hc-form__grid { grid-template-columns: 1fr; } }
.page-help .hc-form .field { display: flex; flex-direction: column; gap: 8px; }
.page-help .hc-form .field label { flex: 1 0 auto; color: var(--ink); } /* fields side by side keep their inputs aligned */
.page-help .hc-opt { margin-inline-start: 4px; font-size: 0.86em; font-weight: 500; color: var(--ink-3); }
.page-help .hc-form .input, .page-help .hc-form .textarea, .page-help .hc-form .select { font-size: 1rem; }
.page-help .hc-form .input::placeholder, .page-help .hc-form .textarea::placeholder { color: #8e8ba3; opacity: 1; }
.page-help .hc-form .textarea { min-height: 150px; line-height: 1.55; }
.page-help .hc-select { position: relative; }
.page-help .hc-select .select { -webkit-appearance: none; appearance: none; padding-inline-end: 48px; font-weight: 550; cursor: pointer; }
.page-help .hc-select__chev { position: absolute; inset-inline-end: 16px; top: 50%; translate: 0 -50%; color: var(--ink-3); pointer-events: none; }
.page-help .hc-hint { min-height: 1.5em; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); }
.page-help .hc-error { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: #b42318; }
.page-help .hc-form .textarea[aria-invalid="true"] { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-100); }
.page-help .hc-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.page-help .hc-send { white-space: normal; text-align: center; }
.page-help .hc-form__note { display: flex; align-items: center; gap: 7px; flex: 1 1 200px; font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-3); }
.page-help .hc-form__note .icon { flex: none; color: var(--leaf-700); }
@media (max-width: 560px) {
  .page-help .hc-send { width: 100%; padding-inline: 18px; }
  .page-help .hc-send .icon-end { display: none; }
}

/* live preview of the email */
.page-help .hc-preview { margin-top: 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.page-help .hc-preview summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 18px;
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none;
}
.page-help .hc-preview summary::-webkit-details-marker { display: none; }
.page-help .hc-preview summary:hover { color: var(--iris-700); }
.page-help .hc-preview summary > .icon:first-child { color: var(--iris); }
.page-help .hc-preview__chev { margin-inline-start: auto; transition: transform 0.3s var(--ease-out); }
.page-help .hc-preview[open] .hc-preview__chev { transform: rotate(180deg); }
.page-help .hc-preview__mail { padding: 0 18px 18px; border-top: 1px solid var(--line); animation: faq-open 0.35s var(--ease-out); }
.page-help .hc-preview__row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.page-help .hc-preview__k { flex: none; width: 70px; color: var(--ink-3); }
.page-help .hc-preview__v { min-width: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .page-help .hc-preview__row { flex-direction: column; gap: 2px; }
  .page-help .hc-preview__k { width: auto; }
}
.page-help .hc-preview__body {
  max-height: 260px; overflow: auto; margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: inherit; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2);
}
.page-help .hc-preview__body .is-empty { font-style: italic; color: var(--ink-3); }

/* after submit */
.page-help .hc-sent { display: flex; gap: 14px; margin-top: 20px; padding: 18px 20px; border-radius: 18px; background: var(--lime-100); border: 1px solid #d6efc0; animation: pop-in 0.4s var(--ease-out); }
.page-help .hc-sent:focus { outline: none; }
.page-help .hc-sent__icon { flex: none; margin-top: 1px; color: var(--leaf-700); }
.page-help .hc-sent__title { font-weight: 700; color: var(--ink); }
.page-help .hc-sent__body, .page-help .hc-sent__long { margin-top: 4px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.page-help .hc-sent__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* without JavaScript: plain FAQ + plain address */
.page-help .hc-nojs { display: none; }
html:not(.js) .page-help .hc-nojs { display: block; font-size: 1.15rem; color: var(--on-night); }
html:not(.js) .page-help .hc-nojs a { color: var(--lime); font-weight: 700; }
html:not(.js) .page-help .hc-form,
html:not(.js) .page-help .hc-search,
html:not(.js) .page-help .hc-rail,
html:not(.js) .page-help .hc-status,
html:not(.js) .page-help .hc-copy-btn,
html:not(.js) .page-help .hq__foot { display: none; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .page-help .hc-search__input { height: 60px; padding-inline: 52px 58px; font-size: 1.0625rem; }
  .page-help .hc-search__icon { inset-inline-start: 19px; }
  .page-help .hc-search__clear { inset-inline-end: 8px; }
  .page-help .hc-hero__below { min-height: 0; }
  .page-help .hc-popular { gap: 10px; width: 100%; }
  .page-help .hc-popular__list {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .page-help .hc-popular__list::-webkit-scrollbar { display: none; }
  .page-help .hc-popular__list > li { flex: none; }
  .page-help .hq summary { padding: 16px; padding-inline: 18px 14px; font-size: 1rem; gap: 12px; }
  .page-help .hq__body { padding: 0 18px 14px; }
  .page-help .hc-group__head { gap: 14px; }
  .page-help .hc-group__head .icon-tile { width: 42px; height: 42px; border-radius: 12px; }
  .page-help .hc-action { padding: 18px; gap: 14px; }
  .page-help .hc-ladder { padding: 14px 12px 12px; }
  .page-help .hc-ladder__steps { height: 128px; }
  .page-help .hc-ladder__bar { height: calc(10px + var(--i) * 10px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-help .hc-tile, .page-help .hc-tile__in, .page-help .hc-jump .icon { animation: none; }
  .page-help .hc-hero__title .hl::after { animation: none; transform: none; }
}