.gh-onboarding { background: #f5f5f3; color: #25282c; padding-bottom: 3.5rem; }
.gh-onboarding [hidden] { display: none !important; }
.gh-ob-hero { background: #fff; border-bottom: 1px solid #dfdfdc; padding: 2.8rem 0 2.4rem; }
.gh-ob-hero h1 { color: #8d111b; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.045em; margin: .4rem 0 1rem; font-weight: 800; }
.gh-ob-hero p:not(.gh-eyebrow) { max-width: 46rem; margin-bottom: 1.2rem; font-size: 1.05rem; }
.gh-ob-hero-notes { display: flex; flex-wrap: wrap; gap: .7rem 2rem; font-size: .82rem; color: #52565c; }
.gh-ob-hero-notes i { color: #8d111b; margin-right: .4rem; }
.gh-ob-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.8rem); padding-top: 2.5rem; align-items: start; }
.gh-ob-sidebar { position: sticky; top: calc(var(--gh-main-nav-placeholder, 96px) + 1.5rem); }
.gh-ob-small-title { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; margin-bottom: 1rem; }
.gh-ob-step-list { list-style: none; padding: 0; margin: 0 0 1.7rem; }
.gh-ob-step-list li + li { margin-top: .35rem; }
.gh-ob-step-list button { display: flex; align-items: center; gap: .75rem; border: 0; border-radius: 8px; background: transparent; color: #4f5359; width: 100%; text-align: left; padding: .65rem; font-size: .86rem; line-height: 1.4; min-height: 48px; }
.gh-ob-step-list button[aria-current="step"] { background: #f1e3e4; color: #80101a; font-weight: 700; }
.gh-ob-step-number { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border: 1px solid #b7b9bd; border-radius: 50%; font-size: .8rem; background: #fff; }
.gh-ob-step-list button[aria-current="step"] .gh-ob-step-number { background: #8d111b; color: #fff; border-color: #8d111b; }
.gh-ob-help { border-top: 1px solid #d8d9d6; padding: 1.3rem .65rem 1rem; }
.gh-ob-help p { font-size: .85rem; line-height: 1.7; }
.gh-ob-help a { display: block; font-size: .88rem; font-weight: 600; padding: .35rem 0; color: #80101a; }
.gh-ob-help a[href^="tel"] { font-size: 1.15rem; text-decoration: none; }
.gh-ob-help small { display: block; font-size: .72rem; margin-bottom: .6rem; color: #595d63; }
.gh-ob-text-link { display: block; padding: .65rem; color: #555a60; font-size: .78rem; line-height: 1.7; }
.gh-ob-workspace { min-width: 0; }
.gh-ob-progress { margin-bottom: 1.3rem; }
.gh-ob-progress > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: .55rem; font-size: .8rem; font-weight: 600; }
.gh-ob-progress button { background: transparent; border: 0; text-decoration: underline; color: #555a60; min-height: 40px; padding: .3rem .2rem; }
.gh-ob-progress progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 5px; background: #dedfdb; accent-color: #8d111b; }
.gh-ob-progress progress::-webkit-progress-bar { background: #dedfdb; border-radius: 5px; }
.gh-ob-progress progress::-webkit-progress-value { background: #8d111b; border-radius: 5px; }
.gh-ob-panel { background: #fff; border: 1px solid #e0e0dc; border-radius: 14px; padding: clamp(1.25rem, 3vw, 2.7rem); box-shadow: 0 6px 22px #26252205; }
.gh-ob-kicker { color: #8d111b; display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 700; margin-bottom: .8rem; }
.gh-ob-panel h2 { font-size: clamp(1.6rem, 2.7vw, 2.25rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 700; margin-bottom: 1rem; scroll-margin-top: calc(var(--gh-main-nav-placeholder, 96px) + 2rem); }
.gh-ob-panel h3 { font-size: 1.02rem; font-weight: 700; margin: 1.4rem 0 .75rem; }
.gh-ob-panel p, .gh-ob-panel li { font-size: .91rem; line-height: 1.8; }
.gh-ob-panel a, .gh-ob-disclosure a { color: #89111b; }
.gh-ob-panel .btn-danger { color: white; }
.gh-ob-panel fieldset { min-width: 0; }
.gh-ob-equipment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.5rem 0; }
.gh-ob-equipment-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #d7d9da; border-radius: 10px; padding: .85rem; cursor: pointer; min-width: 0; }
.gh-ob-equipment-card:hover { border-color: #8d111b; }
.gh-ob-equipment-card:has(input:checked) { border: 2px solid #8d111b; padding: calc(.85rem - 1px); background: #fdf7f7; }
.gh-ob-equipment-card input { position: absolute; top: .8rem; right: .8rem; width: 19px; height: 19px; accent-color: #8d111b; }
.gh-ob-equipment-image { width: 100%; height: 115px; display: grid; place-items: center; margin: .7rem 0 .8rem; }
.gh-ob-equipment-image img { width: 100%; height: 100%; max-height: 115px; object-fit: contain; mix-blend-mode: multiply; }
.gh-ob-equipment-card strong { font-size: .82rem; line-height: 1.5; }
.gh-ob-equipment-card > span:not(.gh-ob-equipment-image):not(.gh-ob-question) { font-size: .75rem; color: #8d111b; margin-top: .4rem; }
.gh-ob-equipment-card small { font-size: .68rem; line-height: 1.5; color: #60656b; margin-top: .25rem; }
.gh-ob-question { display: grid; place-items: center; height: 115px; margin: .7rem 0 .8rem; width: 100%; font-size: 3.5rem; color: #8d111b; font-weight: 300; }
.gh-ob-note, .gh-ob-resume { background: #f5f6f5; border-left: 3px solid #8d111b; padding: 1.1rem 1.25rem; border-radius: 0 8px 8px 0; margin: 1.2rem 0; }
.gh-ob-note h3 { margin-top: 0; }
.gh-ob-note p:last-child { margin-bottom: 0; }
.gh-ob-disclosure { border-top: 1px solid #e0e1dd; margin-top: 1.25rem; padding: .8rem 0; font-size: .85rem; }
.gh-ob-disclosure summary { cursor: pointer; font-weight: 600; padding: .35rem 0; min-height: 36px; }
.gh-ob-disclosure p { margin-top: 1rem; }
.gh-ob-checklist { padding-left: 1.2rem; }
.gh-ob-checklist li { margin: .7rem 0; padding-left: .35rem; }
.gh-ob-check { display: flex; align-items: flex-start; gap: .75rem; border: 1px solid #d5d6d3; border-radius: 8px; padding: 1rem; cursor: pointer; margin: 1rem 0; font-size: .9rem; line-height: 1.7; }
.gh-ob-check input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: .15rem; accent-color: #8d111b; }
.gh-ob-check:has(input:checked) { background: #fdf7f7; border-color: #8d111b; }
.gh-ob-instructions { list-style: none; padding: 0; counter-reset: cable; }
.gh-ob-instructions li { counter-increment: cable; padding: 1rem 0 1rem 3rem; position: relative; border-bottom: 1px solid #e9e9e6; }
.gh-ob-instructions li::before { content: counter(cable); position: absolute; left: 0; top: 1rem; display: grid; place-items: center; background: #f2e7e8; color: #8d111b; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; }
.gh-ob-instructions strong { display: block; margin-bottom: .25rem; }
.gh-ob-instructions li strong:not(:first-child) { display: inline; }
.gh-ob-guide-link { display: inline-block; padding: .7rem 0; font-size: .84rem; font-weight: 600; }
.gh-ob-panel .gh-ob-footnote { color: #60656b; font-size: .78rem; margin-top: 1.2rem; }
.gh-ob-field-label { display: block; font-weight: 600; font-size: .88rem; margin: 1.3rem 0 .5rem; }
.gh-ob-panel select { min-height: 48px; font-size: .9rem; margin-bottom: 1.25rem; }
.gh-ob-panel .gh-model-guides { grid-template-columns: 1fr; }
.gh-ob-panel .gh-model-guide { min-width: 0; margin-top: 1rem; }
.gh-ob-panel .gh-model-guide li { margin-bottom: .8rem; }
.gh-ob-panel .gh-model-guide summary { font-size: .9rem; }
.gh-ob-panel .gh-model-guide small { font-size: .75rem; }
.gh-ob-results { margin-top: 1.5rem; }
.gh-ob-results legend { font-size: 1rem; font-weight: 600; }
.gh-ob-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e0e1dd; }
.gh-ob-actions .btn { min-height: 46px; padding: .7rem 1.4rem; font-size: .9rem; font-weight: 600; }
.gh-ob-actions a.btn-danger { color: #fff; }
.gh-ob-error { background: #fff1f1; color: #80101a; border: 1px solid #c5767e; border-radius: 8px; padding: .85rem 1rem; }
.gh-ob-finish-grid { display: grid; gap: .8rem; margin-top: 1.5rem; }
.gh-ob-finish-card { position: relative; display: block; border: 1px solid #dcdedb; border-radius: 10px; padding: 1.25rem 1.25rem 1.25rem 4rem; text-decoration: none; }
.gh-ob-finish-card i { position: absolute; top: 1.5rem; left: 1.25rem; font-size: 1.5rem; }
.gh-ob-finish-card h3 { margin: 0 0 .5rem; color: #25282c; }
.gh-ob-finish-card p { color: #555b61; margin-bottom: .5rem; }
.gh-ob-finish-card > span { font-size: .8rem; font-weight: 600; text-decoration: underline; }
.gh-ob-bottom-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem; font-size: .72rem; color: #62666b; margin: 1.2rem .2rem; }
.gh-ob-bottom-note a { color: #62666b; }
.gh-ob-credits { color: #60656b; font-size: .72rem; }
.gh-onboarding :is(button, a, input, select, summary):focus-visible { outline: 3px solid #245cac; outline-offset: 4px; }
.gh-ob-equipment-card:has(input:focus-visible) { outline: 3px solid #245cac; outline-offset: 3px; }
.gh-ob-panel section + section { margin-top: 2rem; }
.gh-ob-panel section[hidden] + section { margin-top: 0; }
@media (max-width: 991px) {
  .gh-ob-layout { grid-template-columns: minmax(0, 1fr); }
  .gh-ob-sidebar { position: static; display: contents; }
  .gh-ob-sidebar nav { grid-row: 1; }
  .gh-ob-sidebar nav .gh-ob-small-title { display: none; }
  .gh-ob-step-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .2rem; margin: 0; }
  .gh-ob-step-list li + li { margin: 0; }
  .gh-ob-step-list button { justify-content: center; padding: .5rem .1rem; }
  .gh-ob-step-list button > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .gh-ob-workspace { grid-row: 2; }
  .gh-ob-help { margin-top: 0; }
  .gh-ob-text-link { margin-top: -1rem; }
}
@media (max-width: 575px) {
  .gh-ob-hero { padding: 2rem 0 1.6rem; }
  .gh-ob-hero-notes { font-size: .74rem; gap: .6rem; }
  .gh-ob-equipment { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .gh-ob-equipment-image, .gh-ob-question { height: 90px; }
  .gh-ob-equipment-image img { max-height: 90px; }
  .gh-ob-equipment-card { padding: .7rem; }
  .gh-ob-equipment-card:has(input:checked) { padding: calc(.7rem - 1px); }
  .gh-ob-panel { padding: 1.2rem; }
  .gh-ob-panel h2 { font-size: 1.65rem; }
  .gh-ob-note { padding: 1rem; }
}
