/* Help center (/help, /help/<slug>). Builds on info.css: Pauzie cream, pine, olive green. */
.hc { --hc-line: #e2dfd4; --hc-soft: #fbfaf6; }

/* ---------- home ---------- */
.hc-hero { max-width: 900px; margin: 0 auto; padding: 112px 0 8px; text-align: center; }
.hc-hero .inf-lede { max-width: 34ch; }
.hc-search { display: flex; align-items: center; gap: 12px; max-width: 620px; margin: 32px auto 0; height: 64px; padding: 0 22px; background: #fff; border-radius: 999px; box-shadow: 0 1px 0 var(--hc-line), 0 10px 30px -14px rgba(63, 64, 33, .35); color: var(--i-pine); cursor: text; }
.hc-search:focus-within { box-shadow: 0 0 0 3px #c9d98f, 0 10px 30px -14px rgba(63, 64, 33, .35); }
.hc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 19px; font-weight: 500; color: #1d1d16; }
.hc-search input::placeholder { color: #8a8a7a; }

/* Columns, not a grid: groups differ a lot in length, so they stack without gaps. */
.hc-groups { max-width: 1100px; margin: 48px auto 0; column-gap: 14px; }
@media (min-width: 760px) { .hc-groups { columns: 2; } }
@media (min-width: 1040px) { .hc-groups { columns: 3; } }
.hc-group { break-inside: avoid; margin-bottom: 14px; background: #fff; border-radius: 26px; padding: 24px 14px 12px; }
.hc-group[hidden] { display: none; }
.hc-ico { width: 46px; height: 46px; margin: 0 10px; border-radius: 14px; display: grid; place-items: center; background: var(--i-pine); color: #F2F0EA; }
.hc-ico svg { width: 24px; height: 24px; }
.hc-group--warn .hc-ico { background: #b06a00; }
.inf .hc-group h2 { margin: 16px 10px 8px; font-size: 26px; letter-spacing: -.02em; }
.inf .hc-group a { display: block; padding: 12px 10px; border-top: 1px solid var(--hc-line); text-decoration: none; border-radius: 12px; }
.inf .hc-group a[hidden] { display: none; }
.inf .hc-group a:hover { background: var(--hc-soft); }
.hc-group a b { display: block; font-size: 18px; font-weight: 600; color: var(--i-pine); }
.hc-group a b::after { content: " →"; color: var(--i-green); opacity: 0; transition: opacity .15s; }
.hc-group a:hover b::after { opacity: 1; }
.hc-group a span { display: block; margin-top: 2px; font-size: 16px; font-weight: 400; color: #6b6b5c; }
.hc-none { max-width: 900px; margin: 40px auto 0; text-align: center; font-size: 19px; color: #3d3d33; }

.hc-stuck { max-width: 1100px; margin: 40px auto 0; display: flex; align-items: center; gap: 24px; padding: 26px; border-radius: 28px; background: var(--i-pine); color: #F2F0EA; }
.hc-stuck img { flex: none; width: 260px; aspect-ratio: 3 / 2; height: auto; border-radius: 20px; object-fit: cover; }
@media (max-width: 560px) { .hc-stuck img { width: 100%; } }
.inf .hc-stuck h2 { margin: 0; color: #F2F0EA; font-size: clamp(26px, 3.4vw, 34px); }
.hc-stuck p { margin: 6px 0 0; font-size: 18px; opacity: .85; }
.inf .hc-stuck__btn { margin-top: 16px; background: #F2F0EA; color: var(--i-pine); text-decoration: none; }
@media (max-width: 560px) { .hc-stuck { flex-direction: column; text-align: center; } }

/* ---------- article (story pages: help-story.css) ---------- */
/* Platform blocks: help-story.js hides the other platform; without JS both show, labelled. */
.hc [data-only]::before { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--i-green); }
.hc [data-only="android"]::before { content: "Android"; }
.hc [data-only="iphone"]::before { content: "iPhone"; }
.hc.js-plat [data-only]::before { content: none; }
.hc.js-plat[data-plat="android"] [data-only="iphone"],
.hc.js-plat[data-plat="iphone"] [data-only="android"] { display: none; }

/* ---------- home: top questions ---------- */
.hc-top { max-width: 1100px; margin: 40px auto 0; }
.hc-top[hidden] { display: none; }
.inf .hc-top h2 { margin: 0 4px 14px; font-size: 26px; letter-spacing: -.02em; }
.hc-top__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .hc-top__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.inf .hc-top a { display: flex; align-items: center; gap: 16px; padding: 18px 22px 18px 18px; border-radius: 26px; background: #fff; text-decoration: none; box-shadow: 0 1px 0 var(--hc-line); transition: transform .15s, box-shadow .15s; }
.inf .hc-top a::after { content: "→"; margin-left: auto; font-size: 22px; color: var(--i-green); }
.inf .hc-top a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(63, 64, 33, .45); }
.inf .hc-top a:focus-visible { outline: 3px solid #c9d98f; outline-offset: 2px; }
.hc-top b { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--i-pine); }
.hc-ico2 { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: rgba(63, 64, 33, .07); color: var(--i-pine); }