/* Scoped home section boundaries and audience controls. Existing descriptions stay in HTML. */
:is(#features,#usageflow).kn-home-guidance { margin: 0; padding: 0; scroll-margin-top: 100px; background: #fff; }
:is(#features,#usageflow).kn-home-guidance > .topre-title { padding: 44px 16px 24px; background: none; text-align: center; }
:is(#features,#usageflow).kn-home-guidance .h2-pin { margin: 0; padding: 0; color: #09243e; font-size: 30px; line-height: 1.4; background: none; }
:is(#features,#usageflow).kn-home-guidance .h2-pin span { margin: 0; padding: 0; }
:is(#features,#usageflow).kn-home-guidance .h2-pin::before,
:is(#features,#usageflow).kn-home-guidance .h2-pin span::before { content: none; display: none; }
:is(#features,#usageflow).kn-home-guidance .kn-guidance-eyebrow { margin: 0 0 10px; padding: 0; color: #0065af; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .16em; }
:is(#features,#usageflow).kn-home-guidance > .tab-btn { display: flex; gap: 6px; width: min(90%,440px); margin: 0 auto 20px; padding: 5px; border: 1px solid #cedce5; border-radius: 13px; background: #e4edf3; box-sizing: border-box; }
:is(#features,#usageflow).kn-home-guidance > .tab-btn .btn { display: flex; flex: 1 1 0; align-items: center; justify-content: center; width: auto; min-width: 0; min-height: 48px; margin: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #38566c; opacity: 1; font-size: 16px; font-weight: 700; line-height: 1.5; box-sizing: border-box; cursor: pointer; transition: background-color .15s; }
:is(#features,#usageflow).kn-home-guidance > .tab-btn .btn:hover { background: #f6f9fb; }
:is(#features,#usageflow).kn-home-guidance > .tab-btn .btn.is-active { border-color: #0065af; background: #0065af; color: #fff; box-shadow: 0 2px 6px #183b561a; }
:is(#features,#usageflow).kn-home-guidance > .tab-btn .btn-02.is-active { border-color: #176d75; background: #176d75; }
:is(#features,#usageflow).kn-home-guidance > .tab-btn .btn:focus-visible { outline: 3px solid #0065af; outline-offset: 3px; }
:is(#features,#usageflow).kn-home-guidance > .tab-contents { background: #fff; }
:is(#features,#usageflow).kn-home-guidance > .tab-contents::before,
:is(#features,#usageflow).kn-home-guidance > .tab-contents::after { content: none; display: none; animation: none; }
@media (max-width: 700px) {
  :is(#features,#usageflow).kn-home-guidance > .topre-title { padding: 32px 16px 20px; }
  :is(#features,#usageflow).kn-home-guidance .h2-pin { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#features,#usageflow).kn-home-guidance > .tab-btn .btn { transition: none; }
}

/* Keep the board controls inside their own background instead of underneath the next section. */
.kn-board-home.recruit-container { padding-bottom: 32px; }
#features.kn-home-guidance { border-top: 1px solid #dce6ed; }
@media (max-width: 768px) {
  .kn-board-home.recruit-container { padding-bottom: 28px; }
  :is(#features,#usageflow).kn-home-guidance { scroll-margin-top: 80px; }
  #usageflow.kn-home-guidance .flow-card-ui { padding-top: 8px; }
  #usageflow.kn-home-guidance .flow-route { margin: 0 0 18px; padding: 18px 0 14px; border: 1px solid #d5e2eb; border-radius: 18px; background: #f4f8fb; overflow: hidden; box-sizing: border-box; }
  #usageflow.kn-home-guidance .flow-route + .flow-route { margin-top: 18px; padding-top: 18px; border-radius: 18px; background: #f3f8f7; }
  #usageflow.kn-home-guidance .flow-route-head { gap: 10px; margin-bottom: 12px; padding: 0 16px; }
  #usageflow.kn-home-guidance .flow-route-head h3 { font-size: 18px; line-height: 1.45; }
  #usageflow.kn-home-guidance .flow-route-head h3 span { border: 1px solid #bed2df; border-radius: 8px; color: #0065af; background: #fff; font-size: 16px; }
  #usageflow.kn-home-guidance .flow-route-head small { padding: 6px 8px; background: #e4edf4; color: #38566c; line-height: 1.3; }
  #usageflow.kn-home-guidance .flow-card-track { position: relative; box-sizing: border-box; gap: 14px; padding: 8px max(28px,calc((100% - 310px)/2)) 20px; scroll-padding-inline: 28px; overscroll-behavior-x: contain; }
  #usageflow.kn-home-guidance .flow-step-card { flex: 0 0 100%; max-width: 310px; min-width: 0; border: 1px solid #cddde7; box-shadow: 0 5px 15px #183b5614; border-radius: 14px; }
  #usageflow.kn-home-guidance .flow-step-ribbon { color: #fff; background: #164a70; box-shadow: none; }
  #usageflow.kn-home-guidance .flow-step-card p { line-height: 1.65; }
  #usageflow.kn-home-guidance .flow-step-card b { color: #526b7e; font-size: 12px; }
  #usageflow.kn-home-guidance .kn-flow-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 16px 8px; }
  #usageflow.kn-home-guidance .kn-flow-controls button { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 12px; border: 1px solid #bfd3df; border-radius: 50%; color: #175674; background: #fff; box-shadow: 0 2px 5px #183b560a; cursor: pointer; box-sizing: border-box; }
  #usageflow.kn-home-guidance .kn-flow-controls button:disabled { color: #9aadb9; border-color: #d8e3e9; background: #f8fafb; box-shadow: none; cursor: default; }
  #usageflow.kn-home-guidance .kn-flow-controls button:not(:disabled):hover { background: #e5f2f8; }
  #usageflow.kn-home-guidance .kn-flow-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  #usageflow.kn-home-guidance .kn-flow-prev svg { transform: rotate(180deg); }
  #usageflow.kn-home-guidance .flow-card-dots { gap: 6px; align-items: center; min-height: 10px; margin: 0; }
  #usageflow.kn-home-guidance .flow-card-dots li { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 6px; background: #bbcdd9; }
  #usageflow.kn-home-guidance .flow-card-dots li.is-active { width: 22px; background: #0065af; }
  #usageflow.kn-home-guidance .flow-swipe-hint { gap: 8px; margin: 0; padding: 0 12px; color: #526b7e; font-size: 12px; line-height: 1.6; }
  #usageflow.kn-home-guidance .flow-swipe-hint img { width: 28px; height: 22px; flex-basis: 28px; }
  #usageflow.kn-home-guidance .flow-note-box { margin: 18px 0 0; padding: 18px; border: 1px solid #e1c8a5; border-radius: 16px; background: #fffaf3; box-shadow: 0 4px 14px #80501e0a; }
  #usageflow.kn-home-guidance .flow-note-label { position: static; display: flex; gap: 8px; min-width: 0; margin: -18px -18px 14px; padding: 12px 18px; border-bottom: 1px solid #ead9c0; border-radius: 0; background: #f6ead9; box-shadow: none; color: #80501e; font-size: 17px; font-weight: 700; line-height: 1.5; }
  #usageflow.kn-home-guidance .flow-note-label::after { content: none; display: none; }
  #usageflow.kn-home-guidance .flow-note-label span { width: 22px; height: 22px; border: 1px solid #dfc49e; border-radius: 7px; color: #80501e; background: #fffaf3; font-size: 15px; }
  #usageflow.kn-home-guidance .flow-note-box li { min-height: 26px; padding-left: 36px; color: #4e463a; font-size: 14px; font-weight: 400; line-height: 1.8; overflow-wrap: anywhere; }
  #usageflow.kn-home-guidance .flow-note-box li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eadcc9; }
  #usageflow.kn-home-guidance .flow-note-box li::before { width: 26px; height: 26px; border: 1px solid #dfc49e; color: #80501e; background: #fff; font-size: 13px; font-weight: 700; }
  #usageflow.kn-home-guidance .flow-note-box li + li::before { top: 12px; }
  #usageflow.kn-home-guidance :is(.kn-flow-controls button,.flow-card-track):focus-visible { outline: 3px solid #0065af; outline-offset: 3px; }
}