.how-to-page { background: #f5f8f7; color: #172c2a; min-height: 100vh; }
body a[data-how-to-common-entry], body.how-to-member a[data-how-to-original-href] { color: var(--desk-green, #155340); }
body.how-to-member #corporateAdminApp .desk-shortcuts a[data-how-to-original-href] { background: #fff; color: var(--desk-green, #155340); }
.how-to-home { max-width: 760px; margin: 56px auto; padding: 0 24px 64px; }
.how-to-eyebrow { color: #087c68; font-size: 13px; font-weight: 800; }
.how-to-home h1 { margin: 8px 0 10px; font-size: clamp(28px, 5vw, 42px); }
.how-to-home > p:not(.how-to-eyebrow, .how-to-count) { color: #52615e; }
.how-to-search-label { display: block; margin: 32px 0 8px; font-weight: 700; }
#howToSearch { box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #91aba5; border-radius: 12px; background: white; font: inherit; }
#howToSearch:focus-visible { outline: 3px solid #0ba487; outline-offset: 2px; }
.how-to-count { min-height: 24px; margin: 16px 0 8px; color: #52615e; font-size: 14px; }
.how-to-questions { display: grid; gap: 12px; }
.how-to-category, .how-to-subcategory { border: 1px solid #b9d1ca; border-radius: 12px; background: #fff; overflow: hidden; }
.how-to-category > summary, .how-to-subcategory > summary { cursor: pointer; padding: 16px 20px; color: #103d31; font-weight: 800; }
.how-to-category > summary { background: #eaf4f0; }
.how-to-subcategory > summary { background: #f4f8f6; }
.how-to-category > div, .how-to-subcategory > div { display: grid; gap: 8px; padding: 12px; }
.how-to-question { border: 1px solid #d4ddda; border-radius: 12px; background: #fff; overflow: hidden; }
.how-to-question summary { cursor: pointer; padding: 18px 20px; font-weight: 750; }
.how-to-question summary::marker { color: #087c68; }
.how-to-answer { padding: 0 20px 20px; color: #52615e; }
.how-to-answer p { margin: 0 0 14px; }
.how-to-start { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid #087c68; border-radius: 8px; background: #087c68; color: white; font: inherit; font-weight: 700; cursor: pointer; }
.how-to-start:disabled { border-color: #cad3d0; background: #e9efed; color: #57615e; cursor: not-allowed; }
.how-to-focus-mask { position: fixed; z-index: 2147483000; background: #132c2940; backdrop-filter: blur(3.6px); -webkit-backdrop-filter: blur(3.6px); pointer-events: none; }
.how-to-focus-mask[data-side="top-left"] { mask-image: radial-gradient(circle at bottom right, transparent, #000 18px); -webkit-mask-image: radial-gradient(circle at bottom right, transparent, #000 18px); }
.how-to-focus-mask[data-side="top-center"] { mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }
.how-to-focus-mask[data-side="top-right"] { mask-image: radial-gradient(circle at bottom left, transparent, #000 18px); -webkit-mask-image: radial-gradient(circle at bottom left, transparent, #000 18px); }
.how-to-focus-mask[data-side="left"] { mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
.how-to-focus-mask[data-side="right"] { mask-image: linear-gradient(to left, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 18px), transparent); }
.how-to-focus-mask[data-side="bottom-left"] { mask-image: radial-gradient(circle at top right, transparent, #000 18px); -webkit-mask-image: radial-gradient(circle at top right, transparent, #000 18px); }
.how-to-focus-mask[data-side="bottom-center"] { mask-image: linear-gradient(to top, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 18px), transparent); }
.how-to-focus-mask[data-side="bottom-right"] { mask-image: radial-gradient(circle at top left, transparent, #000 18px); -webkit-mask-image: radial-gradient(circle at top left, transparent, #000 18px); }
.how-to-focus-target { position: relative !important; z-index: 2147483001 !important; outline: 3px solid #06a77d !important; outline-offset: 4px !important; box-shadow: 0 0 0 6px #06a77d40 !important; }
.how-to-tip { position: fixed; z-index: 2147483002; box-sizing: border-box; width: min(330px, calc(100vw - 24px)); padding: 16px; border: 2px solid #103d31; border-radius: 12px; background: white; box-shadow: 0 16px 42px #0b292843; color: #18312b; font: 14px/1.5 sans-serif; }
.how-to-tip strong { display: block; margin-bottom: 4px; color: #103d31; }
.how-to-tip p { margin: 0 0 12px; white-space: pre-line; }
.how-to-tip-actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: end; gap: 8px; min-height: 28px; }
.how-to-tip-actions button { padding: 0; border: 0; background: transparent; color: #52615e; text-decoration: underline; cursor: pointer; font: inherit; }
.how-to-tip-actions button:hover { color: #087c68; }
.how-to-tip-actions [data-how-to-prev] { grid-column: 1; grid-row: 1; box-sizing: border-box; height: 28px; padding: 2px 7px; border: 1px solid #103d31; border-radius: 6px; color: #103d31; font-size: 12px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.how-to-tip-actions [data-how-to-prev]:hover { background: #eef8f6; }
.how-to-tip-actions [data-how-to-next] { grid-column: 2; grid-row: 1; height: 28px; padding: 2px 9px; border: 1px solid #087c68; border-radius: 6px; background: #087c68; color: white; font-size: 12px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.how-to-tip-actions [data-how-to-next]:hover { background: #066f5d; color: white; }
.how-to-tip-actions [data-how-to-exit] { grid-column: 4; grid-row: 1; justify-self: end; }
.how-to-countdown { grid-column: 3; grid-row: 1; justify-self: center; color: #103d31; font-weight: 700; font-variant-numeric: tabular-nums; }
.how-to-tip[hidden], .how-to-focus-mask[hidden] { display: none !important; }
body.how-to-active .site-header, body.how-to-active .desk-sidebar { z-index: auto !important; }
body.how-to-member #corporateCreditGuide a[href="corporate.html"], body.how-to-member #confirmCorporateCreditInquiry { display: none !important; }
@media (max-width: 640px) { .how-to-home { margin-top: 32px; padding-inline: 16px; } .how-to-question summary { padding: 16px; } .how-to-answer { padding-inline: 16px; } }

#corporateOptionsDiffModal .modal-card.how-to-focus-target { min-height: 0; }