/* How-to guide cards: the whole card is the link, and the /how page can filter them. */
.how-card { position: relative; cursor: pointer; }
.how-card h2 a::after, .how-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.how-card:has(a:focus-visible) { outline: 3px solid var(--brand); outline-offset: 4px; }
.how-card a:focus-visible { outline: none; }
.how-card[hidden] { display: none; }

/* Shared help controls use the public design-system palette and target size. */
:root { --help-space: 16px; --help-target: 60px; --help-heading: 1.5rem; }
.guide-search { margin: 0 0 calc(var(--help-space) * 1.5); padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.guide-search-label { display: block; margin: 0 0 calc(var(--help-space) / 2); font: inherit; font-weight: 700; color: var(--ink); }
.guide-search-row { display: flex; align-items: center; border: 1.5px solid var(--brand-soft); border-radius: var(--radius-sm); background: var(--surface); }
.guide-search-row:focus-within { outline: 3px solid var(--brand); outline-offset: 3px; }
.guide-search-input { flex: 1; width: 100%; min-width: 0; min-height: var(--help-target); padding: var(--help-space); border: 0; border-radius: inherit; background: transparent; color: var(--ink); font: inherit; appearance: none; }
.guide-search-input:focus-visible { outline: none; }
.guide-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.guide-search-mic, .guide-search-clear { flex: 0 0 auto; min-width: var(--help-target); min-height: var(--help-target); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; }
.guide-search-mic { padding-inline: calc(var(--help-space) / 2); }
.guide-search-clear { display: grid; place-items: center; }
.guide-search-clear svg { width: calc(var(--help-space) * 1.5); height: calc(var(--help-space) * 1.5); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.guide-search-mic:hover, .guide-search-clear:hover { background: var(--brand-pale); }
.guide-search-mic[aria-pressed="true"] { background: var(--brand); color: var(--surface); }
.guide-search-mic:focus-visible, .guide-search-clear:focus-visible { outline: 3px solid var(--brand); outline-offset: -4px; }
.guide-search-mic[hidden], .guide-search-clear[hidden] { display: none; }
.guide-search-status { margin: calc(var(--help-space) / 2) 0 0; color: var(--ink-soft); }
.guide-search-status:not(:has([data-guide-status]:not(:empty))) { margin: 0; }
[data-page="help"] .page-hero { padding: calc(var(--help-space) * 2) 0 var(--help-space); }
[data-page="help"] .page-hero .site-shell { max-width: 820px; }
[data-page="help"] .page-hero h1 { font-size: var(--help-heading); }
[data-page="help"] .page-hero p:not(.eyebrow) { margin-top: var(--help-space); font-size: inherit; }
[data-page="help"] .content-section:has([data-guide-search]) { padding-block: var(--help-space); }
[data-page="help"] [data-help-topic] { padding-block: var(--help-space); }
[data-help-results] { grid-template-columns: minmax(0, 1fr); gap: var(--help-space); }
[data-help-results] .how-card { padding: var(--help-space); }
[data-help-results] .how-card h2 { margin: 0 0 calc(var(--help-space) / 2); font-size: var(--help-heading); }
[data-help-results] .how-card p { margin: 0; }
@media (prefers-reduced-motion: no-preference) { .guide-search-mic[aria-pressed="true"] { animation: guide-mic-pulse 1.4s ease-in-out infinite; } }
@keyframes guide-mic-pulse { 50% { box-shadow: 0 0 0 6px var(--brand-pale); } }

/* The same three lock relationships as the bundled in-app how-to. */
.lock-guide { display: grid; gap: var(--help-space); margin-block: var(--help-space); }
.lock-flow { border: 1px solid var(--brand-soft); border-radius: var(--radius-sm); background: var(--surface); padding: var(--help-space); text-align: center; }
.lock-flow h3, .lock-flow p { margin: 0; }
.lock-flow > span { display: block; padding-block: calc(var(--help-space) / 2); }
[data-page="unlock-methods-guide"] h1 { overflow-wrap: anywhere; }