.hg {
--hg-bg: #f6f8fb; --hg-panel: #ffffff; --hg-ink: #1b2533; --hg-muted: #556275; --hg-line: #d9e1ec;
--hg-navy: #1e3a7b; --hg-amber: #b45309; --hg-amber-bg: #fff7e6; --hg-ok: #166534;
background: var(--hg-bg); color: var(--hg-ink);
font: 16px/1.6 var(--font-body, sans-serif);
padding: 24px 16px 48px;
}
[data-theme="dark"] .hg {
--hg-bg: #0f1520; --hg-panel: #172030; --hg-ink: #e6ecf5; --hg-muted: #a3b0c2; --hg-line: #2a3648;
--hg-navy: #8fb0ff; --hg-amber: #f5b45a; --hg-amber-bg: #2a2214; --hg-ok: #6fd39a;
}
.hg *, .hg *::before, .hg *::after { box-sizing: border-box; } @media (min-width: 1025px) { .hg { padding-right: calc(16px + var(--cpa-sponsor-strip, 0px)); } }
.hg-wrap { max-width: 1100px; margin: 0 auto; }
.hg-head { display: grid; gap: 8px; margin-bottom: 20px; }
.hg h1 { font: 800 clamp(28px, 4vw, 40px)/1.15 var(--font-heading, sans-serif); color: var(--hg-navy); margin: 0; text-wrap: balance; }
.hg .lede { color: var(--hg-muted); max-width: 65ch; margin: 0; }
.hg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.hg-rail { background: var(--hg-panel); border: 1px solid var(--hg-line); border-radius: 10px; padding: 12px; }
.hg-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hg-rail button { width: 100%; text-align: left; display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center;
padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--hg-ink); font: 15px/1.3 var(--font-body, sans-serif); cursor: pointer; min-height: 44px; }
.hg-rail button .n { font-weight: 600; font-size: 14px; color: var(--hg-muted); }
.hg-rail button[aria-current="step"] { background: var(--hg-navy); color: var(--hg-panel); }
.hg-rail button[aria-current="step"] .n { color: var(--hg-panel); }
.hg-rail button:focus-visible, .hg-nav button:focus-visible, .hg a:focus-visible { outline: 3px solid var(--hg-amber); outline-offset: 2px; }
@media (min-width: 821px) {
.hg-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
.hg-rail { position: sticky; top: 1rem; }
body.admin-bar .hg-rail { top: calc(32px + 1rem); }
}
.hg article.step { background: var(--hg-panel); border: 1px solid var(--hg-line); border-radius: 12px; padding: clamp(18px, 3vw, 32px); min-width: 0; }
.hg .step-no { font-weight: 600; font-size: 15px; color: var(--hg-amber); margin: 0; }
.hg h2 { font: 800 clamp(22px, 3vw, 28px)/1.2 var(--font-heading, sans-serif); color: var(--hg-navy); margin: 4px 0 12px; text-wrap: balance; }
.hg h3 { font: 700 17px/1.3 var(--font-body, sans-serif); color: var(--hg-ink); margin: 20px 0 6px; }
.hg p { margin: 0 0 12px; max-width: 70ch; }
.hg ul { margin: 0 0 12px; padding-left: 20px; max-width: 70ch; }
.hg li { margin-bottom: 6px; }
.hg a { color: var(--hg-navy); }
.hg figure { margin: 16px 0; }
.hg figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--hg-line); border-radius: 8px; }
.hg figcaption { font-size: 14px; color: var(--hg-muted); margin-top: 6px; }
.hg .note { background: var(--hg-amber-bg); border-left: 4px solid var(--hg-amber); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 14px 0; max-width: 70ch; } .hg .check { margin-top: 20px; border: 1px dashed var(--hg-line); border-radius: 8px; padding: 12px 14px; }
.hg .check h3 { margin: 0 0 6px; font-size: 16px; }
.hg .check ul { list-style: none; padding: 0; margin: 0; }
.hg .check li { display: flex; gap: 8px; font-size: 15px; line-height: 1.5; margin: 0; }
.hg .check li span:first-child { flex: 0 1 auto; min-width: 0; }
.hg .check li .dots { flex: 1 1 auto; border-bottom: 2px dotted var(--hg-line); transform: translateY(-5px); min-width: 16px; }
.hg .check li span:last-child { flex: 0 0 auto; color: var(--hg-ok); font-weight: 600; }
.hg-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.hg-nav button { min-height: 44px; padding: 10px 18px; border-radius: 8px; font: 600 15px var(--font-body, sans-serif); cursor: pointer; border: 2px solid var(--hg-navy); background: var(--hg-panel); color: var(--hg-navy); }
.hg-nav button.primary { background: var(--hg-navy); color: var(--hg-panel); }
.hg-nav button[disabled] { opacity: .4; cursor: default; }
.hg table.money { border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 8px 0 14px; }
.hg table.money td { padding: 4px 18px 4px 0; border-bottom: 1px solid var(--hg-line); }
.hg table.money tr:last-child td { font-weight: 700; border-bottom: 0; }
.hg .table-wrap { overflow-x: auto; margin: 8px 0 14px; }
.hg table.fields { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.hg table.fields th { text-align: left; font-weight: 600; font-size: 14px; color: var(--hg-muted); padding: 6px 10px; border-bottom: 2px solid var(--hg-line); }
.hg table.fields td { padding: 8px 10px; border-bottom: 1px solid var(--hg-line); vertical-align: top; }
.hg table.fields tr.sec td { font-weight: 700; color: var(--hg-navy); padding-top: 14px; }
.hg table.fields td:first-child { font-weight: 600; width: 26%; }
.hg table.fields td:last-child { color: var(--hg-muted); width: 30%; } .hg .mail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 10px 0 18px; }
.hg figure.mail-shot { margin: 0; display: grid; gap: 8px; align-content: start; }
.hg figure.mail-shot img { width: 100%; }
.hg figure.mail-shot figcaption { display: grid; gap: 2px; margin: 0; font-size: 14px; }
.hg figure.mail-shot .when { color: var(--hg-muted); }
.hg figure.mail-shot .subj { font-weight: 700; color: var(--hg-ink); }
.hg h3.mail-group, .hg h3.faq-group { font: 800 19px/1.3 var(--font-heading, sans-serif); color: var(--hg-navy); margin: 26px 0 8px; padding-top: 10px; border-top: 1px solid var(--hg-line); }
.hg details.faq { border: 1px solid var(--hg-line); border-radius: 8px; margin: 8px 0; max-width: 70ch; background: var(--hg-panel); }
.hg details.faq summary { cursor: pointer; padding: 12px 14px; font-weight: 600; min-height: 44px; }
.hg details.faq summary:focus-visible { outline: 3px solid var(--hg-amber); outline-offset: 2px; }
.hg details.faq p { padding: 0 14px 12px; margin: 0; }
.hg-foot { color: var(--hg-muted); font-size: 14px; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.hg-pdf { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 2px solid var(--hg-navy); border-radius: 8px; color: var(--hg-navy); font-weight: 600; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
.hg article.step { animation: hg-in .2s ease-out; }
@keyframes hg-in { from { opacity: .4; } to { opacity: 1; } }
}