:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body.onboarding-page { min-width: 320px; margin: 0; padding-bottom: 132px; overflow-x: hidden; background: #f3f6fb; }
body.onboarding-page *, body.onboarding-page *::before, body.onboarding-page *::after { box-sizing: border-box; }
body.onboarding-page.onboarding-global-focus::before,
html[data-onboarding-step="2-1"] body.onboarding-page::before,
html[data-onboarding-step="2-2"] body.onboarding-page::before,
html[data-onboarding-step="3-1"] body.onboarding-page::before,
html[data-onboarding-step="3-2"] body.onboarding-page::before,
html[data-onboarding-step="3-3"] body.onboarding-page::before,
html[data-onboarding-step="4"] body.onboarding-page::before { position: fixed; z-index: 55; inset: 0; background: rgba(17, 39, 70, .42); content: ""; pointer-events: none; }
.onboarding-page [hidden] { display: none !important; }
.onboarding-page .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.onboarding-page .notice-header { position: sticky; z-index: 50; top: 0; }
body.onboarding-page.notice-page.onboarding-global-focus .notice-header { z-index: 70; border-bottom-color: transparent; box-shadow: none; }
.onboarding-page .notice-header.onboarding-has-focus { isolation: isolate; }
.onboarding-page .notice-header.onboarding-has-focus::after { position: absolute; z-index: 4; inset: 0; background: rgba(17, 39, 70, .42); content: ""; pointer-events: none; }
html[data-onboarding-step] .onboarding-page .notice-header { isolation: isolate; border-bottom-color: transparent; }
html[data-onboarding-step] .onboarding-page .notice-header::after { position: absolute; z-index: 4; inset: 0 0 -2px; background: rgba(17, 39, 70, .42); content: ""; pointer-events: none; }
html:not([data-onboarding-step="1-1"]):not([data-onboarding-step="1-2"]) .onboarding-page .notice-header { z-index: 70; }
.onboarding-page .notice-header a, .onboarding-page .notice-header button { pointer-events: none; }
.onboarding-page .notice-nav a.active { color: #0b5bd3; }
body.onboarding-page.notice-page .notice-nav[data-onboarding-focus="main-nav"].onboarding-focus-active { z-index: 6; isolation: isolate; border-radius: 0; background: transparent; outline: 0; box-shadow: none; }
body.onboarding-page.notice-page .notice-nav[data-onboarding-focus="main-nav"].onboarding-focus-active::after { position: absolute; z-index: 0; inset: 0 -5%; border: 4px solid #1263f1; border-radius: 0; background: #fff; box-shadow: 0 10px 24px rgba(23, 84, 177, .22); content: ""; pointer-events: none; }
body.onboarding-page.notice-page .notice-nav[data-onboarding-focus="main-nav"].onboarding-focus-active > a { position: relative; z-index: 1; }
body.onboarding-page.notice-page .notice-nav[data-onboarding-focus="main-nav"].onboarding-focus-active::before { display: none; }

.onboarding-screens { width: 100%; min-width: 0; margin: 0; }
.onboarding-screen { display: grid; gap: 13px; }
.onboarding-screen:not(.onboarding-notices-screen) { width: min(1380px, calc(100% - 40px)); margin: 24px auto 0; }
.onboarding-screen-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 5px; }
.onboarding-screen-heading span { color: #0b5bd3; font-size: 12px; font-weight: 950; letter-spacing: .04em; }
.onboarding-screen-heading h2 { margin: 5px 0 0; color: #172d49; font-size: clamp(20px, 2.3vw, 28px); letter-spacing: -.045em; line-height: 1.3; }
.onboarding-screen-heading h2:focus { outline: none; }
.onboarding-screen-heading > p { margin: 0; color: #728198; font-size: 12px; font-weight: 800; }
.onboarding-demo-frame { position: relative; min-width: 0; overflow: hidden; isolation: isolate; border: 1px solid #d8e2ee; border-radius: 18px; background: #f7f9fc; box-shadow: 0 18px 48px rgba(20, 52, 91, .10); }
html[data-onboarding-step="2-1"] .onboarding-screen[aria-current] .onboarding-demo-frame,
html[data-onboarding-step="2-2"] .onboarding-screen[aria-current] .onboarding-demo-frame,
html[data-onboarding-step="3-1"] .onboarding-screen[aria-current] .onboarding-demo-frame,
html[data-onboarding-step="3-2"] .onboarding-screen[aria-current] .onboarding-demo-frame,
html[data-onboarding-step="3-3"] .onboarding-screen[aria-current] .onboarding-demo-frame,
html[data-onboarding-step="4"] .onboarding-screen[aria-current] .onboarding-demo-frame { z-index: 60; }
.onboarding-demo-frame > * { min-width: 0; }
.onboarding-demo-frame button, .onboarding-demo-frame input, .onboarding-demo-frame select, .onboarding-demo-frame textarea, .onboarding-demo-frame a { pointer-events: none; }
.onboarding-demo-frame.onboarding-has-focus::after { position: absolute; z-index: 4; inset: 0; background: rgba(17, 39, 70, .42); content: ""; pointer-events: none; }
.onboarding-focus-active { position: relative; z-index: 5; border-radius: 12px; background: #fff; box-shadow: 0 0 0 4px #1263f1, 0 16px 38px rgba(11, 91, 211, .30); }
.onboarding-focus-active::before { position: absolute; z-index: 1; top: -16px; left: 16px; max-width: calc(100% - 32px); overflow: hidden; padding: 6px 10px; border-radius: 999px; background: #1263f1; color: #fff; content: attr(data-onboarding-focus-label); font-size: 11px; font-weight: 950; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
body.onboarding-page.notice-page:not(.notice-detail-page) .notice-search.onboarding-focus-active { z-index: 12; overflow: visible; box-shadow: 0 0 0 3px #fff, 0 0 0 7px #1263f1, 0 18px 38px rgba(11, 91, 211, .30); }
body.onboarding-page.notice-page:not(.notice-detail-page) .notice-search.onboarding-focus-active input { height: 100%; background: transparent; }
body.onboarding-page.notice-page:not(.notice-detail-page) .notice-search.onboarding-focus-active::before { z-index: 8; top: calc(100% + 12px); left: 0; }
body.onboarding-page.notice-page:not(.notice-detail-page) .notice-search.onboarding-focus-active + .popular-searches { margin-top: 39px; }
html:is([data-onboarding-step="1-1"], [data-onboarding-step="1-2"]) .onboarding-notices-frame.onboarding-has-focus::after { z-index: 10; }
html:is([data-onboarding-step="1-1"], [data-onboarding-step="1-2"]) .onboarding-notices-frame .hero-copy { position: relative; z-index: 11; isolation: isolate; }
html:is([data-onboarding-step="1-1"], [data-onboarding-step="1-2"]) .onboarding-notices-frame .hero-copy h1,
html:is([data-onboarding-step="1-1"], [data-onboarding-step="1-2"]) .onboarding-notices-frame .hero-copy .popular-searches { opacity: .52; }
[data-onboarding-focus="recommendation-bookmark"].onboarding-focus-active { position: absolute; border-radius: 8px; background: #fff; color: #1263f1; }
[data-onboarding-focus="recommendation-bookmark"].onboarding-focus-active::before { top: -38px; right: 0; left: auto; width: max-content; max-width: min(260px, 72vw); }
[data-onboarding-focus="interest-nav"] { display: inline-block; }
[data-onboarding-focus="interest-nav"].onboarding-focus-active { border-radius: 4px; background: #fff; box-shadow: 0 0 0 7px #fff, 0 0 0 10px #1263f1, 0 12px 30px rgba(11, 91, 211, .34); }
[data-onboarding-focus="interest-nav"].onboarding-focus-active::before { top: calc(100% + 14px); left: 50%; width: max-content; max-width: min(340px, 80vw); transform: translateX(-50%); }
.onboarding-notices-frame { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.onboarding-notices-frame .notice-shell { margin-top: 0; }

.onboarding-demo-frame.info-page { padding: 0; }
.onboarding-demo-frame .info-page-shell { width: 100%; max-width: none; margin: 0; padding: 34px 28px; }
.onboarding-demo-frame .company-hero { margin-top: 0; }
.onboarding-demo-frame .company-layout { align-items: start; }
.onboarding-company-form { display: block !important; }
.onboarding-company-profile-fields { display: grid; gap: 16px; }
.onboarding-company-profile-fields.onboarding-focus-active { margin: -12px; padding: 12px; }
.onboarding-company-form input, .onboarding-company-form select, .onboarding-company-form textarea { opacity: 1; -webkit-text-fill-color: #344861; }
.onboarding-company-form .company-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.onboarding-company-form .company-selected-chips span { padding: 6px 9px; border: 1px solid #bcd5f7; border-radius: 999px; background: #edf5ff; color: #225c9f; font-size: 11px; font-weight: 800; }
.onboarding-company-form .company-save-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e1e8f0; }
.onboarding-company-form .company-save-row.onboarding-focus-active { margin: 18px -10px -10px; padding: 16px 10px 10px; }
.onboarding-company-form .company-save-row > span { color: #687991; font-size: 12px; }
.onboarding-company-form .company-save-row button { min-height: 42px; padding: 0 15px; }

.onboarding-demo-frame .company-recommendation-panel { margin-top: 0; }

.onboarding-demo-frame .interest-dashboard { display: grid; gap: 22px; }
.onboarding-demo-frame .interest-hero { margin-top: 0; }
.onboarding-interest-list { display: grid; gap: 12px; }
.onboarding-interest-list .interest-bookmark-card { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 17px; border: 1px solid #dce5ef; border-radius: 13px; background: #fff; }
.onboarding-interest-list .interest-bookmark-card.is-soon { border-color: #f0c1b5; background: #fffaf8; }
.onboarding-interest-list .interest-bookmark-status { display: grid; justify-items: center; gap: 3px; color: #315b87; }
.onboarding-interest-list .interest-bookmark-status strong { font-size: 22px; }
.onboarding-interest-list .interest-bookmark-status span { font-size: 10px; font-weight: 850; }
.onboarding-interest-list .is-soon .interest-bookmark-status { color: #c54d35; }
.onboarding-interest-list .interest-bookmark-main { min-width: 0; }
.onboarding-interest-list .interest-bookmark-main > div { display: flex; gap: 7px; color: #55708f; font-size: 10px; font-weight: 850; }
.onboarding-interest-list h3 { margin: 7px 0 4px; color: #172d49; font-size: 16px; }
.onboarding-interest-list p { margin: 0; color: #687991; font-size: 11px; line-height: 1.5; }
.onboarding-interest-list .interest-bookmark-card > button { min-height: 34px; padding: 0 10px; border: 1px solid #d2dce8; border-radius: 8px; background: #fff; color: #5b6c82; font-size: 10px; font-weight: 850; }
.onboarding-reminder-note { display: flex; align-items: center; gap: 13px; margin-top: 16px; padding: 16px; border: 1px solid #bed8fb; border-radius: 12px; background: #f0f7ff; }
.onboarding-reminder-note > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #0b5bd3; color: #fff; }
.onboarding-reminder-note strong { color: #174e90; font-size: 13px; }
.onboarding-reminder-note p { margin: 4px 0 0; color: #526b87; font-size: 11px; line-height: 1.55; }

.onboarding-controller { position: fixed; z-index: 80; right: 20px; bottom: 16px; display: grid; width: min(440px, calc(100% - 32px)); gap: 14px; padding: 18px; border: 1px solid #aecaef; border-radius: 16px; background: rgba(255, 255, 255, .98); box-shadow: 0 20px 55px rgba(18, 53, 97, .25); backdrop-filter: blur(12px); transition: top .2s ease, left .2s ease; }
.onboarding-controller.is-floating::before { position: absolute; left: calc(50% - 8px); width: 16px; height: 16px; border-top: 1px solid #aecaef; border-left: 1px solid #aecaef; background: #fff; content: ""; transform: rotate(45deg); }
.onboarding-controller.is-floating[data-popup-placement="below"]::before { top: -9px; }
.onboarding-controller.is-floating[data-popup-placement="above"]::before { right: auto; bottom: -9px; border: 0; border-right: 1px solid #aecaef; border-bottom: 1px solid #aecaef; }
.onboarding-controller.is-floating[data-popup-placement="bottom"]::before { display: none; }
.onboarding-controller-copy { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; }
.onboarding-controller-copy > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #0b5bd3; color: #fff; font-size: 11px; font-weight: 950; white-space: nowrap; }
.onboarding-controller h2 { margin: 0; color: #172d49; font-size: 17px; letter-spacing: -.035em; }
.onboarding-controller p { margin: 4px 0 0; color: #63758d; font-size: 12px; line-height: 1.5; }
.onboarding-controller-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 13px; border-top: 1px solid #e2e9f2; }
.onboarding-controller-actions button, .onboarding-controller-actions a { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid #c9d6e5; border-radius: 9px; background: #fff; color: #415c79; font: inherit; font-size: 12px; font-weight: 900; text-decoration: none; cursor: pointer; }
.onboarding-controller-actions #tutorialSkipLink { border-color: transparent; background: transparent; color: #68788e; }
.onboarding-controller-actions #tutorialNextButton, .onboarding-controller-actions #tutorialFinishLink { border-color: #0b5bd3; background: #0b5bd3; color: #fff; }
.onboarding-controller-actions button:focus-visible, .onboarding-controller-actions a:focus-visible { outline: 3px solid rgba(11, 91, 211, .28); outline-offset: 2px; }

@media (max-width: 980px) {
  .onboarding-page .notice-header { position: relative; }
  .onboarding-demo-frame .info-page-shell { padding: 24px 18px; }
  .onboarding-demo-frame .company-layout { grid-template-columns: 1fr; }
  .onboarding-demo-frame .company-guide-panel { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  body.onboarding-page { padding-bottom: 178px; }
  .onboarding-screen:not(.onboarding-notices-screen) { width: min(100% - 24px, 620px); margin-top: 16px; }
  .onboarding-screen-heading { align-items: start; }
  .onboarding-screen-heading > p { display: none; }
  .onboarding-demo-frame { border-radius: 13px; }
  .onboarding-notices-frame { border-radius: 0; }
  .onboarding-demo-frame .info-page-shell { padding: 20px 12px 16px; }
  .onboarding-demo-frame .company-guide-panel { grid-template-columns: 1fr; }
  .onboarding-demo-frame .company-guide-panel article:nth-child(n+2) { display: none; }
  .onboarding-demo-frame .company-form-grid { grid-template-columns: 1fr; }
  .onboarding-demo-frame .company-grid-wide { grid-column: auto; }
  .onboarding-company-form .company-save-row { align-items: stretch; flex-direction: column; }
  .onboarding-interest-list .interest-bookmark-card { grid-template-columns: 62px minmax(0, 1fr); }
  .onboarding-interest-list .interest-bookmark-card > button { display: none; }
  .onboarding-controller { width: min(100% - 24px, 440px); gap: 11px; padding: 13px; }
  .onboarding-company-profile-fields.onboarding-focus-active { margin: -8px; padding: 8px; }
  .onboarding-focus-active::before { top: -14px; left: 10px; max-width: calc(100% - 20px); }
  .onboarding-controller-copy { grid-template-columns: 36px minmax(0, 1fr); }
  .onboarding-controller-copy > span { width: 36px; height: 36px; }
  .onboarding-controller h2 { font-size: 14px; }
  .onboarding-controller p { font-size: 10px; }
  .onboarding-controller-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .onboarding-controller-actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .onboarding-page *, .onboarding-page *::before, .onboarding-page *::after { scroll-behavior: auto !important; transition: none !important; }
}