.cab.hp-main { padding-top: 1.25rem; }
.hp { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; grid-template-rows: auto 1fr; gap: 1.5rem 2rem; align-items: start; }
.hp-head { grid-column: 1; grid-row: 1; max-width: 46rem; }
.cab :is(.hp-lead p, .hx-lead) { max-width: 40rem; color: var(--muted); font-size: 1.0625rem; }
.hp-faq { display: grid; gap: 1.75rem; grid-column: 1; grid-row: 2; min-width: 0; max-width: 46rem; }
.hp-contact { grid-column: 1; grid-row: 2; min-width: 0; max-width: 42rem; background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; }

.hx-top { margin-bottom: 1.25rem; }
.cab .hx-top h1 { margin: 0 0 .375rem; }
.hx-tabs { display: flex; gap: 0 1.75rem; border-bottom: 1px solid var(--line); }
.hx-tabs a { display: inline-flex; align-items: center; min-height: 3rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 1.0625rem; font-weight: 550; text-decoration: none; white-space: nowrap; }
.hx-tabs a:hover { color: var(--text); }
.hx-tabs a[aria-current="page"] { color: var(--text); font-weight: 650; border-bottom-color: var(--brass-line); }

.hx-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 4.5rem; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; }
.hx-side-head { padding: 1.125rem 1.25rem; }
.cab .hx-side-head h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.cab .hx-side-head p { margin-top: .375rem; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.hx-side-foot { padding: 1rem 1.25rem 1.125rem; border-top: 1px solid var(--line); }
.cab .hx-side-foot .button { width: 100%; min-height: 3.25rem; font-size: 1.0625rem; }
.cab .hx-side-foot .hp-or { margin-top: .625rem; }
.cab .hx-idea { padding: .875rem 1.25rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }
.hx-idea a { font-weight: 650; }
.hx-quick { margin: 0; padding: .25rem 1.25rem 1rem; list-style: none; }
.hx-quick li + li { border-top: 1px solid var(--line); }
.hx-quick a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3rem; color: var(--text); font-size: .9375rem; font-weight: 550; text-decoration: none; }
.hx-quick a:hover { color: var(--accent); }
.hx-quick svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hp-bar-out .hp-bar-end { margin-left: auto; }
.hp-bar-out .button.small { min-height: 2.5rem; color: var(--muted); font-size: .9375rem; }

.hp-search { display: flex; align-items: center; gap: .625rem; min-height: 3rem; padding: 0 .25rem 0 .875rem; background: var(--panel); border: 1px solid var(--line2); border-radius: .625rem; }
.hp-search:focus-within { border-color: var(--brass-line); box-shadow: 0 0 0 1px var(--brass-line); }
.hp-search > svg { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.hp-search input { flex: 1; min-width: 0; margin: 0; padding: .625rem 0; color: var(--text); background: transparent; border: 0; outline: none; font: inherit; font-size: 1.0625rem; -webkit-appearance: none; appearance: none; }
.hp-search input::placeholder { color: var(--faint); opacity: 1; }
:root[data-theme="light"] .hp-search input::placeholder { color: var(--muted); }
.hp-search input::-webkit-search-cancel-button { display: none; }
.cab .hp-search .hp-clear { flex: none; width: 2.5rem; min-height: 2.5rem; padding: 0; color: var(--muted); background: transparent; border: 0; }
.cab .hp-search .hp-clear:hover { color: var(--text); }
.hp-clear svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cab .hp-found { margin: .5rem 0 0 .25rem; color: var(--muted); font-size: .9375rem; }
.hp-found:empty { display: none; }
.hp-none { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2.25rem 1.25rem; text-align: center; background: var(--panel); border: 1px dashed var(--line2); border-radius: .75rem; }
.cab .hp-none p { max-width: 26rem; color: var(--muted); font-size: 1rem; }
.hp-big { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.hp-sec h2 { margin: 0 0 .625rem .25rem; font-size: 1.1875rem; }
.hp-list { background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; }
.hp-q:not([hidden]) ~ .hp-q { border-top: 1px solid var(--line); }
.hp-q summary { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; padding: .75rem 1rem .75rem 1.25rem; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 550; line-height: 1.35; }
.hp-q summary::-webkit-details-marker { display: none; }
.hp-q summary:hover { background: var(--raise); }
.hp-q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hp-q summary > span { flex: 1; min-width: 0; }
.hp-chev { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.hp-q[open] { background: var(--raise); box-shadow: inset 3px 0 0 var(--brass-line); }
.hp-q[open] summary { font-weight: 650; }
.hp-q[open] summary:hover { background: transparent; }
.hp-q[open] .hp-chev { transform: rotate(180deg); stroke: var(--text); }
@media (prefers-reduced-motion: reduce) { .hp-chev { transition: none; } }
.hp-a { max-width: 42rem; padding: 0 1.25rem 1.25rem; }
.cab .hp-a p, .hp-a li { font-size: 1rem; line-height: 1.6; }
.cab .hp-a > * + * { margin-top: .625rem; }
.hp-a ul { margin: 0; padding-left: 1.25rem; }
.hp-a ul li + li { margin-top: .375rem; }
.hp-a strong { font-weight: 650; }
.hp-steps { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.hp-steps li { counter-increment: st; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .5rem; }
.hp-steps li::before { content: counter(st); display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; margin-top: .0625rem; border: 1px solid var(--brass-line); border-radius: 50%; color: var(--accent); font-size: .8125rem; font-weight: 750; line-height: 1; }
.cab .hp-a .hp-pic { max-width: 21rem; margin-top: 1rem; padding: .75rem .875rem .625rem; background: var(--night); border: 1px solid var(--line); border-radius: .625rem; }
.hp-pic svg { display: block; width: 100%; height: auto; }
.hp-pic .legend { margin: .375rem 0 0; padding: 0; }
.cab .hp-pic .legend li { margin: 0; font-size: .875rem; line-height: 1.5; }
.hp-pic .ring { fill: var(--night); }

.cab .hp-opening { padding: 1rem 1.25rem 1.25rem; color: var(--muted); font-size: .9375rem; }
.hp-form { display: grid; gap: 1.125rem; padding-top: 1rem; }
.hp-form > :not(.hp-send) { margin-left: 1.25rem; margin-right: 1.25rem; }
.hp-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.hp-field > legend, .hp-field > label { display: block; float: none; padding: 0; margin: 0 0 .5rem; font-size: .9375rem; font-weight: 650; }
.cab .hp-field .chips { gap: .375rem; }
.cab .hp-field .chips label { min-height: 2.5rem; padding: .25rem .8125rem; font-size: .9375rem; }
.cab .hp-never { display: flex; align-items: center; gap: .375rem; margin: -.125rem 0 .5rem; color: var(--muted); font-size: .875rem; }
.hp-never svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-text { display: block; width: 100%; min-height: 9.5rem; margin: 0; padding: .75rem .875rem; resize: vertical; color: var(--text); background: var(--night); border: 1px solid var(--line2); border-radius: .5rem; font: inherit; font-size: 1rem; line-height: 1.5; }
.hp-text:focus { outline: none; border-color: var(--brass-line); box-shadow: 0 0 0 1px var(--brass-line); }
.hp-text::placeholder { color: var(--faint); opacity: 1; }
:root[data-theme="light"] .hp-text::placeholder { color: var(--muted); }
.hp-count { display: flex; align-items: baseline; gap: .75rem; margin-top: .375rem; color: var(--muted); font-size: .8125rem; }
.hp-count .num { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-count .num.hp-near, .hp-at-limit { color: var(--warn); font-weight: 650; }
.hp-count .error { margin: 0; font-size: .875rem; }
.hp-field .error { margin-top: .375rem; font-size: .875rem; }
.hp-bad .hp-text { border-color: var(--down); box-shadow: 0 0 0 1px var(--down); }
.cab .hp-bad .chips label { border-color: var(--down); }
.hp-ro .hp-text { color: var(--muted); border-style: dashed; }
.cab .hp-ro .chips input:disabled + label { opacity: 1; }
.hp-check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .625rem; align-items: start; font-size: .9375rem; font-weight: 600; line-height: 1.4; cursor: pointer; }
.hp-check input { width: 1.125rem; height: 1.125rem; margin: .125rem 0 0; accent-color: var(--brass-line); }
.hp-check small { display: block; margin-top: .125rem; color: var(--muted); font-size: .875rem; font-weight: 400; }
.hp-what { margin-top: -.625rem; padding-left: 1.875rem; font-size: .875rem; }
.hp-what summary { display: inline-flex; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; list-style: none; }
.hp-what summary::-webkit-details-marker { display: none; }
.hp-what dl { display: grid; margin: .5rem 0 0; padding: .375rem .75rem; background: var(--night); border: 1px solid var(--line); border-radius: .5rem; }
.hp-what dl div { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; }
.hp-what dt { color: var(--muted); }
.hp-what dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cab .hp-what p { margin-top: .375rem; color: var(--muted); }
.hp-send { padding: 1rem 1.25rem 1.125rem; border-top: 1px solid var(--line); background: var(--panel); border-radius: 0 0 .75rem .75rem; }
.cab .hp-send button { width: 100%; min-height: 3.25rem; font-size: 1.0625rem; }
.cab .hp-send button.hp-busy { cursor: progress; opacity: .75; }
.cab .hp-or { margin-top: .625rem; color: var(--muted); font-size: .9375rem; text-align: center; }
.cab .hp-limit { margin: 0 0 .75rem; padding: .625rem .875rem; background: var(--warn-t); color: var(--warn-ink); border-left: 3px solid var(--warn); border-radius: .375rem; font-size: .9375rem; }
.hp-limit a { color: inherit; font-weight: 650; }
.cab .hp-failed { margin: 0 0 .75rem; }
.hp-failed a { color: inherit; }
.hp-done { display: flex; flex-direction: column; align-items: center; gap: .625rem; padding: 2rem 1.25rem 1.5rem; text-align: center; }
.hp-done-ico { width: 3.25rem; height: 3.25rem; fill: var(--up-t); stroke: var(--up); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cab .hp-done-t { max-width: 17rem; font-size: 1.125rem; font-weight: 650; line-height: 1.4; }
.hp-done-t:focus { outline: none; }
.cab .hp-mail { color: var(--muted); font-size: .9375rem; overflow-wrap: anywhere; }
.cab .hp-done button { margin-top: .5rem; }
.cab .hp-or-done { padding: 1rem 1.25rem 1.125rem; margin: 0; border-top: 1px solid var(--line); }
.hp-out { display: flex; flex-direction: column; align-items: center; gap: .875rem; padding: 1.5rem 1.25rem; text-align: center; }
.cab .hp-out p { max-width: 18rem; color: var(--muted); font-size: 1rem; }
.hp-out .button { width: 100%; min-height: 3.25rem; }
.cab .hp-follow { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }

@media (max-width: 959px) {
  .hp { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 1.5rem; }
  .hp-head, .hp-faq, .hp-contact, .hx-side { grid-column: 1; grid-row: auto; max-width: none; }
  .hx-side { position: static; margin-top: .5rem; }
}
@media (max-width: 719px) {
  .cab.hp-main { padding: 1rem 1rem 2rem; }
  .hx-tabs { gap: 0 1.5rem; }
  .hx-tabs a { font-size: 1rem; }
  .hp-faq { gap: 1.5rem; }
  .hp-q summary { padding: .875rem .875rem .875rem 1rem; font-size: 1rem; }
  .hp-a { padding: 0 1rem 1rem; }
  .cab .hp-a .hp-pic { max-width: none; padding: .5rem .625rem; }
  .cab .hp-field .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .cab .hp-field .chips label { justify-content: center; min-height: 2.75rem; }
  .hp-form > :not(.hp-send) { margin-left: 1rem; margin-right: 1rem; }
  .hp-send { position: sticky; bottom: 0; z-index: 2; padding: .75rem 1rem calc(.875rem + env(safe-area-inset-bottom)); }
}