.kl-shell { --kl-ink: #142944; --kl-muted: #586b80; --kl-blue: #0756c7; --kl-border: #dce6ef; color: var(--kl-ink); background: #fff; font: 15px/1.65 "Inter", "Segoe UI", sans-serif; }
.kl-shell *, .kl-shell *::before, .kl-shell *::after { box-sizing: border-box; }
.kl-shell [hidden] { display: none !important; }
.kl-shell h1, .kl-shell h2, .kl-shell h3, .kl-shell p { margin: 0; }
.kl-shell h1, .kl-shell h2, .kl-shell h3 { color: var(--kl-ink); }
.kl-shell a { color: var(--kl-blue); text-decoration: none; }
.kl-shell a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kl-shell a:focus-visible, .kl-shell button:focus-visible, .kl-shell summary:focus-visible, .kl-shell input:focus-visible, .kl-shell select:focus-visible, .kl-shell [tabindex]:focus-visible { outline: 3px solid #1268dd; outline-offset: 4px; }
.kl-shell button, .kl-shell input, .kl-shell select { font: inherit; }
.kl-shell button { cursor: pointer; }
.kl-wrap { width: min(1140px, calc(100% - 80px)); margin-inline: auto; }
.kl-skip { position: absolute; left: 20px; top: -100px; z-index: 30; padding: 12px 18px; background: #fff; border: 1px solid var(--kl-blue); border-radius: 8px; }
.kl-skip:focus { top: 12px; }
.kl-header { min-height: 99px; padding-block: 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.kl-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 800; color: var(--kl-ink) !important; letter-spacing: -.7px; flex-shrink: 0; }
.kl-brand-mark { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #fff; background: #0756c7; overflow: hidden; }
.kl-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.kl-header-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 22px; font-size: 13px; font-weight: 650; }
.kl-header-links > a { min-height: 44px; display: inline-flex; align-items: center; color: #42556c; }
.kl-shell .kl-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 17px; color: var(--kl-blue); background: #fff; border: 1px solid #c6d7e9; border-radius: 11px; font-size: 13px; font-weight: 750; line-height: 1.5; text-align: center; text-decoration: none; }
.kl-shell .kl-button:hover { border-color: #8caed7; background: #f4f8fd; }
.kl-shell .kl-button-primary { background: var(--kl-blue); color: #fff; border-color: var(--kl-blue); box-shadow: 0 5px 12px rgba(7, 86, 199, .09); }
.kl-shell .kl-button-primary:hover { background: #064caf; border-color: #064caf; }
.kl-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; font-weight: 750; }
.kl-hero { padding: 69px 0 74px; background: linear-gradient(110deg, #eef5ff 0%, #f3f8fc 49%, #eef8f5 100%); border-block: 1px solid #e7edf4; }
.kl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .92fr); align-items: center; gap: 74px; }
.kl-shell .kl-eyebrow { color: #4d6c85; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.3px; line-height: 1.7; }
.kl-eyebrow > span { display: inline-block; width: 6px; height: 6px; margin: 0 6px 2px 0; border-radius: 50%; background: #148578; }
.kl-shell h1 { margin: 17px 0 22px; font: 750 clamp(38px, 4.6vw, 58px)/1.08 "Space Grotesk", "Segoe UI", sans-serif; letter-spacing: -2.4px; }
.kl-shell .kl-intro { max-width: 530px; color: var(--kl-muted); font-size: 16px; line-height: 1.8; }
.kl-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 23px; margin-top: 27px; }
.kl-shell .kl-reassurance { margin-top: 19px; color: #617486; font-size: 12px; line-height: 1.7; }
.kl-map { padding: 25px; background: rgba(255,255,255,.97); border: 1px solid #d6e4eb; border-radius: 23px; box-shadow: 0 22px 48px rgba(31,66,90,.07); transform: rotate(1.2deg); }
.kl-map-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 3px 20px; }
.kl-map-label { color: #6a7c8e; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; }
.kl-map-dot { width: 7px; height: 7px; border-radius: 50%; background: #5d9f95; box-shadow: 0 0 0 5px #eef7f5; }
.kl-shell .kl-map-row { display: flex; align-items: center; gap: 14px; padding: 19px 1px; border-top: 1px solid #e9eef2; text-decoration: none; }
.kl-map-row strong { display: block; color: var(--kl-ink); font-size: 14px; line-height: 1.5; }
.kl-map-row small { display: block; color: #66788a; font-size: 12px; line-height: 1.7; margin-top: 4px; }
.kl-map-row:hover strong { color: var(--kl-blue); text-decoration: underline; text-underline-offset: 3px; }
.kl-map-icon { width: 42px; height: 45px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.kl-map-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kl-icon-sell { color: #2762b0; background: #edf3fd; }
.kl-icon-buy { color: #17766b; background: #eaf7f2; }
.kl-icon-check { color: #6f5b9a; background: #f2eff9; }
.kl-map-arrow { flex: 0 0 auto; margin-left: auto; color: #6d8295; font-size: 19px; }
.kl-map-note { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 12px; color: #678073; background: #f1f7f4; border-radius: 9px; font-size: 11px; }
.kl-map-note > span { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border: 1px solid #92afa3; border-radius: 50%; font-size: 10px; font-weight: 750; flex: 0 0 16px; }
.kl-first-section { padding-block: 66px; }
.kl-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 27px; scroll-margin-top: 25px; }
.kl-shell h2 { margin: 7px 0 0; font: 700 clamp(25px, 3vw, 33px)/1.2 "Space Grotesk", "Segoe UI", sans-serif; letter-spacing: -1px; }
.kl-section-heading > p { color: var(--kl-muted); font-size: 13px; line-height: 1.8; }
.kl-first-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; list-style: none; padding: 0; margin: 0; }
.kl-first-steps li { min-width: 0; }
.kl-first-steps a { display: flex; height: 100%; flex-direction: column; align-items: flex-start; padding: 26px; border: 1px solid var(--kl-border); border-radius: 17px; text-decoration: none !important; background: #fff; transition: border-color .15s, box-shadow .15s; }
.kl-first-steps a:hover { border-color: #a8c3e4; box-shadow: 0 6px 18px rgba(35,71,110,.05); }
.kl-step-number { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 23px; border-radius: 10px; color: #3569a8; background: #eef4fc; font-size: 11px; font-weight: 800; }
.kl-first-steps li:nth-child(2) .kl-step-number { color: #157567; background: #edf7f2; }
.kl-first-steps li:nth-child(3) .kl-step-number { color: #72599e; background: #f4f0fa; }
.kl-first-steps h3 { font-size: 17px; font-weight: 750; letter-spacing: -.4px; line-height: 1.45; margin-bottom: 10px; }
.kl-first-steps p { color: var(--kl-muted); font-size: 13px; line-height: 1.75; margin-bottom: 21px; }
.kl-step-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; font-size: 11px; font-weight: 750; line-height: 1.6; }
.kl-setup-note { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 21px; padding: 20px 23px; background: #f5f8fb; border: 1px solid #e8eef4; border-radius: 13px; }
.kl-setup-note strong { font-size: 13px; }
.kl-setup-note p { max-width: 650px; margin-top: 4px; color: var(--kl-muted); font-size: 12px; }
.kl-setup-note .kl-button { flex-shrink: 0; }
.kl-guide-section { padding: 65px 0; background: #f7f9fc; border-block: 1px solid #e8edf4; }
.kl-search-panel { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: end; gap: 18px; margin-bottom: 13px; }
.kl-search-field label, .kl-category-field { display: block; font-size: 12px; font-weight: 750; color: #415971; }
.kl-search-input-wrap { display: flex; align-items: center; min-height: 49px; background: #fff; border: 1px solid #cad8e6; border-radius: 10px; margin-top: 7px; }
.kl-search-input-wrap > svg { width: 19px; height: 19px; margin-left: 15px; flex: 0 0 19px; fill: none; stroke: #6b839b; stroke-width: 1.7; stroke-linecap: round; }
.kl-shell .kl-search-input-wrap input { min-width: 0; width: 100%; border: 0; border-radius: 10px; padding: 13px 12px; background: transparent; color: var(--kl-ink); font-size: 13px; box-shadow: none; margin: 0; }
.kl-search-input-wrap input::placeholder { color: #728397; opacity: 1; }
.kl-search-input-wrap:focus-within { outline: 3px solid #1268dd; outline-offset: 3px; }
.kl-shell .kl-search-input-wrap input:focus-visible { outline: none; }
.kl-shell .kl-search-clear { border: 0; background: transparent; color: var(--kl-blue); min-height: 44px; margin: 0 5px 0 0; padding: 7px 11px; font-size: 12px; font-weight: 650; box-shadow: none; }
.kl-shell .kl-category-field select { display: block; width: 100%; min-height: 49px; padding: 11px 13px; margin: 7px 0 0; border: 1px solid #cad8e6; border-radius: 10px; background: #fff; color: #38516c; font-size: 13px; font-weight: 500; }
.kl-shell .kl-result-count { margin: 0 0 14px; color: #61768c; font-size: 12px; min-height: 20px; }
.kl-guide-list { display: grid; gap: 13px; }
.kl-guide { border: 1px solid #dae4ef; border-radius: 15px; background: #fff; scroll-margin-top: 22px; overflow: visible; }
.kl-guide[open] { border-color: #a9c2e1; box-shadow: 0 5px 18px rgba(35,71,110,.035); }
.kl-guide summary { display: flex; align-items: center; gap: 20px; min-height: 116px; padding: 23px 27px; list-style: none; cursor: pointer; border-radius: 15px; }
.kl-guide summary::-webkit-details-marker { display: none; }
.kl-guide summary:hover { background: #fbfdff; }
.kl-guide-number { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; margin-top: 4px; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #dfe8f2; border-radius: 10px; color: #6e8298; font-size: 11px; font-weight: 750; }
.kl-guide-summary { display: grid; gap: 4px; flex: 1; min-width: 0; }
.kl-guide-category { font-size: 9px; letter-spacing: 1px; font-weight: 800; text-transform: uppercase; color: #66829b; }
.kl-guide-title { font-size: 17px; font-weight: 750; line-height: 1.45; letter-spacing: -.25px; color: var(--kl-ink); }
.kl-guide-description { font-size: 12px; line-height: 1.8; color: var(--kl-muted); }
.kl-expand { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 50%; background: #edf4fc; color: #3974bd; font-size: 23px; font-weight: 300; line-height: 1; }
.kl-guide[open] .kl-expand { transform: rotate(45deg); }
.kl-guide-content { padding: 0 27px 27px 81px; }
.kl-instructions { display: grid; gap: 15px; margin: 0; padding: 19px 0 0; border-top: 1px solid #e8eef4; counter-reset: guide-step; list-style: none; }
.kl-instructions li { display: flex; align-items: flex-start; gap: 13px; color: #445c73; font-size: 13px; line-height: 1.9; }
.kl-instructions li::before { counter-increment: guide-step; content: counter(guide-step); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 23px; height: 23px; margin-top: 2px; background: #eff4fa; border-radius: 7px; color: #5d7896; font-size: 10px; font-weight: 750; }
.kl-shell .kl-tip { display: flex; flex-direction: column; gap: 4px; margin-top: 23px; padding: 15px 18px; border-radius: 10px; background: #eef7f4; color: #3b6b61; font-size: 12px; line-height: 1.85; }
.kl-tip strong { color: #286358; font-size: 11px; }
.kl-guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
.kl-shell .kl-signin-hint { margin-top: 19px; color: var(--kl-muted); font-size: 12px; }
.kl-signin-hint a { text-decoration: underline; text-underline-offset: 3px; }
.kl-no-results { padding: 40px 24px; text-align: center; border: 1px dashed #bed0e4; border-radius: 16px; background: #fff; }
.kl-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 37px; margin-bottom: 15px; border-radius: 50%; background: #ecf3fc; color: #4074b5; font-weight: 700; }
.kl-no-results h3 { font-size: 18px; margin-bottom: 6px; }
.kl-no-results p { color: var(--kl-muted); font-size: 13px; }
.kl-no-results > div { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 21px; }
.kl-glossary-section { padding-block: 64px; }
.kl-glossary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; padding: 0; margin: 0; }
.kl-glossary > div { padding: 20px 0 0; border-top: 2px solid #dce7f2; }
.kl-glossary dt { font-size: 14px; font-weight: 750; margin-bottom: 9px; }
.kl-glossary dd { margin: 0; color: var(--kl-muted); font-size: 12px; line-height: 1.8; }
.kl-support-section { padding-bottom: 63px; }
.kl-support-card { display: flex; align-items: center; gap: 27px; padding: 34px; border-radius: 21px; border: 1px solid #d9e7ed; background: linear-gradient(115deg, #eef5ff, #eef8f5); }
.kl-support-icon { width: 60px; height: 60px; flex: 0 0 60px; display: inline-flex; align-items: center; justify-content: center; border-radius: 17px; background: rgba(255,255,255,.75); border: 1px solid #dbe7ef; color: #317c84; }
.kl-support-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kl-support-card > div { flex: 1; min-width: 0; }
.kl-support-card h2 { font-size: 28px; margin: 5px 0 11px; }
.kl-support-card p:not(.kl-eyebrow) { max-width: 590px; color: #526c7c; font-size: 13px; line-height: 1.8; }
.kl-support-card .kl-support-hours { margin-top: 11px; font-size: 11px !important; }
.kl-support-card > .kl-button { flex-shrink: 0; }
.kl-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding-block: 22px 30px; border-top: 1px solid #e2eaf2; color: #6c7d8e; font-size: 11px; }
.kl-footer a { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; }
.kl-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
  .kl-wrap { width: calc(100% - 48px); }
  .kl-hero-grid { gap: 37px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .kl-map { padding: 19px; }
  .kl-map-row { gap: 10px !important; }
  .kl-support-card { gap: 20px; padding: 28px; }
  .kl-support-icon { display: none; }
  .kl-first-steps a { padding: 21px; }
}
@media (max-width: 760px) {
  .kl-header { align-items: flex-start; gap: 16px; }
  .kl-header-links { gap: 6px 16px; font-size: 11px; }
  .kl-header-links .kl-button { font-size: 11px; min-height: 44px; padding: 9px 12px; }
  .kl-hero { padding-block: 42px; }
  .kl-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .kl-shell h1 { font-size: 45px; letter-spacing: -1.7px; }
  .kl-map { width: 100%; max-width: 510px; transform: none; padding: 23px; }
  .kl-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .kl-section-heading > p br { display: none; }
  .kl-first-section, .kl-guide-section, .kl-glossary-section { padding-block: 44px; }
  .kl-first-steps { grid-template-columns: 1fr; gap: 13px; }
  .kl-first-steps a { padding: 23px; }
  .kl-step-number { margin-bottom: 17px; }
  .kl-first-steps h3 { font-size: 19px; }
  .kl-first-steps p { margin-bottom: 18px; }
  .kl-step-link { max-width: 290px; font-size: 12px; }
  .kl-setup-note { align-items: flex-start; flex-direction: column; gap: 17px; padding: 20px; }
  .kl-search-panel { grid-template-columns: minmax(0,1fr) 180px; gap: 13px; }
  .kl-guide summary { padding: 21px; gap: 13px; }
  .kl-guide-number { display: none; }
  .kl-guide-content { padding: 0 21px 23px; }
  .kl-glossary { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 27px; }
  .kl-support-card { align-items: flex-start; flex-direction: column; gap: 23px; padding: 28px; }
  .kl-support-section { padding-bottom: 38px; }
}
@media (max-width: 480px) {
  .kl-wrap { width: calc(100% - 36px); }
  .kl-header { padding-block: 17px; flex-direction: column; gap: 12px; }
  .kl-brand { font-size: 21px; }
  .kl-header-links { width: 100%; justify-content: flex-start; gap: 8px 15px; }
  .kl-header-links > a { font-size: 11px; }
  .kl-header-links > .kl-button { margin-left: auto; }
  .kl-shell h1 { font-size: 40px; }
  .kl-shell .kl-intro { font-size: 14px; }
  .kl-hero-actions { gap: 8px 15px; }
  .kl-hero-actions .kl-button { width: 100%; }
  .kl-shell .kl-eyebrow { font-size: 9px; letter-spacing: 1.05px; }
  .kl-map { padding: 19px; border-radius: 18px; }
  .kl-map-row strong { font-size: 13px; }
  .kl-map-row small { font-size: 11px; }
  .kl-map-icon { width: 34px; height: 39px; flex-basis: 34px; border-radius: 10px; }
  .kl-map-arrow { font-size: 16px; }
  .kl-map-note { font-size: 10px; }
  .kl-shell h2 { font-size: 26px; }
  .kl-search-panel { grid-template-columns: 1fr; gap: 15px; }
  .kl-guide summary { min-height: 108px; padding: 18px; gap: 11px; }
  .kl-guide-title { font-size: 15px; }
  .kl-guide-description { font-size: 11px; }
  .kl-expand { width: 26px; height: 26px; flex-basis: 26px; font-size: 20px; }
  .kl-guide-content { padding: 0 18px 20px; }
  .kl-instructions li { font-size: 12px; gap: 10px; }
  .kl-shell .kl-tip { padding: 13px; font-size: 11px; }
  .kl-guide-actions { flex-direction: column; align-items: stretch; }
  .kl-glossary { gap: 24px 22px; }
  .kl-glossary dd { font-size: 11px; }
  .kl-support-card { padding: 23px; border-radius: 17px; }
  .kl-support-card > .kl-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kl-first-steps a { transition: none; } }

/* Signed-in guidance shares the application navigation and available content width. */
.kl-workspace { min-width: 0; background: transparent; font-size: 14px; }
.kl-workspace .kl-wrap { width: 100%; }
.kl-workspace section { border-radius: 0; box-shadow: none; border: 0; }
.kl-workspace .kl-hero { padding: 0 0 30px; background: transparent; }
.kl-workspace .kl-hero-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 26px; }
.kl-workspace h1 { font-size: clamp(28px,3vw,38px); letter-spacing: -.035em; margin: 12px 0 18px; }
.kl-workspace .kl-intro { font-size: 14px; }
.kl-workspace .kl-map { transform: none; padding: 20px; }
.kl-workspace .kl-first-section,.kl-workspace .kl-guide-section,.kl-workspace .kl-glossary-section,.kl-workspace .kl-support-section { padding: 30px 0; border-top: 1px solid var(--kl-border); background: transparent; }
.kl-workspace .kl-section-heading,.kl-workspace .kl-guide { scroll-margin-top: 100px; }
.kl-workspace h2 { font-size: 25px; }
.kl-workspace .kl-first-steps { gap: 14px; }
.kl-workspace .kl-first-steps a { padding: 20px; }
@media(max-width:900px) { .kl-workspace .kl-hero-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:599px) { .kl-workspace .kl-first-section,.kl-workspace .kl-guide-section,.kl-workspace .kl-glossary-section,.kl-workspace .kl-support-section { padding: 24px 0; } .kl-workspace .kl-map { padding: 16px; } }
